/* ============================================================
   Welcome to Hotel Earth — The Game of Life
   Brand system: "Aged Paper & Midnight"
   Timeless & Literary. Tagline: Life is just a game. Welcome to Hotel Earth.
   Headings = Fraunces (serif, opsz). Reading body = Newsreader serif.
   UI chrome = Inter Tight. CJK = Noto Serif/Sans SC+TC.
   Accent = antique gold; secondary = deep teal.
   ============================================================ */

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(3rem, 0.5rem + 7vw, 7.5rem);

  /* Spacing */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;   --space-24: 6rem;  --space-32: 8rem;

  --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem;
  --radius-xl: 1rem; --radius-full: 9999px;
  --transition: 220ms cubic-bezier(0.16, 1, 0.3, 1);

  --content-narrow: 680px;
  --content-default: 1000px;
  --content-wide: 1240px;

  /* Brand typography — Fraunces display, Newsreader long-form reading, Inter Tight UI */
  --font-display: 'Fraunces', 'Noto Serif TC', 'Noto Serif SC', Georgia, 'Times New Roman', serif;
  --font-read: 'Newsreader', 'Noto Serif TC', 'Noto Serif SC', Georgia, serif;
  --font-body: 'Inter Tight', 'Noto Sans TC', 'Noto Sans SC', -apple-system, system-ui, sans-serif;
}

/* CJK editions lean on Noto Serif for display so the literary tone carries across scripts */
html[lang='zh-Hans'] { --font-display: 'Noto Serif SC', 'Fraunces', Georgia, serif; --font-read: 'Noto Serif SC', 'Newsreader', Georgia, serif; --font-body: 'Noto Sans SC', 'Inter Tight', system-ui, sans-serif; }
html[lang='zh-HK'], html[lang='zh-Hant'] { --font-display: 'Noto Serif TC', 'Fraunces', Georgia, serif; --font-read: 'Noto Serif TC', 'Newsreader', Georgia, serif; --font-body: 'Noto Sans TC', 'Inter Tight', system-ui, sans-serif; }

/* LIGHT — Aged Paper. Antique gold accent, deep teal secondary. */
:root, [data-theme='light'] {
  --color-bg: #F4F1E8;
  --color-surface: #FBF9F2;
  --color-surface-2: #FFFFFF;
  --color-surface-offset: #EDE9DC;
  --color-border: #D9D3C3;
  --color-divider: #E4DFD0;
  --color-text: #1F1C16;
  --color-text-muted: #6A655A;
  --color-text-faint: #A8A292;
  --color-text-inverse: #F4F1E8;
  --color-primary: #A87B2E;
  --color-primary-hover: #8C6622;
  --color-primary-soft: #ECE0C6;
  --color-gold: #A87B2E;
  --color-gold-bright: #C2933D;
  --color-teal: #1E5E63;
  --color-teal-soft: #D2E1E1;
  /* Book-cover palette tokens (used to align all surfaces to the cover) */
  --color-cover-cream: #F4EEDF;
  --color-cover-teal: #104A5C;
  --color-text-soft: #5b5448;
  /* Aliases for highlights.css (Kindle feature) */
  --color-accent: #A87B2E;
  --color-muted: #6A655A;
  --hl-color: rgba(168, 123, 46, 0.28);
  --hl-color-strong: rgba(168, 123, 46, 0.5);
  --shadow-sm: 0 1px 3px rgba(31, 28, 22, 0.07);
  --shadow-md: 0 6px 20px rgba(31, 28, 22, 0.10);
  --shadow-lg: 0 20px 50px rgba(31, 28, 22, 0.16);
  --hero-overlay: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(244,241,232,0.7) 0%, rgba(244,241,232,0.25) 60%, rgba(244,241,232,0) 100%), linear-gradient(180deg, rgba(244,241,232,0) 0%, rgba(244,241,232,0.55) 70%, rgba(244,241,232,0.96) 100%);
  /* Hero ground (theme-aware). Light = softened parchment, less glare. */
  --hero-ground: #EFEADC;
  --hero-bg: radial-gradient(ellipse 78% 64% at 50% 40%, rgba(250,247,238,0.55) 0%, rgba(250,247,238,0) 64%),
             radial-gradient(ellipse 120% 90% at 50% 120%, rgba(16,74,92,0.06) 0%, rgba(16,74,92,0) 55%),
             linear-gradient(180deg, #F0EBDB 0%, #E9E3D1 100%);
  --hero-glow: radial-gradient(circle 38% at 50% 62%, rgba(168,123,46,0.10) 0%, rgba(168,123,46,0) 60%);
  --hero-dust-gold: rgba(168,123,46,0.5);
  --hero-dust-teal: rgba(16,74,92,0.28);
  --hero-dust-opacity: 0.5;
  --hero-seam: var(--color-bg);
  --hero-title-color: #104A5C;
  --hero-accent: #104A5C;
  --hero-accent-fill: #104A5C;
  --hero-accent-border: rgba(16,74,92,0.35);
  --emblem-shadow: drop-shadow(0 18px 44px rgba(16,74,92,0.20));
}

/* DARK — Midnight. Warm gold accent on near-black ink. */
[data-theme='dark'] {
  --color-bg: #14130F;
  --color-surface: #1B1A14;
  --color-surface-2: #211F18;
  --color-surface-offset: #1E1D16;
  --color-border: #34322A;
  --color-divider: #29281F;
  --color-text: #ECE7D8;
  --color-text-muted: #9A9384;
  --color-text-faint: #5C584D;
  --color-text-inverse: #14130F;
  --color-primary: #D8AE63;
  --color-primary-hover: #E8C27E;
  --color-primary-soft: #312A1C;
  --color-gold: #D8AE63;
  --color-gold-bright: #E8C27E;
  --color-teal: #5FA6AC;
  --color-teal-soft: #1B3133;
  /* Aliases for highlights.css (Kindle feature) */
  --color-accent: #D8AE63;
  --color-muted: #9A9384;
  --hl-color: rgba(216, 174, 99, 0.30);
  --hl-color-strong: rgba(216, 174, 99, 0.52);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.45);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.6);
  --hero-overlay: linear-gradient(180deg, rgba(20,19,15,0) 0%, rgba(20,19,15,0.6) 70%, rgba(20,19,15,0.97) 100%);
  /* Hero ground (DARK) — deep midnight with a warm gold dawn behind the chip. */
  --hero-ground: #100F0B;
  --hero-bg: radial-gradient(ellipse 80% 60% at 50% 46%, rgba(58,44,20,0.55) 0%, rgba(40,32,16,0) 60%),
             radial-gradient(ellipse 120% 90% at 50% 122%, rgba(95,166,172,0.10) 0%, rgba(95,166,172,0) 55%),
             linear-gradient(180deg, #14130F 0%, #0C0B08 100%);
  --hero-glow: radial-gradient(circle 42% at 50% 60%, rgba(216,174,99,0.16) 0%, rgba(216,174,99,0) 62%);
  --hero-dust-gold: rgba(216,174,99,0.55);
  --hero-dust-teal: rgba(95,166,172,0.32);
  --hero-dust-opacity: 0.62;
  --hero-seam: var(--color-bg);
  --hero-title-color: #ECE7D8;
  --hero-accent: #6FB3B9;
  --hero-accent-fill: #2E7E84;
  --hero-accent-border: rgba(111,179,185,0.45);
  /* DARK: no offset, near-black soft shadow — avoids the cream/olive smudge on midnight */
  --emblem-shadow: drop-shadow(0 6px 26px rgba(0,0,0,0.55));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #14130F; --color-surface: #1B1A14; --color-surface-2: #211F18;
    --color-surface-offset: #1E1D16; --color-border: #34322A; --color-divider: #29281F;
    --color-text: #ECE7D8; --color-text-muted: #9A9384; --color-text-faint: #5C584D;
    --color-text-inverse: #14130F; --color-primary: #D8AE63; --color-primary-hover: #E8C27E;
    --color-primary-soft: #312A1C; --color-gold: #D8AE63; --color-gold-bright: #E8C27E;
    --color-teal: #5FA6AC; --color-teal-soft: #1B3133;
    --hero-overlay: linear-gradient(180deg, rgba(20,19,15,0) 0%, rgba(20,19,15,0.6) 70%, rgba(20,19,15,0.97) 100%);
    --hero-ground: #100F0B;
    --hero-bg: radial-gradient(ellipse 80% 60% at 50% 46%, rgba(58,44,20,0.55) 0%, rgba(40,32,16,0) 60%),
               radial-gradient(ellipse 120% 90% at 50% 122%, rgba(95,166,172,0.10) 0%, rgba(95,166,172,0) 55%),
               linear-gradient(180deg, #14130F 0%, #0C0B08 100%);
    --hero-glow: radial-gradient(circle 42% at 50% 60%, rgba(216,174,99,0.16) 0%, rgba(216,174,99,0) 62%);
    --hero-dust-gold: rgba(216,174,99,0.55);
    --hero-dust-teal: rgba(95,166,172,0.32);
    --hero-dust-opacity: 0.62;
    --hero-title-color: #ECE7D8;
    --hero-accent: #6FB3B9;
    --hero-accent-fill: #2E7E84;
    --hero-accent-border: rgba(111,179,185,0.45);
    --emblem-shadow: drop-shadow(0 6px 26px rgba(0,0,0,0.55));
  }
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; scroll-behavior: smooth;
  scroll-padding-top: 88px; text-size-adjust: none;
}
body {
  min-height: 100dvh; display: flex; flex-direction: column; line-height: 1.65;
  font-family: var(--font-body); font-size: var(--text-base);
  color: var(--color-text); background: var(--color-bg);
  transition: background var(--transition), color var(--transition);
}
main { flex: 1 0 auto; }
.footer { flex-shrink: 0; }
img, svg, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }
ul[role='list'] { list-style: none; }
h1,h2,h3,h4 { line-height: 1.12; text-wrap: balance; font-family: var(--font-display); font-weight: 500; }
p { text-wrap: pretty; }
::selection { background: var(--color-primary-soft); color: var(--color-text); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); }
a, button { transition: color var(--transition), background var(--transition),
  border-color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* ---------- Layout helpers ---------- */
/* Every .wrap shares ONE constant outer page frame so the left & right page
   gutters line up perfectly from the header straight down to the footer.
   Narrower reading measures are applied to the INNER content (centered)
   rather than to the outer frame, so the edge never shifts as you scroll. */
.wrap { width: 100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: clamp(var(--space-5), 5vw, var(--space-20)); }
.wrap--default > *, .wrap--narrow > * { margin-inline: auto; }
.wrap--default > * { max-width: var(--content-default); }
.wrap--narrow > * { max-width: var(--content-narrow); }
section { padding-block: clamp(var(--space-10), 5.5vw, var(--space-20)); }
.eyebrow {
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.muted { color: var(--color-text-muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  padding: 0.85em 1.6em; border-radius: var(--radius-full); line-height: 1;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn--primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--color-primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); }
[data-theme='dark'] .btn--primary { color: #07191a; }
.btn--ghost { background: transparent; color: var(--color-text); border: 1.5px solid var(--color-border); }
.btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); }
.btn--lg { font-size: var(--text-base); padding: 1em 2em; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), background var(--transition);
}
.header--scrolled { border-bottom-color: var(--color-divider); }
/* Transparent header floating over the cream cover hero (dark-on-cream) */
.header--over-hero {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.header--over-hero .brand { color: var(--hero-accent); }
.header--over-hero .brand svg { color: var(--hero-accent); }
.header--over-hero .brand__sun, .header--over-hero .brand__rays { color: var(--color-gold); }
.header--over-hero .nav a { color: var(--color-text-muted); }
.header--over-hero .nav a:hover, .header--over-hero .nav a.is-active { color: var(--color-text); background: var(--color-surface-offset); }
.header--over-hero .icon-btn { color: var(--color-text-muted); }
.header--over-hero .icon-btn:hover { color: var(--color-text); background: var(--color-surface-offset); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); height: 72px; }
.brand { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; }
.brand svg { width: 30px; height: 30px; color: var(--color-primary); flex: none; }
.nav { display: flex; align-items: center; gap: var(--space-2); }
.nav a {
  font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted);
  padding: 0.5em 0.85em; border-radius: var(--radius-full);
}
.nav a:hover, .nav a.is-active { color: var(--color-text); background: var(--color-surface-offset); }
.header__actions { display: flex; align-items: center; gap: var(--space-3); }
.icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-full); color: var(--color-text-muted); }
.icon-btn:hover { background: var(--color-surface-offset); color: var(--color-text); }
.menu-toggle { display: none; }

/* ---------- Language switcher (inline segmented: EN · 简 · 繁) ---------- */
.langseg {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.langseg .lang__opt {
  appearance: none; -webkit-appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.05em; padding: 0.3em 0.62em; border-radius: 999px;
  font-family: inherit; font-size: 0.82rem; font-weight: 600; line-height: 1;
  letter-spacing: 0.01em; color: var(--color-text-muted); background: transparent;
  transition: color .18s ease, background .18s ease;
}
.langseg .lang__opt[lang='zh-Hans'], .langseg .lang__opt[lang='zh-Hant'] { font-size: 0.92rem; }
.langseg .lang__opt:hover { color: var(--color-text); }
.langseg .lang__opt[aria-checked='true'] {
  color: #1c1407;
  background: var(--color-primary);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--color-primary) 45%, transparent);
}
.langseg .lang__opt:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Over the cream cover hero, the language switcher uses its default light-surface styling. */

/* ---------- View switching ---------- */
.view { display: none; }
.view.is-active { display: block; animation: fade .4s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============================================================
   HOME
   ============================================================ */
/* ---------- Cinematic hero (always dark, regardless of theme) ---------- */
/* ===== Hero — aligned to the book cover (cream / teal / gold + chip emblem) ===== */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  /* Pull the hero up under the sticky transparent header. */
  margin-top: -72px;
  /* Full-viewport, composed entry frame */
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-top: clamp(calc(var(--space-16) + 72px), calc(7vw + 72px), calc(var(--space-20) + 72px));
  padding-bottom: clamp(var(--space-12), 6vw, var(--space-16));
  background: var(--hero-ground, #EFEADC);
  transition: background 320ms ease;
}
/* Soft theme-aware wash + faint vignette to echo the printed cover */
.hero__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--hero-bg);
}
/* Seamless blend into the page color at the bottom edge — kills the hard seam */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, var(--hero-seam) 100%);
}
/* Faint dawn glow behind the emblem (theme-aware) */
.hero__glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--hero-glow);
}
/* Drifting gold dust — a whisper of the cover's orbital sparks. Very quiet. */
.hero__stars {
  position: absolute; inset: -10%; z-index: 1; pointer-events: none; opacity: var(--hero-dust-opacity, 0.5);
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, var(--hero-dust-gold) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 82% 16%, var(--hero-dust-gold) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 68% 78%, var(--hero-dust-teal) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 70%, var(--hero-dust-gold) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 91% 60%, var(--hero-dust-gold) 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 12%, var(--hero-dust-teal) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 8% 84%, var(--hero-dust-gold) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 58% 40%, var(--hero-dust-gold) 50%, transparent 51%);
  animation: heroDrift 34s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-14px,-18px,0); }
}
@media (prefers-reduced-motion: reduce) { .hero__stars { animation: none; } }
.hero__inner { position: relative; z-index: 3; max-width: 880px; margin-inline: auto; text-align: center; }
/* Graceful staggered entrance — each element rises & fades in on load */
.hero__inner > * { opacity: 0; transform: translateY(18px); animation: heroRise 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.hero__kicker { animation-delay: 0.05s; }
.hero__lockup  { animation-delay: 0.18s; }
.hero__emblem  { animation-delay: 0.42s; }
.hero__cta     { animation-delay: 0.58s; }
.hero__free    { animation-delay: 0.70s; }
@keyframes heroRise { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .hero__inner > * { opacity: 1; transform: none; animation: none; }
}
.hero__kicker {
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-6);
}
/* Hero title lockup — mirrors the book-cover composition
   (THE / GAME OF LIFE / gold rule + suits / WELCOME TO HOTEL EARTH) */
.hero__lockup { margin-top: var(--space-2); }
.hero__over {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.4rem, 3.4vw, 2.4rem); letter-spacing: 0.42em;
  text-transform: uppercase; color: var(--hero-title-color, #104A5C); opacity: 0.92;
  margin-bottom: 0.12em; text-indent: 0.42em;
}
.hero__over:empty { display: none; }
.hero__title {
  font-size: var(--text-hero); font-weight: 500; line-height: 0.96; letter-spacing: -0.015em;
  color: var(--hero-title-color, #104A5C);
}
.hero__title em { font-style: italic; color: var(--color-gold); }
/* Gold rule with diamond + flanking poker suits */
.hero__rule {
  display: flex; align-items: center; justify-content: center; gap: 0.7rem;
  margin: clamp(var(--space-4), 2vw, var(--space-6)) auto clamp(var(--space-3), 1.6vw, var(--space-5));
}
.hero__rule-ln { height: 1px; width: clamp(40px, 9vw, 110px); background: linear-gradient(90deg, transparent, var(--color-gold)); }
.hero__rule-ln--r { background: linear-gradient(90deg, var(--color-gold), transparent); }
.hero__rule-dia { color: var(--color-gold); font-size: 0.8rem; line-height: 1; }
.hero__suit { color: var(--color-gold); font-size: 0.92rem; line-height: 1; opacity: 0.85; }
.hero__lockup-sub {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(0.95rem, 2.1vw, 1.5rem); letter-spacing: 0.36em;
  text-transform: uppercase; color: var(--hero-title-color, #104A5C);
  text-indent: 0.36em; opacity: 0.92;
}
/* CJK lockup: subtitle should not be uppercased/over-tracked */
html[lang='zh-Hans'] .hero__lockup-sub,
html[lang='zh-HK'] .hero__lockup-sub,
html[lang='zh-Hant'] .hero__lockup-sub { text-transform: none; letter-spacing: 0.22em; text-indent: 0.22em; font-size: clamp(1rem, 2.4vw, 1.55rem); }
/* Chip-emblem centerpiece, echoing the cover */
.hero__emblem {
  position: relative;
  margin-top: clamp(var(--space-7), 4.5vw, var(--space-12));
  margin-bottom: clamp(var(--space-5), 3vw, var(--space-9));
  margin-inline: auto;
  width: clamp(210px, 32vw, 340px); aspect-ratio: 913 / 811;
  display: grid; place-items: center;
}
/* Soft radiant halo behind the emblem (gold dawn) */
.hero__emblem::before {
  content: ""; position: absolute; z-index: 0;
  width: 150%; height: 150%; border-radius: 50%;
  background: radial-gradient(circle, rgba(168,123,46,0.16) 0%, rgba(168,123,46,0.06) 38%, rgba(168,123,46,0) 68%);
  filter: blur(2px); animation: heroHalo 7s ease-in-out infinite alternate;
}
/* Slow-turning orbital ring with a single travelling spark */
.hero__emblem::after {
  content: ""; position: absolute; z-index: 1;
  width: 138%; height: 138%; border-radius: 50%;
  border: 1px solid rgba(168,123,46,0.20);
  box-shadow: inset 0 0 0 0.5px rgba(16,74,92,0.05);
  animation: heroOrbit 46s linear infinite;
}
.hero__emblem img {
  position: relative; z-index: 2;
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: var(--emblem-shadow, drop-shadow(0 18px 44px rgba(16,74,92,0.20)));
  animation: emblemFloat 9s ease-in-out infinite alternate;
}
@keyframes emblemFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-9px); }
}
@keyframes heroHalo {
  from { transform: scale(0.96); opacity: 0.85; }
  to   { transform: scale(1.06); opacity: 1; }
}
@keyframes heroOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__emblem img, .hero__emblem::before, .hero__emblem::after { animation: none; }
}
.hero__sub {
  font-size: var(--text-lg); color: var(--color-text-soft, #5b5448); margin-top: var(--space-6);
  max-width: 56ch; margin-inline: auto;
}
.hero__cta { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; margin-top: var(--space-4); }
/* Teal primary CTA + teal-outline ghost button on the cream hero */
.hero__cta .btn--primary { background: var(--hero-accent-fill, #104A5C); color: #F6F1E2; box-shadow: 0 8px 26px rgba(16,74,92,0.22); }
.hero__cta .btn--primary:hover { background: var(--hero-accent, #0d3f4e); color: #07191a; transform: translateY(-2px); box-shadow: 0 12px 34px rgba(16,74,92,0.30); }
.hero__cta .btn--ghost { color: var(--hero-accent, #104A5C); border-color: var(--hero-accent-border, rgba(16,74,92,0.35)); }
.hero__cta .btn--ghost:hover { border-color: var(--color-gold); color: var(--color-gold); background: rgba(168,123,46,0.07); }
.hero__free {
  margin-top: var(--space-6); font-size: var(--text-sm); color: var(--color-text-soft, #6f675c);
  display: flex; align-items: center; gap: var(--space-2); justify-content: center;
}
.hero__free svg { width: 1em; height: 1em; color: var(--color-gold); }
/* Quiet scroll cue — a thin falling gold line at the foot of the entry frame */
.hero__scroll {
  position: absolute; left: 50%; bottom: clamp(var(--space-5), 3vw, var(--space-9));
  transform: translateX(-50%); z-index: 3; height: 46px; width: 1px;
  opacity: 0; animation: heroScrollIn 1.1s cubic-bezier(0.22,1,0.36,1) 0.95s forwards;
  overflow: hidden;
}
@keyframes heroScrollIn { to { opacity: 0.9; } }
.hero__scroll-line {
  position: absolute; top: 0; left: 0; width: 1px; height: 100%;
  background: linear-gradient(180deg, rgba(168,123,46,0) 0%, var(--color-gold) 50%, rgba(168,123,46,0) 100%);
  animation: heroScrollCue 2.4s ease-in-out infinite;
}
@keyframes heroScrollCue {
  0%   { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll { opacity: 1; animation: none; }
  .hero__scroll-line { animation: none; background: var(--color-gold); }
}

/* Refrain band */
.refrain { background: var(--color-primary); color: #fff; text-align: center; }
[data-theme='dark'] .refrain { color: #07191a; }
.refrain p { font-family: var(--font-display); font-size: var(--text-xl); font-style: italic; max-width: 30ch; margin-inline: auto; line-height: 1.3; }

/* Story / author */
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-8), 6vw, var(--space-24)); align-items: center; }
.story-grid h2 { font-size: var(--text-2xl); margin-bottom: var(--space-6); }
.story-grid p + p { margin-top: var(--space-4); }
.story-grid .muted { font-size: var(--text-base); }
.book-cover {
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); overflow: hidden;
  border: 1px solid var(--color-border); transform: rotate(-1.5deg);
  transition: transform var(--transition); max-width: 380px; margin-inline: auto;
}
.book-cover:hover { transform: rotate(0deg) scale(1.02); }

/* What you'll find — chapter teaser grid */
.section-head { text-align: center; max-width: 60ch; margin: 0 auto clamp(var(--space-8), 4vw, var(--space-12)); }
.section-head h2 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.section-head p { color: var(--color-text-muted); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); }
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-8);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-primary-soft); }
.card__num { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-primary); font-style: italic; margin-bottom: var(--space-3); }
.card h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-lg); margin-bottom: var(--space-2); line-height: 1.25; }
.card p { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Four ways band (read/download/forward/recommend) */
.ways { background: var(--color-surface-offset); }
.ways-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); }
.way { text-align: center; padding: var(--space-6); }
.way__icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto var(--space-5);
  border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-primary); }
.way__icon svg { width: 28px; height: 28px; }
.way h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-lg); margin-bottom: var(--space-2); }
.way p { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Pull quote — simple quote card image, matches the page palette */
.pullquote { text-align: center; }
.quote-card {
  display: block;
  width: 100%;
  max-width: 880px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* Email capture */
.signup { background: var(--color-primary); color: #fff; text-align: center; border-radius: var(--radius-xl); padding: clamp(var(--space-10), 6vw, var(--space-20)); }
[data-theme='dark'] .signup { background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text); }
.signup h2 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.signup p { opacity: 0.92; max-width: 48ch; margin: 0 auto var(--space-8); }
.signup-form { display: flex; gap: var(--space-3); max-width: 460px; margin: 0 auto; flex-wrap: wrap; }
.signup-form input {
  flex: 1 1 220px; padding: 0.95em 1.2em; border-radius: var(--radius-full);
  border: 1.5px solid transparent; font-size: var(--text-sm); background: #fff; color: #211f1a;
}
.signup-form input:focus { outline: none; border-color: var(--color-gold); }
.signup .btn--primary { background: #fff; color: var(--color-primary); }
.signup .btn--primary:hover { background: #f0eee7; }
[data-theme='dark'] .signup .btn--primary { background: var(--color-primary); color: #07191a; }
.signup__note { margin-top: var(--space-5); font-size: var(--text-xs); opacity: 0.75; }
.signup__ok { margin-top: var(--space-6); font-weight: 600; display: none; }

/* ============================================================
   READER
   ============================================================ */
.reader { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: calc(100dvh - 72px); }
.reader__toc {
  position: sticky; top: 72px; align-self: start; height: calc(100dvh - 72px);
  overflow-y: auto; border-right: 1px solid var(--color-divider);
  padding: var(--space-8) var(--space-5) var(--space-16) clamp(var(--space-5), 5vw, var(--space-12));
  background: var(--color-surface);
}
.reader__toc h2 { font-family: var(--font-body); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-text-faint); margin-bottom: var(--space-4); }
.toc-list { display: flex; flex-direction: column; gap: 1px; }
.toc-list button {
  text-align: left; font-size: var(--text-sm); color: var(--color-text-muted);
  padding: 0.55em 0.7em; border-radius: var(--radius-sm); line-height: 1.3; width: 100%;
}
.toc-list button:hover { background: var(--color-surface-offset); color: var(--color-text); }
.toc-list button.is-active { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; }
.reader__main { min-width: 0; padding: clamp(var(--space-10), 6vw, var(--space-24)) clamp(var(--space-5), 6vw, var(--space-16)); }
.reader__content { max-width: 680px; margin-inline: auto; min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.reader__content h1 { font-size: var(--text-2xl); margin-bottom: var(--space-8); letter-spacing: -0.01em; }
.reader__content h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-lg); margin: var(--space-10) 0 var(--space-3); }
.reader__content p { font-family: var(--font-read); font-size: 1.18rem; line-height: 1.72; margin-bottom: var(--space-5); color: var(--color-text); }
.reader__content ul, .reader__content ol { margin: 0 0 var(--space-5) var(--space-6); }
.reader__content li { font-family: var(--font-read); font-size: 1.12rem; line-height: 1.7; margin-bottom: var(--space-2); }
/* Golden Words 金句 — standout quote treatment */
.reader__content blockquote {
  position: relative;
  margin: var(--space-8) auto;
  max-width: 38rem;
  padding: var(--space-6) var(--space-8) var(--space-6) var(--space-10);
  border-left: 3px solid var(--color-gold);
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.15rem, 1.02rem + 0.55vw, 1.38rem); color: var(--color-text); line-height: 1.5;
  border-radius: 0 14px 14px 0;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-primary) 7%, var(--color-surface)) 0%,
      var(--color-surface) 100%);
  box-shadow: var(--shadow-sm);
}
/* opening + closing gold quotation marks bracket the text */
.reader__content blockquote::before {
  content: "\201C";
  color: color-mix(in srgb, var(--color-gold) 75%, transparent);
  font-weight: 600;
  font-style: normal;
  margin-right: 0.04em;
}
.reader__content blockquote::after {
  content: "\201D";
  color: color-mix(in srgb, var(--color-gold) 75%, transparent);
  font-weight: 600;
  font-style: normal;
  margin-left: 0.04em;
}
.reader__content blockquote p { margin: 0; display: inline; }
.reader__content blockquote em { font-style: normal; color: var(--color-primary); }
/* CJK editions: read upright (no faux-italic) and give the marks a touch more room */
html[lang^="zh"] .reader__content blockquote { font-style: normal; line-height: 1.65; }
html[lang^="zh"] .reader__content blockquote em { font-style: normal; }
.reader__content a { color: var(--color-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, var(--color-primary) 45%, transparent); transition: text-decoration-color 140ms ease, color 140ms ease; }
.reader__content a:hover { color: var(--color-primary-hover); text-decoration-color: currentColor; }
.reader__content .table-wrap { margin: var(--space-8) 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.reader__content table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.6; }
.reader__content thead th {
  text-align: left; font-family: var(--font-body); font-weight: 600; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-primary);
  padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--color-primary);
  white-space: nowrap;
}
.reader__content tbody td {
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider);
  vertical-align: top; color: var(--color-text);
}
.reader__content tbody tr:last-child td { border-bottom: none; }
.reader__content tbody td:first-child { color: var(--color-text); font-weight: 500; }
.reader__content table strong { color: var(--color-primary); font-weight: 600; }
.reader__content hr { border: none; border-top: 1px solid var(--color-divider); margin: var(--space-10) auto; width: 40%; }
.reader__nav { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--color-divider); }
.reader__nav button { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); color: var(--color-primary); font-weight: 600; max-width: 45%; }
.reader__nav button span { font-size: var(--text-xs); color: var(--color-text-faint); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; }
.reader__nav button.next { text-align: right; align-items: flex-end; }
.reader__nav button:disabled { opacity: 0; pointer-events: none; }
.reader__progress { position: fixed; top: 72px; left: 0; height: 3px; background: var(--color-primary); z-index: 90; transition: width 120ms linear; }
.reader__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.reader__bar .btn { font-size: var(--text-xs); padding: 0.6em 1.1em; }
.toc-mobile-toggle { display: none; }

/* ============================================================
   SHARE / RECOMMEND
   ============================================================ */
.share-hero { text-align: center; max-width: 60ch; margin-inline: auto; }
.share-hero h1 { font-size: var(--text-3xl); margin-bottom: var(--space-5); }
.share-hero p { color: var(--color-text-muted); font-size: var(--text-lg); }
.share-link {
  display: flex; align-items: center; gap: var(--space-3); max-width: 520px; margin: var(--space-10) auto 0;
  background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius-full); padding: 0.4em 0.4em 0.4em 1.4em;
}
.share-link code { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text); flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); max-width: 760px; margin: var(--space-12) auto 0; }
.share-btns a, .share-btns button {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 1em; border-radius: var(--radius-lg); background: var(--color-surface);
  border: 1px solid var(--color-border); font-size: var(--text-sm); font-weight: 600; color: var(--color-text);
}
.share-btns a:hover, .share-btns button:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.share-btns svg { width: 1.2em; height: 1.2em; }
.share-btns--public { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); max-width: 720px; }
@media (max-width: 540px) { .share-btns--public { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   PASS IT ON — compact, share-first redesign
   Goal: header takes minimal space, share controls appear fast,
   card maker reached with little scrolling. All 3 languages.
   ============================================================ */
/* Tighten the overall vertical rhythm of both sections */
#passOn { padding-block: clamp(var(--space-8), 4vw, var(--space-12)) clamp(var(--space-6), 3vw, var(--space-8)); }
.cardmaker { background: var(--color-surface-offset); padding-block: clamp(var(--space-8), 4vw, var(--space-12)); }

/* Compact section heads inside the pass view — refined, no oversized display type */
#view-pass .section-head { max-width: 46ch; margin-bottom: var(--space-6); }
#view-pass .section-head .eyebrow { margin-bottom: var(--space-2); }
#view-pass .section-head h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); margin-bottom: var(--space-2); line-height: 1.2; }
#view-pass .section-head p { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 44ch; margin-inline: auto; }

/* Share link + buttons pulled up close to the header */
#passOn .share-link { margin-top: var(--space-6); }
#passOn .share-btns { margin-top: var(--space-5); }

/* Keep X / Facebook / More… on ONE line at every width — compact buttons */
#passOn .share-btns--public {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3); max-width: 520px;
}
#passOn .share-btns--public a, #passOn .share-btns--public button {
  padding: 0.7em 0.5em; font-size: var(--text-sm); gap: var(--space-1);
}
@media (max-width: 540px) {
  #passOn .share-btns--public { grid-template-columns: repeat(3, 1fr); }
}

/* Card maker: pull the tool up under its compact header */
.cardmaker .cardgen { margin-top: var(--space-8); }
.cardmaker .quote-pick__label, .cardmaker .swatch-label { margin-top: 0; }
.closing { background: var(--color-surface-offset); }
.closing h2 { margin-bottom: var(--space-4); }

/* End-of-reader pass-it-on prompt */
.reader__pass {
  margin-top: var(--space-12); padding-top: var(--space-10);
  border-top: 1px solid var(--color-border); text-align: center;
}
.reader__pass-line {
  font-family: var(--font-display); font-style: italic; font-size: var(--text-lg);
  line-height: 1.45; color: var(--color-text); max-width: 46ch; margin: 0 auto var(--space-6);
}
.reader__pass-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.recommend { background: var(--color-surface-offset); border-radius: var(--radius-xl); padding: clamp(var(--space-8), 5vw, var(--space-16)); max-width: 720px; margin: var(--space-10) auto 0; }
.recommend h2 { font-size: var(--text-xl); margin-bottom: var(--space-3); text-align: center; }
.recommend > p { text-align: center; color: var(--color-text-muted); margin-bottom: var(--space-8); }
.recommend-form { display: flex; flex-direction: column; gap: var(--space-4); }
.recommend-form input, .recommend-form textarea {
  width: 100%; padding: 0.9em 1.1em; border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text); font-size: var(--text-sm);
}
.recommend-form textarea { min-height: 110px; resize: vertical; }
.recommend-form input:focus, .recommend-form textarea:focus { outline: none; border-color: var(--color-primary); }
.recommend-form .btn { align-self: center; }
.recommend__ok { text-align: center; color: var(--color-primary); font-weight: 600; display: none; }

/* ============================================================
   CREATOR PACK
   ============================================================ */
.pack-hero { text-align: center; max-width: 64ch; margin-inline: auto; }
.pack-hero h1 { font-size: var(--text-3xl); margin-bottom: var(--space-5); }
.pack-hero p { color: var(--color-text-muted); font-size: var(--text-lg); }
.permission {
  max-width: 720px; margin: var(--space-12) auto 0; text-align: center;
  background: var(--color-primary-soft); border-radius: var(--radius-lg); padding: var(--space-8);
}
.permission p { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); color: var(--color-text); line-height: 1.45; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-6); margin-top: var(--space-10); }
.step { text-align: center; }
.step__n { font-family: var(--font-display); font-size: var(--text-2xl); font-style: italic; color: var(--color-primary); }
.step h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-base); margin: var(--space-2) 0; }
.step p { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Quote card generator */
.cardgen { margin-top: var(--space-12); }
.cardgen__layout { display: grid; grid-template-columns: 1fr 420px; gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: start; }
.quote-side { display: flex; flex-direction: column; gap: var(--space-4); }
.quote-pick__label { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: calc(-1 * var(--space-1)); }
.quote-pick { display: flex; flex-direction: column; gap: var(--space-2); max-height: 520px; overflow-y: auto; padding-right: var(--space-2); }
.quote-pick button {
  text-align: left; padding: 0.85em 1em; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: var(--color-surface); font-size: var(--text-sm); line-height: 1.45; color: var(--color-text-muted);
  transition: border-color var(--transition), color var(--transition), background var(--transition), transform var(--transition);
}
.quote-pick button:hover { border-color: var(--color-primary); color: var(--color-text); transform: translateX(2px); }
.quote-pick button.is-active { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-text); }
.cardgen__preview { position: sticky; top: 96px; display: flex; flex-direction: column; align-items: center; }
#quoteCanvas {
  width: 100%; max-width: 420px; height: auto; border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px -12px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.18);
  /* Keep the tall 9:16 export from running off-screen on the page preview. */
  max-height: 72vh; object-fit: contain;
}
/* Compact label for the length + ratio control rows */
.control-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-faint); margin-top: var(--space-4); margin-bottom: var(--space-2); }
.quote-side .control-label:first-of-type { margin-top: var(--space-3); }
/* Pill chips for length presets + aspect ratios */
.chip-row { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; margin-bottom: var(--space-2); }
.quote-side .chip-row { justify-content: flex-start; }
.chip { padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border); border-radius: 999px; font-size: var(--text-sm); color: var(--color-text-muted); background: var(--color-surface); cursor: pointer; transition: border-color var(--transition), color var(--transition), background var(--transition); }
.chip:hover { border-color: var(--color-gold); color: var(--color-text); }
.chip.is-active { border-color: var(--color-gold); color: var(--color-gold); background: color-mix(in srgb, var(--color-gold) 12%, transparent); font-weight: 600; }
.swatch-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-faint); margin-top: var(--space-5); }
.swatch-row { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-3); }
.swatch { width: 34px; height: 34px; border-radius: var(--radius-md); border: 2px solid var(--color-border); cursor: pointer; box-shadow: var(--shadow-sm); transition: transform var(--transition), border-color var(--transition); }
.swatch:hover { transform: scale(1.08); }
.swatch.is-active { border-color: var(--color-text); transform: scale(1.14); }
/* Controls: share is the hero action */
.cardgen__controls { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-top: var(--space-6); width: 100%; }
.cardgen__share { width: 100%; max-width: 420px; justify-content: center; }
.cardgen__hint { font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; max-width: 38ch; line-height: 1.5; margin-top: calc(-1 * var(--space-1)); }
.cardgen__secondary { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin-top: var(--space-2); }
.cardgen__secondary .btn { font-size: var(--text-sm); }
/* Desktop share fallback: appears after the image is copied. */
.share-fallback { width: 100%; max-width: 460px; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-divider); text-align: center; animation: fbReveal 0.4s ease both; }
.share-fallback__hint { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.5; margin: 0 auto var(--space-3); max-width: 40ch; }
.share-fallback__row { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.share-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-divider); border-radius: 999px; font-size: var(--text-sm); color: var(--color-text); background: var(--color-bg); transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.share-chip svg { width: 18px; height: 18px; flex: none; }
.share-chip:hover { border-color: var(--color-gold); color: var(--color-gold); transform: translateY(-1px); }
@keyframes fbReveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .share-fallback { animation: none; } }
@media (max-width: 860px) {
  .cardgen__layout { grid-template-columns: 1fr; }
  .cardgen__preview { position: static; order: -1; }
  .quote-pick { max-height: 320px; }
}

/* ---------- Footer ---------- */
.footer { background: var(--color-surface); border-top: 1px solid var(--color-divider); padding-block: var(--space-8) var(--space-6); }
/* Minimal centered footer — a quiet sign-off, not a sitemap. */
.footer__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-5); }
.footer__brandmark { font-size: var(--text-base); letter-spacing: 0.01em; }
.footer__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3) clamp(var(--space-5), 3vw, var(--space-8)); }
.footer__links a { font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; transition: color 0.25s ease; }
.footer__links a:hover { color: var(--color-gold); }
.footer__bottom { margin-top: var(--space-2); padding-top: var(--space-5); border-top: 1px solid var(--color-divider); width: 100%; max-width: 56ch; font-size: var(--text-xs); color: var(--color-text-faint); }
.footer__bottom a { color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 2px; }
.footer__bottom a:hover { color: var(--color-gold); }

/* Toast */
.toast {
  position: fixed; bottom: var(--space-8); left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--color-text); color: var(--color-bg); padding: 0.9em 1.6em; border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 600; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; z-index: 200;
  transition: opacity var(--transition), transform var(--transition);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   COMMUNITY: stories + together
   ============================================================ */
.section { /* shares base section padding from element selector */ }
.section--narrow .wrap > * { max-width: var(--content-default); margin-inline: auto; }
.section__title { font-size: var(--text-2xl); line-height: 1.08; margin-bottom: var(--space-5); }
.section__lead { color: var(--color-text-muted); font-size: var(--text-lg); max-width: 60ch; margin-inline: auto; }

.pill-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-bottom: clamp(var(--space-8), 5vw, var(--space-12)); }
.chip {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500;
  padding: 0.55em 1.1em; border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border); color: var(--color-text-muted);
  background: transparent; transition: all var(--transition); cursor: pointer;
}
.chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.stories-grid { columns: 3; column-gap: var(--space-6); }
.story-card {
  break-inside: avoid; display: inline-block; width: 100%; margin-bottom: var(--space-6);
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.story-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-primary-soft); }
.story-card__media { margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-5); border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; }
.story-card__media img { display: block; width: 100%; height: auto; }
.story-card__badge { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-primary); margin-bottom: var(--space-4); }
.story-card__badge svg { width: 20px; height: 20px; }
.story-card__pillar { display: inline-block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-3); }
.story-card__title { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); line-height: 1.2; margin-bottom: var(--space-3); }
.story-card__body { font-size: var(--text-base); line-height: 1.65; color: var(--color-text); margin-bottom: var(--space-4); }
.story-card__link { display: inline-block; font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); margin-bottom: var(--space-4); }
.story-card__by { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); margin: 0; }

.panel { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: clamp(var(--space-8), 5vw, var(--space-16)); box-shadow: var(--shadow-md); }
.form { max-width: 560px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-5); }
.form__row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field > span { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.field .req { color: var(--color-gold); font-style: normal; }
.field input, .field textarea, .field select {
  font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text);
  background: var(--color-surface); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md); padding: 0.8em 1em; width: 100%; transition: border-color var(--transition);
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--color-primary); }
.field input::placeholder, .field textarea::placeholder { color: var(--color-text-muted); opacity: 0.7; }
.check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.5; }
.check input { margin-top: 0.2em; width: 18px; height: 18px; accent-color: var(--color-primary); flex-shrink: 0; }
.check a { color: var(--color-primary); text-decoration: underline; }
.form .btn { align-self: center; }
.form__note { font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; margin: 0; }
.form__ok { text-align: center; max-width: 480px; margin-inline: auto; }
.form__ok h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); margin-bottom: var(--space-3); }
.form__ok a { color: var(--color-primary); text-decoration: underline; }

.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); margin-bottom: clamp(var(--space-8), 4vw, var(--space-12)); }
.give-card { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: clamp(var(--space-8), 4vw, var(--space-12)); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.give-card__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-primary); margin-bottom: var(--space-6); }
.give-card__icon svg { width: 28px; height: 28px; }
.give-card h2 { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.give-card > .muted { margin-bottom: var(--space-5); }
.give-list { list-style: none; padding: 0; margin: 0 0 var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.give-list li { position: relative; padding-left: 1.7em; font-size: var(--text-base); color: var(--color-text); }
.give-list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-primary); }
.give-card .btn { align-self: flex-start; margin-top: auto; }
.give-card .form__note { text-align: left; margin-top: var(--space-3); }
.together-band { text-align: center; background: var(--color-surface-offset); border-radius: var(--radius-xl); padding: clamp(var(--space-10), 6vw, var(--space-16)); }
.together-band h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1040px) {
  .stories-grid { columns: 2; }
}
@media (max-width: 900px) {
  .nav { display: none; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: var(--color-surface); border-bottom: 1px solid var(--color-divider); padding: var(--space-4); gap: var(--space-1);
    max-height: calc(100dvh - 72px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .nav.open { display: flex; }
  .nav a { padding: 0.8em 1em; }
  /* Open dropdown always sits on a solid surface — force readable dark text even when header is in over-hero (light-text) mode */
  .header--over-hero .nav.open a { color: var(--color-text); text-shadow: none; }
  .header--over-hero .nav.open a:hover, .header--over-hero .nav.open a.is-active { color: var(--color-text); background: var(--color-surface-offset); }
  .menu-toggle { display: grid; }
  .story-grid { grid-template-columns: 1fr; }
  .book-cover { order: -1; max-width: 300px; }
  .reader { grid-template-columns: minmax(0, 1fr); }
  .reader__toc { position: fixed; top: 72px; left: 0; width: 290px; z-index: 80;
    height: calc(100dvh - 72px); max-height: calc(100dvh - 72px);
    transform: translateX(-100%); transition: transform var(--transition); box-shadow: var(--shadow-lg);
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .reader__toc.open { transform: none; }
  .toc-mobile-toggle { display: inline-flex; }
  .reader__bar { margin-bottom: var(--space-8); }
  .cardgen__layout { grid-template-columns: 1fr; }
  .cardgen__preview { position: static; max-width: 380px; margin-inline: auto; }
  .quote-pick { max-height: 300px; }
  .two-up { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }
  .stories-grid { columns: 1; }
  .form__row--2 { grid-template-columns: 1fr; }
}

/* ============================================================
   THE MATHEMATICS OF THE GAME
   ============================================================ */
.maths { background: var(--color-surface); border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.maths .section-head { margin-bottom: clamp(var(--space-10), 5vw, var(--space-16)); }
.maths .section-head h2 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.maths .section-head p { color: var(--color-text-muted); font-size: var(--text-lg); }

/* Each equation row: text + chart side by side, alternating */
.maths-block {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center; max-width: var(--content-wide); margin: 0 auto;
  padding-block: clamp(var(--space-10), 5vw, var(--space-16));
}
.maths-block + .maths-block { border-top: 1px solid var(--color-divider); }
.maths-block--rev .maths-block__text { order: 2; }
.maths-block--rev .maths-block__chart { order: 1; }
.maths-block__text h3 { font-size: var(--text-xl); margin-bottom: var(--space-5); line-height: 1.15; }
.maths-num {
  font-family: var(--font-display); font-style: italic; font-size: var(--text-lg);
  color: var(--color-primary); margin-bottom: var(--space-3); letter-spacing: 0.02em;
}
.maths-block__text .muted { font-size: var(--text-base); line-height: 1.7; max-width: 44ch; }

/* Display formula — engraved, serif, centered on a soft plate */
.formula {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  font-family: var(--font-display); color: var(--color-text);
  background: var(--color-surface-offset); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-6) var(--space-8);
  margin-bottom: var(--space-6); font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem); line-height: 1;
}
.formula__lim { display: inline-flex; flex-direction: column; align-items: center; font-size: 0.62em; color: var(--color-text-muted); line-height: 1.05; }
.formula__lim sub { font-size: 0.74em; }
.formula__frac { display: inline-flex; flex-direction: column; align-items: center; text-align: center; }
.formula__top { padding: 0 0.5em 0.12em; }
.formula__bot { padding: 0.12em 0.5em 0; border-top: 2px solid currentColor; }
.formula__eq { color: var(--color-text-muted); }
.formula__inf { color: var(--color-primary); font-size: 1.15em; }
.formula__one { color: var(--color-primary); font-size: 1.15em; font-weight: 600; }
.formula__var { font-style: italic; }
.formula__paren { font-size: 0.7em; color: var(--color-text-muted); font-family: var(--font-body); }

/* Chapter-embedded formula card (formula moved out of homepage into the relevant chapter) */
.chapter-formula {
  margin: var(--space-10) auto;
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  border: 1px solid var(--color-divider);
  border-radius: 16px;
  background: var(--color-surface);
  text-align: center;
}
/* When the chapter PICTURE sits directly below the heading plate, pull it a
   touch closer so it reads as the chapter's opening image, not a stray box. */
.cplate + .chapter-formula,
h1 + .chapter-formula { margin-top: var(--space-8); }
.chapter-formula__formula.formula {
  justify-content: center;
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  margin-bottom: var(--space-6);
}
.chapter-formula__chart { max-width: 460px; margin: 0 auto; }
.chapter-formula__cap {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  line-height: 1.6;
  max-width: 52ch;
  margin: var(--space-4) auto 0;
}

/* Chart host — keeps SVG responsive */
.chart-host { width: 100%; }
.maths-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* SVG semantic strokes/fills — theme-aware via CSS vars */
.axis { stroke: var(--color-text-faint); stroke-width: 1.5; fill: none; }
.axis--faint { stroke: var(--color-divider); }
.curve { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.curve--gold { stroke: var(--color-primary); }
.curve--teal { stroke: var(--color-teal); }
.asymptote { stroke: var(--color-text-faint); stroke-width: 1.25; stroke-dasharray: 4 5; fill: none; }
.fill-soft { fill: var(--color-primary-soft); opacity: 0.55; stroke: none; }
.nw-line { stroke: var(--color-primary); }
.nw-zero { fill: none; stroke-width: 2; }
.nw-zero--proj { stroke: var(--color-text-faint); stroke-dasharray: 5 6; }   /* living — implied return */
.nw-zero--death { stroke: var(--color-text-muted); stroke-dasharray: 5 6; }  /* deceased — recorded return to zero */
.dot { stroke: var(--color-surface); stroke-width: 2; }
.dot--peak { fill: var(--color-primary); }
.dot--zero { fill: var(--color-text-muted); }
.one-edge { stroke-width: 1.25; opacity: 0.45; }
.one-node { fill: var(--color-text-faint); stroke-width: 1.25; }
.one-root { stroke-width: 2.5; }
.lbl { font-family: var(--font-body); fill: var(--color-text-muted); font-size: 12px; }
.lbl--axis { fill: var(--color-text-faint); font-size: 11px; letter-spacing: 0.04em; }
.lbl--inf { fill: var(--color-primary); font-family: var(--font-display); font-style: italic; font-size: 22px; }
.lbl--peaktag { fill: var(--color-text); font-weight: 600; font-size: 12px; }
.lbl--zero { fill: var(--color-text-muted); font-size: 11px; }

/* Net-worth grid: four small multiples */
.maths-networth { max-width: var(--content-wide); margin: 0 auto; padding-top: clamp(var(--space-10), 5vw, var(--space-16)); border-top: 1px solid var(--color-divider); text-align: center; }
.maths-networth h3 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.maths-networth__lede { font-size: var(--text-base); line-height: 1.7; max-width: 60ch; margin: 0 auto var(--space-10); }
.networth-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); text-align: left; }
.nw-card {
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm);
}
.nw-card__cap { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.nw-card__name { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); }
.nw-card__life { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-faint); }
.nw-card__chart { width: 100%; }
.maths-networth__note { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 70ch; margin: var(--space-10) auto 0; line-height: 1.6; }

@media (max-width: 860px) {
  .maths-block { grid-template-columns: 1fr; gap: var(--space-8); }
  .maths-block--rev .maths-block__text { order: 1; }
  .maths-block--rev .maths-block__chart { order: 2; }
  .networth-grid { grid-template-columns: 1fr; }
}

/* ---------- Post-finish share nudge ---------- */
.finish-nudge{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:1.25rem;background:rgba(10,12,14,.62);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s ease}
.finish-nudge.is-open{opacity:1}
.finish-nudge__card{position:relative;max-width:30rem;width:100%;background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:2.25rem 1.75rem 1.75rem;text-align:center;transform:translateY(12px) scale(.98);transition:transform .25s ease}
.finish-nudge.is-open .finish-nudge__card{transform:translateY(0) scale(1)}
.finish-nudge__heart{font-size:2.4rem;line-height:1;color:var(--color-gold);margin-bottom:.5rem}
.finish-nudge__card h3{font-family:var(--font-display);font-size:1.5rem;margin:0 0 .5rem}
.finish-nudge__card p{color:var(--color-text-muted);font-size:1.02rem;line-height:1.6;margin:0 auto 1.4rem;max-width:24rem}
.finish-nudge__btns{display:flex;gap:.65rem;justify-content:center;flex-wrap:wrap}
.finish-nudge__x{position:absolute;top:.5rem;right:.65rem;background:none;border:none;font-size:1.7rem;line-height:1;color:var(--color-text-faint);cursor:pointer;padding:.25rem .5rem;border-radius:var(--radius-sm)}
.finish-nudge__x:hover{color:var(--color-text)}
@media (max-width:380px){.finish-nudge__btns{flex-direction:column}.finish-nudge__btns .btn{width:100%}}

/* ===================== OUTLINE VIEW ===================== */
.outline-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }
.outline-row {
  display: flex; align-items: flex-start; gap: var(--space-4); width: 100%;
  text-align: left; padding: var(--space-5) var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); cursor: pointer; color: var(--color-text);
  transition: var(--transition);
}
.outline-row:hover { border-color: var(--color-primary-soft); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.outline-row:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.outline-row__num {
  flex: 0 0 auto; font-family: var(--font-body); font-variant-numeric: tabular-nums;
  font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.06em;
  color: var(--color-primary); padding-top: 0.15em; min-width: 1.8em;
}
.outline-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.outline-row__title { font-weight: 600; font-size: var(--text-lg); line-height: 1.3; }
.outline-row__preview {
  font-size: var(--text-base); color: var(--color-text-muted); line-height: 1.6;
}
.outline-row__arrow { flex: 0 0 auto; color: var(--color-text-faint); display: grid; place-items: center; padding-top: 0.2em; transition: var(--transition); }
.outline-row__arrow svg { width: 20px; height: 20px; }
.outline-row:hover .outline-row__arrow { color: var(--color-primary); transform: translateX(3px); }
.outline-foot {
  margin-top: var(--space-8); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
}
.outline-foot__note { font-size: var(--text-sm); color: var(--color-text-muted); }
.outline-foot__dl {
  font-size: var(--text-sm); font-weight: 600; color: var(--color-primary);
  text-decoration: none; border-bottom: 1px solid transparent; transition: var(--transition);
}
.outline-foot__dl:hover { border-bottom-color: var(--color-primary); }
@media (max-width: 540px) {
  .outline-row { padding: var(--space-4); gap: var(--space-3); }
  .outline-row__title { font-size: var(--text-base); }
  .outline-row__num { min-width: 1.6em; }
}

/* ============================================================
   金句 (Golden Words) card — a standout, quotable moment that
   visually lifts off the page when a reader reaches it.
   ============================================================ */
.jinju {
  margin: var(--space-12) auto;
  max-width: 34rem;
  padding: clamp(var(--space-8), 5vw, var(--space-10)) clamp(var(--space-7), 4.5vw, var(--space-9));
  position: relative;
  border-radius: 18px;
  border: 1.5px solid color-mix(in srgb, var(--color-primary) 38%, transparent);
  background:
    radial-gradient(125% 85% at 50% 0%,
      color-mix(in srgb, var(--color-primary) 9%, var(--color-surface)) 0%,
      var(--color-surface) 55%,
      var(--color-surface-offset) 100%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  isolation: isolate;
}
/* top accent bar — flush to the rounded top edge */
.jinju::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-gold-bright), var(--color-gold));
}
.jinju__kicker {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}
.jinju__ln { height: 1px; width: 32px; background: var(--color-primary); opacity: 0.55; }
.jinju__lbl {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.2em;
}
.jinju__eyebrow {
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  color: var(--color-text-faint);
  font-weight: 600;
  margin-bottom: var(--space-6);
}
.jinju__rows { display: flex; flex-direction: column; }
.jinju__row {
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-divider);
}
.jinju__row:last-child { border-bottom: none; }
.jinju__idx {
  font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 600;
  color: var(--color-gold-bright);
  min-width: 2.4rem;
  text-align: right;
  flex-shrink: 0;
}
.jinju__phrase {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.2vw, 1.7rem);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.12;
}
.jinju__foot { margin-top: var(--space-6); text-align: center; }
.jinju__note {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.05em;
}
.jinju__brand {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-weight: 600;
  font-style: italic;
  margin-top: var(--space-1);
}

/* ============================================================
   Dedication — Ava's memorial portrait
   ============================================================ */
.dedication {
  margin: var(--space-10) auto;
  max-width: 32rem;
  padding: clamp(var(--space-8), 5vw, var(--space-10)) clamp(var(--space-6), 4vw, var(--space-9));
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
  text-align: center;
}
.dedication__kicker {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: var(--space-6);
}
.dedication__photo {
  width: 220px;
  margin: 0 auto var(--space-6);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  background: #fff;
}
.dedication__photo img { width: 100%; display: block; filter: grayscale(1); }
.dedication__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
}
.dedication__dates {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
  letter-spacing: 0.04em;
}
.dedication__rule {
  width: 46px; height: 2px;
  background: var(--color-primary);
  opacity: 0.7;
  margin: var(--space-5) auto;
}
.dedication__quote {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-text);
  max-width: 28ch;
  margin: 0 auto;
  line-height: 1.6;
}
.dedication__sub {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-5);
  line-height: 1.6;
}

/* ============================================================
   CHAPTER TITLE PLATE — start-of-chapter typographic plate
   (eyebrow part label + line-art icon + title + 金句)
   ============================================================ */
.cplate {
  margin: 0 auto var(--space-12);
  padding: var(--space-10) var(--space-6) var(--space-12);
  text-align: center;
  border-bottom: 1px solid var(--color-divider);
}
.cplate__eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-gold);
  margin-bottom: var(--space-5);
}
.cplate__eyebrow.is-cjk { letter-spacing: 0.3em; text-transform: none; }
.cplate__icon {
  display: block;
  width: 76px; height: 76px;
  margin: 0 auto var(--space-6);
  color: var(--color-primary);
}
.cplate__icon circle,
.cplate__icon path,
.cplate__icon line,
.cplate__icon rect { stroke: currentColor; fill: none; }
.cplate__icon .gold { stroke: var(--color-gold); }
.cplate__icon .goldfill { fill: var(--color-gold); stroke: none; }
.cplate__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.16;
  color: var(--color-text);
  margin: 0 auto var(--space-4);
  max-width: 18em;
  letter-spacing: -0.005em;
}
.cplate__rule {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin: var(--space-4) auto var(--space-6);
}
.cplate__ln { height: 1px; width: 84px; background: linear-gradient(90deg, transparent, var(--color-gold)); }
.cplate__ln--r { background: linear-gradient(90deg, var(--color-gold), transparent); }
.cplate__dia { color: var(--color-gold); font-size: 12px; line-height: 1; }
.cplate__quote {
  font-family: var(--font-read);
  font-style: italic;
  font-size: 1.32rem;
  line-height: 1.55;
  color: var(--color-primary);
  max-width: 30em;
  margin: 0 auto;
  font-weight: 500;
}
/* CJK editions: serif, upright (no italic), tighter measure */
html[lang='zh-Hans'] .cplate__quote,
html[lang='zh-HK'] .cplate__quote,
html[lang='zh-Hant'] .cplate__quote { font-style: normal; font-size: 1.18rem; letter-spacing: 0.02em; max-width: 22em; }
html[lang='zh-Hans'] .cplate__title,
html[lang='zh-HK'] .cplate__title,
html[lang='zh-Hant'] .cplate__title { letter-spacing: 0.03em; }
@media (max-width: 640px) {
  .cplate { padding: var(--space-6) var(--space-2) var(--space-8); }
  .cplate__icon { width: 60px; height: 60px; }
  .cplate__quote { font-size: 1.18rem; }
  .cplate__ln { width: 56px; }
}

/* ============================================================
   POKER ACCENTS — subtle, understated suit motifs site-wide.
   Drawn from the cover (♠♥♦♣ in gold). Quiet, never casino-loud.
   ============================================================ */
/* Refrain band: four small suits above the quote */
.refrain__suits {
  display: flex; justify-content: center; gap: 0.85rem;
  margin-bottom: var(--space-4); font-size: 0.85rem; line-height: 1;
  color: var(--color-gold); opacity: 0.7;
}
[data-theme='dark'] .refrain__suits { color: #0a1c1d; opacity: 0.5; }
/* Section eyebrows: a tiny spade before the label, like a card pip */
.eyebrow::before {
  content: "\2660"; margin-right: 0.55em; color: var(--color-gold);
  font-size: 0.78em; vertical-align: 0.04em; opacity: 0.75;
}
/* Chapter-plate diamond already echoes the cover; add faint suit pair
   to the plate rule on the very first & last chapters via JS hook class. */
.cplate__suit { color: var(--color-gold); font-size: 0.7rem; opacity: 0.7; }
/* Footer refrain line: flank with hairline gold pips */
.footer-refrain, .footer__refrain { position: relative; }

/* ============================================================
   Mobile menu scroll-lock — prevents background book content
   from scrolling while the nav dropdown or reader TOC drawer
   is open. JS adds .menu-open to <body> (with saved scroll
   position via top:-Ypx) and removes it on close.
   ============================================================ */
body.menu-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}