/* Rotations. One hand-written stylesheet: melee has no asset pipeline and an app this size does not need one.
   White page, a real taraflex court, jersey colours. Colour names a thing here — a role, a zone, who owns the
   serve — and never decorates one, so nothing that matters is carried by colour alone: every dot also has a
   code, every state also has a word. */

:root {
  --page: #FFFFFF;
  --panel: #F5F7F9;           /* the only grey: a panel, never the page */
  --ink: #10161C;
  --ink-2: #49545F;
  --ink-3: #69757F;
  --rule: #DCE2E7;
  --link: #0B5FBF;

  --apron: #FF6B1A;           /* the side that owns the serve, and the accents */
  --surround: #F6E7DB;        /* the run-off outside the lines: the court's setting, not a signal */
  --court: #1877E0;
  --court-front: #0E5FC4;     /* the attack zone, a shade deeper */
  --line: #FFFFFF;

  --us: #00763A;              /* white on these clears 4.5:1 at 16px bold: 5.75 and 5.43 */
  --them: #D0173C;

  /* Jersey colours. Each has to hold on the blue court; the -ink pair is the same identity as text on white. */
  --setter: #FFD100;      --setter-ink: #9A7A00;
  --outside: #00E5FF;     --outside-ink: #00788C;
  --middle: #C77DFF;      --middle-ink: #7B3FBF;
  --opposite: #FF5CA8;    --opposite-ink: #C42E73;
  --libero: #CCFF00;      --libero-ink: #5F7A00;

  --unit: 4px;
  --radius: 4px;
  --thumb: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: Archivo, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

body.has-thumbzone { --thumb: calc(108px + env(safe-area-inset-bottom)); }

main { max-width: 1180px; margin: 0 auto; padding: 0 calc(var(--unit) * 5) calc(var(--unit) * 14); }
body.has-thumbzone main { padding-bottom: calc(var(--thumb) + var(--unit) * 10); }

h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.06; letter-spacing: -0.018em; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--apron); }

::selection { background: var(--apron); color: #fff; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; border-radius: 2px; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- chrome ---------------------------------------------------------------------------------------- */

.masthead {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--unit) * 4);
  padding: calc(var(--unit) * 4) calc(var(--unit) * 5);
}
.masthead__home {
  display: inline-flex; align-items: center; gap: calc(var(--unit) * 2);
  color: var(--ink); text-decoration: none;
  font-weight: 700; font-stretch: 88%; letter-spacing: 0.11em; text-transform: uppercase; font-size: 13px;
}
.masthead__mark { width: 24px; height: 24px; display: block; }
.mark__ball { fill: var(--page); stroke: var(--ink); stroke-width: 1.5; }
.mark__seam-a { fill: var(--court); }
.mark__seam-b { fill: var(--apron); }
.masthead__nav { display: flex; gap: calc(var(--unit) * 4); }
.masthead__nav a {
  color: var(--ink-2); text-decoration: none;
  font-weight: 700; font-stretch: 88%; font-size: 13px; letter-spacing: 0.08em;
  padding-bottom: 2px; border-bottom: 3px solid transparent;
}
.masthead__nav a:hover { color: var(--ink); border-bottom-color: var(--apron); }

/* Fine print, not a paragraph. It runs the full container so it falls to a line or two; capped to a reading
   measure it wrapped into a block with the visual weight of content, which is not what a colophon is for.
   12px on --ink-3 is 4.72:1 on white, so it stays quiet without dropping below the contrast floor. */
.colophon {
  border-top: 1px solid var(--rule);
  padding: calc(var(--unit) * 6) 0 calc(var(--unit) * 8);
}
.colophon__inner { max-width: 1180px; margin: 0 auto; padding: 0 calc(var(--unit) * 5); }
.colophon p { margin: 0; color: var(--ink-3); font-size: 12px; line-height: 1.55; }
.colophon a { color: var(--ink-2); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.colophon a:hover { color: var(--apron); }
body.has-thumbzone .colophon { padding-bottom: calc(var(--thumb) + var(--unit) * 6); }

/* --- the court ------------------------------------------------------------------------------------- */

.plate {
  position: relative;
  aspect-ratio: 112 / var(--plate-h, 123);
  width: 100%;
  background: var(--surround);
  border-radius: var(--radius);
  overflow: hidden;
}

/* The line variables come from Court's VIEW_* constants, emitted per plate, so the drawing and the geometry
   cannot drift apart. */
.plate__floor, .plate__front, .plate__lines {
  position: absolute; left: var(--line-left); right: calc(100% - var(--line-right));
}
.plate__floor { top: var(--line-top); bottom: calc(100% - var(--line-bottom)); background: var(--court); }
.plate__front { top: var(--line-top); bottom: calc(100% - var(--line-attack)); background: var(--court-front); }
.plate__attack {
  position: absolute; left: var(--line-left); right: calc(100% - var(--line-right));
  top: var(--line-attack); height: 3px; background: var(--line);
}
/* Drawn after the zone fields so the boundary is one unbroken rectangle, not three painted over. */
.plate__lines { top: var(--line-top); bottom: calc(100% - var(--line-bottom)); border: 3px solid var(--line); }
.plate__net {
  position: absolute; left: 1.5%; right: 1.5%; top: var(--line-top); height: 9px; transform: translateY(-100%);
  border-top: 4px solid var(--ink);
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 7px);
}
.plate__net span {
  position: absolute; right: 0; top: -19px;
  font-size: 10px; font-weight: 800; font-stretch: 82%; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-3);
}

.zone {
  position: absolute; transform: translate(-50%, -50%);
  font-size: clamp(17px, 4.4vw, 26px); font-weight: 800; font-stretch: 76%;
  color: #C5DDF7; line-height: 1; pointer-events: none;
}

/* Where each player is about to run. Drawn under the dots, and only at the serve — by the play moment they
   have arrived and the arrows would be describing the past. */
.tracks {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  opacity: 0; transition: opacity .3s ease;
}
/* An arrow is drawn twice: a white casing so it survives the blue court, then the runner's own jersey colour
   on top, which is what says whose arrow it is. Six white tracks were legible but anonymous — with the dots
   close together you could not tell which player each one belonged to. */
.track__casing { fill: none; stroke: var(--line); stroke-width: 260; stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
.track { fill: none; stroke: currentColor; stroke-width: 120; stroke-linecap: round; stroke-linejoin: round; }
.track--setter { color: var(--setter); }
.track--outside { color: var(--outside); }
.track--middle { color: var(--middle); }
.track--opposite { color: var(--opposite); }
.track--libero { color: var(--libero); }
[data-moment="serve"] .tracks { opacity: 1; }
.court__still .tracks { opacity: 1; }

/* --- a player -------------------------------------------------------------------------------------- */

.peg {
  position: absolute;
  width: 13%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--outside);
}
.peg--travels { transition: left .8s cubic-bezier(.34, .03, .2, 1), top .8s cubic-bezier(.34, .03, .2, 1); }
.peg--setter { color: var(--setter); }
.peg--outside { color: var(--outside); }
.peg--middle { color: var(--middle); }
.peg--opposite { color: var(--opposite); }
.peg--libero { color: var(--libero); }

/* The code lives inside the dot. It used to sit beneath in a white chip, which doubled each player's
   footprint, crowded the neighbouring dots and collided with the painted zone numerals. Dark ink clears
   4.5:1 on all five jersey colours (6.37:1 at worst, the opposite's pink), so one rule covers every role. */
.peg__dot {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 0 3px var(--line), 0 2px 6px rgba(8, 20, 34, .35);
  position: relative;
}
/* The server has the ball. It is the only white circle on the court, so it reads before anything else. */
.peg__ball {
  position: absolute; right: -14%; top: -14%; width: 52%; aspect-ratio: 1; border-radius: 50%;
  background: var(--line); box-shadow: 0 0 0 2px var(--ink);
}
.peg__code {
  font-size: clamp(11px, 2.6vw, 14px); font-weight: 800; font-stretch: 76%; letter-spacing: 0.01em;
  color: var(--ink); white-space: nowrap; line-height: 1;
}

.court__still { display: none; }
[data-moment="both"] .court__anim { display: none; }
[data-moment="both"] .court__still { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: calc(var(--unit) * 4); }

.plate--mini .peg { width: 12.5%; }
.plate--mini .peg__code { font-size: 10px; }
.plate--mini .zone { font-size: 14px; }
.plate--mini .plate__net span { display: none; }

.pair__half { margin: 0; }
.pair__half figcaption {
  margin-bottom: calc(var(--unit) * 1.5);
  font-size: 10px; font-weight: 800; font-stretch: 82%; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-3);
}

/* Reduced motion takes the tween away, never the thing being shown. The dots still move between the two
   moments and every control still works; the change is simply instant. JS starts such a visitor on the
   side-by-side stop, which they can leave. */
@media (prefers-reduced-motion: reduce) {
  .peg--travels, .digits__strip, .tracks, .cue__stop, .cue__run { transition: none; }
}

/* --- the tally ------------------------------------------------------------------------------------- */

.tally {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 3px;
  border: 3px solid var(--ink); border-radius: var(--radius); overflow: hidden;
  background: var(--ink);
}
.tally__side {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: calc(var(--unit) * 2) calc(var(--unit) * 4); background: var(--page);
}
.tally__side--them { align-items: flex-end; }
/* The serve is one colour in two places: whichever side owns it is flooded. */
.tally__side.is-serving { background: var(--apron); color: var(--ink); }
.tally__who {
  font-size: 11px; font-weight: 800; font-stretch: 84%; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--ink-2);
}
.tally__side.is-serving .tally__who { color: var(--ink); }
.tally__pip {
  display: grid; place-content: center; justify-items: center; gap: 1px;
  padding: calc(var(--unit) * 2) calc(var(--unit) * 3); background: var(--page);
  font-size: 10px; font-weight: 700; font-stretch: 84%; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
.tally__sets { font-size: 18px; font-weight: 800; letter-spacing: 0; color: var(--ink); }

.digits { display: flex; gap: 1px; }
.digits__place { overflow: hidden; height: 1em; line-height: 1; }
.digits__place, .digits__strip span {
  font-size: clamp(46px, 13vw, 64px); font-weight: 800; font-stretch: 76%; letter-spacing: -0.02em;
}
.digits__strip {
  display: block;
  transform: translateY(calc(var(--d) * -1em));
  transition: transform .62s cubic-bezier(.2, .85, .25, 1);
}
.digits__strip span { display: block; height: 1em; line-height: 1; }

.serveline {
  display: flex; align-items: center; gap: calc(var(--unit) * 2);
  margin: calc(var(--unit) * 3) 0 calc(var(--unit) * 5);
  font-size: 13px; font-weight: 700; font-stretch: 88%; color: var(--ink-2);
}
.serveline__lamp { width: 11px; height: 11px; border-radius: 50%; background: var(--apron); flex: none; }

/* --- board ----------------------------------------------------------------------------------------- */

.board__grid { display: grid; gap: calc(var(--unit) * 9); }
@media (min-width: 900px) {
  .board__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; gap: calc(var(--unit) * 10); }
}

/* --- the cue --------------------------------------------------------------------------------------- */

.cue { margin-top: calc(var(--unit) * 4); }
.cue__stops {
  display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px;
  background: var(--ink); border-radius: var(--radius);
}
.cue__stop {
  border: 0; background: var(--page); color: var(--ink-2); cursor: pointer; font: inherit;
  padding: calc(var(--unit) * 2) calc(var(--unit) * 3.5); border-radius: 2px;
  font-size: 11px; font-weight: 800; font-stretch: 84%; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background .18s ease, color .18s ease;
}
.cue__stop:hover { color: var(--ink); }
.cue__stop.is-on { background: var(--apron); color: var(--ink); }
.cue__run {
  display: inline-flex; align-items: center; gap: calc(var(--unit) * 1.5);
  margin-top: calc(var(--unit) * 3);
  border: 3px solid var(--ink); background: var(--page); color: var(--ink);
  border-radius: var(--radius); padding: calc(var(--unit) * 2) calc(var(--unit) * 3.5);
  cursor: pointer; font: inherit;
  font-size: 11px; font-weight: 800; font-stretch: 84%; letter-spacing: 0.12em; text-transform: uppercase;
}
.cue__run svg { width: 11px; height: 11px; display: block; }
.cue__run:hover { background: var(--ink); color: var(--page); }
.cue__caption {
  margin: calc(var(--unit) * 3) 0 0; min-height: 3.2em; max-width: 54ch;
  font-size: 14px; line-height: 1.55; color: var(--ink-2);
}

/* --- the key --------------------------------------------------------------------------------------- */

.key {
  list-style: none; display: flex; flex-wrap: wrap; gap: calc(var(--unit) * 1.5) calc(var(--unit) * 4);
  margin: calc(var(--unit) * 4) 0 0; padding: 0;
  font-size: 11px; font-weight: 700; font-stretch: 88%; color: var(--ink-2);
}
.key__item { display: flex; align-items: center; gap: calc(var(--unit) * 1.5); }
.key__item b { font-weight: 800; color: var(--ink); letter-spacing: 0.04em; }
/* No background here: the role modifiers set it, at the same specificity and later in the file. */
.key__swatch { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1.5px var(--rule); }
.key__item--setter .key__swatch { background: var(--setter); }
.key__item--outside .key__swatch { background: var(--outside); }
.key__item--middle .key__swatch { background: var(--middle); }
.key__item--opposite .key__swatch { background: var(--opposite); }
.key__item--libero .key__swatch { background: var(--libero); }
.key__item--ball .key__swatch { background: var(--apron); }
.key__arrow {
  width: 20px; height: 10px; flex: none;
  background: var(--ink-3);
  clip-path: polygon(0 42%, 62% 42%, 62% 12%, 100% 50%, 62% 88%, 62% 58%, 0 58%);
}

/* --- the ledger ------------------------------------------------------------------------------------ */

.ledger__head {
  font-size: clamp(28px, 7vw, 38px); font-stretch: 78%; font-weight: 800;
  padding-bottom: calc(var(--unit) * 2); border-bottom: 3px solid var(--ink);
}
.ledger__lede { margin: calc(var(--unit) * 3) 0 calc(var(--unit) * 5); font-size: 14px; color: var(--ink-2); max-width: 52ch; }
.ledger__lede strong { color: var(--ink); font-weight: 700; }

.roster { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.roster__row {
  display: grid; grid-template-columns: 22px 46px 1fr auto; gap: calc(var(--unit) * 3);
  align-items: baseline; padding: calc(var(--unit) * 2.5) 0;
  border-bottom: 1px solid var(--rule); font-size: 13px;
}
.roster__zone { font-weight: 800; font-stretch: 76%; color: var(--ink-3); text-align: center; }
.roster__code { font-weight: 800; font-stretch: 82%; letter-spacing: 0.04em; }
.roster__row--setter .roster__code { color: var(--setter-ink); }
.roster__row--outside .roster__code { color: var(--outside-ink); }
.roster__row--middle .roster__code { color: var(--middle-ink); }
.roster__row--opposite .roster__code { color: var(--opposite-ink); }
.roster__row--libero .roster__code { color: var(--libero-ink); }
.roster__name { color: var(--ink-2); }
.roster__tag { font-size: 11px; font-stretch: 88%; color: var(--ink-3); letter-spacing: 0.02em; }

.ledger__note { font-size: 13px; color: var(--ink-2); max-width: 52ch; }
.verdict { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--unit) * 2.5); font-size: 13px; max-width: 52ch; }
.verdict::before { content: ""; width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; }
.verdict.is-legal { color: var(--ink-2); }
.verdict.is-legal::before { background: var(--us); }
.verdict.is-illegal { color: var(--them); font-weight: 700; }
.verdict.is-illegal::before { background: var(--them); }

/* --- tape and afters ------------------------------------------------------------------------------- */

.tape {
  list-style: none; display: flex; flex-wrap: wrap; gap: calc(var(--unit) * 1.5);
  margin: calc(var(--unit) * 6) 0 0; padding: 0;
}
.tape__rally {
  display: grid; grid-template-columns: auto 1fr; column-gap: calc(var(--unit) * 2);
  align-items: center;
  padding: calc(var(--unit) * 1.5) calc(var(--unit) * 2.5);
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
}
.tape__rally::before { content: ""; grid-row: 1 / 3; width: 8px; height: 8px; border-radius: 50%; }
.tape__rally--us::before { background: var(--us); }
.tape__rally--them::before { background: var(--them); }
.tape__score { font-size: 12px; font-weight: 800; font-stretch: 82%; }
.tape__note { font-size: 10px; font-stretch: 88%; color: var(--ink-3); letter-spacing: 0.03em; }

.afters { display: flex; align-items: center; gap: calc(var(--unit) * 2); margin-top: calc(var(--unit) * 7); }
.minor {
  border: 3px solid var(--ink); background: transparent; color: var(--ink);
  border-radius: var(--radius); padding: calc(var(--unit) * 2) calc(var(--unit) * 4);
  cursor: pointer; font: inherit;
  font-size: 11px; font-weight: 800; font-stretch: 84%; letter-spacing: 0.12em; text-transform: uppercase;
}
.minor:hover { background: var(--ink); color: var(--page); }
.minor[disabled] { opacity: .3; cursor: default; }
.minor[disabled]:hover { background: transparent; color: var(--ink); }
.afters__count { margin-left: auto; font-size: 11px; font-stretch: 88%; color: var(--ink-3); letter-spacing: 0.06em; }

.share { margin-top: calc(var(--unit) * 5); font-size: 12px; color: var(--ink-3); }
.share code {
  font-family: inherit; font-weight: 700; color: var(--ink-2); overflow-wrap: anywhere;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 2px 6px;
}

/* --- the thumb zone -------------------------------------------------------------------------------- */

.thumbzone {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  padding: 3px 3px calc(3px + env(safe-area-inset-bottom));
  background: var(--ink);
}
.thumbzone__half { display: contents; }
.thumbzone__over {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: calc(var(--unit) * 3); background: var(--page); padding: calc(var(--unit) * 3) calc(var(--unit) * 4);
}
.thumbzone__over p { margin: 0; font-weight: 800; font-stretch: 88%; }

.rally {
  display: grid; gap: 2px; align-content: center; width: 100%;
  border: 0; cursor: pointer; font: inherit; text-align: left; text-decoration: none;
  padding: calc(var(--unit) * 3) calc(var(--unit) * 4);
  min-height: 62px;
}
.rally--us { background: var(--us); color: #fff; }
.rally--them { background: var(--them); color: #fff; }
.rally:hover { filter: brightness(1.1); }
.rally--wide { width: auto; min-width: 250px; border-radius: var(--radius); }
.rally__verb { font-size: 16px; font-weight: 800; font-stretch: 84%; letter-spacing: 0.05em; text-transform: uppercase; }
.rally__then { font-size: 11px; font-stretch: 92%; line-height: 1.3; color: rgba(255, 255, 255, .9); }

@media (min-width: 900px) {
  .thumbzone {
    position: static; gap: calc(var(--unit) * 3);
    max-width: 1180px; margin: calc(var(--unit) * 9) auto 0; padding: 0 calc(var(--unit) * 5);
    background: none;
  }
  .rally { border-radius: var(--radius); }
  body.has-thumbzone { --thumb: 0px; }
}


/* --- home: the rotations, as the way in ---------------------------------------------------------- */

.browse { margin-top: calc(var(--unit) * 4); }
.browse h2 {
  font-size: clamp(20px, 4vw, 26px); font-stretch: 80%;
  padding-bottom: calc(var(--unit) * 2); border-bottom: 3px solid var(--ink);
}
.browse__lede { margin: calc(var(--unit) * 4) 0 calc(var(--unit) * 6); font-size: 15px; color: var(--ink-2); max-width: 64ch; }
.browse__grid { display: grid; gap: calc(var(--unit) * 5); }
@media (min-width: 700px) { .browse__grid { grid-template-columns: repeat(3, 1fr); } }
.browse__card {
  display: grid; gap: calc(var(--unit) * 3); align-content: start;
  padding: calc(var(--unit) * 4); text-decoration: none; color: var(--ink);
  background: var(--page); border: 3px solid var(--ink); border-radius: var(--radius);
}
.browse__card:hover { color: var(--ink); background: var(--surround); }
.browse__name { font-size: 30px; font-weight: 800; font-stretch: 74%; letter-spacing: -0.02em; line-height: 1; }
.browse__why { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.browse__go {
  font-size: 11px; font-weight: 800; font-stretch: 84%; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--link);
}
.browse__card:hover .browse__go { color: var(--apron); }

/* --- home: the match form, second --------------------------------------------------------------- */


.opening { padding: calc(var(--unit) * 2) 0 calc(var(--unit) * 9); }
.opening__rule {
  max-width: 44ch; margin: 0 0 calc(var(--unit) * 6);
  font-size: clamp(16px, 2.1vw, 19px); line-height: 1.45; color: var(--ink); font-weight: 500;
}
.opening__rule em { font-style: normal; font-weight: 800; color: var(--apron); }
.opening__head {
  font-size: clamp(40px, 12vw, 86px); font-stretch: 74%; font-weight: 800; letter-spacing: -0.03em;
  text-transform: uppercase;
}
/* The word the app is named for, in the court's own blue. Not the serve orange: that names who owns the
   serve and the active control, and spending it on a headline is the reservation leaking again. */
.opening__key { color: var(--court); }

.setup { margin-top: calc(var(--unit) * 14); }
.setup__head {
  font-size: clamp(20px, 4vw, 26px); font-stretch: 80%;
  padding-bottom: calc(var(--unit) * 2); border-bottom: 3px solid var(--ink);
}
.setup__lede { margin: calc(var(--unit) * 4) 0 calc(var(--unit) * 6); font-size: 15px; color: var(--ink-2); max-width: 64ch; }
.setup__form {
  display: grid; gap: calc(var(--unit) * 6); justify-items: start;
  background: var(--surround); border-radius: var(--radius); padding: calc(var(--unit) * 6);
}
.systems { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: calc(var(--unit) * 2); width: 100%; }
.systems legend {
  width: 100%; padding: 0 0 calc(var(--unit) * 3);
  font-size: 11px; font-weight: 800; font-stretch: 84%; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-3);
}
.systems__card {
  position: relative;
  display: flex; align-items: center; gap: calc(var(--unit) * 3);
  border: 3px solid var(--rule); border-radius: var(--radius); background: var(--page);
  padding: calc(var(--unit) * 3) calc(var(--unit) * 4); cursor: pointer;
}
.systems__card:hover { border-color: var(--ink-3); }
.systems__card input { position: absolute; opacity: 0; pointer-events: none; }
.systems__card:has(input:checked) { border-color: var(--court); }
.systems__card:has(input:focus-visible) { outline: 3px solid var(--link); outline-offset: 2px; }
.systems__num { font-size: 30px; font-weight: 800; font-stretch: 74%; letter-spacing: -0.02em; color: var(--ink-3); }
.systems__card:has(input:checked) .systems__num { color: var(--court); }
.systems__why { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.libero { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--unit) * 3); font-size: 13px; color: var(--ink-2); max-width: 66ch; }
.libero input { margin-top: 3px; accent-color: var(--court); width: 17px; height: 17px; }


.moments { margin-top: calc(var(--unit) * 14); }
.moments h2 {
  font-size: clamp(20px, 4vw, 26px); font-stretch: 80%;
  padding-bottom: calc(var(--unit) * 2); border-bottom: 3px solid var(--ink);
}
.moments__pair { display: grid; gap: calc(var(--unit) * 8); margin-top: calc(var(--unit) * 6); }
@media (min-width: 760px) { .moments__pair { grid-template-columns: 1fr 1fr; gap: calc(var(--unit) * 10); } }
/* A heading, set as one. It was small tracked uppercase in the serve orange, which is eyebrow styling and
   spends the one reserved colour on decoration — orange names who owns the serve, nothing else. */
.moments h3 {
  font-size: 17px; font-weight: 800; font-stretch: 80%; letter-spacing: -0.01em;
  color: var(--ink); margin-bottom: calc(var(--unit) * 2);
}
.moments p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
/* Qualified: the bare class loses to `.moments p` above it, which zeroes the margin. */
.moments .moments__out { margin-top: calc(var(--unit) * 9); font-size: 14px; color: var(--ink-2); }

/* --- the atlas ------------------------------------------------------------------------------------- */

.atlas__head { font-size: clamp(34px, 9vw, 62px); font-stretch: 74%; text-transform: uppercase; letter-spacing: -0.025em; }
.atlas__lede { max-width: 58ch; margin: calc(var(--unit) * 3) 0 calc(var(--unit) * 5); color: var(--ink-2); font-size: 15px; }
.atlas__switch { display: flex; gap: calc(var(--unit) * 1); border-bottom: 3px solid var(--ink); align-items: flex-end; flex-wrap: wrap; }
.atlas__switch a {
  padding: calc(var(--unit) * 2) calc(var(--unit) * 4); text-decoration: none; color: var(--ink-3);
  font-size: 11px; font-weight: 800; font-stretch: 84%; letter-spacing: 0.14em; text-transform: uppercase;
  border: 3px solid transparent; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0;
  margin-bottom: -3px;
}
.atlas__switch a.is-on { color: var(--ink); background: var(--page); border-color: var(--ink); }
.atlas__hint { font-size: 11px; color: var(--ink-3); padding: 0 0 calc(var(--unit) * 2) calc(var(--unit) * 3); }

.atlas__grid { display: grid; gap: calc(var(--unit) * 6); margin-top: calc(var(--unit) * 8); }
@media (min-width: 700px) { .atlas__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .atlas__grid { grid-template-columns: repeat(3, 1fr); } }
.atlas__cell { margin: 0; background: var(--page); border: 3px solid var(--ink); border-radius: var(--radius); padding: calc(var(--unit) * 4); }
.atlas__cell figcaption {
  display: grid; grid-template-columns: auto 1fr; gap: calc(var(--unit) * 3); align-items: center;
  margin-bottom: calc(var(--unit) * 4);
}
.atlas__n { font-size: 36px; font-weight: 800; font-stretch: 74%; line-height: 1; color: var(--court); }
.atlas__fact { font-size: 11px; font-stretch: 88%; line-height: 1.4; color: var(--ink-2); letter-spacing: 0.03em; }
.atlas__foot { margin-top: calc(var(--unit) * 10); font-size: 14px; color: var(--ink-2); max-width: 64ch; }

/* --- not found ------------------------------------------------------------------------------------- */

.out { padding: calc(var(--unit) * 4) 0 calc(var(--unit) * 10); max-width: 54ch; }
.out h1 { font-size: clamp(44px, 14vw, 92px); font-stretch: 74%; text-transform: uppercase; letter-spacing: -0.03em; }
.out p { font-size: 15px; color: var(--ink-2); margin: calc(var(--unit) * 4) 0 calc(var(--unit) * 6); }