/* Z3R0B3A7 brand layer: the tokens and furniture every page shares.
 *
 * These rules were copy-pasted into all seven pages, and roster.html
 * carried the note "Brand tokens mirror index.html; keep the family in
 * sync": a manual sync burden that only ever grows. One file now, and
 * every value below was verified byte-identical across every page that
 * defined it before the move (no page's appearance changes).
 *
 * WHAT BELONGS HERE: the palette, the display font, the scanline
 * overlay, the header/nav/wordmark furniture, and the reduced-motion
 * opt-out. WHAT DOES NOT: anything one page invents. Page-specific
 * tokens (--panel, --purple-dim, the map's own scales) stay in that
 * page's <style>, and a page may still override any token below by
 * redeclaring it in its own :root.
 *
 * Load order matters: link this BEFORE the page's own <style> so the
 * page wins on anything it redefines.
 */

@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/vt323.woff2') format('woff2');
}

:root {
  /* ground + structure */
  --ground: #07090d;
  --line: #1a2130;
  --panel: #0c0f16;
  /* 3CH0 answers, and climbs red; NU11 nulls, and dives blue. The
     -bright pair is for text on the dark ground, where the base hues
     do not carry enough contrast. */
  --red: #ff4538;
  --red-bright: #ff8a80;
  --blue: #0033a0;
  --blue-bright: #3a6ff0;
  /* the Undertone: neither side's color */
  --purple: #7a68c9;
  --purple-bright: #c3b8f5;
  /* type, from most to least present */
  --flat: #96a3b4;
  --dim: #768498;
  --faint: #697c92;
  --ok: #5dca85;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--flat);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
}

/* The scanline wash. Fixed and pointer-events:none so it sits over
   everything without ever eating a click. z-index 9 keeps it under the
   things that must stay legible above it (popovers sit higher). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  background: repeating-linear-gradient(
    0deg, transparent 0 2px, rgba(255, 255, 255, .012) 2px 3px);
}

header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: .8rem;
}

.wordmark {
  font-family: 'VT323', var(--mono);
  font-size: 1.9rem;
  letter-spacing: .08em;
  color: var(--flat);
  text-decoration: none;
}
.wordmark .e { color: var(--red); }
.wordmark .n { color: var(--blue-bright); }

/* The HEADER nav specifically: the row of page links that sits to the
   right of the wordmark. Scoped to `header nav` rather than bare `nav`
   because these rules are furniture for that one arrangement, and a
   bare element selector silently reaches every other nav on the site.
   It did: the landing page's centred splash nav is also a <nav>, so it
   inherited `margin-left: 1.1em` on each link, which both inflated its
   gaps and pushed the whole centred row off-centre by half a margin.
   A rule this broad should say where it applies. */
header nav {
  margin-left: auto;
  font-size: .75rem;
  letter-spacing: .15em;
}
header nav a {
  color: var(--dim);
  text-decoration: none;
  margin-left: 1.1em;
  text-transform: uppercase;
}
header nav a:hover,
header nav a.here { color: var(--flat); }

/* Respect the OS setting. Every page carried its own copy of this. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* "On this page" (toc.js): the page's own h2s as a list. A phone gets a
   folded box under the heading; from 980px up the list moves into the
   right column the text measure leaves empty, sticky, with the section
   in view marked. Only pages that include toc.js get any of this. */
.toc { margin: 1.1rem 0 1.6rem; }
.toc details { border: 1px solid var(--line); border-radius: 6px; padding: .55rem .95rem; }
.toc summary { cursor: pointer; list-style: none; font-size: .68rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--dim); }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::before { content: "\25B8 "; color: var(--flat); }
.toc details[open] > summary::before { content: "\25BE "; }
.toc ol { list-style: none; margin: .7rem 0 0; padding: 0; }
.toc li { margin: .38rem 0; font-size: .8rem; line-height: 1.45; }
.toc a { color: var(--dim); text-decoration: none; }
.toc a:hover, .toc a.here { color: var(--flat); }
main h2 { scroll-margin-top: 1rem; }
@media (min-width: 980px) {
  main.has-toc { display: grid; grid-template-columns: minmax(0, 1fr) 14rem;
    column-gap: 3rem; align-items: start; }
  main.has-toc > * { grid-column: 1; }
  main.has-toc > .toc { grid-column: 2; grid-row: 1 / span 600; position: sticky;
    top: 1.2rem; margin: 1.45rem 0 0; align-self: start;
    max-height: calc(100vh - 2.4rem); overflow: auto; }
  .toc details { border: none; padding: 0; }
  .toc summary { pointer-events: none; }
  .toc summary::before, .toc details[open] > summary::before { content: ""; }
}