/* Hallmark · macrostructure: Map / Diagram · H6 hero knobs: image=full-bleed, caption=lower-left, text=overlaid
 * theme: custom · vibe: "ivory counter, blue symbiote light, charcoal gold" · paper: oklch(98% 0.010 92) · accent: oklch(73% 0.145 230)
 * display: Noto Serif SC · body: Noto Sans SC · axes: light with dark fold / roman-serif / cool sea-blue
 * nav: N5 Floating pill · footer: Ft5 Statement · enrichment: E8 verified public-safe game still
 * studied: no · context: explicit · contrast: pass (40–41) · slop: pass (42–45)
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (34, 49–57) · icons: pass (30)
 * Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-width: 0; overflow-x: clip; }
html { scroll-behavior: smooth; background: var(--color-paper); }
body { font-family: var(--font-body); color: var(--color-ink); background: var(--color-paper); line-height: 1.65; padding-bottom: 5.25rem; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: var(--rule-hair); text-underline-offset: 0.22em; }
button, a { -webkit-tap-highlight-color: transparent; }
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; line-height: 1.12; overflow-wrap: anywhere; min-width: 0; }
h2 { font-size: clamp(2rem, 4.5vw, 3.85rem); letter-spacing: -0.035em; }
h3 { font-size: var(--text-xl); letter-spacing: -0.018em; }
p { max-width: 68ch; }
section[id] { scroll-margin-top: 6.5rem; }
[hidden] { display: none !important; }
.shell { width: min(var(--content-max), calc(100% - (2 * var(--page-gutter)))); margin-inline: auto; min-width: 0; }
.skip-link { position: fixed; inset: var(--space-sm) auto auto var(--space-sm); z-index: 200; padding: var(--space-sm) var(--space-md); background: var(--color-night); color: var(--color-night-ink); transform: translateY(-180%); transition: transform var(--dur-short) var(--ease-out); }
.skip-link:focus { transform: translateY(0); }

/* Navigation */
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; pointer-events: none; }
.nav-pill { pointer-events: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-lg); width: min(48rem, calc(100% - 2rem)); margin: var(--space-md) auto 0; padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md); border: var(--rule-hair) solid color-mix(in oklch, var(--color-rule) 72%, transparent); border-radius: var(--radius-pill); background: color-mix(in oklch, var(--color-paper) 88%, transparent); box-shadow: 0 0.65rem 2rem var(--color-shadow); backdrop-filter: blur(16px) saturate(118%); transition: transform var(--dur-medium) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.site-header.is-scrolled .nav-pill { transform: translateY(-0.2rem) scale(0.985); background: color-mix(in oklch, var(--color-paper) 96%, transparent); }
.wordmark { display: inline-grid; text-decoration: none; line-height: 1; white-space: nowrap; }
.wordmark span { font-family: var(--font-display); font-weight: 700; }
.wordmark small { margin-top: var(--space-2xs); color: var(--color-muted); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.18em; }
.nav-links { justify-self: center; display: flex; align-items: center; gap: var(--space-md); min-width: 0; }
.nav-links a, .footer-nav a, .related-games a, .mobile-nav a { white-space: nowrap; text-decoration: none; }
.nav-links a { position: relative; min-height: 2.75rem; display: inline-flex; align-items: center; font-size: var(--text-sm); font-weight: 600; }
.nav-links a::after { content: ""; position: absolute; inset: auto 0 0.35rem; height: var(--rule-strong); background: var(--color-accent-strong); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-short) var(--ease-out); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-toggle { display: none; min-height: 2.75rem; padding-inline: var(--space-md); border: 0; border-radius: var(--radius-pill); background: var(--color-night); color: var(--color-night-ink); cursor: pointer; }
.mobile-nav { pointer-events: auto; width: min(32rem, calc(100% - 2rem)); margin: var(--space-xs) auto 0; padding: var(--space-xs); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper); box-shadow: 0 1rem 2rem var(--color-shadow); }
.mobile-nav a { display: flex; align-items: center; min-height: 3rem; padding-inline: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule-2); font-weight: 700; }

/* Eight-state interactive primitives */
.button, .nav-toggle, .filter-button, .gallery-card, .faq summary, .lightbox-toolbar button, .back-to-top, .guide-card a { position: relative; transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.button { isolation: isolate; display: inline-flex; min-height: 3.25rem; align-items: center; justify-content: center; padding: var(--space-sm) var(--space-lg); border: var(--rule-strong) solid transparent; border-radius: var(--radius-sm); background: var(--color-gold); color: var(--color-gold-ink); font-weight: 800; line-height: 1; white-space: nowrap; text-decoration: none; overflow: hidden; cursor: pointer; }
.button-primary::before, [data-download]::before { content: ""; position: absolute; inset: -60% auto -60% -40%; z-index: -1; width: 26%; background: var(--color-glint); transform: skewX(-18deg) translateX(-240%); transition: transform var(--dur-long) var(--ease-out); }
.button:hover, .nav-toggle:hover, .filter-button:hover, .guide-card a:hover { transform: translateY(-2px); box-shadow: 0 0.6rem 1.2rem var(--color-shadow); }
.button:hover::before, [data-download]:hover::before { transform: skewX(-18deg) translateX(700%); }
.button:active, .nav-toggle:active, .filter-button:active, .guide-card a:active { transform: translateY(1px); box-shadow: none; }
.button:focus-visible, .nav-toggle:focus-visible, .nav-links a:focus-visible, .filter-button:focus-visible, .gallery-card:focus-visible, .faq summary:focus-visible, .lightbox-toolbar button:focus-visible, .back-to-top:focus-visible, .guide-card a:focus-visible, .footer-nav a:focus-visible, .related-games a:focus-visible, .mobile-nav a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.button[aria-disabled="true"], .button:disabled, .filter-button:disabled, .nav-toggle:disabled, .gallery-card:disabled, .lightbox-toolbar button:disabled, [aria-disabled="true"] { opacity: 0.46; cursor: not-allowed; transform: none; box-shadow: none; }
.button[aria-busy="true"] { cursor: wait; padding-inline-start: var(--space-2xl); }
.button[aria-busy="true"]::after { content: ""; position: absolute; inset: 50% auto auto var(--space-md); width: var(--space-md); aspect-ratio: 1; margin-top: calc(var(--space-xs) * -1); border: var(--rule-strong) solid currentColor; border-right-color: transparent; border-radius: var(--radius-pill); animation: spin var(--dur-long) linear infinite; }
.button[data-state="error"] { background: var(--color-danger); color: var(--color-night-ink); }
.button[data-state="success"] { background: var(--color-success); color: var(--color-night-ink); }
.filter-button[aria-busy="true"], .gallery-card[aria-busy="true"], .nav-toggle[aria-busy="true"], .lightbox-toolbar button[aria-busy="true"] { cursor: wait; opacity: 0.72; }
.filter-button[data-state="error"], .gallery-card[data-state="error"], .nav-toggle[data-state="error"], .lightbox-toolbar button[data-state="error"] { border-color: var(--color-danger); }
.filter-button[data-state="success"], .gallery-card[data-state="success"], .nav-toggle[data-state="success"], .lightbox-toolbar button[data-state="success"] { border-color: var(--color-success); }
.button-secondary { border-color: color-mix(in oklch, var(--color-night-ink) 65%, transparent); background: color-mix(in oklch, var(--color-night) 45%, transparent); color: var(--color-night-ink); }
.button-light { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-rule); }
.nav-download { min-height: 2.75rem; padding-inline: var(--space-md); border-radius: var(--radius-pill); }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Hero — visual novel stage */
.hero { min-height: 100svh; position: relative; display: grid; align-items: end; isolation: isolate; color: var(--color-night-ink); background: var(--color-night); overflow: clip; }
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-scrim), color-mix(in oklch, var(--color-night) 38%, transparent) 42%, var(--color-scrim)); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 48% 50%; transform: scale(1.035) translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0); animation: hero-breathe 16s var(--ease-in-out) infinite alternate; }
@keyframes hero-breathe { to { transform: scale(1.055) translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0); } }
.hero-inner { width: min(var(--content-max), calc(100% - (2 * var(--page-gutter)))); margin: 0 auto; padding: var(--space-3xl) 0 var(--space-4xl); display: grid; gap: var(--space-md); }
.hero-logo { width: min(28rem, 72vw); height: auto; filter: drop-shadow(0 0.75rem 1.75rem var(--color-shadow)); }
.hero-copy { display: grid; gap: var(--space-md); max-width: 58rem; }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.tag { display: inline-flex; min-height: 1.9rem; align-items: center; padding-inline: 0.65rem; border: var(--rule-hair) solid color-mix(in oklch, var(--color-night-ink) 40%, transparent); background: color-mix(in oklch, var(--color-night) 68%, transparent); color: var(--color-night-ink); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.03em; backdrop-filter: blur(8px); }
.hero h1 { font-size: var(--text-display-s); max-width: 14ch; letter-spacing: -0.055em; text-wrap: balance; }
.hero h1 span { display: block; margin-top: var(--space-xs); font-family: var(--font-body); font-size: 0.31em; font-weight: 800; letter-spacing: 0.06em; }
.hero-lede { max-width: 60ch; font-size: clamp(1rem, 2vw, 1.2rem); color: var(--color-night-muted); }
.hero-facts { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.hero-facts div { min-width: 8rem; padding: var(--space-xs) var(--space-sm); border-inline-start: var(--rule-strong) solid var(--color-accent); background: color-mix(in oklch, var(--color-night) 68%, transparent); }
.hero-facts dt { color: var(--color-night-muted); font-size: var(--text-xs); }
.hero-facts dd { font-weight: 800; }
.dialogue-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm) var(--space-lg); align-items: end; padding: var(--space-md); border: var(--rule-hair) solid color-mix(in oklch, var(--color-gold) 55%, transparent); border-block-start: var(--rule-strong) solid var(--color-gold); background: color-mix(in oklch, var(--color-night) 88%, transparent); box-shadow: 0 1.2rem 3rem var(--color-shadow); backdrop-filter: blur(12px); }
.dialogue-name { grid-column: 1 / -1; max-width: max-content; color: var(--color-gold); font-family: var(--font-display); font-weight: 700; }
.dialogue-text { min-width: 0; font-size: var(--text-lg); }

/* Dense information band */
.info-band { border-bottom: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }
.info-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.info-grid div { min-width: 0; padding: var(--space-lg) var(--space-md); border-inline-end: var(--rule-hair) solid var(--color-rule); }
.info-grid div:last-child { border-inline-end: 0; }
.info-grid dt { color: var(--color-muted); font-size: var(--text-xs); font-weight: 700; }
.info-grid dd { margin-top: var(--space-2xs); font-weight: 800; overflow-wrap: anywhere; }

.section { padding-block: var(--space-3xl); }
.section-tight { padding-block: var(--space-2xl); }
.section-night { color: var(--color-night-ink); background: var(--color-night); }
.section-blue { background: var(--color-paper-2); }
.section-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 0.6fr); gap: var(--space-xl); align-items: end; margin-bottom: var(--space-xl); }
.section-head p { justify-self: end; color: var(--color-muted); }
.section-night .section-head p { color: var(--color-night-muted); }
.story-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(17rem, 0.8fr); gap: var(--space-2xl); align-items: start; }
.story-copy { display: grid; gap: var(--space-lg); }
.story-copy p { font-size: var(--text-lg); line-height: 1.8; }
.story-aside { position: sticky; top: 7rem; padding: var(--space-xl); background: var(--color-night); color: var(--color-night-ink); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-night-3); }
.story-aside strong { display: block; color: var(--color-gold); font-family: var(--font-display); font-size: var(--text-2xl); }
.story-aside ul { margin: var(--space-md) 0 0; padding-inline-start: 1.2rem; }

.feature-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: var(--rule-hair) solid var(--color-rule); border-inline-start: var(--rule-hair) solid var(--color-rule); }
.feature-card { grid-column: span 2; min-width: 0; min-height: 12rem; display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-lg); border-inline-end: var(--rule-hair) solid var(--color-rule); border-bottom: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.feature-card:nth-child(1), .feature-card:nth-child(2) { grid-column: span 3; }
.feature-card:last-child:nth-child(3) { grid-column: span 6; }
.feature-card:hover { z-index: 1; transform: translateY(-0.25rem); background: var(--color-paper-2); box-shadow: 0 1rem 2rem var(--color-shadow); }
.feature-mark { width: 2.5rem; aspect-ratio: 1; display: grid; place-items: center; background: var(--color-accent); color: var(--color-accent-ink); font-weight: 900; }

/* Map / diagram */
.world-map { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: var(--space-lg); min-height: 32rem; padding: var(--space-xl); background: var(--color-night-2); overflow: clip; }
.world-map::before, .world-map::after { content: ""; position: absolute; z-index: 0; height: var(--rule-strong); background: var(--color-accent-strong); transform-origin: left; opacity: 0.58; }
.world-map::before { width: 68%; inset: 48% auto auto 16%; transform: rotate(-8deg); }
.world-map::after { width: 57%; inset: 55% auto auto 27%; transform: rotate(12deg); }
.map-node { position: relative; z-index: 1; min-width: 0; align-self: start; padding: var(--space-lg); border: var(--rule-hair) solid var(--color-night-3); background: var(--color-night); box-shadow: 0 0.75rem 2rem var(--color-shadow); }
.map-node:nth-child(2) { margin-top: var(--space-3xl); }
.map-node:nth-child(3) { margin-top: var(--space-xl); }
.map-node:nth-child(4) { grid-column: 2; }
.map-node h3 { color: var(--color-gold); }
.map-node p { margin-top: var(--space-xs); color: var(--color-night-muted); }
.map-node a { display: inline-flex; margin-top: var(--space-md); color: var(--color-accent); font-weight: 800; }

/* Media gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.gallery-card { min-width: 0; padding: 0; border: 0; background: var(--color-night); color: var(--color-night-ink); text-align: start; cursor: zoom-in; overflow: hidden; }
.gallery-card figure { min-width: 0; }
.gallery-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform var(--dur-long) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.gallery-card figcaption { min-height: 4.6rem; display: flex; align-items: center; padding: var(--space-sm) var(--space-md); color: var(--color-night-muted); font-size: var(--text-sm); }
.gallery-card:hover { box-shadow: 0 1rem 2rem var(--color-shadow); }
.gallery-card:hover img { transform: scale(1.025); opacity: 0.9; }
.gallery-card:active img { transform: scale(1.01); }
.gallery-card[hidden] { display: none; }
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.filter-button { min-height: 2.75rem; padding: var(--space-xs) var(--space-md); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); cursor: pointer; white-space: nowrap; }
.filter-button[aria-pressed="true"] { border-color: var(--color-accent-strong); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 800; }

.lightbox { width: min(92vw, 88rem); max-width: none; max-height: 92vh; padding: 0; border: var(--rule-hair) solid var(--color-night-3); background: var(--color-night); color: var(--color-night-ink); box-shadow: 0 2rem 5rem var(--color-shadow); }
.lightbox::backdrop { background: var(--color-scrim); backdrop-filter: blur(6px); }
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.lightbox-toolbar { display: flex; justify-content: flex-end; gap: var(--space-xs); padding: var(--space-xs); }
.lightbox-toolbar button { min-height: 2.75rem; padding-inline: var(--space-md); border: var(--rule-hair) solid var(--color-night-3); background: var(--color-night-2); color: var(--color-night-ink); cursor: pointer; }
.lightbox figure { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.lightbox img { width: 100%; height: min(72vh, 54rem); object-fit: contain; }
.lightbox figcaption { padding: var(--space-md); color: var(--color-night-muted); text-align: center; }

/* Download, update, audience cards */
.download-band { padding-block: var(--space-2xl); border-block: var(--rule-strong) solid var(--color-coral); background: var(--color-paper-3); color: var(--color-ink); }
.download-band-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xl); align-items: center; }
.download-band h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
.download-band p { margin-top: var(--space-sm); font-weight: 600; }
.timeline { border-top: var(--rule-hair) solid var(--color-rule); }
.timeline details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.timeline summary, .faq summary { list-style: none; cursor: pointer; }
.timeline summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.timeline summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg); padding: var(--space-lg) 0; font-weight: 800; }
.timeline summary::after, .faq summary::after { content: "+"; font-family: var(--font-body); font-size: var(--text-xl); line-height: 1; }
.timeline details[open] summary::after, .faq details[open] summary::after { content: "−"; }
.timeline-body { padding: 0 0 var(--space-lg); color: var(--color-muted); }
.audience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.audience-card { min-width: 0; padding: var(--space-lg); background: var(--color-paper); border-top: 0.25rem solid var(--color-accent-strong); }
.audience-card p { margin-top: var(--space-sm); color: var(--color-muted); }

.faq { border-top: var(--rule-hair) solid var(--color-rule); }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg); align-items: center; min-height: 4.5rem; padding: var(--space-md) 0; font-weight: 800; }
.faq-answer { padding: 0 var(--space-2xl) var(--space-lg) 0; color: var(--color-muted); }

.final-cta { padding-block: var(--space-3xl); background: var(--color-night); color: var(--color-night-ink); }
.final-cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xl); align-items: center; }
.final-cta p { margin-top: var(--space-sm); color: var(--color-night-muted); }
.fine-print { font-size: var(--text-sm); }

/* Subpage mastheads and content */
.page-hero { padding: var(--space-6xl) 0 var(--space-2xl); background: var(--color-night); color: var(--color-night-ink); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(17rem, 0.8fr); gap: var(--space-2xl); align-items: end; }
.page-hero h1 { font-size: var(--text-display-s); letter-spacing: -0.055em; }
.page-hero p { margin-top: var(--space-md); color: var(--color-night-muted); font-size: var(--text-lg); }
.page-hero figure { border-block-start: var(--rule-strong) solid var(--color-gold); }
.page-hero figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.page-hero figcaption { padding: var(--space-sm); background: var(--color-night-2); color: var(--color-night-muted); font-size: var(--text-sm); }
.download-options { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--space-md); }
.platform-card { min-width: 0; display: grid; gap: var(--space-md); align-content: start; padding: var(--space-xl); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); }
.platform-card.recommended { border-top: 0.35rem solid var(--color-coral); }
.platform-tag { width: max-content; padding: var(--space-2xs) var(--space-xs); background: var(--color-coral); font-size: var(--text-xs); font-weight: 800; }
.platform-facts { display: grid; gap: var(--space-xs); }
.platform-facts div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-sm); padding-top: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule-2); }
.platform-facts dt { color: var(--color-muted); }
.platform-facts dd { font-weight: 700; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); padding: 0; list-style: none; counter-reset: steps; }
.steps li { min-width: 0; padding: var(--space-lg); background: var(--color-night); color: var(--color-night-ink); counter-increment: steps; }
.steps li::before { content: "0" counter(steps); display: block; margin-bottom: var(--space-lg); color: var(--color-accent); font-size: var(--text-3xl); font-weight: 800; }
.steps p { margin-top: var(--space-xs); color: var(--color-night-muted); }
.notice { padding: var(--space-lg); border-block-start: var(--rule-strong) solid var(--color-gold); background: var(--color-paper-2); }

.guide-layout { display: grid; grid-template-columns: minmax(14rem, 0.28fr) minmax(0, 0.72fr); gap: var(--space-2xl); align-items: start; }
.guide-toc { position: sticky; top: 7rem; padding: var(--space-md); background: var(--color-night); color: var(--color-night-ink); }
.guide-toc strong { display: block; padding: var(--space-sm); color: var(--color-gold); }
.guide-toc a { display: flex; min-height: 2.75rem; align-items: center; padding-inline: var(--space-sm); border-top: var(--rule-hair) solid var(--color-night-3); color: var(--color-night-muted); text-decoration: none; white-space: nowrap; }
.guide-content { min-width: 0; display: grid; gap: var(--space-2xl); }
.guide-section { min-width: 0; display: grid; gap: var(--space-md); padding-bottom: var(--space-2xl); border-bottom: var(--rule-hair) solid var(--color-rule); scroll-margin-top: 7rem; }
.guide-section p, .guide-section li { max-width: 70ch; }
.guide-section ol, .guide-section ul { margin: 0; padding-inline-start: 1.25rem; }
.guide-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin-bottom: var(--space-2xl); }
.guide-card { min-width: 0; display: grid; gap: var(--space-sm); padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); }
.guide-card a { width: max-content; max-width: 100%; display: inline-flex; min-height: 2.75rem; align-items: center; color: var(--color-accent-strong); font-weight: 800; white-space: nowrap; }
.route-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.route-table th, .route-table td { padding: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); text-align: start; vertical-align: top; }
.route-table th { background: var(--color-paper-2); }
.article-prose { display: grid; gap: var(--space-xl); max-width: 74ch; }
.article-prose section { display: grid; gap: var(--space-md); scroll-margin-top: 7rem; }
.article-prose h2 { font-size: var(--text-3xl); }
.article-prose ul, .article-prose ol { margin: 0; padding-inline-start: 1.35rem; }
.article-nav { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.article-nav a { display: inline-flex; min-height: 2.75rem; align-items: center; padding-inline: var(--space-md); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); white-space: nowrap; }

/* Footer and fixed controls */
.site-footer { padding: var(--space-3xl) 0 var(--space-2xl); border-top: var(--rule-hair) solid var(--color-night-3); background: var(--color-night); color: var(--color-night-ink); }
.footer-statement { display: grid; gap: var(--space-2xl); }
.footer-line { max-width: 28ch; font-family: var(--font-display); font-size: clamp(2rem, 5vw, 4rem); line-height: 1.12; letter-spacing: -0.035em; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(18rem, 1fr); gap: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-night-3); }
.footer-brand { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; text-decoration: none; }
.footer-grid p { margin-top: var(--space-xs); color: var(--color-night-muted); font-size: var(--text-sm); }
.footer-nav, .related-games { display: grid; align-content: start; gap: var(--space-xs); }
.footer-nav a, .related-games a { color: var(--color-night-muted); }
.related-games p { margin: 0; color: var(--color-gold); font-weight: 800; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); color: var(--color-night-muted); font-size: var(--text-xs); }
.sticky-cta { position: fixed; inset: auto 0 0; z-index: 90; display: flex; align-items: center; justify-content: center; gap: var(--space-md); min-height: 4.5rem; padding: var(--space-xs) max(var(--space-md), env(safe-area-inset-right)) max(var(--space-xs), env(safe-area-inset-bottom)) max(var(--space-md), env(safe-area-inset-left)); border-top: var(--rule-hair) solid var(--color-night-3); background: var(--color-night); color: var(--color-night-ink); box-shadow: 0 -0.5rem 1.8rem var(--color-shadow); }
.sticky-cta .button { min-height: 3rem; }
.back-to-top { position: fixed; inset: auto var(--space-md) 5.4rem auto; z-index: 80; min-height: 2.75rem; padding-inline: var(--space-md); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(0.5rem); }
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }

/* Scroll reveal is opacity-only and content remains readable without JS */
[data-reveal] { opacity: 1; }
.js [data-reveal] { opacity: 0; transform: translateY(0); }
.js [data-reveal].is-visible { opacity: 1; transition: opacity var(--dur-long) var(--ease-out); }

@media (max-width: 64rem) {
  .nav-links { display: none; }
  .nav-pill { grid-template-columns: auto 1fr auto; width: min(40rem, calc(100% - 2rem)); }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; justify-self: end; }
  .nav-download { display: none; }
  .info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .info-grid div:nth-child(3) { border-inline-end: 0; }
  .info-grid div:nth-child(-n+3) { border-bottom: var(--rule-hair) solid var(--color-rule); }
  .feature-grid, .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-card, .feature-card:nth-child(1), .feature-card:nth-child(2), .feature-card:last-child:nth-child(3) { grid-column: auto; }
  .world-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-node:nth-child(2), .map-node:nth-child(3) { margin-top: 0; }
  .map-node:nth-child(4) { grid-column: auto; }
  .world-map::before, .world-map::after { display: none; }
  .story-layout, .page-hero-grid, .guide-layout { grid-template-columns: minmax(0, 1fr); }
  .story-aside, .guide-toc { position: static; }
  .guide-toc { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
  .guide-toc strong { width: 100%; }
  .guide-toc a { border: 0; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related-games { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related-games p { grid-column: 1 / -1; }
}

@media (max-width: 48rem) {
  body { padding-bottom: 4.75rem; }
  .section { padding-block: var(--space-2xl); }
  .section-head, .download-band-grid, .final-cta-grid, .story-layout, .dialogue-box, .download-options { grid-template-columns: minmax(0, 1fr); }
  .section-head { gap: var(--space-sm); }
  .section-head p { justify-self: start; }
  .dialogue-name { grid-column: auto; }
  .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-grid div, .info-grid div:nth-child(3) { border-inline-end: var(--rule-hair) solid var(--color-rule); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .info-grid div:nth-child(even) { border-inline-end: 0; }
  .feature-grid, .gallery-grid, .world-map, .audience-grid, .steps, .guide-cards { grid-template-columns: minmax(0, 1fr); }
  .world-map { min-height: 0; padding: var(--space-md); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-nav { grid-template-columns: repeat(4, auto); justify-content: start; }
  .related-games { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .related-games p { grid-column: auto; }
  .sticky-cta { justify-content: space-between; }
  .sticky-cta span { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); }
  .page-hero { padding-top: 7.5rem; }
  .page-hero figure { display: none; }
}

@media (max-width: 40rem) {
  .nav-pill { width: calc(100% - 1.25rem); margin-top: var(--space-xs); padding-inline-start: var(--space-sm); }
  .wordmark span { font-size: var(--text-sm); }
  .hero-inner { padding-top: 6.5rem; }
  .hero h1 { font-size: clamp(2.45rem, 13vw, 4.1rem); }
  .hero-media img { object-position: 58% 50%; animation: none; transform: none; }
  .hero-facts div { flex: 1 1 calc(50% - var(--space-xs)); }
  .button-row { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .button-row .button { width: 100%; }
  .dialogue-text { font-size: var(--text-md); }
  .info-grid div { padding: var(--space-md) var(--space-sm); }
  .gallery-card figcaption { min-height: 0; }
  .lightbox { width: 100vw; max-height: 100dvh; border: 0; }
  .lightbox img { height: calc(100dvh - 8.5rem); }
  .lightbox-toolbar { justify-content: space-between; }
  .lightbox-toolbar button { flex: 1; }
  .route-table { display: block; overflow-x: auto; }
  .footer-nav { grid-template-columns: repeat(2, auto); }
  .back-to-top { inset-inline-end: var(--space-xs); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: var(--dur-instant) !important; animation-iteration-count: 1 !important; transition-duration: var(--dur-instant) !important; }
  .hero-media img { transform: none !important; animation: none !important; }
}