/* Layout: one editorial gutter for every page. Big condensed display type for names and numbers,
   a book serif for reading, and one pencil-blue accent. The game page swaps in the game's own palette. */
:root {
  /* dark first: the portrait and the night sky are both shot on black */
  --bg: #0C0D10;
  --bg-2: #15171C;
  --fg: #ECEAE4;
  --mute: #8F929A;
  --line: rgba(236, 234, 228, 0.13);
  --accent: #A4DDED;
  --accent-ink: #0C0D10;
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --text: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F2F1EC; --bg-2: #E7E6E0; --fg: #131418; --mute: #5C5F67;
    --line: rgba(19, 20, 24, 0.14); --accent: #1D6784; --accent-ink: #F2F1EC;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #F2F1EC; --bg-2: #E7E6E0; --fg: #131418; --mute: #5C5F67;
  --line: rgba(19, 20, 24, 0.14); --accent: #1D6784; --accent-ink: #F2F1EC;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--text); font-size: 18px; line-height: 1.6; font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
.site-main, .site-footer { padding-inline: var(--gutter); }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: .5rem 1rem; border-radius: 999px; text-decoration: none; }
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }
h1, h2, h3 { margin: 0; font-weight: 700; text-wrap: balance; }
p { margin: 0; }
.display { font-family: var(--display); text-transform: uppercase; line-height: 0.88; letter-spacing: 0.005em; }
.label { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; color: var(--accent); }
.more { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; color: var(--accent); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; gap: .4rem; align-items: center; }
.more::after { content: "→"; transition: transform .35s var(--ease); }
.more:hover::after { transform: translateX(4px); }
.site-link { font-size: .92rem; color: var(--accent); text-decoration: none; }
.site-link:hover { text-decoration: underline; }

/* ── nav ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) var(--gutter) 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: transform .45s var(--ease);
}
.nav.is-hidden { transform: translateY(-100%); }
.nav-name { font-family: var(--display); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; white-space: nowrap; }
.nav-links { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav-links a { text-decoration: none; font-size: .95rem; color: var(--mute); transition: color .3s var(--ease); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--fg); }
.nav-links a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 6px; }
.nav-cta { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .95rem; text-decoration: none; padding: .45rem .9rem; border: 1px solid var(--fg); border-radius: 999px; transition: background .3s var(--ease), color .3s var(--ease); }
.nav-cta:hover { background: var(--fg); color: var(--bg); }
.menu-btn { display: none; background: none; border: 1px solid var(--line); color: var(--fg); font: inherit; font-size: .9rem; padding: .35rem .8rem; border-radius: 999px; cursor: pointer; }
.menu {
  position: fixed; inset: 0; z-index: 49; background: var(--bg);
  padding: calc(env(safe-area-inset-top, 0px) + 90px) var(--gutter) 2rem;
  display: flex; flex-direction: column; gap: .4rem; overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu ul { list-style: none; margin: 0; padding: 0; display: contents; }
.menu a { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(2.6rem, 12vw, 3.6rem); line-height: 1.02; text-decoration: none; }
.menu a[aria-current="page"] { color: var(--accent); }
@media (max-width: 900px) {
  .nav nav, .nav-cta { display: none; }
  .menu-btn { display: inline-block; }
}

/* ── buttons ── */
.ctas { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  font-size: 1.05rem; text-decoration: none; padding: .75rem 1.3rem; border-radius: 999px;
  border: 1px solid var(--fg); background: transparent; color: var(--fg); cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover { background: var(--fg); color: var(--bg); }
.btn-solid { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-solid:hover { background: var(--fg); border-color: var(--fg); }
.mini { font: inherit; font-size: .9rem; padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--fg); text-decoration: none; cursor: pointer; transition: border-color .25s, color .25s; }
.mini:hover { border-color: var(--accent); color: var(--accent); }

/* ── page hero (inner pages) ── */
.page-hero { position: relative; padding-block: calc(env(safe-area-inset-top, 0px) + 130px) clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--line); }
.page-title { font-size: clamp(4.2rem, 14vw, 13rem); font-weight: 900; position: relative; }
.page-hero-plain .page-title, .page-title-long { font-size: clamp(2rem, 8.6vw, 8.8rem); }
.times { text-transform: none; }
.page-hero-row { margin-top: clamp(1.5rem, 3vw, 2.5rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: end; position: relative; }
.page-hero .ctas { margin-top: 2rem; }
.page-lede, .page-lede p { font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.3; max-width: 32ch; }
.page-lede p + p { margin-top: .8rem; }
.page-note { color: var(--mute); font-size: 1rem; max-width: 46ch; }
.page-note a { color: var(--accent); }
@media (max-width: 760px) { .page-hero-row { grid-template-columns: 1fr; } }

/* ── stats ── */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; padding-block: clamp(2.5rem, 6vw, 5rem); border-bottom: 1px solid var(--line); }
.stat-num { font-size: clamp(3rem, 6vw, 5.8rem); font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-label { color: var(--mute); font-size: 1rem; line-height: 1.4; margin-top: .6rem; max-width: 24ch; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; } }

/* ── section shell ── */
.section { padding-block: clamp(4rem, 9vw, 8rem); border-bottom: 1px solid var(--line); }
.section-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .label { margin-bottom: 1rem; }
.section-title { font-size: clamp(3rem, 7.5vw, 7rem); font-weight: 900; }
.title-soft { display: block; font-size: .42em; line-height: 1; color: var(--mute); margin-top: .5rem; }
.section-sub { color: var(--mute); max-width: 42ch; font-size: 1.05rem; }
.section-sub strong { color: var(--fg); font-weight: 500; }
@media (max-width: 820px) { .section-head { grid-template-columns: 1fr; } }

/* ── home hero (particle stage) ── */
.hero { margin-inline: calc(-1 * var(--gutter)); }
.stage {
  position: relative; height: 100svh; min-height: 560px;
  padding: calc(env(safe-area-inset-top, 0px) + 84px) var(--gutter) clamp(20px, 4vh, 40px);
  display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; --p: 0;
}
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.stage-top, .stage-bottom { position: relative; z-index: 2; pointer-events: none; }
.stage-top a, .stage-bottom a { pointer-events: auto; }
.stage-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.caps { position: relative; height: 2.2em; font-size: clamp(1.6rem, 3.4vw, 2.6rem); }
.caps span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.cap-a { opacity: calc(1 - var(--p) * 3); }
.cap-b { opacity: calc(var(--p) * 3 - 1.4); color: var(--accent); }
.stage-role { font-size: 1rem; color: var(--mute); text-align: right; max-width: 18ch; line-height: 1.35; }
.chart-label { position: absolute; z-index: 2; pointer-events: none; font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 2rem); color: var(--accent); opacity: calc(var(--p) * 4 - 3); line-height: 1; font-variant-numeric: tabular-nums; }
.lbl-start { left: var(--x0); top: var(--y0); transform: translate(0, calc(-100% - 12px)); }
.lbl-end { left: var(--x1); top: var(--y1); transform: translate(-100%, calc(-100% - 12px)); }
.lbl-note { left: var(--x0); top: var(--yb); transform: translateY(20px); font-family: var(--text); font-weight: 400; font-size: .95rem; color: var(--mute); }
.stage-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
.tagline { max-width: 34ch; min-width: 0; }
.tagline strong { display: block; font-weight: 500; font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.2; margin-bottom: .5rem; }
.tagline span { color: var(--mute); font-size: 1rem; line-height: 1.5; display: block; }
.scroll-cue { font-size: .9rem; color: var(--mute); opacity: calc(1 - var(--p) * 5); }
@media (max-width: 700px) { .scroll-cue { display: none; } }

/* ── home results track ── */
.results { margin-inline: calc(-1 * var(--gutter)); border-bottom: 1px solid var(--line); overflow: hidden; }
.results-inner { padding-block: clamp(4.5rem, 9vw, 7rem); }
.track { display: flex; padding-inline: var(--gutter); }
.results.is-pinned .track { will-change: transform; }
.results.is-pinned .results-inner { height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: 90px 40px; }
.panel { flex: 0 0 auto; width: min(34rem, 80vw); min-width: 0; padding: 0 clamp(1.5rem, 3vw, 3rem); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 1rem; }
.panel:first-child { border-left: 0; padding-left: 0; }
.panel-intro { width: min(30rem, 80vw); justify-content: space-between; }
.panel-intro .section-title { font-size: clamp(3rem, 6vw, 5.6rem); }
.panel-co { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 1.05rem; color: var(--accent); }
.panel h3 { font-weight: 500; font-size: 1.35rem; line-height: 1.2; }
.panel-metric-big { font-size: clamp(3.4rem, 6.5vw, 6rem); font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.panel-metric-big.soft { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.panel-metric-unit { color: var(--mute); font-size: 1rem; margin-top: .5rem; }
.panel .desc { color: var(--mute); font-size: 1rem; line-height: 1.55; max-width: 44ch; }
.panel .desc strong { color: var(--fg); font-weight: 500; }
.panel-end { text-decoration: none; justify-content: center; gap: 1.2rem; }
.panel-end .display { font-size: clamp(3rem, 6vw, 5.4rem); font-weight: 900; color: var(--accent); transition: transform .5s var(--ease); }
.panel-end .display::after { content: " →"; }
.panel-end:hover .display { transform: translateX(8px); }
.panel-end-sub { color: var(--mute); max-width: 32ch; }
.bars { display: grid; gap: .5rem; margin-block: .2rem; }
.bar-row { display: grid; grid-template-columns: 4.2rem 1fr 3.6rem; align-items: center; gap: .7rem; font-size: .9rem; color: var(--mute); font-variant-numeric: tabular-nums; }
.bar { height: 10px; background: var(--line); border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--fg); width: var(--w); min-width: 2px; }
.bar-row.after .bar i { background: var(--accent); }
.bar-row b { font-weight: 500; color: var(--fg); text-align: right; }
@media (max-width: 899px) {
  .track { flex-direction: column; gap: 3rem; }
  .panel, .panel-intro { width: 100%; border-left: 0; padding: 0; }
  .panel + .panel { border-top: 1px solid var(--line); padding-top: 3rem; }
}

/* ── home build list ── */
.build-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.build-row { border-bottom: 1px solid var(--line); }
.build-link { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 2rem; align-items: center; padding-block: clamp(1.4rem, 2.6vw, 2.2rem); text-decoration: none; transition: padding .5s var(--ease); }
.build-name { font-size: clamp(2.6rem, 5.4vw, 4.8rem); font-weight: 900; }
.build-what { color: var(--mute); font-size: .98rem; line-height: 1.5; min-width: 0; }
.build-what strong { display: block; color: var(--fg); font-weight: 500; font-size: 1.12rem; line-height: 1.3; margin-bottom: .3rem; }
.build-go { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 1rem; color: var(--mute); white-space: nowrap; }
.build-row .inline-shot { display: none; }
@media (hover: hover) and (min-width: 900px) {
  a.build-link:hover { padding-left: 1.2rem; }
  a.build-link:hover .build-name { color: var(--accent); }
  a.build-link:hover .build-go { color: var(--fg); }
}
@media (hover: none), (max-width: 899px) {
  .build-link { grid-template-columns: 1fr; gap: .8rem; }
  .build-row .inline-shot { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; border-radius: 6px; margin-bottom: 1.6rem; }
}
.preview { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; width: 340px; aspect-ratio: 16 / 10; max-width: 100%; margin: -106px 0 0 -170px; border-radius: 8px; overflow: hidden; opacity: 0; transition: opacity .35s var(--ease); box-shadow: 0 30px 60px rgba(0, 0, 0, .45); }
.preview.on { opacity: 1; }
.preview img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ── home: after hours ── */
.beyond-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.5rem); }
.beyond-card { display: grid; gap: .7rem; text-decoration: none; align-content: start; min-width: 0; }
.beyond-media { display: block; position: relative; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: #05070B; border: 1px solid var(--line); max-width: 100%; }
.beyond-media img, .beyond-media canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.beyond-card:hover .beyond-media img { transform: scale(1.04); }
.beyond-kicker { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; color: var(--accent); margin-top: .6rem; }
.beyond-title { font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 900; }
.beyond-text { color: var(--mute); max-width: 44ch; font-size: 1.02rem; }
@media (max-width: 760px) { .beyond-grid { grid-template-columns: 1fr; gap: 3rem; } }

/* ── post lists ── */
.post-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.post-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: 1.5rem; align-items: baseline; padding-block: 1.3rem; border-bottom: 1px solid var(--line); text-decoration: none; transition: padding .4s var(--ease), background .25s; }
.post-row:hover { background: var(--bg-2); padding-inline: .8rem; }
.post-date { color: var(--mute); font-size: .95rem; font-variant-numeric: tabular-nums; }
.post-title { font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.3; }
.post-go { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.words-ctas { margin-top: 2rem; }
@media (max-width: 640px) { .post-row { grid-template-columns: 1fr; gap: .2rem; } }

/* ── about + timeline ── */
.about { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.portrait { border-radius: 6px; overflow: hidden; background: #000; aspect-ratio: 1 / 1; max-width: 100%; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.about-body { display: grid; gap: 2rem; min-width: 0; }
.about-lede { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.25; }
.prose-mute p { color: var(--mute); max-width: 58ch; }
.prose-mute p + p { margin-top: 1rem; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.fact h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: .05em; font-size: 1.05rem; color: var(--accent); margin-bottom: .4rem; }
.fact p, .fact li { font-size: 1rem; line-height: 1.5; }
.fact ul { list-style: none; margin: 0; padding: 0; }
@media (max-width: 820px) { .about { grid-template-columns: 1fr; } .portrait { max-width: 420px; } }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; } }
.tl-wrap { position: relative; }
.tl { list-style: none; margin: 0; padding: 0 0 0 clamp(1.5rem, 4vw, 3rem); }
.tl-rail { position: absolute; left: 0; top: .6rem; bottom: .6rem; width: 2px; background: var(--line); }
.tl-fill { position: absolute; inset: 0; background: var(--accent); transform-origin: top; }
.tl-item { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 2rem; padding-block: 1.6rem; border-bottom: 1px solid var(--line); }
.tl-item:last-child { border-bottom: 0; }
.tl-year { font-size: 2.2rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.tl-item h3 { font-weight: 500; font-size: 1.3rem; line-height: 1.3; margin-bottom: .4rem; }
.tl-item p { color: var(--mute); font-size: 1rem; max-width: 62ch; }
@media (max-width: 640px) { .tl-item { grid-template-columns: 1fr; gap: .3rem; } }

/* ── story chain ── */
.chain { display: grid; grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); position: relative; }
.chain-step { padding-right: clamp(1rem, 2.5vw, 2.5rem); display: grid; gap: .9rem; align-content: start; min-width: 0; }
.chain-step + .chain-step { padding-left: clamp(1rem, 2.5vw, 2.5rem); border-left: 1px solid var(--line); }
.chain-n { font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--mute); letter-spacing: .06em; text-transform: uppercase; }
.chain-big { font-size: clamp(2.8rem, 5vw, 5rem); font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chain-step:last-child .chain-big { color: var(--accent); }
.chain-step p { color: var(--mute); font-size: 1rem; max-width: 30ch; }
.chain-progress { position: absolute; left: 0; right: 0; top: -1.8rem; height: 2px; background: var(--line); }
.chain-fill { position: absolute; inset: 0; background: var(--accent); transform-origin: left; }
@media (max-width: 900px) {
  .chain { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .chain-step:nth-child(odd of .chain-step) { border-left: 0; padding-left: 0; }
  .chain-progress { display: none; }
}
@media (max-width: 520px) {
  .chain { grid-template-columns: 1fr; }
  .chain-step, .chain-step + .chain-step { padding: 0; border-left: 0; }
  .chain-step + .chain-step { border-top: 1px solid var(--line); padding-top: 2rem; }
}
.lead-foot { margin-top: clamp(2rem, 4vw, 3rem); display: flex; gap: 1rem 3rem; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
.lead-foot .math { flex: 1 1 26rem; max-width: 40rem; }

/* ── show the math ── */
.math { border-top: 1px solid var(--line); padding-top: .8rem; min-width: 0; }
.math summary { cursor: pointer; list-style: none; font-size: .95rem; color: var(--accent); display: inline-flex; align-items: center; gap: .5rem; }
.math summary::-webkit-details-marker { display: none; }
.math summary::before { content: "+"; font-family: var(--display); font-weight: 700; font-size: 1.2rem; width: 1rem; transition: transform .3s var(--ease); }
.math[open] summary::before { transform: rotate(45deg); }
.math-body { margin-top: .7rem; display: grid; gap: .3rem; font-variant-numeric: tabular-nums; }
.math-line { display: flex; justify-content: space-between; gap: 1rem; font-size: .98rem; color: var(--mute); border-bottom: 1px dashed var(--line); padding-bottom: .3rem; }
.math-line b { color: var(--fg); font-weight: 500; text-align: right; }
.math-line.total b { color: var(--accent); }
.math-foot { font-size: .88rem; color: var(--mute); margin-top: .3rem; }

/* ── regulated band ── */
.hard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.hard-card { background: var(--bg-2); border-radius: 8px; padding: clamp(1.4rem, 3vw, 2.4rem); display: grid; gap: 1rem; align-content: start; min-width: 0; }
.hard-top { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.hard-card h3 { font-weight: 500; font-size: 1.5rem; line-height: 1.2; }
.hard-card h3 a { text-decoration: none; }
.hard-card h3 a:hover { color: var(--accent); }
.hard-metric-big { font-size: clamp(4rem, 8vw, 7rem); font-weight: 900; font-variant-numeric: tabular-nums; color: var(--accent); }
.hard-metric-unit { color: var(--mute); font-size: 1rem; margin-top: .4rem; }
.hard-text { color: var(--mute); font-size: 1rem; max-width: 52ch; }
.hard-text strong { color: var(--fg); font-weight: 500; }
.hard-links { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.hard-shot { display: block; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 10; max-width: 100%; border: 1px solid var(--line); }
.hard-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (max-width: 860px) { .hard { grid-template-columns: 1fr; } }

/* ── filters + ledger ── */
.filters { display: grid; gap: .8rem; margin-bottom: 1.8rem; }
.tools { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; justify-content: space-between; align-items: center; margin-bottom: 1.6rem; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chips-where .chip { border-style: dashed; }
.chip { font: inherit; font-size: .92rem; color: var(--mute); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: .35rem .9rem; cursor: pointer; transition: color .25s, border-color .25s, background .25s; }
.chip:hover { color: var(--fg); border-color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); border-style: solid; }
.chip small { font-size: .8em; opacity: .7; margin-left: .3rem; font-variant-numeric: tabular-nums; }
.count { color: var(--mute); font-size: .95rem; font-variant-numeric: tabular-nums; }
.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.entry { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(1rem, 3vw, 2.5rem); padding-block: clamp(1.5rem, 3vw, 2.2rem); border-bottom: 1px solid var(--line); align-items: start; }
.entry[hidden] { display: none; }
.entry-who h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: .92; }
.entry-who h3 a { text-decoration: none; transition: color .25s; }
.entry-who h3 a:hover { color: var(--accent); }
.entry-who .industry { color: var(--mute); font-size: .95rem; margin-top: .45rem; }
.entry-who .site-link { display: inline-block; margin-top: .5rem; }
.entry-metric-big { font-size: clamp(2.8rem, 5vw, 4.4rem); font-weight: 900; font-variant-numeric: tabular-nums; }
.entry-metric-big.soft, .case-metric-big.soft, .hard-metric-big.soft { font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--mute); }
.entry-metric-unit { color: var(--mute); font-size: .95rem; margin-top: .45rem; max-width: 26ch; }
.entry-body { display: grid; gap: .9rem; min-width: 0; }
.entry-body > p { font-size: 1rem; color: var(--mute); }
.entry-body strong { color: var(--fg); font-weight: 500; }
.entry-actions { display: flex; gap: .8rem 1.5rem; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
.entry-actions .math { flex: 1 1 18rem; }
.entry-actions .more { padding-top: .8rem; }
.tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.tag { font-size: .8rem; padding: .15rem .6rem; border: 1px solid var(--line); border-radius: 999px; color: var(--mute); }
.empty { padding: 2rem 0; color: var(--mute); }
@media (max-width: 860px) { .entry { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .entry-body { grid-column: 1 / -1; } }
@media (max-width: 520px) { .entry { grid-template-columns: 1fr; } }

/* ── shelf ── */
.shelf-wrap { margin-inline: calc(-1 * var(--gutter)); }
.shelf { display: flex; gap: clamp(1rem, 2vw, 1.6rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 0 var(--gutter) 1.2rem; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.site-card { flex: 0 0 auto; width: min(30rem, 82vw); scroll-snap-align: start; text-decoration: none; display: grid; gap: .8rem; }
.site-shot { display: block; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--line); max-width: 100%; }
.site-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.2s var(--ease); }
.site-card:hover .site-shot img { transform: scale(1.04); }
.site-meta { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.site-meta b { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.5rem; line-height: 1; }
.site-meta span { color: var(--mute); font-size: .92rem; text-align: right; }

/* ── case study ── */
.case-hero { padding-block: calc(env(safe-area-inset-top, 0px) + 120px) clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--line); display: grid; gap: 1.2rem; }
.back { justify-self: start; font-size: .95rem; color: var(--mute); text-decoration: none; }
.back::before { content: "← "; }
.back:hover { color: var(--fg); }
.case-title { font-size: clamp(3.6rem, 12vw, 11rem); font-weight: 900; }
.case-hero-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: end; margin-top: 1rem; }
.case-metric-big { font-size: clamp(4rem, 10vw, 9rem); font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }
.case-metric-unit { color: var(--mute); font-size: 1.1rem; margin-top: .6rem; max-width: 30ch; }
.case-summary { display: grid; gap: 1rem; justify-items: start; min-width: 0; }
.case-summary > p { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.4; color: var(--mute); }
.case-summary strong { color: var(--fg); font-weight: 500; }
.case-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.case-aside { display: grid; gap: 2rem; min-width: 0; }
.case-facts { margin: 0; display: grid; gap: .9rem; }
.case-facts div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: .9rem; }
.case-facts dt { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mute); }
.case-facts dd { margin: 0; }
.case-shot { margin: clamp(3rem, 6vw, 5rem) 0 0; display: grid; gap: .7rem; }
.case-shot img { border-radius: 8px; border: 1px solid var(--line); width: 100%; }
.case-shot figcaption { color: var(--mute); font-size: .92rem; }
.case-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding-block: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--line); }
.case-nav-link { text-decoration: none; display: grid; gap: .4rem; min-width: 0; }
.case-nav-link.next { text-align: right; justify-items: end; }
.case-nav-link span { color: var(--mute); font-size: .95rem; }
.case-nav-link b { font-size: clamp(2rem, 4.4vw, 3.8rem); font-weight: 900; transition: color .25s; overflow-wrap: anywhere; }
.case-nav-link:hover b { color: var(--accent); }
@media (max-width: 820px) { .case-hero-row, .case-grid { grid-template-columns: 1fr; } }

/* ── prose (posts, case studies) ── */
.prose { min-width: 0; }
.prose > * { max-width: 64ch; }
.prose > * + * { margin-top: 1.2em; }
.prose p, .prose li { font-size: 1.12rem; line-height: 1.7; }
.prose h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2rem, 4vw, 3rem); line-height: .95; margin-top: 2em; }
.prose h3 { font-weight: 500; font-size: 1.4rem; margin-top: 1.8em; }
.prose a { color: var(--accent); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .4em; }
.prose blockquote { margin-left: 0; padding-left: 1.2rem; border-left: 2px solid var(--accent); font-size: 1.3rem; font-style: italic; }
.prose img, .prose figure { border-radius: 6px; }
.prose figure { margin-inline: 0; }
.prose figcaption { color: var(--mute); font-size: .92rem; margin-top: .5rem; }
.prose pre { background: var(--bg-2); padding: 1rem; border-radius: 6px; overflow-x: auto; font-family: var(--mono); font-size: .9rem; }
.prose code { font-family: var(--mono); font-size: .92em; }
.prose .alignwide, .prose .alignfull { max-width: none; }

/* ── blog ── */
.post-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 3rem 2rem; }
.post-card { display: grid; gap: .7rem; text-decoration: none; align-content: start; }
.post-card-img { display: block; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; }
.post-meta { color: var(--mute); font-size: .92rem; }
.post-card-title { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: .92; transition: color .25s; }
.post-card:hover .post-card-title { color: var(--accent); }
.post-card-ex { color: var(--mute); font-size: 1rem; }
.post-hero { padding-block: calc(env(safe-area-inset-top, 0px) + 120px) clamp(2.5rem, 5vw, 4rem); display: grid; gap: 1.2rem; }
.post-h1 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(3rem, 7.5vw, 7rem); line-height: .9; max-width: 18ch; }
.post-cover { margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.post-cover img { border-radius: 8px; width: 100%; }
.prose-post { padding-bottom: clamp(3rem, 6vw, 5rem); }
.pager { margin-top: 3rem; }
.pager .nav-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.pager .page-numbers { padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--mute); }
.pager .page-numbers.current { background: var(--fg); color: var(--bg); }

/* ── writing ── */
.pub-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 2rem; }
.pub-result { display: grid; gap: .5rem; align-content: start; padding-top: 1rem; border-top: 1px solid var(--line); }
.pub-num { font-size: clamp(2.4rem, 3.4vw, 3.6rem); font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pub-unit { color: var(--mute); font-size: .98rem; max-width: 26ch; }
.pub-result .more { justify-self: start; margin-top: .4rem; }
.search { flex: 1 1 18rem; min-width: 0; display: flex; align-items: center; gap: .7rem; border-bottom: 1px solid var(--fg); padding-bottom: .4rem; }
.search label { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 1rem; color: var(--mute); }
.search input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--fg); font: inherit; font-size: 1.3rem; padding: .2rem 0; }
.search input::placeholder { color: var(--mute); opacity: .7; }
.search input:focus { outline: none; }
.search:focus-within { border-color: var(--accent); }
#chips { margin-bottom: 2rem; }
.pieces { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.piece[hidden] { display: none; }
.piece a { display: grid; grid-template-columns: 12rem minmax(0, 1fr) auto; gap: 1.5rem; align-items: baseline; padding-block: .95rem; border-bottom: 1px solid var(--line); text-decoration: none; transition: background .25s, padding .4s var(--ease); }
.piece a:hover { background: var(--bg-2); padding-inline: .8rem; }
.piece-pub { color: var(--mute); font-size: .92rem; }
.piece-title { font-size: 1.1rem; line-height: 1.35; }
.piece-go { color: var(--accent); font-size: .92rem; white-space: nowrap; }
.piece mark { background: var(--accent); color: var(--accent-ink); border-radius: 2px; padding: 0 .1em; }
@media (max-width: 700px) { .piece a { grid-template-columns: 1fr; gap: .15rem; } }

/* ── astrophotography ── */
.sky-hero { overflow: hidden; }
.sky-hero .starfield { position: absolute; inset: 0 calc(-1 * var(--gutter)); width: calc(100% + 2 * var(--gutter)); height: 100%; opacity: .9; }
.sky-chips { margin-bottom: 2rem; }
.sky-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: clamp(1.2rem, 2.4vw, 2rem) clamp(1rem, 2vw, 1.6rem); }
.sky-item[hidden] { display: none; }
.sky-open { all: unset; cursor: zoom-in; display: grid; gap: .8rem; width: 100%; }
.sky-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.sky-frame { display: block; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: #000; max-width: 100%; }
.sky-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; }
.sky-open:hover .sky-frame img { transform: scale(1.04); filter: brightness(1.15); }
.sky-cap { display: grid; gap: .25rem; }
.sky-cap b { font-size: 1.6rem; line-height: .95; font-weight: 700; }
.sky-cap span { color: var(--mute); font-size: .92rem; }
.sky-empty { padding-block: 2rem; display: grid; gap: 1rem; max-width: 46rem; }
.sky-empty .display { font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 900; }
.sky-empty p:not(.display) { color: var(--mute); }
.sky-empty a { color: var(--accent); }

/* lightbox: always the night palette, whatever the site theme */
.lightbox { --lb-fg: #ECEAE4; --lb-mute: #8F929A; --lb-line: rgba(236, 234, 228, .14); --lb-accent: #A4DDED;
  border: 0; padding: 0; width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; background: #030406; color: var(--lb-fg); }
.lightbox::backdrop { background: rgba(0, 0, 0, .88); }
.lb-inner { display: grid; grid-template-columns: minmax(0, 1fr) min(26rem, 38vw); height: 100%; }
.lb-figure { position: relative; margin: 0; display: grid; place-items: center; padding: 1rem; min-height: 0; }
.lb-figure img { max-height: calc(100vh - 2rem); max-width: 100%; width: auto; object-fit: contain; }
.lb-step { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--lb-line); background: rgba(3, 4, 6, .6); color: var(--lb-fg); font-size: 1.2rem; cursor: pointer; transition: border-color .25s, color .25s; }
.lb-step:hover { border-color: var(--lb-accent); color: var(--lb-accent); }
.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }
.lb-side { padding: 1.6rem 1.6rem 2.5rem; display: grid; gap: 1rem; align-content: start; overflow-y: auto; border-left: 1px solid var(--lb-line); }
.lb-close { justify-self: end; color: var(--lb-fg); border-color: var(--lb-line); }
.lb-side .label { color: var(--lb-accent); }
.lb-side h2 { font-size: clamp(2.4rem, 3.4vw, 3.2rem); font-weight: 900; line-height: .9; }
.lb-catalog { color: var(--lb-mute); font-size: .95rem; margin-top: -.4rem; }
.lb-notes { color: #C9C7C1; font-size: 1.02rem; line-height: 1.55; }
.lb-dial { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; align-items: center; padding-block: .6rem; border-block: 1px solid var(--lb-line); }
.lb-dial[hidden] { display: none; }
.lb-dial svg { width: 100%; height: auto; overflow: visible; }
.dial-horizon { fill: rgba(164, 221, 237, .05); stroke: var(--lb-mute); stroke-width: 1; }
.dial-ring { fill: none; stroke: var(--lb-line); stroke-width: 1; }
.dial-label { fill: var(--lb-fg); font: 700 13px var(--display); letter-spacing: .05em; }
.dial-small { fill: var(--lb-mute); font: 10px var(--text); }
.dial-ray { stroke: var(--lb-accent); stroke-width: 1; stroke-dasharray: 3 3; }
.dial-halo { fill: rgba(164, 221, 237, .2); }
.dial-dot { fill: var(--lb-accent); }
.dial-cap { color: var(--lb-mute); font-size: .88rem; line-height: 1.45; }
.lb-details { margin: 0; display: grid; gap: .55rem; }
.lb-details div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .8rem; border-bottom: 1px solid var(--lb-line); padding-bottom: .55rem; }
.lb-details dt { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--lb-mute); font-size: .92rem; }
.lb-details dd { margin: 0; font-size: .95rem; }
@media (max-width: 820px) {
  .lb-inner { display: block; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .lb-figure { display: block; padding: 3.6rem 1rem 1rem; text-align: center; }
  .lb-figure img { max-height: 62vh; margin-inline: auto; }
  .lb-side { border-left: 0; overflow: visible; padding-top: .5rem; }
  .lb-close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + .8rem); right: 1rem; }
  .lb-step { top: .8rem; transform: none; width: 2.4rem; height: 2.4rem; }
  .lb-prev { left: 1rem; }
  .lb-next { left: 4rem; right: auto; }
  .lb-details div { grid-template-columns: 7rem minmax(0, 1fr); }
}

/* ── footer ── */
.site-footer { border-top: 1px solid var(--line); }
.contact { padding-block: clamp(5rem, 11vw, 9rem) clamp(3rem, 6vw, 5rem); }
.contact-title { font-size: clamp(3.2rem, 10vw, 9.5rem); font-weight: 900; max-width: 14ch; }
.contact-title em { font-style: normal; color: var(--accent); }
.contact-grid { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.5rem 2rem; }
.reach { padding-top: 1rem; border-top: 1px solid var(--line); display: grid; gap: .5rem; min-width: 0; }
.reach-label { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 1rem; color: var(--mute); }
.reach-value { font-size: 1.25rem; overflow-wrap: anywhere; user-select: all; }
.reach-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.footer-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; padding-block: 2rem calc(2rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); color: var(--mute); font-size: .9rem; }
.footer-links { display: flex; gap: 1.2rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.footer-bar a { color: var(--mute); text-decoration: none; }
.footer-bar a:hover { color: var(--fg); }

/* ── cursor ring ── */
.ring { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1px solid var(--accent); opacity: 0; transition: opacity .3s, width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s; }
.ring.on { opacity: .9; }
.ring.hot { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: color-mix(in srgb, var(--accent) 18%, transparent); }

/* ── game page: First Contact's own palette, applied to the whole page so the header and footer match ── */
.tpl-game, .game {
  --bg: #06090E; --bg-2: #0F151E; --fg: #E8E6DF; --mute: #8A97A8;
  --line: rgba(138, 151, 168, 0.18); --accent: #E0954A; --accent-ink: #06090E;
  --cyan: #3FB8C4; --red: #C0505A;
  background: var(--bg); color: var(--fg);
  color-scheme: dark;
}
.game { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.game-hero { position: relative; min-height: min(100svh, 980px); display: flex; align-items: flex-end; margin-inline: calc(-1 * var(--gutter)); padding: calc(env(safe-area-inset-top, 0px) + 110px) var(--gutter) clamp(3rem, 6vw, 5rem); overflow: hidden; }
.game-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: .55; }
.game-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 9, 14, .2) 0%, rgba(6, 9, 14, .55) 45%, #06090E 100%); }
.game-hero-inner { position: relative; z-index: 1; display: grid; gap: 1.4rem; max-width: 60rem; }
.game-kicker { font-family: var(--mono); font-size: .85rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); }
.game-title { font-family: var(--mono); font-weight: 400; font-size: clamp(2.8rem, 9vw, 7.5rem); letter-spacing: .32em; line-height: 1.1; text-transform: uppercase; margin-right: -.32em; }
.game-lede { font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.5; max-width: 46ch; }
.game-small { font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; color: var(--mute); }
.game .btn { font-family: var(--mono); font-weight: 500; font-size: .85rem; letter-spacing: .14em; border-radius: 2px; }
.game .btn-solid { background: transparent; color: var(--accent); border-color: var(--accent); }
.game .btn-solid:hover { background: var(--accent); color: var(--accent-ink); }
.game-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.game-facts b { display: block; font-family: var(--mono); font-weight: 400; font-size: clamp(3rem, 6vw, 5rem); line-height: 1; color: var(--accent); }
.game-facts div:last-child b { color: var(--cyan); }
.game-facts span { display: block; color: var(--mute); font-size: 1rem; margin-top: .6rem; max-width: 24ch; }
@media (max-width: 760px) { .game-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; } }
.game-section { padding-block: clamp(4rem, 8vw, 7rem); border-bottom: 1px solid var(--line); }
.game-h2 { font-family: var(--mono); font-weight: 400; text-transform: uppercase; letter-spacing: .2em; font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.25; color: var(--fg); margin-bottom: 1.6rem; }
.game-section p { color: var(--mute); max-width: 58ch; }
.game-section p + p { margin-top: 1rem; }
.game-wide { margin-bottom: 2.5rem; }
.game-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.game-split-flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
@media (max-width: 860px) { .game-split, .game-split-flip { grid-template-columns: 1fr; } .game-split-flip .game-shot { order: 2; } }
.game-shot { margin: 0; display: grid; gap: .7rem; min-width: 0; }
.game-shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); background: #020306; }
.game-shot figcaption { font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; color: var(--mute); line-height: 1.6; }
.game-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 2rem; }
.game-rule { border-top: 1px solid var(--accent); padding-top: 1rem; display: grid; gap: .6rem; align-content: start; }
.game-rule h3 { font-family: var(--mono); font-weight: 500; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg); line-height: 1.4; }
.game-rule p { font-size: 1rem; }
.game-acts { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 1rem; counter-reset: none; }
.game-acts li { color: var(--mute); padding-left: 1rem; border-left: 1px solid var(--cyan); }
.game-acts b { color: var(--fg); font-weight: 500; }
.game-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
@media (max-width: 760px) { .game-gallery { grid-template-columns: 1fr; } }
.game-status .ctas { margin-top: 2.5rem; }
.game-status { border-bottom: 0; }
.game ::selection { background: var(--accent); color: var(--accent-ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .ring, .preview { display: none; }
}