/* ============================================================
   ENDUROCROSS — PAGES CORE
   Shared styling for every interior page Builder A owns:
   /2026-schedule/, /events/*, /tickets/, /event-location/*,
   /racers/, /rules-and-information/, /series/, /livestream/,
   /tv/, /foxsports/, /exclusive/, redirect stub pages.
   Requires tokens.css + global.css loaded first.
   ============================================================ */

/* Fixed-header height. Measured on a render: .site-header__bar is a
   42px brand image inside 0.7rem block padding = 67.16px at every
   breakpoint. Sticky offsets reference this instead of a magic
   number; promote to tokens.css when that file next opens. */
:root { --header-h: 67px; }
/* D-13 — lets block-size: 0 → auto interpolate for the FAQ slide-open
   below (Chrome 129+; ignored elsewhere). */
:root { interpolate-size: allow-keywords; }

/* ---- Page hero (lighter than the homepage gauntlet) -------- */
.page-hero {
  position: relative;
  padding: clamp(7.5rem, 6rem + 5vw, 11rem) var(--gutter) clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
  background: linear-gradient(180deg, var(--dirt-deep) 0%, var(--ink) 100%);
  overflow: clip;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 -100% 0;
  background-image:
    repeating-linear-gradient(115deg, oklch(0% 0 0 / 0.35) 0 2px, transparent 2px 68px);
  opacity: 0.5;
  pointer-events: none;
}
.page-hero__inner {
  position: relative;
  max-width: var(--page-max);
  margin-inline: auto;
}
.page-hero__crumb {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: var(--space-6);
  font-family: var(--font-data);
  font-size: var(--text-data);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-50);
}
.page-hero__crumb a { text-decoration: none; color: var(--bone-70); }
.page-hero__crumb a:hover { color: var(--hivis); }
.page-hero__crumb .x-mark { font-size: 0.55em; }
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.94;
  font-size: var(--text-h1);
  max-width: 22ch;
}
.page-hero h1 .hl { color: var(--x-red); }
.page-hero__lede {
  margin-top: var(--space-6);
  max-width: 58ch;
  font-size: var(--text-lg);
  color: var(--bone-70);
}
.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-8);
}
/* F-04 — the two registration deadlines, stated once as a pair so a
   racer never has to reconcile the rulebook and the FAQ. Data face,
   label over value, hairline-ruled like the event fact table. */
.page-hero__deadlines {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-8);
  margin: var(--space-6) 0 0;
  padding-top: var(--space-4);
  border-top: var(--hairline);
  max-width: 58ch;
}
.page-hero__deadlines > div { margin: 0; min-width: 14rem; }
.page-hero__deadlines dt {
  font-family: var(--font-data);
  font-size: var(--text-data);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-50);
}
.page-hero__deadlines dd {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--bone);
}
.page-hero__deadlines dd::first-line { color: var(--hivis); }

/* D-08 — the primary offer row sits directly under the lede so the
   buy action is above the fold on every interior hero. Below 760px
   the two buttons stack full width instead of shrinking into a
   two-up that puts either target under 44px. */
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
@media (max-width: 760px) {
  .page-hero__actions { flex-direction: column; align-items: stretch; }
  .page-hero__actions > .btn { width: 100%; justify-content: center; text-align: center; }
}

/* ---- Event hero: the offer lives above the fold (CORE.2) -------
   Two columns — copy + CTA left, obstacle photography right,
   duotoned so knockout type stays AA over any crop. */
.event-hero {
  position: relative;
  padding: clamp(4.5rem, 3.75rem + 3vw, 6.5rem) var(--gutter) clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
  background: linear-gradient(180deg, var(--dirt-deep) 0%, var(--ink) 100%);
  overflow: clip;
}
.event-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 -100% 0;
  background-image: repeating-linear-gradient(115deg, oklch(0% 0 0 / 0.35) 0 2px, transparent 2px 68px);
  opacity: 0.5;
  pointer-events: none;
}
.event-hero__inner {
  position: relative;
  max-width: var(--page-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
.event-hero__body .page-hero__crumb { margin-bottom: var(--space-6); }
.event-hero__body h1 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.94;
  font-size: var(--text-h1);
}
.event-hero__body h1 .hl { color: var(--x-red); }
.event-hero__body .page-hero__lede { margin-top: var(--space-3); }
.event-hero__status { margin-top: var(--space-4); }
.event-hero__data {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-family: var(--font-data);
  font-size: var(--text-sm);
  color: var(--bone-70);
}
.event-hero__data b { color: var(--bone); font-weight: 700; }
.event-hero__body .btn { margin-top: var(--space-6); }
.event-hero__visual {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  clip-path: var(--notch);
}
.event-hero__visual img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.25) sepia(0.18) saturate(1.3) hue-rotate(-6deg) brightness(0.72) contrast(1.08);
}
.event-hero__visual::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, oklch(0% 0 0 / 0.05) 0%, oklch(0% 0 0 / 0.45) 100%);
}
.event-hero__visual .x-mark {
  position: absolute;
  bottom: -0.65rem; left: -0.65rem;
  width: 4.5rem; height: 3.9rem;
  z-index: 1;
  filter: drop-shadow(0 8px 18px oklch(0% 0 0 / 0.6));
}
@media (max-width: 900px) {
  .event-hero__inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .event-hero__visual { order: -1; aspect-ratio: 16 / 10; }
}

/* ---- Event photo strip (Trevor 2026-09-06) -------------------
   Experiential band for spectator campaign landings, between the
   event hero and the details. The headline holds still while the
   photography drives left-to-right underneath it as the page
   scrolls (main.js [data-scroll-strip], transform-only motion).
   Reduced-motion and no-JS fall back to a native side-scroller —
   .is-driven is only added when the scroll drive takes over. */
.event-strip { overflow: clip; }
.event-strip__frame { position: relative; overflow-x: auto; }
.event-strip__frame.is-driven { overflow: hidden; }
.event-strip__track {
  display: flex;
  gap: var(--space-2);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}
.event-strip__track li { flex: 0 0 auto; }
.event-strip__track img {
  display: block;
  width: auto;
  height: clamp(18rem, 13rem + 20vw, 28rem);
  filter: grayscale(0.2) sepia(0.14) saturate(1.25) brightness(0.68) contrast(1.06);
}
.event-strip__head {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  gap: var(--space-4);
  padding: var(--gutter);
  text-align: center;
  pointer-events: none;
  background: radial-gradient(58% 72% at 50% 50%, oklch(0% 0 0 / 0.45), transparent 100%);
}
.event-strip__h {
  font-size: var(--text-h1);
  text-shadow: 0 2px 24px oklch(0% 0 0 / 0.55);
}
.event-strip__h .hl { color: var(--x-red); }
.event-strip__sub {
  font-size: var(--text-lg);
  color: var(--bone);
  text-shadow: 0 1px 12px oklch(0% 0 0 / 0.6);
}

/* ---- Section scaffolding ------------------------------------ */
.page-section { padding-block: var(--space-section); }
.page-section--tight { padding-block: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem) clamp(2.5rem, 2rem + 2vw, 4rem); }
/* D-07 — the hero → first-section hand-off is one rule for every
   template and lives in global.css (`main > :is(.page-hero,
   .event-hero, .article-hero) + *`), because the content pages never
   load this file. The old per-variant 20-26px hand-off that lived here
   is gone. */
.page-section--raised { background: var(--ink-raised); }
.page-section__head { max-width: 62rem; margin-bottom: var(--space-12); }
.page-section__head h2 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--text-h2);
  line-height: 0.96;
  margin-top: var(--space-3);
}
.page-section__head p {
  margin-top: var(--space-4);
  max-width: var(--measure);
  color: var(--bone-70);
  font-size: var(--text-lg);
}

/* ---- Sticky section nav (rules & long corpora) --------------- */
.corpus {
  display: grid;
  grid-template-columns: 15.5rem 1fr;
  gap: var(--space-12);
  align-items: start;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.corpus-nav {
  position: sticky;
  top: 6.5rem;
  display: grid;
  gap: 0.15rem;
  padding: var(--space-4);
  background: var(--ink-raised);
  clip-path: var(--notch);
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
}
.corpus-nav a {
  display: block;
  padding: 0.5rem 0.6rem;
  font-family: var(--font-data);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bone-70);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color var(--duration-fast), border-color var(--duration-fast), background-color var(--duration-fast);
}
.corpus-nav a:hover { color: var(--bone); background: oklch(30.02% 0.0388 67.04 / 0.3); }
.corpus-nav a.is-active { color: var(--hivis); border-left-color: var(--hivis); }
.corpus-body { min-width: 0; }
.corpus-block {
  padding-block: var(--space-8);
  border-bottom: var(--hairline);
  scroll-margin-top: 6rem;
}
.corpus-block:last-child { border-bottom: 0; }
.corpus-block h2 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--text-h3);
  margin-bottom: var(--space-4);
}
.corpus-block h3 {
  font-family: var(--font-data);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hivis);
  margin: var(--space-6) 0 var(--space-2);
}
.corpus-block p { color: var(--bone-70); max-width: var(--measure); margin-bottom: var(--space-3); }
.corpus-block ul, .corpus-block ol { margin: var(--space-2) 0 var(--space-4) 1.25em; color: var(--bone-70); display: grid; gap: 0.4rem; max-width: var(--measure); }
.corpus-block li { padding-left: 0.25em; }
.corpus-block strong { color: var(--bone); }

/* ---- Class-eligibility card (racers, rules corpora) --------------
   Promoted off 16+ repeated inline styles (CORE.11). */
.class-card { margin-bottom: var(--space-8); }
.class-card h3 { color: var(--x-red); }
.class-card__label {
  color: var(--bone-50);
  font-family: var(--font-data);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: var(--space-4);
}
/* De-emphasized inline annotation inside a heading, e.g. "— Round 6
   Only" (CORE.11). */
.text-muted-note { color: var(--bone-50); font-weight: 400; text-transform: none; letter-spacing: 0; }
@media (max-width: 960px) {
  .corpus { grid-template-columns: 1fr; }
  .corpus-nav { position: static; max-height: none; display: flex; flex-wrap: wrap; gap: 0.25rem; }
  .corpus-nav a { border-left: none; border-bottom: 2px solid transparent; }
  .corpus-nav a.is-active { border-bottom-color: var(--hivis); }
}

/* ---- Schedule board (season board) --------------------------- */
.board {
  display: grid;
  gap: 1px;
  background: var(--ink-edge);
  border: 1px solid var(--ink-edge);
}
.board__row {
  display: grid;
  /* D-12 — the place column is capped so a wide viewport spends its
     extra pixels on the row as a whole rather than stretching venue +
     city to ~680px and stranding the action column. The five-column
     row needs ~1000px of inner width; below that the stacked layout
     below takes over rather than wrapping every venue to two lines. */
  grid-template-columns:
    4.5rem
    minmax(14rem, 26rem)
    minmax(9rem, 14rem)
    11rem
    auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--ink);
  transition: background-color var(--duration-fast);
  position: relative;
}
.board__row:hover { background: var(--ink-raised); }
/* Back-to-back bracket: one fact, rendered once, as a hi-vis rule
   that visually ties the Rd5+Rd6 rows together in the left gutter —
   not a badge repeated on both rows (CORE.4). Padding headroom keeps
   it clear of the row divider; no negative-translate overlap. */
.board__row--bracket-start,
.board__row--bracket-end {
  padding-left: calc(var(--space-6) + 10px);
}
/* D-17 — the bracket label overhangs the row edge, so the row that
   carries it needs its own stacking context above the sibling row
   that reveals after it; without this the label is painted over
   mid-reveal. */
.board__row--bracket-start { z-index: 1; }
.board__row--bracket-start::before,
.board__row--bracket-end::before {
  content: "";
  position: absolute;
  left: var(--space-6);
  width: 3px;
  background: var(--hivis);
}
.board__row--bracket-start::before { top: 50%; bottom: 0; }
.board__row--bracket-end::before { top: 0; bottom: 50%; }
.board__row--bracket-start .board__bracket-label {
  position: absolute;
  left: calc(var(--space-6) + 10px);
  bottom: 0;
  transform: translateY(50%);
  padding: 0.3em 0.7em;
  background: var(--hivis);
  color: var(--ink);
  font-family: var(--font-data);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 0 0 3px var(--ink);
}
.board__rd {
  font-family: var(--font-stamp);
  font-size: 2rem;
  color: var(--x-red);
  line-height: 1;
}
.board__rd span { display: block; font-family: var(--font-data); font-size: 0.625rem; letter-spacing: 0.2em; color: var(--bone-50); margin-top: 0.3em; }
.board__place strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.375rem;
  letter-spacing: 0.01em;
}
.board__place span { display: block; margin-top: 0.2em; color: var(--bone-70); font-size: var(--text-sm); }
.board__date {
  font-family: var(--font-data);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.board__date strong { display: block; color: var(--bone); font-weight: 700; }
.board__date span { display: block; color: var(--bone-50); font-size: var(--text-sm); margin-top: 0.15em; }
.board__times { font-family: var(--font-data); font-size: var(--text-sm); color: var(--bone-70); display: grid; gap: 0.2rem; }
.board__times b { color: var(--bone); font-weight: 600; }
.board__cta { justify-self: end; }
/* D-12 — buy + detail sit as one cluster in the action column so the
   secondary link is a peer of the button, not a stray line under it. */
.board__actions {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  justify-self: end;
}
.board__more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-2);
  font-family: var(--font-data);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone-70);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast);
}
.board__more:hover { color: var(--hivis); }
.board__more:focus-visible { color: var(--hivis); }
/* Below the five-column row's ~1000px minimum: round in the gutter,
   place + date + times stacked beside it, actions on their own line.
   Reads at 320px and still fits a tablet (CORE.8: target ≤380px/row). */
@media (max-width: 1023px) {
  .board__row {
    grid-template-columns: 3rem 1fr auto;
    grid-template-areas:
      "rd place cta"
      "rd date  date"
      "rd times times"
      "rd actions actions";
    align-items: start;
    row-gap: 0.35rem;
    padding: var(--space-4) var(--space-5);
  }
  .board__rd { grid-area: rd; font-size: 1.5rem; align-self: start; }
  .board__place { grid-area: place; align-self: center; }
  .board__place strong { font-size: 1.0625rem; }
  .board__date {
    grid-area: date;
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    flex-wrap: wrap;
  }
  .board__date strong, .board__date span { display: inline; margin-top: 0; }
  .board__times {
    grid-area: times;
    display: flex;
    gap: 0.4em;
    font-size: 0.8125rem;
  }
  .board__times span { margin: 0; }
  .board__cta { grid-area: cta; justify-self: end; align-self: center; }
  .board__cta .btn { min-height: 44px; }
  /* D-12 mobile — when the cta cell carries the buy + detail cluster
     it is too wide for an auto third column (it forces the row past
     the viewport), so it drops to its own full-width line under the
     times and the top line becomes two columns. */
  .board__row:has(.board__actions) {
    grid-template-columns: 3rem 1fr;
    grid-template-areas:
      "rd place"
      "rd date"
      "rd times"
      "rd actions";
  }
  .board__cta:has(.board__actions) {
    grid-area: actions;
    justify-self: start;
    margin-top: 0.35rem;
  }
  .board__actions { display: inline-flex; flex-wrap: wrap; }
  .board__actions .btn { min-height: 44px; }
  .board__row--bracket-start,
  .board__row--bracket-end { padding-left: calc(var(--space-5) + 8px); }
  .board__row--bracket-start::before,
  .board__row--bracket-end::before { left: var(--space-5); }
  .board__row--bracket-start .board__bracket-label {
    position: static;
    display: inline-block;
    transform: none;
    margin-top: 0.5rem;
    grid-column: 1 / -1;
  }
}

/* ---- Venue grid (schedule + venue hub) ----------------------- */
.venue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1px;
  background: var(--ink-edge);
  border: 1px solid var(--ink-edge);
}
.venue-card { background: var(--ink); padding: var(--space-6); display: grid; gap: var(--space-2); }
.venue-card h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.25rem; }
.venue-card p { color: var(--bone-70); font-size: var(--text-sm); }
.venue-card a.ext { color: var(--hivis); font-size: var(--text-sm); text-decoration: none; }
.venue-card a.ext:hover { text-decoration: underline; }
.venue-card__rounds { margin-top: var(--space-2); display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* ---- Venue detail: facts left, event card + map right ------------
   Replaces the narrow centred column that left ~420px dead on each
   side (CORE.7). */
.venue-detail {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-12);
  align-items: start;
}
.venue-detail__facts dl { display: grid; gap: var(--space-3); margin-top: var(--space-6); max-width: var(--measure); }
.venue-detail__facts .row { display: flex; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--ink-edge); }
.venue-detail__facts dt { font-family: var(--font-data); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-50); }
.venue-detail__facts dd { color: var(--bone-70); text-align: right; }
/* Map link-out card — no third-party embed weight, honest about what
   it is: a link to the real map, not a fake static graphic. */
.venue-detail__map {
  margin-top: var(--space-6);
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  clip-path: var(--notch-sm);
  background:
    repeating-linear-gradient(115deg, oklch(100% 0 0 / 0.03) 0 2px, transparent 2px 44px),
    var(--ink-raised);
  display: grid;
  place-items: center;
  text-align: center;
  text-decoration: none;
  padding: var(--space-6);
  transition: background-color var(--duration-fast);
}
.venue-detail__map:hover { background-color: var(--ink); }
.venue-detail__map .stake { margin: 0 auto var(--space-4); }
.venue-detail__map strong { display: block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; color: var(--bone); }
.venue-detail__map span { display: block; margin-top: 0.3em; color: var(--hivis); font-family: var(--font-data); font-size: var(--text-sm); letter-spacing: 0.06em; }
@media (max-width: 900px) { .venue-detail { grid-template-columns: 1fr; } }

/* ---- Ticket hero offer (money page: rank, don't grid, Round 1) --- */
.hero-offer {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-10);
  align-items: center;
  padding: var(--space-10) var(--space-10);
  margin-bottom: 1px;
  background: linear-gradient(135deg, var(--dirt-deep) 0%, var(--ink-raised) 100%);
  clip-path: var(--notch);
  overflow: clip;
}
.hero-offer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(115deg, oklch(0% 0 0 / 0.3) 0 2px, transparent 2px 68px);
  opacity: 0.5;
  pointer-events: none;
}
.hero-offer__body { position: relative; }
.hero-offer__body .chip { margin-bottom: var(--space-4); }
.hero-offer__body h3 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.92;
  font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
}
.hero-offer__body h3 .hl { color: var(--x-red); }
.hero-offer__body p.lede { margin-top: var(--space-4); max-width: 42ch; color: var(--bone-70); font-size: var(--text-lg); }
.hero-offer__facts { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); font-family: var(--font-data); font-size: var(--text-sm); color: var(--bone-70); }
.hero-offer__facts b { color: var(--bone); font-weight: 700; }
.hero-offer__body .btn { margin-top: var(--space-8); }
.hero-offer__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  clip-path: var(--notch-sm);
}
.hero-offer__visual img { width: 100%; height: 100%; object-fit: cover; }
.hero-offer__visual::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, oklch(0% 0 0 / 0.05) 0%, oklch(0% 0 0 / 0.55) 100%);
}
@media (max-width: 900px) {
  .hero-offer { grid-template-columns: 1fr; padding: var(--space-8) var(--space-6); }
  .hero-offer__visual { order: -1; aspect-ratio: 16 / 9; }
}

/* ---- Round grid: the other 5 rounds, deliberately lighter -------- */
.round-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink-edge);
  border: 1px solid var(--ink-edge);
  border-top: 0;
}
.round-card { background: var(--ink); padding: var(--space-6); display: grid; gap: var(--space-2); }
.round-card h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.25rem; margin-top: var(--space-3); }
.round-card p { color: var(--bone-70); font-size: var(--text-sm); }
.round-card .btn { margin-top: var(--space-3); }
/* Secondary detail link on a round card — same target discipline as
   the board's, so a 44px tap area exists next to the buy button. */
.round-card__more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-2);
  margin-left: calc(var(--space-2) * -1);
  justify-self: start;
  font-family: var(--font-data);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone-70);
  text-decoration: none;
  transition: color var(--duration-fast);
}
.round-card__more:hover,
.round-card__more:focus-visible { color: var(--hivis); }
/* Season panel: fills the 3-up's odd sixth slot, links the full board.
   D-23 — a 3px hivis top inset (the same signal .watch__card--live
   uses) so the sixth tile reads as the deliberate odd one out rather
   than a round card that lost its date. Padding matches .round-card
   so the tile still sits on the grid's rhythm. */
.season-panel {
  background: var(--ink-raised);
  box-shadow: inset 0 3px 0 var(--hivis);
  padding: var(--space-6);
  display: grid;
  align-content: center;
  gap: var(--space-3);
  text-align: center;
}
.season-panel .x-mark { width: 2rem; height: 1.75rem; margin: 0 auto; }
.season-panel h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.0625rem; }
.season-panel p { color: var(--bone-70); font-size: var(--text-sm); }
@media (max-width: 900px) { .round-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .round-grid { grid-template-columns: 1fr; } }

/* ---- Event page detail block ---------------------------------- */
.event-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-12);
  align-items: start;
}
.event-fact {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-8);
  background: var(--ink-raised);
  clip-path: var(--notch);
}
/* Stacked cards (a venue hosting more than one round) get spacing
   between them without an inline margin on every instance. */
.event-fact + .event-fact { margin-top: var(--space-6); }
.event-fact dl { display: grid; gap: var(--space-3); }
.event-fact .row { display: flex; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--ink-edge); }
.event-fact .row:last-child { border-bottom: 0; padding-bottom: 0; }
.event-fact dt { font-family: var(--font-data); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-50); }
.event-fact dd { font-family: var(--font-data); font-weight: 600; text-align: right; }
.event-fact .btn { width: 100%; margin-top: var(--space-2); }
/* D-06 — the fact card's status chip is the one place a full-width
   banner chip is deliberate; every other chip stays fit-content. */
.event-fact > .chip { width: 100%; }
.event-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.event-links a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-family: var(--font-data);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bone-70);
  text-decoration: none;
  padding: 0.5rem 0.9rem;
  box-shadow: inset 0 0 0 1px var(--ink-edge);
}
.event-links a:hover { color: var(--bone); box-shadow: inset 0 0 0 1px var(--hivis); }
@media (pointer: coarse) {
  .event-links a { min-height: 44px; }
}
.policy-list { display: grid; gap: 0.5rem; margin-top: var(--space-4); }
.policy-list li { padding-left: 1.4em; position: relative; color: var(--bone-70); font-size: var(--text-sm); }
.policy-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; background: var(--hivis); transform: rotate(45deg); }
.event-prevnext { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-12); }
.event-prevnext a { text-decoration: none; color: var(--bone-70); font-family: var(--font-data); font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; }
.event-prevnext a:hover { color: var(--hivis); }
/* D-18 — the fact card is the offer, so it tracks the reader down
   the long policy column instead of scrolling away at the top. Only
   where there are two columns to track; the single-column stack
   below 901px keeps it static so it never covers the body. */
@media (min-width: 901px) {
  .event-grid__rail {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
    align-self: start;
  }
}
/* D-18 — prev/next round nav closes the page with the next step in
   the season rather than the footer. */
.event-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ink-edge);
  margin-top: var(--space-10);
}
.event-nav__cell {
  display: grid;
  gap: var(--space-2);
  align-content: center;
  padding: var(--space-6);
  background: var(--ink);
  text-decoration: none;
  color: var(--bone);
  min-height: 44px;
  transition: background-color var(--duration-fast);
}
.event-nav__cell:last-child { text-align: right; }
.event-nav__cell:hover,
.event-nav__cell:focus-visible { background: var(--ink-raised); }
.event-nav__kicker {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-50);
}
.event-nav__cell b {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--text-h3);
  line-height: 1.02;
}
.event-nav__cell:hover b { color: var(--hivis); }
@media (max-width: 560px) {
  .event-nav { grid-template-columns: 1fr; }
  .event-nav__cell:last-child { text-align: left; }
}
@media (max-width: 900px) { .event-grid { grid-template-columns: 1fr; } }

/* ---- Watch / broadcast tables ---------------------------------- */
.watch-table-wrap { overflow-x: auto; }
.watch-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.watch-table th, .watch-table td {
  padding: 0.7rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--ink-edge);
  font-size: var(--text-sm);
}
.watch-table th {
  font-family: var(--font-data);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hivis);
}
.watch-table td { color: var(--bone-70); font-family: var(--font-data); }
.watch-table tr:hover td { color: var(--bone); background: var(--ink-raised); }

/* ---- FAQ / disclosure -------------------------------------------- */
.faq-item { border-bottom: var(--hairline); }
/* Separates a disclosure group from the prose block above it
   (CORE.11). */
.faq-item--detached { margin-top: var(--space-10); }
/* Compact bottom padding when a details block wraps a plain <div>
   rather than a <p> (the .faq-item p rule doesn't apply). */
.faq-pad-bottom { padding-bottom: var(--space-4); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex: none;
  width: 0.6em; height: 0.6em;
  border-right: 2px solid var(--hivis);
  border-bottom: 2px solid var(--hivis);
  transform: rotate(45deg);
  transition: transform var(--duration-fast) var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
/* D-13 — the disclosure slides open instead of snapping. Progressive:
   browsers without ::details-content / interpolate-size drop these
   rules and keep the instant open. */
@media (prefers-reduced-motion: no-preference) {
  .faq-item::details-content {
    block-size: 0;
    overflow-y: clip;
    transition:
      block-size var(--duration-base) var(--ease-out),
      content-visibility var(--duration-base) allow-discrete;
  }
  .faq-item[open]::details-content { block-size: auto; }
}
.faq-item p { color: var(--bone-70); padding-bottom: var(--space-4); max-width: var(--measure); }

/* ---- FAQ layout: left rail (CTA + context) + disclosure stack ---
   Stops a long FAQ from floating as a narrow stranded column
   (CORE.6/CORE.7). Reuses the .corpus proportions. */
.faq-layout {
  display: grid;
  grid-template-columns: 15.5rem 1fr;
  gap: var(--space-12);
  align-items: start;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.faq-rail {
  position: sticky;
  top: 6.5rem;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--ink-raised);
  clip-path: var(--notch);
}
.faq-rail h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.0625rem; }
.faq-rail p { color: var(--bone-70); font-size: var(--text-sm); }
.faq-rail .btn { width: 100%; }
.faq-rail ul { display: grid; gap: 0.5rem; margin-top: var(--space-2); }
.faq-rail li a {
  display: block;
  color: var(--bone-70);
  text-decoration: none;
  font-family: var(--font-data);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  padding: 0.3rem 0;
}
.faq-rail li a:hover { color: var(--hivis); }
.faq-body { min-width: 0; }
@media (max-width: 960px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-rail { position: static; }
}

/* ---- Simple newsletter / form card (exclusive, sponsors etc) ------ */
.form-card {
  max-width: 34rem;
  padding: var(--space-8);
  background: var(--ink-raised);
  clip-path: var(--notch);
}
.form-card h2 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: var(--text-h3); }
.form-card p { margin-top: var(--space-3); color: var(--bone-70); }
.form-card fieldset { border: 0; padding: 0; margin: var(--space-6) 0 0; display: grid; gap: var(--space-3); }
.form-card label { display: block; font-family: var(--font-data); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-50); margin-bottom: 0.35rem; }
.form-card input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: var(--ink);
  color: var(--bone);
  box-shadow: inset 0 0 0 1px var(--ink-edge);
  border: 0;
}
.form-card input:focus-visible { box-shadow: inset 0 0 0 1px var(--hivis); }
.form-card .btn { margin-top: var(--space-2); }
.honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---- Two-column form pages (exclusive): the form on one side, the
   reason-to-subscribe on the other — no stranded narrow column
   marooned in a wide frame (CORE.7). */
.form-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
.form-split .form-card { max-width: none; }
.form-split__reason { display: grid; gap: var(--space-5); }
.form-split__reason .x-mark { width: 3.5rem; height: 3rem; }
.form-split__reason h3 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.96;
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
}
.form-split__reason p { color: var(--bone-70); max-width: 34ch; }
.form-split__reason ul { display: grid; gap: 0.6rem; margin-top: var(--space-2); }
.form-split__reason li { padding-left: 1.4em; position: relative; color: var(--bone-70); font-size: var(--text-sm); }
.form-split__reason li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; background: var(--hivis); transform: rotate(45deg); }
@media (max-width: 900px) {
  .form-split { grid-template-columns: 1fr; }
  .form-split__reason { order: -1; text-align: center; }
  .form-split__reason .x-mark { margin: 0 auto; }
  .form-split__reason p { margin-inline: auto; }
  .form-split__reason li { text-align: left; }
}

/* ---- Redirect stub pages ------------------------------------------ */
.redirect-stub {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-8) var(--gutter);
}
.redirect-stub .x-mark { width: 3.5rem; height: 3rem; margin: 0 auto var(--space-6); }
.redirect-stub h1 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: var(--text-h2); }
.redirect-stub p { margin-top: var(--space-4); color: var(--bone-70); }
.redirect-stub .btn { margin-top: var(--space-8); }

/* ---- Utility: sub-hero eyebrow --------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-data);
  font-size: var(--text-data);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hivis);
}

/* ---- Utility: repeated in-page heading/body patterns (CORE.11) ---
   Promoted off the most common inline style="" blocks across the
   scope so a heading's scale is part of the type system, not a
   one-off attribute. */
.section-head--sub-h2 { font-size: var(--text-h2); margin-top: var(--space-3); }
.section-head--sub-h3 { font-size: var(--text-h3); margin-top: var(--space-3); }
.body-copy { margin-top: var(--space-4); color: var(--bone-70); max-width: var(--measure); }
.body-copy--tight { margin-top: var(--space-3); color: var(--bone-70); max-width: var(--measure); }
.stack-tight > * + * { margin-top: var(--space-3); }
.li-indent { margin-left: 1.5em; }
.link-hivis { color: var(--hivis); }
.center-col { max-width: 52rem; margin-inline: auto; text-align: center; }
.center-col .eyebrow { justify-content: center; }
.center-col .page-hero__meta { justify-content: center; margin-top: var(--space-6); }

/* RESP F-08 — genuine prose reads at 16px on phones. Labels, eyebrows,
   chips and the data face keep their designed sizes. */
@media (max-width: 760px) {
  .policy-list li,
  .body-copy,
  .body-copy--tight { font-size: 1rem; }
}

/* ---- Whole-row click on the season board (Trevor 2026-09-03) ----
   Event Info stretches over the row; Tickets keeps its own hit area
   above the stretch. .board__row is already position:relative. */
.board__more::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.board__row .btn { position: relative; z-index: 2; }

/* ---- Venue rail — "Where the Season Runs" (Trevor 2026-09-03) ----
   Default composition = a swipeable snap rail (no-JS, reduced motion,
   phones). Desktop with motion gets the pinned horizontal scrub via
   venue-rail.js (.is-rail on the section). Slabs are ~3× the old
   venue card: 70% content over a 30% image band under a dark shade. */
.venue-rail {
  margin-top: var(--space-8);
  overflow-x: auto;
  overflow-y: clip;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-edge) transparent;
}
.venue-rail__track {
  display: flex;
  gap: var(--space-4);
  width: max-content;
  padding-bottom: var(--space-2);
}
.venue-slab {
  position: relative;
  scroll-snap-align: start;
  width: clamp(19rem, 30vw, 24rem);
  height: clamp(28rem, 62svh, 33rem);
  display: grid;
  grid-template-rows: minmax(0, 7fr) minmax(0, 3fr);
  background: var(--ink);
  border: 1px solid var(--ink-edge);
  overflow: clip;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.venue-slab:hover,
.venue-slab:focus-within { border-color: var(--hivis); }
.venue-slab__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
}
.venue-slab__rd { color: var(--hivis); }
.venue-slab h3 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
  line-height: 1.02;
}
.venue-slab__loc { color: var(--bone-70); }
.venue-slab__meta {
  margin-top: auto;
  display: grid;
  gap: var(--space-2);
}
.venue-slab__meta time {
  font-family: var(--font-data);
  font-weight: 700;
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.venue-slab__meta .data-label { color: var(--bone-50); }
.venue-slab__cta {
  color: var(--hivis);
  font-family: var(--font-data);
  font-size: var(--text-data);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.venue-slab__cta .arrow {
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease-out);
}
.venue-slab:hover .venue-slab__cta .arrow,
.venue-slab__cta:focus-visible .arrow { transform: translateX(3px); }
/* The whole slab is the venue link. */
.venue-slab__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.venue-slab__media {
  position: relative;
  overflow: clip;
  min-height: 0;
}
.venue-slab__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slow) var(--ease-out);
}
.venue-slab:hover .venue-slab__media img,
.venue-slab:focus-within .venue-slab__media img { transform: scale(1.05); }
/* Dark shade over the image, bleeding up from the content zone. */
.venue-slab__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--ink), transparent 55%),
    oklch(14.52% 0.0021 286.13 / 0.55);
}

/* Pinned scrub mode (venue-rail.js) — the section fills the viewport
   and vertical scroll drives the track sideways. */
.venue-rail-section.is-rail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
}
.venue-rail-section.is-rail .venue-rail {
  overflow: clip;
  scroll-snap-type: none;
}
.venue-rail-section.is-rail .venue-rail__track { will-change: transform; }

/* ---- Event hero CTA row (Trevor 2026-09-03) — Tickets + Register
   side by side; racer registration weighted like tickets. */
.event-hero__cta {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.event-hero__cta .btn { margin-top: 0; }

/* ---- Live timing & results embed --------------------------------------
   The resultsmx.com widget runs inside /results-embed/ (its own document)
   because the vendor CSS restyles bare body/h1-h6/a/p/table/button and
   would otherwise repaint the whole page. Here we only shape the frame
   that holds it, so it reads as one of the site's own panels: notched
   corners, raised surface, full bleed inside the wrap. Height is set by
   the frame itself via postMessage — no scrollbar, no dead space. */
.results-embed {
  margin-top: var(--space-8);
  background: var(--ink-raised);
  padding: var(--space-4);
  clip-path: var(--notch);
}
.results-embed__frame {
  display: block;
  width: 100%;
  /* Starting height; the frame posts its real height within a moment. */
  height: 5.5rem;
  border: 0;
  /* The widget paints its own light results table — keep it readable
     against the dark panel rather than forcing a theme it does not have. */
  background: var(--ink);
  clip-path: var(--notch-sm);
  transition: height var(--dur-2, 240ms) var(--ease-out, ease);
}
@media (prefers-reduced-motion: reduce) {
  .results-embed__frame { transition: none; }
}
.results-embed__fallback {
  margin-top: var(--space-6);
  color: var(--bone-70);
}
@media (max-width: 40rem) {
  .results-embed { padding: var(--space-2); }
}
/* The panel is a data surface, not part of the editorial flow — it does
   not animate in, so a slow third-party load can never strand it hidden
   (the tall-block lesson from /racers/). */
.results-embed { opacity: 1 !important; transform: none !important; }