/* ============================================================
   ENDUROCROSS — HOME · "THE GAUNTLET"
   Default styles = the COMPLETE static composition (reduced
   motion / no-JS): every phase readable, zero scroll-jacking.
   .gauntlet.is-animated = the pinned scroll experience; initial
   states there are set by GSAP, never by CSS, so content is
   never hidden from non-JS visitors.
   ============================================================ */

/* ---- Stage + shared layers ----------------------------------- */
.gauntlet { background: var(--ink); }
.gauntlet__stage { position: relative; overflow: clip; }

/* Static composition order: STAGING (the h1 poster) reads first,
   then the phases in lap order. DOM keeps staging last so the
   animated mode can stack it on top of the frame. */
.gauntlet:not(.is-animated) .gauntlet__stage { display: flex; flex-direction: column; }
.gauntlet:not(.is-animated) .gx-staging { order: -1; }
.gauntlet:not(.is-animated) .gx-frame { order: 1; display: flex; flex-direction: column; }

.gx-arena {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.22;
  /* Atmosphere only — the plate carries the same #22 as the apex
     cutout, so it is blurred and pushed back; scale hides the blur
     edge (D-02). */
  filter: blur(10px) brightness(0.55) saturate(0.6);
  transform: scale(1.06);
}
.gx-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 10%, transparent 30%, var(--ink) 88%),
    linear-gradient(to bottom, oklch(14.52% 0.0021 286.13 / 0.55), oklch(14.52% 0.0021 286.13 / 0.2) 40%, oklch(14.52% 0.0021 286.13 / 0.8));
}
.gx-frame { position: relative; }

.gx-phase { position: relative; }
.gx-phase__tag {
  color: var(--hivis);
  margin-bottom: var(--space-4);
}

/* ---- STAGING --------------------------------------------------- */
.gx-staging {
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  min-height: 92svh;
  padding: 7rem var(--gutter) 3rem;
}
.gx-x {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(16rem, 44vw, 34rem);
  height: clamp(16rem, 44vw, 34rem);
  transform: translate(-50%, -54%);
  opacity: 0.9;
}
/* Wide monitors (RESP F-02): the lockup keeps growing past the 1440
   cap instead of freezing at 168px / 34rem. Ramps are continuous
   from the 1440 values, so nothing at or below 1440 moves. Scoped
   here — 404 also uses --text-mega and must not change. */
@media (min-width: 1440px) {
  .gx-x {
    width: min(52rem, calc(34rem + (100vw - 1440px) * 0.44));
    height: min(52rem, calc(34rem + (100vw - 1440px) * 0.44));
  }
}
.gx-x__mark {
  position: absolute;
  inset: 0;
  background: var(--x-red);
  -webkit-mask: url("../img/brand/x-mark.svg") center / contain no-repeat;
  mask: url("../img/brand/x-mark.svg") center / contain no-repeat;
}

.gx-title {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  /* Shadow lives on the parent so it follows the glyphs (D-09). */
  filter: drop-shadow(0 4px 24px oklch(0% 0 0 / 0.55));
}
/* The logo's own ENDURO CROSS wordmark (Trevor 2026-09-03), not the
   headline face. viewBox 1150×460 includes the R spikes, so the box is
   taller than the two rows of letters read — the sub sits off the
   spike, which is how the logo itself stacks. */
.gx-title__mark {
  display: block;
  width: min(84vw, 46rem);
  height: auto;
  color: var(--bone);
  overflow: visible;
}
.gx-title__mark .ltr { transform-box: fill-box; transform-origin: center; }
/* Placed after the base rule so the cascade keeps it (RESP F-02). */
@media (min-width: 1440px) {
  .gx-title__mark {
    width: min(70rem, calc(46rem + (100vw - 1440px) * 0.46));
  }
}
.gx-sub {
  position: relative;
  z-index: 1;
  margin-top: var(--space-6);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--bone-70);
}
.gx-cue {
  position: relative;
  z-index: 1;
  margin-top: var(--space-12);
  color: var(--hivis);
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
}
.gx-cue__arrow {
  display: inline-block;
  /* Glyph baseline sat 1px low against the label (D-23). */
  transform: translateY(-1px);
}
/* A slow 4px bob under no-preference only. CSS owns this so the
   arrow never fights an inline anime transform; reduced motion gets
   the still arrow. */
@media (prefers-reduced-motion: no-preference) {
  .gx-cue__arrow { animation: cue-bob 1.6s ease-in-out infinite; }
}
@keyframes cue-bob {
  0%, 100% { transform: translateY(-1px); }
  50% { transform: translateY(3px); }
}

/* Next-round strip under the cue (UX F-05). One line, data face, sits
   inside the staging phase so it scales and fades out with the rest of
   the lockup as the lap begins. */
.gx-next {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em 1em;
  margin-top: var(--space-8);
  padding: var(--space-3) var(--space-4);
  border: var(--hairline);
  color: var(--bone);
  text-decoration: none;
  background: oklch(0% 0 0 / 0.35);
  transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.gx-next:hover,
.gx-next:focus-visible { border-color: var(--hivis); background: oklch(0% 0 0 / 0.55); }
.gx-next__k { color: var(--bone-50); }
.gx-next__v { color: var(--bone); }
.gx-next__cta { color: var(--hivis); }
.gx-next__cta span { display: inline-block; transition: transform var(--duration-fast) var(--ease-out); }
.gx-next:hover .gx-next__cta span,
.gx-next:focus-visible .gx-next__cta span { transform: translateX(0.25em); }
@media (max-width: 599px) {
  .gx-next { max-width: calc(100% - 2 * var(--gutter)); justify-content: center; }
  .gx-next__k { flex: 1 0 100%; }
}

/* ---- GATE ------------------------------------------------------- */
.gx-gate { padding: var(--space-16) var(--gutter); text-align: center; }
.gx-pack { margin-inline: auto; position: relative; z-index: 1; }
.gx-pack--far { max-width: min(34rem, 82%); margin-bottom: -22%; opacity: 0.85; }
.gx-pack--near { max-width: min(46rem, 96%); }
.gx-streaks { position: absolute; inset: 0; pointer-events: none; overflow: clip; }
.gx-streaks span {
  position: absolute;
  top: var(--sy, 20%);
  left: -30%;
  width: 55%; height: 2px;
  background: linear-gradient(to right, transparent, oklch(95.91% 0.0074 80.72 / 0.5), transparent);
  opacity: 0;
}
.gx-streaks span:nth-child(1) { --sy: 18%; }
.gx-streaks span:nth-child(2) { --sy: 34%; height: 1px; }
.gx-streaks span:nth-child(3) { --sy: 58%; }
.gx-streaks span:nth-child(4) { --sy: 76%; height: 1px; }
.gx-stake { position: absolute; height: 5rem; z-index: 2; opacity: 0; }
.gx-stake--l { left: 6%; top: 30%; }
.gx-stake--r { right: 7%; top: 55%; }
.gx-dirt { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.gx-dirt i {
  position: absolute;
  left: 50%; top: 70%;
  width: 5px; height: 5px;
  background: var(--dirt-lit);
  opacity: 0;
}

/* ---- LOGS -------------------------------------------------------- */
.gx-logs { padding: var(--space-16) var(--gutter); }
.gx-logs__plate-wrap {
  max-width: 60rem;
  margin-inline: auto;
  clip-path: var(--notch);
}
.gx-logs__plate { width: 100%; }
.gx-logs__fg { display: none; }
.gx-rider--logs {
  max-width: min(44rem, 92%);
  margin: -34% auto 0;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 30px 40px oklch(0% 0 0 / 0.55));
}
.gx-telemetry {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.gx-card {
  display: grid;
  gap: 0.35rem;
  padding: var(--space-4) var(--space-6);
  background: oklch(18.87% 0.0038 48.51 / 0.9);
  backdrop-filter: blur(6px);
  clip-path: var(--notch-sm);
}
.gx-card strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  letter-spacing: 0.04em;
  color: var(--bone);
}
.gx-card .data-label { color: var(--hivis); }
.gx-card [data-count] { font-variant-numeric: tabular-nums; }

/* ---- CLIMB -------------------------------------------------------- */
.gx-climb {
  padding: var(--space-16) var(--gutter);
  display: grid;
  gap: var(--space-8);
  align-items: center;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  max-width: var(--page-max);
  margin-inline: auto;
}
.gx-rider--climb { max-width: 100%; filter: drop-shadow(0 30px 40px oklch(0% 0 0 / 0.55)); }
.gx-climb__copy { display: grid; gap: var(--space-2); justify-items: start; }
.gx-wall {
  font-size: clamp(2rem, 1.2rem + 3.6vw, 4.25rem);
  font-weight: 900;
  padding: 0.1em 0.35em;
  background: var(--dirt-deep);
  box-shadow: inset 0 -4px 0 var(--dirt-mid);
  color: var(--bone);
}
.gx-wall[data-wall="2"] { margin-left: clamp(1rem, 4vw, 3.5rem); }
.gx-wall[data-wall="3"] { margin-left: clamp(2rem, 8vw, 7rem); }
.gx-wall--hivis { color: var(--ink); background: var(--hivis); box-shadow: inset 0 -4px 0 oklch(70% 0.16 121); }

/* ---- APEX ----------------------------------------------------------- */
.gx-apex { padding: var(--space-16) var(--gutter); text-align: center; }
.gx-checker {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    repeating-conic-gradient(oklch(88.59% 0.1855 120.95 / 0.9) 0% 25%, transparent 0% 50%)
    0 0 / 64px 64px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, transparent 34%, black 78%);
          mask-image: radial-gradient(120% 100% at 50% 50%, transparent 34%, black 78%);
}
.gx-rider--apex {
  max-width: min(52rem, 94%);
  margin-inline: auto;
  filter: drop-shadow(0 34px 44px oklch(0% 0 0 / 0.6));
  position: relative;
  z-index: 1;
}
.gx-podium {
  position: relative;
  z-index: 2;
  max-width: 56rem;
  margin: var(--space-12) auto 0;
}
.gx-podium__media {
  position: relative;
  clip-path: var(--notch);
  background: var(--x-red);
  max-height: min(46svh, 420px);
  overflow: clip;
}
@media (max-height: 820px) {
  .gx-podium__media { max-height: 38svh; }
}
.gx-podium__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: luminosity;
  opacity: 0.85;
  filter: contrast(1.08);
}
.gx-podium__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, oklch(14.52% 0.0021 286.13 / 0.85), transparent 55%);
}
.gx-podium__line {
  position: relative;
  margin-top: calc(-1 * clamp(1.5rem, 4vw, 3rem));
  padding-inline: var(--gutter);
  font-size: clamp(1.75rem, 1.1rem + 3vw, 3.5rem);
  font-weight: 900;
  color: var(--bone);
  text-shadow: 0 4px 40px oklch(0% 0 0 / 0.8);
}
.gx-lineage {
  margin-top: var(--space-8);
  overflow: clip;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
          mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.gx-lineage__track {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: max-content;
  font-family: var(--font-data);
  font-size: var(--text-data);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-70);
  white-space: nowrap;
}
.gx-lineage__track .x-mark { font-size: 0.5rem; flex: none; }
.gauntlet.is-animated .gx-lineage__track { animation: lineage-run 64s linear infinite; }
@keyframes lineage-run { to { transform: translateX(-50%); } }

/* ---- EXIT / RUSH OUT --------------------------------------------------- */
.gx-exit {
  padding: var(--space-16) var(--gutter);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
}
.gx-exit__big {
  font-size: clamp(2.5rem, 1.4rem + 5.5vw, 6.5rem);
  font-weight: 900;
  color: var(--bone);
}
.gx-exit__big--red { color: var(--x-red); }
.gx-exit__num { color: var(--hivis); font-variant-numeric: tabular-nums; }
.gx-exit__sub { margin-top: var(--space-4); color: var(--bone-70); max-width: 34ch; text-wrap: pretty; }

/* ============================================================
   STATIC STACK — reduced motion / no JS / vendor missing (D-21).
   The lap read as stacked full-bleed figures in lap order: hero
   lockup, GATE, LOGS, CLIMB, APEX, podium, exit. Every plate is
   visible, nothing is parked at opacity 0, nothing pins. Scoped to
   :not(.is-animated) AND wrapped in the reduced-motion media query.
   The media query is load-bearing for weight, not just intent —
   :not(.is-animated) matches until the module runs, and without
   the query the plate backgrounds (pack-start-full, 305KB) and the
   lazy climb cutout were fetched in animated mode too, pushing the
   home page over its 1.5MB budget (T-C19). The vendor-missing path
   (html.ex-static under no-preference) falls back to the plain
   static rules above this block.

   Registration trick — every cutout layer shares its plate's canvas
   (pack-start-i1/i2 = pack-start-full, rider22-logs = logs-kicker,
   rider22-apex = arena at 1.875). Giving plate and cutout the same
   box + object-fit/position lands them pixel-for-pixel, so the
   figure reads as one photo with the subject popped and the room
   pushed into the night. No double rider anywhere (D-02).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
.gauntlet:not(.is-animated) {
  --fig-plate: grayscale(0.25) sepia(0.18) saturate(1.3) hue-rotate(-6deg) brightness(0.62) contrast(1.08);
  --fig-pop: drop-shadow(0 24px 34px oklch(0% 0 0 / 0.6)) brightness(1.06) contrast(1.04);
}
.gauntlet:not(.is-animated) .gx-arena,
.gauntlet:not(.is-animated) .gx-shade,
.gauntlet:not(.is-animated) .gx-streaks,
.gauntlet:not(.is-animated) .gx-stake,
.gauntlet:not(.is-animated) .gx-dirt { display: none; }

/* Figures only — staging keeps its own poster padding below. */
.gauntlet:not(.is-animated) .gx-frame > .gx-phase {
  position: relative;
  isolation: isolate;
  overflow: clip;
  /* Full-bleed box, page-max content: the plate runs edge to edge
     while the type inside stays on the page grid. */
  padding: var(--space-8) max(var(--gutter), calc((100% - var(--page-max)) / 2)) var(--space-10);
}
.gauntlet:not(.is-animated) .gx-phase + .gx-phase { box-shadow: inset 0 1px 0 var(--ink-edge); }
/* Hero lockup as a poster, then straight into the first figure — no
   92svh well under the cue when nothing is going to scrub it. */
.gauntlet:not(.is-animated) .gx-staging {
  min-height: 0;
  padding: clamp(7rem, 18svh, 10rem) var(--gutter) var(--space-10);
}

/* Phase tags as static kickers — hi-vis stake, left-set, above the
   figure they name. */
.gauntlet:not(.is-animated) .gx-phase__tag {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.75em;
  width: fit-content;
  margin: 0 0 var(--space-6);
  text-align: left;
  text-shadow: 0 1px 12px oklch(0% 0 0 / 0.8);
}
.gauntlet:not(.is-animated) .gx-phase__tag::before {
  content: "";
  width: 3px;
  height: 1.15em;
  background: var(--hivis);
  flex: none;
}

/* Plate layers (::before) and their ink ground (::after). */
.gauntlet:not(.is-animated) .gx-gate::before,
.gauntlet:not(.is-animated) .gx-climb::before,
.gauntlet:not(.is-animated) .gx-apex::before,
.gauntlet:not(.is-animated) .gx-gate::after,
.gauntlet:not(.is-animated) .gx-climb::after,
.gauntlet:not(.is-animated) .gx-apex::after,
.gauntlet:not(.is-animated) .gx-logs__plate-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gauntlet:not(.is-animated) .gx-gate::before,
.gauntlet:not(.is-animated) .gx-climb::before,
.gauntlet:not(.is-animated) .gx-apex::before {
  z-index: -3;
  background-repeat: no-repeat;
  background-size: cover;
}
.gauntlet:not(.is-animated) .gx-gate::after,
.gauntlet:not(.is-animated) .gx-climb::after,
.gauntlet:not(.is-animated) .gx-apex::after,
.gauntlet:not(.is-animated) .gx-logs__plate-wrap::after {
  z-index: -2;
  background: linear-gradient(to bottom, var(--ink), transparent 22%, transparent 60%, var(--ink));
}

/* Registered figure layers: plate under, cutout over, same box. */
.gauntlet:not(.is-animated) .gx-pack,
.gauntlet:not(.is-animated) .gx-rider--logs,
.gauntlet:not(.is-animated) .gx-rider--apex {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  z-index: -1;
  filter: var(--fig-pop);
  /* Edge fade so a cover crop never hard-cuts a wheel or a helmet
     at the figure's edge on any viewport. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
          mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

/* GATE — pack-start-full under the two pack cutouts */
.gauntlet:not(.is-animated) .gx-gate {
  min-height: clamp(26rem, 78svh, 48rem);
  text-align: left;
}
.gauntlet:not(.is-animated) .gx-gate::before {
  background-image: url("../img/photos/pack-start-full.webp");
  background-position: 50% 22%;
  filter: var(--fig-plate);
  opacity: 0.55;
}
.gauntlet:not(.is-animated) .gx-pack { object-position: 50% 22%; }
.gauntlet:not(.is-animated) .gx-pack--far { opacity: 0.9; }

/* LOGS — the kicker photo under rider #22; telemetry rides the ground */
.gauntlet:not(.is-animated) .gx-logs {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-height: clamp(28rem, 92svh, 56rem);
}
.gauntlet:not(.is-animated) .gx-logs .gx-phase__tag { align-self: flex-start; }
.gauntlet:not(.is-animated) .gx-logs__plate-wrap {
  position: absolute;
  inset: 0;
  z-index: -3;
  max-width: none;
  margin: 0;
  clip-path: none;
  overflow: clip;
}
.gauntlet:not(.is-animated) .gx-logs__plate-wrap::after { z-index: 1; }
.gauntlet:not(.is-animated) .gx-logs__plate {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: var(--fig-plate);
  opacity: 0.6;
}
.gauntlet:not(.is-animated) .gx-rider--logs { object-position: 50% 30%; }
.gauntlet:not(.is-animated) .gx-telemetry {
  margin-top: auto;
  justify-content: flex-end;
}

/* CLIMB — no plate photo of its own: arena as blurred atmosphere,
   copy left, rider right, tag across the top. */
.gauntlet:not(.is-animated) .gx-climb {
  max-width: none;
  margin: 0;
  gap: var(--space-4) var(--space-8);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas: "tag tag" "copy rider";
  align-items: end;
  min-height: clamp(24rem, 70svh, 44rem);
}
.gauntlet:not(.is-animated) .gx-climb::before {
  background-image: url("../img/photos/arena-everett-1600.webp");
  background-position: 50% 100%;
  opacity: 0.4;
  filter: blur(10px) brightness(0.55) saturate(0.6);
  transform: scale(1.06);
}
.gauntlet:not(.is-animated) .gx-climb .gx-phase__tag { grid-area: tag; align-self: start; }
.gauntlet:not(.is-animated) .gx-climb__copy { grid-area: copy; align-self: center; }
.gauntlet:not(.is-animated) .gx-rider--climb {
  grid-area: rider;
  width: 100%;
  filter: drop-shadow(0 30px 40px oklch(0% 0 0 / 0.55)) brightness(1.12) contrast(1.05);
}

/* APEX — arena plate under the registered airborne #22 (one rider,
   the plate's own #22 sits exactly under the cutout), checker flash
   visible, then the podium beat rising out of the figure. */
.gauntlet:not(.is-animated) .gx-apex {
  --fig: clamp(24rem, 72svh, 46rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
}
.gauntlet:not(.is-animated) .gx-apex .gx-phase__tag { align-self: flex-start; }
.gauntlet:not(.is-animated) .gx-apex::before,
.gauntlet:not(.is-animated) .gx-apex::after,
.gauntlet:not(.is-animated) .gx-checker,
.gauntlet:not(.is-animated) .gx-rider--apex {
  inset: 0 0 auto;
  height: var(--fig);
}
.gauntlet:not(.is-animated) .gx-apex::before {
  background-image: url("../img/photos/arena-everett-1600.webp");
  background-position: 50% 30%;
  filter: var(--fig-plate);
  opacity: 0.55;
}
.gauntlet:not(.is-animated) .gx-rider--apex { object-position: 50% 30%; }
.gauntlet:not(.is-animated) .gx-checker { z-index: -2; opacity: 0.14; }
.gauntlet:not(.is-animated) .gx-podium {
  width: min(56rem, 100%);
  text-align: center;
  /* Sit just inside the figure's bottom fade: figure height minus
     the tag row (padding + tag + its margin ≈ 5rem). */
  margin-top: calc(var(--fig) - 5rem - var(--space-6));
}
.gauntlet:not(.is-animated) .gx-lineage {
  -webkit-mask-image: none;
          mask-image: none;
}
.gauntlet:not(.is-animated) .gx-lineage__track {
  width: auto;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: var(--space-3);
  white-space: normal;
}
/* Wrapped, the standalone marks opened lines with an orphan X and the
   list ended on one. Each champion trails their own mark instead; the
   last one trails nothing. */
.gauntlet:not(.is-animated) .gx-lineage__track .x-mark { display: none; }
.gauntlet:not(.is-animated) .gx-lineage__track > span:not(.x-mark) { display: inline-flex; align-items: center; }
.gauntlet:not(.is-animated) .gx-lineage__track > span:not(.x-mark):not(:nth-last-child(2))::after {
  content: "";
  display: inline-block;
  flex: none;
  width: 0.5em; height: 0.5em;
  margin-left: var(--space-4);
  background: currentColor;
  opacity: 0.5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.2 0 5 3.8 8.8 0 10 1.2 6.2 5 10 8.8 8.8 10 5 6.2 1.2 10 0 8.8 3.8 5 0 1.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.2 0 5 3.8 8.8 0 10 1.2 6.2 5 10 8.8 8.8 10 5 6.2 1.2 10 0 8.8 3.8 5 0 1.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* On a phone the wrapped list runs one champion per line, so a trailing
   mark only knocks each centred line off axis. The row gap is the separator. */
@media (max-width: 760px) {
  .gauntlet:not(.is-animated) .gx-lineage__track > span:not(.x-mark):not(:nth-last-child(2))::after { display: none; }
}

/* EXIT — tight hand-off into NEXT ROUND (no pin, no negative pull). */
.gauntlet:not(.is-animated) .gx-exit { padding-block: var(--space-12) var(--space-6); }

@media (max-width: 760px) {
  .gauntlet:not(.is-animated) .gx-gate { min-height: clamp(22rem, 68svh, 36rem); }
  .gauntlet:not(.is-animated) .gx-gate::before,
  .gauntlet:not(.is-animated) .gx-pack { background-position: 58% 22%; object-position: 58% 22%; }
  /* Phones: the figure is a fixed-height plate and the telemetry
     stacks under it instead of covering the rider. */
  .gauntlet:not(.is-animated) .gx-logs { --fig: clamp(20rem, 58svh, 30rem); min-height: 0; align-items: center; }
  .gauntlet:not(.is-animated) .gx-logs__plate-wrap,
  .gauntlet:not(.is-animated) .gx-rider--logs { inset: 0 0 auto; height: var(--fig); }
  .gauntlet:not(.is-animated) .gx-logs__plate,
  .gauntlet:not(.is-animated) .gx-rider--logs { object-position: 24% 30%; }
  .gauntlet:not(.is-animated) .gx-telemetry {
    display: grid;
    width: 100%;
    margin-top: calc(var(--fig) - 5rem - var(--space-6));
  }
  .gauntlet:not(.is-animated) .gx-climb {
    grid-template-columns: 1fr;
    grid-template-areas: "tag" "rider" "copy";
    min-height: 0;
  }
  .gauntlet:not(.is-animated) .gx-apex { --fig: clamp(20rem, 60svh, 32rem); }
  .gauntlet:not(.is-animated) .gx-apex::before,
  .gauntlet:not(.is-animated) .gx-rider--apex { background-position: 32% 30%; object-position: 32% 30%; }
}
}

/* ============================================================
   ANIMATED MODE — the pinned lap. Layout only; initial states
   are applied by GSAP after this class lands.
   ============================================================ */
.gauntlet.is-animated .gauntlet__stage {
  height: 100svh;
  min-height: 620px;
}
.gauntlet.is-animated .gx-frame { position: absolute; inset: 0; }
.gauntlet.is-animated .gx-phase { position: absolute; inset: 0; padding: 0; margin: 0; }
.gauntlet.is-animated .gx-phase__tag {
  position: absolute;
  top: max(5.2rem, 9svh);
  left: var(--gutter);
  margin: 0;
}

.gauntlet.is-animated .gx-staging {
  display: grid;
  place-content: center;
  justify-items: center;
  min-height: 0;
  z-index: 6;
}
.gauntlet.is-animated .gx-gate { z-index: 3; }
.gauntlet.is-animated .gx-pack {
  position: absolute;
  margin: 0;
  left: 50%; top: 50%;
}
.gauntlet.is-animated .gx-pack--far { width: min(42vw, 34rem); max-width: none; }
.gauntlet.is-animated .gx-pack--near { width: min(52vw, 44rem); max-width: none; }
.gauntlet.is-animated .gx-stake { height: 34svh; top: 0; }

.gauntlet.is-animated .gx-logs { z-index: 2; padding: 0; }
.gauntlet.is-animated .gx-logs__plate-wrap {
  position: absolute;
  left: 50%; bottom: -4svh;
  width: min(92vw, 74rem);
  max-width: none;
  transform: translateX(-50%);
}
.gauntlet.is-animated .gx-rider--logs {
  position: absolute;
  left: 50%; bottom: 4svh;
  width: min(56vw, 46rem);
  max-width: none;
  margin: 0;
}
.gauntlet.is-animated .gx-logs__fg {
  display: block;
  position: absolute;
  left: 50%; bottom: 0;
  width: 100vw;
  height: 30svh;
  overflow: clip;
  transform: translateX(-50%);
  z-index: 3;
  -webkit-mask-image: linear-gradient(to top, black 60%, transparent);
          mask-image: linear-gradient(to top, black 60%, transparent);
}
.gauntlet.is-animated .gx-logs__fg img {
  /* Crop to the rider-free floor of the photo (x 35–100%, y 60–79%)
     so the band is logs and dirt edge to edge — the old crop ran out
     400px short of the right edge at 1440 and, uncapped, showed #22's
     front wheel. */
  width: 154%;
  max-width: none;
  margin-left: -54%;
  margin-top: -62%;
  filter: brightness(0.38) saturate(0.85);
}
.gauntlet.is-animated .gx-telemetry {
  position: absolute;
  right: clamp(1rem, 6vw, 6rem);
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  align-items: flex-end;
  margin: 0;
  z-index: 4;
}

.gauntlet.is-animated .gx-climb { display: block; max-width: none; z-index: 2; padding: 0; }
.gauntlet.is-animated .gx-rider--climb {
  position: absolute;
  right: clamp(0rem, 4vw, 6rem);
  bottom: 0;
  width: min(66vw, 54rem);
  max-width: none;
  filter: drop-shadow(0 30px 40px oklch(0% 0 0 / 0.55)) brightness(1.12) contrast(1.05);
}
.gauntlet.is-animated .gx-climb__copy {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.gauntlet.is-animated .gx-apex { z-index: 2; padding: 0; }
.gauntlet.is-animated .gx-rider--apex {
  position: absolute;
  left: 50%; top: 50%;
  width: min(62vw, 52rem);
  max-width: none;
  margin: 0;
}
.gauntlet.is-animated .gx-podium {
  position: absolute;
  left: 50%;
  /* Centre the GROUP (media + line), nudged up so the payoff line
     never kisses the viewport bottom (D-01). NO CSS transform here on
     purpose — GSAP reads an authored translate as pixels at init
     (before the plate image has a height), so the centring drifted
     per device. The module owns the whole transform: xPercent -50,
     yPercent 40 -> -50 (centred) -> -74. */
  top: calc(50% - clamp(1.5rem, 4vh, 3rem));
  width: min(92vw, 56rem);
  margin: 0;
  z-index: 3;
}
.gauntlet.is-animated .gx-checker { z-index: 4; }

.gauntlet.is-animated .gx-exit {
  z-index: 5;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: var(--gutter);
}

@media (max-width: 760px) {
  /* Phones — the stage is exactly one viewport. The 620px floor is a
     desktop safeguard; on a 568px phone it pushed the bottom 52px of
     every frame (apex tag, rider feet) below the fold. */
  .gauntlet.is-animated .gauntlet__stage { min-height: 0; }
  .gauntlet.is-animated .gx-pack--near { width: 88vw; }
  .gauntlet.is-animated .gx-pack--far { width: 66vw; }
  /* Logs on phones: the plate is a tall portrait crop of #22 (a 3:2
     strip at 92vw sat in the bottom quarter and left the frame
     empty), and the cutout that replaces it is raised off the floor
     so the rider, not the telemetry card, owns the middle (D-02). */
  .gauntlet.is-animated .gx-logs__plate-wrap {
    width: 100vw;
    height: 58svh;
    bottom: 14svh;
  }
  .gauntlet.is-animated .gx-logs__plate {
    height: 100%;
    object-fit: cover;
    object-position: 30% 22%;
  }
  .gauntlet.is-animated .gx-rider--logs { width: 88vw; bottom: 26svh; }
  .gauntlet.is-animated .gx-rider--climb { width: 92vw; right: -4vw; }
  .gauntlet.is-animated .gx-rider--apex { width: 96vw; }
  /* Mobile telemetry: one card visible at a time in a fixed slot,
     crossfading — never a clipped x-slide parade (HOMEPAGE.3). */
  .gauntlet.is-animated .gx-telemetry {
    right: auto; left: 50%; top: auto; bottom: 7svh;
    transform: translateX(-50%);
    display: block;
    width: min(88vw, 24rem);
    max-width: none;
    overflow: visible;
  }
  .gauntlet.is-animated .gx-card {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    white-space: normal;
  }
  .gauntlet.is-animated .gx-telemetry { display: grid; }
  .gauntlet.is-animated .gx-card strong { font-size: clamp(1.1rem, 0.9rem + 1vw, 1.5rem); }
  .gauntlet.is-animated .gx-climb__copy { top: auto; bottom: 44svh; transform: none; }
  /* Champions beat on phones — the plate is width-bound (92vw at 3:2
     left 200px of floor under the marquee), so it takes a taller crop
     and the group sits on the true centre — the nudge was overshooting
     once the header ate the top of the frame (D-01 follow-up). */
  .gauntlet.is-animated .gx-podium { top: 50%; }
  .gauntlet.is-animated .gx-podium__media {
    aspect-ratio: 5 / 4;
    max-height: min(44svh, 380px);
  }
  /* Apex on phones: rider owns the lower two-thirds, tag drops to the
     bottom edge so it never sits on the subject (D-19). */
  .gauntlet.is-animated .gx-apex .gx-phase__tag {
    top: auto;
    bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================
   NEXT ROUND
   ============================================================ */
.next-round {
  position: relative;
  z-index: 4;
  /* Rise into the last pinned frame instead of landing a third of a
     viewport below it (D-04). The ::before fade lets the exit line
     sit under the countdown's top edge without a hard seam. */
  margin-top: calc(-1 * clamp(8rem, 24vh, 15rem));
  background:
    linear-gradient(to right, oklch(19.02% 0.0189 62.5 / 0.65), transparent 60%),
    var(--ink);
  /* Don't drop the baton into a void after the lap's climax — the
     handoff copy should still be visible when this section lands
     (HOMEPAGE.6). Bottom padding stays full section rhythm. */
  padding-top: calc(var(--space-section) * 0.6);
}
.next-round::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -6rem;
  height: 6rem;
  background: linear-gradient(to bottom, transparent, var(--ink));
  pointer-events: none;
}
.gauntlet:not(.is-animated) + .next-round { margin-top: 0; padding-top: calc(var(--space-section) * 0.35); }
.gauntlet:not(.is-animated) + .next-round::before { content: none; }
/* Let the LAS VEGAS block/countdown/CTAs arrive sooner — smaller
   travel distance means they read as "in" well before the shared
   reveal threshold would otherwise suggest (HOMEPAGE.6). */
.js .next-round .reveal { transform: translateY(12px); }
.next-round__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--space-8);
  margin-top: var(--space-6);
}
.next-round__city {
  font-size: var(--text-mega);
  color: var(--bone);
  line-height: 0.84;
}
.next-round__venue { margin-top: var(--space-4); font-size: var(--text-lg); color: var(--bone-70); }
.next-round__meta { margin: var(--space-3) 0 var(--space-4); color: var(--hivis); }
.next-round__count {
  display: flex;
  gap: clamp(0.75rem, 2vw, 2rem);
  justify-content: flex-end;
}
.next-round__cell { display: grid; justify-items: center; gap: 0.4rem; }
.next-round__digits {
  font-family: var(--font-data);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.25rem, 1.4rem + 4vw, 4.75rem);
  line-height: 1;
  color: var(--bone);
  padding: 0.15em 0.22em;
  background: var(--ink-raised);
  box-shadow: inset 0 -3px 0 var(--x-red);
  min-width: 2.1ch;
  text-align: center;
}
.next-round__cell .data-label { color: var(--bone-50); }
.next-round__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
@media (max-width: 900px) {
  .next-round__grid { grid-template-columns: 1fr; align-items: start; }
  .next-round__count { justify-content: flex-start; }
}

/* ============================================================
   SEASON BOARD
   ============================================================ */
.season__h { font-size: var(--text-h1); margin-top: var(--space-3); }
.season__h-accent { color: var(--x-red); }
.season__sub { color: var(--bone-70); margin-top: var(--space-3); }
.season__list {
  margin-top: var(--space-12);
  border-top: var(--hairline);
}
.round {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 2fr) minmax(0, 1.4fr) auto auto;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-2);
  border-bottom: var(--hairline);
  transition: background-color var(--duration-fast) var(--ease-out);
}
/* The money list deserves the best designed state on the page
   (HOMEPAGE.8): background lift, numeral snaps to hi-vis (course-
   stake language — you're "at" this round), city nudges right,
   TICKETS pre-lifts. Mirrored on :focus-within for keyboard. */
.round:hover,
.round:focus-within {
  background: var(--ink-raised);
}
.round:hover .round__num,
.round:focus-within .round__num {
  color: var(--hivis);
}
.round:hover .round__city,
.round:focus-within .round__city {
  transform: translateX(4px);
}
.round:hover .btn,
.round:focus-within .btn {
  transform: translateY(-1px);
}
.round__num {
  font-size: 2.25rem;
  color: var(--x-red);
  text-align: center;
  transition: color var(--duration-fast) var(--ease-out);
}
.round__city {
  font-size: var(--text-h3);
  font-weight: 800;
  letter-spacing: 0.02em;
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease-out);
}
.round__venue { margin-top: 0.35rem; color: var(--bone-50); }
.round__when { display: grid; gap: 0.35rem; }
.round__when time {
  font-family: var(--font-data);
  font-weight: 700;
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bone);
}
.round__when .data-label { color: var(--bone-50); }
/* Event Info — the info path into /events/2026-rd{N}/ (UX F-03).
   Data-face link, 44px tap height, arrow nudges on hover. */
.round-row__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  padding: 0 var(--space-2);
  /* Pull the hit area out so the label lines up with the city text
     while the tap target stays 44px tall and gutter-wide. */
  margin-inline-start: calc(-1 * var(--space-2));
  margin-block: calc(-1 * var(--space-1)) 0;
  font-family: var(--font-data);
  font-size: var(--text-data);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-70);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
}
.round-row__more:hover,
.round-row__more:focus-visible { color: var(--hivis); }
.round-row__more .arrow {
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease-out);
}
.round-row__more:hover .arrow,
.round-row__more:focus-visible .arrow { transform: translateX(3px); }
.season__double {
  border-bottom: var(--hairline);
  padding: var(--space-4) 0 0;
  background: linear-gradient(to right, oklch(88.59% 0.1855 120.95 / 0.05), transparent 55%);
  box-shadow: inset 3px 0 0 var(--hivis);
}
.season__double-tag {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-2) var(--space-2);
  font-family: var(--font-data);
  font-size: var(--text-data);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hivis);
}
.season__double-tag .stake { height: 1.4rem; width: 4px; }
.season__double .round { border-bottom: 0; padding-left: var(--space-4); }
.season__double .round + .round { border-top: 1px dashed oklch(26% 0.006 60 / 0.9); }
.season__note { margin-top: var(--space-4); color: var(--bone-50); }
.season__more { margin-top: var(--space-8); }

@media (max-width: 900px) {
  .round { grid-template-columns: 3rem minmax(0, 1fr) auto; grid-template-areas: "num where cta" "num when chip"; row-gap: var(--space-3); }
  .round__num { grid-area: num; font-size: 1.75rem; }
  .round__where { grid-area: where; }
  .round__when { grid-area: when; }
  .round .chip { grid-area: chip; justify-self: start; }
  .round .btn { grid-area: cta; justify-self: end; }
}

/* Density pass: rows were running ~600px tall across six rounds —
   thumb distance is conversion friction on the money list. Venue
   stays on one line, TICKETS + chip share a right-aligned column,
   ≥35% height cut per row without dropping data or shrinking tap
   targets below 44px (HOMEPAGE.7). */
@media (max-width: 760px) {
  :root { --space-section: clamp(3.5rem, 14vw, 5.5rem); }

  .round {
    grid-template-columns: 1.75rem minmax(0, 1fr) 5.75rem;
    grid-template-rows: auto auto;
    grid-template-areas: "num where chip" "num when cta";
    column-gap: var(--space-2);
    row-gap: 0.3rem;
    padding-block: var(--space-4);
  }
  .round__num { font-size: 1.25rem; }
  .round__city { font-size: 1.0625rem; }
  .round__venue {
    margin-top: 0.15rem;
    font-size: 0.6875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .round__when { gap: 0.15rem; }
  .round__when time { font-size: var(--text-sm); }
  .round__when .data-label {
    font-size: 9.5px;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  .round .chip {
    grid-area: chip;
    justify-self: end;
    align-self: start;
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
    padding: 0.3em 0.5em;
    white-space: normal;
    text-align: right;
    max-width: 100%;
  }
  .round .btn { grid-area: cta; justify-self: end; align-self: end; min-height: 44px; padding-inline: 0.9rem; }
  .season__double-tag { font-size: 0.625rem; padding-block-end: var(--space-3); }
}

/* ============================================================
   THE SPORT
   ============================================================ */
.sport { background: linear-gradient(to bottom, transparent, oklch(19.02% 0.0189 62.5 / 0.55) 30%, transparent), var(--ink); }
.sport__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-12);
  margin-top: var(--space-6);
}
.sport__intro h2 { font-size: var(--text-h1); }
.sport__x { width: 0.94em; height: 0.82em; vertical-align: -0.04em; margin: 0 0.05em; }
.sport__copy {
  margin: var(--space-6) 0 var(--space-8);
  max-width: var(--measure);
  font-size: var(--text-lg);
  color: var(--bone-70);
}
.sport__obstacles { display: grid; gap: var(--space-6); align-content: start; }
.obstacle {
  position: relative;
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-12);
  background: var(--ink-raised);
  clip-path: var(--notch-sm);
  transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast);
}
.obstacle:hover { transform: translateX(6px); background: oklch(22% 0.012 60); }
.obstacle:nth-child(even) { margin-left: clamp(0rem, 4vw, 3rem); }
.obstacle__marker { position: absolute; left: var(--space-6); top: calc(var(--space-6) + 0.3rem); font-size: 0.8rem; }
.obstacle h3 { font-size: 1.375rem; font-weight: 800; letter-spacing: 0.04em; }
.obstacle p { margin-top: var(--space-2); color: var(--bone-70); font-size: var(--text-sm); max-width: 52ch; }
@media (max-width: 900px) {
  .sport__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   WATCH + RESULTS
   ============================================================ */
.watch__h { font-size: var(--text-h1); margin-top: var(--space-3); }
.watch__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-12);
}
.watch__card {
  padding: var(--space-8);
  background: var(--ink-raised);
  clip-path: var(--notch);
  display: grid;
  gap: var(--space-4);
  align-content: start;
}
.watch__card--live { box-shadow: inset 0 3px 0 var(--hivis); }
.watch__card h3 { font-size: var(--text-h3); font-weight: 800; }
.watch__card p { color: var(--bone-70); }
.watch__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-2); }
.watch__minor { color: var(--bone-50); font-size: var(--text-sm); transition: color var(--duration-fast); }
.watch__minor:hover { color: var(--hivis); }

.results { margin-top: var(--space-12); border-top: var(--hairline); }
.results__row {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-2);
  border-bottom: var(--hairline);
  text-decoration: none;
  transition: background-color var(--duration-fast);
}
.results__row:hover { background: oklch(19.02% 0.0189 62.5 / 0.5); }
.results__label { color: var(--bone-50); }
.results__big {
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
  font-weight: 900;
  color: var(--bone);
  transition: color var(--duration-fast);
}
.results__row:hover .results__big { color: var(--hivis); }
.results__arrow { font-size: 1.5rem; color: var(--x-red); }
@media (max-width: 760px) {
  .watch__grid { grid-template-columns: 1fr; }
  .results__row { grid-template-columns: minmax(0, 1fr) auto; }
  .results__label { display: none; }
}

/* ============================================================
   RACERS STRIP
   ============================================================ */
.racers {
  background:
    linear-gradient(to right, var(--dirt-deep), oklch(19.02% 0.0189 62.5 / 0.4) 70%),
    var(--ink);
  box-shadow: inset 0 1px 0 var(--ink-edge), inset 0 -1px 0 var(--ink-edge);
}
.racers__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: center;
}
.racers__h { font-size: var(--text-h2); margin-top: var(--space-3); }
.racers__sub { margin-top: var(--space-4); color: var(--bone-70); max-width: 46ch; }
.racers__links { display: grid; }
.racers__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-2);
  border-bottom: 1px solid oklch(30.02% 0.0388 67.04 / 0.8);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone-70);
  transition: color var(--duration-fast), padding-left var(--duration-fast) var(--ease-out);
}
.racers__links a:first-child { border-top: 1px solid oklch(30.02% 0.0388 67.04 / 0.8); }
.racers__links a:hover { color: var(--hivis); padding-left: var(--space-4); }
.racers__links span { color: var(--x-red); }
/* Registration is the second conversion on this page (2026-09-03), so
   it gets a real button, not a list row. */
.racers__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
@media (max-width: 900px) {
  .racers__wrap { grid-template-columns: 1fr; }
}

/* Homepage sticky bar carries both conversions — tickets and
   registration — side by side; other pages keep the single button. */
.ticket-bar--dual { display: flex; gap: var(--space-3); }
.ticket-bar--dual .btn { flex: 1 1 0; width: auto; white-space: nowrap; }
@media (min-width: 761px) {
  /* Gear Wide Ultra widened the labels and Register clipped at the
     30rem cap (Trevor 2026-09-03) — the dock now sizes to content,
     buttons run 10% smaller, and it pulls off the right edge. */
  .ticket-bar--dual { max-width: none; right: var(--space-10); gap: var(--space-2); }
  .ticket-bar--dual .btn { flex: 0 0 auto; font-size: 0.956rem; padding: 0.9rem 1.8rem 0.945rem; }
}

/* ============================================================
   [EX]CLUSIVE
   ============================================================ */
.exclusive__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-12);
}
.exclusive__intro h2 { font-size: var(--text-h2); }
.exclusive__brand { color: var(--x-red); }
.exclusive__intro p { margin-top: var(--space-6); color: var(--bone-70); max-width: var(--measure); }
.exclusive__form fieldset { border: 0; padding: 0; display: grid; gap: var(--space-6); }
.exclusive__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.field { display: grid; gap: 0.45rem; }
.field:first-child { grid-column: 1 / -1; }
.field .data-label { color: var(--bone-50); }
.field input {
  padding: 0.85rem 1rem;
  background: var(--ink-raised);
  border: 1px solid var(--ink-edge);
  color: var(--bone);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.field input::placeholder { color: var(--bone-50); }
.field input:focus-visible { outline: none; border-color: var(--hivis); box-shadow: 0 0 0 1px var(--hivis); }
/* Pending, not dead-looking-live (HOMEPAGE.9): fields dim normally,
   but the button itself gets an honest "not yet" treatment instead
   of a full-opacity red primary that still reads clickable — flat
   fill, inset hairline, no-drop cursor, label says what's true. The
   moment the mailing-list endpoint exists this reverts to the
   standard btn--primary and fieldset:disabled comes off. */
.exclusive__form fieldset:disabled { opacity: 1; }
.exclusive__form fieldset:disabled .field { opacity: 0.55; }
.exclusive__form fieldset:disabled .btn {
  width: 100%;
  background: var(--ink-raised);
  color: var(--bone-50);
  box-shadow: inset 0 0 0 1px var(--ink-edge);
  cursor: not-allowed;
}
.exclusive__form fieldset:disabled .btn::after { content: none; }
@media (max-width: 900px) {
  .exclusive__wrap { grid-template-columns: 1fr; }
  .exclusive__fields { grid-template-columns: 1fr; }
}

/* ---- Whole-row click on the season list (Trevor 2026-09-03) ----
   The Event Info link stretches over the entire row, so anywhere on
   the round is the info path; Tickets keeps its own hit area above
   the stretch. Hover/focus states already treat the row as one unit. */
.round { position: relative; }
.round .round-row__more::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.round .btn { position: relative; z-index: 2; }