/* Hallmark · macrostructure: Photographic · tone: restrained indie apartment folio · anchor hue: wine/gold
 * custom vibe: midnight apartment paper and dialogue · nav: N6 double masthead · footer: Ft4 dense colophon
 * paper: charcoal (user locked) · display: Songti SC roman · body: PingFang SC · axes: dark / roman-serif / warm-gold
 * H6 knobs: caption=lower-left, image=complete scene, overlay=bottom-only · motion: button-press and lightbox crossfade
 * Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4
 */
@import url('./tokens.css');
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}html{scroll-behavior:smooth;scroll-padding-top:116px}
body{margin:0;background:var(--color-page);color:var(--color-ink);font:var(--text-base)/1.8 var(--font-body);padding-bottom:80px}
img{max-width:100%;height:auto;display:block}a{color:inherit;text-underline-offset:3px}button{font:inherit;cursor:pointer}button,a,summary{-webkit-tap-highlight-color:var(--color-clear)}
h1,h2,h3{font-family:var(--font-display);font-style:normal;line-height:1.3;overflow-wrap:anywhere;min-width:0;letter-spacing:-.02em}h1{font-size:var(--text-3xl)}h2{font-size:var(--text-2xl);margin:0 0 var(--space-lg)}h3{font-size:var(--text-lg);margin:0 0 var(--space-sm)}p{margin:0 0 var(--space-md);max-width:65ch}figure{margin:0}figcaption{font-size:var(--text-sm);color:var(--color-muted);line-height:1.6;margin-top:var(--space-sm)}[hidden]{display:none!important}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}a:active,button:active{transform:translateY(1px)}
a[aria-disabled=true],button:disabled{opacity:.55;cursor:not-allowed;text-decoration:line-through;transform:none}a[data-state=loading],button[data-state=loading]{cursor:progress}button[data-state=error]{border-color:var(--color-error);color:var(--color-error)}button[data-state=success]{border-color:var(--color-success);color:var(--color-success)}
.skip{position:fixed;top:var(--space-md);left:var(--space-md);transform:translateY(-200%);z-index:100;background:var(--color-sheet);color:var(--color-ink);padding:var(--space-sm)}.skip:focus{transform:none}
.masthead{position:sticky;top:0;z-index:30;background:var(--color-paper);color:var(--color-light);border-bottom:4px double var(--color-rule-dark);padding:var(--space-xs) var(--space-md)}
.mastline{display:flex;align-items:center;justify-content:center;gap:var(--space-md);flex-wrap:wrap;line-height:1.2}.wordmark{font:700 var(--text-xl)/1 var(--font-outlier);letter-spacing:.06em;text-decoration:none}.mastline span{font-size:var(--text-xs);color:var(--color-dark-muted)}.main-nav{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-xs);line-height:1}
.main-nav a{font-size:var(--text-sm);white-space:nowrap;padding:var(--space-sm) var(--space-xs);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}.main-nav a[aria-current=page]{color:var(--color-accent);text-decoration:underline;text-underline-offset:6px}.main-nav .nav-download{color:var(--color-accent)}
.masthead a:focus-visible,.hero a:focus-visible,.closing a:focus-visible,footer a:focus-visible,.mobile-cta a:focus-visible{outline-color:var(--color-focus-dark)}
.hero{position:relative;isolation:isolate;min-height:max(520px,calc(100svh - 112px));display:flex;align-items:flex-end;background:var(--color-paper);color:var(--color-light)}.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% center;z-index:-3}.hero-shade{position:absolute;inset:0;background:linear-gradient(to top,var(--color-shade),var(--color-clear));z-index:-2}.game-logo{position:absolute;top:var(--space-lg);left:var(--space-lg);width:116px;height:auto;transform:rotate(-3deg);box-shadow:4px 4px 0 var(--color-shadow)}.hero-copy{padding:var(--space-2xl) var(--space-lg) var(--space-3xl);width:100%}.hero h1{font-size:var(--text-display);line-height:1.06;margin:0 0 var(--space-md)}.hero h1 span{display:block;font-size:var(--text-lg);font-weight:400;letter-spacing:.15em;margin-top:var(--space-sm)}.hero-line{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;margin-bottom:var(--space-sm)}.hero-lede{font-size:var(--text-sm);line-height:1.8}.hero-note{font-size:var(--text-xs);color:var(--color-dark-muted);margin:var(--space-md) 0 0}.tags{display:flex;gap:var(--space-xs);flex-wrap:wrap;margin-bottom:var(--space-md);font-size:var(--text-xs)}.tags span{border:1px solid var(--color-rule-dark);background:var(--color-paper);color:var(--color-light);padding:var(--space-2xs) var(--space-xs)}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-md);margin-top:var(--space-lg)}.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);min-height:48px;white-space:nowrap;font-size:var(--text-sm);font-weight:600;line-height:1.2;text-decoration:none;border:1px solid var(--color-rule-dark);transition:transform var(--dur-fast) var(--ease-out)}.primary{background:var(--color-accent);color:var(--color-accent-ink);border-color:var(--color-accent);box-shadow:4px 4px 0 var(--color-paper)}.secondary{background:var(--color-clear);color:inherit}.hero-scroll{display:none;position:absolute;bottom:var(--space-md);right:var(--space-lg);font-size:var(--text-xs);color:var(--color-dark-muted);text-decoration:none;white-space:nowrap;padding:var(--space-sm)}
.paper{max-width:1000px;margin:var(--space-xl) auto 0;background:var(--color-sheet);color:var(--color-ink);box-shadow:8px 8px 0 var(--color-paper);padding:0 var(--space-lg)}.paper>section{padding:var(--space-2xl) 0;border-bottom:1px solid var(--color-rule)}.paper>section:last-child{border:0}.overview{display:grid;gap:var(--space-xl)}.intro h2{font-size:var(--text-3xl)}.info-ledger{border-top:3px double var(--color-rule-dark);padding-top:var(--space-lg)}.info-ledger dl{margin:0}.info-ledger dl>div{display:grid;grid-template-columns:4em minmax(0,1fr);gap:var(--space-md);padding:var(--space-sm) 0;border-bottom:1px solid var(--color-rule)}dt{color:var(--color-muted)}dd{margin:0}.info-ledger dt,.info-ledger dd{font-size:var(--text-sm)}.small{font-size:var(--text-xs);color:var(--color-muted);line-height:1.8;margin-top:var(--space-md)}.text-link{display:inline-flex;align-items:center;min-height:44px;font-size:var(--text-sm);font-weight:600;white-space:nowrap}.section-head{display:flex;flex-direction:column;gap:var(--space-xs);margin-bottom:var(--space-lg)}.section-head h2{margin:0}.image-link{display:block;outline-offset:4px;background:var(--color-paper);color:var(--color-light)}.image-link img{width:100%;aspect-ratio:16/9;object-fit:contain}.thumb-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md);margin-top:var(--space-lg)}.thumb-strip figcaption{font-size:var(--text-xs)}
.feature-duo{display:grid;gap:var(--space-xl)}.feature-duo article{padding:var(--space-md) 0}.feature-duo h3{font-size:var(--text-xl)}.play-note{background:var(--color-sheet-soft);color:var(--color-ink);padding:var(--space-lg);margin-top:var(--space-lg)}.play-note p{margin:0}.character-strip{display:grid;gap:var(--space-xl)}.character-strip figcaption{display:none}.character-strip h3{margin-top:var(--space-md)}.character-strip p{font-size:var(--text-sm)}.download-band .secondary{border-color:var(--color-rule-dark)}.news-entry{display:grid;gap:var(--space-md)}.news-entry time{font-size:var(--text-sm);color:var(--color-muted)}.news-entry p{margin:0}
.faq details{border-bottom:1px solid var(--color-rule);padding:var(--space-md) 0}.faq summary{min-height:44px;cursor:pointer;display:list-item;font-weight:600;padding:var(--space-sm) var(--space-xs);line-height:1.6}.faq summary:active{background:var(--color-sheet-soft);color:var(--color-ink)}.answer{padding:var(--space-sm) var(--space-xs) var(--space-md);line-height:1.9;max-width:65ch}.answer a{text-decoration:underline}.faq details[open] summary{color:var(--color-ink)}
.closing{background:var(--color-paper);color:var(--color-light);max-width:1000px;margin:var(--space-xl) auto 0;padding:var(--space-2xl) var(--space-lg);display:flex;align-items:flex-start;flex-direction:column;gap:var(--space-lg)}.closing h2{margin:0 0 var(--space-sm)}.closing p{margin:0}.closing .small{color:var(--color-dark-muted);width:100%}
footer{max-width:1000px;margin:0 auto;background:var(--color-paper);color:var(--color-dark-muted);padding:var(--space-2xl) var(--space-lg);font-size:var(--text-sm)}.footer-name{font:700 var(--text-2xl)/1.2 var(--font-outlier);color:var(--color-light);text-decoration:none;display:inline-block;margin-bottom:var(--space-md)}.footer-name span{font:var(--text-sm)/1.3 var(--font-body);margin-left:var(--space-sm)}.footer-links,.related{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-sm) var(--space-lg)}.footer-links a,.related a{white-space:nowrap;display:inline-flex;align-items:center;min-height:44px;text-decoration:none}.related-title{margin:var(--space-lg) 0 var(--space-xs);color:var(--color-light)}.colophon{border-top:1px solid var(--color-rule-dark);margin-top:var(--space-xl);padding-top:var(--space-lg);font-size:var(--text-xs)}.colophon p{max-width:75ch}.mobile-cta{position:fixed;z-index:25;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);background:var(--color-paper);color:var(--color-light);padding:var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom));border-top:1px solid var(--color-rule-dark)}.mobile-cta>a:first-child{font-size:var(--text-xs);line-height:1.2;white-space:nowrap;padding-block:var(--space-sm)}.mobile-cta .button{font-size:var(--text-xs);min-height:44px;padding-inline:var(--space-sm)}
.breadcrumbs{max-width:1000px;margin:var(--space-lg) auto;display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-sm);padding-inline:var(--space-lg);color:var(--color-light);font-size:var(--text-sm)}.breadcrumbs a{min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}.subpaper{margin-top:0}.page-intro{padding:var(--space-2xl) 0;border-bottom:3px double var(--color-rule-dark)}.page-intro h1{font-size:clamp(2rem,4vw,3rem);margin:0 0 var(--space-lg)}.intro-lede{font-size:var(--text-base)}.get-card .button{margin:var(--space-md) 0}.specs{margin:var(--space-lg) 0}.specs>div{display:grid;grid-template-columns:6em minmax(0,1fr);gap:var(--space-md);padding:var(--space-md) 0;border-bottom:1px solid var(--color-rule)}.specs dd{font-weight:600;overflow-wrap:anywhere}.steps{padding-left:var(--space-lg);margin:var(--space-lg) 0}.steps li{padding-left:var(--space-xs);margin-bottom:var(--space-xl)}.steps h3{margin:0 0 var(--space-xs)}.steps p{margin:0}.toc{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-md);padding:var(--space-lg) 0;border-bottom:1px solid var(--color-rule)}.toc a{white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;font-size:var(--text-sm);font-weight:600}.next-reading .text-link{margin-right:var(--space-lg)}
.filters{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-sm);margin:var(--space-lg) 0}.filter,.control{background:var(--color-sheet);color:var(--color-ink);border:1px solid var(--color-rule-dark);min-height:44px;padding:var(--space-sm) var(--space-md);line-height:1.2;white-space:nowrap;font-size:var(--text-sm);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:transform var(--dur-fast) var(--ease-out)}.filter[aria-pressed=true]{background:var(--color-paper);color:var(--color-light)}.gallery-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-xl);padding-bottom:var(--space-2xl)}
.lightbox{position:fixed;inset:0;margin:auto;width:min(1100px,calc(100% - 24px));height:fit-content;max-height:90dvh;overflow:auto;background:var(--color-paper);color:var(--color-light);border:1px solid var(--color-rule-dark);padding:var(--space-md)}.lightbox::backdrop{background:var(--color-overlay)}.lightbox-tools{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--space-xs);margin-bottom:var(--space-md)}.control{background:var(--color-paper);color:var(--color-light);border-color:var(--color-rule-dark);padding:var(--space-sm);font-size:var(--text-xs)}.control:focus-visible{outline-color:var(--color-focus-dark)}.lightbox-media{position:relative;aspect-ratio:16/9;display:grid;place-items:center}.lightbox-image{width:100%;height:100%;object-fit:contain;transition:opacity var(--dur-normal) var(--ease-out)}.lightbox-status{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:var(--space-md);background:var(--color-paper);color:var(--color-light);font-size:var(--text-sm);margin:0}.lightbox-status:empty{display:none}.lightbox-status a{display:block;min-height:44px;padding:var(--space-sm);color:var(--color-accent)}.lightbox-caption{font-size:var(--text-sm);color:var(--color-dark-muted);margin:var(--space-md) 0 0}.lightbox[data-state=loading] .lightbox-image,.lightbox[data-state=error] .lightbox-image{opacity:0}.lightbox[data-state=success] .lightbox-image{opacity:1}
@media(hover:hover){.button:hover,.image-link:hover,.filter:hover,.control:hover{transform:translateY(-2px)}.main-nav a:hover,.text-link:hover,footer a:hover{color:var(--color-focus-dark)}.paper .text-link:hover{color:var(--color-focus)}.faq summary:hover{background:var(--color-sheet-soft);color:var(--color-ink)}}
@media(min-width:640px){.hero-copy{padding:var(--space-3xl) var(--space-2xl) var(--space-4xl)}.hero-lede{font-size:var(--text-base)}.hero-line{font-size:var(--text-2xl)}.game-logo{width:160px;left:var(--space-2xl);top:var(--space-xl)}.paper{padding-inline:var(--space-2xl)}.thumb-strip{grid-template-columns:repeat(4,minmax(0,1fr))}.feature-duo{grid-template-columns:repeat(2,minmax(0,1fr))}.character-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.section-head{flex-direction:row;align-items:center;justify-content:space-between}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.closing{flex-direction:row;align-items:center;flex-wrap:wrap;justify-content:space-between;padding-inline:var(--space-2xl)}footer{padding-inline:var(--space-2xl)}.news-entry{grid-template-columns:8em minmax(0,1fr)}}
@media(min-width:960px){body{padding-bottom:0}.masthead{padding-block:var(--space-sm)}.mastline{gap:var(--space-lg)}.wordmark{font-size:var(--text-2xl)}.mastline span{font-size:var(--text-sm)}.main-nav{gap:var(--space-lg)}.hero{min-height:calc(100svh - 116px);max-height:950px}.hero-scroll{display:block}.hero-copy{padding-inline:max(var(--space-2xl),calc((100% - 1120px)/2));width:100%}.hero-copy{padding-left:max(280px,calc((100% - 860px)/2))}.hero-lede{max-width:44ch}.game-logo{left:max(var(--space-2xl),calc((100% - 1120px)/2))}.overview{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--space-2xl)}.info-ledger{border-top:0;border-left:1px solid var(--color-rule);padding:0 0 0 var(--space-xl)}.paper{margin-top:var(--space-2xl)}.subpaper{margin-top:0}.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.mobile-cta{display:none}}
@media(max-width:374px){.hero-copy{padding-inline:var(--space-md);padding-bottom:var(--space-3xl)}.hero .actions{gap:var(--space-xs)}.hero .button{padding-inline:var(--space-sm);font-size:var(--text-xs)}.mastline{gap:var(--space-xs)}.main-nav{gap:var(--space-2xs)}.main-nav a{font-size:var(--text-xs)}.mastline span{font-size:.6875rem}.hero .tags{gap:var(--space-2xs)}.hero .tags span{padding-inline:var(--space-2xs)}.hero-lede{font-size:var(--text-xs)}.paper{padding-inline:var(--space-md)}.specs>div{grid-template-columns:5em minmax(0,1fr)}.lightbox{padding:var(--space-xs)}.control{padding:var(--space-xs)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.button:hover,.image-link:hover,.filter:hover,.control:hover,a:active,button:active{transform:none}.game-logo{transform:none}}

/* Compact containers also adapt correctly under browser text enlargement. */
.paper,.mobile-cta{container-type:inline-size}
@container(max-width:360px){.specs>div{grid-template-columns:minmax(0,1fr);gap:var(--space-xs)}.text-link{font-size:var(--text-xs)}}
@container(max-width:280px){.mobile-cta>a:first-child{display:none}.mobile-cta .button{width:100%}}

.masthead{container-type:inline-size}
@container(max-width:280px){.mastline span{display:none}.main-nav{gap:var(--space-2xs)}.main-nav a{font-size:var(--text-xs);padding-inline:var(--space-2xs)}}