/* ==========================================================================
   CCR SCCA — Central Carolinas Region
   Design tokens and page styles. No rounded corners, no shadows: depth
   comes from ground color and 1-4px rules only. Both are load-bearing.
   ========================================================================== */

:root {
  /* Color */
  --ink:              #14161A;
  --paper:            #F2F0EB;
  --red:              #E1281C;
  --red-pressed:      #C2200F;
  /* Two separate jobs, two separate tokens.
     --accent is a DETAIL colour: dates, kickers, links, icons, all on the dark
     ground where a saturated yellow reads instantly and never gets confused
     with the body greys.
     --accent-ground is a BLOCK colour: just the "Start here" band and the
     contact box. Those want to be quiet, so they take a light grey with ink
     text. White on that grey is 1.44:1, so it is never used there. */
  --accent:           #F2C230;
  --accent-ground:    #D5D7DA;
  --on-accent-ground: #14161A;
  --on-accent-quiet:  #3A3F42;  /* 7.39:1 on the grey, for 11px labels */
  --white:            #FFFFFF;

  --text-body:        #4A4842;  /* body copy on light ground */
  --text-muted:       #8A867F;  /* kickers, index labels, footer meta */
  --text-muted-dark:  #9B978F;  /* secondary text on dark */
  --text-soft-dark:   #C9C6C0;  /* nav links, venue cells, aside body */
  --text-soft-light:  #D6D3CD;  /* hero body copy */

  --border-light:     #D6D3CD;
  --rule-12:          rgba(242, 240, 235, 0.12);
  --rule-14:          rgba(242, 240, 235, 0.14);
  --rule-18:          rgba(242, 240, 235, 0.18);
  --rule-35:          rgba(242, 240, 235, 0.35);
  --rule-40:          rgba(242, 240, 235, 0.40);
  --wash-05:          rgba(242, 240, 235, 0.05);
  --wash-08:          rgba(242, 240, 235, 0.08);
  --red-wash:         rgba(225, 40, 28, 0.10);
  --red-wash-hover:   rgba(225, 40, 28, 0.18);
  --ink-wash:         rgba(20, 22, 26, 0.10);

  /* Round-chip tints for the standings ladder. Small text never sits on the
     full-strength red: it fails AA. Dark red ink on a pale tint instead. */
  --red-tint:         #FDEDEB;
  --red-tint-border:  #F4D2CD;
  --red-ink:          #8C1C12;
  --neutral-400:      #BAB6B6;

  /* Type */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'Barlow', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --container:  1280px;
  --pad-x:      32px;
  --section-y:  96px;
  --header-h:   66px;

  --ease: 120ms ease;
}

/* ---------------------------------------------------------------- base --- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: var(--red); text-decoration: none; transition: color var(--ease), background-color var(--ease), border-color var(--ease); }
a:hover { color: var(--red-pressed); }

::selection { background: var(--accent); color: var(--ink); }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

h1, h2, h3, p, blockquote, dl, dd, figure, ol { margin: 0; }
ol { padding: 0; list-style: none; }

[id] { scroll-margin-top: var(--header-h); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--red); color: #fff; padding: 12px 18px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
}
.skip-link:focus { left: 0; color: #fff; }

.wrap { max-width: var(--container); margin: 0 auto; }

/* ------------------------------------------------- shared type patterns --- */

.kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.kicker-muted  { color: var(--text-muted); }
.kicker-accent { color: var(--accent); }
.kicker-red    { font-size: 11px; color: var(--red); }

.link-underline {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--red);
  padding-bottom: 3px;
}
.link-accent { color: var(--accent); border-bottom-color: var(--accent); }
.link-accent:hover { color: var(--white); border-bottom-color: var(--white); }

/* ------------------------------------------------------------ buttons --- */

.btn {
  display: inline-block;
  padding: 16px 26px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  /* A <button> gets the UA's grey "buttonface" fill unless we say otherwise,
     which made the outline variants render as a solid light box. */
  background: transparent;
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}

.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--accent); color: var(--ink); }

.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--red); color: #fff; }

.btn-outline-light { border-color: var(--rule-40); color: var(--paper); }
.btn-outline-light:hover { border-color: var(--paper); background: var(--wash-08); color: var(--paper); }

.btn-outline-ink { border-color: var(--ink); color: var(--ink); }
.btn-outline-ink:hover { background: var(--ink-wash); color: var(--ink); }


.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------------- header --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid var(--rule-14);
}

.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 36px;
}

.brand { display: flex; align-items: center; gap: 12px; color: var(--paper); flex: none; }
.brand:hover { color: var(--white); }

/* The official club mark replaces the design's red-block-plus-wordmark lockup.
   44px is the floor at which the dragon still reads; below that it turns to
   mush, so do not shrink it further on mobile. */
.brand-logo { display: block; height: 44px; width: auto; }
.brand-footer .brand-logo { height: 64px; }

/* Kept for anywhere the typographic lockup is still wanted. */
.brand-mark { display: block; width: 10px; height: 26px; background: var(--red); flex: none; }
.brand-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: 0.06em;
  line-height: 1;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.site-nav a { color: var(--text-soft-dark); }
.site-nav a:hover { color: var(--paper); }

.header-cta { padding: 11px 20px; font-size: 11.5px; }

.nav-toggle {
  display: none;
  margin-left: 14px;
  padding: 11px 16px;
  background: transparent;
  border: 1px solid var(--rule-40);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--ease), background-color var(--ease);
}
.nav-toggle:hover { border-color: var(--paper); background: var(--wash-08); }

/* --------------------------------------------------------------- hero --- */

.hero {
  position: relative;
  background: var(--ink);
  min-height: 660px;
  display: flex;
  align-items: flex-end;
}

.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(78deg,
    rgba(20, 22, 26, 0.94) 0%,
    rgba(20, 22, 26, 0.72) 42%,
    rgba(20, 22, 26, 0.15) 78%);
}

.hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 120px var(--pad-x) 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: end;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow-bar { display: block; width: 26px; height: 2px; background: var(--accent); flex: none; }

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 9vw, 104px);
  line-height: 0.86;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--paper);
}

.hero-aside {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text-muted-dark);
}

.hero-body {
  margin-top: 26px;
  max-width: 520px;
  font-size: 19px;
  line-height: 1.5;
  color: var(--text-soft-light);
  text-wrap: pretty;
}

.hero-copy .btn-row { margin-top: 34px; }

/* next-event card */
.next-card {
  background: var(--paper);
  padding: 24px;
  border-top: 4px solid var(--red);
}
.next-title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  text-transform: uppercase;
}

.spec-list { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.spec-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.spec-row dt { color: var(--text-muted); }
.spec-row dd { margin: 0; color: var(--text-body); }

.next-cta {
  display: block;
  margin-top: 20px;
  padding: 13px 18px;
  font-size: 11.5px;
}

/* ------------------------------------------------------ timing strip --- */

.timing-strip {
  background: var(--ink);
  color: var(--paper);
  padding: 18px var(--pad-x);
  border-bottom: 1px solid var(--rule-12);
}
.timing-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 36px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.timing-lead { color: var(--accent); }
.timing-link { color: var(--paper); }
.timing-link:hover { color: var(--accent); }
.timing-meta { margin-left: auto; color: var(--text-muted); }

/* ------------------------------------------------------- section shell --- */

.section { padding: var(--section-y) var(--pad-x); }
.section-light  { background: var(--paper); }
.section-dark   { background: var(--ink); color: var(--paper); }
.section-accent {
  background: var(--accent-ground);
  color: var(--on-accent-ground);
  padding: 90px var(--pad-x);
  /* Only 1.27:1 against the paper section above it, so the block is defined by
     a rule rather than by its fill. Same trick the rest of the design uses. */
  border-top: 3px solid var(--ink);
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--ink);
}
.section-head-dark { border-bottom-color: var(--paper); }
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  text-transform: uppercase;
}
.section-index {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* --------------------------------------------------------- disciplines --- */

.discipline-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }

.discipline { padding: 34px; border-right: 1px solid var(--border-light); }
.discipline:first-child { padding-left: 0; }
.discipline:last-child  { padding-right: 0; border-right: 0; }

.discipline-photo { height: 200px; margin-bottom: 26px; background: rgba(20, 22, 26, 0.06); }
.discipline-photo img { width: 100%; height: 100%; object-fit: cover; }

.discipline h3 {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  text-transform: uppercase;
}
.discipline-body {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-body);
  text-wrap: pretty;
}
.discipline .link-underline { margin-top: 18px; }

/* ------------------------------------------------------------ schedule --- */

.schedule { --sched-cols: 70px 130px minmax(0, 1fr) 220px 150px; }

.sched-head,
.sched-row {
  display: grid;
  grid-template-columns: var(--sched-cols);
  gap: 0;
  align-items: center;
}

.sched-head {
  padding: 16px 0 16px 18px;   /* 4px accent + 14px, so columns never shift */
  border-bottom: 1px solid var(--rule-18);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sched-row {
  padding: 20px 0 20px 14px;
  border-left: 4px solid transparent;
  border-bottom: 1px solid var(--rule-12);
  color: var(--paper);
  transition: background-color var(--ease);
}
a.sched-row:hover { background: var(--wash-05); color: var(--paper); }

.sched-row.is-next { background: var(--red-wash); border-left-color: var(--red); }
a.sched-row.is-next:hover { background: var(--red-wash-hover); }

.sched-row.is-static { cursor: default; }

.cell-rnd   { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.cell-date  { font-family: var(--font-mono); font-size: 13px; color: var(--accent); }
.cell-event { font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1; text-transform: uppercase; }
.cell-venue { font-family: var(--font-mono); font-size: 13px; color: var(--text-soft-dark); }
.cell-status {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.status-open     { color: var(--red); }
.status-complete { color: var(--text-muted-dark); }
.status-soon     { color: var(--text-muted); }

.schedule-actions { margin-top: 36px; gap: 14px; align-items: center; }
.schedule-actions .btn { padding: 15px 24px; font-size: 11.5px; }

/* -------------------------------------------------------- first timers --- */

.first-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 64px;
  padding-top: 44px;
}

.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; }

.step-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 56px;
  line-height: 0.8;
  color: var(--red);
}
.step h3 {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  text-transform: uppercase;
}
.step p { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--text-body); }

.checklist { background: var(--ink); color: var(--paper); padding: 34px; }
.spec-list-dark { gap: 0; margin-top: 20px; }
.spec-list-dark .spec-row {
  padding: 13px 0;
  gap: 16px;
  border-bottom: 1px solid var(--rule-14);
  font-size: 13px;
}
.spec-list-dark .spec-row:last-child { border-bottom: 0; }
.spec-list-dark dt { color: var(--paper); }
.spec-list-dark dd { color: var(--text-muted-dark); }

.checklist-body { margin-top: 24px; font-size: 15.5px; line-height: 1.55; color: var(--text-soft-dark); }
.checklist .link-underline { margin-top: 22px; }

/* ---------------------------------------------------------- quote band --- */

.quote-band {
  position: relative;
  background: var(--ink);
  min-height: 420px;
  display: flex;
  align-items: center;
}
.quote-media { position: absolute; inset: 0; }
.quote-media img { width: 100%; height: 100%; object-fit: cover; }
.quote-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(20, 22, 26, 0.92) 0%,
    rgba(20, 22, 26, 0.55) 55%,
    rgba(20, 22, 26, 0.20) 100%);
}
.quote-inner {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 70px var(--pad-x);
}
.quote-band blockquote {
  max-width: 840px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 54px;
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--paper);
}
.quote-attr {
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ------------------------------------------------------------- results --- */

.results-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-top: 36px;
}

.result-card {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 30px;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--border-light);
}
.result-card:hover { border-color: var(--ink); color: var(--ink); }

.result-card-red { background: var(--red); color: #fff; border-color: var(--red); }
.result-card-red:hover { background: var(--red-pressed); border-color: var(--red-pressed); color: #fff; }

.result-title {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  text-transform: uppercase;
}
.result-body { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--text-body); }
.result-card-red .result-body { color: rgba(255, 255, 255, 0.85); }

/* ------------------------------------------------------------- contact --- */

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

.contact-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 72px;
  line-height: 0.9;
  text-transform: uppercase;
}
.contact-body { margin-top: 24px; max-width: 520px; font-size: 19px; line-height: 1.5; text-wrap: pretty; color: var(--text-body); }
.contact-links { margin-top: 32px; }

.contact-form {
  background: var(--paper);
  padding: 34px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hp-field { position: absolute; left: -9999px; }

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-body);
}
.field input,
.field textarea {
  border: 1px solid var(--border-light);
  background: var(--white);
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  transition: border-color var(--ease);
}
.field textarea { resize: vertical; }
.field input:focus,
.field textarea:focus { border-color: var(--red); outline: none; }
.field input:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }

.field.is-invalid input,
.field.is-invalid textarea { border-color: var(--red); }

.field-error {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--red);
  text-transform: none;
}

.btn-submit { padding: 16px 22px; text-align: left; border: none; }
.btn-submit:hover { background: var(--ink); color: #fff; }
.btn-submit[disabled] { opacity: 0.7; cursor: progress; }

.form-status {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: var(--text-body);
}
.form-status:empty { display: none; }
.form-status.is-error { color: var(--red); }

/* -------------------------------------------------------------- footer --- */

.site-footer {
  background: var(--ink);
  color: var(--text-muted-dark);
  padding: 56px var(--pad-x) 40px;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--rule-14);
}
.brand-footer { color: var(--paper); }
.footer-org { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.8; }
.footer-nav {
  margin-left: auto;
  display: flex;
  gap: 28px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer-nav a { color: var(--text-muted-dark); }
.footer-nav a:hover { color: var(--paper); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  padding-top: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Nav collapses to a menu; the Register CTA stays in the bar. */
@media (max-width: 860px) {
  .header-inner { gap: 16px; }
  .header-cta { margin-left: auto; }
  .nav-toggle { display: block; margin-left: 0; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--rule-14);
  }
  .site-nav[data-open] { display: flex; }
  .site-nav a { padding: 16px var(--pad-x); border-top: 1px solid var(--rule-12); }
}

/* Fixed multi-column grids collapse; dividers become horizontal rules. */
@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding-top: 96px;
  }
  .next-card { width: 100%; }

  .discipline-grid { grid-template-columns: minmax(0, 1fr); }
  .discipline {
    padding: 34px 0;
    border-right: 0;
    border-bottom: 1px solid var(--border-light);
  }
  .discipline:first-child { padding-top: 34px; }
  .discipline:last-child { border-bottom: 0; padding-bottom: 0; }

  .first-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }

  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .contact-title { font-size: clamp(44px, 10vw, 72px); }

  .results-grid { grid-template-columns: minmax(0, 1fr); }

  .quote-band blockquote { font-size: clamp(32px, 6.5vw, 54px); }
}

/* The 5-column schedule grid does not survive narrow screens: stack it. */
@media (max-width: 760px) {
  .sched-head { display: none; }

  .sched-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "rnd  date  status"
      "evt  evt   evt"
      "ven  ven   ven";
    gap: 6px 12px;
    padding: 18px 0 18px 14px;
  }
  .cell-rnd    { grid-area: rnd; }
  .cell-date   { grid-area: date; }
  .cell-status { grid-area: status; }
  .cell-event  { grid-area: evt; font-size: 22px; }
  .cell-venue  { grid-area: ven; }
}

@media (max-width: 640px) {
  :root { --pad-x: 20px; --section-y: 56px; }

  .section-accent { padding: 56px var(--pad-x); }
  .site-footer { padding: 40px var(--pad-x) 32px; }
  .hero-inner { padding-top: 72px; padding-bottom: 40px; }

  .section-head { flex-wrap: wrap; gap: 8px 20px; }
  .section-head h2 { font-size: 34px; }
  .section-index { margin-left: 0; }

  .steps { grid-template-columns: minmax(0, 1fr); gap: 32px; }

  .hero-body, .contact-body { font-size: 17px; }
  .quote-inner { padding: 56px var(--pad-x); }

  .footer-nav { margin-left: 0; flex-wrap: wrap; gap: 18px; }
  .btn-row .btn { flex: 1 1 auto; text-align: center; }
  .btn-submit { flex: 0 0 auto; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   Interior pages (autocross.html, hillclimb.html, road-racing.html)
   Built from the same tokens as the home page. No new colors, no new fonts.
   ========================================================================== */

/* --------------------------------------------------------- page hero --- */

.page-hero {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
.page-hero-media { position: absolute; inset: 0; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(84deg,
    rgba(20, 22, 26, 0.95) 0%,
    rgba(20, 22, 26, 0.80) 46%,
    rgba(20, 22, 26, 0.35) 100%);
}
.page-hero-inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 76px var(--pad-x) 72px;
}
.crumb {
  display: inline-block;
  margin-bottom: 26px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft-dark);
}
.crumb:hover { color: var(--accent); }

.page-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 88px);
  line-height: 0.88;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--paper);
}
.page-lead {
  margin-top: 24px;
  max-width: 620px;
  font-size: 19px;
  line-height: 1.5;
  color: var(--text-soft-light);
  text-wrap: pretty;
}
.page-hero .btn-row { margin-top: 32px; }

/* Key-facts strip under the page hero */
.facts {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid var(--rule-18);
  padding: 0 var(--pad-x);
}
.facts-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.fact { padding: 26px 26px 26px 0; border-right: 1px solid var(--rule-14); }
.fact:last-child { border-right: 0; }
.fact:not(:first-child) { padding-left: 26px; }
.fact dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fact dd {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.05;
  text-transform: uppercase;
}
.fact dd small {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.45;
  text-transform: none;
  color: var(--text-soft-dark);
}

/* ------------------------------------------------------------- prose --- */

.prose { max-width: 720px; }
.prose > * + * { margin-top: 18px; }
.prose p, .prose li { font-size: 17px; line-height: 1.6; color: var(--text-body); text-wrap: pretty; }
.prose h3 {
  margin-top: 40px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink);
}
.prose ul { padding-left: 0; list-style: none; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li + li { margin-top: 10px; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 12px;
  height: 2px;
  background: var(--red);
}
.prose strong { font-weight: 600; }

.section-dark .prose p,
.section-dark .prose li { color: var(--text-soft-dark); }
.section-dark .prose h3 { color: var(--paper); }

/* Two-column body: prose left, sticky aside right */
.body-split {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 64px;
  padding-top: 44px;
  align-items: start;
}
.aside-card { background: var(--ink); color: var(--paper); padding: 30px; }
.aside-card .kicker { margin-bottom: 18px; }
.aside-card p { font-size: 15.5px; line-height: 1.55; color: var(--text-soft-dark); }
.aside-card p + p { margin-top: 14px; }
.aside-card .link-underline { margin-top: 20px; }

/* ---------------------------------------------------------- timeline --- */

.timeline { padding-top: 40px; display: grid; gap: 0; }
.tl-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 28px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule-12);
}
.tl-row:first-child { border-top: 1px solid var(--rule-12); }
.tl-time {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--accent);
  padding-top: 3px;
}
.tl-what h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--paper);
}
.tl-what p { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--text-soft-dark); }

/* --------------------------------------------------------------- faq --- */

.faq { padding-top: 36px; max-width: 900px; }
.faq details {
  border-bottom: 1px solid var(--border-light);
}
.faq summary {
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.15;
  text-transform: uppercase;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--red);
  line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--red); }
.faq .answer { padding: 0 0 24px; max-width: 720px; }
.faq .answer p { font-size: 17px; line-height: 1.6; color: var(--text-body); }
.faq .answer p + p { margin-top: 14px; }

/* ---------------------------------------------------------- cta band --- */

.cta-band { background: var(--red); color: #fff; padding: 72px var(--pad-x); }
.cta-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: center;
}
.cta-band h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 0.95;
  text-transform: uppercase;
}
.cta-band p { margin-top: 16px; max-width: 560px; font-size: 18px; line-height: 1.5; color: rgba(255,255,255,0.9); }
.cta-band .btn-ink:hover { background: var(--accent); color: var(--ink); }
.cta-band .btn-outline-light { border-color: rgba(255,255,255,0.6); color: #fff; }
.cta-band .btn-outline-light:hover { background: rgba(255,255,255,0.15); border-color: #fff; }

/* --------------------------------------------------- related / cross --- */

.related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding-top: 36px;
}
.related-card {
  display: flex;
  flex-direction: column;
  min-height: 200px;
  padding: 30px;
  background: var(--white);
  border: 1px solid var(--border-light);
  color: var(--ink);
}
.related-card:hover { border-color: var(--ink); color: var(--ink); }
.related-card .result-title { font-size: 32px; }

@media (max-width: 900px) {
  .facts-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact { border-right: 0; border-bottom: 1px solid var(--rule-14); padding-left: 0 !important; padding-right: 0; }
  .body-split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cta-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .related-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .facts-inner { grid-template-columns: minmax(0, 1fr); }
  .page-hero-inner { padding: 48px var(--pad-x) 44px; }
  .tl-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .faq summary { font-size: 20px; }
  .cta-band { padding: 48px var(--pad-x); }
}

/* Discipline cards carry two links now: the deep-dive page (primary) and a
   direct registration link (quiet). */
.card-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 20px; margin-top: 18px; }
.card-links .link-underline { margin-top: 0; }
.link-quiet { color: var(--text-muted); border-bottom-color: var(--border-light); }
.link-quiet:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ==========================================================================
   Results and standings (standings.html)
   Data comes from the timing database via results.js. Mobile first: the most
   likely reader is holding a phone in direct sun, standing in grid.
   ========================================================================== */

.results-head { background: var(--ink); color: var(--paper); padding: 56px var(--pad-x) 40px; }
.results-head .crumb { margin-bottom: 22px; }
.results-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.results-head .page-title { font-size: clamp(40px, 6vw, 68px); }
.results-meta {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--text-muted-dark);
}

.results-tabs {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: var(--ink);
  border-bottom: 1px solid var(--rule-18);
  padding: 0 var(--pad-x);
}
.results-tabs-inner { display: flex; gap: 0; }
.rtab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 16px 24px 13px;
  color: var(--text-muted-dark);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease);
}
.rtab:first-child { padding-left: 0; }
.rtab:hover { color: var(--paper); }
.rtab.is-active { color: var(--paper); border-bottom-color: var(--red); }

/* ------------------------------------------------------------ filters --- */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px;
  padding-bottom: 26px;
  border-bottom: 2px solid var(--ink);
}
.filter { display: flex; flex-direction: column; gap: 7px; }
.filter-grow { flex: 1 1 240px; }
.filter span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.filter select,
.filter input {
  border: 1px solid var(--border-light);
  background: var(--white);
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 16px;               /* 16px stops iOS zooming the page on focus */
  color: var(--ink);
  min-height: 46px;              /* tap target */
  transition: border-color var(--ease);
}
.filter select:focus, .filter input:focus { border-color: var(--red); outline: none; }
.filter-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 14px;
}

.data-status {
  padding: 28px 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}
.data-note {
  display: inline-block;
  margin: 24px 0 0;
  padding: 10px 14px;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------------- tables --- */

.class-block { padding-top: 44px; }
.class-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
}
.class-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  text-transform: uppercase;
}
.class-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.results-table { width: 100%; border-collapse: collapse; }
.results-table th {
  padding: 14px 12px 12px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
}
.results-table td {
  padding: 16px 12px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: baseline;
}
.results-table tr:last-child td { border-bottom: 0; }
.results-table th:first-child, .results-table td:first-child { padding-left: 0; }
.results-table th:last-child,  .results-table td:last-child  { padding-right: 0; }
.results-table th.num, .results-table td.num { text-align: right; }

.results-table .pos {
  width: 52px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
}
.results-table .pos.is-leader { color: var(--red); font-weight: 600; }
.driver-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.1;
  text-transform: uppercase;
}
.results-table .car {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-body);
}
.results-table .rounds { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.results-table .total { font-family: var(--font-mono); font-size: 15px; white-space: nowrap; }

.archive-note {
  max-width: 640px;
  margin-top: 26px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-soft-dark);
}

/* No horizontal scrolling tables on a phone: restack each row as a block. */
@media (max-width: 760px) {
  .results-table thead { display: none; }
  .results-table, .results-table tbody, .results-table tr, .results-table td { display: block; }
  .results-table tr {
    position: relative;
    padding: 16px 0 16px 46px;
    border-bottom: 1px solid var(--border-light);
  }
  .results-table td { padding: 0; border: 0; }
  .results-table td.pos {
    position: absolute;
    left: 0;
    top: 18px;
    width: 38px;
    font-size: 15px;
  }
  .results-table td.driver { padding-right: 74px; }
  .results-table td.car { margin-top: 4px; }
  .results-table td.rounds { display: inline; }
  .results-table td.rounds::after { content: " rounds"; }
  .results-table td.total {
    position: absolute;
    right: 0;
    top: 16px;
    font-size: 17px;
  }
  .filter-count { margin-left: 0; width: 100%; padding-bottom: 0; }
  .results-tabs { position: static; }
}

/* ==========================================================================
   Standings ladder
   Ported from the "CCR Standings Ladder" handoff into this site's tokens
   rather than its own Modernist sheet, so standings reads as the same website
   as the rest of the pages. Structure, hierarchy and chip states are the
   handoff's; type and color are ours.

   The load-bearing idea: one horizontal band per driver, round scores as a
   chip strip. It needs no horizontal scroll at any width, so desktop and phone
   share a structure and the chip strip simply reflows to its own line.
   ========================================================================== */

/* Stat row under the page header */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--rule-18);
}
.stat {
  padding: 20px 20px 20px 0;
  border-right: 1px solid var(--rule-14);
}
.stat:not(:first-child) { padding-left: 20px; }
.stat:last-child { border-right: 0; padding-right: 0; }
.stat dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stat dd {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.stat dd .of { color: var(--text-muted-dark); font-size: 18px; }
.stat dd small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12.5px;
  color: var(--text-muted-dark);
}

/* ------------------------------------------------------- ladder layout --- */

.ladder-layout {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* Left rail: class picker */
/* The rail rides the page scroll like any other content. It grew its own
   scrollbar briefly, but two scrollbars side by side read as confusing; the
   snap-back on class select (see select() in results.js) does the job. */
.rail { position: sticky; top: calc(var(--header-h) + 20px); }
.rail-head {
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rail-group { margin-top: 18px; }
.rail-group-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.rail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease);
}
.rail-item:hover { background: var(--ink-wash); }
.rail-item .count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.rail-item.is-active {
  border-left-color: var(--red);
  background: var(--red-tint);
  color: var(--red-ink);
  font-weight: 600;
}
.rail-item.is-active .count { color: var(--red-ink); opacity: 0.7; }

/* Mobile class chips, hidden on desktop */
.class-chips { display: none; }

/* ------------------------------------------------------- ladder header --- */

.ladder-head {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
}
.ladder-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  text-transform: uppercase;
}
.ladder-blurb {
  margin-top: 6px;
  max-width: 56ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-body);
}
.ladder-search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  background: var(--white);
  border: 1px solid var(--border-light);
  transition: border-color var(--ease);
}
.ladder-search:focus-within { border-color: var(--red); }
.ladder-search svg { flex: none; opacity: 0.5; }
.ladder-search input {
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--font-body);
  font-size: 15px;
  width: 180px;
  color: var(--ink);
}

.ladder-cols {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ladder-cols .c-pos    { width: 52px; }
.ladder-cols .c-driver { flex: 1; }
.ladder-cols .c-rounds { width: 240px; }
.ladder-cols .c-points { width: 86px; text-align: right; }

/* ---------------------------------------------------------- ladder row --- */

.ladder-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
  transition: background-color var(--ease);
}
.ladder-row:hover { background: rgba(20, 22, 26, 0.04); }

/* The size step between podium and the rest is the main visual hierarchy of
   this design. Keep it. */
.lad-pos {
  width: 52px;
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 0.9;
  color: var(--neutral-400);
  font-variant-numeric: tabular-nums;
}
.ladder-row.is-podium .lad-pos { font-size: 38px; color: var(--red); }

.lad-driver { flex: 1; min-width: 0; }
.lad-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lad-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.1;
  text-transform: uppercase;
}
.lad-sub {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tag-accent  { background: var(--red-tint); color: var(--red-ink); }
.tag-neutral { background: var(--ink-wash); color: var(--text-body); }

/* Round chips. Three states, exactly as the handoff specifies. */
.lad-chips { width: 240px; flex: none; display: flex; gap: 4px; }
.chip {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 5px 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.chip-scored {                       /* counting toward the total */
  background: var(--red-tint);
  border: 1px solid var(--red-tint-border);
  color: var(--red-ink);
  font-weight: 500;
}
.chip-dropped {                      /* entered, not counted */
  border: 1px dashed var(--neutral-400);
  color: var(--text-body);
}
.chip-absent {                       /* did not enter */
  border: 1px solid var(--border-light);
  color: var(--text-muted);
}

.lad-points { width: 86px; flex: none; text-align: right; }
.lad-total {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lad-gap {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.ladder-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
  font-size: 12.5px;
  color: var(--text-body);
}
.ladder-legend .push { margin-left: auto; }

/* ----------------------------------------------------------- responsive --- */

@media (max-width: 900px) {
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding-left: 0 !important; padding-right: 20px; border-bottom: 1px solid var(--rule-14); }
  .stat:nth-child(2n) { border-right: 0; padding-right: 0; }

  .ladder-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rail { display: none; }

  /* The rail becomes a horizontally scrolling chip row. This is the only
     horizontal scroll on the page, and it is a control strip, not data. */
  .class-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 0 14px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--ink);
    -webkit-overflow-scrolling: touch;
  }
  .class-chip {
    flex: none;
    padding: 9px 14px;
    background: transparent;
    border: 1px solid var(--border-light);
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.06em;
    color: var(--ink);
    cursor: pointer;
    min-height: 40px;
  }
  .class-chip.is-active { background: var(--red); border-color: var(--red); color: #fff; }

  .ladder-cols { display: none; }
  .ladder-search { margin-left: 0; width: 100%; }
  .ladder-search input { width: 100%; }
  .ladder-head h2 { font-size: 26px; }

  /* Row becomes two stacked lines: identity line (position, name, total), then
     the chip strip. The chip strip is width:100% so it forces the wrap; the
     explicit order pulls the points block up onto line one ahead of it. */
  .ladder-row { flex-wrap: wrap; padding: 13px 0; gap: 0 12px; }
  .lad-pos    { order: 1; width: 32px; font-size: 22px; }
  .lad-driver { order: 2; }
  .lad-points { order: 3; width: auto; margin-left: auto; }
  .lad-chips  { order: 4; width: 100%; margin-top: 9px; }
  .ladder-row.is-podium .lad-pos { font-size: 28px; }
  .lad-total { font-size: 20px; }
  .lad-name { font-size: 16.5px; }
  .ladder-legend { gap: 8px 20px; font-size: 12px; }
  .ladder-legend .push { margin-left: 0; }
}

/* Light-ground variant of the schedule table, for the discipline pages where
   the calendar sits on paper rather than ink. Same geometry, inverted rules. */
.schedule-light .sched-head {
  border-bottom-color: var(--border-light);
  color: var(--text-muted);
}
.schedule-light .sched-row {
  color: var(--ink);
  border-bottom-color: var(--border-light);
}
.schedule-light a.sched-row:hover { background: rgba(20, 22, 26, 0.04); color: var(--ink); }
.schedule-light .sched-row.is-next { background: var(--red-tint); border-left-color: var(--red); }
.schedule-light a.sched-row.is-next:hover { background: var(--red-tint-border); }
.schedule-light .cell-date  { color: var(--red); }
.schedule-light .cell-venue { color: var(--text-body); }
.schedule-light .cell-rnd   { color: var(--text-muted); }
.schedule-light .status-complete,
.schedule-light .status-soon { color: var(--text-muted); }

/* The venue strings on the hillclimb calendar are long ("Joyce Kilmer Memorial
   Forest · Robbinsville, NC"), so this table gets a wider venue column. */
.schedule-light { --sched-cols: 64px 118px minmax(0, 1fr) 300px 110px; }
.schedule-light .schedule-actions { margin-top: 32px; }

/* ==========================================================================
   Hero carousel
   Slides stack in one grid cell and cross-fade. The next-event card sits
   above them and never rotates.
   ========================================================================== */

.hero { display: block; position: relative; }

.hero-slides { display: grid; }
.hero-slide {
  grid-area: 1 / 1;                /* every slide in the same cell */
  position: relative;
  min-height: 660px;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms ease, visibility 0s linear 400ms;
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 400ms ease, visibility 0s;
}

/* The next-event card is pulled out of the slide flow so it stays put while
   the slides change underneath it. */
.hero .next-card {
  position: absolute;
  right: max(var(--pad-x), calc((100% - var(--container)) / 2 + var(--pad-x)));
  bottom: 56px;
  width: 320px;
  z-index: 3;
}
.hero .hero-inner {
  grid-template-columns: minmax(0, 1fr) 320px;
}

/* Carousel chrome */
.hero-controls {
  position: absolute;
  left: max(var(--pad-x), calc((100% - var(--container)) / 2 + var(--pad-x)));
  bottom: 20px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-arrow, .hero-pause {
  appearance: none;
  background: rgba(20, 22, 26, 0.55);
  border: 1px solid var(--rule-35);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease);
  backdrop-filter: blur(6px);
}
.hero-arrow { width: 34px; height: 34px; line-height: 1; }
.hero-pause { height: 34px; padding: 0 12px; text-transform: uppercase; font-size: 10.5px; }
.hero-arrow:hover, .hero-pause:hover { background: var(--red); border-color: var(--red); }

.hero-dots { display: flex; align-items: center; gap: 7px; }
.hero-dot {
  appearance: none;
  width: 30px;
  height: 4px;
  padding: 0;
  border: 0;
  background: var(--rule-40);
  cursor: pointer;
  transition: background-color var(--ease);
}
.hero-dot:hover { background: var(--text-soft-dark); }
.hero-dot.is-active { background: var(--red); }

@media (max-width: 900px) {
  .hero-slide { min-height: 0; }
  .hero .next-card {
    position: static;
    width: auto;
    margin: 0 var(--pad-x) 24px;
  }
  .hero .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-controls {
    position: static;
    padding: 16px var(--pad-x);
    background: var(--ink);
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* ------------------------------------------------------------- pricing --- */

.pricing-card { background: var(--ink); color: var(--paper); padding: 30px; }
.price-list { display: flex; flex-direction: column; margin-top: 20px; }
.price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule-14);
}
.price-row:last-child { border-bottom: 0; }
.price-row dt { font-size: 15.5px; }
.price-row dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.price-row .price { color: var(--accent); }
.price-row-note dt, .price-row-note dd { color: var(--text-muted-dark); }
.price-row-note dd { font-size: 20px; }
.pay-note {
  margin-top: 20px;
  padding: 12px 14px;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  line-height: 1.45;
}
.pricing-cta { display: block; margin-top: 18px; text-align: center; }

/* --------------------------------------------- schedule discipline icons --- */

/* The calendar mixes three sanctions that share nothing with each other, so
   each row is tagged. Shape carries the meaning as well as color: a cone for
   autocross, peaks for hillclimb, a chequer block for road racing. Never
   color alone. */
.schedule { --sched-cols: 44px 60px 118px minmax(0, 1fr) 220px 130px; }
.schedule-light { --sched-cols: 44px 60px 118px minmax(0, 1fr) 280px 110px; }

.cell-disc { display: flex; align-items: center; }
.disc-icon { width: 19px; height: 19px; display: block; flex: none; }
.cell-disc[data-disc="ax"] { color: var(--red); }
.cell-disc[data-disc="hc"] { color: var(--accent); }
.cell-disc[data-disc="rr"] { color: var(--text-soft-dark); }
.schedule-light .cell-disc[data-disc="hc"] { color: #8A6508; }   /* the yellow fails on paper, so a darkened version */
.schedule-light .cell-disc[data-disc="rr"] { color: var(--text-muted); }

/* The label is for assistive tech and for the header row only. */
.disc-label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.sched-head .cell-disc .disc-label {
  position: static; width: auto; height: auto; clip: auto; overflow: visible;
}

.schedule-note {
  max-width: 60ch;
  margin-top: 28px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-soft-dark);
}
.schedule-note strong { color: var(--red); }
.section-light .schedule-note { color: var(--text-body); }

.results-intro {
  max-width: 62ch;
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-body);
}

/* A visible legend beats a hidden one when three event types share a table. */
.disc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.disc-legend span { display: flex; align-items: center; gap: 7px; }

@media (max-width: 760px) {
  /* Stacked rows: the icon rides on the date line. */
  .sched-row {
    grid-template-areas:
      "disc rnd  date status"
      "evt  evt  evt  evt"
      "ven  ven  ven  ven";
    grid-template-columns: auto auto minmax(0, 1fr) auto;
  }
  .cell-disc { grid-area: disc; }
}

/* ==========================================================================
   First-time guide
   ========================================================================== */

/* Myth-busting grid: the question in the club's voice, the answer plainly. */
.myth-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding-top: 40px;
}
.myth {
  padding: 26px 30px 26px 0;
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.myth:nth-child(3n) { border-right: 0; padding-right: 0; }
.myth:nth-child(3n+2) { padding-left: 30px; }
.myth:nth-child(3n) { padding-left: 30px; }
.myth:nth-last-child(-n+3) { border-bottom: 0; padding-bottom: 0; }
.myth-q {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--red);
}
.myth-a { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--text-body); }

/* Packing checklist. Ticks persist per device: the useful version of this page
   is the one you open again the night before. */
.pack-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-top: 40px;
}
.pack-col h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  text-transform: uppercase;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 6px;
}
.pack-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 15.5px;
  line-height: 1.45;
  cursor: pointer;
  min-height: 46px;              /* tap target */
}
.pack-item input {
  appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1px solid var(--text-muted);
  background: var(--white);
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease);
}
.pack-item input:checked {
  background: var(--red);
  border-color: var(--red);
  /* Tick drawn in the box, no icon font needed. */
  background-image: linear-gradient(45deg, transparent 46%, #fff 46%, #fff 58%, transparent 58%),
                    linear-gradient(-45deg, transparent 62%, #fff 62%, #fff 74%, transparent 74%);
  background-size: 12px 12px, 12px 12px;
  background-position: 2px 6px, 5px 1px;
  background-repeat: no-repeat;
}
.pack-item input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.pack-item input:checked + span { color: var(--text-muted); text-decoration: line-through; }
.pack-note {
  margin-top: 16px;
  padding: 14px;
  background: var(--red-tint);
  border-left: 3px solid var(--red);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--red-ink);
}

@media (max-width: 900px) {
  .myth-grid, .pack-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .myth {
    padding: 22px 0 !important;
    border-right: 0;
    border-bottom: 1px solid var(--border-light);
  }
  .myth:last-child { border-bottom: 0; }
  .pack-grid { gap: 32px; }
}

/* First-timer entry band: a full-width click target between the hero and the
   rest of the page, because for a newcomer this is the most important link
   on the site and it should not be findable only by scrolling. */
.first-band {
  display: block;
  background: var(--accent-ground);
  color: var(--on-accent-ground);
  padding: 34px var(--pad-x);
  transition: background-color var(--ease);
}
.first-band:hover { background: #C6C9CD; color: var(--on-accent-ground); }
.first-band-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.first-band-copy { display: block; flex: 1 1 420px; }
.first-band-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-accent-quiet);
}
.first-band-title {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 0.95;
  text-transform: uppercase;
}
.first-band-body {
  display: block;
  margin-top: 10px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.5;
}
.first-band-cta {
  flex: none;
  padding: 16px 26px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color var(--ease);
}
.first-band:hover .first-band-cta { background: var(--red); color: #fff; }

@media (max-width: 640px) {
  .first-band { padding: 26px var(--pad-x); }
  .first-band-title { font-size: 34px; }
  .first-band-cta { width: 100%; text-align: center; }
}

/* Current page in the nav, so people know where they are. */
.site-nav a[aria-current="page"] { color: var(--red); }

/* ==========================================================================
   Event archive and per-event pages
   ========================================================================== */

.provisional-band {
  background: var(--red);
  color: #fff;
  padding: 14px var(--pad-x);
  font-size: 15px;
  line-height: 1.5;
}
.provisional-band .wrap { max-width: var(--container); margin: 0 auto; }

/* --------------------------------------------------------- archive grid --- */

.arc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding-top: 28px;
}
.arc-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--border-light);
  color: var(--ink);
  transition: border-color var(--ease), background-color var(--ease);
}
a.arc-card:hover { border-color: var(--ink); color: var(--ink); background: #fff; }
.arc-card:not(a) { opacity: 0.72; }        /* not yet run, so not clickable */

.arc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.arc-disc { display: flex; align-items: center; }
.arc-disc[data-disc="ax"] { color: var(--red); }
.arc-disc[data-disc="hc"] { color: #8A6508; }
.arc-disc[data-disc="rr"] { color: var(--text-muted); }
.arc-date {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.arc-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.05;
  text-transform: uppercase;
}
.arc-venue { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.arc-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }
.arc-tag {
  padding: 4px 9px;
  background: var(--ink-wash);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-body);
}
.arc-tag-on   { background: var(--red-tint); color: var(--red-ink); }
.arc-tag-open { background: var(--red); color: #fff; }

/* ------------------------------------------------------------- gallery --- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding-top: 32px;
}
.gal-item {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: rgba(242, 240, 235, 0.06);
  aspect-ratio: 4 / 3;
  cursor: pointer;
  overflow: hidden;
}
.gal-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 200ms ease;
}
.gal-item:hover img { transform: scale(1.04); }
.gal-likes {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 8px;
  background: rgba(20, 22, 26, 0.7);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  backdrop-filter: blur(6px);
}

/* ------------------------------------------------------------ lightbox --- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 70px;
  background: rgba(20, 22, 26, 0.94);
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-close, .lb-nav {
  position: absolute;
  appearance: none;
  background: rgba(242, 240, 235, 0.1);
  border: 1px solid var(--rule-35);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 16px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  transition: background-color var(--ease);
}
.lb-close:hover, .lb-nav:hover { background: var(--red); border-color: var(--red); }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb-caption {
  position: absolute;
  left: 0; right: 0; bottom: 16px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted-dark);
}

@media (max-width: 640px) {
  .lightbox { padding: 56px 12px; }
  .lb-prev { left: 6px; }
  .lb-next { right: 6px; }
  .arc-grid { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Driver head-to-head (compare.html)
   ========================================================================== */

.vs-pickers {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  margin-top: 32px;
}
/* Clears the picker labels so the buttons line up with the inputs, not the
   labels above them. --vs-label-h is measured against the real label. */
.vs-pickers > .btn { margin-top: 21px; }
/* Everything a picker reveals (the chosen car, then the class chips) stacks
   below the input and grows downward. The row is top-aligned so none of that
   can push the inputs or the buttons around as you make choices. */
.vs-pick {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1 1 240px;
}
.vs-pick input {
  border: 1px solid var(--rule-35);
  background: rgba(242, 240, 235, 0.06);
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 16px;              /* stops iOS zooming on focus */
  color: var(--paper);
  min-height: 48px;
  transition: border-color var(--ease);
}
.vs-pick input::placeholder { color: var(--text-muted); }
.vs-pick input:focus { border-color: var(--accent); outline: none; }
.vs-word {
  margin-top: 21px;
  padding-top: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 12px;
}
/* Announced to screen readers only: how many drivers the typed text matches. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The driver combobox. The car under each name is the whole point: it is how
   you tell two drivers with the same name apart, and how you recognise the
   person you actually raced. */
.vs-pick > label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.vs-combo { position: relative; display: flex; flex-direction: column; }
.vs-opts {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  /* Wider than the input when the car names need it, so "1988 Volkswagen
     Scirocco" stays on one line instead of wrapping mid-word. */
  min-width: 100%;
  width: max-content;
  max-width: min(360px, 86vw);
  z-index: 40;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  max-height: 296px;
  overflow-y: auto;
  background: var(--ink);
  border: 1px solid var(--rule-35);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
}
.vs-opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 14px;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.vs-opt.is-active { background: rgba(242, 240, 235, 0.09); border-left-color: var(--accent); }
.vs-opt-name { font-family: var(--font-body); font-size: 15px; color: var(--paper); }
.vs-opt-car {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.vs-opt-none { color: var(--text-muted); font-size: 14px; cursor: default; }
/* One chip per car, for a driver who runs more than one. The comparison is
   always scoped to a single class, so exactly one chip is always on. */
.vs-classes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.vs-class-label {
  flex: 1 1 100%;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.vs-class-chip {
  /* Full-width rows: a ragged set of content-width chips reads as clutter in a
     narrow column, and these behave like a radio list anyway. */
  flex: 1 1 100%;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 9px;
  padding: 7px 11px;
  text-align: left;
  background: transparent;
  border: 1px solid var(--rule-35);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color var(--ease), color var(--ease), background-color var(--ease);
}
.vs-class-chip:hover { border-color: var(--paper); color: var(--paper); }
.vs-class-chip.is-on {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.vs-class-code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.vs-class-car { font-family: var(--font-body); font-size: 11.5px; opacity: 0.85; }
/* Full strength on the selected chip: white on the red is 4.65:1, and dimming
   it with opacity pushes it under the AA floor. */
.vs-class-chip.is-on .vs-class-car { opacity: 1; }

/* What you picked stays visible, so you can see you got the right car. */
.vs-chosen {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--accent);
}
.vs-hint {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* ------------------------------------------------------------- verdict --- */

.vs-verdict { padding-bottom: 30px; border-bottom: 2px solid var(--ink); }
.vs-verdict-kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.vs-verdict-line {
  margin-top: 12px;
  max-width: 34ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  text-transform: uppercase;
}
.vs-verdict-line strong { font-weight: 700; }
.vs-big { color: var(--red); }

.vs-names {
  display: flex;
  gap: 16px;
  padding: 22px 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.vs-name-a { color: var(--red); }
.vs-name-b { color: var(--text-body); }
.vs-name-a::before, .vs-name-b::before {
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 7px;
  background: currentColor;
}

.vs-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0;
  border-top: 1px solid var(--border-light);
}
.vs-stat {
  padding: 20px 20px 20px 0;
  border-bottom: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
}
.vs-stat:not(:first-child) { padding-left: 20px; }
.vs-stat-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.vs-stat-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.vs-stat-a { color: var(--red); }
.vs-stat-b { color: var(--ink); }
.vs-stat-sep { color: var(--border-light); font-weight: 400; }
.vs-stat-note { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }

/* --------------------------------------------------------- event table --- */

.vs-table .vs-side { min-width: 110px; }
.vs-time {
  font-family: var(--font-mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--text-body);
}
.vs-time.is-faster { color: var(--ink); font-weight: 600; }
.vs-time.is-faster::after {
  content: ' ▲';
  font-size: 9px;
  vertical-align: 2px;
  color: var(--red);
}
.vs-sub {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.vs-gap-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.vs-event-link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--border-light);
}
.vs-event-link:hover { color: var(--red); border-bottom-color: var(--red); }

.vs-bar-cell { width: 130px; }
.vs-bar { height: 8px; background: var(--ink-wash); }
.vs-bar-fill { display: block; height: 100%; }
.vs-bar-fill.is-a { background: var(--red); }
.vs-bar-fill.is-b { background: var(--ink); }

.vs-note {
  max-width: 62ch;
  margin-top: 26px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

@media (max-width: 760px) {
  .vs-word { display: none; }
  .vs-stat { padding-left: 0 !important; padding-right: 0; border-right: 0; }
  .vs-bar-cell { display: none; }
  .vs-table td { padding: 10px 8px; }
  .vs-table td:first-child { padding-left: 0; }
}

/* Best vs average toggle on the head-to-head */
.vs-metric { display: flex; align-items: center; gap: 10px; padding-bottom: 26px; flex-wrap: wrap; }
.vs-metric-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.vs-metric-btn {
  appearance: none;
  padding: 10px 16px;
  min-height: 42px;
  background: transparent;
  border: 1px solid var(--border-light);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}
.vs-metric-btn:hover { border-color: var(--ink); }
.vs-metric-btn.is-on { background: var(--red); border-color: var(--red); color: #fff; }


/* ---------------------------------------- event: time modes and run rows --- */

.mode-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
}
.mode-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 2px;
}
.mode-btn {
  padding: 7px 13px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}
.mode-btn:hover { border-color: var(--ink); }
.mode-btn.is-on { background: var(--red); border-color: var(--red); color: #fff; }
/* Full width so it sits on its own line under the buttons. */
.mode-note {
  flex: 1 1 100%;
  margin: 2px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* A driver name that can be opened to show the runs behind the time. */
.driver-toggle {
  display: inline-flex;
  /* Centre, not baseline: a 11px caret baselined against the display-weight
     driver name reads as a stray superscript mark. */
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.driver-caret {
  flex: none;
  font-size: 11px;
  line-height: 1;
  color: var(--red);
  transition: transform var(--ease);
}
tr.is-open .driver-caret { transform: rotate(90deg); }
.driver-toggle:hover .driver-name { text-decoration: underline; }
.driver-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.runs-row > .runs-cell { padding: 0 14px 16px; background: var(--ink-wash); }
.runs-wrap { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.run {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 82px;
  padding: 8px 11px;
  background: var(--paper);
  border: 1px solid var(--border-light);
}
.run.is-best { border-color: var(--red); }
.run-n {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.run-t { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--ink); }
.run.is-best .run-t { color: var(--red); }
.run-dnf { font-size: 12px; color: var(--text-muted); }
.run-cones { font-size: 10.5px; color: var(--red); }
.runs-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 8px 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

@media (max-width: 560px) {
  .runs-wrap { gap: 6px; }
  .run { min-width: 74px; padding: 7px 9px; }
  .run-t { font-size: 14px; }
}

/* The scale toggle sits under the metric toggle on the comparison page. */
.vs-scale { margin-top: -6px; }
.vs-scale-note {
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Scope selects on the comparison page. */
.vs-scope-row { margin: 0 0 18px; }
.vs-scope-select {
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  border: 1px solid var(--border-light);
  background: var(--paper);
  color: var(--ink);
}
.vs-scope-event { max-width: min(420px, 70vw); }

/* "How is this calculated" popovers on the comparison page. */
.vs-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 7px;
  padding: 0;
  border: 1px solid var(--text-muted);
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-style: normal;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  transition: border-color var(--ease), color var(--ease);
}
.vs-info:hover, .vs-info[aria-expanded="true"] { border-color: var(--red); color: var(--red); }
.vs-pop {
  position: absolute;
  z-index: 80;
  width: min(300px, 86vw);
  padding: 14px 16px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35);
}
.vs-pop-title {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.vs-pop-line { margin: 0 0 8px; font-size: 13px; line-height: 1.55; }
.vs-pop-line:last-child { margin-bottom: 0; }
.vs-pop-math {
  margin: 0 0 8px;
  padding: 7px 10px;
  background: rgba(242, 240, 235, 0.08);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--paper);
}

/* Season picker in the ladder head; the scroll target clears the sticky nav. */
.ladder-season { flex: none; }
.ladder-head h2, #active-name { scroll-margin-top: calc(var(--header-h) + 16px); }

/* The one season picker, on the tab strip, driving both tabs. It reads
   left-to-right as one phrase: [year] Championship | By event. */
.tab-season { order: -1; margin-right: 18px; display: flex; align-items: center; }
.tab-season select {
  padding: 7px 11px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  background: transparent;
  border: 1px solid var(--rule-35);
  color: var(--paper);
  cursor: pointer;
}
.tab-season select:focus { border-color: var(--accent); outline: none; }
.tab-season select option { color: var(--ink); }

/* ------------------------------------------------- quick cards (autocross) --- */
/* The three destinations the page exists for, first thing after the facts
   band. No overlap trick here: the facts band is full of text, and pulling
   the cards up covered it. */
.quick-section { padding-top: 40px; padding-bottom: 40px; }
.quick-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 860px) {
  .quick-row { grid-template-columns: 1fr; }
}
.quick-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--border-light);
  padding: 20px 22px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
  transition: transform var(--ease), border-color var(--ease);
}
.quick-card:hover { transform: translateY(-2px); border-color: var(--ink); }
.quick-card:hover .qc-title { color: var(--red); }
.quick-card .qc-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 5px;
  transition: color var(--ease);
}
.quick-card .qc-sub { font-size: 13.5px; color: var(--text-body); line-height: 1.5; }
.quick-card.qc-dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.quick-card.qc-dark .qc-sub { color: var(--text-soft-dark); }
.quick-card.qc-dark:hover .qc-title { color: var(--accent); }