/* ============================================================================
   COMBO + SCROLLYTELLING — 2026 Lookback (/2026-recap/)
   Mockup 1 voice & layout · Mockup 3 stage-poster + coda · /live/ tokens
   2-column scroll-scrubbed flyovers per day · full-bleed track climax
   Type system aligned with /live/: Inter for body & uppercase headlines,
   Erial for poster-display moments (route-atlas big stats), Inter italic
   for editorial prose. Erial loads locally from assets/fonts.
   ============================================================================ */

/* Erial — licensed Route Atlas display font (mirrors /live/'s @font-face). */
@font-face {
  font-family: "Erial";
  src: url("../fonts/erial-webfont.woff2") format("woff2"),
       url("../fonts/erial-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand (matches /live/ trinite-live.css) */
  --pine-mid:   #0E5148;
  --pine-deep:  #003029;
  --pine-inky:  #001c18;
  --gold:       #FAD904;
  --gold-soft:  rgba(250, 217, 4, 0.14);
  --rail:       rgba(255, 255, 255, 0.18);
  --rail-strong:rgba(255, 255, 255, 0.28);
  --gray-soft:  #E3E4E5;
  --white:      #FFFFFF;
  --paper:      #F5F1E8;

  /* Type — matches /live/ vocabulary */
  --sans:    "Inter", system-ui, -apple-system, sans-serif;
  --display: "Erial", "Inter", system-ui, sans-serif; /* poster-mode big stats */
  --mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Spacing — /live/ token rhythm */
  --s1: 20px; --s2: 40px; --s3: 50px; --s4: 80px; --s5: 120px;

  /* Motion */
  --ease:     cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.25, 1);

  --container: 1140px;
  --content-width: 83%;
  --measure: 62ch;
}

/* Scope reset to the recap root so we don't nuke theme/admin chrome */
.trinite-recap-root,
.trinite-recap-root *,
.trinite-recap-root *::before,
.trinite-recap-root *::after { box-sizing: border-box; }

body.trinite-recap-page {
  background: var(--pine-inky);
  /* The recap root uses a `calc(50% - 50vw)` breakout to escape the theme's
   * content-width container. On platforms where `100vw` includes scrollbar
   * width, that breakout extends ~7px past the visible viewport. Clip it
   * here at the body so the page never has a horizontal scrollbar. `clip`
   * (vs `hidden`) doesn't break `position: sticky` on .day__rail because
   * it doesn't establish a scroll-container for descendants. */
  overflow-x: clip;
}
/* Companion clip on the html element — some browsers measure scrollWidth on
 * the documentElement regardless of body overflow, causing the page to keep
 * a horizontal scrollbar even with body clipped. Belt-and-suspenders. */
html:has(body.trinite-recap-page) {
  overflow-x: clip;
}

/* Full-bleed breakout — same pattern as /live/ (.trinite-live-root): pure margin
 * trick that escapes Elementor / Hello Elementor's content-width container so
 * the lookback runs edge-to-edge regardless of the parent's max-width. */
.trinite-recap-root {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--white);
  background: var(--pine-inky);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;

  /* Belt-and-suspenders against ~7px horizontal page scroll caused by
   * `100vw` including scrollbar width on platforms with non-overlay
   * scrollbars. `clip` (vs `hidden`) doesn't establish a scroll container,
   * so it doesn't break `position: sticky` on .day__rail. */
  overflow-x: clip;
}

/* Kill Hello Elementor / Elementor container padding when the recap is the content */
.e-con-inner:has(.trinite-recap-root),
.elementor-widget-shortcode:has(.trinite-recap-root) {
  padding-block: 0 !important;
}

.trinite-recap-root img { max-width: 100%; display: block; }
.trinite-recap-root a { color: inherit; }
.trinite-recap-root strong { color: var(--gold); font-weight: 600; }

/* Paper grain (atmospheric, mirrors /live/ ::after noise filter) */
.trinite-recap-root .grain::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.18;
  pointer-events: none;
  z-index: 2;
}

/* ============ MASTHEAD ============ */
.trinite-recap-root .masthead {
  position: relative;
  background: var(--pine-deep);
  padding: clamp(80px, 12vw, 160px) 24px clamp(60px, 8vw, 100px);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.trinite-recap-root .masthead::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(250, 217, 4, 0.18) 0%, rgba(250, 217, 4, 0.05) 28%, transparent 65%),
    radial-gradient(ellipse 90% 70% at 50% 40%, rgba(14, 81, 72, 0.55) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.trinite-recap-root .masthead > * { position: relative; z-index: 1; }

.trinite-recap-root .masthead__kicker {
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
/* Page hero — Inter 700 uppercase. Mirrors .trinite-page-head__title (teams
 * archive) and .trinite-live-head__title (live page). Erial is reserved for
 * the per-day numerals only. Scaled down from the 160px max so the three-word
 * title reads cleanly without overpowering the masthead, with a soft text
 * shadow so the white type holds against the gold radial-glow background. */
.trinite-recap-root .masthead__title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 112px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--white);
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 28, 24, 0.45);
  max-width: 16ch;
  margin: 0 auto;
}
.trinite-recap-root .masthead__title em {
  font-style: normal;
  color: inherit;
  font-weight: 700;
}
.trinite-recap-root .masthead__date {
  margin-top: clamp(40px, 5vw, 64px);
  font-family: var(--mono);
  font-size: clamp(12px, 1.05vw, 14px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.trinite-recap-root .masthead__date span:not(:last-child)::after {
  content: '·';
  margin-left: 18px;
  color: var(--gold);
  opacity: 0.7;
}
/* ============ INNER NAV — anchor strip under the hero ============ */
.trinite-recap-root .inner-nav {
  background: var(--pine-deep);
  border-top: 1px solid rgba(250, 217, 4, 0.18);
  border-bottom: 1px solid rgba(250, 217, 4, 0.18);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.trinite-recap-root .inner-nav__list {
  list-style: none;
  margin: 0;
  padding: clamp(14px, 1.6vh, 22px) clamp(20px, 4vw, 56px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 3vw, 56px);
  max-width: 1440px;
  margin-inline: auto;
}
.trinite-recap-root .inner-nav__list li { margin: 0; }
/* Inner-nav links — match /live/ stage-card "STAGE SIGN ↗" link vocabulary:
 * Inter sans, mid-weight, 0.18em tracking, gold against pine-deep. No
 * underline — the typography itself carries the link affordance. */
.trinite-recap-root .inner-nav__list a {
  font-family: var(--sans);
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  transition: opacity 0.24s cubic-bezier(0.2, 0.8, 0.25, 1);
  opacity: 0.85;
}
.trinite-recap-root .inner-nav__list a::after { content: none; }
.trinite-recap-root .inner-nav__list a:hover,
.trinite-recap-root .inner-nav__list a:focus-visible {
  color: var(--gold);
  opacity: 1;
}
.trinite-recap-root .inner-nav__list a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
}

@media (max-width: 700px) {
  .trinite-recap-root .inner-nav__list {
    gap: 14px 20px;
    padding: 12px 16px;
  }
}

/* ============ STATS LEDGER ============ */
.trinite-recap-root .ledger {
  background: var(--pine-mid);
  padding: clamp(32px, 4vw, 56px) 24px;
  position: relative;
}
.trinite-recap-root .ledger__inner {
  max-width: var(--container);
  margin: 0 auto;
}
/* Ledger intro — plain prose intro to the rally totals. No italic, no quotes —
 * sets the line that flows directly into the eight-stat grid below. */
.trinite-recap-root .ledger__poem {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--white);
  text-align: center;
  text-wrap: balance;
  max-width: 60ch;
  margin: 0 auto clamp(24px, 3vw, 40px);
  opacity: 0.92;
}
/* 4 × 2 grid (8 stats including doglegs). Icon → number → label per cell.
 * Hairlines on rail-tinted seams; "totals" cells (km, miles) glow gold. */
.trinite-recap-root .ledger__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rail);
  border-bottom: 1px solid var(--rail);
}
.trinite-recap-root .ledger__stat {
  padding: clamp(16px, 2vw, 24px) clamp(12px, 1.5vw, 20px);
  text-align: center;
  border-right: 1px solid var(--rail);
  border-bottom: 1px solid var(--rail);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.92);
}
/* Strip outer borders so the grid frame is just the four sides */
.trinite-recap-root .ledger__stat:nth-child(4n) { border-right: none; }
.trinite-recap-root .ledger__stat:nth-last-child(-n+4) { border-bottom: none; }

/* Icon — chunkier stroke for character; subtle hover wiggle for fun. */
.trinite-recap-root .ledger__icon {
  width: clamp(24px, 2.4vw, 30px);
  height: clamp(24px, 2.4vw, 30px);
  display: block;
  opacity: 0.9;
  flex-shrink: 0;
  transition: transform 0.4s var(--ease-out);
}
.trinite-recap-root .ledger__stat:hover .ledger__icon { transform: scale(1.12) rotate(-3deg); }

/* Total cells (km, miles) — gold treatment, replaces the prior hairpin highlight */
.trinite-recap-root .ledger__stat--total { color: var(--gold); }
.trinite-recap-root .ledger__stat--total .ledger__num { color: var(--gold); }
.trinite-recap-root .ledger__stat--total .ledger__label { color: var(--gold); }
.trinite-recap-root .ledger__stat--total .ledger__icon { opacity: 1; }
/* Ledger numbers — Inter 700 stat treatment, mirrors /2026teams/ .trinite-stats-belt__num */
.trinite-recap-root .ledger__num {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 4px;
  display: block;
}
.trinite-recap-root .ledger__num em {
  font-style: normal;
  color: var(--gold);
  font-weight: 700;
}
.trinite-recap-root .ledger__label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  display: block;
}
.trinite-recap-root .ledger__caption {
  margin-top: clamp(28px, 3.5vw, 40px);
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
/* Tablet (4 cols → 2 cols). Reset desktop's 4n border rule so column-2 seams
 * disappear, and 2n cells lose their right border. */
@media (max-width: 900px) {
  .trinite-recap-root .ledger__grid { grid-template-columns: repeat(2, 1fr); }
  .trinite-recap-root .ledger__stat {
    border-right: 1px solid var(--rail);
    border-bottom: 1px solid var(--rail);
  }
  .trinite-recap-root .ledger__stat:nth-child(4n) { border-right: 1px solid var(--rail); }
  .trinite-recap-root .ledger__stat:nth-child(2n) { border-right: none; }
  .trinite-recap-root .ledger__stat:nth-last-child(-n+2) { border-bottom: none; }
}
/* Mobile — keep 2 cols. Eight stats in a single column become an exhausting
 * vertical ladder; 4 rows × 2 cols reads as one calm chunk. The 2-col rules
 * from the 900px breakpoint already match here. */

/* ============ DAY (scrollytelling) ============ */
.trinite-recap-root .day {
  position: relative;
  background: var(--pine-deep);
  padding: 0;
  /* No overflow: hidden — it breaks position: sticky on .day__rail by treating
     this section as a scroll container ancestor. The rail's sticky needs to
     resolve against the document scroll, not against this section. */
}

/* Day → Day separator. A small centered gold hairline rule appears at the
 * top of each subsequent day section, giving a subtle visual beat as the
 * reader passes from Day 1 → Day 2 → Day 3. The track-coda already has
 * its own .climax-divider element, so this rule deliberately doesn't run
 * before that one — `.day + .day` only matches consecutive day sections,
 * not day → climax-divider → day.track. */
.trinite-recap-root .day + .day::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(72px, 10vw, 120px);
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
}
@media (prefers-reduced-motion: no-preference) {
  .trinite-recap-root .day + .day::before {
    transition: width 0.5s var(--ease-out), opacity 0.3s var(--ease);
  }
}

.trinite-recap-root .day__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
}

/* Scroll grid — content left, sticky portrait flyover right. min-height
 * lives HERE because this is the rail's sticky-container; its sticky range
 * is bounded by this grid's height. We size to col content (auto) so the
 * video pins exactly while editorial is on screen and releases as soon as
 * the col runs out — no empty pine-deep void on the left while the video
 * sits sticky on the right. (Earlier values: 360vh → 200vh → auto.) */
.trinite-recap-root .day__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 480px);
  grid-template-areas: "col rail";
  gap: clamp(40px, 5vw, 80px);
  align-items: stretch;
  min-height: 0;
  padding: 0 clamp(32px, 5vw, 80px);
}

/* === Right rail — sticky portrait flyover === */
.trinite-recap-root .day__rail {
  grid-area: rail;
  position: sticky;
  top: clamp(32px, 5vh, 64px);
  height: calc(100vh - clamp(64px, 10vh, 128px));
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: transparent;
  padding-block: clamp(20px, 3vh, 40px);
}
.trinite-recap-root .flyover-portrait {
  position: relative;
  /* <figure> ships with 1em 40px user-agent margin which on mobile was
     subtracting 80px from the available width. Reset to zero. */
  margin: 0;
  height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  background: transparent;
  border: none;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.trinite-recap-root .flyover-portrait--landscape {
  aspect-ratio: 16 / 9;
  height: auto;
  width: 100%;
  max-height: 100%;
}
.trinite-recap-root .flyover-portrait video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--pine-inky);
}
.trinite-recap-root .flyover-portrait__band {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--pine-mid);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  z-index: 2;
}
.trinite-recap-root .flyover-portrait__label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--white);
}
.trinite-recap-root .flyover-portrait__hint {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

/* Mapbox attribution — per Mapbox brand guidelines, the white-on-dark
 * wordmark sits next to a small "powered by" prefix in the muted-mono
 * kicker style. */
.trinite-recap-root .flyover-portrait__attribution {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--white);
  transition: opacity 0.24s var(--ease);
  opacity: 0.85;
}
.trinite-recap-root .flyover-portrait__attribution:hover,
.trinite-recap-root .flyover-portrait__attribution:focus-visible { opacity: 1; }
.trinite-recap-root .flyover-portrait__attribution:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.trinite-recap-root .flyover-portrait__attribution-prefix {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}
.trinite-recap-root img.flyover-portrait__attribution-mark {
  display: block;
  height: 14px;
  width: auto;
}
.trinite-recap-root .flyover-portrait__progress {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: rgba(250, 217, 4, 0.16);
  z-index: 3;
}
.trinite-recap-root .flyover-portrait__progress::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: var(--progress, 0%);
  background: var(--gold);
  transition: width 0.08s linear;
}

/* === Left column — editorial flow === */
.trinite-recap-root .day__col {
  grid-area: col;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(28px, 3.5vh, 56px);
  max-width: 64ch;
  justify-self: end;
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(60px, 8vh, 120px) 0;
}

.trinite-recap-root .day__label {
  margin-bottom: clamp(8px, 1vw, 16px);
}

/* Day One/Two/Three — Erial route-atlas display, the SOLE Erial moment.
 * Mirrors how /live/ .trinite-live-stage__day uses Erial for the big "DAY 1"
 * stat on the route-atlas stage card — same poster typography, scaled up
 * because here it's the chapter opener, not a card heading. */
.trinite-recap-root .day__numeral {
  font-family: var(--display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(80px, 12vw, 168px);
  line-height: 0.85;
  letter-spacing: -0.005em;
  color: var(--gold);
  text-transform: uppercase;
}
.trinite-recap-root .day__numeral em {
  font-style: normal;
  color: inherit;
}

/* Track Day — two-word heading, wants to read as one breath. Cap the
 * font-size and force single-line so "TRACK DAY" sits beside the date
 * stamp like the other day numerals (which fit naturally because each
 * is "DAY 1" / "DAY 2" / "DAY 3"). */
.trinite-recap-root .day--track .day__numeral {
  font-size: clamp(64px, 9vw, 120px);
  white-space: nowrap;
}

/* Track Day editorial is shorter than Days 1-3, so the parent's 200vh
 * sticky-range leaves a tall void: the right-rail flyover stays pinned
 * for ~600px after the editorial ends, before the closing kicks in.
 * Let the section size to its content here. */
.trinite-recap-root .day--track .day__grid {
  min-height: 0;
}
.trinite-recap-root .day--track .day__col {
  padding-bottom: clamp(40px, 5vh, 72px);
}

/* Inline link inside day-section paragraphs — replaces gold <strong> with
 * an actual anchor. Inherits the parent paragraph's font weight, gold tone
 * with hairline underline that solidifies on hover. */
.trinite-recap-root .day__inline-link {
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(250, 217, 4, 0.4);
  padding-bottom: 1px;
  transition: border-color 0.24s var(--ease);
}
.trinite-recap-root .day__inline-link:hover,
.trinite-recap-root .day__inline-link:focus-visible { border-bottom-color: var(--gold); }
.trinite-recap-root .day__inline-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
/* Date stamp — mirrors /live/ .trinite-live-stage__date: Inter sans, white,
 * 0.28em tracking, tabular figures, larger than a kicker. */
.trinite-recap-root .day__date {
  margin-top: clamp(14px, 1.6vw, 22px);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(13px, 1.4vw, 17px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--white);
  font-feature-settings: "tnum" 1;
}

/* === STAGE CARD — mirrors /live/ .trinite-live-stage =====================
 * Map illustration on the left, vertical stats rail on the right with
 * hairline dividers, big white Inter 700 numbers, gold labels. Same
 * vocabulary as the /live/ route-atlas stage card. Replaces the small
 * stage-poster + horizontal day-stats trio. */
.trinite-recap-root .stage-card {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(16px, 2vw, 24px) 0;
}
.trinite-recap-root .stage-card--stats-only {
  grid-template-columns: 1fr;
  max-width: 420px;
}
.trinite-recap-root .stage-card__map {
  margin: 0;
  padding: 0;
  background: transparent;
  overflow: visible;
}
.trinite-recap-root .stage-card__map img {
  width: 100%;
  height: auto;
  display: block;
}
.trinite-recap-root .stage-card__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.trinite-recap-root .stage-card__stat {
  padding: clamp(18px, 2.4vw, 28px) 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.trinite-recap-root .stage-card__stat:first-child { padding-top: 0; }
.trinite-recap-root .stage-card__stat:last-child  { padding-bottom: 0; }
.trinite-recap-root .stage-card__stat + .stage-card__stat {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.trinite-recap-root .stage-card__num {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 1;
  color: var(--white);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1;
}
.trinite-recap-root .stage-card__label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(12px, 1vw, 14px);
  color: var(--gold);
  letter-spacing: 0.04em;
}
@media (max-width: 700px) {
  .trinite-recap-root .stage-card {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .trinite-recap-root .stage-card__stats {
    flex-direction: row;
    justify-content: space-between;
  }
  .trinite-recap-root .stage-card__stat {
    flex: 1;
    align-items: flex-start;
    padding: 0 clamp(8px, 2vw, 16px);
  }
  .trinite-recap-root .stage-card__stat + .stage-card__stat {
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
  }
  .trinite-recap-root .stage-card__num { font-size: clamp(28px, 6vw, 40px); }
}

/* Legacy stage-poster classes kept as no-ops in case any other partial
 * references them. New day sections use .stage-card instead. */
.trinite-recap-root .stage-poster {
  margin: 0;
  padding: 0;
  background: transparent;
  max-width: 320px;
}
.trinite-recap-root .stage-poster img { width: 100%; height: auto; display: block; }
.trinite-recap-root .stage-poster__cap {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 14px;
  display: block;
}

/* Body prose */
.trinite-recap-root .day__lede {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  max-width: 28ch;
}
.trinite-recap-root .day__lede p { margin: 0; }
.trinite-recap-root .day__lede p + p { margin-top: 0.6em; }

.trinite-recap-root .day__body {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  max-width: 56ch;
}
.trinite-recap-root .day__body p { margin: 0; }
.trinite-recap-root .day__body p + p { margin-top: 1em; }

/* Editor-produced links inside day copy — gold, weight 600, hairline gold
 * underline that solidifies on hover. Same vocabulary as .day__inline-link
 * but applied to plain <a> from wp_editor output. */
.trinite-recap-root .day__lede a,
.trinite-recap-root .day__body a {
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(250, 217, 4, 0.4);
  padding-bottom: 1px;
  transition: border-color 0.24s var(--ease);
}
.trinite-recap-root .day__lede a:hover,
.trinite-recap-root .day__lede a:focus-visible,
.trinite-recap-root .day__body a:hover,
.trinite-recap-root .day__body a:focus-visible { border-bottom-color: var(--gold); }
.trinite-recap-root .day__lede a:focus-visible,
.trinite-recap-root .day__body a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Track Day "Presented by" block — small kicker label + Pennzoil logo on
 * its own row beneath the day numeral. The logo image keeps its colors;
 * a thin pine-deep card backs it so the yellow Pennzoil mark reads against
 * the section's pine-deep ground. */
.trinite-recap-root .day__presented-by {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.trinite-recap-root .day__presented-by-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.trinite-recap-root .day__presented-by-link {
  display: inline-block;
  line-height: 0;
  transition: opacity 0.24s var(--ease);
}
.trinite-recap-root .day__presented-by-link:hover,
.trinite-recap-root .day__presented-by-link:focus-visible { opacity: 0.9; }
.trinite-recap-root .day__presented-by-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.trinite-recap-root .day__presented-by-link img {
  height: clamp(36px, 4vw, 56px);
  width: auto;
  display: block;
}

/* === IG photo strip === */
.trinite-recap-root .ig-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.trinite-recap-root .ig-strip__tile {
  /* Source photos are 3:2; matching aspect avoids the square crop and
     gives tiles ~50% more vertical presence inside .day__col. */
  aspect-ratio: 3 / 2;
  background: var(--pine-inky);
  border: 1px solid rgba(250, 217, 4, 0.12);
  position: relative;
  overflow: hidden;
}
.trinite-recap-root .ig-strip__tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s var(--ease), filter 0.9s var(--ease);
}
.trinite-recap-root .ig-strip__tile:hover img {
  transform: scale(1.05);
  filter: brightness(1.06);
}
.trinite-recap-root .ig-strip__tile::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,28,24,0.3), transparent 55%);
  pointer-events: none;
}
.trinite-recap-root .ig-strip__caption {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 6px;
}

/* === Cinematic band — full-bleed photo punctuating sections === */
.trinite-recap-root .recap-band {
  margin: 0;
  width: 100%;
  height: clamp(200px, 32vw, 440px);
  overflow: hidden;
  position: relative;
  background: var(--pine-inky);
}
.trinite-recap-root .recap-band img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.trinite-recap-root .recap-band::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,28,24,0.18), transparent 35%, transparent 65%, rgba(0,28,24,0.18));
  pointer-events: none;
}

/* Rally-vibes variant — bias the crop upward so the camp/staging area
   stays in frame instead of being cut by the slim band. */
.trinite-recap-root .recap-band--vibes img {
  object-position: center 25%;
}

/* Track variant — bias the crop downward so the closest row of people
   in the group photo stays in frame. */
.trinite-recap-root .recap-band--track img {
  object-position: center 70%;
}

/* Podium variant — visually attached to the standings section that follows.
   Breathing room above (created via extra ledger padding so it stays
   pine-mid green, not a dark gap), tight below (leads into podium). */
.trinite-recap-root .ledger:has(+ .recap-band--podium) {
  padding-bottom: clamp(72px, 9vw, 128px);
}
.trinite-recap-root .recap-band--podium + .standings {
  padding-top: clamp(32px, 4vw, 56px);
}

@media (max-width: 700px) {
  /* Taller bands on phones — the slim 160-260px crop felt cramped
     against the surrounding section heights. */
  .trinite-recap-root .recap-band { height: clamp(240px, 65vw, 360px); }

  /* Day sections + flyovers match the nav-bar / ledger / standings
     16px gutter. Push the gutter up to .day__grid so both .day__col
     AND .day__rail (and therefore the flyover) inherit the same inset.
     The .day__col rule further down has its horizontal padding zeroed
     to avoid doubling up. */
  .trinite-recap-root .day__grid { padding-left: 16px; padding-right: 16px; }

  /* Carried over from the podium-band coupling rules. */
  .trinite-recap-root .ledger:has(+ .recap-band--podium) { padding-bottom: 60px; }
  .trinite-recap-root .recap-band--podium + .standings { padding-top: 28px; }
}

/* === IG pull-quote === */
.trinite-recap-root .pullquote {
  text-align: left;
  position: relative;
}
.trinite-recap-root .pullquote__mark {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(72px, 9vw, 112px);
  line-height: 0.5;
  color: var(--gold);
  opacity: 0.55;
  margin-bottom: 8px;
  display: block;
  user-select: none;
}
/* Pullquote text — Inter 500, no italic anywhere on the page. */
.trinite-recap-root .pullquote__text {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.3;
  color: var(--white);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.trinite-recap-root .pullquote__attribution {
  margin-top: clamp(20px, 2.4vw, 28px);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.trinite-recap-root .pullquote__attribution::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
  transition: width 0.5s var(--ease-out), opacity 0.3s var(--ease);
}
.trinite-recap-root .pullquote__attribution:hover::before {
  width: 56px;
  opacity: 1;
}

/* === Day stats trio === */
.trinite-recap-root .day-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rail);
  border-top: 1px solid var(--rail);
  border-bottom: 1px solid var(--rail);
}
.trinite-recap-root .day-stats__cell {
  padding: 22px 16px;
  text-align: left;
  background: var(--pine-deep);
}
/* Per-day stat numerals — Inter 700, mirrors /2026teams/ .trinite-stats-belt__num */
.trinite-recap-root .day-stats__num {
  font-family: var(--sans);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
  line-height: 1;
  margin-bottom: 10px;
}
.trinite-recap-root .day-stats__label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

/* === RESPONSIVE: collapse to single column at <=900px ===
 * Stack order is "col" then "rail" — title/map/stats/editorial first, the
 * flyover video at the end as a "watch the day" payoff. On desktop the
 * sticky-rail-as-you-read pattern works because both panels are in view at
 * once; on tablet/mobile we read top-to-bottom and the video as an opener
 * was confusing (heading appeared *after* a video labeled "DAY 1 · FLYOVER").
 */
@media (max-width: 900px) {
  .trinite-recap-root .day__col {
    gap: clamp(32px, 5vh, 64px);
    padding: clamp(40px, 7vw, 72px) clamp(20px, 4vw, 32px);
  }
  .trinite-recap-root .day__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "col" "rail";
    gap: clamp(32px, 4vw, 48px);
    min-height: 0; /* desktop's 200vh is meaningless when the rail isn't sticky */
  }
  .trinite-recap-root .day__rail {
    position: relative;
    top: auto;
    height: auto;
    margin: 0 auto clamp(24px, 4vh, 48px);
    padding-block: 0;
    justify-content: center;
  }
  .trinite-recap-root .flyover-portrait {
    aspect-ratio: 9 / 16;
    height: auto;
    width: 100%;
  }
  .trinite-recap-root .day__col {
    max-width: none;
    justify-self: stretch;
  }
  .trinite-recap-root .stage-poster { max-width: 100%; }
}

/* ============ CLIMAX DIVIDER ============ */
.trinite-recap-root .climax-divider {
  margin: clamp(48px, 6vw, 80px) auto clamp(36px, 5vw, 56px);
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  max-width: 720px;
  padding: 0 24px;
}
.trinite-recap-root .climax-divider::before,
.trinite-recap-root .climax-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
}

/* ============ TRACK CINEMA ============ */
.trinite-recap-root .track-cinema {
  position: relative;
  background: var(--pine-inky);
  padding: clamp(40px, 5vw, 80px) 24px clamp(72px, 9vw, 120px);
  overflow: hidden;
}
.trinite-recap-root .track-cinema::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(250, 217, 4, 0.16) 0%, rgba(250, 217, 4, 0.04) 35%, transparent 70%);
  pointer-events: none;
}
.trinite-recap-root .track-cinema__inner {
  max-width: 1480px;
  margin: 0 auto;
  position: relative;
}
.trinite-recap-root .coda-head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: clamp(20px, 2.5vw, 32px);
  flex-wrap: wrap;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 clamp(0px, 2vw, 24px);
}
.trinite-recap-root .coda-head__amp {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.005em;
}
.trinite-recap-root .coda-head__label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0.78;
}
.trinite-recap-root .coda-head__rule {
  flex: 1;
  height: 1px;
  background: var(--rail-strong);
  align-self: center;
  min-width: 60px;
}
.trinite-recap-root .coda-prose {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  max-width: 60ch;
  margin: 0 auto clamp(36px, 4.5vw, 56px);
  text-align: center;
}

.trinite-recap-root .track-cinema__frame {
  position: relative;
  max-width: 1380px;
  margin: 0 auto;
  background: var(--pine-inky);
  border: 1px solid rgba(250, 217, 4, 0.32);
  box-shadow:
    0 0 0 1px rgba(250, 217, 4, 0.10),
    0 48px 96px -32px rgba(0, 0, 0, 0.85);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.trinite-recap-root .track-cinema__frame video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: var(--pine-inky);
}
.trinite-recap-root .track-cinema__band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  max-width: 1380px;
  margin: 16px auto 0;
  padding: 0 4px;
  flex-wrap: wrap;
}
.trinite-recap-root .track-cinema__label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}
.trinite-recap-root .track-cinema__hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

.trinite-recap-root .day3-closing {
  background: var(--pine-inky);
  padding: clamp(40px, 5vw, 64px) 24px clamp(72px, 9vw, 120px);
}
.trinite-recap-root .day3-closing__inner {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
}

/* ============ STANDINGS ============ */
.trinite-recap-root .standings {
  background: var(--pine-mid);
  padding: clamp(80px, 10vw, 140px) 24px clamp(60px, 8vw, 100px);
  position: relative;
  overflow: hidden;
}
.trinite-recap-root .standings::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(250, 217, 4, 0.10) 0%, transparent 60%);
  pointer-events: none;
}
.trinite-recap-root .standings__inner {
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
}
.trinite-recap-root .standings__head {
  text-align: center;
  margin-bottom: clamp(56px, 7vw, 88px);
}
.trinite-recap-root .standings__kicker {
  font-family: var(--sans);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}
/* Section H2 — Inter 700 uppercase, matches /live/ .trinite-live-section__title
 * scale (one tier under the masthead H1). */
.trinite-recap-root .standings__title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 0.92;
  letter-spacing: -0.018em;
  color: var(--white);
  text-transform: uppercase;
}
.trinite-recap-root .standings__title em {
  font-style: normal;
  color: inherit;
  font-weight: 700;
}
.trinite-recap-root .standings__sub {
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

/* Three independent class cards. We tried subgrid to align rank-N rows
 * across all three classes, but when one team has no vehicle line (e.g.
 * #42 Benzie/Benzie) and the equivalent rank in another class does (e.g.
 * #47 Petereit/Brezina with "2024 F150 Raptor"), subgrid forced empty
 * space below the shorter row — and that empty space looked like a bug.
 * Reverted to flex-column inside each card. Cards still align at top of
 * the section; podium rows size to their own content within each card. */
.trinite-recap-root .podium-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  column-gap: clamp(20px, 2.5vw, 36px);
  row-gap: clamp(20px, 2.2vw, 28px);
  margin-bottom: clamp(56px, 7vw, 88px);
}
.trinite-recap-root .class-board {
  background: var(--pine-deep);
  border: 1px solid rgba(255,255,255,0.08);
  padding: clamp(24px, 2.6vw, 36px);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.2vw, 28px);
}
.trinite-recap-root .class-board__head {
  border-bottom: 1px solid rgba(250, 217, 4, 0.3);
  padding-bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
/* Class board names — Inter 700 uppercase, mirrors /2026teams/ .trinite-career__title */
.trinite-recap-root .class-board__name {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.trinite-recap-root .class-board__count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.trinite-recap-root .podium {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 22px);
  margin: 0;
  padding: 0;
}
.trinite-recap-root .podium__row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: border-color 0.3s var(--ease);
}
.trinite-recap-root .podium__row:last-child { border-bottom: none; padding-bottom: 0; }
.trinite-recap-root .podium__row:hover { border-color: rgba(250, 217, 4, 0.4); }
.trinite-recap-root .podium__rank {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--white);
  opacity: 0.45;
  line-height: 1;
}
.trinite-recap-root .podium__row--first .podium__rank {
  color: var(--gold);
  opacity: 1;
  font-size: 40px;
}
.trinite-recap-root .podium__entry {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: color 0.24s var(--ease);
}
.trinite-recap-root .podium__entry:hover .podium__car,
.trinite-recap-root .podium__entry:focus-visible .podium__car { color: var(--gold); }
.trinite-recap-root .podium__entry:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.trinite-recap-root .podium__num {
  font-family: var(--sans);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--gold);
  display: block;
  line-height: 1.1;
  margin-bottom: 2px;
}
.trinite-recap-root .podium__car {
  font-family: var(--sans);
  font-size: clamp(15px, 1.25vw, 17px);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--white);
  display: block;
  line-height: 1.25;
  transition: color 0.24s var(--ease);
}
.trinite-recap-root .podium__vehicle {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.65);
  display: block;
  margin-top: 4px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.trinite-recap-root .podium__points {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold);
  text-align: right;
}
.trinite-recap-root .podium__bio-link {
  display: block;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold);
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.24s var(--ease);
}
.trinite-recap-root .podium__bio-link:hover,
.trinite-recap-root .podium__bio-link:focus-visible { opacity: 1; }
.trinite-recap-root .podium__bio-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
/* Mobile/tablet — single column stack of the three class cards. */
@media (max-width: 900px) {
  .trinite-recap-root .podium-grid {
    grid-template-columns: 1fr;
    row-gap: clamp(28px, 4vw, 40px);
  }
}

/* === Roster table === */
.trinite-recap-root .roster {
  margin-top: clamp(40px, 5vw, 64px);
}
.trinite-recap-root .roster__head {
  text-align: center;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.trinite-recap-root .roster__kicker {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
/* Roster sub-section title — Inter 700 uppercase, smaller than the parent
 * .standings__title but same family. */
.trinite-recap-root .roster__title {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 48px);
  letter-spacing: -0.018em;
  color: var(--white);
  text-transform: uppercase;
  line-height: 0.95;
}
.trinite-recap-root .roster__title em {
  font-style: normal;
  color: inherit;
  font-weight: 700;
}
.trinite-recap-root .roster__sub {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

/* Tab strip — segmented look. Each tab is a card sitting on the same
 * baseline rail; the active tab fills with pine-deep, gets a 2px gold
 * top-edge indicator + a gold underline, and reads as a panel "lifted"
 * out of the rail. Inter 500 uppercase 0.24em tracking. Hello Elementor's
 * pink button hover defaults are beaten with explicit !important on bg. */
.trinite-recap-root .roster__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.4vw, 32px);
  margin-bottom: clamp(24px, 2.8vw, 40px);
  border-bottom: 1px solid var(--rail);
}
.trinite-recap-root .roster__tab {
  position: relative;
  font-family: var(--sans);
  font-size: clamp(13px, 1.15vw, 15px);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  background: transparent !important;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 0;
  box-shadow: none;
  padding: 16px clamp(20px, 2vw, 28px);
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.24s var(--ease), background-color 0.24s var(--ease), border-color 0.24s var(--ease);
}
.trinite-recap-root .roster__tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
  transition: background-color 0.24s var(--ease);
}
.trinite-recap-root .roster__tab:hover,
.trinite-recap-root .roster__tab:focus,
.trinite-recap-root .roster__tab:focus-visible,
.trinite-recap-root .roster__tab:active {
  background: rgba(255,255,255,0.04) !important;
  color: var(--gold);
}
.trinite-recap-root .roster__tab.is-active,
.trinite-recap-root .roster__tab[aria-selected="true"] {
  color: var(--gold);
  background: var(--pine-deep) !important;
  border-color: rgba(250, 217, 4, 0.3);
}
.trinite-recap-root .roster__tab.is-active::after,
.trinite-recap-root .roster__tab[aria-selected="true"]::after {
  background: var(--gold);
}
.trinite-recap-root .roster__tab:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.trinite-recap-root .roster__panel[hidden] { display: none; }

/* Roster table scroll wrapper — on mobile the 8-col All Cars table is wider
 * than the viewport. Wrap it in an x-scroll container so the table can
 * extend past the screen edge without breaking the page, and pin the team
 * column so context never scrolls away. The wrapper is invisible on desktop
 * (no overflow needed). */
.trinite-recap-root .roster-table__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Visual cue that there's more content to the right when overflowed —
   * a soft gradient fading to pine-deep on the right edge. */
  background:
    linear-gradient(to right, var(--pine-deep), var(--pine-deep)) right center / 24px 100% no-repeat;
}
.trinite-recap-root .roster-table {
  background: var(--pine-deep);
  border: 1px solid rgba(255,255,255,0.08);
  padding: clamp(20px, 2.4vw, 32px);
}
/* Table caps (X-CROSS / CAR / CLASSIC) — Inter 700 uppercase + gold underline,
 * mirrors /2026teams/ .trinite-career__title spec-sheet treatment. */
.trinite-recap-root .roster-table__cap {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: -0.005em;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 12px;
}
.trinite-recap-root .roster-table__cap-count {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  font-style: normal;
}
.trinite-recap-root .roster-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 14px;
}
.trinite-recap-root .roster-table th {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  padding: 10px 8px;
  border-bottom: 1px solid var(--rail);
}
.trinite-recap-root .roster-table td {
  padding: 11px 8px;
  font-feature-settings: "tnum" 1;
  color: var(--white);
  text-align: right;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.trinite-recap-root .roster-table td:first-child { color: rgba(255,255,255,0.5); text-align: left; width: 32px; }
.trinite-recap-root .roster-table td:nth-child(2) { color: var(--white); font-weight: 600; text-align: left; }
.trinite-recap-root .roster-table td:last-child { color: var(--gold); font-weight: 600; }

.trinite-recap-root .roster-table tr.band-podium td:nth-child(2) { color: var(--gold); }
.trinite-recap-root .roster-table tr.band-podium td:last-child { font-size: 15px; }

.trinite-recap-root .roster-table__car-link {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px dotted rgba(250, 217, 4, 0.35);
  padding-bottom: 1px;
  transition: border-color 0.24s var(--ease);
}
.trinite-recap-root .roster-table__car-link:hover,
.trinite-recap-root .roster-table__car-link:focus-visible {
  border-bottom-color: var(--gold);
}
.trinite-recap-root .roster-table__car-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Team / Class columns — left-aligned, take the slack so day scores stay
 * tight on the right. The last four columns are always D1, D2, D3, Total
 * (right-aligned); everything before them is text content (left). This
 * works for both the 7-col per-class table and the 8-col All variant. */
.trinite-recap-root .roster-table th { text-align: left; }
.trinite-recap-root .roster-table th:nth-last-of-type(-n+4) { text-align: right; }
.trinite-recap-root .roster-table td.roster-table__team { text-align: left; }

/* Class column — small uppercase mono badge, left-aligned. Lives only in
 * the All view. */
.trinite-recap-root .roster-table td.roster-table__class {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  text-align: left;
}
.trinite-recap-root .roster-table td.roster-table__team {
  font-family: var(--sans);
  color: var(--white);
  width: auto;
  min-width: 200px;
}

/* Mobile — sticky team-name column so rank/team stays visible while the
 * D1/D2/D3/Total columns scroll horizontally. The header row also pins. */
@media (max-width: 700px) {
  .trinite-recap-root .roster-table table {
    min-width: 560px; /* enough for all 8 cols at readable size */
  }
  .trinite-recap-root .roster-table td.roster-table__team,
  .trinite-recap-root .roster-table th:nth-of-type(3),
  .trinite-recap-root .roster-table th:nth-of-type(4) {
    /* (Sticky on a th in scrolling tbody is finicky cross-browser; keep simple) */
  }
  .trinite-recap-root .roster-table td.roster-table__team {
    position: sticky;
    left: 0;
    background: var(--pine-deep);
    z-index: 1;
    box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.5);
  }
}
.trinite-recap-root .roster-table__team-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: color 0.24s var(--ease);
}
.trinite-recap-root .roster-table__team-link:hover,
.trinite-recap-root .roster-table__team-link:focus-visible { color: var(--gold); }
.trinite-recap-root .roster-table__team-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.trinite-recap-root .roster-table__team-label {
  display: block;
  font-weight: 600;
  letter-spacing: -0.005em;
  font-size: 14px;
  line-height: 1.2;
}
.trinite-recap-root .roster-table__team-first {
  display: block;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.6);
  margin-top: 2px;
  line-height: 1.2;
}

/* Roster closer — magazine-surface §B.3.6 pattern: centered link with
 * gold rule bookends, hover-extend. Sends readers from the lookback
 * standings out to the full /2026teams/ archive. */
.trinite-recap-root .roster__closer {
  margin-top: clamp(32px, 4vw, 56px);
  text-align: center;
}
.trinite-recap-root .roster__closer-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  padding: 12px 8px;
  line-height: 1;
}
.trinite-recap-root .roster__closer-link::before,
.trinite-recap-root .roster__closer-link::after {
  content: '';
  display: inline-block;
  width: 48px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
  transition: width 0.5s var(--ease-out), opacity 0.3s var(--ease);
}
.trinite-recap-root .roster__closer-link:hover::before,
.trinite-recap-root .roster__closer-link:hover::after,
.trinite-recap-root .roster__closer-link:focus-visible::before,
.trinite-recap-root .roster__closer-link:focus-visible::after {
  width: 80px;
  opacity: 1;
}
.trinite-recap-root .roster__closer-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .trinite-recap-root .roster__closer-link::before,
  .trinite-recap-root .roster__closer-link::after {
    width: 80px;
    transition: none;
  }
}

/* ============ CLOSING ============ */
.trinite-recap-root .closing {
  background: var(--pine-inky);
  padding: clamp(80px, 10vw, 140px) 24px clamp(60px, 8vw, 100px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.trinite-recap-root .closing::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(250, 217, 4, 0.12) 0%, transparent 60%);
  pointer-events: none;
}
.trinite-recap-root .closing > * { position: relative; z-index: 1; }
/* Closing title — Inter 700 uppercase, same scale as section H2 */
/* Closing head — opener / hairline divider / title / CTA stacked.
 * The opener is editorial body weight (acknowledgment to the field),
 * the title is sans-700 uppercase (forward-looking), the gold rule
 * separates them as a beat. */
.trinite-recap-root .closing__head {
  max-width: 38ch;
  margin: 0 auto clamp(48px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2vw, 24px);
}
.trinite-recap-root .closing__opener {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
  margin: 0;
  text-align: center;
  letter-spacing: 0.01em;
}
.trinite-recap-root .closing__divider {
  width: clamp(48px, 6vw, 72px);
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
}
.trinite-recap-root .closing__title {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--white);
  text-transform: uppercase;
  margin: 0;
  text-align: center;
  text-wrap: balance;
}
.trinite-recap-root .closing__title em {
  font-style: normal;
  color: inherit;
  font-weight: 700;
}

.trinite-recap-root .closing__ig-handle {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 40px;
}
.trinite-recap-root .closing__ig-handle::before,
.trinite-recap-root .closing__ig-handle::after {
  content: '';
  width: 32px; height: 1px;
  background: var(--gold);
  opacity: 0.5;
  transition: width 0.5s var(--ease-out), opacity 0.3s var(--ease);
}
.trinite-recap-root .closing__ig-handle:hover::before,
.trinite-recap-root .closing__ig-handle:hover::after { width: 64px; opacity: 1; }

.trinite-recap-root .closing__feed-note {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 24px;
}

/* Closing IG container — wraps the [instagram-feed] shortcode output. We
 * intentionally do NOT set grid/columns here because Smash Balloon brings
 * its own layout. Just bound the width and add space below. */
.trinite-recap-root .closing__ig {
  margin: 0 auto clamp(40px, 5vw, 64px);
  max-width: 920px;
}
/* Tone Smash Balloon output to match the page palette — kill the white
 * "Load More" button styling, sit gallery edges flush with our pine
 * background, dim the captions to our muted-white scale. SB exposes
 * `.sb_instagram_*` hooks; defensive selectors so a plugin update can't
 * silently break the look. */
.trinite-recap-root .closing__ig #sb_instagram,
.trinite-recap-root .closing__ig .sb_instagram_widget,
.trinite-recap-root .closing__ig #sbi_images { background: transparent; }
.trinite-recap-root .closing__ig #sbi_load .sbi_load_btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--white);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.trinite-recap-root .closing__ig #sbi_load .sbi_load_btn:hover {
  background: var(--gold);
  color: var(--pine-deep);
  border-color: var(--gold);
}

.trinite-recap-root .closing__cta {
  display: inline-block;
  padding: 16px 32px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  border: 1px solid var(--white);
  background: transparent;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.trinite-recap-root .closing__cta:hover {
  background: var(--gold);
  color: var(--pine-deep);
  border-color: var(--gold);
}
.trinite-recap-root .closing__bookend {
  margin: clamp(40px, 5vw, 64px) auto 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 24px;
}
.trinite-recap-root .closing__bookend::before,
.trinite-recap-root .closing__bookend::after {
  content: '';
  width: 56px; height: 1px;
  background: var(--gold);
  opacity: 0.5;
}

/* ============ MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .trinite-recap-root *,
  .trinite-recap-root *::before,
  .trinite-recap-root *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .trinite-recap-root .day__col { gap: clamp(28px, 4vh, 56px); }
}

/* ============ MOBILE TWEAKS ============
 * Section padding mirrors the inner-nav (12px 16px). Sections were calling
 * 80–140px top/bottom which felt cavernous on mobile — tightened to 40–48px
 * so the layout breathes the same way the nav does. Hero date row collapses
 * its row-gap so the meta line doesn't tower over the title. */
@media (max-width: 700px) {
  .trinite-recap-root .day { padding: clamp(48px, 7vw, 80px) 0; }
  .trinite-recap-root .day__numeral { font-size: clamp(56px, 16vw, 88px); }
  .trinite-recap-root .ig-strip { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .trinite-recap-root .day-stats__cell { padding: 16px 12px; }

  /* Section paddings — match nav-bar rhythm. */
  .trinite-recap-root .masthead { padding: 56px 16px 40px; }
  .trinite-recap-root .ledger   { padding: 40px 16px; }
  .trinite-recap-root .standings{ padding: 48px 16px; }
  .trinite-recap-root .closing  { padding: 48px 16px 40px; }
  .trinite-recap-root .track-cinema { padding: 40px 16px 56px; }

  /* Day column: horizontal gutter is now owned by .day__grid (16px) so
     both col and rail/flyover share the same inset. Keep the vertical
     padding here. */
  .trinite-recap-root .day__col { padding: 32px 0; }

  /* Hero meta line — tight gap so "MAY 4 — 7, 2026 · SONOMA · NORCAL · 38
   * CARS · 3 CLASSES" wraps as one cohesive block, not three towers. */
  .trinite-recap-root .masthead__date {
    gap: 6px 14px;
    font-size: 11px;
    letter-spacing: 0.24em;
  }
  .trinite-recap-root .masthead__date span:not(:last-child)::after {
    margin-left: 14px;
  }
  /* Hero title: pull margin-top of meta line in (was clamp(40px,5vw,64px)). */
  .trinite-recap-root .masthead__date { margin-top: 28px; }
  .trinite-recap-root .masthead__kicker { margin-bottom: 24px; }

  /* Section H2 scales — was clamp(40px,6vw,80px); too large for narrow
   * viewports where the title eats the whole screen. */
  .trinite-recap-root .standings__title { font-size: clamp(36px, 10vw, 56px); }
  .trinite-recap-root .standings__head  { margin-bottom: 32px; }

  /* Roster tabs — drop the " Class" suffix and tighten. Four labels
   * (ALL / X-CROSS™ / CAR / CLASSIC) now fit in one wrap-friendly row. */
  .trinite-recap-root .roster__tab-suffix { display: none; }
  .trinite-recap-root .roster__tabs {
    gap: 4px;
    margin-bottom: 24px;
  }
  .trinite-recap-root .roster__tab {
    padding: 12px 14px;
    font-size: 12px;
    letter-spacing: 0.18em;
  }
}

/* Always allow the suffix to be hidden on narrow widths even above 700px
 * if the labels would wrap to multiple rows. (No-op above 700 because the
 * media query above doesn't apply.) */
.trinite-recap-root .roster__tab-suffix { display: inline; }