/* Reference artwork is decorative; all copy and controls remain live HTML. */
:root {
  --home-serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
}
.wordmark-emblem { width: 28px; height: 28px; flex: none; color: var(--accent); }
.nav-button svg { width: 21px; height: 21px; }

body[data-theme] {
  --home-paper: #080a0c;
  --home-ink: #f8eed8;
  --home-secondary: #cabb9e;
  --home-gold: #e4bf72;
  --home-scene: url("assets/home/black-gold-backdrop.webp");
  background: #101114;
}
body[data-theme="soft-pink"] {
  --home-paper: #f3e9e3;
  --home-ink: #654b51;
  --home-secondary: #806168;
  --home-gold: #98546a;
  --home-scene: url("assets/home/soft-pink-backdrop.webp");
  background: #e9dcd7;
}
body .app-shell {
  position: relative;
  isolation: isolate;
  width: min(100%, 480px);
  min-height: 100svh;
  margin-inline: auto;
  background: var(--home-paper);
  container-type: inline-size;
}
body[data-screen="home"] .app-shell::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 1;
  background: var(--home-scene) center top / 100% 100% no-repeat;
  mask-image: none;
}
body[data-screen="home"][data-theme="black-gold"] .app-shell::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 55%;
  pointer-events: none;
  background: linear-gradient(116deg, transparent 20%, #e4b57710 28%, #e4b57704 34%, transparent 39%);
}
body .topbar {
  height: 62px;
  padding: max(10px, env(safe-area-inset-top)) 4.4% 8px;
}
body .wordmark {
  min-height: 44px;
  color: var(--home-ink);
  font-family: var(--home-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .04em;
  gap: 7px;
}
body .wordmark-emblem { width: 25px; height: 25px; color: var(--home-gold); }
body .topbar-actions { gap: 7px; }
body .theme-switch {
  padding: 2px;
  border-color: #bd985b52;
  background: linear-gradient(140deg, #24211daa, #0b0d1299);
  box-shadow: inset 0 1px 0 #f4d99c19;
}
body .theme-option {
  min-height: 28px;
  min-width: 43px;
  position: relative;
  font-family: var(--home-serif);
  color: #d1c2a8;
  font-weight: 400;
}
/* Keep the delicate visual pill and give each option a 44px touch target. */
body .theme-option::before { content: ""; position: absolute; inset: -8px 0; }
body .theme-option.is-active {
  background: linear-gradient(125deg, #f5d58c, #d4a85b);
  color: #322617;
  box-shadow: 0 2px 8px #e6be6330, inset 0 1px 0 #fff2c48a;
}
body .bag-button {
  min-width: 44px;
  min-height: 30px;
  border-radius: 30px;
  border-color: #bd985b40;
  color: var(--home-secondary);
  background: #10101355;
  font-family: var(--home-serif);
}
body .bag-button::after { content: ""; position: absolute; inset: -7px 0; }
body .bag-button b { width: 14px; height: 14px; top: -5px; font-size: 9px; }
body .bag-button b:empty { display: none; }
body[data-screen="home"] .main-content {
  width: 100%;
  min-height: 0;
  padding: 0;
}
#screen-home {
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: calc(100svh - 62px);
  padding: 0 0 max(108px, calc(env(safe-area-inset-bottom) + 92px));
  animation: none;
  isolation: isolate;
}
#screen-home::before, #screen-home::after { display: none; }
#screen-home .home-grid { display: contents; }
#screen-home .hero-copy {
  position: relative;
  z-index: 2;
  padding: 18px 6% 0;
  text-align: center;
}
#screen-home .eyebrow {
  margin: 0 0 20px;
  color: var(--home-gold);
  font-family: Georgia, serif;
  font-size: clamp(8px, 2.1cqw, 10px);
  letter-spacing: .32em;
  font-weight: 500;
}
#screen-home h1 {
  position: relative;
  z-index: 1;
  max-width: none;
  margin: 0;
  color: var(--home-ink);
  font-family: var(--home-serif);
  font-size: clamp(36px, 10.8cqw, 52px);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1.18;
  text-shadow: 0 2px 15px #e6bd6220;
}
#screen-home h1 em { display: inline-block; color: var(--home-gold); font-size: 1.15em; letter-spacing: .03em; }
#screen-home .hero-description {
  position: relative;
  z-index: 1;
  max-width: none;
  margin: 16px 0 0;
  color: var(--home-secondary);
  font-family: var(--home-serif);
  font-size: clamp(12px, 3.25cqw, 16px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .02em;
}
.headline-orbit {
  position: absolute;
  width: 74%;
  left: 13%;
  top: 82px;
  opacity: .86;
  pointer-events: none;
}
#screen-home .hero-card-stage {
  display: flex;
  position: relative;
  flex: 0 0 auto;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
  margin: clamp(12px, 2.5svh, 26px) 0 0;
  padding: 0;
  overflow: visible;
}
#screen-home .hero-card-stage::before, #screen-home .hero-card-stage::after { display: none; }
.hero-tableau { position: relative; width: 100%; aspect-ratio: 558 / 406; }
.hero-tableau-image {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Feather the artwork join; never blur card detail. */
  mask-image: linear-gradient(180deg, transparent, #000 8%, #000 95%, transparent);
}
.tableau-light { visibility: hidden; }
#home-starlight { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#screen-home .home-actions {
  position: relative;
  z-index: 3;
  width: 85.5%;
  max-width: none;
  margin: 10px auto 0;
  gap: 4px;
}
#screen-home .primary-button {
  min-height: 50px;
  border: 1px solid #f8dfa658;
  color: #352614;
  background: linear-gradient(110deg, #dcae5d 0%, #f5d893 42%, #dfb468 100%);
  box-shadow: inset 0 1px 0 #fff0b87a, 0 9px 22px #c390372b;
  font-family: var(--home-serif);
  font-size: 16px;
  font-weight: 600;
  gap: 10px;
}
#screen-home .primary-button:hover { filter: brightness(1.05); transform: none; }
#screen-home .primary-button:active { filter: brightness(.96); transform: scale(.985); }
#screen-home .text-button {
  min-height: 44px;
  padding: 0;
  color: var(--home-secondary);
  font-family: var(--home-serif);
  font-size: 12px;
}
#screen-home .home-proof {
  display: flex;
  position: relative;
  z-index: 2;
  margin: 5px 0 0;
  padding: 0 12px;
  color: var(--home-secondary);
  font-family: var(--home-serif);
  font-size: 10px;
  gap: 11px;
  letter-spacing: .08em;
}
body .bottom-nav {
  width: min(calc(100% - 30px), 450px);
  min-height: 62px;
  padding: 4px;
  border: 1px solid #cfab663d;
  border-radius: 24px;
  background: linear-gradient(130deg, #161318eb, #0d0e15e8);
  box-shadow: 0 10px 26px #03050860, inset 0 1px 0 #fff1c910;
}
body .nav-button {
  min-height: 52px;
  border-radius: 21px;
  color: #b6a58c;
  font-family: var(--home-serif);
  gap: 4px;
}
body .nav-button > span { font-size: 11px; }
body .nav-button.is-active {
  color: #332816;
  background: linear-gradient(120deg, #eaca84, #d7b061);
  box-shadow: 0 0 0 2px #d2aa4930, 0 3px 10px #d2aa4920;
}
body[data-theme="soft-pink"] .theme-switch { border-color: #d6bab040; background: #fff9f444; box-shadow: none; }
body[data-theme="soft-pink"] .theme-option { color: #795b64; }
body[data-theme="soft-pink"] .theme-option.is-active { background: linear-gradient(120deg, #a05b71, #934b61); color: #fff8f3; box-shadow: 0 2px 9px #9d6c7233, inset 0 1px 0 #ffffff55; }
body[data-theme="soft-pink"] .bag-button { border-color: #d6bab050; background: #fff9f430; }
body[data-theme="soft-pink"] #screen-home h1 { font-size: clamp(32px, 9cqw, 45px); font-weight: 400; letter-spacing: .015em; text-shadow: none; }
body[data-theme="soft-pink"] #screen-home h1 em { font-size: 1.16em; }
body[data-theme="soft-pink"] #screen-home .hero-copy { padding-top: 28px; }
body[data-theme="soft-pink"] #screen-home .eyebrow { margin-bottom: 18px; font-size: 8px; letter-spacing: .3em; }
body[data-theme="soft-pink"] #screen-home .eyebrow::before,
body[data-theme="soft-pink"] #screen-home .eyebrow::after { content: ""; display: inline-block; width: 11px; height: 1px; margin: 0 10px 3px; background: #b97785; opacity: .7; }
body[data-theme="soft-pink"] .headline-orbit { display: none; }
body[data-theme="soft-pink"] .tableau-dark { visibility: hidden; }
body[data-theme="soft-pink"] .tableau-light { visibility: visible; }
body[data-theme="soft-pink"] #screen-home .primary-button {
  color: #fff6f0;
  background: linear-gradient(115deg, #874155, #a35a6e 57%, #8c465c);
  border-color: #ac65745c;
  font-weight: 400;
  box-shadow: inset 0 1px 0 #fff7ec59, 0 9px 17px #94536236;
}
body[data-theme="soft-pink"] .bottom-nav { background: #fff7f16b; border-color: #ffffff40; border-radius: 17px; box-shadow: 0 8px 20px #7e56572b, inset 0 1px 0 #fffaf244; }
body[data-theme="soft-pink"] .nav-button { color: #825966; border-radius: 14px; }
body[data-theme="soft-pink"] .nav-button.is-active { color: #fff5ef; background: linear-gradient(120deg, #984f65, #844153); box-shadow: 0 3px 8px #97546830; }
@media (max-height: 740px) and (orientation: portrait) {
  body .topbar { height: 56px; }
  #screen-home { min-height: calc(100svh - 56px); padding-bottom: 90px; }
  #screen-home .hero-copy, body[data-theme="soft-pink"] #screen-home .hero-copy { padding-top: 10px; }
  #screen-home .eyebrow, body[data-theme="soft-pink"] #screen-home .eyebrow { margin-bottom: 12px; }
  #screen-home .hero-description { margin-top: 12px; }
  #screen-home .hero-card-stage { margin-top: 10px; }
  .hero-tableau { width: 86%; }
  #screen-home .home-actions { gap: 0; }
  #screen-home .headline-orbit { top: 65px; }
}
@media (prefers-reduced-motion: reduce) {
  #screen-home *, #screen-home *::before, #screen-home *::after { animation: none !important; transition: none !important; }
}