/* Hallmark · macrostructure: Split Studio · H2 split diptych knobs: ratio=7/5, right-side=proof-panel, divider=negative-space
 * theme: custom · vibe: "sea-salt island inn, coral shop, restrained gold" · paper: oklch(98% 0.012 95) · accent: oklch(66% 0.18 9)
 * display: Noto Serif SC · body: Noto Sans SC · axes: light / roman-serif / chromatic-coral
 * enrichment: official Steam still, reviewed · nav: N10 · footer: Ft5 · context: explicit · studied: no · v1.1.0
 * audience: Chinese visual-novel players · use: verify then download · tone: soft with restrained luxury
 * Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 · contrast: pass (40–41) · slop: pass (42–45)
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · mobile: pass (34, 49, 50–57)
 */
:root {
  --color-paper: oklch(98% 0.012 95);
  --color-paper-2: oklch(95% 0.025 83);
  --color-paper-3: oklch(91% 0.042 73);
  --color-ink: oklch(18% 0.018 50);
  --color-ink-2: oklch(28% 0.022 50);
  --color-muted: oklch(42% 0.022 52);
  --color-rule: oklch(76% 0.026 68);
  --color-rule-2: oklch(86% 0.025 80);
  --color-accent: oklch(66% 0.18 9);
  --color-accent-deep: oklch(48% 0.16 9);
  --color-accent-ink: oklch(17% 0.025 9);
  --color-orange: oklch(69% 0.16 49);
  --color-sea: oklch(73% 0.14 226);
  --color-sea-deep: oklch(43% 0.13 230);
  --color-palm: oklch(53% 0.11 151);
  --color-gold: oklch(74% 0.12 82);
  --color-charcoal: oklch(18% 0.012 55);
  --color-charcoal-2: oklch(23% 0.016 55);
  --color-ivory: oklch(96% 0.018 86);
  --color-focus: oklch(52% 0.17 238);
  --color-success: oklch(48% 0.13 151);
  --color-error: oklch(50% 0.19 22);
  --color-overlay: oklch(12% 0.012 55 / 0.58);
  --color-overlay-soft: oklch(12% 0.012 55 / 0.38);
  --color-shadow: oklch(18% 0.018 50 / 0.16);
  --color-transparent: oklch(98% 0.012 95 / 0);

  --font-display: "Noto Serif SC", "Songti SC", serif;
  --font-body: "Noto Sans SC", "PingFang SC", sans-serif;
  --font-mono: "SFMono-Regular", "Cascadia Mono", monospace;

  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --text-xs: 0.78rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.56rem;
  --text-xl: 1.95rem;
  --text-2xl: 2.44rem;
  --text-3xl: 3.05rem;
  --text-4xl: 3.81rem;
  --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-display-s: clamp(2.4rem, 4.2vw + 0.8rem, 4.4rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;

  --rule-hair: 1px;
  --rule-strong: 2px;
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;

  --shell: 80rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --nav-height: 4.5rem;
  --sticky-height: 4.75rem;
  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-sticky-nav: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + var(--space-lg)); }
body { margin: 0; overflow-x: clip; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65; text-rendering: optimizeLegibility; }
body.has-dialog { overflow: clip; }
img, video { display: block; max-width: 100%; height: auto; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-underline-offset: 0.22em; }
button, input { font: inherit; }
button { color: inherit; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; overflow-wrap: anywhere; min-width: 0; line-height: 1.18; letter-spacing: -0.025em; }
h1 { font-size: var(--text-display-s); }
h2 { font-size: clamp(2rem, 4vw, var(--text-3xl)); }
h3 { font-size: var(--text-lg); }
small { font-size: var(--text-sm); }
[hidden] { display: none !important; }

.skip-link { position: fixed; inset: var(--space-sm) auto auto var(--space-sm); z-index: var(--z-tooltip); padding: var(--space-sm) var(--space-md); background: var(--color-charcoal); color: var(--color-ivory); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.shell { width: min(100%, calc(var(--shell) + 2 * var(--gutter))); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { width: min(100%, 52rem); margin-inline: auto; }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--color-muted); }

:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

.site-nav { position: fixed; inset: 0 0 auto; z-index: var(--z-sticky-nav); height: var(--nav-height); padding: var(--space-sm) var(--gutter); pointer-events: none; }
.site-nav__inner { width: min(100%, var(--shell)); height: 100%; margin-inline: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-lg); padding-inline: var(--space-md); background: var(--color-paper); color: var(--color-ink); border: var(--rule-hair) solid var(--color-rule); box-shadow: 0 0 0 var(--color-transparent); transition: transform var(--dur-long) var(--ease-out), background-color var(--dur-long) var(--ease-out), border-color var(--dur-long) var(--ease-out), border-radius var(--dur-long) var(--ease-out), box-shadow var(--dur-long) var(--ease-out); pointer-events: auto; }
.site-nav.is-floating .site-nav__inner { transform: translateY(var(--space-xs)); background: var(--color-paper-2); border-color: var(--color-ink-2); border-radius: var(--radius-pill); box-shadow: 0 var(--space-xs) var(--space-xl) calc(-1 * var(--space-lg)) var(--color-shadow); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; text-decoration: none; white-space: nowrap; }
.wordmark__seal { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border: var(--rule-strong) solid currentColor; border-radius: 50%; color: var(--color-accent-deep); font-family: var(--font-display); font-size: var(--text-sm); }
.nav-links { display: flex; justify-content: flex-start; gap: clamp(var(--space-sm), 2vw, var(--space-xl)); }
.nav-links a { min-height: 44px; display: inline-flex; align-items: center; font-size: var(--text-sm); font-weight: 700; text-decoration: none; white-space: nowrap; border-bottom: var(--rule-strong) solid var(--color-transparent); }
.nav-links a[aria-current="page"] { border-color: var(--color-accent); }
.nav-tools { display: flex; align-items: center; gap: var(--space-xs); }
.menu-toggle { display: none; width: 44px; height: 44px; border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); border-radius: 50%; position: relative; }
.menu-toggle::before, .menu-toggle::after { content: ""; position: absolute; left: 12px; right: 12px; height: 2px; background: var(--color-ink); transform-origin: center; transition: transform var(--dur-micro) var(--ease-out); }
.menu-toggle::before { top: 16px; }
.menu-toggle::after { bottom: 16px; }
.menu-toggle[aria-expanded="true"]::before { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"]::after { transform: translateY(-5px) rotate(-45deg); }
.mobile-menu { position: fixed; inset: calc(var(--nav-height) + var(--space-sm)) var(--gutter) auto; z-index: var(--z-dropdown); display: none; padding: var(--space-md); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); box-shadow: 0 var(--space-lg) var(--space-xl) calc(-1 * var(--space-md)) var(--color-shadow); }
.mobile-menu.is-open { display: grid; }
.mobile-menu a { display: flex; align-items: center; min-height: 48px; padding-inline: var(--space-sm); font-weight: 700; text-decoration: none; white-space: nowrap; }

.btn { position: relative; isolation: isolate; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-lg); border: var(--rule-strong) solid var(--color-accent-deep); border-radius: var(--radius-xs); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 900; text-decoration: none; white-space: nowrap; overflow: clip; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.btn::after { content: ""; position: absolute; inset: -70% auto -70% -40%; width: 28%; z-index: -1; background: var(--color-ivory); opacity: 0.42; transform: skewX(-18deg) translateX(-300%); }
.btn--quiet { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-ink); }
.btn--gold { background: var(--color-gold); border-color: var(--color-charcoal); color: var(--color-charcoal); }
.btn--compact { min-height: 44px; padding: var(--space-xs) var(--space-md); }
.btn[aria-busy="true"] { cursor: progress; opacity: 0.72; }
.btn[aria-busy="true"]::before { content: ""; width: 1rem; aspect-ratio: 1; border: var(--rule-strong) solid currentColor; border-right-color: var(--color-transparent); border-radius: 50%; animation: spin 800ms linear infinite; }
.btn.is-error { background: var(--color-error); color: var(--color-ivory); border-color: var(--color-error); }
.btn.is-success { background: var(--color-success); color: var(--color-ivory); border-color: var(--color-success); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn:active { transform: translateY(1px); }
@media (hover: hover) { .btn:not(:disabled):not([aria-disabled="true"]):hover::after { animation: sheen 760ms var(--ease-out) 1; } .nav-links a:hover { border-color: var(--color-accent); } }
@keyframes sheen { to { transform: skewX(-18deg) translateX(750%); } }
@keyframes spin { to { transform: rotate(360deg); } }

.hero { position: relative; min-height: 48rem; display: grid; align-items: end; padding: var(--space-2xl) 0 var(--space-3xl); background: var(--color-charcoal); color: var(--color-ivory); overflow: clip; }
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 54% center; transform: scale(1.03); animation: hero-drift 16s var(--ease-in-out) infinite alternate; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-overlay) 0 48%, var(--color-overlay-soft)); }
.hero__grid { position: relative; z-index: var(--z-raised); display: grid; grid-template-columns: minmax(0, 7fr) minmax(19rem, 5fr); gap: var(--space-xl); align-items: end; }
.hero__copy { max-width: 44rem; padding: var(--space-xl) 0; }
.hero__tags, .tag-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.tag { display: inline-flex; min-height: 32px; align-items: center; padding: var(--space-2xs) var(--space-sm); border: var(--rule-hair) solid currentColor; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
.hero h1 { max-width: 12ch; margin-top: var(--space-md); text-shadow: 0 2px 18px var(--color-overlay); }
.hero__alternate { display: block; margin-top: var(--space-xs); font-family: var(--font-body); font-size: var(--text-md); font-weight: 700; letter-spacing: 0; }
.hero__lede { max-width: 40rem; margin-top: var(--space-lg); font-size: var(--text-md); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.buy-panel { padding: var(--space-lg); background: var(--color-paper); color: var(--color-ink); border-top: var(--space-xs) solid var(--color-gold); border-radius: var(--radius-sm); box-shadow: 0 var(--space-lg) var(--space-xl) calc(-1 * var(--space-md)) var(--color-shadow); }
.buy-panel__price { display: flex; justify-content: space-between; gap: var(--space-md); align-items: baseline; padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.buy-panel__price strong { font-family: var(--font-display); font-size: var(--text-2xl); font-variant-numeric: tabular-nums; }
.buy-panel dl { display: grid; gap: var(--space-sm); padding: var(--space-md) 0; }
.buy-panel dl > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-sm); }
.buy-panel dt { color: var(--color-muted); }
.buy-panel dd { font-weight: 700; text-align: right; }
.buy-panel .btn { width: 100%; }
.buy-panel small { display: block; margin-top: var(--space-sm); color: var(--color-muted); }
@keyframes hero-drift { to { transform: scale(1.05); } }

.info-band { background: var(--color-paper-2); border-bottom: var(--rule-hair) solid var(--color-rule); }
.info-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.info-cell { padding: var(--space-lg); border-right: var(--rule-hair) solid var(--color-rule); }
.info-cell:last-child { border-right: 0; }
.info-cell span { display: block; color: var(--color-muted); font-size: var(--text-sm); }
.info-cell strong { display: block; margin-top: var(--space-2xs); line-height: 1.35; }

.section { padding: var(--space-3xl) 0; }
.section--tight { padding-block: var(--space-2xl); }
.section--wood { background: var(--color-paper-2); color: var(--color-ink); }
.section--ink { background: var(--color-charcoal); color: var(--color-ivory); }
.section--sea { background: color-mix(in oklch, var(--color-paper) 91%, var(--color-sea)); color: var(--color-ink); }
.section-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr); gap: var(--space-xl); align-items: end; margin-bottom: var(--space-xl); }
.section-head p { max-width: 46rem; color: var(--color-muted); }
.section--ink .section-head p { color: var(--color-ivory); }

.story-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.story-copy { display: grid; gap: var(--space-lg); font-size: var(--text-md); }
.dialogue { margin-top: var(--space-lg); padding: var(--space-lg); background: var(--color-charcoal); color: var(--color-ivory); border: var(--rule-hair) solid var(--color-gold); }
.dialogue strong { color: var(--color-gold); }
.dialogue p { margin-top: var(--space-xs); }
.scene-frame { position: relative; aspect-ratio: 16 / 10; overflow: clip; border-radius: var(--radius-xs); background: var(--color-paper-3); }
.scene-frame img { width: 100%; height: 100%; object-fit: cover; }
.scene-frame figcaption { position: absolute; inset: auto var(--space-md) var(--space-md); width: fit-content; max-width: calc(100% - 2 * var(--space-md)); padding: var(--space-xs) var(--space-sm); background: var(--color-charcoal); color: var(--color-ivory); font-size: var(--text-sm); }

.feature-ledger { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border-top: var(--rule-hair) solid var(--color-rule); }
.feature-item { grid-column: span 6; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-md); padding: var(--space-xl) var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.feature-item:nth-child(odd) { border-right: var(--rule-hair) solid var(--color-rule); }
.feature-item--wide { grid-column: span 8; }
.feature-item--narrow { grid-column: span 4; }
.feature-number { font-family: var(--font-mono); color: var(--color-accent-deep); font-weight: 800; }
.feature-item p { margin-top: var(--space-xs); color: var(--color-muted); }

.character-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.character-card { min-width: 0; background: var(--color-ivory); color: var(--color-ink); border: var(--rule-hair) solid var(--color-rule); }
.character-card img { width: 100%; aspect-ratio: 616 / 274; object-fit: cover; }
.character-card div { padding: var(--space-md); }
.character-card p { margin-top: var(--space-xs); color: var(--color-muted); }

.route-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); margin-top: var(--space-xl); }
.route-card { position: relative; min-height: 14rem; padding: var(--space-lg); border: var(--rule-hair) solid var(--color-gold); background: var(--color-charcoal-2); }
.route-card::after { content: ""; position: absolute; inset: auto var(--space-lg) var(--space-lg) auto; width: 2rem; height: var(--rule-strong); background: var(--color-gold); }
.route-card p { margin-top: var(--space-md); color: var(--color-ivory); }

.gallery-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-md); }
.gallery-item { grid-column: span 6; position: relative; padding: 0; border: 0; background: var(--color-charcoal); color: var(--color-ivory); cursor: zoom-in; overflow: clip; min-width: 0; text-align: left; }
.gallery-item:nth-child(3n) { grid-column: span 12; }
.gallery-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.gallery-item span { position: absolute; inset: auto var(--space-md) var(--space-md); padding: var(--space-xs) var(--space-sm); background: var(--color-charcoal); color: var(--color-ivory); font-weight: 700; }
.gallery-actions { margin-top: var(--space-xl); }
@media (hover: hover) { .gallery-item:hover img { transform: scale(1.02); } .feature-item:hover, .character-card:hover { transform: translateY(-2px); } }

.media-stage { display: grid; grid-template-columns: minmax(0, 8fr) minmax(16rem, 4fr); gap: var(--space-lg); align-items: start; }
.media-stage__main { position: sticky; top: calc(var(--nav-height) + var(--space-xl)); }
.media-stage__main .gallery-item { width: 100%; }
.media-stage__strip { display: grid; gap: var(--space-md); }
.media-stage__strip .gallery-item { width: 100%; }

.filter-tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-xl); }
.filter-tab { min-height: 44px; padding: var(--space-xs) var(--space-md); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font-weight: 700; cursor: pointer; white-space: nowrap; }
.filter-tab[aria-pressed="true"] { background: var(--color-charcoal); color: var(--color-ivory); }
.filter-tab.is-error { border-color: var(--color-error); }
.filter-tab.is-success { border-color: var(--color-success); }
.filter-tab:disabled { opacity: 0.5; cursor: not-allowed; }

.download-poster { display: grid; grid-template-columns: minmax(0, 8fr) minmax(18rem, 4fr); gap: var(--space-xl); padding: var(--space-xl); border: var(--rule-strong) solid var(--color-charcoal); background: var(--color-paper-2); }
.download-poster__action { display: grid; align-content: center; gap: var(--space-md); }
.download-poster__action .btn { width: 100%; min-height: 64px; font-size: var(--text-lg); }
.platform-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.platform-card { padding: var(--space-xl); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); }
.platform-card--primary { border-top: var(--space-2xs) solid var(--color-accent); }
.platform-card--disabled { background: var(--color-paper-2); }
.platform-card p { margin: var(--space-sm) 0 var(--space-lg); color: var(--color-muted); }

.steps { counter-reset: steps; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.step { counter-increment: steps; padding: var(--space-lg); border-top: var(--rule-strong) solid var(--color-charcoal); }
.step::before { content: counter(steps, decimal-leading-zero); display: block; margin-bottom: var(--space-xl); font-family: var(--font-mono); color: var(--color-accent-deep); font-weight: 800; }
.step p { margin-top: var(--space-xs); color: var(--color-muted); }

.spec-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr); gap: var(--space-2xl); }
.spec-sheet { width: 100%; border-collapse: collapse; }
.spec-sheet th, .spec-sheet td { padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; vertical-align: top; }
.spec-sheet th { width: 34%; color: var(--color-muted); font-weight: 500; }
.spec-note { padding: var(--space-lg); background: var(--color-charcoal); color: var(--color-ivory); border-top: var(--space-2xs) solid var(--color-gold); }
.spec-note h3 { color: var(--color-gold); }
.spec-note p, .spec-note ul { margin-top: var(--space-md); }

.timeline { position: relative; display: grid; gap: 0; }
.timeline::before { content: ""; position: absolute; inset: 0 auto 0 8.6rem; width: var(--rule-hair); background: var(--color-rule); }
.timeline-item { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-xl); padding: var(--space-lg) 0; }
.timeline-item time { font-family: var(--font-body); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.timeline-item div { position: relative; }
.timeline-item div::before { content: ""; position: absolute; left: calc(-1 * var(--space-xl) - 0.28rem); top: 0.55rem; width: var(--space-sm); aspect-ratio: 1; border-radius: 50%; background: var(--color-accent); border: var(--rule-strong) solid var(--color-paper); }
.timeline-item p { margin-top: var(--space-xs); color: var(--color-muted); }

.review-summary { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-2xl); align-items: center; padding: var(--space-xl); background: var(--color-charcoal); color: var(--color-ivory); }
.review-score strong { display: block; font-family: var(--font-display); font-size: var(--text-4xl); color: var(--color-gold); font-variant-numeric: tabular-nums; }
.review-score span { font-size: var(--text-sm); }
.fit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-lg); }
.fit-card { padding: var(--space-lg); background: var(--color-paper); border-bottom: var(--rule-strong) solid var(--color-sea-deep); }
.fit-card p { margin-top: var(--space-xs); color: var(--color-muted); }

.faq-list { border-top: var(--rule-hair) solid var(--color-rule); }
.faq-list details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq-list summary { min-height: 64px; display: grid; grid-template-columns: minmax(0, 1fr) 2rem; align-items: center; gap: var(--space-md); padding: var(--space-md) 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: var(--text-md); font-weight: 800; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; display: grid; place-items: center; width: 2rem; height: 2rem; border: var(--rule-hair) solid var(--color-rule); border-radius: 50%; font-family: var(--font-body); }
.faq-list details[open] summary::after { content: "−"; }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-long) var(--ease-in-out); }
.faq-answer > div { overflow: hidden; }
.faq-list details[open] .faq-answer { grid-template-rows: 1fr; }
.faq-answer p { max-width: 68ch; padding: 0 3rem var(--space-lg) 0; color: var(--color-muted); }

.guide-layout { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
.toc { position: sticky; top: calc(var(--nav-height) + var(--space-xl)); padding: var(--space-lg); background: var(--color-paper-2); border-top: var(--rule-strong) solid var(--color-accent); }
.toc strong { display: block; margin-bottom: var(--space-sm); }
.toc a { display: flex; align-items: center; min-height: 44px; text-decoration: none; border-bottom: var(--rule-hair) solid var(--color-rule); white-space: nowrap; }
.article { min-width: 0; }
.article section { scroll-margin-top: calc(var(--nav-height) + var(--space-lg)); padding-bottom: var(--space-2xl); }
.article p, .article ul, .article ol { max-width: 70ch; }
.article p, .article ul, .article ol, .article table { margin-top: var(--space-md); }
.article li + li { margin-top: var(--space-xs); }
.article h2 { padding-top: var(--space-xs); }
.article h3 { margin-top: var(--space-xl); }
.article table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.article th, .article td { padding: var(--space-sm); border: var(--rule-hair) solid var(--color-rule); text-align: left; vertical-align: top; }
.guide-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin-bottom: var(--space-2xl); }
.guide-card { display: grid; gap: var(--space-sm); padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); text-decoration: none; }
.guide-card span { color: var(--color-accent-deep); font-weight: 800; }

.subhero { padding: calc(var(--nav-height) + var(--space-3xl)) 0 var(--space-2xl); background: var(--color-charcoal); color: var(--color-ivory); }
.subhero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(16rem, 5fr); gap: var(--space-xl); align-items: end; }
.subhero p { max-width: 48rem; margin-top: var(--space-md); font-size: var(--text-md); }
.subhero figure { aspect-ratio: 16 / 9; overflow: clip; }
.subhero figure img { width: 100%; height: 100%; object-fit: cover; }

.final-cta { padding: var(--space-3xl) 0; background: var(--color-paper-3); color: var(--color-ink); }
.final-cta__inner { display: grid; grid-template-columns: minmax(0, 8fr) minmax(18rem, 4fr); gap: var(--space-xl); align-items: end; }
.final-cta p { max-width: 52rem; margin-top: var(--space-md); }
.final-cta__action { display: grid; gap: var(--space-sm); }

.site-footer { padding: var(--space-3xl) 0 calc(var(--space-3xl) + var(--sticky-height)); background: var(--color-charcoal); color: var(--color-ivory); }
.footer-statement { max-width: 24ch; font-family: var(--font-display); font-size: clamp(2rem, 5vw, var(--text-4xl)); line-height: 1.18; }
.footer-grid { display: grid; grid-template-columns: minmax(16rem, 5fr) minmax(0, 7fr); gap: var(--space-2xl); padding-top: var(--space-xl); margin-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.footer-meta { display: grid; align-content: start; gap: var(--space-sm); color: var(--color-ivory); }
.footer-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.footer-links nav { display: grid; align-content: start; gap: var(--space-xs); }
.footer-links h3 { margin-bottom: var(--space-xs); font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-gold); letter-spacing: 0.08em; }
.footer-links a { width: fit-content; min-height: 36px; display: inline-flex; align-items: center; color: var(--color-ivory); text-decoration: none; white-space: nowrap; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-ivory); }

.sticky-cta { position: fixed; inset: auto 0 0; z-index: var(--z-sticky); min-height: var(--sticky-height); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-lg); padding: var(--space-sm) var(--gutter); background: var(--color-paper); color: var(--color-ink); border-top: var(--rule-hair) solid var(--color-rule); box-shadow: 0 calc(-1 * var(--space-xs)) var(--space-xl) calc(-1 * var(--space-lg)) var(--color-shadow); transform: translateY(110%); transition: transform var(--dur-short) var(--ease-out); }
.sticky-cta.is-visible { transform: none; }
.sticky-cta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back-top { position: fixed; right: var(--space-md); bottom: calc(var(--sticky-height) + var(--space-md)); z-index: var(--z-sticky); width: 48px; height: 48px; border: var(--rule-hair) solid var(--color-rule); border-radius: 50%; background: var(--color-paper); color: var(--color-ink); opacity: 0; transform: translateY(var(--space-md)); pointer-events: none; transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.back-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }

.lightbox { position: fixed; inset: 0; width: min(94vw, 76rem); height: fit-content; max-height: 90vh; margin: auto; padding: var(--space-lg); border: 0; background: var(--color-charcoal); color: var(--color-ivory); }
.lightbox::backdrop { background: var(--color-overlay); }
.lightbox figure { display: grid; place-items: center; gap: var(--space-sm); }
.lightbox img { max-height: 72vh; width: auto; object-fit: contain; }
.lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; z-index: var(--z-raised); min-width: 44px; min-height: 44px; border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); color: var(--color-ink); cursor: pointer; }
.lightbox-close { inset: var(--space-sm) var(--space-sm) auto auto; padding: var(--space-xs) var(--space-sm); }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); font-size: var(--text-xl); }
.lightbox-prev { left: var(--space-sm); }
.lightbox-next { right: var(--space-sm); }

@media (max-width: 64rem) {
  .nav-links { display: none; }
  .site-nav__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .menu-toggle { display: block; }
  .nav-tools .btn { display: none; }
  .hero__grid, .subhero__grid, .section-head, .story-split, .download-poster, .spec-layout, .final-cta__inner, .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .hero { min-height: auto; padding-top: calc(var(--nav-height) + var(--space-3xl)); }
  .hero__copy { padding-bottom: 0; }
  .buy-panel { max-width: 34rem; }
  .info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .info-cell:nth-child(3) { border-right: 0; }
  .character-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-stage { grid-template-columns: minmax(0, 1fr); }
  .media-stage__main { position: static; }
  .media-stage__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 48rem) {
  .section { padding-block: var(--space-2xl); }
  .hero { min-height: 44rem; align-items: end; }
  .hero__media { object-position: 42% center; animation: none; transform: scale(1.02); }
  .hero::after { background: linear-gradient(0deg, var(--color-overlay) 0 64%, var(--color-overlay-soft)); }
  .hero h1 { max-width: 10ch; }
  .buy-panel { padding: var(--space-md); }
  .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-cell, .info-cell:nth-child(3) { border-right: var(--rule-hair) solid var(--color-rule); }
  .info-cell:nth-child(even) { border-right: 0; }
  .feature-item, .feature-item--wide, .feature-item--narrow { grid-column: span 12; border-right: 0 !important; }
  .feature-item { padding-inline: 0; }
  .route-map, .fit-grid, .steps, .platform-grid, .footer-links { grid-template-columns: minmax(0, 1fr); }
  .gallery-item, .gallery-item:nth-child(3n) { grid-column: span 12; }
  .review-summary { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .guide-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
  .guide-cards { grid-template-columns: minmax(0, 1fr); }
  .timeline::before { left: 1.3rem; }
  .timeline-item { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); padding-left: var(--space-xl); }
  .timeline-item div::before { left: calc(-1 * var(--space-xl) - 0.08rem); }
  .footer-links a { min-height: 44px; }
  .sticky-cta { gap: var(--space-sm); }
  .sticky-cta span { font-size: var(--text-sm); }
}

@media (max-width: 25.875rem) {
  .wordmark { font-size: var(--text-md); }
  .site-nav { padding-inline: var(--space-xs); }
  .site-nav__inner { padding-inline: var(--space-sm); }
  .hero__actions { display: grid; }
  .hero__actions .btn { width: 100%; }
  .info-grid { grid-template-columns: minmax(0, 1fr); }
  .info-cell { border-right: 0 !important; }
  .character-rail, .media-stage__strip { grid-template-columns: minmax(0, 1fr); }
  .sticky-cta span { display: none; }
  .sticky-cta { grid-template-columns: minmax(0, 1fr); }
  .sticky-cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; scroll-behavior: auto !important; }
  .hero__media { transform: none; }
}