/* Hallmark · pre-emit critique: P5 H4 E5 S5 R4 V5 */
/* Hallmark · genre: atmospheric · macrostructure: Photographic · theme: Midnight · enrichment: Tier-D real Steam artwork · nav: N5 · footer: Ft5
 * H6 knobs: image-area=full-bleed, caption=lower-left, text=overlaid · F3 knobs: columns=3, rule-density=groups-of-3, numbers=tabular · F4 knobs: numbering=I/II/III, layout=vertical-stack, connector=line
 * C4 knobs: reveal=always, anchored=viewport-bottom, shadow=subtle · N5 knobs: width=max-720, backdrop=blur+saturate, anchor=top-centred · Ft5 knobs: sentence-width=38ch, wordmark=under-sentence, rule=hairline · contrast: pass (40–41) · slop: pass (42–45) · responsive: pass (34, 49, 50–57)
 */
@import url("../../tokens.css");

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 0; overflow-x: clip; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); }
html { scroll-behavior: smooth; }
body { line-height: 1.72; padding-bottom: 5.25rem; }
body::before, body::after { content: ""; position: fixed; z-index: -1; width: 34rem; height: 34rem; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .16; }
body::before { background: var(--color-accent); inset: -14rem auto auto -15rem; }
body::after { background: var(--color-cyan); inset: auto -17rem 10rem auto; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
button:active, a:active { transform: translateY(1px); }
button:disabled, a[aria-disabled="true"] { cursor: not-allowed; opacity: .55; pointer-events: none; }
.shell { width: min(100% - 2rem, 76rem); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.topnav { position: fixed; z-index: 20; inset: max(var(--space-md), env(safe-area-inset-top)) auto auto 50%; width: min(calc(100% - 2rem), 45rem); transform: translateX(-50%); display: flex; align-items: center; gap: var(--space-sm); padding: .42rem .45rem .42rem var(--space-sm); background: var(--color-glass); border: var(--rule-thin) solid var(--color-rule); border-radius: 999px; backdrop-filter: blur(18px) saturate(130%); box-shadow: 0 .75rem 2.5rem var(--color-overlay); }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; min-width: 0; }
.brand img { width: 9.8rem; height: 2.6rem; object-fit: contain; object-position: left center; }
.navlinks { display: flex; align-items: center; justify-content: center; gap: clamp(.5rem, 1.5vw, 1rem); min-width: 0; flex: 1; }
.navlinks a { color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.navlinks a:hover { color: var(--color-ink); }
.nav-download, .download-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.65rem; padding: .55rem 1rem; border: 0; border-radius: var(--radius-sm); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 800; white-space: nowrap; box-shadow: 0 0 1.8rem var(--color-accent-soft); transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.nav-download:hover, .download-btn:hover { background: var(--color-accent-strong); transform: translateY(-2px); }
.nav-download:active, .download-btn:active { transform: translateY(1px); }
.menu-toggle { display: none; margin-left: auto; min-width: 2.75rem; min-height: 2.75rem; color: var(--color-ink); background: var(--color-clear); border: 0; font-size: var(--text-lg); }
.hero-photo { position: relative; min-height: min(52rem, 100dvh); display: grid; align-items: end; isolation: isolate; overflow: clip; }
.hero-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--color-overlay), var(--color-hero-mid) 62%, var(--color-hero-deep)), linear-gradient(0deg, var(--color-paper), var(--color-clear) 44%); }
.hero-photo > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(1.12) contrast(1.08); }
.hero-copy { width: min(100% - 2rem, 76rem); margin: 0 auto; padding: clamp(8rem, 20vh, 12rem) 0 var(--space-3xl); }
.eyebrow { margin: 0 0 var(--space-sm); color: var(--color-cyan); font-family: var(--font-body); font-weight: 700; font-size: var(--text-xs); letter-spacing: .12em; }
h1, h2, h3, p { min-width: 0; overflow-wrap: anywhere; }
h1 { max-width: 12ch; margin: 0; color: var(--color-white); font-family: var(--font-display); font-size: var(--text-display-s); font-style: normal; font-weight: 700; letter-spacing: -.035em; line-height: 1.02; text-transform: uppercase; }
h1 span { display: block; font-family: var(--font-body); font-size: clamp(1.2rem, 2.5vw, 2rem); font-weight: 700; letter-spacing: .02em; line-height: 1.2; text-transform: none; }
.hero-lede { max-width: 38rem; margin: var(--space-lg) 0; color: var(--color-ink); font-size: var(--text-lg); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.secondary-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: .65rem 1rem; border: var(--rule-thin) solid var(--color-muted); border-radius: var(--radius-sm); color: var(--color-ink); font-weight: 700; white-space: nowrap; transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.secondary-btn:hover { border-color: var(--color-ink); transform: translateY(-2px); }
.caption { max-width: 28rem; margin: var(--space-lg) 0 0; color: var(--color-muted); font-size: var(--text-sm); }
.signal-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rule-thin); margin: 0 auto; background: var(--color-rule); }
.signal-strip > div { padding: var(--space-lg); background: var(--color-paper-2); }
.signal-strip strong { display: block; font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: .02em; }
.signal-strip span { color: var(--color-muted); font-size: var(--text-sm); }
section { padding-block: var(--space-3xl); }
.section-kicker { margin: 0 0 var(--space-xs); color: var(--color-cyan); font-family: var(--font-body); font-weight: 700; font-size: var(--text-xs); letter-spacing: .1em; }
h2 { max-width: 21ch; margin: 0; font-family: var(--font-display); font-size: var(--text-3xl); font-style: normal; letter-spacing: -.025em; line-height: 1.02; text-transform: uppercase; }
.section-intro { max-width: 42rem; margin: var(--space-lg) 0 0; color: var(--color-muted); }
.annotation-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.story-copy { max-width: 46rem; font-size: var(--text-lg); }
.story-copy p { margin: 0 0 var(--space-lg); }
.story-copy p:last-child { margin-bottom: 0; }
.spec-sheet { width: 100%; border-collapse: collapse; margin-top: var(--space-2xl); font-size: var(--text-sm); }
.spec-sheet th, .spec-sheet td { padding: var(--space-md) var(--space-sm); border-bottom: var(--rule-thin) solid var(--color-rule); text-align: left; vertical-align: top; }
.spec-sheet th { width: 8rem; color: var(--color-muted); font-weight: 600; }
.spec-sheet td:last-child { color: var(--color-dim); }
.feature-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-2xl); }
.feature { min-height: 12rem; padding: var(--space-xl); background: var(--color-paper-2); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.feature:hover { border-color: var(--color-accent); transform: translateY(-3px); }
.feature-number { color: var(--color-accent); font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm); }
.feature h3 { margin: var(--space-lg) 0 var(--space-xs); font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: .01em; text-transform: uppercase; }
.feature p { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.image-fold { position: relative; width: 100vw; max-width: none; min-height: 56dvh; display: grid; align-items: end; margin-inline: calc(50% - 50vw); overflow: clip; }
.image-fold img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(1.03) contrast(1.04); }
.image-fold::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--color-overlay), var(--color-clear) 52%); }
.image-fold figcaption { position: relative; z-index: 1; width: min(100% - 2rem, 76rem); margin-inline: auto; padding: var(--space-xl); color: var(--color-ink); }
.image-fold h2 { font-size: var(--text-2xl); }
.image-fold p { margin: var(--space-sm) 0 0; color: var(--color-muted); }
.gallery-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-2xl); }
.gallery-item { position: relative; padding: 0; overflow: clip; background: var(--color-paper-2); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-sm); cursor: zoom-in; }
.gallery-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform var(--dur-medium) var(--ease-out); }
.gallery-item:hover img { transform: scale(1.035); }
.gallery-item span { display: block; padding: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); text-align: left; }
.text-link { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: var(--space-lg); color: var(--color-cyan); font-weight: 700; white-space: nowrap; }
.text-link::after { content: "→"; margin-inline-start: var(--space-xs); transition: transform var(--dur-short) var(--ease-out); }
.text-link:hover::after { transform: translateX(4px); }
.download-band { background: var(--color-paper-3); }
.download-band .shell { display: grid; gap: var(--space-xl); align-items: center; }
.download-band h2 { max-width: 14ch; }
.download-band p { margin: var(--space-sm) 0 0; color: var(--color-muted); }
.download-btn { min-height: 3.5rem; padding-inline: var(--space-xl); width: fit-content; }
.timeline { position: relative; display: grid; gap: 0; margin-top: var(--space-2xl); }
.timeline::before { content: ""; position: absolute; inset: .7rem auto .7rem .35rem; width: var(--rule-thin); background: var(--color-rule); }
.timeline li { position: relative; padding: 0 0 var(--space-xl) var(--space-xl); list-style: none; }
.timeline li::before { content: ""; position: absolute; inset: .23rem auto auto 0; width: .75rem; height: .75rem; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 .25rem var(--color-paper); }
.stage { color: var(--color-cyan); font-family: var(--font-body); font-weight: 700; font-size: var(--text-xs); }
.timeline h3 { margin: var(--space-2xs) 0; font-size: var(--text-lg); }
.timeline p { max-width: 46rem; margin: 0; color: var(--color-muted); }
.fit-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-2xl); }
.fit-card { padding: var(--space-xl); border-radius: var(--radius-md); background: var(--color-paper-2); }
.fit-card h3 { margin: 0 0 var(--space-sm); font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: .01em; }
.fit-card p { margin: 0; color: var(--color-muted); }
.faq { margin-top: var(--space-2xl); border-top: var(--rule-thin) solid var(--color-rule); }
.faq details { border-bottom: var(--rule-thin) solid var(--color-rule); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 4rem; cursor: pointer; font-weight: 700; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--color-accent); font-family: var(--font-body); font-weight: 700; font-size: var(--text-xl); }
.faq details[open] summary::after { content: "−"; }
.faq p { max-width: 52rem; margin: 0 0 var(--space-lg); color: var(--color-muted); }
.final-cta { padding-block: var(--space-4xl); text-align: center; }
.final-cta h2, .final-cta p { margin-inline: auto; }
.final-cta p { max-width: 42rem; color: var(--color-muted); }
.final-cta .download-btn { margin-top: var(--space-lg); }
.footer { padding: var(--space-3xl) 0 var(--space-xl); border-top: var(--rule-thin) solid var(--color-rule); }
.footer-statement { max-width: 24ch; margin: 0; font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.02; letter-spacing: -.025em; text-transform: uppercase; }
.footer-meta { display: grid; gap: var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-thin) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }
.footer-logo { width: 10rem; height: auto; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.footer-links a { white-space: nowrap; }
.footer-links a:hover { color: var(--color-ink); }
.cta-sticky { position: fixed; z-index: 19; inset: auto 0 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: 4.5rem; padding: var(--space-sm) max(1rem, env(safe-area-inset-right)) max(var(--space-sm), env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); background: var(--color-glass-strong); border-top: var(--rule-thin) solid var(--color-rule); backdrop-filter: blur(18px); box-shadow: 0 -1rem 2rem var(--color-overlay); }
.cta-sticky span { color: var(--color-muted); font-size: var(--text-sm); }
.cta-sticky .download-btn { min-height: 2.65rem; padding: .5rem 1rem; }
.lightbox { width: min(100% - 1rem, 78rem); max-height: 92dvh; padding: 0; color: var(--color-ink); background: var(--color-paper-2); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); }
.lightbox::backdrop { background: var(--color-overlay); backdrop-filter: blur(6px); }
.lightbox-inner { position: relative; }
.lightbox img { width: 100%; max-height: 77dvh; object-fit: contain; background: var(--color-paper); }
.lightbox figcaption { padding: var(--space-md) 4rem var(--space-md) var(--space-md); color: var(--color-muted); }
.dialog-close, .dialog-prev, .dialog-next { position: absolute; z-index: 1; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: var(--rule-thin) solid var(--color-rule); border-radius: 50%; color: var(--color-ink); background: var(--color-paper-2); cursor: pointer; }
.dialog-close { inset: var(--space-sm) var(--space-sm) auto auto; }
.dialog-prev { inset: 50% auto auto var(--space-sm); transform: translateY(-50%); }
.dialog-next { inset: 50% var(--space-sm) auto auto; transform: translateY(-50%); }
.page-hero { padding: 10rem 0 var(--space-3xl); background: linear-gradient(135deg, var(--color-paper-2), var(--color-paper)); }
.page-hero h1 { font-size: var(--text-3xl); line-height: .96; }
.page-hero p { max-width: 43rem; margin: var(--space-lg) 0 0; color: var(--color-muted); }
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xl); }
.tab { min-height: 2.6rem; padding: .45rem .85rem; border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-sm); color: var(--color-muted); background: var(--color-clear); cursor: pointer; white-space: nowrap; }
.tab[aria-selected="true"] { color: var(--color-paper); border-color: var(--color-accent); background: var(--color-accent); }
.gallery-item[hidden] { display: none; }
.platform-grid, .requirement-grid, .guide-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-2xl); }
.platform-card, .requirement, .guide-card { padding: var(--space-xl); background: var(--color-paper-2); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); }
.platform-card.recommended { border-color: var(--color-accent); }
.card-label { display: inline-block; margin-bottom: var(--space-lg); color: var(--color-cyan); font-family: var(--font-body); font-weight: 700; font-size: var(--text-xs); }
.platform-card h2, .requirement h2, .guide-card h2 { font-size: var(--text-2xl); }
.platform-card p, .requirement p, .guide-card p { color: var(--color-muted); }
.platform-card .download-btn { margin-top: var(--space-lg); }
.requirement ul { margin: var(--space-lg) 0 0; padding-left: 1.2rem; color: var(--color-muted); }
.article-list { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-2xl); }
.article-list a { display: block; min-height: 100%; padding: var(--space-lg); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper-2); transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.article-list a:hover { border-color: var(--color-accent); transform: translateY(-3px); }
.article-list strong { display: block; font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: .01em; }
.article-list span { display: block; margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }
.article { width: min(100% - 2rem, 48rem); margin-inline: auto; padding: 10rem 0 var(--space-3xl); }
.article h1 { font-size: var(--text-3xl); line-height: 1.02; }
.article h2 { margin-top: var(--space-3xl); font-size: var(--text-2xl); }
.article p, .article li { color: var(--color-muted); }
.article table { width: 100%; margin-top: var(--space-xl); border-collapse: collapse; }
.article th, .article td { padding: var(--space-sm); border-bottom: var(--rule-thin) solid var(--color-rule); text-align: left; vertical-align: top; }
.article th { color: var(--color-ink); }
.article nav { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-2xl); }
@media (min-width: 40rem) { .signal-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .platform-grid, .requirement-grid, .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .annotation-grid { grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr); } .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .download-band .shell { grid-template-columns: minmax(0, 1fr) auto; } .footer-meta { grid-template-columns: 10rem minmax(0, 1fr); align-items: center; } .article-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 44rem) { .topnav { justify-content: space-between; } .navlinks, .topnav > .nav-download { display: none; } .menu-toggle { display: grid; place-items: center; } .topnav[data-open="true"] { flex-wrap: wrap; border-radius: var(--radius-md); } .topnav[data-open="true"] .navlinks { display: grid; order: 3; width: 100%; padding: var(--space-sm); } .topnav[data-open="true"] .navlinks a { min-height: 2.75rem; display: flex; align-items: center; } .topnav[data-open="true"] > .nav-download { display: inline-flex; } .cta-sticky span { display: none; } }
@media (max-width: 28rem) { .brand img { width: 7.5rem; } .hero-actions .download-btn, .hero-actions .secondary-btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0ms !important; animation-duration: 0ms !important; } }