/* ==================================================================
   AARAGE - landing page

   Two type systems on one page, on purpose:

     the hero   Archivo Black wordmark over the courtyard clip. Untouched.
     everything Barlow Condensed 800, uppercase, tight negative tracking,
     below      set against full-width bands that alternate light and dark.

   The bands are the whole structure. Each one declares its own colour
   tokens (--fg, --muted, --hair, --surface, --accent) and every component
   below reads those rather than a fixed colour, so the same roster tile or
   table works on either ground. That is the only way an alternating page
   stays maintainable - otherwise every component needs a light variant and
   a dark variant and they drift.
   ================================================================== */

:root {
  /* ---- brand constants: fixed regardless of band ---- */
  --ink:   #05060a;
  --gold:  #ffd24a;
  --goldd: #8a6b0f;
  --p1:    #ff3b6b;
  --p2:    #40dcff;
  --good:  #49e07a;

  /* ---- type ---- */
  --disp: "Archivo Black", "Arial Black", Impact, system-ui, sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", Consolas, "SF Mono", Menlo, "Courier New", monospace;

  /* ---- rhythm ---- */
  --gut:  clamp(20px, 4vw, 48px);
  --sec:  clamp(72px, 9vw, 116px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--ink);
  color: #eef1f7;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--gold); color: #000; }

a { color: inherit; text-decoration: none; }

.wrap { width: min(1280px, 100% - (var(--gut) * 2)); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* One visible ring for the whole site, so keyboard travel is never guesswork. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: fixed; top: 10px; left: 10px; z-index: 100;
  transform: translateY(-160%);
  background: var(--gold); color: #100c00;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  padding: 10px 16px;
  transition: transform .18s ease;
}
.skip:focus { transform: none; }

/* ------------------------------------------------------------------
   Bands - the page is a stack of these
------------------------------------------------------------------- */

.band {
  position: relative;
  z-index: 4;
  padding: var(--sec) 0;
  background: var(--bg);
  color: var(--fg);
}

/* Opaque on purpose: these paint straight over the fixed courtyard clip,
   which is what lets the page go light without the video showing through. */
.band-light {
  --bg:      #f3f4f6;
  --fg:      #14151a;
  --muted:   #4c4f5a;
  --faint:   #767b88;
  --hair:    rgba(20, 21, 26, 0.13);
  --hair2:   rgba(20, 21, 26, 0.26);
  --surface: #ffffff;
  /* Full-brightness gold is unreadable as text on a light ground. The dark
     amber carries the same hue at a usable contrast; the bright one stays
     for fills, which take dark ink on top. */
  --accent:      #7d6009;
  --accent-fill: var(--gold);
  --accent-ink:  #14151a;
  /* Same problem the gold has, and the same answer. The three brand colours
     are tuned for an near-black ground and collapse on a white one: on the
     panel surface --p2 measures 1.63:1 and --good 1.72:1, which is not dim,
     it is invisible. These carry the same hues past 5:1. Fills and bars keep
     the bright originals - it is only ever TEXT that needs this. */
  --p1-ink:   #d81b4f;
  --p2-ink:   #0b6f90;
  --good-ink: #157a3a;
}
.band-light.alt { --bg: #e8e9ee; --surface: #ffffff; }

.band-dark {
  --bg:      #080b12;
  --fg:      #f2f5fa;
  --muted:   #8b93a7;
  --faint:   #5b6478;
  --hair:    rgba(255, 255, 255, 0.10);
  --hair2:   rgba(255, 255, 255, 0.20);
  --surface: rgba(255, 255, 255, 0.028);
  --accent:      var(--gold);
  --accent-fill: var(--gold);
  --accent-ink:  #14151a;
  --p1-ink:   var(--p1);
  --p2-ink:   var(--p2);
  --good-ink: var(--good);
}

/* A hairline seam at the top of every band. On a light-to-dark boundary the
   colour change already draws the line, so it only has to show up where two
   bands of the same family meet. */
.band + .band::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--hair);
}

/* ------------------------------------------------------------------
   Fixed backdrop - only ever seen through the hero
------------------------------------------------------------------- */

.backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; }

.bd-scene {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* The plate is already dark; this keeps it from ever competing with type. */
  filter: saturate(1.1) contrast(1.06);
  /* A very slow push in. It reads as a held camera rather than a still. */
  animation: sceneDrift 42s ease-in-out infinite alternate;
}
@keyframes sceneDrift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.2%, -0.8%, 0); }
}

/* Two scrims, not one. The vertical pass seats the top and bottom so the nav
   has something to sit on; the horizontal pass darkens the left, which is
   where the wordmark and the button live. */
.bd-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,
      rgba(5,6,10,0.96) 0%, rgba(5,6,10,0.88) 32%,
      rgba(5,6,10,0.34) 62%, rgba(5,6,10,0.18) 100%),
    linear-gradient(to bottom,
      rgba(5,6,10,0.92) 0%, rgba(5,6,10,0.25) 22%,
      rgba(5,6,10,0.25) 68%, rgba(5,6,10,0.97) 100%);
}

/* Darkness pooled under the character - see the note in index.html. */
.bd-pool {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 38% 74% at 80% 60%,
    rgba(5,6,10,0.82) 0%, rgba(5,6,10,0.40) 48%, rgba(5,6,10,0) 76%);
}

/* Corner falloff. Cheap, and it stops the frame edges looking cropped. */
.bd-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 80% at 50% 45%,
    rgba(0,0,0,0) 42%, rgba(0,0,0,0.55) 100%);
}

/* ------------------------------------------------------------------
   The character
------------------------------------------------------------------- */

#hero-girl {
  position: fixed;
  right: max(-2vw, -40px);
  bottom: 0;
  height: 100vh;
  width: auto;
  z-index: 1;
  pointer-events: none;
  /* Her plate is pure black, so screen drops the background out with no
     keying, no alpha channel and no cut-out edges. */
  mix-blend-mode: screen;
  /* screen only drops a *pure* black plate. Crushing the near-blacks first
     stops her frame edge showing up as a lifted rectangle, and the mask
     feathers the one edge that lands inside the viewport. */
  filter: contrast(1.18) brightness(1.04);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 15%);
  mask-image: linear-gradient(to right, transparent 0, #000 15%);
  opacity: 0;
  transition: opacity 1.2s ease;
  /* Follows the pointer a few pixels. JS writes --par; default is centred. */
  transform: translate3d(calc(var(--par-x, 0) * -14px), 0, 0);
}
#hero-girl.in { opacity: 1; }
/* The bands below are opaque and cover her anyway; this just stops her edge
   flickering at the seam on the way past. */
#hero-girl.out { opacity: 0; }

/* ------------------------------------------------------------------
   Overlays
------------------------------------------------------------------- */

/* Both are hero furniture. They sit under .band (z-index 4), so they stop
   at the bottom of the first screen instead of laying a CRT effect over a
   light page, which would just look like dirt. */
.scanlines {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0.20) 0 1px, rgba(0,0,0,0) 1px 3px);
  opacity: 0.4;
  mix-blend-mode: multiply;
}

.grain {
  position: fixed; inset: -50%; z-index: 2; pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter>\
<rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation: grainShift 1.1s steps(3) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-3%, 2%); }
  66%  { transform: translate(2%, -3%); }
  100% { transform: translate(0, 0); }
}

.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60;
  background: rgba(127,127,127,0.18);
  pointer-events: none;
}
.progress i {
  display: block; height: 100%; width: 0%;
  background: var(--gold);
}

/* ------------------------------------------------------------------
   Nav
------------------------------------------------------------------- */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 28px;
  padding: 18px var(--gut);
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s, padding .3s;
}
/* Solid, not translucent: below the hero it has to sit over light bands as
   well as dark ones, and a blurred panel over white reads as a smear. */
.nav.stuck {
  background: #080b12;
  border-bottom-color: rgba(255,255,255,0.10);
  padding-top: 11px; padding-bottom: 11px;
}

.brand {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--cond); font-weight: 800;
  letter-spacing: 0.10em; font-size: 22px; text-transform: uppercase;
  color: #fff;
  margin-right: auto;
}
.brand-mark {
  width: 9px; height: 9px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 14px rgba(255,210,74,0.55);
  flex: none;
}

.nav-links { display: flex; gap: 26px; }
.nav-links a {
  font-family: var(--cond); font-weight: 700; font-size: 15px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  padding: 4px 0; position: relative;
  transition: color .16s;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--gold); transition: right .24s ease;
}
.nav-links a:hover, .nav-links a.on { color: #fff; }
.nav-links a:hover::after, .nav-links a.on::after { right: 0; }

/* ---- mobile drawer ---- */

/* `display: flex` beats the UA stylesheet's `[hidden] { display: none }` on
   specificity, so without this rule the closed drawer stays laid out: a
   fixed, full-viewport, fully transparent sheet at z-index 45 sitting over
   the whole page and swallowing every click on every link below the nav.
   The drawer is only ever visible under 760px, but it was intercepting at
   every width. JS toggles the attribute, so the attribute has to win. */
.nav-menu[hidden] { display: none; }

.nav-burger {
  display: none;
  width: 42px; height: 42px;
  background: none; border: 1px solid rgba(255,255,255,0.28);
  cursor: pointer;
  position: relative;
}
.nav-burger i {
  position: absolute; left: 11px; right: 11px; height: 2px;
  background: #fff;
  transition: transform .22s ease, opacity .22s ease;
}
.nav-burger i:nth-child(1) { top: 15px; }
.nav-burger i:nth-child(2) { bottom: 15px; }
.nav-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] i:nth-child(2) { transform: translateY(-6px) rotate(-45deg); }

.nav-menu {
  position: fixed; inset: 0; z-index: 45;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  background: #080b12;
  opacity: 0; transition: opacity .22s ease;
}
.nav-menu.open { opacity: 1; }
.nav-menu a:not(.btn) {
  font-family: var(--cond); font-weight: 800; text-transform: uppercase;
  font-size: clamp(34px, 11vw, 52px);
  letter-spacing: -0.02em; line-height: 1.15;
  color: #fff;
  padding: 6px 20px;
}
.nav-menu .btn { margin-top: 28px; }

/* ------------------------------------------------------------------
   Buttons
------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--cond); font-size: 17px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 12px 24px; cursor: pointer;
  border: 2px solid transparent;
  transition: transform .12s, background .2s, color .2s, border-color .2s;
}
.btn-lg { font-size: 20px; padding: 15px 34px; }
.btn-sm { font-size: 14px; padding: 9px 16px; }

.btn-gold {
  background: var(--gold); color: #14151a;
}
.btn-gold:hover { background: #ffdf7d; transform: translateY(-2px); }
.btn-gold:active { transform: translateY(1px); }

/* Reads off the band it lands in, so one class works on white and on black. */
.btn-ghost {
  border-color: var(--hair2, rgba(255,255,255,0.2));
  color: var(--fg, #fff);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

/* ------------------------------------------------------------------
   Section furniture
------------------------------------------------------------------- */

main { position: relative; z-index: 4; }

/* Their split: a tiny numbered label across the top, the headline filling
   the left column, and the caveat in a narrow column to its right, bottom
   aligned so the two blocks end together. */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  column-gap: clamp(28px, 5vw, 80px);
  margin-bottom: clamp(42px, 5.5vw, 74px);
}

.eyebrow {
  grid-column: 1 / -1;
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: clamp(18px, 2vw, 28px);
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--accent);
}
.eyebrow i {
  font-style: normal; font-weight: 700;
  background: var(--accent-fill); color: var(--accent-ink);
  padding: 4px 8px; letter-spacing: 0.08em;
}

.sec-head h2 {
  grid-column: 1;
  margin: 0;
  font-family: var(--cond); font-weight: 800; text-transform: uppercase;
  font-size: clamp(40px, 6.4vw, 94px);
  line-height: 0.88; letter-spacing: -0.03em;
}

.sec-note {
  grid-column: 2; align-self: end;
  margin: 0 0 6px;
  font-size: 16px; line-height: 1.65; color: var(--muted);
  max-width: 46ch;
}
.sec-note code { font-family: var(--mono); font-size: 13.5px; color: var(--accent); }

.cap {
  margin: 0; padding: 15px 20px 18px;
  border-top: 1px solid var(--hair);
  font-size: 13.5px; line-height: 1.6; color: var(--faint);
}

/* Reveal on scroll - the page is meant to be read a beat at a time. */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.16,.9,.3,1), transform .7s cubic-bezier(.16,.9,.3,1);
}
.reveal.in { opacity: 1; transform: none; }

/* ---- the shared panel chassis ----
   Flat rectangles with a hairline. No notches, no offset shadows: on a light
   band those read as clip-art, and the whole point of the alternation is that
   the same component works on both grounds. */
.panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hair);
}
.panel-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--hair);
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--faint);
}
.panel-bar span:first-child { color: var(--muted); }

/* ------------------------------------------------------------------
   Hero - unchanged
------------------------------------------------------------------- */

/* Four rows: two flexible spacers hold the name optically centred, and the
   spec plate is pinned to the last row along the bottom edge. */
.hero {
  position: relative;
  z-index: 4;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto 1fr auto;
  padding: 112px var(--gut) 0;
  color: #eef1f7;
}

.hero-inner { grid-row: 2; width: min(1280px, 100%); margin-inline: auto; }

/* Still used by the receipt's status dot in section 05. */
@keyframes dotPulse { 0%,100% { opacity: 1 } 50% { opacity: 0.3 } }

.wordmark {
  margin: 0;
  font-family: var(--disp); font-weight: 400;
  font-size: clamp(62px, 12.5vw, 194px);
  line-height: 0.84;
  letter-spacing: -0.045em;
  color: #fff;
  /* Offsets in em so the chromatic split holds its proportion from a phone
     to a 4K display instead of collapsing into the glyph. */
  text-shadow: 0.028em 0.03em 0 var(--p1), 0.056em 0.06em 0 var(--p2);
  /* Drifts with the pointer. JS writes --par-x / --par-y. */
  transform: translate3d(calc(var(--par-x, 0) * 10px), calc(var(--par-y, 0) * 8px), 0);
  transition: transform .5s cubic-bezier(.16,.9,.3,1);
}

/* Each letter drops in on its own beat. The title is the first thing on the
   screen, so it gets to be the opening shot. */
.wordmark span[aria-hidden] {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.28em);
  animation: markIn 1s cubic-bezier(.16,.9,.3,1) forwards;
}
.wordmark span:nth-child(1) { animation-delay: .12s; }
.wordmark span:nth-child(2) { animation-delay: .19s; }
.wordmark span:nth-child(3) { animation-delay: .26s; }
.wordmark span:nth-child(4) { animation-delay: .33s; }
.wordmark span:nth-child(5) { animation-delay: .40s; }
.wordmark span:nth-child(6) { animation-delay: .47s; }
@keyframes markIn { to { opacity: 1; transform: none; } }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }

/* Bolted to the bottom of the viewport, like the spec plate on the front of
   a real cabinet. */
.hero-spec {
  grid-row: 4;
  width: min(1280px, 100%);
  margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,0.22);
  padding-block: 20px 34px;
  gap: 0;
}
.hero-spec div {
  padding-right: 20px;
  border-left: 1px solid rgba(255,255,255,0.12);
  padding-left: 18px;
}
.hero-spec div:first-child { border-left: 0; padding-left: 0; }
.hero-spec dt {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: #6f7788; margin-bottom: 6px;
}
.hero-spec dd {
  margin: 0;
  font-family: var(--cond); font-weight: 800;
  font-size: clamp(30px, 3.6vw, 46px);
  letter-spacing: -0.02em; line-height: 1;
}
.hero-spec dd i {
  font-style: normal; font-family: var(--mono); font-size: 13px;
  font-weight: 400; color: #6f7788; margin-left: 2px;
}

/* ------------------------------------------------------------------
   Roster marquee - the strip that seals the hero
------------------------------------------------------------------- */

.marquee {
  position: relative; z-index: 4;
  overflow: hidden;
  background: var(--gold);
  color: #14151a;
  padding: 11px 0;
}
.marquee-run {
  display: flex; width: max-content;
  animation: marqueeRun 42s linear infinite;
}
.marquee-run > span {
  display: flex; align-items: center; gap: 18px;
  padding-right: 18px;
  font-family: var(--cond); font-weight: 800; text-transform: uppercase;
  font-size: clamp(17px, 1.9vw, 24px);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.marquee-run > span em { font-style: normal; }
.marquee-run b {
  width: 6px; height: 6px; background: #14151a;
  transform: rotate(45deg); flex: none;
}
@keyframes marqueeRun {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ------------------------------------------------------------------
   Spectate - the live floor, above 01

   Two panels that carry opposite kinds of information, so they are built
   opposite ways: the left one is a list of rows because its content changes
   every few seconds and a reader is scanning it, and the right one is a
   definition list because its content never changes at all - it is the
   contract, written out.

   Everything reads the band tokens, so this band works if it is ever moved
   onto a light ground.
------------------------------------------------------------------- */

.spectate-band {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(16px, 2vw, 26px);
  align-items: start;
}

/* ---- left: the board ---- */

.sb-list:empty { display: none; }

.sb-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(12px, 2vw, 22px);
  padding: 16px 22px;
  border-bottom: 1px solid var(--hair);
  transition: background .14s linear;
}
.sb-row:hover { background: rgba(127,127,127,0.06); }

.sb-code {
  font-family: var(--mono); font-size: 15px; font-weight: 700;
  letter-spacing: 0.22em; color: var(--fg);
}

.sb-vs {
  display: flex; align-items: baseline; gap: 9px; min-width: 0;
  font-family: var(--cond); font-weight: 800; text-transform: uppercase;
  font-size: clamp(16px, 1.5vw, 20px); line-height: 1.05; letter-spacing: -0.01em;
}
.sb-vs em {
  font-style: normal; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-1 { color: var(--p1-ink); }
.sb-2 { color: var(--p2-ink); }
.sb-vs s {
  text-decoration: none; color: var(--faint);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
}

.sb-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--faint);
  text-align: right;
}
.sb-meta i { font-style: normal; }

/* Status is the only colour in a row, because status is the only thing a
   scanning eye is sorting on. */
.sb-row.s-live .sb-state  { color: var(--p1-ink); }
.sb-row.s-ready .sb-state { color: var(--accent); }
.sb-row.s-done .sb-state  { color: var(--good-ink); }

.sb-empty {
  margin: 0; padding: 26px 22px 28px;
  font-size: 15px; line-height: 1.6; color: var(--muted);
}
.sb-empty a { color: var(--accent); border-bottom: 1px solid currentColor; }
.sb-empty.hidden { display: none; }

/* ---- right: what a bet pays ---- */

.sb-rules { display: flex; flex-direction: column; }

.sb-math { margin: 0; padding: 4px 0 0; flex: 1; }
.sb-math > div { padding: 17px 22px; border-top: 1px solid var(--hair); }
.sb-math > div:first-child { border-top: 0; }
.sb-math dt {
  margin-bottom: 6px;
  font-family: var(--cond); font-weight: 800; text-transform: uppercase;
  font-size: 17px; letter-spacing: 0.01em; color: var(--fg);
}
.sb-math dd { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.sb-math dd b { color: var(--accent); font-weight: 700; }

.sb-cta { margin: 6px 22px 22px; text-align: center; }

@media (max-width: 960px) {
  .spectate-band { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  /* The code and the matchup stop fitting on one line long before the meta
     column does, so the row becomes two: who is fighting, then where. */
  .sb-row { grid-template-columns: auto minmax(0, 1fr); row-gap: 8px; }
  .sb-meta {
    grid-column: 1 / -1; flex-direction: row; justify-content: space-between;
    align-items: baseline; width: 100%;
  }
}

/* ------------------------------------------------------------------
   01 - the parser demo
------------------------------------------------------------------- */

.pd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: 18px;
  align-items: stretch;
}

/* The two halves stay dark whatever band they land on - a lit readout on a
   white page is exactly the kind of module this layout wants, and the neon
   stat bars need a black ground to read at all. Overriding the tokens here
   re-themes every child without a single extra selector. */
.pd-in, .pd-out, .receipt {
  --fg:      #f2f5fa;
  --muted:   #8b93a7;
  --faint:   #5b6478;
  --hair:    rgba(255, 255, 255, 0.10);
  --hair2:   rgba(255, 255, 255, 0.20);
  --surface: #0a0e16;
  --accent:  var(--gold);
  background: #0a0e16;
  color: var(--fg);
  border-color: rgba(255,255,255,0.12);
}

.pd-in { display: flex; flex-direction: column; }

#pd-text {
  flex: 1;
  width: 100%;
  min-height: 150px;
  resize: vertical;
  background: transparent;
  border: 0;
  padding: 22px;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.75;
  /* A caret you can see from across a room, since typing here is the point. */
  caret-color: var(--gold);
}
#pd-text:focus { outline: none; }
#pd-text::placeholder { color: #3c4457; }
/* The focus ring goes on the panel, not the textarea: the textarea has no
   border of its own and a ring around bare text looks broken. */
.pd-in:focus-within { border-color: var(--gold); }

.pd-presets {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 14px;
  border-top: 1px solid var(--hair);
}
.pd-presets button {
  font-family: var(--cond); font-weight: 700; font-size: 14px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hair);
  padding: 6px 12px;
  cursor: pointer;
  transition: color .14s, border-color .14s, background .14s;
}
.pd-presets button:hover {
  color: #14151a; background: var(--gold); border-color: var(--gold);
}

.pd-out { display: flex; flex-direction: column; }

.pd-arch { padding: 22px 22px 4px; }
.pd-arch b {
  display: block;
  font-family: var(--cond); font-weight: 800; text-transform: uppercase;
  font-size: clamp(30px, 3.8vw, 48px);
  letter-spacing: -0.02em; line-height: 0.95;
  color: var(--gold);
}
.pd-arch span {
  display: block; margin-top: 8px;
  font-size: 14.5px; color: var(--muted);
}
/* A fighter the parser had to invent gets said so, rather than pretending
   the lexicon understood "banana pancakes". */
.pd-out.improv .pd-arch b { color: var(--p2); }

.pd-bars { padding: 18px 22px 6px; display: grid; gap: 11px; }
.pd-bar {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 34px;
  align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint);
}
.pd-bar i {
  font-style: normal;
  display: block; height: 9px;
  background: rgba(255,255,255,0.06);
  position: relative;
}
.pd-bar i::after {
  content: ''; position: absolute; inset: 0 auto 0 0;
  width: calc(var(--v, 0) * 1%);
  background: var(--c, var(--gold));
  transition: width .32s cubic-bezier(.16,.9,.3,1);
}
.pd-bar b {
  color: var(--fg); text-align: right;
  font-family: var(--cond); font-weight: 700; font-size: 16px; letter-spacing: 0;
}

.pd-hits {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 10px 22px 18px;
  min-height: 30px;
}
.pd-hits span {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  padding: 3px 7px;
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--muted);
}
.pd-hits span.up   { color: var(--good); border-color: rgba(73,224,122,0.30); }
.pd-hits span.down { color: var(--p1);   border-color: rgba(255,59,107,0.30); }
.pd-hits span.comp { color: var(--gold); border-color: rgba(255,210,74,0.34); }

.pd-derived {
  margin: auto 0 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hair);
}
.pd-derived div {
  padding: 14px 10px 16px;
  border-left: 1px solid var(--hair);
  text-align: center;
}
.pd-derived div:first-child { border-left: 0; }
.pd-derived dt {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 7px;
}
.pd-derived dd {
  margin: 0; font-family: var(--mono); font-size: 10px; color: var(--faint);
}
.pd-derived dd b {
  display: block;
  font-family: var(--cond); font-weight: 800; font-size: 28px;
  letter-spacing: -0.01em; color: var(--fg); line-height: 1.05;
}
.pd-derived dd i { font-style: normal; letter-spacing: 0.1em; }

.pd-foot {
  margin: 22px 0 0;
  font-size: 15px; color: var(--muted); max-width: 78ch;
}
.pd-foot code { font-family: var(--mono); color: var(--accent); font-size: 13.5px; }

/* ------------------------------------------------------------------
   02 - the roster
------------------------------------------------------------------- */

.rost {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.rost-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

/* A character-select tile: index, name, and the three bars, nothing else.
   Hard border, no radius, and a hover that snaps rather than eases - the
   select screen of a fighting game has no easing in it either. */
.rost-tile {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: 14px;
  width: 100%; text-align: left;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--hair);
  color: inherit; font: inherit;
  cursor: pointer;
  transition: border-color .1s linear, background .1s linear, transform .1s linear;
}
.rost-tile:hover { border-color: var(--hair2); background: rgba(255,255,255,0.05); }
.rost-tile[aria-pressed="true"] {
  border-color: var(--gold);
  background: rgba(255,210,74,0.07);
  transform: translateX(3px);
}
/* The selected tile grows a gold spine on its left edge. */
.rost-tile[aria-pressed="true"]::before {
  content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px;
  width: 3px; background: var(--gold);
}
.rt-n {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--faint);
}
.rost-tile[aria-pressed="true"] .rt-n { color: var(--gold); }
.rt-name {
  font-family: var(--cond); font-weight: 800; text-transform: uppercase;
  font-size: 20px; letter-spacing: 0.005em;
  line-height: 1; margin-bottom: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Three hairline bars stacked in miniature - a silhouette of the stat block
   you can read without looking at a number. */
.rt-bars { display: grid; gap: 2px; }
.rt-bars i {
  display: block; height: 3px; background: rgba(255,255,255,0.08);
  position: relative;
}
.rt-bars i::after {
  content: ''; position: absolute; inset: 0 auto 0 0;
  width: calc(var(--v, 0) * 1%); background: var(--c);
  opacity: 0.55; transition: opacity .1s linear;
}
.rost-tile:hover .rt-bars i::after,
.rost-tile[aria-pressed="true"] .rt-bars i::after { opacity: 1; }

/* ---- detail ---- */

.rost-detail { padding-bottom: 22px; position: sticky; top: 92px; }
.rost-detail h3 {
  margin: 22px 22px 0;
  font-family: var(--cond); font-weight: 800; text-transform: uppercase;
  font-size: clamp(32px, 4vw, 52px);
  letter-spacing: -0.025em; line-height: 0.92;
  color: var(--gold);
}
.rd-tag { margin: 10px 22px 0; color: var(--fg); font-size: 16px; }
.rd-row { margin: 20px 22px 0; }
.rd-row > span {
  display: block; margin-bottom: 6px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--faint);
}
.rd-row code {
  font-family: var(--mono); font-size: 12.5px; color: var(--p2);
  display: block;
}
.rd-row q {
  display: block; color: var(--muted); font-size: 14.5px; line-height: 1.6;
  border-left: 1px solid var(--hair2); padding-left: 13px;
}
#rd-run { margin: 24px 22px 0; }

/* ------------------------------------------------------------------
   03 - the system
------------------------------------------------------------------- */

/* Deliberately uneven: a wide table, a tall diagram beside it, then two
   full-bleed bands. Four equal boxes would read as filler. */
.sys {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.sys-clock, .sys-drama { grid-column: 1 / -1; }

.movetable {
  width: 100%; border-collapse: collapse;
  font-family: var(--mono); font-size: 13px;
}
.movetable th, .movetable td {
  padding: 14px 18px; text-align: right;
  border-bottom: 1px solid var(--hair);
}
.movetable th:first-child, .movetable td:first-child { text-align: left; }
.movetable thead th {
  font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--faint); font-weight: 400;
  border-bottom-color: var(--hair2);
}
.movetable tbody tr { transition: background .12s linear; }
.movetable tbody tr:hover { background: rgba(127,127,127,0.06); }
.movetable td { color: var(--muted); }
.movetable td:first-child {
  font-family: var(--cond); font-weight: 800; text-transform: uppercase;
  font-size: 21px; letter-spacing: 0.01em;
  color: var(--fg);
}
/* Each row carries its own accent so jab / normal / heavy are three
   different things at a glance, not three lines of grey. */
.movetable tbody tr td:first-child::before {
  content: ''; display: inline-block;
  width: 4px; height: 15px; margin-right: 12px;
  vertical-align: -2px;
  background: var(--row, var(--faint));
}
.movetable td b {
  color: var(--fg); font-family: var(--cond); font-weight: 700;
  font-size: 19px; letter-spacing: 0;
}
/* The number that hurts: whiff decides whether a heavy is worth throwing. */
.movetable td.risk b { color: var(--p1); }

/* ---- triangle ---- */

.tri { list-style: none; margin: 0; padding: 18px 20px 6px; display: grid; gap: 8px; }
.tri li {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline; gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--hair);
  background: rgba(127,127,127,0.05);
}
.tri li b {
  font-family: var(--cond); font-weight: 800; text-transform: uppercase;
  font-size: 23px; letter-spacing: 0;
  color: var(--accent);
}
.tri li em {
  font-style: normal;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--p1);
}
.tri li > span {
  font-family: var(--cond); font-weight: 700; text-transform: uppercase;
  font-size: 20px; letter-spacing: 0.01em;
  color: var(--fg);
}
.tri li small {
  grid-column: 1 / -1;
  font-size: 13px; color: var(--faint); line-height: 1.55;
  font-family: var(--body);
}
/* The cycle closes: a hairline runs down the left edge from row to row, and
   a dashed one loops the last back to the first. */
.tri li:not(:last-child)::after {
  content: ''; position: absolute; left: 24px; bottom: -9px;
  width: 1px; height: 9px; background: var(--hair2);
}
.tri li:last-child::before {
  content: ''; position: absolute; left: 24px; top: -9px;
  width: 1px; height: 9px;
  background: repeating-linear-gradient(to bottom,
    var(--hair2) 0 3px, transparent 3px 6px);
}

/* ---- clock ---- */

.clockline {
  list-style: none; margin: 0; padding: 42px 28px 30px;
  position: relative;
  display: block; height: 104px;
}
/* The rail, and the gradient on it is the pressure ramp: nothing before 7s,
   full heat by 18s, red from sudden death on. */
.clockline::before {
  content: ''; position: absolute; left: 28px; right: 28px; top: 68px; height: 3px;
  background: linear-gradient(to right,
    var(--hair2) 0%, var(--hair2) 28%,
    var(--gold) 72%, var(--gold) 79%,
    var(--p1) 80%, var(--p1) 100%);
}
/* --at is a unitless 0-100 set per mark in the markup. It has to stay
   unitless: calc() cannot divide a length by a percentage. */
.clockline li {
  position: absolute; top: 0; left: calc(28px + (100% - 56px) * var(--at) / 100);
  transform: translateX(-50%);
  text-align: center;
  width: 96px;
}
.clockline li b {
  display: block;
  font-family: var(--cond); font-weight: 800; font-size: 30px;
  letter-spacing: -0.01em; line-height: 1;
}
.clockline li span {
  display: block; margin-top: 6px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint);
  line-height: 1.5;
}
/* The tick that lands the label on the rail. */
.clockline li::after {
  content: ''; position: absolute; left: 50%; top: 60px;
  width: 1px; height: 14px; background: var(--hair2);
}
.clockline li:nth-child(4) b { color: var(--p1); }
.clockline li:nth-child(4)::after { background: var(--p1); }
.clockline li:nth-child(1) { text-align: left; transform: none; width: 84px; }
.clockline li:nth-child(1)::after { left: 0; }
.clockline li:last-child { text-align: right; transform: translateX(-100%); }
.clockline li:last-child::after { left: auto; right: 0; }

/* ---- drama ---- */

.drama { margin: 0; padding: 22px; display: grid; grid-template-columns: repeat(3, 1fr); }
.drama div { padding: 2px 28px; border-left: 1px solid var(--hair); }
.drama div:first-child { border-left: 0; padding-left: 0; }
.drama dt {
  font-family: var(--cond); font-weight: 800; text-transform: uppercase;
  font-size: 22px; letter-spacing: 0.01em;
  color: var(--accent);
  margin-bottom: 8px;
}
.drama dd { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.6; }

/* ------------------------------------------------------------------
   04 - the cabinet
------------------------------------------------------------------- */

/* One machine gets the big frame and two share the column beside it. An
   even row of three would say all three are the same thing; they are not. */
.cab {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 16px;
}
.cab-hero { grid-row: 1 / 3; }

.cab-hero, .cab-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hair);
  transition: transform .18s, border-color .18s;
}
.cab-card { flex-direction: row; }
.cab-hero:hover, .cab-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
}

/* Card art is two coloured shapes on a floor line, the same shorthand the
   cabinet itself uses for its mode select - no extra images for a menu. */
.cab-art {
  position: relative; flex: none;
  background: linear-gradient(to bottom, #04060c 55%, #0d1320 100%);
  border-bottom: 1px solid var(--hair);
  overflow: hidden;
}
.cab-hero .cab-art {
  height: clamp(180px, 22vw, 258px);
  /* A floor grid under the two fighters. The featured panel is wide enough
     that two coloured bars on an empty plate read as a missing image. */
  background-image:
    repeating-linear-gradient(to right,
      rgba(255,255,255,0.028) 0 1px, transparent 1px 46px),
    linear-gradient(to bottom, #04060c 55%, #0d1320 100%);
}
.cab-card .cab-art {
  width: 148px; height: auto;
  border-bottom: 0; border-right: 1px solid var(--hair);
}
/* In the two small cards the strip is as tall as the whole card, so the
   composition hangs off the middle instead of the bottom edge - otherwise it
   pools in the last 40px and looks like it fell over. */
.cab-card .cab-art::after { bottom: auto; top: 58%; }
.cab-card .art-pen i { bottom: auto; top: calc(58% - 3px); }
/* The track still has to sit ON something, so it keeps its bottom anchor and
   the horizon line is lifted to meet its far end. */
.cab-card .art-hex i:nth-child(1) { bottom: 26%; }
.cab-card .art-hex::after { bottom: calc(26% + 66px); top: auto; }
.cab-card .art-hex i:nth-child(2) { bottom: calc(26% + 12px); }
.cab-card:hover .art-hex i:nth-child(2) { transform: translateX(-50%) translateY(-20px) scale(0.6); }

.cab-art::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: 32px; height: 2px;
  background: #2b3448;
}
.cab-art i { position: absolute; display: block; transition: transform .3s cubic-bezier(.16,.9,.3,1); }

/* Light pooling on the floor under each fighter, so the two bars are lit by
   something rather than floating. */
.art-fighter::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 18% 26% at 33% 88%, rgba(255,59,107,0.30), transparent 70%),
    radial-gradient(ellipse 18% 26% at 67% 88%, rgba(64,220,255,0.30), transparent 70%);
}
.art-fighter i { width: 17px; height: 88px; bottom: 34px; border-radius: 2px; }
.art-fighter i:nth-child(1) { left: 33%; background: var(--p1); box-shadow: 0 0 22px var(--p1); }
.art-fighter i:nth-child(2) { right: 33%; background: var(--p2); box-shadow: 0 0 22px var(--p2); }
/* They close the distance on hover - the card previews its own verb. */
.cab-hero:hover .art-fighter i:nth-child(1) { transform: translateX(34px); }
.cab-hero:hover .art-fighter i:nth-child(2) { transform: translateX(-34px); }

.art-pen i { width: 74px; height: 7px; bottom: 34px; border-radius: 4px; }
.art-pen i:nth-child(1) {
  left: 6%; transform: rotate(-13deg);
  background: linear-gradient(to right, #dfe4ea 0 13%, var(--p1) 13% 100%);
  box-shadow: 0 0 16px rgba(255,59,107,0.5);
}
.art-pen i:nth-child(2) {
  right: 6%; transform: rotate(13deg);
  background: linear-gradient(to left, #dfe4ea 0 13%, var(--p2) 13% 100%);
  box-shadow: 0 0 16px rgba(64,220,255,0.5);
}
.cab-card:hover .art-pen i:nth-child(1) { transform: rotate(-32deg) translateX(8px); }
.cab-card:hover .art-pen i:nth-child(2) { transform: rotate(32deg) translateX(-8px); }

/* The shared floor line becomes this card's horizon, and the track
   converges on it - so the shape reads as distance, not as a mountain. */
.art-hex::after { bottom: 66px; }
.art-hex i:nth-child(1) {
  left: 50%; bottom: 0; transform: translateX(-50%);
  width: 150px; height: 66px;
  /* Lane dashes over a faint ground glow. The trapezoid does the
     perspective; the fade to the horizon does the distance. */
  background:
    repeating-linear-gradient(to top,
      rgba(64,220,255,0.34) 0 8px, rgba(64,220,255,0) 8px 22px),
    linear-gradient(to top, rgba(64,220,255,0.16), rgba(64,220,255,0.01));
  clip-path: polygon(0 100%, 100% 100%, 55% 0, 45% 0);
  -webkit-mask-image: linear-gradient(to top, #000 8%, rgba(0,0,0,0.15) 96%);
  mask-image: linear-gradient(to top, #000 8%, rgba(0,0,0,0.15) 96%);
}
.art-hex i:nth-child(2) {
  left: 50%; bottom: 14px; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 13px solid transparent; border-right: 13px solid transparent;
  border-bottom: 20px solid var(--p2);
  filter: drop-shadow(0 0 14px var(--p2));
}

.cab-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.cab-hero .cab-body { padding: 30px 30px 32px; }
.cab-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 14px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--faint);
}
.cab-tag { color: var(--accent); }
.cab-hero h3, .cab-card h3 {
  font-family: var(--cond); font-weight: 800; text-transform: uppercase;
  letter-spacing: -0.015em; line-height: 0.95;
  margin: 0 0 12px;
}
.cab-hero h3 { font-size: clamp(32px, 4vw, 48px); }
.cab-card h3 { font-size: 27px; margin-bottom: 9px; }
.cab-hero p { color: var(--muted); font-size: 15.5px; margin: 0 0 24px; flex: 1; max-width: 46ch; }
.cab-card p { color: var(--muted); font-size: 14px; margin: 0 0 18px; flex: 1; }
.cab-go {
  font-family: var(--cond); font-weight: 700; font-size: 16px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg);
}
.cab-go b { color: var(--gold); transition: margin-left .2s; display: inline-block; }
.cab-hero:hover .cab-go b, .cab-card:hover .cab-go b { margin-left: 8px; }

/* ------------------------------------------------------------------
   05 - on-chain
------------------------------------------------------------------- */

.chain-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  /* The copy is half the height of the receipt; starting both at the top
     leaves an obvious hole under the left column. */
  align-items: center;
}
.chain-copy p { color: var(--muted); margin: 0 0 24px; font-size: 17px; max-width: 46ch; }
.chain-copy b { color: var(--accent); font-weight: 600; }

.receipt { padding: 24px; font-family: var(--mono); border: 1px solid transparent; }
.r-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--faint);
  padding-bottom: 15px; margin-bottom: 8px; border-bottom: 1px solid var(--hair);
}
.r-head b { color: var(--gold); letter-spacing: 0.2em; }
.r-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px dashed rgba(255,255,255,0.07);
  font-size: 11.5px;
}
.r-row span {
  color: var(--faint); letter-spacing: 0.14em;
  text-transform: uppercase; white-space: nowrap;
}
.r-row code { color: var(--fg); text-align: right; }
.r-row code.win { color: var(--gold); }
.r-foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px; font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--faint);
}
.r-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--good);
  box-shadow: 0 0 10px var(--good); flex: none;
  animation: dotPulse 1.8s ease-in-out infinite;
}

/* ------------------------------------------------------------------
   Closer + footer
------------------------------------------------------------------- */

.closer { text-align: center; }
.closer-k {
  margin: 0 0 16px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--faint);
}
.closer-h {
  font-family: var(--cond); font-weight: 800; text-transform: uppercase;
  font-size: clamp(56px, 11vw, 150px);
  line-height: 0.84; letter-spacing: -0.035em; margin: 0 0 34px;
  color: #fff;
}
/* The one word that is allowed the arcade treatment, because it is the last
   thing on the page and it is the button's own line. */
.closer-h::after {
  content: ''; display: block; width: 88px; height: 4px;
  background: var(--gold); margin: 26px auto 0;
}

.foot {
  position: relative; z-index: 4;
  border-top: 1px solid rgba(255,255,255,0.10);
  background: #05070d;
  color: #8b93a7;
  padding: 34px 0;
}
.foot-grid {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.foot-brand {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--cond); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 20px; color: #fff;
}
.foot-links { display: flex; gap: 26px; flex-wrap: wrap; }
.foot-links a {
  font-family: var(--cond); font-weight: 700; font-size: 15px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #8b93a7; transition: color .16s;
}
.foot-links a:hover { color: var(--gold); }
.foot-note {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: #5b6478;
}

/* ------------------------------------------------------------------
   Responsive
------------------------------------------------------------------- */

@media (max-width: 1140px) {
  .rost { grid-template-columns: 1fr; }
  .rost-detail { position: static; }
  .sys { grid-template-columns: 1fr; }
  .chain-grid { grid-template-columns: 1fr; }
  /* She stops being an accent and starts being an obstruction once the
     column narrows, so she drops behind the wordmark instead. */
  #hero-girl { height: 74vh; right: -12vw; }
  #hero-girl.in { opacity: 0.4; }
}

@media (max-width: 900px) {
  .sec-head { grid-template-columns: 1fr; }
  .sec-note { grid-column: 1; margin-top: 22px; max-width: none; }
  .pd { grid-template-columns: 1fr; }
  .cab { grid-template-columns: 1fr; }
  .cab-hero { grid-row: auto; }
  .hero-spec { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
  .hero-spec div:nth-child(3) { border-left: 0; padding-left: 0; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: block; }
  .rost-grid { grid-template-columns: 1fr; }
  .wordmark { letter-spacing: -0.035em; }
  .hero { padding-top: 104px; }
  #hero-girl { height: 56vh; right: -20vw; }
  #hero-girl.in { opacity: 0.22; }
  .foot-grid { justify-content: flex-start; }
  .pd-derived { grid-template-columns: repeat(2, 1fr); }
  .pd-derived div:nth-child(3) { border-left: 0; }
  .pd-derived div:nth-child(3), .pd-derived div:nth-child(4) { border-top: 1px solid var(--hair); }
  .drama { grid-template-columns: 1fr; padding: 6px 20px 18px; }
  .drama div {
    border-left: 0; padding: 16px 0; border-top: 1px solid var(--hair);
  }
  .drama div:first-child { border-top: 0; }
  .movetable th, .movetable td { padding: 11px 10px; font-size: 12px; }
  .movetable td:first-child { font-size: 18px; }
  /* The timeline cannot survive a 360px column as a horizontal rail, so it
     becomes an ordinary list of marks. */
  .clockline { height: auto; padding: 18px 20px; display: grid; gap: 14px; }
  .clockline::before { display: none; }
  .clockline li {
    position: static; transform: none !important; width: auto;
    display: grid; grid-template-columns: 62px 1fr; align-items: baseline;
    gap: 12px; text-align: left !important;
  }
  .clockline li::after { display: none; }
  .clockline li span { margin-top: 0; }
  .bd-scrim {
    background:
      linear-gradient(to bottom,
        rgba(5,6,10,0.94) 0%, rgba(5,6,10,0.78) 30%,
        rgba(5,6,10,0.80) 70%, rgba(5,6,10,0.97) 100%);
  }
}

@media (max-width: 560px) {
  .cab-card { flex-direction: column; }
  .cab-card .cab-art { width: auto; height: 130px; border-right: 0; border-bottom: 1px solid var(--hair); }
  /* Back to the bottom anchor once the strip is a short banner again. */
  .cab-card .cab-art::after { top: auto; bottom: 32px; }
  .cab-card .art-pen i { top: auto; bottom: 34px; }
  .cab-card .art-hex i:nth-child(1) { bottom: 0; }
  .cab-card .art-hex::after { bottom: 66px; }
  .cab-card .art-hex i:nth-child(2) { bottom: 14px; }
}

/* Motion is decoration here, never information. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .wordmark span[aria-hidden] { opacity: 1; transform: none; }
  .wordmark, #hero-girl { transform: none; }
}