/* ==========================================================
   2ND STRING GAMING — ROSTER SIGNAL
   Shared stylesheet. Tokens mirror tokens/brand-tokens.css.
   Single committed visual world (signal-black ground).
   ========================================================== */

/* ---- Hypermonosaturation: the numeral face -------------------------
   The brand's figures, subset to digits, currency, and the separators
   that appear alongside them — 1.3KB of WOFF2, inlined so a numeral
   never arrives after the layout it sits in. fsType is 0 on the file,
   so embedding is permitted. Licence: Heaven Castro, 2025.

   Two facts about this font drive every rule that uses it. It ships
   ONE weight, so font-synthesis is off — a faked bold on a display
   face reads as mush. And it carries no `tnum` feature: digit advances
   run 232 to 484 units, a 2.09x spread, so a "1" is less than half the
   width of a "5". That is fine for a figure that sits still and fatal
   for one that ticks, which is why the countdown below gets fixed-width
   digit cells instead of tabular figures the font does not have.

   Table columns and form fields keep IBM Plex Mono, which is actually
   monospaced. This face is for display figures only. */
@font-face{
  font-family:"Hypermonosaturation";
  src:url(data:font/woff2;base64,d09GMgABAAAAAAVMAAwAAAAACMAAAAT8AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYGYABEEQgKiVyHQwE2AiQDVAssAAQgBYI2ByAbqAZRlA1Sk+BngqkyukdwJBpJWg+R3LzEcf4StbApfMhbvxUPT/vjO3fmfVjrRmUqgaGq0W1DVN9StknJPH7ce+/ehzFASE5iSUuLqgoFbGpL+//fs27eNENlOoK2WOEhKU66EJ1k6S+y/wHCZ/7/95Pf8b+wp798ITLygeZdFr1ZFWWZDiySqjgScCATHqBO3Vh44JZdfKJvyDtCFxOoBiQhNCOKOMzNAJ50HV0BcLZOjteQF24gKclQFcNeK3eltsCCaFE57//UZF83qDXNKxsC/QgSMppRQWKGGXS5cimzn1PUfyyy8+7qnrgfqoupXAm0oEnQx8x0kIYwCi3FQxaqWlDqlSWpxsdT519cIk9Xndd1q5dLCfp6twruM1yuc/F6ikwZlmRipxbR3dJTVdwnaWz5neOXz188quKFWxPWHg9bXbopeQMh2J0xRhmhHnQ6ljAFzMmMgJ0RcNDOxMowxpRiyqhHGXtLImdGWbPIPY0hj8HyHkUhTNPoHVVV4qzanSYoYdW49jlAJjYqUy8RS0EEA7aUAMYyMyQJcnCM0aY0NJiIxKrPi6nobqUeTGXHczV6yWBtjSmoRMUKVgZjTcH71asn1XBFMezR6Hcz7ogKWbpVWM/uaDLX+nAwvC+mjLETO7tLBBusXpJBpFYD9rCyM0rMSpWc0W5p3MicRWzuVkZApE/L8xPeveBh0ZVxKLKDq/fdNfxqCjbsfdsPfgc4MUd7YnizTiTPTbtiqHed/Emh9S7VSV3DNW8bN4V8XHfn1REJoY1B8G3U6hp6/cN15wTgTmPd5iQQVj7lH+n4zq3JIUVnEHUIzY5Dw42d57tCPGuSg79KifDbszXgjpYAu7cyGY52INrRAxj7ukNimh/Hexzs7Gq5YAOvo9dKkHwdnnpQ0PjfeD1ekOcIGsOZT612NqY2yaYNGE1T/W4Kt6U5FSa5zb7IaU/akhadd+37Fwkd4nZmNQzvD/HvO/MctScPY7PQ5WK/frs9vPXrEXYegVCNAbc/NQoPbzajFyMQPwKCXvLm+hznIkNOZUcCp/YpQk9T6iek9BzaxzwH7nOnAUlvWJ24W5vyzC1mhC1MQFs38JrLCAbT6jlB5TXblofXYGPOR9ftImKjR/zO5ahel2gpuKfQW47v2QCU9wL5zgTHR+jbBdRxezzV1KibsMw+UHZpqhVmeGehLWF8Xt8G5d2h+6d6tNdbZn368jOt4goymoNP+Z9jaH0TGDpEma0GUHJX4lGxIWzqQDK9z/vFCO0Aj7sbXF0Wo8OGXNdFKWhyrk68wE9q2lzwX+Zvq+7P5/nNjQlxdTLrJLXQF4fVS81LlJokj8uaBvo9sINp3p87JiYlAzTG0BsdXJW0LPvEfHXtKwBe3uzfs59/J6Td/79KSo85ZQDl0rI1TzWJmtIvyBoIwKhurtES/cAWPqAYY4ijEBU7ISpGgt6thEjl7UGyr0CMTzmx3A7NgODoq+Glxw8YAyHxDDJiMGhjEsR6EIWgxQpP1bJo1dhfZvOgqHADlgHmw6gUPqm1j8+WmegsUL5EvwtDqX1qsn4DJg3p1K7DCAsPzTxZBAnQ3lA+lCVDq0ZjAn0CySk0bMSQC/ghoUkDWgl6Gfo0DGOiEaOgd+g0oQiE9hv1fDMkWYZcySyiWJzqO6jQ8mCBfIXz3c9YtqiFIUCxgfwEMBYUJf7vlQcAAAAA) format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --signal-black:#0a0a0a;
  --paper-white:#f4f2ed;
  --roster-orange:#ff4f12;
  --open-roster-mint:#98f5c5;
  --interface-gray:#b8b8b3;
  --deep-gray:#242424;

  --font-display:"Instrument Sans",Arial,Helvetica,sans-serif;
  --font-mono:"IBM Plex Mono",Consolas,ui-monospace,monospace;
  --font-editorial:"Libre Bodoni",Georgia,serif;
  --font-num:"Hypermonosaturation","Libre Bodoni",Georgia,serif;

  /* Legibility floor. The label token carries every mono caption, status
     readout and field label on the site; at 11px it was technically legible
     and practically not. 13px is the floor for anything a person has to
     read, and 17px is the body. */
  --size-label:0.8125rem;
  --size-body:1.0625rem;
  --size-lead:clamp(1.25rem,2.1vw,2rem);
  --size-heading:clamp(2.5rem,7vw,7rem);
  --size-display:clamp(3.4rem,12vw,12rem);

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  --rule:1px;
  --rule-heavy:4px;
  --radius:0px;
  --cell:clamp(16px,2.2vw,32px);
  --nav-h:52px;

  --hair:rgba(244,242,237,.34);
  --hair-dark:rgba(10,10,10,.34);

  --snap:140ms; --shift:280ms; --reveal:640ms;
  --ease-cut:cubic-bezier(.2,.8,.2,1);

  color-scheme:dark;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

*,*::before,*::after{box-sizing:border-box}

/* ---------- CURSOR ----------
   A drawn arrowhead instead of the system pointer — one flat colour, no
   outline, no shadow. This static pair is the fallback for no-JS and reduced
   motion: orange for the black ground the site mostly sits on, mint for
   anything clickable. The script below recolours it per surface.
   Only applied where there is a real pointing device. */
/* The nav is fixed, so an anchor jump would otherwise land with its target
   tucked underneath it. This belongs at the top level: it spent a moment
   inside the pointer:fine block below, which meant touch devices never got
   it and every in-page link on a phone landed under the nav bar. */
html{scroll-padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 8px)}

@media (pointer: fine){
  :root{
    --cursor-arrow:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M5%203%20L20.6%2016.4%20L12.6%2017.9%20L8%2024.8%20Z%22%20fill%3D%22%23FF4F12%22%2F%3E%3C%2Fsvg%3E") 5 3;
    --cursor-hot:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M5%203%20L20.6%2016.4%20L12.6%2017.9%20L8%2024.8%20Z%22%20fill%3D%22%2398F5C5%22%2F%3E%3C%2Fsvg%3E") 5 3;
  }
html,body{cursor:var(--cursor-arrow),default}

  a,button,summary,label,
  .choice,.check label,
  [role="button"],
  .nav__burger,.gallery__toggle,.modal__close,
  .slot__claim,a.prize__name{
    cursor:var(--cursor-hot),pointer;
  }

  input,select,textarea{cursor:var(--cursor-arrow),auto}
  input[type="text"],input[type="email"],input[type="url"],
  input[type="tel"],input[type="search"],input[type="password"],
  input[type="date"],textarea{cursor:text}
  input[type="checkbox"],input[type="radio"],input[type="file"],select,
  button:disabled{cursor:var(--cursor-hot),pointer}

  .gallery{cursor:var(--cursor-arrow),grab}
}

/* ---------- CURSOR, STEERED ----------
   When the script is running, the native pointer is hidden and a drawn
   arrowhead follows it, turning to face the direction of travel. The static
   CSS cursor above stays as the fallback for no-JS and reduced motion. */
@media (pointer: fine){
  .cursor-js,
  .cursor-js body,
  .cursor-js a,.cursor-js button,.cursor-js summary,.cursor-js label,
  .cursor-js .choice,.cursor-js .check label,.cursor-js [role="button"],
  .cursor-js .nav__burger,.cursor-js .gallery__toggle,.cursor-js .modal__close,
  .cursor-js .slot__claim,.cursor-js a.prize__name,
  .cursor-js input,.cursor-js select,.cursor-js textarea,
  .cursor-js .gallery{cursor:none}

  /* text fields keep the real caret — an arrow is no use inside a field */
  .cursor-js input[type="text"],.cursor-js input[type="email"],
  .cursor-js input[type="url"],.cursor-js input[type="tel"],
  .cursor-js input[type="search"],.cursor-js input[type="password"],
  .cursor-js input[type="date"],.cursor-js textarea{cursor:text}

  #cursorArrow{
    position:fixed;left:0;top:0;
    width:30px;height:30px;
    z-index:2147483646;
    pointer-events:none;
    opacity:0;
    transition:opacity 160ms var(--ease-cut);
    will-change:transform;
  }
  .cursor-js #cursorArrow{opacity:1}
  #cursorArrow.is-out,
  #cursorArrow.is-text{opacity:0}

  /* two stacked copies of the same arrow. The upper one is clipped to the
     other surface, so the arrow splits its colours across an edge. */
  #cursorArrow .c-layer{
    position:absolute;inset:0;
    width:30px;height:30px;
    overflow:visible;
  }
  #cursorArrow .c-alt{display:none}
  #cursorArrow.is-split .c-alt{display:block}
  #cursorArrow path{stroke:none}

  /* a small label rides alongside the mint arrow so a clickable thing reads
     as clickable. It never rotates, so it stays legible at any heading. */
  #cursorArrow .c-tag{
    position:absolute;
    left:17px;top:19px;
    display:none;
    background:var(--open-roster-mint);
    color:var(--signal-black);
    font-family:var(--font-mono);
    font-size:10px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    line-height:1;
    padding:3px 5px;
    white-space:nowrap;
  }
  #cursorArrow.is-hot .c-tag{display:block}

  /* The mirrored text sits above the arrow and is clipped to its outline, so
     the split follows the letterforms instead of a bounding box. contain
     keeps the clone out of the page's own layout and paint work. */
  #cursorInk{
    position:fixed;inset:0;
    z-index:2147483647;
    pointer-events:none;
    overflow:hidden;
    contain:strict;
  }
  #cursorInk *{
    pointer-events:none!important;
    animation:none!important;
    transition:none!important;
  }

}


body{
  margin:0;
  background:var(--signal-black);
  color:var(--paper-white);
  font-family:var(--font-display);
  font-size:var(--size-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit}
img{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--roster-orange);outline-offset:2px}

.mono{
  font-family:var(--font-mono);
  font-size:var(--size-label);
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.2;
}
.dim{color:var(--interface-gray)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- NAVIGATION ---------- */
.nav{
  position:fixed;
  top:env(safe-area-inset-top,0px);
  left:0;right:0;
  z-index:60;
  display:grid;
  grid-template-columns:auto 1fr auto auto auto;
  align-items:stretch;
  height:var(--nav-h);
  background:var(--signal-black);
  border-bottom:var(--rule) solid var(--paper-white);
}
.nav__cell{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:0 var(--sp-4);
  border-right:var(--rule) solid var(--hair);
  text-decoration:none;
}
.nav__cell:last-child{border-right:0}
.nav__brand{flex:0 0 auto}
.nav__mark{font-weight:700;letter-spacing:-.05em;font-size:1.0625rem}
.nav__mark span{color:var(--roster-orange)}
.clock{font-variant-numeric:tabular-nums}
.clock__sec{color:var(--roster-orange)}
.nav__links{display:flex;gap:var(--sp-5)}
.nav__links a{
  text-decoration:none;
  color:var(--interface-gray);
  border-bottom:2px solid transparent;
  padding-bottom:2px;
  transition:color var(--snap) var(--ease-cut);
}
.nav__links a:hover{color:var(--paper-white)}
.nav__links a[aria-current="page"]{color:var(--paper-white);font-weight:600;border-bottom-color:var(--roster-orange)}
.nav__cta{
  background:var(--roster-orange);
  color:var(--signal-black);
  font-weight:600;
  border-right:0;
  white-space:nowrap;
}
.nav__cta:hover{background:var(--paper-white)}
button.nav__cta{
  appearance:none;border:0;border-radius:0;cursor:pointer;
  font-family:var(--font-mono);font-size:var(--size-label);
  letter-spacing:.14em;text-transform:uppercase;
}
.navmenu button.navmenu__cta{
  appearance:none;border:0;border-radius:0;cursor:pointer;width:100%;
  text-align:left;
  background:var(--roster-orange);color:var(--signal-black);font-weight:600;
  font-family:var(--font-mono);font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;
  padding:var(--sp-5) var(--cell);
}

/* ---------- MODAL (login) ---------- */
.modal{
  position:fixed;inset:0;z-index:95;
  display:grid;place-items:center;
  padding:var(--sp-5);
  background:rgba(10,10,10,.82);
}
.modal__panel{
  position:relative;
  width:min(440px,100%);
  max-height:90svh;overflow-y:auto;
  background:var(--signal-black);
  border:var(--rule-heavy) solid var(--paper-white);
  padding:var(--cell);
  display:flex;flex-direction:column;gap:var(--sp-4);
}
.modal__close{
  position:absolute;top:0;right:0;
  appearance:none;border:0;border-radius:0;cursor:pointer;
  background:var(--paper-white);color:var(--signal-black);
  font-family:var(--font-mono);font-size:var(--size-label);
  letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:6px 10px;
}
.modal__close:hover{background:var(--roster-orange)}
.modal__title{
  margin:0;font-size:clamp(1.5rem,4vw,2.25rem);
  font-weight:700;letter-spacing:-.04em;line-height:.95;text-transform:uppercase;
}
.modal__form{display:flex;flex-direction:column;gap:var(--sp-4)}
.modal__alt{margin:0;font-size:.9375rem;color:var(--interface-gray)}
.modal__alt a{color:var(--paper-white);border-bottom:2px solid var(--roster-orange);text-decoration:none;padding-bottom:1px}

/* a lead that is meant to hold one line where there is room */
.lead--wide{max-width:none}

/* hamburger */
.nav__burger{
  display:none;
  appearance:none;
  background:var(--signal-black);
  color:var(--paper-white);
  border:0;
  border-left:var(--rule) solid var(--hair);
  font-family:var(--font-mono);
  font-size:var(--size-label);
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  align-items:center;
  gap:var(--sp-3);
  padding:0 var(--sp-4);
}
.nav__bars{display:grid;gap:3px;width:18px}
.nav__bars i{display:block;height:2px;background:var(--paper-white)}
.nav__burger[aria-expanded="true"]{background:var(--paper-white);color:var(--signal-black)}
.nav__burger[aria-expanded="true"] .nav__bars i{background:var(--signal-black)}

.navmenu{
  position:fixed;
  top:calc(var(--nav-h) + env(safe-area-inset-top,0px));
  left:0;right:0;
  z-index:59;
  background:var(--signal-black);
  border-bottom:var(--rule-heavy) solid var(--paper-white);
}
.navmenu a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  padding:var(--sp-5) var(--cell);
  text-decoration:none;
  border-bottom:var(--rule) solid var(--hair);
  font-family:var(--font-mono);
  font-size:1rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.navmenu a[aria-current="page"]{color:var(--roster-orange);font-weight:600}
.navmenu a[aria-current="page"]::after{content:"CURRENT"}
.navmenu a:last-child{
  background:var(--roster-orange);
  color:var(--signal-black);
  font-weight:600;
  border-bottom:0;
}

@media (max-width:1100px){
  .nav{grid-template-columns:auto 1fr auto}
  .nav__links,.nav__time,.nav__cta{display:none}
  .nav__burger{display:flex;grid-column:3}
}

/* ---------- STATUS MARKER ---------- */
.status{display:inline-flex;align-items:center;gap:var(--sp-2)}
.status__dot{width:8px;height:8px;background:var(--interface-gray);flex:0 0 auto}
.status--live .status__dot{background:var(--roster-orange);animation:blink 1.6s steps(1,end) infinite}
@keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.15}}

/* ---------- PAGE SHELL ---------- */
.shell{margin-top:calc(var(--nav-h) + env(safe-area-inset-top,0px))}

/* ---------- HERO (home) ---------- */
.hero{border-bottom:var(--rule) solid var(--paper-white)}
.hero__grid{display:grid;grid-template-columns:7fr 5fr;min-height:min(74svh,700px)}
.hero__cell{position:relative;padding:var(--cell);min-width:0}
.hero__cell--head{
  border-right:var(--rule) solid var(--hair);
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-7);
}
.hero__eyebrow{display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.wordmark{
  display:flex;flex-direction:column;
  line-height:.8;font-weight:700;
  font-size:var(--size-display);
  letter-spacing:-.055em;
  text-transform:uppercase;
  margin:0;
}
.wordmark__rule{height:var(--rule-heavy);background:var(--roster-orange);width:64%;margin:var(--sp-5) 0 var(--sp-4)}
.wordmark__sub{font-weight:700;font-size:var(--size-lead);letter-spacing:-.02em;text-transform:uppercase;margin:0}
.hero__foot{display:flex;flex-direction:column;gap:var(--sp-4)}
.hero__note{max-width:58ch;color:var(--interface-gray);font-size:1.0625rem;margin:0}
.hero__jump{display:flex;flex-wrap:wrap;gap:var(--sp-5)}
.hero__jump a{text-decoration:none;border-bottom:2px solid var(--roster-orange);padding-bottom:3px}

.hero__cell--field{padding:0;overflow:hidden;background:var(--deep-gray)}
.hero__canvas{display:block;width:100%;height:100%}
.hero__stamp{
  position:absolute;inset:auto var(--cell) var(--cell) var(--cell);
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-4);
  pointer-events:none;
}
.hero__stamp .mono{background:var(--signal-black);padding:6px 8px}

@media (max-width:860px){
  .hero__grid{grid-template-columns:1fr;min-height:0}
  .hero__cell--head{border-right:0;border-bottom:var(--rule) solid var(--hair);gap:var(--sp-6)}
  .hero__cell--field{min-height:34svh}
}

/* ---------- STATEMENT BAND ---------- */
.band{
  display:grid;
  place-items:center;
  text-align:center;
  padding:clamp(6px,0.9vw,14px) var(--cell);
  border-bottom:var(--rule) solid var(--paper-white);
}
.band h2{
  margin:0;
  font-size:clamp(3.4rem,15.5vw,15rem);
  font-weight:700;
  letter-spacing:-.062em;
  line-height:.76;
  text-transform:uppercase;
  max-width:10ch;
}

/* ---------- PAGE HEADERS ---------- */
.pagehead{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4);
  padding:var(--cell);
  border-bottom:var(--rule) solid var(--paper-white);
}
@media (min-width:860px){.pagehead{grid-template-columns:7fr 5fr;align-items:end}}
.pagehead h1{
  margin:0;
  font-size:var(--size-heading);
  font-weight:700;letter-spacing:-.05em;line-height:.86;
  text-transform:uppercase;text-wrap:balance;
}
.pagehead__meta{display:flex;flex-direction:column;gap:var(--sp-2)}

/* ==========================================================
   MASTHEADS
   ----------------------------------------------------------
   The legal pages proved the formula: a mono kicker, an
   oversized two-line headline with a deliberate break, a
   standfirst in a voice rather than a summary, and a row of
   hard facts in mono. Everything below keeps that skeleton and
   then breaks a different bone on each page, so the six read as
   six issues of one publication rather than six printings of
   one page.

   The variation is structural, not decorative — ground colour,
   column order, where the facts sit, and what the texture is —
   because a masthead that differs only in wording is the thing
   this is fixing.
   ========================================================== */
.mh{
  position:relative;overflow:hidden;
  padding:clamp(28px,4.4vw,64px) var(--cell) clamp(22px,3vw,40px);
  border-bottom:var(--rule-heavy) solid var(--roster-orange);
}
.mh > *{position:relative;z-index:2}

/* texture layers. Both are pure CSS: a masthead must not wait on
   a canvas to look finished, and neither costs a repaint. */
.mh__tex{position:absolute;inset:0;z-index:1;pointer-events:none}
.mh__tex--dots{
  background-image:radial-gradient(var(--roster-orange) 1.4px,transparent 1.5px);
  background-size:7px 7px;opacity:.30;
}
.mh__tex--grid{
  background-image:linear-gradient(var(--hair) 1px,transparent 1px),
                   linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:38px 38px;opacity:.5;
}
.mh__tex--scan{
  background-image:repeating-linear-gradient(0deg,rgba(244,242,237,.05) 0 1px,transparent 1px 3px);
}
.mh__tex--scan-ink{
  background-image:repeating-linear-gradient(0deg,rgba(10,10,10,.07) 0 1px,transparent 1px 3px);
}

.mh__kick{
  font-family:var(--font-mono);font-size:var(--size-label);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--roster-orange);
  margin:0 0 var(--sp-5);
}
.mh__title{
  margin:0;font-weight:700;text-transform:uppercase;
  font-size:var(--size-heading);line-height:.82;letter-spacing:-.055em;
  text-wrap:balance;
}
.mh__title span{display:block}
.mh__stand{
  margin:var(--sp-5) 0 0;max-width:58ch;
  font-size:clamp(1rem,1.5vw,1.125rem);line-height:1.5;
  color:var(--interface-gray);
}
.mh__meta{
  display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6);
  margin-top:var(--sp-6);
  font-family:var(--font-mono);font-size:var(--size-label);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--interface-gray);
}
.mh__meta b{font-weight:600;color:var(--roster-orange)}

/* ---- 01 MISSION — manifesto spread -----------------------
   Paper white, because the mission is the one page that should
   feel printed rather than broadcast. The chapter numeral is
   the structure: it bleeds off the left edge at desktop and the
   headline hangs off it. */
.mh--manifesto{
  background:var(--paper-white);color:var(--signal-black);
  border-bottom-color:var(--signal-black);
}
.mh--manifesto .mh__kick{color:var(--signal-black)}
.mh--manifesto .mh__stand{color:rgba(10,10,10,.68)}
.mh--manifesto .mh__meta{color:rgba(10,10,10,.6)}
.mh--manifesto .mh__meta b{color:var(--signal-black)}
.mh--manifesto .mh__body{display:grid;gap:var(--sp-5)}
.mh__figure{
  font-family:var(--font-num);font-synthesis:none;font-weight:400;
  font-size:clamp(5rem,17vw,15rem);line-height:.68;
  color:var(--roster-orange);
}
@media (min-width:900px){
  /* The figure cell is far shorter than the headline column beside it.
     Pinned to the top it left a hole under the numeral; centred, the
     empty space reads as deliberate. */
  .mh--manifesto .mh__body{grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
  .mh--manifesto .mh__figure{margin-left:calc(var(--cell) * -0.55)}
}

/* ---- 02 STANDARDS — stamped rulebook ---------------------
   A photocopied document header: dot screen, scanlines, and the
   masthead facts pulled out of the meta row into a ruled card,
   the way a real policy sheet carries its own front matter. */
/* Deep gray rather than black: a photocopy is never quite paper and never
   quite ink, and it keeps this page distinct from the two mastheads that
   carry real dithered imagery. */
.mh--stamped{
  background:var(--deep-gray);
  border-top:var(--rule) solid var(--hair);
}
.mh--stamped .mh__card{background:rgba(10,10,10,.55)}
.mh--stamped .mh__body{display:grid;gap:var(--sp-6)}
@media (min-width:900px){
  .mh--stamped .mh__body{grid-template-columns:minmax(0,1fr) 300px;gap:clamp(24px,4vw,56px);align-items:end}
}
.mh__card{
  border:var(--rule) solid var(--hair);
  border-left:var(--rule-heavy) solid var(--roster-orange);
  background:rgba(10,10,10,.72);
}
.mh__card div{
  display:flex;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-4);
  border-bottom:var(--rule) solid var(--hair);
  font-family:var(--font-mono);font-size:var(--size-label);
  letter-spacing:.12em;text-transform:uppercase;
}
.mh__card div:last-child{border-bottom:0}
.mh__card span:first-child{color:var(--interface-gray)}
.mh__card span:last-child{color:var(--paper-white);font-weight:600}

/* ---- 03 OPEN ROSTER — broadcast lower third --------------
   The headline sits on a grid field and the numbers run across
   the foot of the masthead like a score bug. Mint, because the
   roster is the belonging page and that is what mint is for. */
/* The one masthead with real imagery behind the type: a dithered signal
   field, one-bit per the kit, sitting under a black scrim so the headline
   stays legible over it. */
.mh--bug{background:var(--signal-black);padding-bottom:0}
.mh__signal{position:absolute;inset:0;z-index:0;overflow:hidden}
.mh__signal canvas{display:block;width:100%;height:100%;opacity:.5}
.mh__signal::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--signal-black) 0 34%,rgba(10,10,10,.55) 72%,rgba(10,10,10,.3));
}
.mh--bug .mh__strip{position:relative;z-index:2;background:var(--signal-black)}
.mh--bug .mh__strip{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  margin:clamp(24px,3.4vw,44px) calc(var(--cell) * -1) 0;
  border-top:var(--rule-heavy) solid var(--open-roster-mint);
}
@media (min-width:760px){.mh--bug .mh__strip{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mh__bug{
  padding:var(--sp-5) var(--cell);
  border-right:var(--rule) solid var(--hair);
  border-bottom:var(--rule) solid var(--hair);
  display:flex;flex-direction:column;gap:var(--sp-2);
}
@media (min-width:760px){
  .mh__bug{border-bottom:0}
  .mh__bug:last-child{border-right:0}
}
.mh__bug b{
  font-family:var(--font-num);font-synthesis:none;font-weight:400;
  font-size:clamp(2.25rem,5.4vw,4rem);line-height:.84;letter-spacing:0;
}
.mh__bug span{
  font-family:var(--font-mono);font-size:var(--size-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--interface-gray);
}
.mh__bug--live b{color:var(--open-roster-mint)}

/* ---- 04 GIVEAWAY — launch poster -------------------------
   The only orange masthead on the site, and it earns it: orange
   is the action colour and this is the one page asking for an
   action. Black type, oversized, cropped tight. */
.mh--poster{
  background:var(--roster-orange);color:var(--signal-black);
  border-bottom-color:var(--signal-black);
}
.mh--poster .mh__kick,
.mh--poster .mh__meta b{color:var(--signal-black)}
.mh--poster .mh__stand{color:rgba(10,10,10,.76)}
.mh--poster .mh__meta{color:rgba(10,10,10,.68)}
.mh--poster .mh__title{
  font-size:clamp(2.75rem,9.2vw,9rem);letter-spacing:-.06em;line-height:.78;
}
.mh--poster .mh__tex--dots{
  background-image:radial-gradient(var(--signal-black) 1.5px,transparent 1.6px);
  opacity:.22;
}
.mh__slug{
  display:inline-block;margin-top:var(--sp-6);
  background:var(--signal-black);color:var(--roster-orange);
  font-family:var(--font-mono);font-size:var(--size-label);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  padding:var(--sp-3) var(--sp-5);
}

/* ---- 05 STORE — mail-order catalogue ---------------------
   Paper white like the mission page, but turned on its side: a
   narrow title column against a real dithered panel, the way a
   catalogue cover carries one product shot. */
.mh--catalogue{
  background:var(--paper-white);color:var(--signal-black);
  border-bottom-color:var(--signal-black);
  padding:0;
}
.mh--catalogue .mh__body{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){
  .mh--catalogue .mh__body{grid-template-columns:7fr 5fr;align-items:stretch}
}
.mh--catalogue .mh__col{
  padding:clamp(28px,4.4vw,64px) var(--cell) clamp(22px,3vw,40px);
  display:flex;flex-direction:column;justify-content:space-between;
}
.mh--catalogue .mh__kick{color:var(--signal-black)}
.mh--catalogue .mh__stand{color:rgba(10,10,10,.68)}
.mh--catalogue .mh__meta{color:rgba(10,10,10,.6);border-top:var(--rule) solid var(--hair-dark);padding-top:var(--sp-4)}
.mh--catalogue .mh__meta b{color:var(--signal-black)}
.mh__panel{
  position:relative;min-height:200px;background:var(--signal-black);
  border-top:var(--rule) solid var(--signal-black);
}
@media (min-width:860px){
  .mh__panel{border-top:0;border-left:var(--rule) solid var(--signal-black)}
}
.mh__panel canvas{display:block;width:100%;height:100%;position:absolute;inset:0}
.mh__panel figcaption{
  position:absolute;left:0;bottom:0;z-index:2;
  background:var(--paper-white);color:var(--signal-black);
  font-family:var(--font-mono);font-size:var(--size-label);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;padding:var(--sp-2) var(--sp-4);
}

/* ---- 06 GET CALLED UP — intake sheet ---------------------
   Laid out as the top of a paper form: a boxed form number, the
   title, then a row of ruled field cells with their labels
   above the values, exactly as a form prints them. */
/* A form belongs on paper. This is the only masthead whose fields are
   ruled in ink rather than hairline white. */
.mh--intake{
  background:var(--paper-white);color:var(--signal-black);
  padding-bottom:0;
  border-bottom-color:var(--signal-black);
}
.mh--intake .mh__kick{color:var(--signal-black)}
.mh--intake .mh__stand{color:rgba(10,10,10,.72)}
.mh--intake .mh__tex--grid{
  background-image:linear-gradient(rgba(10,10,10,.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(10,10,10,.09) 1px,transparent 1px);
}
.mh--intake .mh__form{
  border-color:var(--signal-black);
  color:var(--signal-black);
  background:rgba(10,10,10,.05);
}
.mh--intake .mh__form b{color:var(--signal-black)}
.mh--intake .mh__fields{border-top-color:rgba(10,10,10,.28)}
.mh--intake .mh__field{
  border-right-color:rgba(10,10,10,.28);
  border-bottom-color:rgba(10,10,10,.28);
}
.mh--intake .mh__field span{color:rgba(10,10,10,.62)}
.mh--intake .mh__field b{border-bottom-color:var(--signal-black)}
.mh--intake .mh__field--open b{color:#0b6440;border-bottom-color:#0b6440}
.mh__form{
  display:inline-flex;align-items:baseline;gap:var(--sp-3);
  border:var(--rule) solid var(--roster-orange);
  padding:var(--sp-2) var(--sp-4);margin-bottom:var(--sp-5);
  font-family:var(--font-mono);font-size:var(--size-label);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--roster-orange);
}
.mh__form b{
  font-family:var(--font-num);font-synthesis:none;font-weight:400;
  font-size:1.5rem;line-height:1;letter-spacing:0;color:var(--paper-white);
}
.mh__fields{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  margin:clamp(24px,3.4vw,44px) calc(var(--cell) * -1) 0;
  border-top:var(--rule) solid var(--hair);
}
@media (min-width:760px){.mh__fields{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mh__field{
  padding:var(--sp-4) var(--cell) var(--sp-5);
  border-right:var(--rule) solid var(--hair);
  border-bottom:var(--rule) solid var(--hair);
  display:flex;flex-direction:column;gap:var(--sp-2);
}
@media (min-width:760px){
  .mh__field{border-bottom:0}
  .mh__field:last-child{border-right:0}
}
.mh__field span{
  font-family:var(--font-mono);font-size:var(--size-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--interface-gray);
}
.mh__field b{
  font-size:1.125rem;font-weight:600;letter-spacing:-.01em;
  border-bottom:var(--rule) solid var(--roster-orange);padding-bottom:var(--sp-2);
}
.mh__field--open b{color:var(--open-roster-mint);border-bottom-color:var(--open-roster-mint)}

/* ---- 07 TAKE A PLAYER NUMBER — ticket stub ----------------
   The page hands out a number, so the masthead is the stub it
   hands you: mint ground because this is the belonging page,
   a perforated edge along the bottom, and the number you are
   about to be given set large on the right. */
.mh--stub{
  background:var(--open-roster-mint);color:var(--signal-black);
  border-bottom:0;
  position:relative;
  padding:0;                       /* each panel now pads itself */
}
.mh--stub::after{
  content:"";position:absolute;left:0;right:0;bottom:-9px;height:18px;z-index:3;
  background:radial-gradient(circle at 9px 9px,var(--signal-black) 7px,transparent 7.5px);
  background-size:26px 18px;background-repeat:repeat-x;
}
.mh--stub .mh__kick{color:rgba(10,10,10,.72)}
.mh--stub .mh__stand{color:rgba(10,10,10,.76)}
/* Two panels rather than a box floating beside the headline. Centring a
   small box in a large empty field is arithmetically correct and still
   looks like an accident; giving the space a job fixes it. The stub runs
   the full height of the masthead and is torn off down its left edge, so
   the space that used to sit empty IS the stub. */
.mh--stub .mh__body{display:grid;align-items:stretch;gap:0}
.mh--stub .mh__lead{padding:clamp(28px,4.4vw,64px) var(--cell) clamp(22px,3vw,40px)}
@media (min-width:860px){
  .mh--stub .mh__body{grid-template-columns:minmax(0,1fr) minmax(260px,31%)}
}
.mh__ticket{
  position:relative;
  border:0;
  background:rgba(244,242,237,.5);          /* paler card stock */
  /* The trio sits as one centred block. Pinning the labels to the top
     and bottom of a panel this tall left the number stranded in the
     middle of its own space. */
  display:grid;grid-template-rows:auto auto auto;
  align-content:center;justify-items:center;
  gap:var(--sp-5);text-align:center;
  padding:clamp(28px,4.4vw,64px) var(--sp-5) clamp(22px,3vw,40px);
}
/* The tear line, cut with the same perforation as the bottom edge. */
.mh__ticket::before{
  content:"";position:absolute;left:-9px;top:0;bottom:0;width:18px;z-index:3;
  background:radial-gradient(circle at 9px 13px,var(--open-roster-mint) 7px,transparent 7.5px);
  background-size:18px 26px;background-repeat:repeat-y;
}
@media (max-width:859px){
  /* Stacked, so the tear line moves to the top edge. */
  .mh__ticket::before{
    left:0;right:0;width:auto;top:-9px;bottom:auto;height:18px;
    background:radial-gradient(circle at 13px 9px,var(--open-roster-mint) 7px,transparent 7.5px);
    background-size:26px 18px;background-repeat:repeat-x;
  }
}
.mh__ticket span{
  font-family:var(--font-mono);font-size:var(--size-label);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
}
.mh__ticket b{
  font-family:var(--font-num);font-synthesis:none;font-weight:400;
  font-size:clamp(5.5rem,10.5vw,13rem);
  line-height:.8;letter-spacing:0;white-space:nowrap;
  /* Hypermonosaturation has no tabular figures — digit widths run from
     232 to 484 units — so a digit count cannot be turned into a width in
     CSS. The number starts at full size and site.js steps it down only
     when it genuinely overflows, which will not happen until the roster
     is five or six digits deep. */
}

/* ---- 08 PARTNER RULES — signed agreement ------------------
   A contract front page: heavy rule at the top, the title set
   tight, and a signature block that says these are agreed to
   rather than merely published. */
/* A signed page: the title stays on ink, the signature block sits on
   paper beside it. The only split-ground masthead on the site. */
.mh--agreement{
  background:var(--signal-black);
  border-top:var(--rule-heavy) solid var(--paper-white);
  padding-right:0;padding-bottom:0;
}
@media (min-width:900px){
  .mh--agreement{padding-bottom:clamp(22px,3vw,40px)}
}
.mh--agreement .mh__body{display:grid;gap:var(--sp-6)}
@media (min-width:900px){
  .mh--agreement .mh__body{grid-template-columns:minmax(0,1fr) 280px;gap:clamp(24px,4vw,64px);align-items:end}
}
.mh__sign{
  background:var(--paper-white);color:var(--signal-black);
  padding:var(--sp-6) var(--cell);
  margin:var(--sp-6) 0 0;
  display:flex;flex-direction:column;gap:var(--sp-3);
}
@media (min-width:900px){
  .mh__sign{margin:0;align-self:stretch;justify-content:flex-end}
}
.mh__sign i{
  display:block;height:44px;
  border-bottom:2px solid var(--signal-black);
  font-family:var(--font-editorial);font-style:italic;font-size:1.5rem;
  color:rgba(10,10,10,.4);padding-left:var(--sp-2);
}
.mh__sign span{
  font-family:var(--font-mono);font-size:var(--size-label);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(10,10,10,.68);
}

/* ---- 09 STREAMING PARTNERS — on-air board -----------------
   A channel board: orange rail down the left, the roster count
   as a live readout, and a row of platform chips so the page
   announces what it is before you scroll. */
.mh--onair{
  background:var(--signal-black);
  border-left:6px solid var(--roster-orange);
  position:relative;overflow:hidden;
}
/* a dithered monitor sitting off the right edge, cropped deliberately */
.mh__monitor{
  position:absolute;right:0;top:0;bottom:0;width:min(46%,520px);z-index:0;
  border-left:var(--rule) solid var(--hair);
  overflow:hidden;
}
.mh__monitor canvas{display:block;width:100%;height:100%;opacity:.42}
.mh__monitor::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--signal-black),rgba(10,10,10,.45) 46%,rgba(10,10,10,.2));
}
@media (max-width:860px){.mh__monitor{display:none}}
.mh--onair .mh__title span:last-child{color:var(--roster-orange)}
.mh__wires{
  display:flex;flex-wrap:wrap;gap:var(--sp-2);
  margin-top:var(--sp-6);
}
.mh__wires span{
  font-family:var(--font-mono);font-size:var(--size-label);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  padding:var(--sp-2) var(--sp-4);
  border:var(--rule) solid var(--hair);color:var(--interface-gray);
}
.mh__wires span.is-live{
  border-color:var(--roster-orange);color:var(--signal-black);
  background:var(--roster-orange);
}

/* ---------- GENERIC SECTIONS ---------- */
.sec{border-bottom:var(--rule) solid var(--hair)}
.sec__head{padding:var(--cell);border-bottom:var(--rule) solid var(--hair)}
.sec__title{
  font-size:clamp(1.75rem,4.5vw,3.5rem);
  font-weight:700;letter-spacing:-.045em;line-height:.92;
  text-transform:uppercase;margin:0;text-wrap:balance;
}
.lead{font-size:var(--size-lead);line-height:1.3;letter-spacing:-.015em;max-width:26ch;margin:0;font-weight:500}
.body{max-width:62ch;margin:0;color:var(--interface-gray)}
/* emphasis inside body copy lifts to full paper white so it actually reads */
.body strong{color:var(--paper-white);font-weight:600}
.body + .body{margin-top:var(--sp-4)}

.split{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){.split{grid-template-columns:2fr 10fr}}
.split__side{padding:var(--cell);border-bottom:var(--rule) solid var(--hair)}
@media (min-width:860px){.split__side{border-bottom:0;border-right:var(--rule) solid var(--hair)}}
/* A side that carries an oversized numeral is centred in its cell; the
   cell is set by the prose beside it and is always much taller than the
   figure. Sides holding only a label stay at the top, where the label
   lines up with the first line of that prose. */
.split__side--figure{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-3);text-align:center;
}
.split__main{padding:var(--cell);display:flex;flex-direction:column;gap:var(--sp-5)}

.cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.cell{
  padding:var(--cell);
  border-right:var(--rule) solid var(--hair);
  display:flex;flex-direction:column;gap:var(--sp-4);
}
.cell:last-child{border-right:0}
@media (max-width:860px){
  .cell{border-right:0;border-bottom:var(--rule) solid var(--hair)}
  .cell:last-child{border-bottom:0}
}
/* ---- three across at every width: the entry paths must be read side by
       side, because the whole point is that the doors are identical ---- */
.cells--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cells--3 .cell{min-width:0}
@media (max-width:860px){
  .cells--3 .cell{
    border-right:var(--rule) solid var(--hair);
    border-bottom:0;
    padding:var(--sp-4) var(--sp-3);
    gap:var(--sp-3);
  }
  .cells--3 .cell:last-child{border-right:0}
  .cells--3 .cell__title{font-size:clamp(.95rem,3.4vw,1.375rem);letter-spacing:-.02em}
  .cells--3 .body{font-size:.9375rem;line-height:1.4;hyphens:auto}
  .cells--3 .btn--inline{width:100%;text-align:center;padding-left:0;padding-right:0}
}

.cell__title{
  font-size:clamp(1.375rem,2.6vw,2rem);
  font-weight:700;letter-spacing:-.035em;text-transform:uppercase;line-height:1;margin:0;
}

/* ---------- PARTNERS ---------- */
.partners{border-bottom:var(--rule) solid var(--paper-white)}
.partners__head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap;
  padding:var(--cell);
  background:var(--roster-orange);
  color:var(--signal-black);
  border-bottom:var(--rule) solid var(--hair);
}
.partners__head h2{
  margin:0;
  font-size:clamp(1.75rem,4.5vw,3.5rem);
  font-weight:700;letter-spacing:-.045em;line-height:.92;text-transform:uppercase;
}
.partners__head .mono{color:var(--signal-black)}

.partner{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){.partner{grid-template-columns:4fr 8fr}}
.partner + .partner{border-top:var(--rule) solid var(--hair)}
.partner__portrait{
  position:relative;aspect-ratio:4/5;max-width:100%;
  border-bottom:var(--rule) solid var(--hair);
  background:var(--deep-gray);overflow:hidden;
}
@media (min-width:860px){
  .partner__portrait{border-bottom:0;border-right:var(--rule) solid var(--hair);aspect-ratio:auto;min-height:440px}
}
.partner__canvas{display:block;width:100%;height:100%}

/* partner number, stamped straight onto the portrait — no plate behind it */
.partner__stamp{
  position:absolute;
  top:var(--cell);
  left:var(--cell);
  color:var(--roster-orange);
  font-family:var(--font-mono);
  font-weight:600;
  font-size:clamp(.9375rem,1.9vw,1.375rem);
  letter-spacing:.18em;
  text-transform:uppercase;
}

.partner__meta{padding:var(--cell);display:flex;flex-direction:column;gap:var(--sp-5);justify-content:center}
.partner__handle{
  font-size:clamp(1.75rem,4.5vw,3.5rem);
  font-weight:700;letter-spacing:-.045em;line-height:.95;margin:0;
}
.partner__rows{display:grid;border-top:var(--rule) solid var(--hair)}
.partner__row{
  display:grid;grid-template-columns:minmax(120px,1fr) 2fr;gap:var(--sp-4);
  padding:var(--sp-3) 0;
  border-bottom:var(--rule) solid var(--hair);
}
.partner__quote{margin:0;max-width:52ch;font-size:1.0625rem;line-height:1.45;color:var(--paper-white)}

/* ---------- OPEN ROSTER PLEDGE (mint) ---------- */
.pledge{
  background:var(--open-roster-mint);
  color:var(--signal-black);
  display:grid;grid-template-columns:minmax(0,1fr);
  border-bottom:var(--rule) solid var(--paper-white);
}
@media (min-width:860px){.pledge{grid-template-columns:5fr 7fr}}
.pledge__cell{padding:var(--cell);display:flex;flex-direction:column;gap:var(--sp-4)}
.pledge__cell + .pledge__cell{border-top:var(--rule) solid var(--signal-black)}
@media (min-width:860px){
  .pledge__cell + .pledge__cell{border-top:0;border-left:var(--rule) solid var(--signal-black)}
}
.pledge .mono{color:var(--signal-black)}
.pledge__title{
  font-size:clamp(1.75rem,4vw,3.25rem);
  font-weight:700;letter-spacing:-.04em;line-height:.92;text-transform:uppercase;margin:0;
}
.pledge__body{margin:0;max-width:56ch;font-size:1.0625rem;line-height:1.55}
.pledge__list{margin:0;padding-left:1.1em;font-family:var(--font-mono);font-size:.9375rem;line-height:1.9}

/* ---------- GIVEAWAY ---------- */
.give{display:grid;grid-template-columns:minmax(0,1fr);border-bottom:var(--rule) solid var(--hair)}
@media (min-width:860px){.give{grid-template-columns:7fr 5fr}}
.give__main{padding:var(--cell);display:flex;flex-direction:column;gap:var(--sp-5)}
/* white cell: prize gallery first, Official Rules beneath it */
.give__legal{
  border-top:var(--rule) solid var(--paper-white);
  background:var(--paper-white);color:var(--signal-black);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-content:start;
}
@media (min-width:860px){.give__legal{border-top:0;border-left:var(--rule) solid var(--paper-white)}}
/* mid widths: gallery left, rules right */
@media (min-width:640px) and (max-width:859px){
  .give__legal{grid-template-columns:1fr 1fr}
}
.give__legal .mono{color:var(--signal-black)}
.give__legal p{margin:0;font-size:.9375rem;line-height:1.5;max-width:52ch}
.give__rules{
  padding:var(--cell);
  display:flex;flex-direction:column;gap:var(--sp-3);
  border-top:var(--rule) solid var(--hair-dark);
}
@media (min-width:640px) and (max-width:859px){
  .give__rules{border-top:0;border-left:var(--rule) solid var(--hair-dark)}
}

/* ---------- PRIZE GALLERY (horizontal scroll) ---------- */
.gallery{
  display:flex;              /* flex, not grid — tracks must not shrink to fit */
  flex-wrap:nowrap;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.gallery::-webkit-scrollbar{display:none}
.gallery__item{
  flex:0 0 50%;              /* two in view; the rest scroll */
  min-width:0;
  position:relative;
  scroll-snap-align:start;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--deep-gray);
  border-right:var(--rule) solid var(--hair-dark);
}
@media (min-width:1500px){
  .gallery__item{flex-basis:33.333%}
}
.gallery__item:last-child{border-right:0}
.gallery__item canvas,.gallery__item img{
  display:block;width:100%;height:100%;object-fit:cover;
}
.gallery__cap{
  position:absolute;
  left:var(--sp-4);bottom:var(--sp-4);
  background:var(--signal-black);
  color:var(--paper-white);
  font-family:var(--font-mono);
  font-size:var(--size-label);letter-spacing:.14em;text-transform:uppercase;
  padding:5px 7px;
}
.gallery__hint{
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);
  padding:var(--sp-3) var(--cell);
  border-bottom:var(--rule) solid var(--hair-dark);
}
.gallery__hint .mono{color:var(--signal-black)}
.gallery__toggle{
  appearance:none;border:0;border-radius:0;cursor:pointer;
  background:transparent;
  color:var(--signal-black);
  font-family:var(--font-mono);
  font-size:var(--size-label);letter-spacing:.14em;text-transform:uppercase;
  border-bottom:2px solid var(--roster-orange);
  padding:0 0 2px;
}
.gallery__toggle:hover{color:var(--roster-orange)}
.gallery__count{font-variant-numeric:tabular-nums}
.give__links{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-2)}
.give__links a{
  font-family:var(--font-mono);font-size:var(--size-label);letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;
  border-bottom:2px solid var(--roster-orange);padding-bottom:2px;
}
.give__deadline{color:var(--roster-orange);font-weight:600}
.give__title{
  font-size:clamp(2rem,6vw,5rem);
  font-weight:700;letter-spacing:-.05em;line-height:.88;text-transform:uppercase;margin:0;text-wrap:balance;
}

/* ---------- PRIZE MANIFEST ---------- */
.prize{display:flex;flex-direction:column}
.prize__head{
  display:flex;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-3) var(--cell);
  color:var(--interface-gray);
  border-bottom:var(--rule) solid var(--hair);
}
.prize__list{margin:0;padding:0;list-style:none;counter-reset:prize}
.prize__row{
  counter-increment:prize;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:baseline;
  gap:var(--sp-4);
  padding:var(--sp-4) var(--cell);
  border-bottom:var(--rule) solid var(--hair);
}
.prize__row::before{
  content:counter(prize,decimal-leading-zero);
  font-family:var(--font-mono);font-size:var(--size-label);
  letter-spacing:.14em;color:var(--interface-gray);
  font-variant-numeric:tabular-nums;
}
.prize__name{
  text-decoration:none;
  border-bottom:1px solid rgba(184,184,179,.45);
  padding-bottom:1px;
}
.prize__name:hover{border-bottom-color:var(--roster-orange);color:var(--roster-orange)}
/* An item with no verified retailer link is not dressed up as one: no
   rule under it, no hover, and the cursor stays the plain arrow. */
.prize__name--plain{border-bottom:0;padding-bottom:0}
.prize__value{
  font-family:var(--font-mono);font-size:1rem;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.prize__line{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--sp-4);
  padding:var(--sp-3) var(--cell);
  color:var(--interface-gray);
  border-bottom:var(--rule) solid var(--hair);
}
.prize__total{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--sp-4);flex-wrap:wrap;
  padding:var(--sp-5) var(--cell);
  border-bottom:var(--rule) solid var(--hair);
  border-left:var(--rule-heavy) solid var(--roster-orange);
}
/* The headline figure — the ARV — in the numeral face. The per-item
   .prize__value column above stays IBM Plex Mono, because that one is a
   column and needs its decimal points to line up. */
.prize__sum{
  font-family:var(--font-num);
  font-synthesis:none;font-weight:400;
  font-size:clamp(1.75rem,4.6vw,3.25rem);
  letter-spacing:0;line-height:1;
}
.prize__note{
  margin:0;padding:var(--cell);
  color:var(--interface-gray);font-size:.9375rem;line-height:1.55;max-width:70ch;
}
.prize__link{
  text-decoration:none;
  border-bottom:2px solid var(--roster-orange);
  padding-bottom:2px;align-self:flex-start;
}

/* ---------- CAMPAIGN DATES ---------- */
.dates{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.date{
  padding:var(--cell);
  display:flex;flex-direction:column;gap:var(--sp-3);
  border-right:var(--rule) solid var(--hair);
}
.date:last-child{border-right:0}
@media (max-width:860px){
  .date{border-right:0;border-bottom:var(--rule) solid var(--hair)}
  .date:last-child{border-bottom:0}
}
.date__when{
  font-size:clamp(1.25rem,2.6vw,1.875rem);
  font-weight:700;letter-spacing:-.035em;line-height:1.05;margin:0;
}
.date__what{margin:0;color:var(--interface-gray);font-size:1rem}

/* two deliberate lines in a page headline */
.h1--lines span{display:block}

/* ---------- RULEBOOK (standards) ---------- */
.rules{display:grid;grid-template-columns:minmax(0,1fr)}
/* Nine identical rows read as terms and conditions. These are house
   rules, so each one gets a numbered plate, a left rail that lights on
   hover, and alternating grounds — the rhythm of a rulebook someone
   actually pinned up, not a contract. */
/* Nine identical rows read as terms and conditions, so each rule gets a
   solid plate carrying its number and the group it belongs to.

   The plate colour follows the group, but the group is ALSO written on the
   plate in words. That is deliberate: the kit forbids carrying information
   by colour alone, and an earlier version used mint rails with nothing to
   explain them, which read as random. Five rules protect people, three
   protect the room, one protects the giveaway.

   Every plate is a brand colour with black type on it, so the number and
   the label stay high-contrast whichever group a rule is in. */
.rule-item{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4);
  padding:var(--cell);
  border-bottom:var(--rule) solid var(--hair);
  transition:background var(--snap) var(--ease-cut);
}
@media (min-width:720px){
  .rule-item{grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start}
}
.rule-item:nth-child(even){background:rgba(244,242,237,.025)}
.rule-item:hover{background:rgba(244,242,237,.05)}

.rule-item__plate{
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);
  padding:var(--sp-3) var(--sp-4) var(--sp-4);
  min-width:118px;
  color:var(--signal-black);
  align-self:flex-start;
}
.rule-item__n{
  font-family:var(--font-num);font-synthesis:none;font-weight:400;
  font-size:clamp(2.5rem,5vw,3.5rem);line-height:.88;letter-spacing:0;
}
.rule-item__cat{
  font-family:var(--font-mono);font-size:var(--size-label);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
}
.rule-item--people .rule-item__plate{background:var(--open-roster-mint)}
.rule-item--room   .rule-item__plate{background:var(--roster-orange)}
.rule-item--give   .rule-item__plate{background:var(--paper-white)}

.rule-item__body{display:flex;flex-direction:column;gap:var(--sp-3)}
.rule-item__t{
  margin:0;font-size:clamp(1.375rem,2.6vw,1.875rem);
  font-weight:700;letter-spacing:-.03em;text-transform:uppercase;line-height:1.05;
}
.rule-item__d{margin:0;color:var(--interface-gray);max-width:62ch}

/* ---- colour key for the rule number plates ----
   The plates carry their category in words already, so this is a
   convenience, not a decoder ring. It exists because three grounds with
   no key invites the question John asked: why is that one orange? */
.legend{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:var(--sp-5) var(--sp-6);
  margin:var(--sp-5) 0 0;
  padding-top:var(--sp-5);
  border-top:var(--rule) solid var(--hair);
}
/* Two rows, not a flex row: dt and dd are siblings, so laying them out
   with flex put the description beside the label instead of under it. */
.legend__key{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:3px var(--sp-3);
  align-items:start;
}
.legend__swatch{
  grid-row:1 / 3;width:22px;height:22px;margin-top:3px;
  border:var(--rule) solid var(--hair);
}
.legend__key--people .legend__swatch{background:var(--open-roster-mint)}
.legend__key--room   .legend__swatch{background:var(--roster-orange)}
.legend__key--give   .legend__swatch{background:var(--paper-white)}
.legend__t{
  grid-column:2;margin:0;font-family:var(--font-mono);font-size:var(--size-label);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.3;
}
.legend__d{grid-column:2;margin:0;font-size:var(--size-label);color:var(--interface-gray);line-height:1.45}

.ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.ladder__step{
  padding:var(--cell);
  border-right:var(--rule) solid var(--hair);
  display:flex;flex-direction:column;gap:var(--sp-3);
}
.ladder__step:last-child{border-right:0}
.ladder__top{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.opt{
  font-family:var(--font-mono);
  font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--interface-gray);
  box-shadow:inset 0 0 0 1px var(--interface-gray);
  padding:2px 6px;
}
/* step names are meant to hold one line */
.ladder--nowrap .cell__title{
  font-size:clamp(1.0625rem,1.9vw,1.5rem);
  white-space:nowrap;
}
@media (max-width:860px){
  .ladder__step{border-right:0;border-bottom:var(--rule) solid var(--hair)}
  .ladder__step:last-child{border-bottom:0}
}

.socials{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.socials a{
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);
  padding:var(--cell);
  text-decoration:none;
  border-right:var(--rule) solid var(--hair);
  border-bottom:var(--rule) solid var(--hair);
  font-family:var(--font-mono);font-size:.9375rem;letter-spacing:.12em;text-transform:uppercase;
  transition:background var(--snap) var(--ease-cut);
}
.socials a:hover{background:var(--deep-gray)}
.socials a span{color:var(--roster-orange)}

/* ---- channel row ----
   Eight equal buttons on one row. The cell borders are drawn with an
   inset shadow rather than border-right, so the grid still closes
   cleanly on the narrower widths where the row has to wrap. Eight
   across a phone would give each button about 45px, which is under the
   touch-target minimum, so it steps down to four and then two. */
/* The row holds 11 cells (9 platforms + two dialog buttons). Eight
   columns left a second row with three filled and five holes in it, so
   the counts below are chosen to divide 11 with at most one gap:
   6x2=12, 4x3=12, 2x6=12. */
.channels{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  border-top:var(--rule) solid var(--hair);
}
/* Fill the one leftover cell so the row still reads as a solid block
   rather than a block with a bite taken out of it. */
.channels > :last-child{grid-column:span 2}
@media (max-width:1180px){.channels > :last-child{grid-column:span 2}}
@media (max-width:560px){.channels > :last-child{grid-column:span 2}}
.channel{
  appearance:none;background:transparent;border:0;border-radius:0;
  box-shadow:inset -1px -1px 0 var(--hair);
  padding:var(--sp-5) var(--sp-3);
  min-height:132px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-3);
  text-align:center;text-decoration:none;color:inherit;font:inherit;
  cursor:var(--cursor-hot),pointer;
  transition:background var(--snap) var(--ease-cut);
}
.channel__mark{color:var(--roster-orange);line-height:0;transition:color var(--snap) var(--ease-cut)}
.channel__mark svg{display:block;width:30px;height:30px}
.channel__name{
  font-family:var(--font-mono);font-size:var(--size-label);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;line-height:1.35;
}
.channel__state{
  font-family:var(--font-mono);font-size:var(--size-label);
  letter-spacing:.1em;text-transform:uppercase;color:var(--interface-gray);
}
.channel:hover,.channel:focus-visible{background:var(--deep-gray)}
.channel:hover .channel__mark,.channel:focus-visible .channel__mark{color:var(--paper-white)}
@media (max-width:1180px){.channels{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.channels{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- partner stream list, inside the channel-row dialog ---- */
.streamlist{display:grid;border-top:var(--rule) solid var(--hair);margin-top:var(--sp-4)}
.streamlist__row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--sp-1) var(--sp-4);align-items:center;
  padding:var(--sp-4) 0;border-bottom:var(--rule) solid var(--hair);
  text-decoration:none;color:inherit;
}
.streamlist__row:hover .streamlist__where{color:var(--roster-orange)}
.streamlist__n{
  grid-column:1/-1;font-size:var(--size-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--interface-gray);
}
.streamlist__who{font-size:1.125rem;font-weight:600;letter-spacing:-.02em}
.streamlist__where{font-size:var(--size-label);letter-spacing:.14em;text-transform:uppercase}

/* ---------- ROSTER DATABASE ---------- */
.roster__bar{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4);
  padding:var(--cell);
  border-bottom:var(--rule) solid var(--hair);
  align-items:center;
}
@media (min-width:700px){.roster__bar{grid-template-columns:2fr 1fr}}
.field{display:flex;flex-direction:column;gap:var(--sp-2)}
.field label{font-family:var(--font-mono);font-size:var(--size-label);letter-spacing:.14em;text-transform:uppercase;color:var(--interface-gray)}
.field input,.field select,.field textarea{
  width:100%;
  background:var(--signal-black);
  color:var(--paper-white);
  border:var(--rule) solid var(--interface-gray);
  border-radius:0;
  padding:var(--sp-3) var(--sp-4);
  font-family:var(--font-mono);
  font-size:1rem;
}
.field textarea{min-height:120px;resize:vertical;line-height:1.5}
.field input[type="file"]{padding:var(--sp-3);cursor:pointer}
.field input[type="file"]::file-selector-button{
  appearance:none;border:0;border-radius:0;cursor:pointer;
  background:var(--paper-white);color:var(--signal-black);
  font-family:var(--font-mono);font-size:var(--size-label);
  letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:var(--sp-2) var(--sp-4);
  margin-right:var(--sp-4);
}
.field input[type="file"]::file-selector-button:hover{background:var(--roster-orange)}
.field__hint--bad{color:var(--roster-orange)}
.field input::placeholder,.field textarea::placeholder{color:#6d6b66}
.field__hint{font-size:.9375rem;color:var(--interface-gray);margin:0}

/* required-but-empty reads orange until it is filled;
   the word "Required" carries the same message without relying on colour */
.req{
  font-family:var(--font-mono);
  font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--roster-orange);
  margin-left:var(--sp-2);
}
.field input:required:invalid,
.field select:required:invalid,
.field textarea:required:invalid{
  border-color:var(--roster-orange);
}

/* radio group */
.field--choice{border:0;padding:0;margin:0;min-width:0}
.field--choice legend{
  padding:0;
  font-family:var(--font-mono);font-size:var(--size-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--interface-gray);
}
.choices{display:flex;flex-wrap:wrap;gap:var(--sp-5);margin:var(--sp-3) 0}
.choice{display:flex;align-items:center;gap:var(--sp-2);font-size:1rem;cursor:pointer}
.choice input{width:18px;height:18px;accent-color:var(--roster-orange);flex:0 0 auto}

.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.slot{
  display:flex;flex-direction:column;gap:var(--sp-3);
  padding:var(--cell);
  border-right:var(--rule) solid var(--hair);
  border-bottom:var(--rule) solid var(--hair);
  min-height:180px;
}
.slot__n{font-family:var(--font-mono);font-size:var(--size-label);letter-spacing:.14em;color:var(--interface-gray)}
.slot__handle{margin:0;font-size:1.375rem;font-weight:700;letter-spacing:-.03em;word-break:break-word}
.slot__meta{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:auto}
.slot--open{background:var(--deep-gray)}
.slot--open .slot__handle{color:var(--interface-gray);font-weight:500}
.slot--filled{border-left:var(--rule-heavy) solid var(--interface-gray)}
.slot--partner{border-left:var(--rule-heavy) solid var(--roster-orange)}
.slot__tag{
  align-self:flex-start;
  background:var(--roster-orange);
  color:var(--signal-black);
  font-family:var(--font-mono);font-weight:600;
  font-size:var(--size-label);letter-spacing:.14em;text-transform:uppercase;
  padding:3px 7px;
}
.slot__tag--locked{background:var(--interface-gray)}

/* The number line reads "PLAYER 1 / PARTNER 001". The separator is
   attached to the partner half, so a card for a player who is not a
   partner ends after the number instead of trailing a slash. Orange
   marks it, but the word PARTNER is what carries the meaning. */
.slot__partner{color:var(--roster-orange);font-weight:600;text-transform:uppercase}
.slot__partner::before{content:" / ";color:var(--interface-gray);font-weight:400}
/* An optional title sits with the handle without competing with it. */
.slot__title{font-size:.78em;font-weight:500;letter-spacing:0;color:var(--interface-gray)}

.slot__claim{
  font-family:var(--font-mono);font-size:var(--size-label);letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;
  border-bottom:2px solid var(--roster-orange);align-self:flex-start;padding-bottom:2px;
}
.roster__empty{padding:var(--cell);color:var(--interface-gray)}

/* ---------- FORMS ---------- */
.form{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media (min-width:860px){.form{grid-template-columns:1fr 1fr}}
.form__cell{
  padding:var(--cell);
  display:flex;flex-direction:column;gap:var(--sp-3);
  border-right:var(--rule) solid var(--hair);
  border-bottom:var(--rule) solid var(--hair);
}
.form__cell--wide{grid-column:1/-1;border-right:0}
.form__actions{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--sp-5);
  align-items:center;
  padding:var(--cell);
  border-bottom:var(--rule) solid var(--hair);
}
@media (min-width:900px){
  .form__actions{grid-template-columns:1fr 1fr 1fr}
  /* the button fills its column, so it matches the two cells beside it
     and still finishes flush with the right edge */
  .form__actions .btn{width:100%}
  .form__actions--two{grid-template-columns:2fr 1fr}
}
/* date of birth, revealed by the 18+ tick */
.confirm{
  margin-top:var(--sp-5);
  padding-left:var(--sp-4);
  border-left:var(--rule-heavy) solid var(--roster-orange);
  max-width:320px;
}
.btn{
  appearance:none;border:0;border-radius:0;cursor:pointer;
  background:var(--roster-orange);color:var(--signal-black);
  font-family:var(--font-mono);font-size:.9375rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:var(--sp-4) var(--sp-6);
}
.btn:hover{background:var(--paper-white)}
a.btn{text-decoration:none;display:inline-block}
/* slim inline button — same mark, less weight */
.btn--inline{
  align-self:flex-start;
  padding:7px var(--sp-4);
  font-size:var(--size-label);
  letter-spacing:.16em;
}
.check{display:flex;gap:var(--sp-3);align-items:flex-start}
.check input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--roster-orange);margin-top:2px}
.check label{font-size:1rem;color:var(--interface-gray);max-width:60ch}
.notice{
  padding:var(--cell);
  border-bottom:var(--rule) solid var(--hair);
  background:var(--deep-gray);
  display:flex;flex-direction:column;gap:var(--sp-2);
}
.notice--ok{border-left:var(--rule-heavy) solid var(--open-roster-mint)}
.notice--wait{border-left:var(--rule-heavy) solid var(--roster-orange)}
.notice p{margin:0;font-size:1rem;color:var(--interface-gray);max-width:62ch}

/* ---------- CHECKLIST ---------- */
.checklist{margin:0;padding:0;list-style:none;display:grid}
.checklist li{
  display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4);
  padding:var(--sp-4) 0;
  border-bottom:var(--rule) solid var(--hair);
  font-size:1rem;
}
.checklist li::before{
  content:"PENDING";
  font-family:var(--font-mono);font-size:var(--size-label);letter-spacing:.14em;
  color:var(--roster-orange);
}

/* ---------- FOOTER ---------- */
.foot{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  border-top:var(--rule-heavy) solid var(--roster-orange);
}
@media (min-width:700px){.foot{grid-template-columns:1fr auto}}
.foot__cell{
  padding:var(--sp-4) var(--cell);
  display:flex;flex-direction:column;gap:var(--sp-1);
  justify-content:center;
  border-bottom:var(--rule) solid var(--hair);
}
@media (min-width:700px){
  .foot__cell{border-bottom:0;border-right:var(--rule) solid var(--hair)}
  .foot__cell:last-child{border-right:0;align-items:flex-end;text-align:right}
}
.foot__line{
  font-size:clamp(1.25rem,3vw,2rem);
  font-weight:700;letter-spacing:-.04em;text-transform:uppercase;
  line-height:1;margin:0;
}
.foot__legal{display:flex;gap:var(--sp-4);flex-wrap:wrap}
.foot__legal a{
  text-decoration:none;
  color:var(--paper-white);
  border-bottom:2px solid var(--roster-orange);
  padding-bottom:2px;
}
.foot__legal a:hover{color:var(--roster-orange)}

/* ---------- COOKIE NOTICE ---------- */
.cookie{
  position:fixed;
  inset:0;
  z-index:90;
  display:grid;
  place-items:center;
  padding:var(--sp-5);
  background:rgba(10,10,10,.82);
}
.cookie__panel{
  width:min(560px,100%);
  max-height:90svh;
  overflow-y:auto;
  background:var(--signal-black);
  border:var(--rule-heavy) solid var(--paper-white);
  padding:var(--cell);
  display:flex;flex-direction:column;gap:var(--sp-4);
}
.cookie__title{
  margin:0;
  font-size:clamp(1.5rem,4vw,2.25rem);
  font-weight:700;letter-spacing:-.04em;line-height:.95;text-transform:uppercase;
}
.cookie__body{margin:0;color:var(--interface-gray);font-size:1rem;max-width:56ch;line-height:1.55}
/* the opt-in half of the notice is the part people need to actually see */
.cookie__body strong{color:var(--paper-white);font-weight:600}
.cookie__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.cookie__more{
  font-family:var(--font-mono);font-size:var(--size-label);
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  color:var(--interface-gray);
  border-bottom:2px solid var(--roster-orange);
  padding-bottom:2px;align-self:flex-start;
}
.btn--ghost{
  background:transparent;
  color:var(--paper-white);
  box-shadow:inset 0 0 0 var(--rule) var(--interface-gray);
}
.btn--ghost:hover{background:var(--deep-gray);color:var(--paper-white)}

/* ---------- KEEP THIS STYLESHEET OUT OF THE DOCUMENTS ----------
   A legal page is the artifact's own document dropped inside the site
   chrome, under a .doc wrapper. The two stylesheets were never merged
   because they disagree at the variable level — but they also share two
   CLASS names, and those leak in the same way:

     .body   site copy here (62ch, interface gray); the whole document
             container there (900px, colour from --ink). Left alone,
             site.css recolours every heading and paragraph in the
             document and clamps the measure to 62ch.
     .sec    a ruled section here; the document's own section heading
             there. The border it sets resolves to garbage anyway,
             because --rule is a width here and a colour inside .doc.

   So hand both back to the document. These rules out-specify site.css's
   own and touch nothing outside a .doc. Any future class shared by both
   stylesheets belongs in this block too. */
.doc .body{
  color:var(--ink);
  max-width:900px;
}
.doc .body strong,
.doc .body b{color:inherit}
.doc .sec{border-bottom:0}

/* ---------- LEGAL PAGES ---------- */
.legal{padding:var(--cell);display:flex;flex-direction:column;gap:var(--sp-5);max-width:72ch}
.legal h2{
  margin:0;font-size:clamp(1.25rem,2.4vw,1.75rem);
  font-weight:700;letter-spacing:-.03em;text-transform:uppercase;
}
.legal p{margin:0;color:var(--interface-gray)}
.legal table{
  width:100%;border-collapse:collapse;
  font-family:var(--font-mono);font-size:.9375rem;
}
.legal th,.legal td{
  text-align:left;padding:var(--sp-3) var(--sp-3) var(--sp-3) 0;
  border-bottom:var(--rule) solid var(--hair);vertical-align:top;
}
.legal th{color:var(--interface-gray);letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.legal__scroll{overflow-x:auto}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ==========================================================
   PAGE CHARACTER
   Shared primitives the six inner pages draw on. Each page uses a
   different subset, so they read as one system without reading as
   copies of each other. Editorial scale, analog friction, visible
   system, controlled colour — the four rules from the guide.
   ========================================================== */

/* ---- full-bleed display line ---- */
.bigline{
  padding:clamp(28px,5vw,64px) var(--cell);
  border-bottom:var(--rule) solid var(--paper-white);
}
.bigline h2,.bigline p{
  margin:0;
  font-size:clamp(2.25rem,9vw,8rem);
  font-weight:700;letter-spacing:-.055em;line-height:.85;
  text-transform:uppercase;text-wrap:balance;
}
.bigline--tight h2{max-width:14ch}
.bigline--orange{background:var(--roster-orange);color:var(--signal-black)}
.bigline--mint{background:var(--open-roster-mint);color:var(--signal-black)}

/* ---- closing calls to action ----
   Elsewhere these links are marked with an orange underline, which works
   on the black grounds. A bigline can sit on orange, where an orange
   underline is invisible and the links collapse into a caption. These
   are the last thing on the page, so they get a box drawn in
   currentColor: it inherits whatever ink the ground already sets, and so
   it cannot disappear on any ground we add later. */
.bigline .hero__jump{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap:var(--sp-4);
  max-width:min(100%,940px);
}
.bigline .hero__jump a{
  border-bottom:0;
  box-shadow:inset 0 0 0 2px currentColor;
  padding:var(--sp-4) var(--sp-5);
  text-align:center;
  font-weight:600;letter-spacing:.14em;
  transition:background var(--snap) var(--ease-cut),color var(--snap) var(--ease-cut);
}
.bigline .hero__jump a:hover,
.bigline .hero__jump a:focus-visible{background:var(--paper-white);color:var(--signal-black)}
.bigline--orange .hero__jump a:hover,
.bigline--orange .hero__jump a:focus-visible{background:var(--signal-black);color:var(--roster-orange)}
.bigline--mint .hero__jump a:hover,
.bigline--mint .hero__jump a:focus-visible{background:var(--signal-black);color:var(--open-roster-mint)}

/* ---- inverted spread: paper ground, black ink ---- */
.invert{
  background:var(--paper-white);
  color:var(--signal-black);
  border-bottom:var(--rule) solid var(--paper-white);
}
.invert .mono{color:var(--signal-black)}
.invert .dim{color:#6f6d68}
.invert .body{color:#3a3936}
.invert .body strong{color:var(--signal-black)}
.invert .sec,.invert .sec__head,.invert .split__side,
.invert .cell,.invert .ladder__step,.invert .rule-item,
.invert .ledger,.invert .ledger__row{
  border-color:var(--hair-dark);
}
.invert .ledger__k{color:#6f6d68}
.invert a{color:var(--signal-black)}
/* Orange on paper is 2.94:1 and on mint no better, so the oversized
   numeral goes to ink on any light ground. It is the largest thing in
   the cell; it should not be the least readable. */
.invert .numeral{color:var(--signal-black)}

/* ---- mint variant of the inverted spread ----
   Mint is the community and accessibility colour, so this belongs on
   content about who is on the roster and what they can have removed —
   never on anything promotional. Only the ground and the muted tones
   move: #6f6d68 and #3a3936 are tuned for paper and go murky on mint. */
.invert--mint{background:var(--open-roster-mint);border-bottom-color:var(--signal-black)}
.invert--mint .dim,.invert--mint .ledger__k{color:#2a4a3a}
.invert--mint .body{color:#1f3a2c}

/* ---- deep-gray spread ----
   A darker step that is still not black, for breaking up a run of black
   sections. The ground is dark, so the light hairlines and the muted
   interface gray already read correctly and nothing else needs moving. */
.deep{background:var(--deep-gray)}

/* ---- oversized chapter numeral (isolated use only) ----
   Hypermonosaturation, with Bodoni behind it: if the face fails to load
   the figure still reads as an editorial numeral rather than falling
   back to the body sans. Optical size wants a touch more room than
   Bodoni did, hence the looser tracking. */
.numeral{
  font-family:var(--font-num);
  font-synthesis:none;font-weight:400;
  font-size:clamp(4.25rem,13.5vw,11.5rem);
  line-height:.74;letter-spacing:.005em;
  color:var(--roster-orange);
}
.numeral--ink{color:var(--signal-black)}

/* ---- stamp block ---- */
.stamp{
  display:inline-flex;align-items:center;gap:var(--sp-3);
  font-family:var(--font-mono);font-size:var(--size-label);
  letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  padding:var(--sp-3) var(--sp-4);
  box-shadow:inset 0 0 0 2px currentColor;
}
.stamp--orange{color:var(--roster-orange)}
.stamp--mint{color:var(--open-roster-mint)}

/* ---- scoreboard: big tabular readouts in a ruled strip ---- */
.scoreboard{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  border-bottom:var(--rule) solid var(--paper-white);
}
.score{
  padding:var(--cell);
  border-right:var(--rule) solid var(--hair);
  display:flex;flex-direction:column;gap:var(--sp-2);
}
.score:last-child{border-right:0}
@media (max-width:760px){
  .score{border-right:0;border-bottom:var(--rule) solid var(--hair)}
  .score:last-child{border-bottom:0}
}
/* Scoreboard readouts are display figures that sit still, so they take
   the numeral face straight. No tabular-nums here — the font has none,
   and asking for a feature that does not exist buys nothing. */
.score__n{
  font-family:var(--font-num);
  font-synthesis:none;font-weight:400;
  font-size:clamp(3rem,7.6vw,5.5rem);
  letter-spacing:0;line-height:.82;
}
.score--live .score__n{color:var(--roster-orange)}
.score__l{font-family:var(--font-mono);font-size:var(--size-label);letter-spacing:.14em;text-transform:uppercase;color:var(--interface-gray)}

/* ---- ledger: ruled data rows ---- */
.ledger{display:grid;border-bottom:var(--rule) solid var(--hair)}
.ledger__row{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--sp-2);
  padding:var(--sp-4) var(--cell);
  border-bottom:var(--rule) solid var(--hair);
}
@media (min-width:760px){
  .ledger__row{grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:var(--sp-5)}
}
.ledger__row:last-child{border-bottom:0}
.ledger__k{font-family:var(--font-mono);font-size:var(--size-label);letter-spacing:.14em;text-transform:uppercase;color:var(--interface-gray);min-width:9ch}
.ledger__v{font-family:var(--font-mono);font-size:.9375rem;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- plus-list: the guide's design commitments ---- */
.plusrow{display:flex;flex-wrap:wrap;gap:var(--sp-3);padding:var(--cell);border-bottom:var(--rule) solid var(--hair)}
.plusrow span{
  font-family:var(--font-mono);font-size:var(--size-label);
  letter-spacing:.14em;text-transform:uppercase;
  padding:var(--sp-2) var(--sp-3);
  box-shadow:inset 0 0 0 1px var(--hair);
}
.plusrow span::before{content:"+ ";color:var(--open-roster-mint)}

/* ---- texture panel ---- */
.texture{position:relative;overflow:hidden;background:var(--deep-gray)}
.texture canvas{display:block;width:100%;height:100%}
.texture__cap{
  position:absolute;left:var(--sp-4);bottom:var(--sp-4);
  background:var(--signal-black);color:var(--paper-white);
  font-family:var(--font-mono);font-size:var(--size-label);
  letter-spacing:.14em;text-transform:uppercase;padding:5px 7px;
}

/* ---- countdown ---- */
.countdown{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:var(--rule) solid var(--signal-black);
}
.countdown div{
  padding:var(--cell) var(--sp-4);
  border-right:var(--rule) solid var(--signal-black);
  text-align:center;
}
.countdown div:last-child{border-right:0}
/* The one place the missing tabular figures actually bite: these digits
   change every second, and a proportional "1" would make the whole row
   twitch sideways on every tick. So site.js wraps each digit in its own
   <i>, and each <i> is a fixed cell wide enough for the widest glyph
   (484/1024em) with a little air. The face stays; the jitter does not.
   If the script never runs the <b> still holds plain text, which simply
   renders proportionally — ugly for a second, never broken. */
.countdown b{
  display:block;
  font-family:var(--font-num);
  font-synthesis:none;font-weight:400;
  font-size:clamp(2rem,6.4vw,4.25rem);
  letter-spacing:0;line-height:.9;
}
.countdown b i{
  display:inline-block;
  width:.56em;
  text-align:center;
  font-style:normal;
}
.countdown span{
  font-family:var(--font-mono);font-size:var(--size-label);
  letter-spacing:.14em;text-transform:uppercase;
}

/* ---- product sheet ---- */
.sheet{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.sheet__item{
  border-right:var(--rule) solid var(--hair-dark);
  border-bottom:var(--rule) solid var(--hair-dark);
  display:flex;flex-direction:column;
}
.sheet__shot{aspect-ratio:1/1;max-width:100%;overflow:hidden;background:var(--deep-gray)}
.sheet__shot canvas{display:block;width:100%;height:100%}
.sheet__meta{padding:var(--cell);display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.sheet__name{margin:0;font-size:1.375rem;font-weight:700;letter-spacing:-.03em;text-transform:uppercase}
.sheet__rows{margin-top:auto;display:grid;border-top:var(--rule) solid var(--hair-dark)}
.sheet__rows div{
  display:flex;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-2) 0;border-bottom:var(--rule) solid var(--hair-dark);
  font-family:var(--font-mono);font-size:.875rem;letter-spacing:.08em;text-transform:uppercase;
}

/* ---- intake sheet numbering ---- */
.intake{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){.intake{grid-template-columns:auto minmax(0,1fr)}}
.intake__n{
  padding:var(--cell);
  border-right:var(--rule) solid var(--hair);
  font-family:var(--font-mono);font-size:1.5rem;letter-spacing:.06em;
  color:var(--roster-orange);font-variant-numeric:tabular-nums;
}
@media (max-width:859px){.intake__n{border-right:0;border-bottom:var(--rule) solid var(--hair);padding-bottom:var(--sp-3)}}
.intake__body{padding:var(--cell);display:flex;flex-direction:column;gap:var(--sp-4)}

/* ---- marquee strip: brand voice, scrolling ----
   Standard marquee direction: the content travels leftwards. Two
   identical sets sit side by side and the track slides exactly one set
   along, so the loop has no visible seam and no JS is needed to keep it
   running. Each set carries its own trailing separator and padding, so
   the two tile perfectly — a gap on the track instead would make
   translateX(-50%) land half a gap short and the join would stutter. */
.strip{
  position:relative;
  overflow:hidden;
  border-bottom:var(--rule) solid var(--paper-white);
  background:var(--deep-gray);
}
.strip__track{
  display:flex;width:max-content;
  animation:strip-scroll 42s linear infinite;
}
.strip__set{
  display:flex;align-items:center;gap:var(--sp-6);
  padding:var(--sp-3) var(--sp-6) var(--sp-3) 0;
  font-family:var(--font-mono);font-size:var(--size-label);
  letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap;
  color:var(--interface-gray);
}
.strip__set b{color:var(--roster-orange);font-weight:600}
@keyframes strip-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
/* Pause on hover, on keyboard focus anywhere in the strip, and on the
   control. WCAG 2.2.2: moving content that starts on its own and runs
   for more than five seconds needs a way to stop it. */
.strip:hover .strip__track,
.strip:focus-within .strip__track,
.strip__track[data-paused="true"]{animation-play-state:paused}
.strip__toggle{
  position:absolute;top:0;right:0;bottom:0;z-index:2;
  appearance:none;border:0;border-radius:0;
  border-left:var(--rule) solid var(--hair);
  background:var(--signal-black);color:var(--interface-gray);
  font-family:var(--font-mono);font-size:var(--size-label);
  letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:0 var(--cell);
  cursor:var(--cursor-hot),pointer;
}
.strip__toggle:hover,.strip__toggle:focus-visible{color:var(--roster-orange)}
/* The track must clear the control, or terms slide under it. */
.strip{padding-right:0}
@media (prefers-reduced-motion:reduce){
  .strip__track{animation:none}
}

/* ---- numbered bands inside a long form, so it reads as an intake sheet ---- */
.form__band{
  grid-column:1/-1;
  display:flex;align-items:baseline;gap:var(--sp-4);flex-wrap:wrap;
  padding:var(--sp-4) var(--cell);
  border-bottom:var(--rule) solid var(--hair);
  background:var(--deep-gray);
}
.form__band b{
  font-family:var(--font-mono);font-size:1.25rem;
  color:var(--roster-orange);font-variant-numeric:tabular-nums;
}
.form__band span{
  font-family:var(--font-mono);font-size:var(--size-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--interface-gray);
}

/* ---- enforcement ladder: steps 1-3 stack on the left, removal owns the
       whole right-hand column so it reads as a different category ---- */
@media (min-width:760px){
  .ladder--grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:repeat(3,auto);
  }
  .ladder--grid .ladder__step{
    border-right:var(--rule) solid var(--hair);
    border-bottom:var(--rule) solid var(--hair);
  }
  .ladder--grid .ladder__step:nth-child(3){border-bottom:0}
  .ladder--grid .ladder__step--max{
    grid-column:2;
    grid-row:1 / span 3;
    border-right:0;
    border-bottom:0;
    border-top:0;
    border-left:var(--rule-heavy) solid var(--signal-black);
    justify-content:center;
    gap:var(--sp-5);
  }
}
.ladder__step--max{
  background:var(--roster-orange);
  color:var(--signal-black);
  border-top:var(--rule-heavy) solid var(--signal-black);
}
.ladder__step--max .cell__title{
  font-size:clamp(1.75rem,4.4vw,3.25rem);
  letter-spacing:-.045em;
}
.ladder__step--max .body,
.ladder__step--max .mono,
.ladder__step--max .dim{color:var(--signal-black)}
.ladder__step--max .body strong{color:var(--signal-black)}
.ladder__step--max .opt{
  color:var(--signal-black);
  box-shadow:inset 0 0 0 1px var(--signal-black);
  font-weight:600;
}
.ladder__step--max .ladder__hard{
  font-family:var(--font-mono);font-size:var(--size-label);
  letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  background:var(--signal-black);color:var(--roster-orange);
  padding:var(--sp-2) var(--sp-3);align-self:flex-start;
}

/* ---------- GIVEAWAY ENTRY ROUTES ----------
   Two cards under the clock: one route that is not open yet and one
   that is. The difference has to be legible at a glance and not by
   colour alone, so the live one carries a filled tag and a real
   button while the other is visibly inert. */
.routes{
  display:grid;grid-template-columns:minmax(0,1fr);
  border-bottom:var(--rule) solid var(--hair);
}
@media (min-width:760px){.routes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.route{
  padding:var(--cell);
  display:flex;flex-direction:column;gap:var(--sp-3);
  border-bottom:var(--rule) solid var(--hair);
}
@media (min-width:760px){
  .route{border-bottom:0;border-right:var(--rule) solid var(--hair)}
  .route:last-child{border-right:0}
}
.route__tag{
  font-family:var(--font-mono);font-size:var(--size-label);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  align-self:flex-start;padding:var(--sp-2) var(--sp-3);
}
.route__t{
  margin:0;font-size:clamp(1.5rem,3vw,2.25rem);
  font-weight:700;letter-spacing:-.035em;text-transform:uppercase;line-height:1;
}
.route__d{margin:0;color:var(--interface-gray);max-width:46ch}
.route__btn{
  appearance:none;border:0;cursor:pointer;margin-top:auto;align-self:flex-start;
  font-family:var(--font-mono);font-size:var(--size-label);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  padding:var(--sp-4) var(--sp-6);
  transition:transform var(--snap) var(--ease-cut);
}
.route__btn:hover{transform:translateY(-2px)}

/* not open yet: dimmed, inert, and it says so in words */
.route--soon{background:var(--deep-gray)}
.route--soon .route__tag{background:var(--interface-gray);color:var(--signal-black)}
.route--soon .route__t{color:var(--interface-gray)}
.route__btn--off{
  background:transparent;color:var(--interface-gray);cursor:not-allowed;
  box-shadow:inset 0 0 0 var(--rule) var(--interface-gray);
}
.route__btn--off:hover{transform:none}

/* open now: mint, because this is the free-and-fair route */
.route--live{background:var(--open-roster-mint);color:var(--signal-black)}
.route--live .route__tag{background:var(--signal-black);color:var(--open-roster-mint)}
.route--live .route__d{color:rgba(10,10,10,.74)}
.route--live .route__btn{background:var(--signal-black);color:var(--open-roster-mint)}
.route--live .mono{background:rgba(10,10,10,.09);padding:1px 5px}

/* the masthead CTA, on the orange poster ground */
.mh__slug--go{
  appearance:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:var(--sp-4);
  transition:transform var(--snap) var(--ease-cut);
}
.mh__slug--go:hover{transform:translateY(-2px)}

/* ---------- HUMAN CHECK ---------- */
.field--human{
  border-left:var(--rule-heavy) solid var(--open-roster-mint);
  padding-left:var(--sp-4);
}
.human__q{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);
  margin:0;font-size:1.0625rem;font-weight:600;
}
.human__new{
  appearance:none;background:transparent;border:0;cursor:pointer;
  font-family:var(--font-mono);font-size:var(--size-label);
  letter-spacing:.12em;text-transform:uppercase;color:var(--interface-gray);
  border-bottom:var(--rule) solid var(--interface-gray);padding:0 0 1px;
}
.human__new:hover{color:var(--open-roster-mint);border-bottom-color:var(--open-roster-mint)}
[data-human-msg].is-bad{color:var(--roster-orange)}
[data-human-msg].is-good{color:var(--open-roster-mint)}
.modal__panel--wide{max-width:min(92vw,720px)}
.form__row{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
@media (min-width:560px){.form__row{grid-template-columns:2fr 1fr 1fr}}
.btn--wide{width:100%;justify-content:center;text-align:center}

/* a tighter plusrow for use inside a split column rather than full-bleed */
.plusrow--tight{margin-top:var(--sp-5);padding:0;border:0;gap:var(--sp-2)}
.plusrow--tight span{font-size:var(--size-label);padding:var(--sp-2) var(--sp-3)}

/* ==================================================================
   FORM STATUS + COMPLETION
   Every form now reports back in place rather than navigating away.
   Colour alone never carries the meaning: the wording says what
   happened, and the left rule is a second, redundant signal.
   ================================================================== */
.form__status{
  margin:var(--sp-4) 0 0;
  padding:12px 16px;
  border-left:4px solid var(--interface-gray);
  background:rgba(10,10,10,.04);
  font-size:15px;
  line-height:1.55;
  max-width:68ch;
}
.form__status[data-kind="error"]{
  border-left-color:var(--roster-orange);
  background:rgba(255,79,18,.08);
  font-weight:600;
}
.form__status[data-kind="ok"]{
  border-left-color:var(--open-roster-mint);
  background:rgba(152,245,197,.20);
}
.invert .form__status{background:rgba(244,242,237,.08)}
.invert .form__status[data-kind="error"]{background:rgba(255,79,18,.18)}
.invert .form__status[data-kind="ok"]{background:rgba(152,245,197,.14)}

/* The submit button while a request is in flight. */
.form button[disabled],.modal__form button[disabled]{
  opacity:.6;cursor:progress;
}

/* Shown in place of the signup form once a number has been claimed. */
.form__done{
  margin:var(--sp-5) 0 0;
  padding:clamp(20px,3vw,36px);
  background:var(--open-roster-mint);
  color:var(--signal-black);
  border:1px solid var(--signal-black);
}
.form__done .dim{color:#2a4a3a}
.form__done h3{
  font-size:clamp(1.6rem,3.4vw,2.6rem);
  line-height:1.05;letter-spacing:-.03em;
  margin:var(--sp-2) 0 var(--sp-3);
}
.form__done p{max-width:58ch;margin:0 0 var(--sp-3);color:#1f3a2c}
.form__done p:last-child{margin-bottom:0}
.form__done .btn{
  display:inline-block;margin:0 var(--sp-2) var(--sp-2) 0;
  padding:12px 20px;font-weight:700;
  background:var(--signal-black);color:var(--paper-white);
  text-decoration:none;
}
.form__done .btn--ghost{
  background:transparent;color:var(--signal-black);
  box-shadow:inset 0 0 0 2px var(--signal-black);
}
.form__done .btn:hover,.form__done .btn:focus-visible{
  background:var(--roster-orange);color:var(--paper-white);
}

/* Nav cell once signed in: shows PLAYER n instead of LOG IN. */
.nav__cta[data-signed-in="true"]{
  background:var(--open-roster-mint);
  color:var(--signal-black);
}

/* A signup finished by email confirmation lands the user on whatever
   page the link opens, with no form in sight. This says what happened. */
.claimed-bar{
  position:sticky;top:0;z-index:90;
  padding:14px var(--cell);
  background:var(--open-roster-mint);color:var(--signal-black);
  border-bottom:1px solid var(--signal-black);
  font-size:15px;line-height:1.5;
  transition:opacity .6s ease;
}
.claimed-bar b{font-weight:700}
.claimed-bar[data-kind="error"]{
  background:var(--roster-orange);color:var(--paper-white);font-weight:600;
}
.claimed-bar[data-fade="true"]{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .claimed-bar{transition:none}
  .claimed-bar[data-fade="true"]{opacity:1}
}

/* This week's entry phrase, published on the giveaway page because the
   Official Rules say it is. Read from the database, never hard-coded. */
.phrase-now{
  display:flex;flex-direction:column;gap:4px;
  margin:0 0 var(--sp-3);padding:14px 18px;
  background:var(--open-roster-mint);color:var(--signal-black);
  border:1px solid var(--signal-black);
}
.phrase-now .dim{color:#2a4a3a;font-size:11px;letter-spacing:.18em}
.phrase-now b{
  font-size:clamp(1.15rem,2.6vw,1.7rem);font-weight:700;
  letter-spacing:-.01em;line-height:1.15;
}
/* No live phrase: not a shout, just a statement. Mint means community
   and belonging in this system, so an unavailable state drops to paper. */
.phrase-now[data-kind="none"]{
  background:var(--paper-white);color:var(--deep-gray);
}
.phrase-now[data-kind="none"] b{
  font-size:15px;font-weight:600;
}
.invert .phrase-now[data-kind="none"]{
  background:var(--deep-gray);color:var(--paper-white);
}


/* Account page: standing badges. Each carries its own word, so the
   colour is a second signal and never the only one. */
.badges{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-4)}
.badge{
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;
  background:var(--signal-black);color:var(--paper-white);
}
.badge--partner{background:var(--roster-orange);color:var(--paper-white)}
.badge--locked{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.invert--mint .badge{background:var(--signal-black);color:var(--open-roster-mint)}

/* The entry ledger before it has anything to report. */
#acctEntries[data-state="loading"] .ledger__v,
#acctEntries[data-state="closed"]  .ledger__v{opacity:.45}

/* The phrase is compared byte-for-byte, so how it LOOKS has to be how it
   IS. text-transform would change the letters on screen without changing
   the value — someone would copy what they see and be told it is wrong.
   Nothing is allowed to restyle the characters here. */
.phrase-now b{
  text-transform:none !important;
  font-variant:normal !important;
  font-feature-settings:normal;
  /* Normal text selection, not select-all-on-click. The phrase has to be
     typed, so a one-click grab of the whole string is the copy shortcut
     by another name. */
  cursor:text;
  word-break:break-word;
}
/* .phrase-copy removed: the entry phrase is typed, never pasted. */

/* Back to the public site from a backend page. These are sub-pages of
   2sg.us, not a separate application. */
/* The 2SG mark in a backend header is the way home. No extra button —
   the wordmark is the affordance, the way it is everywhere else. */
a.lg{cursor:pointer;transition:color .12s}
a.lg:hover,a.lg:focus-visible{color:var(--roster-orange)}

/* Whether this account may enter. Carries its own words, so the colour
   is a second signal rather than the only one. */
.elig{
  margin:0 0 var(--sp-4);padding:12px 16px;
  border-left:4px solid var(--open-roster-mint);
  background:rgba(152,245,197,.14);
  font-size:14.5px;line-height:1.55;max-width:74ch;
}
.elig[data-can="no"]{
  border-left-color:var(--roster-orange);
  background:rgba(255,79,18,.10);
  font-weight:600;
}

/* Back to your own profile from the control room, beside the role chip. */
.backlink{
  font-family:var(--mono,ui-monospace,monospace);
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:inherit;
  border:1px solid currentColor;padding:5px 10px;margin-left:10px;
  white-space:nowrap;
}
.backlink:hover,.backlink:focus-visible{
  background:var(--roster-orange);border-color:var(--roster-orange);color:var(--paper-white);
}

/* ==================================================================
   SCROLLBAR
   The browser default is a light grey rail that sits badly against a
   near-black page. Tuned to the brand instead: the track disappears
   into the ground and the thumb reads as a rule rather than a widget.
   Firefox gets the standard property, WebKit gets the pseudo-elements;
   both keep the bar present and grabbable, since hiding it entirely
   loses the one cue that tells you how much page is left.
   ================================================================== */
html{
  scrollbar-width:thin;
  scrollbar-color:#3A3A38 transparent;
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:#3A3A38;
  border:3px solid transparent;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:var(--roster-orange);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

/* Paper-ground pages need the reverse: a dark thumb would shout. */
.invert--mint ::-webkit-scrollbar-thumb,
[data-ground="paper"] ::-webkit-scrollbar-thumb{background:#C9C6BE;background-clip:content-box}

/* Signed-in account strip in the footer, on every page. */
.foot__account{
  display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;
  padding:var(--sp-3) var(--cell);
  border-top:1px solid var(--hair);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
}
.foot__account a{color:inherit;text-decoration:none;opacity:.8}
.foot__account a:hover,.foot__account a:focus-visible{opacity:1;color:var(--roster-orange)}
.foot__account button{
  appearance:none;background:transparent;color:inherit;font:inherit;
  border:1px solid currentColor;padding:5px 10px;cursor:pointer;
}
.foot__account button:hover,.foot__account button:focus-visible{
  background:var(--roster-orange);border-color:var(--roster-orange);color:var(--paper-white);
}
.foot__account button[disabled]{opacity:.5;cursor:progress}