@charset "UTF-8";
/* ============================================================================
   IPSC IT FEST 2026 — STYLESHEET
   Design system carried forward from the 2026 v2 concept sheet.
   Palette, type and rule weights are unchanged; everything else extends them
   across a multi-page site.

   The device is Archivo's WIDTH axis. Headings run expanded (wdth 112–124),
   labels run condensed (wdth 72–82). Weight is secondary. Nothing here is
   decorative: the drafting grid, the hairline rules and the sheet numbering
   are the vocabulary of an engineering drawing, which is what the events are.
   ========================================================================== */

/* ── 1. TOKENS ───────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* Sheet — the paper the drawing sits on */
  --sheet:      #EEF0EA;
  --sheet-deep: #E2E6DC;
  --sheet-hi:   #F6F7F3;

  /* Ink — the marks on it */
  --ink:        #171C1A;
  --ink-soft:   #5A625B;
  --ink-faint:  #8B938A;

  /* Rules — the hairlines */
  --rule:       #C3CABD;
  --rule-soft:  #D8DDD2;

  /* Signal — spent in exactly one place at a time */
  --signal:     #E0004D;
  --signal-ink: #FFFFFF;

  /* Field — the inverted band */
  --field:      #16211F;
  --field-2:    #23302D;
  --field-ink:  #EEF0EA;
  --field-rule: rgba(238, 240, 234, 0.22);

  /* Grid overlay opacity */
  --grid-a:     0.030;

  --font: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --rail: 76px;
  --bar:  58px;
  --pad:  clamp(20px, 4.5vw, 64px);
  --band: clamp(64px, 8vw, 116px);
  --measure: 64ch;
}

/* Dark is the same drawing on drafting film rather than paper. It is built
   from --field, which is already in the palette; no new hues are introduced.
   Light is the default for everyone, whatever their system setting; dark
   applies only once a visitor chooses it with the theme button. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --sheet:      #121A18;
  --sheet-deep: #0D1413;
  --sheet-hi:   #18211F;
  --ink:        #E8EBE4;
  --ink-soft:   #9AA398;
  --ink-faint:  #6E776D;
  --rule:       #2C3733;
  --rule-soft:  #212B28;
  --signal:     #FF3D6E;
  --signal-ink: #10100F;
  --field:      #0A100F;
  --field-2:    #16211F;
  --field-ink:  #E8EBE4;
  --field-rule: rgba(232, 235, 228, 0.18);
  --grid-a:     0.055;
}

/* ── 2. RESET ────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: none;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar) + 16px);
}

body {
  font-family: var(--font);
  font-variation-settings: 'wdth' 100, 'wght' 400;
  background-color: var(--sheet);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  background-image:
    linear-gradient(rgba(127, 137, 130, var(--grid-a)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 137, 130, var(--grid-a)) 1px, transparent 1px);
  background-size: 44px 44px;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--signal); color: var(--signal-ink); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.skip {
  position: absolute; top: -60px; left: 12px; z-index: 999;
  background: var(--signal); color: var(--signal-ink);
  padding: 10px 16px; font-size: 12px; transition: top .2s;
}
.skip:focus { top: 12px; }

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

/* ── 3. TYPE ─────────────────────────────────────────────────────────────── */

.exp  { font-variation-settings: 'wdth' 118, 'wght' 600; }
.cond { font-variation-settings: 'wdth' 76,  'wght' 500; }

.annot {
  font-variation-settings: 'wdth' 76, 'wght' 600;
  font-size: 11px;
  letter-spacing: 0.09em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.annot--sig { color: var(--signal); }

.h-page {
  font-variation-settings: 'wdth' 120, 'wght' 660;
  font-size: clamp(38px, 6.4vw, 82px);
  line-height: 0.94;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.h-section {
  font-variation-settings: 'wdth' 116, 'wght' 620;
  font-size: clamp(28px, 4.2vw, 50px);
  line-height: 1.03;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.h-sub {
  font-variation-settings: 'wdth' 110, 'wght' 620;
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.18;
  letter-spacing: -0.016em;
  text-wrap: balance;
}

.lede {
  font-size: clamp(15px, 1.5vw, 17.5px);
  line-height: 1.72;
  color: var(--ink-soft);
  max-width: 60ch;
}
.lede strong { color: var(--ink); font-variation-settings: 'wdth' 100, 'wght' 650; }

.prose { max-width: var(--measure); }
.prose p { font-size: 14.75px; line-height: 1.75; color: var(--ink-soft); }
.prose p + p { margin-top: 14px; }
.prose strong { color: var(--ink); font-variation-settings: 'wdth' 100, 'wght' 650; }
.prose a { color: var(--signal); border-bottom: 1px solid currentColor; }

/* ── 4. SHELL, RAIL, BAR ─────────────────────────────────────────────────── */

.shell { padding-left: var(--rail); }
@media (max-width: 1023px) { .shell { padding-left: 0; } }

.band { padding: var(--band) var(--pad); position: relative; }
.band + .band { border-top: 1px solid var(--rule); }
.band--tight { padding-top: clamp(38px, 5vw, 64px); padding-bottom: clamp(38px, 5vw, 64px); }
.band--sheet { background: var(--sheet-hi); }

.rail {
  position: fixed; inset: 0 auto 0 0;
  width: var(--rail);
  border-right: 1px solid var(--rule);
  background: var(--sheet-deep);
  z-index: 60;
  display: flex; flex-direction: column; align-items: center;
  padding: 18px 0 20px;
}
@media (max-width: 1023px) { .rail { display: none; } }

.rail-mark {
  writing-mode: vertical-rl;
  font-variation-settings: 'wdth' 72, 'wght' 700;
  font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 22px;
}
.rail-nav { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.rail-link {
  position: relative;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  height: 38px; padding-right: 12px;
  color: var(--ink-faint);
  transition: color .25s var(--ease);
}
.rail-link .tick { width: 16px; height: 1px; background: currentColor; transition: width .3s var(--ease); }
.rail-link .ref {
  font-variation-settings: 'wdth' 74, 'wght' 700;
  font-size: 10px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
}
.rail-link:hover { color: var(--ink); }
.rail-link:hover .tick { width: 24px; }
.rail-link[aria-current="page"] { color: var(--signal); }
.rail-link[aria-current="page"] .tick { width: 28px; height: 2px; }

.rail-name {
  position: absolute; left: calc(100% + 10px);
  white-space: nowrap;
  font-variation-settings: 'wdth' 76, 'wght' 600;
  font-size: 11px; letter-spacing: 0.06em;
  background: var(--ink); color: var(--sheet);
  padding: 4px 9px;
  opacity: 0; transform: translateX(-4px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.rail-link:hover .rail-name { opacity: 1; transform: translateX(0); }
.rail-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rail-pos {
  writing-mode: vertical-rl;
  font-variation-settings: 'wdth' 72, 'wght' 600;
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}

.bar {
  position: sticky; top: 0; z-index: 55;
  min-height: var(--bar);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--pad);
  background: color-mix(in srgb, var(--sheet) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.bar-mark { font-variation-settings: 'wdth' 112, 'wght' 700; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; }
.bar-mark span { color: var(--signal); }
.bar-mark .crest { height: 32px; vertical-align: middle; margin-right: 10px; }

/* School crest. Black ink on the sheet, white on drafting film; the swap
   follows the same three rules as the colour tokens in section 1. */
.crest { display: inline-flex; flex: none; }
.crest img { height: 100%; width: auto; }
.crest-dark { display: none; }
:root[data-theme="dark"] .crest-light { display: none; }
:root[data-theme="dark"] .crest-dark { display: block; }
.bar-right { display: flex; align-items: center; gap: 14px; }
.bar-date {
  font-variation-settings: 'wdth' 76, 'wght' 600;
  font-size: 11.5px; letter-spacing: 0.06em; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) { .bar-date { display: none; } }

.bar-icon {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 32px; padding: 0 10px;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-variation-settings: 'wdth' 74, 'wght' 650;
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  transition: border-color .2s, color .2s;
}
.bar-icon:hover { border-color: var(--ink); color: var(--ink); }
.bar-icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.bar-icon kbd {
  font: inherit; font-size: 10px; letter-spacing: 0.04em;
  color: var(--ink-faint); border: 1px solid var(--rule-soft); padding: 1px 4px;
}
@media (max-width: 620px) { .bar-icon kbd, .bar-icon .bar-icon-t { display: none; } }

.bar-menu {
  display: none;
  font-variation-settings: 'wdth' 76, 'wght' 700;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 9px 12px; border: 1px solid var(--rule);
}
@media (max-width: 1023px) { .bar-menu { display: block; } }

/* ── 5. DRAWER ───────────────────────────────────────────────────────────── */

.drawer {
  position: fixed; inset: 0; z-index: 80;
  background: var(--sheet);
  padding: calc(var(--bar) + 24px) var(--pad) var(--pad);
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
  transform: translateY(-100%); visibility: hidden;
  transition: transform .45s var(--ease-io), visibility .45s;
}
.drawer.open { transform: translateY(0); visibility: visible; }
.drawer a {
  font-variation-settings: 'wdth' 112, 'wght' 620;
  font-size: clamp(24px, 7vw, 38px); letter-spacing: -0.02em;
  padding: 11px 0; border-bottom: 1px solid var(--rule);
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
}
.drawer a em {
  font-style: normal; font-variation-settings: 'wdth' 74, 'wght' 600;
  font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.drawer a[aria-current="page"] { color: var(--signal); }
.drawer-close {
  position: absolute; top: 0; right: var(--pad); height: var(--bar);
  font-variation-settings: 'wdth' 76, 'wght' 700;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}

/* ── 6. BUTTONS ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-variation-settings: 'wdth' 82, 'wght' 700;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 14px 22px; border: 1px solid var(--ink);
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s;
}
.btn-fill { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.btn-fill:hover { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
.btn-line { color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--sheet); }
.btn-sm { padding: 10px 16px; font-size: 11px; }
.btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: none; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 7px;
  font-variation-settings: 'wdth' 76, 'wght' 650;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule); padding-bottom: 3px;
  transition: color .2s, border-color .2s;
}
.btn-ghost:hover { color: var(--signal); border-color: var(--signal); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ── 7. PAGE HEAD ────────────────────────────────────────────────────────── */

.phead {
  padding: clamp(36px, 5.5vw, 76px) var(--pad) clamp(30px, 4vw, 52px);
  border-bottom: 1px solid var(--ink);
}
.phead-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 22px;
  border-bottom: 1px solid var(--rule);
}
.phead-lede { margin-top: 22px; }
.crumbs { display: flex; gap: 8px; align-items: baseline; }
.crumbs a:hover { color: var(--signal); }

/* ── 8. HERO ─────────────────────────────────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(30px, 4vw, 60px);
  align-items: center;
  padding: clamp(40px, 5vw, 66px) var(--pad);
}
@media (max-width: 980px) { .hero { grid-template-columns: 1fr; } }

.hero-kicker {
  font-variation-settings: 'wdth' 76, 'wght' 600;
  font-size: 12.5px; letter-spacing: 0.04em; color: var(--ink-soft);
  padding-bottom: 18px; margin-bottom: 22px;
  border-bottom: 1px solid var(--rule); max-width: 36ch;
}
.hero-title { line-height: 0.88; letter-spacing: -0.035em; }
.hero-title span { display: block; }
.hero-title .l1 {
  font-variation-settings: 'wdth' 72, 'wght' 500;
  font-size: clamp(24px, 4.2vw, 48px); color: var(--ink-soft); letter-spacing: 0.01em;
}
.hero-title .l2 { font-variation-settings: 'wdth' 122, 'wght' 700; font-size: clamp(48px, 10vw, 118px); }
.hero-title .l3 { font-variation-settings: 'wdth' 122, 'wght' 200; font-size: clamp(48px, 10vw, 118px); color: var(--ink-soft); }

.hero-lede { margin-top: 24px; max-width: 46ch; }

.hero-facts { display: flex; flex-wrap: wrap; margin-top: 28px; border-top: 1px solid var(--rule); }
.hero-fact { padding: 14px 22px 14px 0; margin-right: 22px; border-right: 1px solid var(--rule); }
.hero-fact:last-child { border-right: 0; margin-right: 0; }
.hero-fact dt {
  font-variation-settings: 'wdth' 74, 'wght' 650;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
}
.hero-fact dd {
  font-variation-settings: 'wdth' 100, 'wght' 620;
  font-size: 15px; margin-top: 3px; font-variant-numeric: tabular-nums;
}

/* ── 9. FIGURE FRAME (all interactive plots share this chrome) ───────────── */

.fig { border: 1px solid var(--ink); background: var(--sheet-hi); }
.fig-head, .fig-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 10px 14px;
}
.fig-head { border-bottom: 1px solid var(--rule); }
.fig-foot { border-top: 1px solid var(--rule); }
.fig-head .annot { color: var(--ink); }
.fig-read {
  font-variation-settings: 'wdth' 74, 'wght' 600;
  font-size: 11px; letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums; color: var(--signal);
}
.fig-body { position: relative; }
.fig canvas { width: 100%; height: auto; }
.fig svg { width: 100%; height: auto; }

.plot-grid line { stroke: var(--rule-soft); stroke-width: 1; }
.plot-lbl { font-family: var(--font); font-size: 9px; fill: var(--ink-faint); font-variant-numeric: tabular-nums; }
.plot-tick { stroke: var(--ink-faint); stroke-width: 1; }

/* ── 10. STRIP (deadline bar) ────────────────────────────────────────────── */

.strip {
  background: var(--ink); color: var(--sheet);
  padding: 15px var(--pad);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.strip-msg { font-variation-settings: 'wdth' 82, 'wght' 500; font-size: 14px; }
.strip-msg strong { font-variation-settings: 'wdth' 82, 'wght' 700; color: var(--sheet-hi); }
.strip-msg a { color: var(--signal); border-bottom: 1px solid currentColor; }
.strip-msg a:hover { color: var(--sheet-hi); }
.strip-count {
  font-variation-settings: 'wdth' 74, 'wght' 650;
  font-size: 13px; letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums; color: var(--sheet-deep);
  display: flex; gap: 12px; align-items: baseline;
}
.strip-count b { color: var(--signal); font-variation-settings: 'wdth' 74, 'wght' 700; }

/* ── 11. SPLIT + LEGEND ──────────────────────────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.legend { border: 1px solid var(--ink); background: var(--sheet-hi); }
.legend-head { padding: 11px 16px; border-bottom: 1px solid var(--ink); background: var(--ink); }
.legend-head .annot { color: var(--sheet-deep); }
.legend dl { display: grid; grid-template-columns: auto 1fr; }
.legend dt, .legend dd { padding: 11px 16px; border-bottom: 1px solid var(--rule-soft); font-size: 13.5px; }
.legend dt {
  font-variation-settings: 'wdth' 74, 'wght' 650;
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); white-space: nowrap; padding-right: 22px;
}
.legend dd { font-variation-settings: 'wdth' 100, 'wght' 550; font-variant-numeric: tabular-nums; }
.legend dl > :nth-last-child(1), .legend dl > :nth-last-child(2) { border-bottom: 0; }
.legend dd em { font-style: normal; color: var(--signal); }

.axiom { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--rule); max-width: 46ch; }
.axiom p {
  font-variation-settings: 'wdth' 108, 'wght' 400;
  font-style: italic; font-size: clamp(17px, 2vw, 22px);
  line-height: 1.4; letter-spacing: -0.01em;
}
.axiom footer { margin-top: 10px; }

/* ── 12. EVENT INDEX ─────────────────────────────────────────────────────── */

.list-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 28px;
}
.filters { display: flex; flex-wrap: wrap; gap: 7px; }
.filter {
  font-variation-settings: 'wdth' 78, 'wght' 600;
  font-size: 11.5px; letter-spacing: 0.04em;
  padding: 8px 14px; border: 1px solid var(--rule); color: var(--ink-soft);
  transition: border-color .2s, color .2s, background .2s;
}
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--sheet); }

.arena-list { border-top: 1px solid var(--ink); }
.arena {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr) 200px;
  gap: clamp(20px, 3vw, 44px);
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  transition: opacity .32s var(--ease), transform .32s var(--ease);
}
@media (max-width: 1080px) { .arena { grid-template-columns: 150px minmax(0, 1fr); } }
@media (max-width: 700px)  { .arena { grid-template-columns: 1fr; gap: 18px; } }
.arena[hidden] { display: none; }
.arena.out { opacity: 0; transform: translateY(10px); pointer-events: none; }

.arena-plan { border: 1px solid var(--rule); background: var(--sheet-hi); align-self: start; }
.arena-plan svg { width: 100%; height: auto; }
.pl-line   { fill: none; stroke: var(--ink);      stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pl-faint  { fill: none; stroke: var(--rule);     stroke-width: 1; }
.pl-sig    { fill: none; stroke: var(--signal);   stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pl-fill   { fill: var(--ink); stroke: none; }
.pl-sigfill{ fill: var(--signal); stroke: none; }

.arena-plan [data-draw] { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
.arena-plan.drawn [data-draw] { transition: stroke-dashoffset 1.1s var(--ease); stroke-dashoffset: 0; }
.arena-plan [data-pop] { opacity: 0; }
.arena-plan.drawn [data-pop] { transition: opacity .5s .55s var(--ease); opacity: 1; }

.arena-disc {
  font-variation-settings: 'wdth' 74, 'wght' 700;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--signal); margin-bottom: 8px;
  display: flex; gap: 10px; align-items: baseline;
}
.arena-disc em { font-style: normal; color: var(--ink-faint); }
.arena-name {
  font-variation-settings: 'wdth' 114, 'wght' 650;
  font-size: clamp(23px, 2.7vw, 31px); line-height: 1.05; letter-spacing: -0.022em;
}
a.arena-name-link:hover .arena-name { color: var(--signal); }
.arena-sub { font-variation-settings: 'wdth' 80, 'wght' 500; font-size: 12.5px; color: var(--ink-faint); margin-top: 5px; }
.arena-desc { font-size: 14.5px; line-height: 1.68; color: var(--ink-soft); margin-top: 12px; max-width: 62ch; }
.arena-desc strong { color: var(--ink); font-variation-settings: 'wdth' 100, 'wght' 650; }

.arena-spec { border-left: 1px solid var(--rule); padding-left: 18px; align-self: start; }
@media (max-width: 1080px) {
  .arena-spec {
    grid-column: 1 / -1; border-left: 0; padding-left: 0;
    border-top: 1px solid var(--rule-soft); padding-top: 14px;
    display: flex; flex-wrap: wrap; gap: 28px;
  }
}
.arena-spec > div + div { margin-top: 12px; }
@media (max-width: 1080px) { .arena-spec > div + div { margin-top: 0; } }
.arena-spec dt {
  font-variation-settings: 'wdth' 74, 'wght' 650;
  font-size: 9.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-faint);
}
.arena-spec dd { font-variation-settings: 'wdth' 88, 'wght' 550; font-size: 13px; margin-top: 2px; }

/* ── 13. NUMBERED CLAUSE LISTS ───────────────────────────────────────────── */

.clauses { border-top: 1px solid var(--ink); margin-top: 26px; }
.clauses--2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 60px); }
@media (max-width: 860px) { .clauses--2col { grid-template-columns: 1fr; } }
.clauses li {
  display: grid; grid-template-columns: 52px 1fr; gap: 14px;
  padding: 15px 0; border-bottom: 1px solid var(--rule);
  font-size: 14px; line-height: 1.68; color: var(--ink-soft);
}
.clauses li strong { color: var(--ink); font-variation-settings: 'wdth' 100, 'wght' 650; }
.clauses .rn {
  font-variation-settings: 'wdth' 74, 'wght' 700;
  font-size: 11px; letter-spacing: 0.08em; color: var(--signal);
  font-variant-numeric: tabular-nums; padding-top: 3px;
}

/* Phase list — used where an event runs in ordered stages */
.phases { counter-reset: ph; border-top: 1px solid var(--rule); margin-top: 20px; }
.phases li {
  counter-increment: ph;
  display: grid; grid-template-columns: 44px 1fr; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--rule-soft);
  font-size: 14px; line-height: 1.7; color: var(--ink-soft);
}
.phases li::before {
  content: counter(ph, decimal-leading-zero);
  font-variation-settings: 'wdth' 74, 'wght' 700;
  font-size: 11px; color: var(--signal); font-variant-numeric: tabular-nums; padding-top: 3px;
}

.bullets { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.bullets li {
  position: relative; padding-left: 18px;
  font-size: 14px; line-height: 1.65; color: var(--ink-soft);
}
.bullets li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 6px; height: 1px; background: var(--signal);
}

/* ── 14. TABLES ──────────────────────────────────────────────────────────── */

.tbl-wrap { overflow-x: auto; margin-top: 20px; border-top: 1px solid var(--ink); }
.tbl { min-width: 480px; }
.tbl th, .tbl td {
  text-align: left; padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--rule-soft); font-size: 13.5px;
}
.tbl th {
  font-variation-settings: 'wdth' 74, 'wght' 650;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); border-bottom-color: var(--rule);
}
.tbl td { color: var(--ink-soft); }
.tbl td:first-child { color: var(--ink); font-variation-settings: 'wdth' 96, 'wght' 600; }
.tbl .num { font-variant-numeric: tabular-nums; text-align: right; padding-right: 0; color: var(--ink); }

/* Rubric bar — the weight is drawn, not only printed */
.rubric-bar { position: relative; height: 6px; background: var(--rule-soft); min-width: 90px; }
.rubric-bar i { position: absolute; inset: 0 auto 0 0; background: var(--signal); display: block; }

/* ── 15. SCHEDULE ────────────────────────────────────────────────────────── */

.day { border-top: 1px solid var(--ink); padding-top: 18px; margin-top: 40px; }
.day:first-of-type { margin-top: 26px; }
.day-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.day-title { font-variation-settings: 'wdth' 112, 'wght' 650; font-size: clamp(20px, 2.4vw, 27px); letter-spacing: -0.018em; }
.day-role {
  font-variation-settings: 'wdth' 74, 'wght' 650;
  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--signal);
}
.slots { margin-top: 14px; }
.slot {
  display: grid; grid-template-columns: 128px 14px minmax(0, 1fr) 150px;
  gap: 14px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--rule-soft);
}
@media (max-width: 820px) { .slot { grid-template-columns: 108px 14px minmax(0, 1fr); } }
@media (max-width: 560px) { .slot { grid-template-columns: 14px minmax(0, 1fr); } }
.slot-time {
  font-variation-settings: 'wdth' 74, 'wght' 650;
  font-size: 11.5px; letter-spacing: 0.05em; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 560px) { .slot-time { grid-column: 2 / -1; order: -1; } }
.slot-mark { width: 8px; height: 8px; border: 1px solid var(--ink-faint); align-self: center; }
.slot--key .slot-mark { background: var(--signal); border-color: var(--signal); }
.slot--meal .slot-mark { border-radius: 50%; }
.slot--robotics .slot-mark { transform: rotate(45deg); }
.slot-title { font-variation-settings: 'wdth' 100, 'wght' 600; font-size: 14.5px; line-height: 1.35; }
.slot-title a:hover { color: var(--signal); }
.slot-detail { font-size: 12.75px; color: var(--ink-soft); margin-top: 3px; line-height: 1.55; }
.slot-venue {
  font-variation-settings: 'wdth' 76, 'wght' 550;
  font-size: 11.5px; color: var(--ink-faint); letter-spacing: 0.03em;
}
@media (max-width: 820px) { .slot-venue { grid-column: 3 / -1; } }
@media (max-width: 560px) { .slot-venue { grid-column: 2 / -1; } }

.note {
  border-left: 2px solid var(--signal);
  padding: 14px 0 14px 18px; margin-top: 22px;
  font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); max-width: 64ch;
}
.note strong { color: var(--ink); font-variation-settings: 'wdth' 100, 'wght' 650; }
/* A note that runs the full width of its band, for a short passage that
   should read in a few long lines rather than a narrow column. */
.note--wide { max-width: none; }

/* ── 16. MILESTONE CHAIN ─────────────────────────────────────────────────── */

.chain { margin-top: 30px; }
.chain-track {
  position: relative; display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}
@media (max-width: 1000px) { .chain-track { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .chain-track { grid-template-columns: 1fr; border-top: 0; } }

.station { padding: 22px 20px 24px 0; position: relative; }
@media (max-width: 640px) { .station { padding: 16px 0 16px 26px; border-top: 1px solid var(--rule); } }
.station::before {
  content: ''; position: absolute; top: -4px; left: 0;
  width: 7px; height: 7px; background: var(--sheet); border: 1px solid var(--ink-faint);
  transition: background .3s var(--ease), border-color .3s, transform .3s var(--ease);
}
@media (max-width: 640px) { .station::before { top: 20px; left: -4px; } }
.station.lit::before { background: var(--signal); border-color: var(--signal); transform: scale(1.3); }
.station--key::before { border-radius: 50%; }
.station-date {
  font-variation-settings: 'wdth' 74, 'wght' 700;
  font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.station--key .station-date { color: var(--signal); }
.station-title { font-variation-settings: 'wdth' 104, 'wght' 620; font-size: 16px; line-height: 1.22; margin-top: 9px; }
.station-desc { font-size: 12.75px; line-height: 1.6; color: var(--ink-soft); margin-top: 6px; }

/* ── 17. GRID CARDS (committee, spaces, resources) ───────────────────────── */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); border-top: 1px solid var(--ink); margin-top: 24px; }
.cards > * { padding: 20px 22px 22px 0; border-bottom: 1px solid var(--rule); }
.card-k {
  font-variation-settings: 'wdth' 74, 'wght' 650;
  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-faint);
}
.card-t { font-variation-settings: 'wdth' 108, 'wght' 620; font-size: 16.5px; margin-top: 7px; line-height: 1.25; }
.card-d { font-size: 13px; line-height: 1.62; color: var(--ink-soft); margin-top: 5px; max-width: 34ch; }

.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 0; border-top: 1px solid var(--ink); margin-top: 20px; }
.person { padding: 16px 20px 18px 0; border-bottom: 1px solid var(--rule-soft); }
.person-n { font-variation-settings: 'wdth' 104, 'wght' 620; font-size: 15.5px; line-height: 1.25; }
.person-r { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }
.person-c {
  font-variation-settings: 'wdth' 74, 'wght' 700;
  font-size: 10px; letter-spacing: 0.14em; color: var(--signal); margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

.res-list { border-top: 1px solid var(--ink); margin-top: 24px; }
.res {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px; align-items: start;
  padding: 18px 0; border-bottom: 1px solid var(--rule);
}
.res-t { font-variation-settings: 'wdth' 108, 'wght' 620; font-size: 17px; line-height: 1.25; }
a.res-t:hover { color: var(--signal); }
.res-k {
  font-variation-settings: 'wdth' 74, 'wght' 650;
  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 6px;
}
.res-d { font-size: 13.25px; line-height: 1.65; color: var(--ink-soft); margin-top: 6px; max-width: 62ch; }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-variation-settings: 'wdth' 74, 'wght' 650;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 10px; border: 1px solid var(--rule); color: var(--ink-soft); white-space: nowrap;
}
.pill::before { content: ''; width: 6px; height: 6px; background: currentColor; flex: none; }
.pill--on { color: var(--signal); border-color: color-mix(in srgb, var(--signal) 45%, transparent); }
.pill--wait { color: var(--ink-faint); }
.pill--wait::before { background: none; border: 1px solid currentColor; }

/* ── 18. FAQ ─────────────────────────────────────────────────────────────── */

.faq-group { margin-top: 42px; }
.faq-group:first-of-type { margin-top: 26px; }
.faq-list { border-top: 1px solid var(--ink); margin-top: 14px; }
.qa { border-bottom: 1px solid var(--rule); }
.qa summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr 16px; gap: 18px; align-items: center;
  padding: 17px 0;
  font-variation-settings: 'wdth' 102, 'wght' 620;
  font-size: 15.5px; line-height: 1.4;
  transition: color .2s;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--signal); }
.qa-plus { position: relative; width: 12px; height: 12px; justify-self: end; }
.qa-plus::before, .qa-plus::after {
  content: ''; position: absolute; background: currentColor;
  transition: transform .3s var(--ease), opacity .3s;
}
.qa-plus::before { inset: 5px 0 auto 0; height: 1.5px; }
.qa-plus::after  { inset: 0 5px 0 auto; width: 1.5px; }
.qa[open] .qa-plus::after { transform: scaleY(0); opacity: 0; }
.qa[open] summary { color: var(--signal); }
.qa-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.qa[open] .qa-body { grid-template-rows: 1fr; }
.qa-body > div { overflow: hidden; }
.qa-body p {
  font-size: 14px; line-height: 1.72; color: var(--ink-soft);
  max-width: 66ch; padding-bottom: 20px;
}

/* Details used inline inside event rows */
.disclose { margin-top: 14px; }
.disclose summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-variation-settings: 'wdth' 76, 'wght' 650;
  font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-soft); transition: color .2s;
}
.disclose summary::-webkit-details-marker { display: none; }
.disclose summary:hover { color: var(--signal); }
.disclose summary::before {
  content: ''; width: 9px; height: 9px; border: 1px solid currentColor;
  transition: background .2s, transform .3s var(--ease); flex: none;
}
.disclose[open] summary::before { background: var(--signal); border-color: var(--signal); transform: rotate(45deg); }
.disclose-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.disclose[open] .disclose-body { grid-template-rows: 1fr; }
.disclose-body > div { overflow: hidden; }

/* ── 19. FIELD BAND (inverted) ───────────────────────────────────────────── */

.field { background: var(--field); color: var(--field-ink); border-top: 1px solid var(--field); }
.field .h-section, .field .h-page { color: var(--field-ink); }
.field .lede { color: color-mix(in srgb, var(--field-ink) 72%, transparent); }
.field .lede strong { color: var(--field-ink); }
.field .annot { color: color-mix(in srgb, var(--field-ink) 50%, transparent); }
.field .prose p { color: color-mix(in srgb, var(--field-ink) 72%, transparent); }
.field .prose strong { color: var(--field-ink); }
.field .btn-fill:hover { background: var(--field-ink); border-color: var(--field-ink); color: var(--field); }
.field .btn-line { border-color: color-mix(in srgb, var(--field-ink) 40%, transparent); color: var(--field-ink); }
.field .btn-line:hover { background: var(--field-ink); color: var(--field); border-color: var(--field-ink); }
.field .clauses, .field .tbl-wrap { border-top-color: var(--field-rule); }
.field .clauses li, .field .tbl th, .field .tbl td { border-bottom-color: var(--field-rule); color: color-mix(in srgb, var(--field-ink) 70%, transparent); }
.field .tbl td:first-child, .field .clauses li strong { color: var(--field-ink); }

.est { border: 1px solid var(--field-rule); }
.est-head { padding: 12px 18px; border-bottom: 1px solid var(--field-rule); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.est-rows { padding: 6px 18px 0; }
.est-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--field-ink) 12%, transparent);
}
.est-row label { font-variation-settings: 'wdth' 78, 'wght' 600; font-size: 12.5px; color: color-mix(in srgb, var(--field-ink) 80%, transparent); }
.est-row select {
  font-family: var(--font);
  font-variation-settings: 'wdth' 88, 'wght' 550;
  font-size: 13.5px; color: var(--field-ink);
  background-color: var(--field-2);
  border: 1px solid color-mix(in srgb, var(--field-ink) 24%, transparent);
  padding: 9px 34px 9px 12px; cursor: pointer; appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, color-mix(in srgb, var(--field-ink) 70%, transparent) 50%),
    linear-gradient(135deg, color-mix(in srgb, var(--field-ink) 70%, transparent) 50%, transparent 50%);
  background-position: calc(100% - 17px) 51%, calc(100% - 12px) 51%;
  background-size: 5px 5px; background-repeat: no-repeat;
  transition: border-color .2s;
}
.est-row select:hover { border-color: color-mix(in srgb, var(--field-ink) 55%, transparent); }
.est-row select option { background: var(--field); color: var(--field-ink); }
.est-total { padding: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.est-figure {
  font-variation-settings: 'wdth' 120, 'wght' 700;
  font-size: clamp(30px, 4.4vw, 44px); line-height: 1; letter-spacing: -0.03em;
  color: var(--field-ink); font-variant-numeric: tabular-nums;
}
.est-sub { font-size: 12px; color: color-mix(in srgb, var(--field-ink) 50%, transparent); max-width: 34ch; line-height: 1.6; }

/* ── 20. TBC MARKER ──────────────────────────────────────────────────────── */

.tbc {
  display: inline-flex; align-items: center; gap: 6px;
  font-variation-settings: 'wdth' 76, 'wght' 650;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--signal);
  border-bottom: 1px dashed currentColor;
  cursor: help;
}
.tbc::before { content: '◆'; font-size: 8px; }
.field .tbc { color: var(--signal); }

/* ── 21. COMMAND PALETTE ─────────────────────────────────────────────────── */

.cmdk[hidden] { display: none; }
.cmdk {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: start center;
  padding: clamp(60px, 12vh, 140px) 16px 16px;
  background: color-mix(in srgb, var(--ink) 42%, transparent);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.cmdk-panel {
  width: min(640px, 100%);
  background: var(--sheet-hi);
  border: 1px solid var(--ink);
  box-shadow: 0 24px 60px -20px color-mix(in srgb, var(--ink) 55%, transparent);
  display: flex; flex-direction: column; max-height: min(66vh, 560px);
}
.cmdk-field { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--rule); }
.cmdk-field svg { width: 15px; height: 15px; fill: none; stroke: var(--ink-faint); stroke-width: 1.8; flex: none; }
.cmdk-input {
  flex: 1; border: 0; background: none; outline: none;
  padding: 16px 0;
  font-variation-settings: 'wdth' 100, 'wght' 550;
  font-size: 16px; color: var(--ink);
}
.cmdk-input::placeholder { color: var(--ink-faint); }
.cmdk-esc {
  font-variation-settings: 'wdth' 74, 'wght' 650;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint); border: 1px solid var(--rule-soft); padding: 3px 6px;
}
.cmdk-results { overflow-y: auto; padding: 6px 0; }
.cmdk-group {
  font-variation-settings: 'wdth' 74, 'wght' 700;
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint); padding: 12px 16px 6px;
}
.cmdk-item {
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: baseline;
  width: 100%; text-align: left; padding: 10px 16px;
  border-left: 2px solid transparent;
}
.cmdk-item:hover, .cmdk-item[aria-selected="true"] {
  background: var(--sheet-deep); border-left-color: var(--signal);
}
.cmdk-t { font-variation-settings: 'wdth' 100, 'wght' 600; font-size: 14.5px; }
.cmdk-t mark { background: color-mix(in srgb, var(--signal) 22%, transparent); color: inherit; }
.cmdk-s { font-size: 12.25px; color: var(--ink-soft); margin-top: 2px; line-height: 1.5; }
.cmdk-r {
  font-variation-settings: 'wdth' 74, 'wght' 650;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint); white-space: nowrap;
}
.cmdk-empty { padding: 28px 16px; font-size: 13.5px; color: var(--ink-soft); }
.cmdk-foot {
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 10px 16px; border-top: 1px solid var(--rule); background: var(--sheet-deep);
}

/* ── 22. FOOTER ──────────────────────────────────────────────────────────── */

.foot { background: var(--sheet-deep); padding: clamp(42px, 6vw, 66px) var(--pad) 24px; border-top: 1px solid var(--rule); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; }
@media (max-width: 940px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; gap: 28px; } }
.crest--foot { display: flex; height: 68px; margin-bottom: 16px; }
.foot-mark { font-variation-settings: 'wdth' 118, 'wght' 700; font-size: 23px; letter-spacing: -0.025em; }
.foot-mark span { color: var(--signal); }
.foot-addr { font-size: 13px; line-height: 1.75; color: var(--ink-soft); margin-top: 10px; }
.foot h2 {
  font-variation-settings: 'wdth' 74, 'wght' 700;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 12px;
}
.foot li { margin-bottom: 7px; }
.foot li a, .foot li span { font-size: 13.5px; color: var(--ink-soft); }
.foot li a { transition: color .18s; }
.foot li a:hover { color: var(--signal); }
.foot-bottom {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 38px; padding-top: 18px; border-top: 1px solid var(--rule);
}

/* ── 23. VIEW TRANSITIONS ────────────────────────────────────────────────── */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out .18s var(--ease-io) both; }
::view-transition-new(root) { animation: vt-in  .26s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(6px); } }

/* ── 24. REDUCED MOTION ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-delay: 0ms !important;
    transition-duration: .001ms !important; transition-delay: 0ms !important;
  }
  .arena-plan [data-draw] { stroke-dashoffset: 0; }
  .arena-plan [data-pop] { opacity: 1; }
  @view-transition { navigation: none; }
}

/* ── 25. PRINT ───────────────────────────────────────────────────────────── */

@media print {
  .rail, .bar, .drawer, .cmdk, .strip, .fig-foot { display: none !important; }
  .shell { padding-left: 0; }
  body { background: #fff; color: #000; }
  .band { padding: 18pt 0; break-inside: avoid; }
  .qa-body { grid-template-rows: 1fr !important; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 8pt; color: #555; }
}

/* ── 26. CONFUSION MATRIX (The Black Box) ────────────────────────────────── */

.cm {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(20px, 3vw, 40px);
  padding: 20px;
  align-items: start;
}
@media (max-width: 780px) { .cm { grid-template-columns: 1fr; } }

.cm-grid {
  display: grid;
  grid-template-columns: minmax(64px, auto) repeat(3, minmax(0, 1fr));
  gap: 2px;
}
.cm-corner { display: flex; align-items: flex-end; padding: 0 6px 6px 0; }
.cm-corner .annot { font-size: 9px; letter-spacing: 0.06em; line-height: 1.3; }
.cm-h {
  font-variation-settings: 'wdth' 74, 'wght' 650;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint);
  display: flex; align-items: center; justify-content: center;
  padding: 6px 2px;
}
.cm-h--row { justify-content: flex-end; padding-right: 10px; text-align: right; }

.cm-cell {
  aspect-ratio: 1.6 / 1;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--signal) calc(var(--a) * 60%), var(--sheet-hi));
  font-variation-settings: 'wdth' 100, 'wght' 650;
  font-size: clamp(14px, 2vw, 19px);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  transition: border-color .2s, transform .2s var(--ease);
}
.cm-cell--diag {
  background: color-mix(in srgb, var(--ink) calc(var(--a) * 16%), var(--sheet-hi));
  border-color: var(--rule-soft);
  color: var(--ink-soft);
}
.cm-cell:hover { border-color: var(--ink); }
.cm-cell--sel { border-color: var(--signal); border-width: 2px; }

.cm-side { display: flex; flex-direction: column; gap: 12px; }
.cm-tally { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.cm-tally li {
  display: grid; grid-template-columns: 1fr 70px 22px;
  gap: 12px; align-items: center;
  font-size: 12.5px; color: var(--ink-soft);
}
.cm-tally .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.cm-bar { position: relative; height: 5px; background: var(--rule-soft); display: block; }
.cm-bar i { position: absolute; inset: 0 auto 0 0; background: var(--signal); display: block; }

.cm-detail {
  font-size: 13px; line-height: 1.65; color: var(--ink-soft);
  border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 6px;
}
.cm-detail strong { color: var(--ink); font-variation-settings: 'wdth' 100, 'wght' 650; }
.cm-delta { color: var(--signal); font-size: 11px; letter-spacing: 0.06em; }

/* ── 27. RANGE CONTROL ───────────────────────────────────────────────────── */

.slider { -webkit-appearance: none; appearance: none; background: none; width: min(240px, 55%); cursor: pointer; }
.slider::-webkit-slider-runnable-track { height: 2px; background: var(--rule); }
.slider::-moz-range-track { height: 2px; background: var(--rule); }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; margin-top: -5.5px;
  background: var(--signal); border: 0;
}
.slider::-moz-range-thumb { width: 13px; height: 13px; background: var(--signal); border: 0; border-radius: 0; }
.slider:focus-visible { outline-offset: 6px; }

/* ── 28. SCHEDULE KEY ────────────────────────────────────────────────────── */

.key { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; }
.key-item {
  display: inline-flex; align-items: center; gap: 9px;
  font-variation-settings: 'wdth' 76, 'wght' 600;
  font-size: 11px; letter-spacing: 0.05em; color: var(--ink-soft);
}
/* The key uses the same marks the rows do, so it is a legend, not a caption. */
.key-item .slot-mark { flex: none; }
.mark--key { background: var(--signal); border-color: var(--signal); }
.mark--meal { border-radius: 50%; }
.mark--robotics { transform: rotate(45deg); }

/* ── 29. NARROW-SCREEN CORRECTIONS ───────────────────────────────────────── */

@media (max-width: 560px) {
  .res { grid-template-columns: 1fr; gap: 12px; }
  .hero-fact { padding-right: 16px; margin-right: 16px; }
}

/* Once the event row stacks to one column the schematic would otherwise scale
   to the full text measure, leaving a tall empty box. Cap it. */
@media (max-width: 700px) {
  .arena-plan { max-width: 240px; }
}
/* Same schematic used as a standalone figure on events with no simulation. */
.fig-body > .arena-plan { max-width: 420px; margin: 0 auto; border: 0; background: none; }

/* ── 30. PORTRAITS ───────────────────────────────────────────────────────────
   A photograph is a drawing until it arrives. Until a file exists at
   assets/people/<slug>.jpg the frame draws itself with registration marks and
   the person's initials, so a missing portrait is a visible gap on the sheet
   rather than a silent one. Drop the JPEG in and it takes over. */

/* No --mug default here: it would out-specify any ancestor that sets it.
   The fallback lives in the var() call below instead. */
.mug-frame {
  position: relative;
  display: block;
  width: var(--mug, 96px); height: var(--mug, 96px);
  border: 1px solid var(--ink);
  background: var(--sheet-hi);
  overflow: hidden;
  flex: none;
  transition: width .5s var(--ease), height .5s var(--ease);
}
.mug-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* The photographs are 4:5 head-and-shoulders. Anchor near the top so a
     square or landscape crop keeps the whole head in frame. */
  object-position: 50% 16%;
  z-index: 1;
}
.mug--wide .mug-frame img { object-position: 50% 10%; }

/* The drawn stand-in, behind any image. */
.mug-ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  background-image:
    linear-gradient(rgba(127,137,130,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,137,130,.09) 1px, transparent 1px);
  background-size: 12px 12px;
}
.mug-init {
  font-variation-settings: 'wdth' 118, 'wght' 700;
  font-size: calc(var(--mug, 96px) * 0.26);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-faint);
}
.mug-ph .annot { font-size: 8.5px; letter-spacing: 0.16em; }

/* Registration marks at the corners — the frame reads as a plate, not a box. */
.mug-frame::before, .mug-frame::after {
  content: ''; position: absolute; width: 7px; height: 7px;
  border: 1px solid var(--rule); pointer-events: none; z-index: 2;
}
.mug-frame::before { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
.mug-frame::after  { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }

/* ── 31. LETTERS FROM THE STUDENTS-IN-CHARGE ─────────────────────────────────
   Three side by side. Open one and it takes the full width; the other two fold
   down to spines, which is the same vertical-label language as the sheet rail,
   so the row still tells you what else is there. */

.letters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  margin-top: 26px;
  transition: grid-template-columns .55s var(--ease-io);
}
@media (max-width: 860px) {
  .letters { grid-template-columns: 1fr !important; }
}

.letter {
  position: relative;
  border-right: 1px solid var(--rule);
  min-width: 0;
  overflow: hidden;
}
.letter:last-child { border-right: 0; }
@media (max-width: 860px) {
  .letter { border-right: 0; border-bottom: 1px solid var(--rule); }
  .letter:last-child { border-bottom: 0; }
}

.letter-inner { padding: 26px 24px 30px 0; }
@media (max-width: 860px) { .letter-inner { padding: 24px 0 26px; } }
/* Every card after the first starts on the previous card's divider, so it
   gets the same 24px clear of the line that each card keeps on its right.
   Spines are centred and narrow, so they are left as they are. */
@media (min-width: 861px) {
  .letter + .letter:not([data-state="spine"]) .letter-inner { padding-left: 24px; }
}

.letter-head { display: flex; align-items: flex-start; gap: 18px; }
.letter-id { min-width: 0; }
.letter-ref {
  font-variation-settings: 'wdth' 74, 'wght' 700;
  font-size: 10px; letter-spacing: 0.15em; color: var(--signal);
  font-variant-numeric: tabular-nums;
}
.letter-name {
  font-variation-settings: 'wdth' 110, 'wght' 640;
  font-size: 19px; line-height: 1.2; letter-spacing: -0.016em;
  margin-top: 7px;
  transition: font-size .45s var(--ease);
}
.letter-role { font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; }

/* The pulled line — the sentence the letter turns on. */
.letter-key {
  font-variation-settings: 'wdth' 106, 'wght' 420;
  font-style: italic;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.38; letter-spacing: -0.012em;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
  color: var(--ink);
  text-wrap: balance;
  transition: font-size .45s var(--ease);
}
.letter-lines { font-size: 13.75px; line-height: 1.72; color: var(--ink-soft); margin-top: 14px; }
.letter-cta { margin-top: 20px; }

/* Body only exists once opened. */
.letter-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--ease-io), opacity .3s var(--ease);
  opacity: 0;
}
.letter-body > div { overflow: hidden; }
.letter-body-inner { padding-top: 22px; }
.letter-sign {
  margin-top: 22px; padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
}

/* ── open ── */
.letter[data-state="open"] .letter-body { grid-template-rows: 1fr; opacity: 1; transition-delay: .12s; }
.letter[data-state="open"] { --mug: 190px; }
.letter[data-state="open"] .letter-inner { padding-right: 0; }
.letter[data-state="open"] .letter-key { font-size: clamp(19px, 2.3vw, 27px); max-width: 34ch; }
.letter[data-state="open"] .letter-name { font-size: clamp(22px, 2.4vw, 28px); }
.letter[data-state="open"] .letter-lines,
.letter[data-state="open"] .letter-body-inner { max-width: 68ch; font-size: 14.75px; }

@media (min-width: 861px) {
  .letter[data-state="open"] .letter-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 36px;
    align-items: start;
  }
  .letter[data-state="open"] .letter-head { display: contents; }
  .letter[data-state="open"] .letter-mug { grid-row: span 2; }
  .letter[data-state="open"] .letter-text { grid-column: 2; }
}
@media (max-width: 860px) { .letter[data-state="open"] { --mug: 130px; } }

/* ── spine — the two that are not open ── */
.letter[data-state="spine"] { --mug: 40px; }
.letter[data-state="spine"] .letter-inner { padding: 22px 0; }
.letter[data-state="spine"] .letter-key,
.letter[data-state="spine"] .letter-lines,
.letter[data-state="spine"] .letter-role,
.letter[data-state="spine"] .letter-cta {
  opacity: 0; visibility: hidden;
  height: 0; margin: 0; padding: 0; border: 0; overflow: hidden;
}
.letter[data-state="spine"] .letter-head { flex-direction: column; align-items: center; gap: 14px; }
.letter[data-state="spine"] .letter-id { display: flex; flex-direction: column-reverse; align-items: center; gap: 14px; }
.letter[data-state="spine"] .letter-name {
  writing-mode: vertical-rl;
  font-size: 13px;
  font-variation-settings: 'wdth' 80, 'wght' 640;
  letter-spacing: 0.06em;
  margin-top: 0;
  white-space: nowrap;
  color: var(--ink-soft);
}
.letter[data-state="spine"]:hover .letter-name { color: var(--signal); }
.letter[data-state="spine"] .letter-ref { writing-mode: vertical-rl; }
@media (max-width: 860px) {
  .letter[data-state="spine"] .letter-name,
  .letter[data-state="spine"] .letter-ref { writing-mode: horizontal-tb; }
  .letter[data-state="spine"] .letter-head { flex-direction: row; align-items: center; }
  .letter[data-state="spine"] .letter-id { flex-direction: row-reverse; align-items: baseline; }
}

/* The whole closed card is the control; when open only its header strip is. */
.letter-hit {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  cursor: pointer; background: none; border: 0;
}
.letter[data-state="open"] .letter-hit { display: none; }
.letter-hit:focus-visible { outline: 2px solid var(--signal); outline-offset: -4px; }
.letter-close {
  position: absolute; top: 26px; right: 0; z-index: 3;
  font-variation-settings: 'wdth' 76, 'wght' 700;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), color .2s;
}
.letter-close:hover { color: var(--signal); }
.letter[data-state="open"] .letter-close { opacity: 1; pointer-events: auto; }

/* Ruled placeholder — a letter that has not been written yet still has to
   occupy its real shape, or the layout is a lie. */
.rule-lines { display: flex; flex-direction: column; gap: 13px; margin-top: 16px; }
.rule-lines i { display: block; height: 1px; background: var(--rule); }
.rule-lines i:nth-child(4n)   { width: 62%; }
.rule-lines i:nth-child(4n+2) { width: 94%; }
.rule-lines i:nth-child(4n+3) { width: 88%; }

/* ── 32. TEAM GRID ───────────────────────────────────────────────────────── */

.team-group { margin-top: 50px; }
.team-group:first-of-type { margin-top: 28px; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr));
  gap: 36px 30px;
  border-top: 1px solid var(--ink);
  padding-top: 28px;
  margin-top: 14px;
}
.team-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr));
  gap: 26px 20px;
}
.tm { --mug: 100%; min-width: 0; }
.tm .mug-frame { width: 100%; height: auto; aspect-ratio: 1; }
.tm .mug-init { font-size: 30px; }
.tm-name {
  font-variation-settings: 'wdth' 106, 'wght' 640;
  font-size: 16px; line-height: 1.25; letter-spacing: -0.012em;
  margin-top: 14px;
}
.tm-role {
  font-variation-settings: 'wdth' 76, 'wght' 600;
  font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--signal); margin-top: 6px;
}
.tm-meta { font-size: 12px; color: var(--ink-faint); margin-top: 4px; font-variant-numeric: tabular-nums; }
.tm-bio { font-size: 13.25px; line-height: 1.68; color: var(--ink-soft); margin-top: 10px; }
.team-grid--compact .tm-name { font-size: 13.5px; margin-top: 10px; }
.team-grid--compact .tm-role { font-size: 9.5px; }
.team-grid--compact .tm .mug-init { font-size: 20px; }

/* ── 33. EVENT STAFF ─────────────────────────────────────────────────────── */

.staff { border-top: 1px solid var(--ink); margin-top: 24px; padding-top: 28px; }
.staff-head {
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  gap: 28px; align-items: start;
}
.staff-head + .staff-head { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--rule-soft); }
@media (max-width: 560px) { .staff-head { grid-template-columns: 104px minmax(0, 1fr); gap: 18px; } }
.staff-head .mug { --mug: 100%; }
.staff-head .mug-frame { width: 100%; height: auto; aspect-ratio: 1; }
.staff-name {
  font-variation-settings: 'wdth' 110, 'wght' 640;
  font-size: 20px; line-height: 1.2; letter-spacing: -0.014em;
}
.staff-role {
  font-variation-settings: 'wdth' 76, 'wght' 600;
  font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--signal); margin-top: 6px;
}
.staff-bio { font-size: 13.75px; line-height: 1.7; color: var(--ink-soft); margin-top: 12px; max-width: 56ch; }

.staff-deps { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--rule-soft); }
.staff-dep-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 100px), 1fr));
  gap: 20px 16px; margin-top: 16px;
}
.staff-dep { --mug: 100%; min-width: 0; }
.staff-dep .mug-frame { width: 100%; height: auto; aspect-ratio: 1; }
.staff-dep .mug-init { font-size: 18px; }
.staff-dep-n {
  font-variation-settings: 'wdth' 92, 'wght' 600;
  font-size: 12.25px; line-height: 1.3; margin-top: 9px; color: var(--ink);
}

/* ── 34. NAVIGATION LEGIBILITY ───────────────────────────────────────────────
   The rail used to be a column of numbered ticks: it told you where you were
   but not where anything else went. It now carries its names, opens on hover
   or keyboard focus, and can be pinned open. The bar states the sheet you are
   on, and every page ends with the two sheets either side of it. */

.rail {
  width: var(--rail);
  transition: width .38s var(--ease), box-shadow .38s var(--ease);
  overflow: hidden;
  align-items: stretch;
}
.rail:hover, .rail:focus-within, .rail[data-pinned="true"] { width: 238px; }
.rail:hover, .rail:focus-within { box-shadow: 14px 0 34px -24px rgba(0, 0, 0, .55); }

.rail-mark {
  align-self: center;
  transition: letter-spacing .3s var(--ease);
}
.rail:hover .rail-mark,
.rail:focus-within .rail-mark,
.rail[data-pinned="true"] .rail-mark {
  writing-mode: horizontal-tb;
  align-self: flex-start;
  padding-left: 18px;
  letter-spacing: 0.22em;
  margin-bottom: 20px;
}

.rail-link {
  justify-content: flex-start;
  gap: 12px;
  padding: 0 14px 0 18px;
  height: 40px;
}
.rail-link .ref { order: 1; width: 18px; flex: none; }
/* The name now sits in the flow rather than in a hover tooltip. */
.rail-name {
  order: 2;
  position: static;
  opacity: 0; transform: none;
  background: none; color: inherit; padding: 0;
  font-variation-settings: 'wdth' 96, 'wght' 600;
  font-size: 13.5px; letter-spacing: 0;
  white-space: nowrap;
  flex: 1;
  transition: opacity .28s var(--ease);
  pointer-events: none;
}
.rail-link .tick { order: 3; }
.rail:hover .rail-name,
.rail:focus-within .rail-name,
.rail[data-pinned="true"] .rail-name { opacity: 1; }
.rail-link[aria-current="page"] .rail-name { color: var(--signal); }

.rail-foot { margin-top: auto; align-items: stretch; gap: 8px; padding: 0 14px 0 18px; }
.rail-pin {
  display: flex; align-items: center; gap: 10px;
  font-variation-settings: 'wdth' 74, 'wght' 650;
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint);
  padding: 8px 0;
  transition: color .2s;
  white-space: nowrap;
}
.rail-pin:hover { color: var(--ink); }
.rail-pin svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; }
.rail[data-pinned="true"] .rail-pin { color: var(--signal); }
.rail-pin span { opacity: 0; transition: opacity .28s var(--ease); }
.rail:hover .rail-pin span,
.rail:focus-within .rail-pin span,
.rail[data-pinned="true"] .rail-pin span { opacity: 1; }
.rail-pos { writing-mode: horizontal-tb; padding-bottom: 2px; }

/* Where am I — stated, not implied. */
.bar-where {
  display: flex; align-items: baseline; gap: 9px;
  padding-left: 16px;
  border-left: 1px solid var(--rule);
}
.bar-where b {
  font-variation-settings: 'wdth' 100, 'wght' 640;
  font-size: 13px; color: var(--ink);
}
@media (max-width: 900px) { .bar-where { display: none; } }

/* Previous / next sheet, on every page. */
.pagenav {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--ink);
}
@media (max-width: 620px) { .pagenav { grid-template-columns: 1fr; } }
.pagenav > * {
  display: block;
  padding: 30px var(--pad) 34px;
  border-right: 1px solid var(--rule);
  transition: background .25s var(--ease);
}
.pagenav > *:last-child { border-right: 0; text-align: right; }
@media (max-width: 620px) {
  .pagenav > * { border-right: 0; border-bottom: 1px solid var(--rule); text-align: left; }
  .pagenav > *:last-child { border-bottom: 0; text-align: left; }
}
.pagenav a:hover { background: var(--sheet-deep); }
.pn-k {
  font-variation-settings: 'wdth' 74, 'wght' 650;
  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-faint);
}
.pn-t {
  font-variation-settings: 'wdth' 112, 'wght' 640;
  font-size: clamp(20px, 2.6vw, 30px); line-height: 1.1; letter-spacing: -0.02em;
  margin-top: 9px;
}
.pagenav a:hover .pn-t { color: var(--signal); }
.pn-d { font-size: 13px; color: var(--ink-soft); margin-top: 7px; max-width: 42ch; }
.pagenav > *:last-child .pn-d { margin-left: auto; }

/* A sheet that exists but is not yet published: shown, not linked. */
.pn-off { cursor: not-allowed; }
.pn-off .pn-t { color: var(--ink-faint); }
.pn-off .pn-d { color: var(--ink-faint); font-style: italic; }
.foot li .nav-soon { color: var(--ink-faint); cursor: not-allowed; }
.nav-soon small {
  display: block; margin-top: 2px;
  font-size: 11.5px; font-style: italic; color: var(--ink-faint);
}

@media (prefers-reduced-motion: reduce) {
  .rail, .letters, .letter-name, .letter-key, .mug-frame { transition: none; }
}

/* Bar layout: mark and location sit together at the left; controls go right. */
.bar { justify-content: flex-start; }
.bar-right { margin-left: auto; }

/* A README so the naming convention travels with the folder. */

/* ── 35. COUNTDOWN ───────────────────────────────────────────────────────────
   Four cells on the inverted band. Tabular figures so the digits do not shuffle
   the layout every second, and a fixed cell width so the seconds column cannot
   push the minutes column about. */

.cd-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 30px;
}

.cd {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--field-rule);
  border-bottom: 1px solid var(--field-rule);
}
@media (max-width: 620px) { .cd { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cd-cell {
  padding: 26px 20px 24px;
  border-right: 1px solid var(--field-rule);
  display: flex; flex-direction: column; gap: 8px;
}
.cd-cell:last-child { border-right: 0; }
@media (max-width: 620px) {
  .cd-cell:nth-child(2n) { border-right: 0; }
  .cd-cell:nth-child(-n+2) { border-bottom: 1px solid var(--field-rule); }
}

.cd-n {
  font-variation-settings: 'wdth' 120, 'wght' 700;
  font-size: clamp(44px, 8.5vw, 96px);
  line-height: 0.86;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--field-ink);
  font-feature-settings: 'tnum' 1;
}
.cd-cell:first-child .cd-n { color: var(--signal); }
.cd-k {
  font-variation-settings: 'wdth' 74, 'wght' 650;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: color-mix(in srgb, var(--field-ink) 52%, transparent);
}

.cd-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 26px; flex-wrap: wrap; margin-top: 28px;
}
.cd-inline {
  font-variation-settings: 'wdth' 76, 'wght' 700;
  font-variant-numeric: tabular-nums;
  color: var(--signal);
  white-space: nowrap;
}
.cd--past { grid-template-columns: 1fr; }
.cd--past .cd-cell { border-right: 0; border-bottom: 0; }

/* ── 36. EVENT DOCUMENT PACK ─────────────────────────────────────────────────
   Six rows, always the same six, in the same order for every event. A document
   that has not been released keeps its row and says so; hiding it would leave a
   school unable to tell the difference between "not written" and "not shown". */

.docs { border-top: 1px solid var(--ink); margin-top: 26px; }
.doc {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 20px; align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 700px) {
  .doc { grid-template-columns: 32px minmax(0, 1fr); gap: 14px; }
  .doc-get { grid-column: 2; justify-self: start; margin-top: 6px; }
}
.doc-n {
  font-variation-settings: 'wdth' 74, 'wght' 700;
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
  padding-top: 4px;
}
.doc--ready .doc-n { color: var(--signal); }
.doc-t { font-variation-settings: 'wdth' 108, 'wght' 620; font-size: 16.5px; line-height: 1.25; }
.doc-d { font-size: 13.25px; line-height: 1.65; color: var(--ink-soft); margin-top: 6px; max-width: 64ch; }
.doc-note {
  font-size: 12.5px; line-height: 1.6; color: var(--ink-faint);
  margin-top: 7px; padding-left: 12px; border-left: 1px solid var(--rule);
  max-width: 58ch;
}

.doc-get {
  display: inline-flex; align-items: center; gap: 9px;
  font-variation-settings: 'wdth' 76, 'wght' 700;
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 11px 16px;
  border: 1px solid var(--ink);
  color: var(--ink);
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s;
}
.doc-get svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
a.doc-get:hover { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.doc-get--wait {
  border-color: var(--rule); color: var(--ink-faint);
  cursor: not-allowed;
}
.doc-get--wait svg { opacity: 0.5; }

/* ── 37. BIOGRAPHY ROWS (team sheet) ─────────────────────────────────────────
   Landscape portrait beside the write-up, alternating side down the page. The
   write-up runs to about 180 words, and the ruled stand-in is cut to the same
   measure so the page keeps its proportions before the text arrives. */

.team-group { margin-top: 64px; }
.team-group:first-of-type { margin-top: 30px; }
.team-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--ink);
}

.bios { display: flex; flex-direction: column; }
.bio {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(26px, 4vw, 60px);
  align-items: center;
  padding: clamp(30px, 4vw, 48px) 0;
  border-bottom: 1px solid var(--rule);
}
.bio:last-child { border-bottom: 0; }
@media (max-width: 780px) {
  .bio { grid-template-columns: 1fr; gap: 22px; align-items: start; }
}
/* Alternate the side the portrait sits on. */
@media (min-width: 781px) {
  .bio:nth-child(even) .bio-photo { order: 2; }
}

.bio-photo { min-width: 0; }
.mug--wide { --mug: 100%; }
.mug--wide .mug-frame { width: 100%; height: auto; aspect-ratio: 3 / 2; }
.mug--wide .mug-init { font-size: clamp(30px, 5vw, 52px); }
@media (max-width: 780px) {
  .mug--wide .mug-frame { aspect-ratio: 16 / 9; }
}

.bio-text { min-width: 0; }
.bio-role {
  font-variation-settings: 'wdth' 76, 'wght' 650;
  font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--signal);
}
.bio-name {
  font-variation-settings: 'wdth' 114, 'wght' 650;
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.06; letter-spacing: -0.024em;
  margin-top: 10px;
  text-wrap: balance;
}
.bio-meta {
  font-size: 12.5px; color: var(--ink-faint); margin-top: 7px;
  font-variant-numeric: tabular-nums;
}
.bio-body {
  font-size: 14.5px; line-height: 1.76; color: var(--ink-soft);
  margin-top: 16px; max-width: 58ch;
}
.bio-body--tbc { margin-top: 14px; font-size: 12.5px; }
.bio-text .rule-lines { margin-top: 18px; max-width: 58ch; }

/* ── 38. NARROW-SCREEN CORRECTIONS, SECOND PASS ──────────────────────────── */

@media (max-width: 560px) {
  .cd-n { font-size: clamp(38px, 13vw, 60px); }
  .doc-get { width: 100%; justify-content: center; }
}

/* ── 39. WELCOME SIGN-OFF ─────────────────────────────────────────────────── */

.welcome-sign {
  margin-top: 26px; padding-top: 16px;
  border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 4px;
  max-width: 40ch;
}
.welcome-name {
  font-variation-settings: 'wdth' 108, 'wght' 640;
  font-size: 17px; letter-spacing: -0.012em;
}

/* ── 40. EVENT HEAD GALLERY ──────────────────────────────────────────────── */

.heads {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr));
  gap: 30px 24px; margin-top: 20px;
}
.head-card { --mug: 100%; min-width: 0; display: block; }
.head-card .mug-frame { width: 100%; height: auto; aspect-ratio: 1; }
.head-card .mug-init { font-size: 26px; }
.head-n {
  font-variation-settings: 'wdth' 104, 'wght' 640;
  font-size: 15px; line-height: 1.25; margin-top: 12px;
  transition: color .2s;
}
.head-card:hover .head-n { color: var(--signal); }
.head-e {
  font-variation-settings: 'wdth' 76, 'wght' 600;
  font-size: 10.5px; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: 6px; line-height: 1.5;
}

/* A real letter runs longer than the ruled stand-in; give it room. */
.letter-prose p + p { margin-top: 15px; }
.letter[data-state="open"] .letter-prose { max-width: 62ch; }

/* ── 36b. EVENT FLOWCHART ────────────────────────────────────────────────────
   Stands in for the document pack (section 36) until it is released. Terminals
   are the only filled shapes; decisions carry the one signal mark, a diamond,
   and send their other answer off to the right. On a phone the side branch
   drops beneath its question so the main line still runs straight down. */

.flow {
  list-style: none; margin: 30px 0 0; padding: 30px 0 0;
  border-top: 1px solid var(--ink);
}
.fl-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 46ch) minmax(0, 1fr);
  grid-template-areas: "n node side" ". link .";
  column-gap: 18px;
}
.fl-n {
  grid-area: n; align-self: center;
  font-variation-settings: 'wdth' 74, 'wght' 700;
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}

.fl-node {
  grid-area: node;
  border: 1px solid var(--ink);
  background: var(--sheet-hi);
  padding: 13px 18px;
}
.fl-t { font-variation-settings: 'wdth' 106, 'wght' 620; font-size: 15.5px; line-height: 1.3; }
.fl-d { font-size: 13px; line-height: 1.6; color: var(--ink-soft); margin-top: 5px; }

.fl-node--start, .fl-node--end {
  background: var(--field); border-color: var(--field); color: var(--field-ink);
  border-radius: 28px; padding: 13px 22px;
}
.fl-node--start .fl-d, .fl-node--end .fl-d { color: var(--field-ink); opacity: .75; }

.fl-node--decision { border-style: dashed; background: transparent; }
.fl-node--decision .fl-t { display: flex; align-items: baseline; gap: 11px; }
.fl-node--decision .fl-t::before {
  content: ''; flex: none;
  width: 8px; height: 8px; transform: translateY(-1px) rotate(45deg);
  border: 1.5px solid var(--signal);
}

/* The main line between one node and the next. */
.fl-link {
  grid-area: link;
  position: relative; display: block;
  height: 34px; margin-left: 26px;
  border-left: 1px solid var(--ink-soft);
}
.fl-link::after {
  content: ''; position: absolute; left: -5px; bottom: 0;
  border: 4.5px solid transparent; border-bottom: 0;
  border-top: 6px solid var(--ink-soft);
}
.fl-ans {
  font-variation-settings: 'wdth' 76, 'wght' 700;
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.fl-link .fl-ans { position: absolute; left: 10px; top: 50%; transform: translateY(-60%); }

/* The other answer of a decision. */
.fl-side {
  grid-area: side; align-self: center;
  display: flex; align-items: center; min-width: 0;
}
.fl-side-line {
  position: relative; flex: none;
  width: 72px; height: 1px; background: var(--ink-soft);
  margin-right: -1px;
}
.fl-side-line .fl-ans { position: absolute; left: 8px; bottom: 6px; }
.fl-side-line svg {
  position: absolute; right: -2px; top: -6px;
  width: 12px; height: 12px; fill: none; stroke: var(--ink-soft); stroke-width: 1.4;
}
.fl-side-box {
  border: 1px solid var(--rule); padding: 10px 14px;
  font-size: 13px; line-height: 1.5; color: var(--ink-soft);
  max-width: 30ch;
}
.fl-side--back .fl-side-box { border-style: dashed; }
.fl-back { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--ink); }
.fl-back svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.4; }

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

@media (max-width: 760px) {
  .fl-row {
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-areas: "n node" ". side" ". link";
    column-gap: 12px;
  }
  .fl-n { align-self: start; padding-top: 16px; }
  .fl-side { margin: 10px 0 0 26px; align-items: flex-start; }
  .fl-side-line { width: 40px; margin-top: 18px; }
  .fl-side-box { max-width: none; flex: 1; }
}

/* Interactive 3D arena, embedded from assets/docs/<event>/ on an event page. */
.arena3d { margin-top: 22px; border: 1px solid var(--ink); height: clamp(460px, 72vh, 660px); overflow: hidden; }
.arena3d iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 700px) { .arena3d { height: 560px; } }