/* ═══════════════════════════════════════════════
   CageRace — style.css
   Brand: Black / Race Red (#FF0000) / White
   Typography: Montserrat (Google Fonts)
   ═══════════════════════════════════════════════ */

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

:root {
  --red: #FF0000;
  --white: #FFFFFF;
  /* Style-guide 2026-04-25: site background is *almost* black with a
     whisper of blue so floating dark boxes still read. Brett's call. */
  --black: #04040D;
  --true-black: #000000;
  --grey: #888888;
  --dark: #06060F;
  --dark-card: #0A0A18;
  --border: rgba(255,255,255,0.08);
  --border-light: rgba(255,255,255,0.12);
  --font: 'Montserrat', sans-serif;
  --max-w: 1400px;
  /* Brett-locked 2026-04-28: LETTERBOX is a fixed 90px band on desktop.
     No viewport-height math (which caused drift). At 1920×1080 this gives
     a 1920×900 photo stage between the bands. Mobile keeps its own values. */
  --letterbox-h: 90px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

/* ── SITE-WIDE COUNTDOWN (inline in nav — sized to match CAGERACE logo) ─────── */
/* Brett-locked 2026-04-25: countdown lives in the BOTTOM letterbox.
   Bottom offset MIRRORS the headline's top offset (calc(letterbox - 50px))
   so the magazine grid reads symmetric — countdown sits 50px above the
   photo's bottom edge, just as the headline sits 50px above the top. */
.countdown-bar {
  position: fixed;
  left: 24px;
  /* Brett-locked 2026-04-28: vertically centered inside the 90px bottom
     letterbox. (28px ≈ countdown row height.) */
  bottom: calc((var(--letterbox-h) - 28px) / 2);
  z-index: 100;            /* above bottom letterbox (z=50) */
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--white);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.2s;
}
.countdown-bar:hover { opacity: 0.8; }
/* Bastille Day tricolor label — "le 14 juillet" in French flag order: blue · white · red */
.countdown-bar .cb-label { white-space: nowrap; }
.countdown-bar .cb-label .cb-fr-b { color: #0055A4; }
.countdown-bar .cb-label .cb-fr-w { color: #FFFFFF; }
.countdown-bar .cb-label .cb-fr-r { color: #FF0000; }
/* Tricolor — usable anywhere (headlines, body, callouts). Site-wide. */
.cb-fr-b { color: #0055A4; }
.cb-fr-w { color: #FFFFFF; }
.cb-fr-r { color: #FF0000; }
.countdown-bar .cb-timer {
  font-family: inherit;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.countdown-bar .cb-timer > span { color: var(--white); }
/* Each numeral + label pair wrapped in a .cb-cell to read as a clock
   window, not overflowing menu text. Outlined, dark fill, tiny label. */
.countdown-bar .cb-timer .cb-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 3px;
  background: rgba(0,0,0,0.35);
  color: var(--white);
}
.countdown-bar .cb-timer em {
  font-style: normal;
  font-weight: 400;
  opacity: 0.55;
  font-size: 9px;
  letter-spacing: 0.1em;
  margin: 0 0 0 2px;
}
@media (max-width: 900px) {
  .countdown-bar { font-size: 14px; gap: 6px; }
  .countdown-bar .cb-timer { font-size: 14px; }
}
@media (max-width: 768px) {
  /* Mobile bottom letterbox is 92px tall; mirror the 86px headline top inset. */
  .countdown-bar { left: 16px; bottom: 6px; font-size: 11px; gap: 5px; }
  .countdown-bar .cb-timer { font-size: 11px; }
}
@media (max-width: 380px) {
  .countdown-bar { font-size: 10px; gap: 4px; }
  .countdown-bar .cb-timer { font-size: 10px; }
}

/* ── NAV ─────────────────────────────────────── */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 10px;
  /* Right padding leaves room for absolute-positioned Discord + Hamburger.
     Left padding = 24px to align CageRace logo's leading edge with the
     WEAPONISING headline (also at left:24px on desktop). Magazine discipline. */
  padding: 16px 110px 16px 24px;
  transition: background 0.3s, box-shadow 0.3s;
}
/* Photo is fixed — nav stays transparent at any scroll position so the
   subject's head doesn't get cropped by an opaque nav band on scroll. */
.site-nav.scrolled {
  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%);
  box-shadow: none;
}

/* Discord + Hamburger anchored to top-right of viewport on every page —
   absolute-positioned within the fixed nav so they stay pinned even when
   the nav row wraps on narrow screens. */
.site-nav .nav-discord,
.site-nav .hamburger {
  position: absolute;
  top: 18px;
  z-index: 1002;
}
.site-nav .nav-discord { right: 70px; }
.site-nav .hamburger   { right: 22px; }
@media (max-width: 768px) {
  .site-nav .nav-discord { top: 14px; right: 56px; }
  .site-nav .hamburger   { top: 14px; right: 14px; }
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-logo svg { width: 48px; height: 48px; }
.nav-logo .logo-cage { color: var(--red); }
.nav-logo .logo-race { color: var(--white); }

/* Discord link in nav */
.nav-discord {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FF0000;
  margin-right: 16px;
  margin-left: auto;
  transition: color 0.2s, transform 0.2s;
  text-decoration: none;
}
.nav-discord:hover { color: #5865F2; transform: scale(1.1); }
.nav-discord svg { width: 30px; height: 30px; display: block; }
@media (max-width: 768px) {
  .nav-discord { margin-right: 12px; }
  .nav-discord svg { width: 26px; height: 26px; }
}

.nav-links {
  flex: 1;                    /* take available space between logo+countdown and Discord/Hamburger */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-evenly;  /* spread items evenly across the bar */
  row-gap: 10px;
  margin: 0 24px;
}
.nav-links a {
  /* Brett-locked 2026-04-28: bumped 1pt for legibility (was 14px). */
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.nav-links a:hover { opacity: 1; color: var(--red); }
.nav-links a.active { opacity: 1; color: var(--red); }

/* Brett-locked 2026-04-25: INDIEGOGO joins the rest of the menu items as a
   plain link — no red box. Hover still glows red like the others. */
.nav-cta {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  opacity: 0.8 !important;
  letter-spacing: 0.12em !important;
  transition: opacity 0.2s, color 0.2s !important;
}
.nav-cta:hover { background: transparent !important; color: var(--red) !important; opacity: 1 !important; }

/* Brett-locked 2026-05-10: Register CTA on top nav — red pill button,
   white text on brand-red background. Stands apart from the green/orange
   indicator items as a standalone action link. Replaces the Legals dropdown. */
.nav-links a.nav-register {
  background: var(--red) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  padding: 7px 16px !important;
  border-radius: 999px !important;
  letter-spacing: 0.14em !important;
  transition: background 0.2s, transform 0.15s !important;
}
.nav-links a.nav-register:hover {
  background: #ff3333 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  transform: translateY(-1px);
}
.nav-links > a.nav-register::before { display: none !important; }
.mobile-menu a.mobile-register {
  background: var(--red);
  color: #ffffff;
  font-weight: 800;
  padding: 12px 20px;
  border-radius: 999px;
  text-align: center;
  display: inline-block;
  width: fit-content;
  margin: 8px auto;
}

/* Brett-locked 2026-04-25: visual break in the top nav between
   "what's happening NOW" (About · Production · CageRacers · News · Team)
   and the "ambitions" stack (Indiegogo · TV Show · FormulaH2o).
   Pure margin — no ::before separator (it conflicted with the orange
   ─● indicator and wins on specificity). */
.nav-links a[href="indiegogo.html"] {
  margin-left: 24px;
}

/* Brett-locked 2026-04-25: unified green dash + circle indicator on EVERY
   top-level nav item — the tricolor right-side indicator was dropped.
   Single visual language across the menu. */
.nav-links > a::before,
.nav-links > .nav-item > .nav-parent::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 6px;
  margin-right: 8px;
  vertical-align: middle;
  background:
    radial-gradient(circle at 11px 3px, #27AE60 3px, transparent 3.5px),
    linear-gradient(to right, #27AE60 0, #27AE60 8px, transparent 8px);
  background-repeat: no-repeat;
}
/* Brett-locked 2026-04-25: ambitions block (Indiegogo, TV Show, FormulaH2o)
   gets an ORANGE ─● indicator to distinguish "what we're going to do" from
   the green "what we're doing now" items. !important so any cached or
   conflicting rule (e.g. legacy separator) loses. */
.nav-links > a[href="indiegogo.html"]::before,
.nav-links > a[href="indiegogo.html"] ~ a::before,
.nav-links > a[href="indiegogo.html"] ~ .nav-item > .nav-parent::before {
  background:
    radial-gradient(circle at 11px 3px, #FF6600 3px, transparent 3.5px),
    linear-gradient(to right, #FF6600 0, #FF6600 8px, transparent 8px) !important;
  background-repeat: no-repeat !important;
  width: 14px !important;
  height: 6px !important;
  position: static !important;
  display: inline-block !important;
}

/* Production page: Vimeo pilot videos stacked in the cr-body-inline column. */
.cr-body-inline .prod-video {
  margin: 18px 0 22px;
}
.cr-body-inline .prod-video .video-wrap {
  border-radius: 3px;
}
.cr-body-inline .prod-video-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin: 10px 0 0 !important;
  text-align: right;
  text-shadow: 2px 2px 0 #000;
}

/* Hamburger */
.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
  z-index: 1001;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  /* Brett-locked 2026-04-30 — hamburger red to balance the CageRace
     trident logo top-left. Was white. */
  background: #FF0000;
  transition: all 0.3s;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--black);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.mobile-menu a:hover { opacity: 1; color: var(--red); }
.mobile-menu .mobile-cta {
  background: var(--red);
  padding: 14px 40px;
  font-size: 14px;
  opacity: 1;
}

@media (max-width: 768px) {
  .site-nav { padding: 14px 90px 14px 16px; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .nav-logo { font-size: 22px; gap: 10px; }
  .nav-logo svg { width: 40px; height: 40px; }
}

/* ── HERO ────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 120px 24px 80px;
  text-align: center;
}

.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-video-wrap iframe {
  position: absolute;
  top: 50%; left: 50%;
  width: 177.78vh;
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: none;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  z-index: 1;
}
/* Brett-locked 2026-05-17: add .hero-photo-wrap to the allowlist.
   The hero LCP refactor 2026-05-16 introduced <div class="hero-photo-wrap">
   as a flex child of .hero with its own `position: absolute; inset: 0`
   styling. Without the allowlist entry this rule force-flipped the wrap
   to position: relative, collapsing it to 0×0 and hiding the loaded
   photo. Symptom: blank black hero across every public profile. */
.hero > *:not(.hero-video-wrap):not(.hero-mobile-bg):not(.hero-photo-wrap) {
  position: relative;
  z-index: 2;
}

.hero-mobile-bg {
  display: none;
  position: absolute;
  inset: 0;
  background: url('../assets/photos/david_morgan_torrent_underwater.jpg') center center / cover no-repeat;
  z-index: 0;
}

@media (max-width: 768px) {
  .hero-video-wrap { display: none; }
  .hero-mobile-bg { display: block; }
  .hero::after { background: none; }
  .hero { min-height: 90vh; padding: 100px 20px 60px; }
}

.hero-tagline {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.hero-title {
  font-size: clamp(32px, 6vw, 80px);
  font-weight: 900;
  line-height: 1.05;
  max-width: 900px;
  margin-bottom: 28px;
}
.hero-title em { font-style: italic; color: var(--red); }
.hero-sub {
  font-size: clamp(14px, 2vw, 18px);
  opacity: 0.7;
  max-width: 600px;
  line-height: 1.7;
  margin-bottom: 48px;
}

/* ── BUTTONS ─────────────────────────────────── */
.btn-primary {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  padding: 16px 44px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: background 0.2s;
}
.btn-primary:hover { background: #cc0000; }

.btn-outline {
  display: inline-block;
  border: 1px solid var(--border-light);
  color: var(--white);
  padding: 14px 40px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: border-color 0.2s, color 0.2s;
}
.btn-outline:hover { border-color: var(--white); }

/* ── SECTIONS ────────────────────────────────── */
.section {
  padding: 100px 40px;
  max-width: var(--max-w);
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════
   STYLE GUIDE 2026-04-25 — PAGE HEADLINE PATTERN
   Every page opens: HEADLINE (white-on-black box) → HERO image
   → SUB-HEADING italic over image → body copy. Content left-
   aligns to the right edge of the Trident logo (56px gutter).
   ═══════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════
   LOCKED PAGE FRAME — Brett-locked 2026-04-25.
   Site-wide chrome: fixed photo backdrop, headline+subheading overlaid,
   vertical TIMELINE label on left, round Subscribe/Register CTAs at bottom.
   Per-page content scrolls UP over the photo and fades at top behind headline.
   Each frame element is independently fixed so individual z-indices work
   relative to the body's stacking context (no .page-frame wrapper).
   ═══════════════════════════════════════════════ */

/* LETTERBOX — opaque black bands at top + bottom of viewport.
   Fixed, site-wide. Brett-locked 2026-04-25 to 2.39:1 cinematic on desktop/iPad
   (e.g. 1920×1080 → 1920×803 photo + 138.5px letterboxes top/bottom).
   Letterbox height = (viewport_h - viewport_w / 2.39) / 2, with a min of 116px
   to guarantee the nav (logo + countdown + nav-links rows) always fits.
   Mobile (≤768) is letterbox-fixed pending the 9:16 source crops. */
.letterbox-top,
.letterbox-bottom {
  position: fixed;
  left: 0;
  right: 0;
  background: var(--true-black);
  z-index: 50;
  pointer-events: none;
  /* Brett-locked 2026-04-28: fixed 90px band — no drift. */
  height: var(--letterbox-h);
}
.letterbox-top    { top: 0; }
.letterbox-bottom { bottom: 0; }

/* SPEED BLUR — 1px red line at the inner edge of each letterbox.
   Solid #FF0000 at the RIGHT edge, fading to transparent at the LEFT.
   Reads like a molecule moving right, leaving a fading trail behind.
   Brett-locked 2026-04-28. Subtle blur + glow for the speed cue. */
.letterbox-top::after,
.letterbox-bottom::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, rgba(255,0,0,0.15) 35%, rgba(255,0,0,0.6) 75%, #FF0000 100%);
  filter: blur(0.4px);
  box-shadow: 0 0 6px rgba(255, 0, 0, 0.55), 0 0 14px rgba(255, 0, 0, 0.25);
  pointer-events: none;
}
.letterbox-top::after    { bottom: 0; }
.letterbox-bottom::before { top: 0; }
@media (max-width: 768px) {
  /* Mobile keeps its own letterbox sizing — speed-blur line is desktop-only. */
  .letterbox-top    { height: 116px; }
  .letterbox-bottom { height: 92px; }
  .letterbox-top::after,
  .letterbox-bottom::before { display: none; }
}

.frame-bg {
  position: fixed;
  /* Brett-locked 2026-04-28: photo fills the stage between the two locked
     90px letterboxes. No aspect-ratio math — height tracks viewport. */
  top: var(--letterbox-h);
  left: 0;
  right: 0;
  width: 100vw;
  height: calc(100vh - (var(--letterbox-h) * 2));
  object-fit: cover;
  object-position: 65% 0%;
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 768px) {
  .frame-bg {
    top: 116px;
    height: calc(100vh - 116px - 92px);
    /* Source 1:1 on portrait box has ~no vertical overflow → Y has no effect.
       Locked-aspect 9:16 source needed for finer vertical control on mobile. */
    object-position: 65% 0%;
  }
}
.frame-vlabel {
  position: fixed;
  top: 50%;
  left: 22px;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.5em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}
.frame-subheading {
  position: fixed;
  bottom: 32vh;
  right: 24px;
  left: auto;
  max-width: min(56%, 540px);
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(15px, 1.7vw, 22px);
  line-height: 1.35;
  text-align: right;
  color: var(--white);
  text-shadow: 3px 3px 0 #000;
  z-index: 2;
  pointer-events: none;
}
.frame-headline {
  position: fixed;
  /* Brett-locked 2026-04-28: headline vertically centered in the 90px top
     letterbox (was anchored to the photo edge with viewport-h math). */
  top: calc((var(--letterbox-h) - 46px) / 2);
  left: 24px;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: clamp(26px, 3vw, 46px);
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: var(--white);
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #000;
  z-index: 60;      /* above letterbox (z=50) so it renders ON the letterbox */
  pointer-events: none;
}
/* 2026-04-30 BUS-CRASH FIX: floating Subscribe + Register pills were
   crowding the menu bar across every locked-frame page (Brett: "two
   rando subscribe buttons o the menu"). Hidden site-wide via the
   override at the foot of this block. The original 2026-04-25 styling
   is preserved below in case Brett wants them back — just delete the
   `display: none !important` rule that follows. */
.frame-ctas {
  position: fixed;
  top: 60px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1003;    /* above letterbox (50) and nav (1000) */
}
/* 2026-04-30 BUS-CRASH OVERRIDE — hide site-wide. */
.frame-ctas { display: none !important; }
/* 2026-04-30 MENU-COLLISION OVERRIDE — fixed-position .frame-headline at
   left:24px sat in the same band as the nav logo + first menu items, so
   on /cageracers, /ai-powered, /register, /series, /indiegogo the giant
   white CAGERACERS / REGISTER / etc text bled through behind the nav.
   Hide the floating element site-wide — pages now carry an inline
   <h1 class="page-headline"> per the locked production.html pattern. */
.frame-headline { display: none !important; }
.round-cta {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: 124px;
  padding: 8px 16px;
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: none;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
  white-space: nowrap;
}
.round-cta:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}
.round-cta:active {
  transform: scale(0.97);
  background: #0055A4;
  border-color: #0055A4;
}
.round-cta .rcta-l1 { font-weight: 700; }
.round-cta .rcta-l2 { font-weight: 400; opacity: 0.65; letter-spacing: 0.12em; white-space: nowrap; }

/* SCROLLING LAYER — page content rises over the fixed photo. */
.page-scroll {
  position: relative;
  z-index: 5;          /* over photo + vlabel + subheading; under headline (10) and ctas (20) */
  padding-top: 75vh;   /* first scroll items peek in just above the bottom CTAs */
  padding-bottom: 160px;
}
@media (max-width: 768px) {
  /* Brett-locked 2026-04-25: in mobile flow layout, page-scroll no longer
     wraps a fixed-photo backdrop, so the 72vh peek-in padding is dead
     space. Collapse it. */
  .page-scroll { padding-top: 0; padding-bottom: 16px; }
}

/* Mobile tuning */
@media (max-width: 768px) {
  .frame-headline {
    /* Inside top letterbox (116px), single line, on row 3 below logo+countdown. */
    top: 86px;
    left: 16px;
    right: auto;
    font-size: 22px;
    letter-spacing: -0.04em;
  }
  .frame-subheading {
    bottom: 28vh;
    left: auto;
    right: 16px;
    max-width: 80vw;
    font-size: 14px;
  }
  .frame-vlabel {
    left: 8px;
    font-size: 11px;
    letter-spacing: 0.4em;
  }
  .frame-ctas { top: 56px; right: 10px; gap: 6px; }
  .round-cta { min-width: 110px; padding: 7px 14px; }
  .round-cta .rcta-l1 { font-size: 10px; }
  .round-cta .rcta-l2 { font-size: 8px; }
}

/* Legacy headline-row kept for non-homepage pages until they migrate. */
.headline-row {
  padding-top: 120px;
  padding-bottom: 0;
}
/* Mobile nav wraps to 2-3 rows (logo → countdown → hamburger) so the
   clearance has to be taller than the fixed-header desktop value. */
@media (max-width: 768px) { .headline-row { padding-top: 160px; } }
@media (max-width: 420px) { .headline-row { padding-top: 180px; } }

.page-headline {
  display: inline-block;
  padding: 0;
  margin: 0 0 0 56px;
  background: transparent;
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  /* Style-guide 2026-04-25: HEADLINE is ALL CAPS, NOT italic.
     Italic is reserved for creative-writing paragraphs (sub-headings). */
  font-style: normal;
  font-size: clamp(28px, 4.5vw, 60px);
  line-height: 1.0;
  max-width: calc(100vw - 32px);
  letter-spacing: -0.025em;
  text-transform: uppercase;
  /* Brett-locked 2026-04-29: black "pill" backdrop replaced with a soft
     drop-shadow so headlines read against the slideshow / cinema-scope
     photos without obscuring them. */
  text-shadow:
    0 2px 6px rgba(0,0,0,0.85),
    0 4px 18px rgba(0,0,0,0.55);
}
.page-subheading {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(16px, 2.2vw, 24px);
  line-height: 1.35;
  color: var(--white);
  max-width: 720px;
  text-shadow: 2px 2px 0 #000;
}

/* ═══ CR-HERO — canonical 16:9 hero block + subheading-on-bottom ═══
   Use this on every page below the .page-headline. */
.cr-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  background: var(--true-black);
}
.cr-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Top-weighted vertical crop so the subject's face/upper body stays
     in the 16:9 frame. Override per-image with inline
     style="object-position: X Y" when a photo's focal point is elsewhere. */
  object-position: center 15%;
  display: block;
}
.cr-hero-sub {
  position: absolute;
  left: 56px;
  right: 24px;
  bottom: 24px;
  max-width: 820px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(15px, 1.8vw, 22px);
  line-height: 1.35;
  color: var(--white);
  text-shadow: 2px 2px 0 #000;
}
/* Brett-locked 2026-04-25: body copy + Pre-Production block live in a
   RIGHT-ALIGNED column mirroring the timeline column on the left.
   Always visible (the earlier scroll-to-reveal "dissolve" was removed
   2026-04-25 — both columns are present immediately on page load). */
.cr-body {
  position: fixed;
  /* Brett-locked 2026-04-30 — headline starts just below letterbox with
     a small breathing space (was complex aspect-ratio calc that pushed
     content 100+px below letterbox). Top fade removed since column no
     longer overlaps letterbox. */
  top: calc(var(--letterbox-h) + 24px);
  bottom: calc(var(--letterbox-h) + 24px);
  right: 56px;
  left: auto;
  width: min(46vw, 540px);
  margin: 0;
  padding: 0 0 24px;
  z-index: 4;
  text-align: right;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 94%, transparent 100%);
  pointer-events: auto;
}
.cr-body::-webkit-scrollbar { width: 4px; }
.cr-body::-webkit-scrollbar-track { background: transparent; }
.cr-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 2px; }
.cr-body p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.55;
  color: var(--white);
  text-shadow: 2px 2px 0 #000;
  margin: 0 0 14px;
  text-align: right;
}
.cr-body-kicker {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--red);
  margin: 18px 0 6px;
  text-align: right;
  text-shadow: 1px 1px 0 #000;
}
.cr-body-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--white);
  margin: 0 0 12px;
  text-align: right;
  text-shadow: 2px 2px 0 #000;
}
.cr-body-img {
  display: block;
  /* Bleed killed (Brett-locked 2026-04-27 PM, was clipping past the
     left edge above 1280px). Image now sits inside the right-aligned
     column at full column width — no more left-edge crop on any
     viewport. */
  width: 100%;
  max-width: 780px;
  height: auto;
  margin: 14px 0 20px 0;
  border-radius: 3px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
}
@media (max-width: 768px) {
  .cr-body-img {
    max-width: 100%;
    margin: 12px 0 16px;
  }
}
/* About/Home Page body copy treatments — Brett-locked 2026-04-25.
   All right-aligned (inherits from .cr-body). The numbered tactics use
   Roman numerals styled as the CageRace athlete-number treatment:
   white italic with a red text-stroke outline. */
.cr-body .cr-body-lead {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(16px, 1.7vw, 21px);
  line-height: 1.4;
  color: var(--white);
  margin: 6px 0 22px;
}
.cr-body .cr-body-pull {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(20px, 2.3vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--white);
  margin: 26px 0 22px;
  text-align: right;
}
.cr-body .cr-body-tagline {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.4;
  color: var(--white);
  margin: 22px 0 28px;
}
.cr-tactics {
  list-style: none;
  margin: 6px 0 18px;
  padding: 0;
}
.cr-tactic {
  margin: 0 0 18px;
}
.cr-tactic-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 6px;
  text-align: right;
}
/* Brett-locked 2026-04-25: standard Arabic numerals across non-athlete
   contexts. The white-italic-red-outline "Roman Racing Number" treatment
   is RESERVED for the TV series athlete numbers (I–XVI). */
.cr-tactic-num {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--red);
  margin-right: 4px;
}
.cr-body .cr-tactic p {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(13px, 1.3vw, 16px);
  line-height: 1.5;
  color: rgba(255,255,255,0.88);
  margin: 0;
  text-align: right;
}
.cr-tactic-label {
  font-weight: 800;
  font-style: italic;
  color: var(--red);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-right: 4px;
}

/* PAGE HEADLINE — IN-COPY — Brett-locked 2026-04-28.
   "Headlines all have to come down onto the pages." Replaces the
   floating .frame-headline pattern. Locked Human Easy Read pull
   spec: huge white wt900 -0.035em ls 0.85 lh, 72×5 red rule above.
   Sized to fit inside the .cr-body-inline column on most pages. */
.page-headline {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.85;
  color: #FFFFFF;
  margin: 0 0 26px;
  text-align: left;
  text-transform: none;
}
.page-headline::before {
  content: '';
  display: block;
  width: 72px;
  height: 5px;
  background: #FF0000;
  margin: 0 0 18px;
}
/* When .page-headline lives inside .cr-body-inline (most pages), let
   it scale to the column. When it lives directly inside .page-scroll
   (pages without .cr-body-inline like index/marketing-engine), give
   it more room. */
.page-scroll > .page-headline {
  font-size: clamp(48px, 7vw, 120px);
  margin: 80px 6vw 28px;
  max-width: 80vw;
}

/* PAGE CTAS — IN-COPY pill row. Replaces the floating .frame-ctas
   top-right cluster. Inline flex row at the top of the copy column. */
.page-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 32px;
}
.page-ctas .round-cta {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  transition: background 120ms ease, border-color 120ms ease;
}
.page-ctas .round-cta:hover {
  background: rgba(255,0,0,0.18);
  border-color: #FF0000;
}
.page-ctas .round-cta .rcta-l1 {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.page-ctas .round-cta .rcta-l2 {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FF0000;
  margin-top: 2px;
}
/* When .page-ctas lives directly under .page-scroll (no inline column),
   give it the same horizontal gutter as .page-scroll > .page-headline. */
.page-scroll > .page-ctas {
  margin: 0 6vw 40px;
  max-width: 80vw;
}

/* IN-BODY VARIANTS — Brett-locked 2026-04-28. The home page drops the
   headline + ctas into the top of the right-hand .cr-body column.
   Smaller font (column is narrow), no dark "black box" pill background. */
.page-headline--in-body {
  font-size: clamp(28px, 3.6vw, 52px);
  margin: 0 0 18px;
}
.page-ctas--in-body {
  margin: 0 0 24px;
}
.page-ctas--in-body .round-cta {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  padding: 6px 12px;
}
.page-ctas--in-body .round-cta:hover {
  background: transparent;
  border-color: #FF0000;
}

/* RULES — RIGHT-HAND TACTICS ASIDE — Brett-locked 2026-04-28.
   Locked Human Easy Read style applied: huge red-accented pull (.rta-pull),
   red-dash hairline list (.rta-list), single-sentence lead closer
   (.rta-lead). Left-aligned per copy rule. Pinned right between
   letterboxes on desktop; stacks below body on mobile. */
/* 2026-04-30: .page-aside is the generic right-column class (Brett wants
   the rules.html two-column layout across the entire site). All
   .rules-tactics-aside rules apply to .page-aside too. */
.rules-tactics-aside,
.page-aside {
  position: fixed;
  /* Brett-locked 2026-04-30 — same as .cr-body-inline, sits just below
     letterbox with breathing space (was complex calc that pushed
     content 100+px down). */
  top: calc(var(--letterbox-h) + 24px);
  bottom: calc(var(--letterbox-h) + 24px);
  right: 56px;
  width: clamp(320px, 32vw, 460px);
  z-index: 4;
  overflow-y: auto;
  padding: 0 4px 0 0;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 32px), transparent 100%);
          mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 32px), transparent 100%);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.rules-tactics-aside::-webkit-scrollbar,
.page-aside::-webkit-scrollbar { width: 4px; }
.rules-tactics-aside::-webkit-scrollbar-thumb,
.page-aside::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 2px; }

/* Pull-quote — mirrors the .prod-pull spec from the Human Easy Read
   style guide. 72×5 red rule above. White on black, font-weight 900,
   tight letter-spacing, line-height 0.85. Left-aligned. */
.rta-pull {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(40px, 5vw, 80px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.85;
  color: #FFFFFF;
  margin: 0 0 22px;
  text-align: left;
}
.rta-pull::before {
  content: '';
  display: block;
  width: 72px;
  height: 5px;
  background: #FF0000;
  margin: 0 0 18px;
}

/* Red-dash hairline list — exact spec from the style guide.
   <li><strong>Term.</strong> Definition.</li> rhythm. */
.rta-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rta-list li {
  position: relative;
  padding: 10px 0 10px 18px;
  border-top: 1px solid rgba(255,255,255,0.16);
  font-size: clamp(13px, 1.3vw, 16px);
  font-weight: 500;
  line-height: 1.6;
  color: #FFFFFF;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.55);
  text-align: left;
}
.rta-list li:last-child { border-bottom: 1px solid rgba(255,255,255,0.16); }
.rta-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  width: 8px;
  height: 2px;
  background: #FF0000;
}
.rta-list li strong {
  color: #FFFFFF;
  font-weight: 800;
}

/* Brett-locked 2026-04-30 — italic kicker line under the .rta-pull,
   above the .rta-list. Sets up the count of moves. */
.rta-kicker {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(14px, 1.4vw, 17px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
  color: #FFFFFF;
  margin: 0 0 18px;
  text-align: left;
  opacity: 0.85;
}

/* Lead-subhead closer — single sentence that frames the list.
   Mirrors .prod-lead. */
.rta-lead {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 800;
  line-height: 1.25;
  color: #FFFFFF;
  margin: 22px 0 0;
  text-align: left;
}

/* Make sure the rules body copy column doesn't run under the aside on
   desktop. :has() scopes the override to pages that actually carry
   the tactics aside — currently only rules.html. */
@media (min-width: 901px) {
  body:has(.rules-tactics-aside) .cr-body-inline,
  body:has(.page-aside) .cr-body-inline {
    right: calc(56px + clamp(320px, 32vw, 460px) + 32px);
  }
}

/* ═══ BROADCAST GRID ASIDE — Brett-locked 2026-04-30, /tribunal only.
   Right-hand aside showing the platforms CageRace broadcasts on. Each
   tile is a brand-coloured card with logo, platform name, role. The
   grid is the visual punch of "we're on every screen". The /tribunal
   page uses .cr-body-inline on the LEFT (override at top of tribunal.html
   sets left:56px, right:auto), so this aside lives on the RIGHT. */
.broadcast-grid-aside {
  position: fixed;
  top: calc(var(--letterbox-h) + 24px);
  bottom: calc(var(--letterbox-h) + 24px);
  right: 56px;
  width: clamp(320px, 32vw, 460px);
  z-index: 4;
  overflow-y: auto;
  padding: 0 4px 0 0;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 32px), transparent 100%);
          mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 32px), transparent 100%);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.broadcast-grid-aside::-webkit-scrollbar { width: 4px; }
.broadcast-grid-aside::-webkit-scrollbar-track { background: transparent; }
.broadcast-grid-aside::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 2px; }

/* Mobile/tablet — drop into normal flow under the body content. */
@media (max-width: 900px) {
  .broadcast-grid-aside {
    position: relative;
    top: auto; bottom: auto; right: auto;
    width: 100%;
    margin: 28px 0 0;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* Body has-detection — when /tribunal carries the broadcast grid, shift
   the .cr-body-inline left column so it doesn't run under the aside. */
@media (min-width: 901px) {
  body:has(.broadcast-grid-aside) .cr-body-inline {
    /* Tribunal is left-aligned via inline override, so the right-edge
       constraint comes from the aside width + gutter. */
    max-width: calc(100vw - 56px - clamp(320px, 32vw, 460px) - 32px - 56px);
  }
}

.bga-kicker {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FF0000;
  margin: 0 0 10px;
  text-shadow: none;
}
.bga-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.92;
  color: #FFFFFF;
  margin: 0 0 14px;
  text-transform: none;
  text-shadow: 2px 2px 0 #000;
}
.bga-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.4;
  color: rgba(255,255,255,0.88);
  margin: 0 0 22px;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.55);
}

/* The grid itself — 2 columns, fills the aside, brand-coloured tiles. */
.broadcast-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 22px;
}
.broadcast-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 12px;
  background: rgba(0,0,0,0.55);
  border: 1.5px solid var(--tile-color, #FF0000);
  border-radius: 12px;
  text-decoration: none;
  color: #FFFFFF;
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.broadcast-tile:hover {
  transform: translateY(-2px);
  background: rgba(0,0,0,0.7);
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
}
.broadcast-tile-logo {
  width: 28px;
  height: 28px;
  color: var(--tile-color, #FFFFFF);
  flex: 0 0 auto;
}
.broadcast-tile-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  line-height: 1;
}
.broadcast-tile-role {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tile-color, #FFFFFF);
  line-height: 1.3;
  opacity: 0.95;
}

.bga-closer {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 700;
  line-height: 1.35;
  color: #FFFFFF;
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.16);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.55);
}

/* ═══ QUALIFYING TIMES ASIDE — Brett-locked 2026-04-30, /qualifying.
   Right-hand aside showing the 3 series + 6 time cards. Body essay
   reads uninterrupted on the left. ═══ */
.qualifying-times-aside {
  position: fixed;
  top: calc(var(--letterbox-h) + 24px);
  bottom: calc(var(--letterbox-h) + 24px);
  right: 56px;
  width: clamp(320px, 32vw, 460px);
  z-index: 4;
  overflow-y: auto;
  padding: 0 4px 0 0;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 32px), transparent 100%);
          mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 32px), transparent 100%);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.qualifying-times-aside::-webkit-scrollbar { width: 4px; }
.qualifying-times-aside::-webkit-scrollbar-track { background: transparent; }
.qualifying-times-aside::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 2px; }

@media (max-width: 900px) {
  .qualifying-times-aside {
    position: relative;
    top: auto; bottom: auto; right: auto;
    width: 100%;
    margin: 28px 0 0;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

@media (min-width: 901px) {
  body:has(.qualifying-times-aside) .cr-body-inline {
    right: calc(56px + clamp(320px, 32vw, 460px) + 32px);
  }
}

.qta-kicker {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FF0000;
  margin: 0 0 10px;
}
.qta-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.92;
  color: #FFFFFF;
  margin: 0 0 8px;
  text-shadow: 2px 2px 0 #000;
}
.qta-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 500;
  font-style: italic;
  color: rgba(255,255,255,0.88);
  margin: 0 0 24px;
}

.qta-series {
  margin: 0 0 16px;
  padding: 14px;
  background: rgba(0,0,0,0.55);
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: 12px;
}
.qta-series-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.16);
}
.qta-series-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}
.qta-series-age {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FF0000;
}
.qta-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.qta-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
}
.qta-gender {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.qta-time {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #FFFFFF;
}

.qta-closer {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(13px, 1.3vw, 15px);
  font-weight: 600;
  font-style: italic;
  color: rgba(255,255,255,0.7);
  margin: 14px 0 0;
}

/* Brett-locked 2026-04-30 — REGISTER nav link rendered in CageRace red
   site-wide. Highlights the call-to-action wherever it appears (About
   dropdown, mobile menu). */
.nav-dropdown a[href="register.html"],
.mobile-menu a[href="register.html"] {
  color: #FF0000 !important;
  font-weight: 800;
}
.nav-dropdown a[href="register.html"]:hover,
.mobile-menu a[href="register.html"]:hover {
  color: #FFFFFF !important;
  background: #FF0000;
}

/* Brett-locked 2026-04-30 — INDIEGOGO mega-dropdown sectioning. Everything
   launching with the 14 July Indiegogo campaign lives inside this dropdown
   so visitors see exactly what they'll get if they Register for Updates.
   Three sections: (1) Indiegogo + Business Plan, (2) TV Show + 4 sub-items,
   (3) Formula H₂o. Dividers + small uppercase labels delineate them.
   Same classes work in the desktop dropdown AND the mobile menu. */
.nav-dropdown-divider {
  height: 1px;
  background: rgba(255,255,255,0.16);
  margin: 8px 0 4px;
  pointer-events: none;
}
.nav-dropdown-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  padding: 6px 16px 4px;
  cursor: default;
  user-select: none;
}
.nav-dropdown-label:hover {
  background: transparent !important;
  color: rgba(255,255,255,0.4) !important;
}
/* In the mobile menu the labels need a slightly wider gutter to match
   the mobile-group-label cadence. */
.mobile-menu .nav-dropdown-label {
  padding: 14px 0 6px;
  font-size: 10px;
}
.mobile-menu .nav-dropdown-divider {
  margin: 12px 0 6px;
}

/* Brett-locked 2026-04-30 — INDIEGOGO LAUNCH GATE. Until 14 July all
   pages under the Indiegogo umbrella are inaccessible to the public.
   Links remain visible (showing what's coming) but are greyed and
   un-clickable. Only the "Register for The Launch" CTA at the bottom
   of the dropdown navigates anywhere — straight to /register. */
.nav-dropdown--launch-gated > a,
.mobile-group--launch-gated > a {
  pointer-events: none !important;
  color: rgba(255,255,255,0.4) !important;
  cursor: default !important;
}
.nav-dropdown--launch-gated > a:hover,
.mobile-group--launch-gated > a:hover {
  background: transparent !important;
  color: rgba(255,255,255,0.4) !important;
}
.nav-dropdown--launch-gated > .nav-dropdown-label,
.mobile-group--launch-gated > .nav-dropdown-label {
  color: rgba(255,255,255,0.3) !important;
}

/* The launch CTA itself — small line at the foot of the dropdown.
   "Coming 14 July." in white-ish, then "Register" in red, clickable
   straight to /register. The rest of the dropdown is gated; this
   exception is the only way through. */
.nav-dropdown-launch-cta {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.85);
  padding: 12px 16px 8px;
  line-height: 1.5;
  text-align: left;
}
.nav-dropdown-launch-cta strong {
  color: #FFFFFF;
  font-weight: 900;
}
.nav-dropdown-launch-cta a {
  color: #FF0000 !important;
  text-decoration: none;
  font-weight: 900;
  pointer-events: auto !important;
  cursor: pointer !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.nav-dropdown-launch-cta a:hover {
  text-decoration: underline;
  background: transparent !important;
}
.mobile-menu .nav-dropdown-launch-cta {
  padding: 14px 0 8px;
  font-size: 12px;
}

/* Brett-locked 2026-04-30 — COMING-SOON nav state (DEPRECATED — kept in
   case we revive the top-level greyed pattern). TV Show + Formula H₂o
   were briefly top-level items showing "Coming 14 July"; they now live
   sectioned under Indiegogo. */
.nav-item--coming-soon > .nav-parent {
  color: rgba(255,255,255,0.4) !important;
}
.nav-item--coming-soon > .nav-parent .nav-arrow {
  opacity: 0.5;
}
.nav-item--coming-soon > .nav-parent:hover {
  color: rgba(255,255,255,0.7) !important;
}
.nav-coming-soon {
  color: rgba(255,255,255,0.55) !important;
  font-style: italic;
  cursor: default;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.nav-coming-soon:hover {
  background: transparent !important;
  color: rgba(255,255,255,0.55) !important;
}

/* Mobile — same greying treatment for the mobile-group equivalents. */
.mobile-group--coming-soon .mobile-group-label {
  color: rgba(255,255,255,0.4) !important;
}
.mobile-group--coming-soon a.nav-coming-soon {
  color: rgba(255,255,255,0.55) !important;
  font-style: italic;
  cursor: default;
}
/* Mobile — drop the aside back into normal flow at the bottom of the
   page-scroll body. */
@media (max-width: 900px) {
  .rules-tactics-aside,
  .page-aside {
    position: relative;
    top: auto; bottom: auto; right: auto;
    width: 100%;
    margin: 28px 0 0;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* Right-side column for non-home pages — same vertical bounds as the
   homepage cr-body but ALWAYS visible (no timeline reveal). Brett-locked
   2026-04-25 for the Format and Tribunal pages. Sits inside the photo
   band, between letterboxes; scrolls internally if content overflows. */
.cr-body-inline {
  position: fixed;
  /* Brett-locked 2026-04-30 — headline starts JUST below the letterbox
     with a small breathing space, not 100+px down. Was: complex aspect-
     ratio calc + 56px internal padding-top → 109px gap. Now: simple
     letterbox + 24px breathing → headline near top. Top fade removed
     since the column top no longer overlaps the letterbox. */
  top: calc(var(--letterbox-h) + 24px);
  bottom: calc(var(--letterbox-h) + 24px);
  right: 56px;
  left: auto;
  width: min(46vw, 540px);
  margin: 0;
  padding: 0 0 24px;
  z-index: 4;
  text-align: right;
  color: var(--white);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 94%, transparent 100%);
}
.cr-body-inline::-webkit-scrollbar { width: 4px; }
.cr-body-inline::-webkit-scrollbar-track { background: transparent; }
.cr-body-inline::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 2px; }
.cr-body-inline p {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.55;
  font-weight: 500;
  margin: 0 0 14px;
  /* Body text: subtle hard shadow at half-opacity so it sits behind the
     letters instead of competing with them. Headlines keep the full 2-3px
     intensity defined elsewhere. Brett-flagged 2026-04-27. */
  text-shadow: 1px 1px 0 rgba(0,0,0,0.55);
  text-align: right;
}
/* Existing .section / .image-band markup inside the column — flatten
   wide layouts (grids, two-cols, image bands) into a single right-aligned
   stack so they fit the narrow column without overhauling old HTML.
   Brett-locked 2026-04-25: uniform 32px gap between every rule/section so
   the column reads as a clean vertical rhythm regardless of which markup
   pattern an individual section came from. */
.cr-body-inline .section,
.cr-body-inline .image-band,
.cr-body-inline .num-section {
  padding: 0 !important;
  margin: 32px 0 0 !important;
  background: transparent;
  text-align: right;
}
.cr-body-inline > .section:first-of-type,
.cr-body-inline > .image-band:first-of-type {
  margin-top: 24px !important;
}
/* Tame inline margin-top overrides on .section-body so paragraph spacing
   is consistent across rules (some had margin-top:16px hard-coded). */
.cr-body-inline .section-body[style*="margin-top"],
.cr-body-inline .section-body[style*="margin"] {
  margin-top: 8px !important;
}
/* Hide the stats-grid card cluster from the Format rule — too wide for
   the column and the numbers tile badly. The headline + body cover it. */
.cr-body-inline .stats-grid { display: none !important; }
.cr-body-inline .image-band {
  position: relative;
  min-height: 0;
  display: block;
}
.cr-body-inline .image-band-bg {
  position: relative;
  inset: auto;
  margin: 0 0 12px;
  height: auto;
}
.cr-body-inline .image-band-bg img {
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: cover;
  border-radius: 3px;
}
.cr-body-inline .image-band-content {
  position: relative;
  inset: auto;
  padding: 0;
  text-align: right;
}
.cr-body-inline .two-col,
.cr-body-inline .engine-grid,
.cr-body-inline .qual-grid,
.cr-body-inline .camera-grid {
  display: block;
  grid-template-columns: none;
  gap: 0;
}
.cr-body-inline .two-col > div { margin: 0 0 14px; }
.cr-body-inline .two-col img {
  width: 100%;
  height: auto !important;
  max-height: 220px !important;
  object-fit: cover;
  border-radius: 3px;
  margin: 8px 0;
}
.cr-body-inline .section-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--red);
  margin: 26px 0 6px;
  text-align: right;
  text-shadow: 1px 1px 0 #000;
}
.cr-body-inline .section-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(20px, 2.1vw, 28px) !important;
  font-weight: 900;
  text-align: right !important;
  margin: 0 0 12px !important;
  text-transform: uppercase;
  line-height: 1.05;
  text-shadow: 2px 2px 0 #000;
  max-width: none !important;
}
.cr-body-inline .section-body {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(14px, 1.3vw, 16px) !important;
  line-height: 1.5 !important;
  text-align: right !important;
  margin: 0 0 12px !important;
  max-width: none !important;
  text-shadow: 2px 2px 0 #000;
}
.cr-body-inline .rules-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 12px;
  text-align: right;
}
.cr-body-inline .rules-list li {
  font-size: 14px;
  padding: 5px 0;
  color: var(--white);
  text-shadow: 2px 2px 0 #000;
}
.cr-body-inline .engine-round {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: flex-end;
  text-align: right;
  margin: 0 0 10px;
  padding: 6px 0;
  border-bottom: none;
}
.cr-body-inline .engine-round-num {
  flex: 0 0 auto;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 900;
  color: var(--red);
  line-height: 1;
}
.cr-body-inline .engine-round-text {
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.5;
  font-weight: 500;
  color: var(--white);
  text-align: right;
  text-shadow: 2px 2px 0 #000;
}
.cr-body-inline .engine-round { margin-bottom: 14px; }
.cr-body-inline .qual-card {
  text-align: right;
  margin: 0 0 20px;
  padding: 22px 26px 20px;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
}
.cr-body-inline .qual-card .qual-gender {
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
  font-weight: 800;
}
.cr-body-inline .qual-card .qual-time {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(56px, 7vw, 104px);
  font-weight: 900;
  color: #000;
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin: 0 0 8px;
}
/* Kill fine-line artefacts inherited from the wide-page section styles
   when those sections are nested inside the column. */
.cr-body-inline hr,
.cr-body-inline .divider {
  display: none;
}
/* Brett-locked 2026-04-25: drop all photographs inside the column on
   non-home pages so the focus stays on the copy and the locked hero.
   Hide the IMAGE elements only; keep the text content of image-bands. */
.cr-body-inline img,
.cr-body-inline .image-band-bg,
.cr-body-inline .homepage-hero,
.cr-body-inline .photo-strip {
  display: none !important;
}
.cr-body-inline .engine-round,
.cr-body-inline .qual-card,
.cr-body-inline .camera-card,
.cr-body-inline .section,
.cr-body-inline .image-band,
.cr-body-inline .image-band-content,
.cr-body-inline .two-col,
.cr-body-inline .two-col > div,
.cr-body-inline .rules-list li,
.cr-body-inline ul,
.cr-body-inline li {
  border: none !important;
  outline: none !important;
}
.cr-body-inline .qual-card .qual-sub {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 0;
  font-weight: 800;
  opacity: 1;
}
.cr-body-inline .qual-card .qual-note {
  font-size: 14px;
  line-height: 1.55;
  color: #000;
  text-align: right;
  margin: 10px 0 0;
  max-width: none;
  font-weight: 500;
}
.cr-body-inline .form-note {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.96);
  text-align: right;
  margin: 18px 0;
  max-width: none;
}
.cr-body-inline .camera-card {
  text-align: right;
  margin: 0 0 14px;
  padding: 10px 12px 10px 0;
  border-right: 2px solid rgba(255,0,0,0.5);
  background: transparent;
}
.cr-body-inline .camera-card-title {
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--white);
}
.cr-body-inline .camera-card-count {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin: 4px 0;
}
.cr-body-inline .camera-card-desc {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
}
/* Hide the section dividers when long-form pages are rendered inside
   the right-hand column. The faint hairline between sections fights the
   photo background and reads as visual noise on imported old copy. The
   beat-rhythm of short paragraphs already provides separation between
   sections. Brett-flagged 2026-04-27. */
.cr-body-inline .divider,
.cr-body-inline hr.divider {
  display: none;
}
.cr-body-inline .num-section { display: none; }   /* skip the wide Formula H2O-16 panel — has its own page */
.cr-body-inline .cr-body-lead {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.4;
  margin: 0 0 28px;
  text-shadow: 2px 2px 0 #000;
}
.cr-body-inline .cr-body-pull {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 28px;
  text-shadow: 2px 2px 0 #000;
}
/* ── REGISTER SPLIT (copy left / form right) ────────────────
   Brett-locked 2026-04-25. Two-column grid inside the photo band:
   copy column on the left, registration form on the right. Both
   columns scroll independently with the same edge-fade mask as
   .cr-body-inline. */
.cr-register-split {
  position: fixed;
  /* Photo band (between the two letterboxes), with copy + form vertically
     centered so the form floats in the middle of the open space rather
     than hugging the bottom of the screen. */
  top: calc(max(116px, calc((100vh - 100vw / 2.39) / 2)) + 12px);
  bottom: max(100px, calc((100vh - 100vw / 2.39) / 2));
  left: 56px;
  right: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  z-index: 4;
  align-items: center;     /* vertically centre both columns */
}
.cr-register-copy,
.cr-register-form {
  /* Columns sit centred in the photo band; both fit without scroll
     after Brett's 2026-04-25 copy compression. Mask + overflow only
     re-enable as a fallback if a column ever exceeds available height. */
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.cr-register-copy::-webkit-scrollbar,
.cr-register-form::-webkit-scrollbar { width: 4px; }
.cr-register-copy::-webkit-scrollbar-track,
.cr-register-form::-webkit-scrollbar-track { background: transparent; }
.cr-register-copy::-webkit-scrollbar-thumb,
.cr-register-form::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 2px; }

.cr-register-copy { color: var(--white); text-align: left; padding: 56px 24px 24px 0; }
.cr-register-copy p {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.55;
  font-weight: 500;
  margin: 0 0 14px;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.55);
  text-align: left;
}
.cr-register-copy .cr-body-lead {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 22px;
}
.cr-register-copy .cr-body-pull {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.4;
  border-top: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  padding: 12px 0;
  margin: 22px 0;
  text-align: left;
}
.cr-register-copy .cr-body-kicker {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(255,255,255,0.7);
  margin: 22px 0 6px !important;
}

.cr-register-form { padding: 56px 0 24px 0; }
.cr-register-form form {
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 22px 22px 18px;
  border: 1px solid rgba(255,255,255,0.1);
}
.cr-register-form .form-group { margin-bottom: 14px; }
.cr-register-form .form-input { padding: 12px 14px; font-size: 13px; }
.cr-register-form .form-label { font-size: 10px; margin-bottom: 6px; }
.cr-register-form .form-submit { padding: 14px; font-size: 12px; }
.cr-register-form .form-note { font-size: 11px; margin-top: 4px; }
.cr-register-form .form-small-note { font-size: 10px; }

/* Mobile-flow conversion happens at the canonical mobile breakpoint
   (768px) — see the comprehensive mobile block at the bottom of this
   file. The legacy 900px rule was left over from the desktop-grid
   transition and caused a hybrid state at 769–900px where the photo
   stayed fixed but the form went static; removed 2026-04-25. */

.cr-rules {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cr-rules li {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.55;
  font-weight: 500;
  color: var(--white);
  text-shadow: 2px 2px 0 #000;
  padding: 8px 0;
}
.cr-rules li strong { font-weight: 900; }
@media (max-width: 768px) {
  .cr-body-inline { margin: 0 16px 0 auto; padding: 40px 0 60px; max-width: 92vw; }
}

.cr-body p.cr-body-end {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--red);
  margin: 22px 0 0;
  text-align: right;
  text-shadow: 1px 1px 0 #000;
}

@media (max-width: 768px) {
  .cr-hero-sub { left: 16px; right: 16px; bottom: 16px; font-size: 14px; }
  .cr-body { right: 16px; left: auto; bottom: 22vh; max-width: 78vw; }
}
@media (max-width: 768px) {
  .page-headline {
    padding: 10px 14px;
    margin: 0 12px 0 12px;
    font-size: 44px;
    line-height: 0.95;
    letter-spacing: -0.05em;
  }
  .page-subheading { font-size: 15px; }
}

@media (max-width: 768px) {
  .section { padding: 24px 20px; }
  /* Global mobile-rhythm tighten — Brett 2026-04-24:
     "there's a lot of black space between all the sections, close these up" */
  .statement-block      { padding: 36px 20px 28px !important; min-height: auto !important; }
  .campaign-posters-section { padding: 28px 20px 20px !important; }
  .timeline-section     { padding: 28px 0 32px !important; }
  .homepage-hero-bottom { padding: 16px 20px 20px !important; margin: 0 !important; }
}

.section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.section-title {
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 900;
  line-height: 1.05;
  margin-bottom: 24px;
}
.section-body {
  font-size: 16px;
  line-height: 1.8;
  opacity: 0.7;
  max-width: 640px;
}

.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0 40px;
}
@media (max-width: 768px) { .divider { margin: 0 20px; } }

/* ── TWO COL ─────────────────────────────────── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 768px) {
  .two-col { grid-template-columns: 1fr; gap: 40px; }
  .two-col img[style*="height"] { height: 280px !important; }
}

/* ── STATS GRID ──────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 60px;
}
@media (max-width: 768px) { .stats-grid { grid-template-columns: 1fr; } }

.stat {
  background: var(--dark);
  padding: 40px 24px;
  text-align: center;
  transform-origin: center center;
  will-change: transform, opacity;
}
.stat-number {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 900;
  color: var(--red);
  line-height: 1;
  margin-bottom: 16px;
}
.stat-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 12px;
}
.stat-desc {
  font-size: 15px;
  opacity: 0.5;
  line-height: 1.7;
}

/* ── VIDEO ───────────────────────────────────── */
.video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  background: #111;
  overflow: hidden;
}
.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ── PHOTO STRIP ─────────────────────────────── */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--black);
}
.photo-strip-item {
  position: relative;
  height: 360px;
  overflow: hidden;
}
.photo-strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.photo-strip-item:hover img { transform: scale(1.03); }
.photo-strip-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 16px;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.8);
  text-transform: uppercase;
}
@media (max-width: 768px) {
  .photo-strip { grid-template-columns: 1fr; }
  .photo-strip-item { height: 280px; }
}

/* ── CTA BANNER ──────────────────────────────── */
.cta-banner {
  position: relative;
  height: 400px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.cta-banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.cta-banner-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
}
.cta-banner-content {
  position: relative;
  z-index: 2;
}
@media (max-width: 768px) { .cta-banner { height: 300px; } }

/* ── NUMBERS GRID ────────────────────────────── */
.num-section { background: var(--dark); padding: 80px 40px; }
@media (max-width: 768px) { .num-section { padding: 60px 20px; } }
.num-inner { max-width: var(--max-w); margin: 0 auto; }

.num-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}
@media (max-width: 1024px) { .num-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .num-grid { grid-template-columns: repeat(2, 1fr); } }

.num-cell {
  aspect-ratio: 1;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.num-cell-bg {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  opacity: 0.15;
  transition: opacity 0.3s;
}
.num-cell:hover .num-cell-bg { opacity: 0.25; }
.num-cell-border {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 2px solid;
  opacity: 0.6;
}
.num-cell-trident {
  width: 72px;
  height: 72px;
  position: relative;
  z-index: 1;
}
.num-cell-number {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--white);
  position: relative;
  z-index: 1;
}
.num-cell-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.6;
  position: relative;
  z-index: 1;
}

.num-cell-next {
  border: 2px dashed var(--border-light);
  border-radius: 16px;
}
.num-next-number {
  font-size: 48px;
  font-weight: 900;
  color: var(--red);
}
.num-next-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.5;
}

/* ── QUALIFYING ──────────────────────────────── */
.qual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}
@media (max-width: 768px) { .qual-grid { grid-template-columns: 1fr; } }

.qual-card {
  background: var(--dark);
  border: 1px solid var(--border);
  padding: 48px 32px;
  text-align: center;
}
.qual-gender {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 16px;
}
.qual-time {
  font-size: clamp(48px, 8vw, 80px);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 12px;
}
.qual-sub {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 16px;
}
.qual-note {
  font-size: 13px;
  opacity: 0.5;
  line-height: 1.6;
}

/* ── RULES LIST ──────────────────────────────── */
.rules-list {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rules-list li {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding-left: 20px;
  position: relative;
  opacity: 0.8;
}
.rules-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  background: var(--red);
}

/* ── TWO PANEL ───────────────────────────────── */
.two-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) { .two-panel { grid-template-columns: 1fr; } }
.panel {
  padding: 80px 60px;
  border: 1px solid var(--border);
}
@media (max-width: 768px) { .panel { padding: 48px 24px; } }

/* ── REGISTER / FORM ─────────────────────────── */
.register-section {
  background: var(--dark);
  padding: 100px 40px;
}
@media (max-width: 768px) { .register-section { padding: 60px 20px; } }

.register-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 768px) {
  .register-inner { grid-template-columns: 1fr; gap: 40px; }
}

.register-bullets {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.register-figure {
  margin: 32px 0 0;
  padding: 0;
}
.register-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
}
.register-figure figcaption {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.register-bullets li {
  font-size: 14px;
  font-weight: 600;
  padding-left: 20px;
  position: relative;
  opacity: 0.8;
}
.register-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  background: var(--red);
}

.form-group { margin-bottom: 20px; }
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
  opacity: 0.8;
}
.form-input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-light);
  color: var(--white);
  font-family: var(--font);
  font-size: 14px;
  transition: border-color 0.2s;
  outline: none;
}
.form-input:focus { border-color: var(--red); }
.form-input::placeholder { color: rgba(255,255,255,0.3); }

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.form-select option { background: var(--dark); color: var(--white); }

.form-note {
  font-size: 12px;
  opacity: 0.4;
  margin-top: 6px;
  line-height: 1.5;
}

.swimmer-fields { display: none; }

.form-submit {
  width: 100%;
  padding: 16px;
  background: var(--red);
  color: var(--white);
  border: none;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 8px;
}
.form-submit:hover { background: #cc0000; }

.form-small-note {
  font-size: 11px;
  opacity: 0.3;
  margin-top: 12px;
  text-align: center;
}

.form-success {
  display: none;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  padding: 60px 20px;
  color: var(--red);
}

/* ── TEAM ────────────────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
}
@media (max-width: 1024px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .team-grid { grid-template-columns: 1fr; } }

.team-card {
  background: var(--dark-card);
  border: 1px solid var(--border);
  overflow: hidden;
}
.team-card-img {
  height: 320px;
  overflow: hidden;
}
.team-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
/* Brett-locked 2026-05-10: initials placeholder when a team photo is missing.
   Replace with a real img tag once the photo is uploaded to assets/photos/. */
.team-card-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a1a 0%, #060606 100%);
  color: var(--red);
  font-family: 'Montserrat', sans-serif;
  font-size: 110px;
  font-weight: 900;
  letter-spacing: -0.04em;
  user-select: none;
}
.team-card:hover .team-card-img img { transform: scale(1.03); }

.team-card-body {
  padding: 24px;
}
.team-card-name {
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 4px;
}
.team-card-role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}
.team-card-bio {
  font-size: 14px;
  line-height: 1.7;
  opacity: 0.6;
}

/* ── GALLERY ─────────────────────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 48px;
}
@media (max-width: 1024px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .gallery-grid { grid-template-columns: 1fr; } }

.gallery-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16/10;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 12px 16px;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.3s;
}
.gallery-item:hover .gallery-item-caption { opacity: 1; }

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 48px;
}
@media (max-width: 768px) { .video-grid { grid-template-columns: 1fr; } }

.video-placeholder-card {
  background: var(--dark-card);
  border: 1px dashed var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16/9;
}
.video-placeholder-text {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.3;
}

/* ── LIGHTBOX ────────────────────────────────── */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.95);
  align-items: center;
  justify-content: center;
  padding: 40px;
  cursor: pointer;
}
.lightbox.active { display: flex; }
.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  cursor: default;
}
.lightbox-close {
  position: absolute;
  top: 24px; right: 32px;
  font-size: 32px;
  font-weight: 300;
  color: var(--white);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
  background: none;
  border: none;
}
.lightbox-close:hover { opacity: 1; }

/* ── ENGINE / SCIENCE ────────────────────────── */
.engine-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 48px;
  border: 1px solid var(--border);
}
.engine-round {
  display: grid;
  grid-template-columns: 80px 1fr;
  border-bottom: 1px solid var(--border);
}
.engine-round:last-child { border-bottom: none; }
.engine-round-num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
  color: var(--red);
  border-right: 1px solid var(--border);
  padding: 24px 0;
}
.engine-round-text {
  padding: 24px;
  font-size: 16px;
  line-height: 1.8;
  opacity: 0.7;
}

/* ── PAGE HERO (inner pages) ─────────────────── */
.page-hero {
  padding: 160px 40px 80px;
  max-width: var(--max-w);
  margin: 0 auto;
}
@media (max-width: 768px) { .page-hero { padding: 120px 20px 60px; } }

.page-hero-img {
  height: 500px;
  overflow: hidden;
  margin-bottom: -60px;
}
.page-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 768px) {
  /* Tightened 2026-04-24 — Brett: "remove all the black space between
     sections on Production + Technology". These pages use .page-hero,
     .section, and .image-band. */
  .page-hero { padding: 80px 20px 24px; }
  .page-hero .section-title { font-size: clamp(24px, 6vw, 36px); }
  .page-hero-img { height: 220px; margin-bottom: -20px; }
}

/* ── FOOTER ──────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 60px 40px;
  text-align: center;
}
@media (max-width: 768px) { .site-footer { padding: 40px 20px; } }

.social-links {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 40px;
}
.social-link {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.social-link:hover { opacity: 1; }

.footer-legal {
  font-size: 11px;
  line-height: 2;
  opacity: 0.4;
}
.footer-legal a { text-decoration: underline; }
.footer-group-label {
  color: rgba(255,255,255,0.6);
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ── RESULTS TABLE ───────────────────────────── */
.results-wrap { overflow-x: auto; margin-top: 32px; }
.results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.results-table th,
.results-table td {
  padding: 10px 12px;
  border: 1px solid var(--border);
  text-align: center;
  white-space: nowrap;
}
.results-table th {
  background: var(--dark);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}
.results-table td:first-child { text-align: left; font-weight: 700; }
.td-penalty { color: var(--red); }
.td-has-penalty { color: var(--red); font-weight: 700; }
.results-note {
  font-size: 11px;
  opacity: 0.4;
  margin-top: 12px;
}
.results-note span { color: var(--red); }

/* ── PRODUCTION SECTION ──────────────────────── */
.camera-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}
@media (max-width: 768px) { .camera-grid { grid-template-columns: 1fr; } }

.camera-card {
  background: var(--dark-card);
  border: 1px solid var(--border);
  padding: 32px;
}
.camera-card-title {
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 4px;
}
.camera-card-count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.camera-card-desc {
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.6;
}

/* ── UTILITY ─────────────────────────────────── */
.full-bleed { max-width: none; padding-left: 0; padding-right: 0; }
.mt-0 { margin-top: 0; }
.mb-48 { margin-bottom: 48px; }
.text-center { text-align: center; }
.max-w-700 { max-width: 700px; }

/* ── IMAGE HERO BAND ─────────────────────────── */
.image-band {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.image-band-bg {
  position: absolute;
  inset: 0;
}
.image-band-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.image-band-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
}
.image-band-content {
  position: relative;
  z-index: 2;
  padding: 80px 60px;
  max-width: 700px;
}
.image-band-content .section-title {
  margin-bottom: 16px;
}
.image-band-content .section-body {
  opacity: 0.85;
  max-width: 540px;
}

.image-band--center {
  justify-content: center;
  text-align: center;
}
.image-band--center .image-band-bg::after {
  background: none;
}
.image-band--center .image-band-content {
  max-width: 900px;
  padding: 80px 40px;
}
.image-band--center .section-body {
  max-width: 640px;
  margin: 0 auto;
}

.image-band--tall { min-height: 600px; }
.image-band--short { min-height: 360px; }

@media (max-width: 768px) {
  .image-band { min-height: 280px; }
  .image-band-content { padding: 24px 20px; max-width: 100%; }
  .image-band-content .section-title { font-size: clamp(22px, 5vw, 36px); }
  .image-band-content .section-body { font-size: 14px; }
  .image-band--tall { min-height: 340px !important; }
  .image-band--short { min-height: 220px !important; }
  .image-band-bg::after { background: linear-gradient(to right, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.15) 100%); }
  .image-band--center .image-band-bg::after { background: rgba(0,0,0,0.35); }
  .image-band--center .image-band-content { padding: 40px 20px; }
}

/* ── SCREENPLAY ──────────────────────────────── */
.screenplay {
  font-family: 'American Typewriter', 'Courier New', Courier, monospace;
  font-size: clamp(14px, 1.8vw, 17px);
  line-height: 2;
  color: rgba(255,255,255,0.85);
  max-width: 700px;
  margin: 0 auto;
  padding: 48px 0;
}
.screenplay .direction {
  color: rgba(255,255,255,0.5);
  font-style: italic;
  display: block;
  margin: 24px 0 8px;
}
.screenplay .text-on-screen {
  display: block;
  text-align: center;
  color: #FF0000;
  font-weight: bold;
  font-style: italic;
  margin: 32px 0;
  font-size: clamp(16px, 2.2vw, 22px);
}
.screenplay p {
  margin-bottom: 20px;
}

/* ── SCROLL REVEAL ───────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── NOISE/GRAIN OVERLAY ─────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ── SITE-WIDE TEXT DROP SHADOW ──────────────── */
.section-title,
.hero-title,
.hero-tagline,
.hero-sub,
.section-label,
.section-body,
.image-band-content h1,
.image-band-content h2,
.image-band-content p,
.cta-banner-content h1,
.cta-banner-content h2,
.cta-banner-content p,
.homepage-hero-top h1,
.homepage-hero-top p,
.homepage-hero-bottom p,
.page-hero h1,
.page-hero p {
  text-shadow: 2px 2px 0 #000;
}

/* ── RED GLOW ACCENTS ────────────────────────── */
.hero-title em {
  text-shadow: 0 0 60px rgba(255,0,0,0.3), 0 2px 10px rgba(0,0,0,0.4);
}
.stat-number {
  text-shadow: 0 0 40px rgba(255,0,0,0.2), 0 2px 10px rgba(0,0,0,0.4);
}

/* ── AGGRESSIVE HOVER ON CARDS ───────────────── */
.team-card {
  transition: transform 0.3s, border-color 0.3s;
}
.team-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,0,0,0.3);
}

.camera-card {
  transition: border-color 0.3s;
}
.camera-card:hover {
  border-color: rgba(255,0,0,0.4);
}

.qual-card {
  transition: border-color 0.3s;
}
.qual-card:hover {
  border-color: rgba(255,0,0,0.3);
}

/* ── PULL QUOTES (italic statements in image bands & heroes) */
.image-band-content .section-title[style*="italic"] {
  font-size: clamp(28px, 4.5vw, 52px);
  line-height: 1.2;
}
.page-hero .section-body[style*="italic"] {
  font-size: clamp(20px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.4;
  opacity: 0.7;
  max-width: 800px;
}

/* ── HOMEPAGE HERO ───────────────────────────── */
.homepage-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 32px;
  padding: 0 60px 48px;
}
.homepage-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: #000;
}
.homepage-hero-trident {
  position: absolute;
  top: 50%;
  right: -5%;
  transform: translateY(-50%);
  width: 55%;
  height: 55%;
  opacity: 0.35;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}
.homepage-hero-top {
  position: relative;
  z-index: 2;
  max-width: 500px;
  text-align: left;
}
.homepage-hero-bottom {
  position: relative;
  z-index: 2;
  padding: 32px 0 0;
  margin: 0 -60px -48px;
  padding: 32px 60px 48px;
  background: linear-gradient(transparent, rgba(0,0,0,0.9));
}
@media (max-width: 768px) {
  .homepage-hero {
    min-height: auto;
    flex-direction: column;
    /* Zero top padding — hero sits flush under .page-headline. */
    padding: 0;
  }
  .homepage-hero-img {
    position: relative;
    inset: auto;
    height: auto;
    object-fit: cover;
    object-position: center top;
    aspect-ratio: 3/4;
  }
  .homepage-hero-top {
    position: relative;
    inset: auto;
    max-width: 100%;
    padding: 260px 20px 0;
    /* Headline sits over the hero image — no gradient box. Text-shadow
       on the h1 (further down) keeps it readable against varied image
       tones. */
    margin-top: -470px;
    background: transparent;
  }
  .homepage-hero-top h1 {
    font-size: 18px !important;
    line-height: 1.2 !important;
    margin-bottom: 0 !important;
    text-shadow: 3px 3px 0 #000;
  }
  .homepage-hero-top .hero-tagline { text-shadow: 2px 2px 0 #000; }
  .homepage-hero-bottom { padding-top: 16px !important; }
  .homepage-hero-top .hero-tagline {
    font-size: 10px;
    margin-bottom: 12px;
  }
  .homepage-hero-trident {
    width: 45%;
    height: 45%;
    right: -8%;
    top: 30%;
    opacity: 0.3;
  }
  .homepage-hero-bottom {
    position: relative;
    margin: 0;
    padding: 0 20px 32px;
    background: var(--black);
  }
}

/* ── STATEMENT BLOCK ─────────────────────────── */
.statement-block {
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 120px 60px 60px;
  background: var(--black);
}
.statement-block h2 {
  font-size: clamp(32px, 6vw, 80px);
  font-weight: 900;
  font-style: italic;
  line-height: 1.15;
  max-width: 900px;
}
@media (max-width: 768px) {
  .statement-block {
    min-height: 60vh;
    padding: 100px 20px 60px;
  }
  .statement-block h2 {
    font-size: clamp(24px, 7vw, 40px);
  }
}

/* ── CTA BANNER MOBILE ──────────────────────── */
@media (max-width: 768px) {
  .cta-banner { height: 260px; }
  .cta-banner-bg::after { background: rgba(0,0,0,0.3); }
  .cta-banner-content .section-title { font-size: clamp(20px, 5vw, 32px); }
  .cta-banner-content .section-label { font-size: 9px; }
}

/* ── SOCIAL LINKS MOBILE ────────────────────── */
@media (max-width: 768px) {
  .social-links { flex-wrap: wrap; gap: 16px; }
  .social-link { font-size: 10px; }
}

/* ── PHOTO STRIP MOBILE FIX ─────────────────── */
@media (max-width: 768px) {
  .photo-strip-item { height: 240px; }
}

/* ── ENGINE GRID MOBILE ─────────────────────── */
@media (max-width: 768px) {
  .engine-round { grid-template-columns: 56px 1fr; }
  .engine-round-num { font-size: 20px; }
  .engine-round-text { padding: 16px; font-size: 13px; }
}

/* ── TRIDENT WATERMARK ───────────────────────── */
.trident-bg {
  position: fixed;
  top: 0;
  right: -5vw;
  width: 55vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  opacity: 0.15;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trident-bg svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body { position: relative; }
body > *:not(.trident-bg):not(.site-nav):not(.mobile-menu):not(.frame-bg):not(.frame-bg-video):not(.hero-intro):not(.frame-vlabel):not(.frame-subheading):not(.frame-headline):not(.frame-ctas):not(.page-scroll):not(.letterbox-top):not(.letterbox-bottom):not(.countdown-bar):not(.tw-modal):not(.timeline-section):not(.timeline-up-arrow):not(.fine-print-bar):not(.timeline-drawer-tab):not(.construction-tag):not(.cr-body):not(.cr-register-split):not(.cr-prod-split):not(.cageracer-strip):not(.social-icons):not(.legals-trigger):not(.legals-modal):not(.legals-menu):not(.nav-login):not(.promo-lightbox) {
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .trident-bg {
    width: 80vw;
    right: -15vw;
    opacity: 0.12;
  }
}

/* ── SELECTION COLOUR ────────────────────────── */
::selection {
  background: rgba(255,0,0,0.4);
  color: var(--white);
}

/* ── NAV DROPDOWNS (2026-04-22) ────────────────────────── */
.nav-item {
  position: relative;
}
.nav-parent {
  background: none;
  border: none;
  color: var(--white);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: opacity 0.2s, color 0.2s;
}
.nav-parent:hover { opacity: 1; color: var(--red); }
.nav-arrow {
  font-size: 9px;
  opacity: 0.5;
  transition: transform 0.2s;
  display: inline-block;
}
.nav-item.is-open .nav-arrow { transform: rotate(180deg); opacity: 0.9; }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 210px;
  background: rgba(6,6,6,0.97);
  border: 1px solid rgba(255,255,255,0.1);
  border-top: 2px solid var(--red);
  border-radius: 0 0 8px 8px;
  padding: 6px 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 2000;
}
.nav-item.is-open .nav-dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

/* Click flash — brief red pulse on nav-parent click */
@keyframes nav-click-flash {
  0%   { color: var(--white); }
  25%  { color: var(--red); opacity: 1; }
  100% { color: var(--red); opacity: 1; }
}
.nav-parent.is-flashing { animation: nav-click-flash 0.18s ease forwards; }

/* Selected sub-item flash */
@keyframes nav-sub-flash {
  0%   { background: rgba(255,0,0,0.28); color: var(--white); }
  100% { background: rgba(255,0,0,0.06); }
}
.nav-dropdown a.is-selected { animation: nav-sub-flash 0.35s ease forwards; color: var(--white); }
.nav-dropdown a {
  display: block;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.nav-dropdown a:hover { color: var(--white); background: rgba(255,0,0,0.06); }

/* Coming pill — used on nav items still in development */
.coming-pill {
  display: inline-block;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #F2994A;
  border: 1px solid rgba(242,153,74,0.6);
  padding: 1px 5px;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 5px;
  line-height: 1.4;
}
/* FormulaH2O top-level link */
a.nav-coming { opacity: 0.65; }
a.nav-coming:hover { opacity: 1; color: var(--white) !important; }

/* ── MOBILE MENU GROUPS ─────────────────────────────────── */
.mobile-menu { gap: 0; padding: 60px 40px; overflow-y: auto; }
.mobile-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.mobile-group-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  padding-top: 4px;
}
.mobile-group a { font-size: 20px !important; }
.mobile-divider {
  width: 36px;
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 16px auto;
}
.mobile-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  transition: color 0.2s;
}
.mobile-close:hover { color: var(--white); }

/* ═══ TIMELINE WINDOW MODAL — Brett-locked 2026-04-25 ═══
   Clicking any .timeline-node[data-tw-slug] opens this small text window.
   Content fetched from /api/timeline-windows/:slug; managed in Admin →
   Create → Timeline Window Text Boxes. Site-wide pattern, portable to
   ipqld, scottwagner, squadfilms etc. */
.timeline-node[data-tw-slug] { cursor: pointer; outline: none; }
.timeline-node[data-tw-slug]:hover .tl-name,
.timeline-node[data-tw-slug]:focus-visible .tl-name { color: var(--red); }
.timeline-node[data-tw-slug]:focus-visible {
  outline: 2px solid rgba(255,0,0,0.45);
  outline-offset: 6px;
  border-radius: 4px;
}

.tw-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Padding keeps the card clear of the top + bottom letterboxes so the
     Vimeo player's bottom controls (mute/volume) don't tuck behind the
     bottom CTA bar. Top: nav letterbox + a touch. Bottom: round CTAs + ticker. */
  padding: 140px 24px 130px;
}
@media (max-width: 768px) {
  .tw-modal { padding: 130px 16px 110px; }
}
.tw-modal[hidden] { display: none; }
.tw-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.tw-modal-card {
  position: relative;
  max-width: 760px;
  width: 100%;
  /* Max-height matches the card's available band between letterboxes
     (matches .tw-modal's top + bottom padding above). */
  max-height: calc(100vh - 270px);
  overflow: auto;
  /* Slight transparency + blur so the photo shows through faintly behind
     the card — Brett-locked 2026-04-25. */
  background: rgba(8, 8, 12, 0.86);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 6px;
  padding: 28px 32px 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  animation: twModalIn 180ms ease-out;
}
@media (max-width: 768px) {
  .tw-modal-card { max-height: calc(100vh - 240px); padding: 22px 18px; }
}
@keyframes twModalIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Brett-locked 2026-04-25: prominent X box top-right of the modal card.
   Real square button (not just a bare ×) so it reads as a clear close
   affordance on top of the Vimeo player. */
.tw-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--white);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
  z-index: 5;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 100ms ease;
}
.tw-modal-close:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}
.tw-modal-close:active { transform: scale(0.94); }
/* Optional Vimeo player on top of the body. 16:9 letterbox; iframe owns
   audio playback. To stop the click-out to vimeo.com, host video as an
   "Unlisted" upload + use a Vimeo Plus/Pro account's player customisation
   to hide the logo overlay. The pip=0 / dnt=1 / portrait=0 / byline=0 /
   title=0 params we send strip every other escape hatch. */
.tw-modal-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 0 18px;
  background: #000;
  overflow: hidden;
  border-radius: 4px;
}
.tw-modal-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.tw-modal-kicker {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 10px;
}
.tw-modal-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 18px;
  line-height: 1.1;
}
.tw-modal-body {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,0.86);
}
.tw-modal-body p { margin: 0 0 12px; }
.tw-modal-body p:last-child { margin-bottom: 0; }
.tw-modal-body strong { color: var(--white); }
.tw-modal-body em { color: var(--white); font-style: italic; }
@media (max-width: 768px) {
  .tw-modal { padding: 16px; }
  .tw-modal-card { padding: 24px 20px 20px; }
  .tw-modal-body { font-size: 14px; }
}

/* ── CAMPAIGN POSTERS (homepage + indiegogo) ─── */
.campaign-posters-section {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 70px 40px;
  text-align: center;
}
.campaign-posters-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 36px;
}
.campaign-posters-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto 40px;
}
@media (max-width: 640px) {
  .campaign-posters-grid { grid-template-columns: 1fr; gap: 16px; }
}
.campaign-poster {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.campaign-poster:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 60px rgba(255,0,0,0.2);
}
.campaign-poster img {
  width: 100%;
  height: auto;
  display: block;
}
/* Paired CTAs — site-wide close. RED default. Click flashes to French
   BLUE with an audible tick (the homepage + end-of-page CTA pair). */
.campaign-posters-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  min-height: 52px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: #FF0000;
  border: 1px solid #FF0000;
  padding: 14px 36px;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.campaign-posters-cta:hover,
.campaign-posters-cta:focus-visible {
  background: #cc0000;
  border-color: #cc0000;
  color: #fff;
}
.campaign-posters-cta:active,
.campaign-posters-cta.is-flashing {
  background: #0055A4;
  border-color: #0055A4;
  color: #fff;
  transform: translateY(1px);
}
.campaign-posters-ctas {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  max-width: 360px;
  margin: 0 auto;
}
.campaign-posters-ctas .campaign-posters-cta {
  width: 100%;
  min-height: 62px;
  text-align: center;
  line-height: 1.25;
}

/* ═══════════════════════════════════════════════
   SERIES TIMELINE
   ═══════════════════════════════════════════════ */
/* VERTICAL TIMELINE — Brett locked 2026-04-25.
   Timeline pinned to LEFT border, scrolls DOWN. Works for desktop + mobile.
   This pattern is the house standard across all CageRace pages and sibling sites. */
/* Drawer tab — Brett-locked 2026-04-25. Horizontal bar at the TOP of the
   timeline column carrying "The Road To CageRace" label + chevron. Acts
   as the always-visible drawer handle: click to vanish the column (with
   audible click), click again to bring it back. Stays fixed even when
   the timeline is hidden so users can re-open it. */
.timeline-drawer-tab {
  position: fixed;
  top: max(116px, calc((100vh - 100vw / 2.39) / 2));
  left: 0;
  width: 360px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 9;
  transition: background 180ms ease;
}
.timeline-drawer-tab:hover { background: rgba(0, 0, 0, 0.78); color: #27AE60; }
.timeline-drawer-tab .tdt-label { flex: 1; text-align: center; }
/* Brett-locked 2026-04-25: TWO matching green chevrons flanking the
   label — same size, same color, mirroring rotation on close. */
.timeline-drawer-tab .tdt-arrow {
  color: #27AE60;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  transition: transform 220ms ease;
  width: 16px;
  text-align: center;
  flex: 0 0 auto;
}
body.timeline-closed .timeline-drawer-tab .tdt-arrow { transform: rotate(180deg); }
@media (max-width: 768px) {
  .timeline-drawer-tab { width: 280px; padding: 0 24px; font-size: 9px; height: 32px; }
}

/* Brett-locked 2026-04-25: timeline is an INDEPENDENT element on the LEFT
   side of the page. Position-fixed between the top + bottom letterboxes,
   with its own vertical scroll. Scrolling the timeline does NOT scroll
   the rest of the page; scrolling the page does NOT move the timeline.
   Spine column lines up with the trident logo's center prong (dot center
   at viewport x=48 desktop / x=36 mobile). Built to handle 400+ entries
   (e.g. scottwagner) — overflow:auto + smooth scroll + CSS mask fade. */
.timeline-section {
  position: fixed;
  /* Aligns with the drawer-tab's top so events can scroll UP behind the
     tab and vanish "into the drawer". The drawer tab sits at z=9 over
     this column (z=8) and visually swallows scrolled-past events. */
  top: max(116px, calc((100vh - 100vw / 2.39) / 2));
  bottom: max(100px, calc((100vh - 100vw / 2.39) / 2));
  left: 0;
  width: 360px;
  z-index: 8;
  background: transparent;
  /* Padding-top matches the drawer-tab height so the FIRST event renders
     just below the tab when the column is at scrollTop=0.
     Padding-bottom is a tall runoff zone so EVERY event can be scrolled
     up past the top edge and vanish into the drawer — including the
     last one. With less padding, the last event would always stay
     visible at the bottom of the column. */
  padding: 48px 0 90vh;
  border-top: none;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
  /* Soft fade at top + bottom edges so events vanish gracefully as they
     scroll up rather than hard-clipping. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 280ms ease;
}
body.timeline-closed .timeline-section {
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}
body.timeline-closed .timeline-up-arrow { display: none; }
.timeline-section::-webkit-scrollbar { width: 4px; }
.timeline-section::-webkit-scrollbar-track { background: transparent; }
.timeline-section::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 2px; }
@media (max-width: 768px) {
  .timeline-section { width: 280px; }
}

/* Fine-print ticker — Brett-locked 2026-04-25.
   Sits inside the bottom letterbox to the right of the countdown.
   Horizontal marquee for the long legal/credits text; site-wide pattern. */
/* Social icons — Brett-locked 2026-04-28: CENTERED in the bottom letterbox.
   Countdown sits on the left, login/menu on the right — social anchors the
   middle of the bottom band. */
.social-icons {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  right: auto;
  bottom: calc((var(--letterbox-h) - 18px) / 2);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 14px;
}
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
  transition: color 180ms ease, transform 120ms ease;
}
.social-icon:hover { color: var(--white); }
.social-icon:active { transform: scale(0.96); }
@media (max-width: 768px) {
  /* Mobile: revert to right-anchored, no centering. */
  .social-icons { left: auto; right: 16px; transform: none; bottom: 6px; gap: 10px; }
  .social-icon { font-size: 9px; letter-spacing: 0.12em; }
}

/* Brett-locked 2026-04-28 PM: "Under 'Live' Construction" tag retired
   site-wide. Hidden in case any page still has the markup. */
.construction-tag { display: none !important; }

/* Brett-locked 2026-04-25: full-width centered fine-print band, allowed
   to wrap to two lines so the founding-group credits + legal don't run
   off the right edge. Sits below the countdown + social-icons row. */
/* Brett-locked 2026-04-28 PM: founding-group fine-print bar retired
   site-wide. Hidden in case any page still has the markup. */
.fine-print-bar { display: none !important; }
.fine-print-bar--legacy {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 8px;
  height: auto;
  z-index: 100;
  overflow: hidden;
  pointer-events: auto;
  text-align: center;
}
.fine-print-track {
  display: -webkit-box;
  white-space: normal;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.45;
  max-height: 32px;
}
.fine-print-track a {
  color: rgba(255,255,255,0.62);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fine-print-track a:hover { color: var(--red); }
@media (max-width: 768px) {
  .fine-print-bar { font-size: 9px; }
}

/* Brett-locked 2026-04-25: Discord nav-discord button removed from top
   bar — Discord is already in the bottom social-icons row across every
   page, so the top icon is redundant. Hidden via CSS (markup retained
   in HTML so we can flip it back on if we ever change our mind). */
.nav-discord { display: none !important; }

/* Up-arrow pinned just above the timeline column's top edge — a visual
   "you can scroll up" cue. Body-level fixed element so it stays put while
   the timeline scrolls inside. Sits on the spine X (= trident logo's
   center prong) and is excluded from the body > * relative-positioning
   rule by the .timeline-up-arrow :not() further up. */
.timeline-up-arrow {
  position: fixed;
  /* Sits between the drawer tab (36px) and the first event. */
  top: calc(max(116px, calc((100vh - 100vw / 2.39) / 2)) + 42px);
  left: 48px;
  transform: translateX(-50%);
  width: 24px;
  text-align: center;
  font-size: 14px;
  line-height: 1;
  color: var(--red);
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.55);
  z-index: 6;
  animation: tlArrowNudge 1.6s ease-in-out infinite;
  pointer-events: none;
}
@media (max-width: 768px) {
  .timeline-up-arrow { left: 36px; }
}
@keyframes tlArrowNudge {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}
.timeline-section .timeline-node,
.timeline-section .timeline-connector {
  transition: opacity 80ms linear;
}
.timeline-header {
  margin: 0 0 24px;
  padding: 0 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.timeline-kicker {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
}
.timeline-scroll-hint {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FF0000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0.9;
}
.timeline-scroll-arrow {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  color: #FF0000;
  animation: timelineNudge 1.6s ease-in-out infinite;
}
@keyframes timelineNudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}

/* Timeline scrolls inside .timeline-section now; this wrapper just hosts
   the track. Padding-left is tuned so the spine column centers on the
   trident logo's center prong (nav-padding-left + svg-width / 2):
   desktop 24+24 = 48; spine column = 24px wide, dot 12px → padding-left
   needs to be 48 − 12 = 36px for the dot center to land at x=48.
   Mobile: 16 + 20 = 36; padding-left = 36 − 12 = 24. */
.timeline-scroll-wrap {
  overflow: visible;
  padding: 0 36px;
}
@media (max-width: 768px) {
  .timeline-scroll-wrap { padding: 0 24px; }
}

/* Vertical track — left-pinned spine */
.timeline-track {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 760px;
  margin: 0;
  padding: 0;
}

/* Vertical connector — a 2px bar aligned to the spine column (24px wide). */
.timeline-connector {
  flex: 0 0 auto;
  width: 2px;
  height: 56px;
  /* Spine column is 24px wide with the dot centered in it;
     a 2px-wide line sits at (24 - 2) / 2 = 11px from the left edge. */
  margin-left: 11px;
  align-self: flex-start;
  position: static;
  top: auto;
}
.timeline-connector--done  { background: #27AE60; }
.timeline-connector--ahead { background: linear-gradient(to bottom, rgba(255,255,255,0.18), rgba(255,255,255,0.04)); }

/* Individual event node — row layout: [ dot | labels ] */
.timeline-node {
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: 24px;
  align-items: start;
  padding: 6px 0;
  min-width: 0;
  max-width: none;
}

/* Dot — sits in the spine column, centered horizontally, anchored top. */
.timeline-node-dot {
  grid-column: 1;
  grid-row: 1 / span 2;
  justify-self: center;
  align-self: start;
  margin-top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  background: #0B0D11;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  transition: transform 200ms ease;
}
.timeline-node:hover .timeline-node-dot { transform: scale(1.25); }

/* Past nodes */
.timeline-node--past .timeline-node-dot {
  background: #27AE60;
  border-color: #27AE60;
}

/* NEXT node */
.timeline-node--next .timeline-node-dot {
  width: 16px;
  height: 16px;
  background: #FF0000;
  border-color: #FF0000;
  box-shadow: 0 0 0 4px rgba(255,0,0,0.18), 0 0 20px rgba(255,0,0,0.35);
  animation: tl-pulse 2s ease-in-out infinite;
}
@keyframes tl-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,0,0,0.18), 0 0 20px rgba(255,0,0,0.35); }
  50%       { box-shadow: 0 0 0 8px rgba(255,0,0,0.06), 0 0 32px rgba(255,0,0,0.2); }
}

/* Future nodes */
.timeline-node--future .timeline-node-dot {
  border-color: rgba(255,255,255,0.16);
}

/* SERIES 1 node */
.timeline-node--series1 .timeline-node-dot {
  width: 18px;
  height: 18px;
  background: #F2994A;
  border-color: #F2994A;
  box-shadow: 0 0 0 4px rgba(242,153,74,0.15), 0 0 24px rgba(242,153,74,0.3);
}

/* Labels — in the right-hand column, stacked top then bottom. */
.timeline-node-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  padding: 0;
  min-height: 0;
}
.timeline-node-label--above {
  grid-column: 2;
  grid-row: 1;
  padding-bottom: 2px;
}
.timeline-node-label--below {
  grid-column: 2;
  grid-row: 2;
  padding-top: 2px;
}

/* Label text */
.tl-pill {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #0B0D11;
  background: #FF0000;
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 2px;
}
.tl-date {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.4);
  white-space: normal;
}
.timeline-node--next .tl-date { color: rgba(255,255,255,0.65); }
.tl-name {
  display: block;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  white-space: normal;
}
.timeline-node--past .tl-name { color: rgba(255,255,255,0.45); }
.timeline-node--next .tl-name { color: #FFFFFF; }
.timeline-node--series1 .tl-name { color: #F2994A; }
.tl-name--series1 {
  font-size: 16px;
  letter-spacing: 0.16em;
}
.tl-sub {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.28);
  white-space: normal;
  margin-top: 3px;
}
.timeline-node--next .tl-sub { color: rgba(255,255,255,0.5); }
.timeline-node--series1 .tl-sub { color: rgba(242,153,74,0.65); }
.tl-detail {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,0.2);
  white-space: normal;
  margin-top: 2px;
}
.timeline-node--next .tl-detail { color: rgba(255,255,255,0.38); }

/* Mobile: tighten spine padding + connector height. Padding-left mirrors
   the desktop calc — keeps the dot center on the trident logo's center prong. */
@media (max-width: 768px) {
  .timeline-header     { padding: 0 24px; margin-bottom: 28px; }
  .timeline-scroll-wrap { padding: 0 24px; }
  .timeline-connector  { height: 40px; }
  .timeline-node       { column-gap: 16px; }
  .tl-name             { font-size: 13px; }
  .tl-name--series1    { font-size: 15px; }
}

/* Scroll hint was for horizontal scroll — hide in vertical layout. */
.timeline-scroll-hint { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE LOCKED-FRAME REBUILD  ·  Brett-locked 2026-04-25
   Below 768px the cinematic locked-frame chrome (fixed letterbox bands,
   fixed cinemascope photo, narrow right-aligned content column) is
   replaced with a normal-flow magazine: photo → headline → CTAs → body
   → social → fine-print. Portrait phones don't have the height/width to
   sustain a 2.39:1 frame with content scrolling inside a 172px sliver.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Hide fixed letterbox bands — they cover content */
  .letterbox-top,
  .letterbox-bottom { display: none; }

  /* Photo backdrop: in flow below the nav, full-width 2.39:1 cinematic */
  .frame-bg {
    position: relative;
    top: auto; left: auto; right: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 2.39 / 1;
    object-fit: cover;
    object-position: 50% 30%;
    margin: 56px 0 0;       /* clear the fixed nav (height ≈ 56px) */
    z-index: 1;
    display: block;
  }

  /* Headline: in flow, full-width banner under the photo */
  .frame-headline {
    position: relative;
    top: auto; left: auto;
    width: auto;
    margin: 10px 16px 4px;
    padding: 0;
    font-size: clamp(28px, 9vw, 40px);
    line-height: 1;
    letter-spacing: -0.03em;
    text-align: left;
    white-space: normal;
    z-index: 5;
  }

  /* CTAs: row, smaller, sit below the headline. */
  .frame-ctas {
    position: relative;
    top: auto; right: auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 16px 8px;
    z-index: 5;
  }
  .round-cta {
    padding: 10px 14px;
    font-size: 11px;
    border-radius: 999px;
  }
  .round-cta .rcta-l1 { font-size: 12px; }
  .round-cta .rcta-l2 { font-size: 10px; }

  /* Right-column body content → full-width flow */
  .cr-body-inline {
    position: relative;
    top: auto; right: auto; left: auto; bottom: auto;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 4px 20px 12px;
    text-align: left;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
    background: var(--black);
  }
  .cr-body-inline p,
  .cr-body-inline .cr-body-lead,
  .cr-body-inline .cr-body-pull,
  .cr-body-inline .cr-body-tagline {
    text-align: left;
    text-shadow: none;
  }
  .cr-body-inline .cr-body-pull {
    border-left: 3px solid var(--red);
    padding-left: 14px;
    margin: 22px 0;
  }
  .cr-body-inline .cr-rules li { text-align: left; padding-left: 0; }

  /* cr-body (homepage variant) → full-width flow */
  .cr-body {
    position: relative;
    top: auto; right: auto; left: auto; bottom: auto;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 4px 20px 12px;
    text-align: left;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
    background: var(--black);
  }
  .cr-body p,
  .cr-body .cr-body-lead,
  .cr-body .cr-body-pull,
  .cr-body .cr-body-tagline,
  .cr-body .cr-tactic-head,
  .cr-body .cr-tactic p { text-align: left; }
  .cr-body .cr-tactic-head { justify-content: flex-start; }

  /* Production page: video grid in single column, full-width */
  .cr-body-inline .prod-video { margin: 18px 0 26px; }
  .cr-body-inline .prod-video-label { text-align: left; }

  /* Register split: copy + form stack normally on mobile (single column,
     in body flow, no fixed positioning). */
  .cr-register-split {
    position: relative;
    top: auto; bottom: auto; left: auto; right: auto;
    display: block;
    width: auto;
    max-width: 100%;
    padding: 4px 20px 16px;
    margin: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .cr-register-copy,
  .cr-register-form {
    overflow: visible;
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
    padding: 0 0 12px;
  }
  .cr-register-copy { text-align: left; }
  .cr-register-copy p,
  .cr-register-copy .cr-body-lead,
  .cr-register-copy .cr-body-pull { text-shadow: none; }

  /* Timeline section: in flow on mobile (homepage) */
  .timeline-section {
    position: relative;
    top: auto; left: auto; right: auto; bottom: auto;
    width: auto;
    max-width: 100%;
    padding: 8px 20px 12px;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .timeline-drawer-tab,
  .timeline-up-arrow { display: none; }

  /* Countdown — its DOM position is at the very top of <body> (above the
     nav). On mobile we'd rather not have it at the very top because the
     nav covers it. Pin it FIXED to the bottom-center as a launch reminder
     instead, sitting just above the social/footer block which scrolls
     into view at the foot of the page. */
  .countdown-bar {
    position: fixed;
    top: auto;
    left: 50%;
    right: auto;
    bottom: 12px;
    transform: translateX(-50%);
    margin: 0;
    padding: 8px 14px;
    width: max-content;
    z-index: 1004;
    font-size: 12px;
    background: rgba(0,0,0,0.85);
    border-radius: 999px;
  }
  .countdown-bar .cb-cell { padding: 0 4px; }
  .countdown-bar .cb-timer { gap: 0; }
  .construction-tag {
    position: relative;
    top: auto; left: auto; right: auto; bottom: auto;
    display: block;
    text-align: center;
    margin: 8px 16px;
  }
  .social-icons {
    position: relative;
    top: auto; left: auto; right: auto; bottom: auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    padding: 14px 16px;
  }
  .social-icons .social-icon { font-size: 11px; }
  .fine-print-bar {
    position: relative;
    top: auto; left: auto; right: auto; bottom: auto;
    height: auto;
    padding: 16px;
    overflow: visible;
  }
  .fine-print-track {
    animation: none !important;
    white-space: normal;
    text-align: center;
    font-size: 9px;
    line-height: 1.5;
    transform: none !important;
  }

  /* Body background must be black so flowed content sits on a clean canvas */
  body { background: var(--true-black); }
  .trident-bg { display: none; }   /* hide watermark on mobile — clutters */

  /* Mobile menu CTAs */
  .nav-discord { right: 56px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SMART TV / WIDE-VIEWPORT POLISH  ·  Brett-locked 2026-04-25
   At 1920px+ scale up text so it reads from couch distance. The
   locked-frame layout already handles the 2.39:1 photo correctly at
   any resolution — only typography needs the lift.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1920px) {
  /* 2026-04-30 BUS-CRASH FIX: removed frame-headline scale-up — at
     80px it bled below the 90px letterbox into the menu bar. Locked
     to the base 46px cap so it stays inside the letterbox. */
  /* .frame-headline { font-size: clamp(46px, 3.2vw, 80px); } */
  .cr-body-inline {
    width: min(38vw, 720px);
    right: max(56px, 4vw);
    padding-right: 4px;
  }
  .cr-body-inline p { font-size: clamp(17px, 1.1vw, 22px); line-height: 1.55; }
  .cr-body-inline .cr-body-lead { font-size: clamp(24px, 1.6vw, 34px); }
  .cr-body-inline .cr-body-pull { font-size: clamp(28px, 2vw, 44px); }
  .cr-body {
    width: min(34vw, 680px);
    right: max(56px, 4vw);
    padding-right: 4px;
  }
  .cr-body p { font-size: clamp(17px, 1.1vw, 22px); }
  .cr-body .cr-body-lead { font-size: clamp(20px, 1.4vw, 28px); }
  .cr-body .cr-body-pull { font-size: clamp(28px, 2vw, 44px); }
  .round-cta { padding: 14px 24px; font-size: 14px; }
  .round-cta .rcta-l1 { font-size: 16px; }
  .round-cta .rcta-l2 { font-size: 13px; }
  .countdown-bar { font-size: 16px; padding: 14px 22px; }
  /* Brett-locked 2026-04-28: bumped 1pt for legibility (was 14px). */
  .nav-links a, .nav-links .nav-parent { font-size: 15px; }
  .social-icons .social-icon { font-size: 13px; }
  .construction-tag { font-size: 12px; }
  .fine-print-bar { font-size: 12px; }
}

@media (min-width: 2560px) {
  /* 2026-04-30 BUS-CRASH FIX: removed wide-viewport scale-up (was
     130px max → bled past 90px letterbox + clobbered the menu). */
  /* .frame-headline { font-size: clamp(72px, 3.4vw, 130px); } */
  .cr-body-inline { width: min(34vw, 1000px); padding-right: 6px; }
  .cr-body         { width: min(32vw, 960px); padding-right: 6px; }
  .cr-body-inline p,
  .cr-body p { font-size: clamp(22px, 1.1vw, 36px); line-height: 1.5; }
  .cr-body-inline .cr-body-lead,
  .cr-body .cr-body-lead { font-size: clamp(28px, 1.4vw, 44px); }
  .cr-body-inline .cr-body-pull,
  .cr-body .cr-body-pull { font-size: clamp(36px, 2vw, 60px); }
  .nav-links a, .nav-links .nav-parent { font-size: clamp(16px, 0.7vw, 22px); }
  .round-cta { padding: 18px 30px; }
  .round-cta .rcta-l1 { font-size: clamp(18px, 0.9vw, 24px); }
  .round-cta .rcta-l2 { font-size: clamp(14px, 0.7vw, 18px); }
  .countdown-bar { font-size: clamp(18px, 0.9vw, 26px); }
  .social-icons .social-icon { font-size: clamp(15px, 0.7vw, 20px); }
  .construction-tag { font-size: clamp(14px, 0.6vw, 18px); }
  .fine-print-bar { font-size: clamp(13px, 0.6vw, 17px); }
  .frame-bg { object-position: 50% 20%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CAGERACER STRIP  ·  Brett-locked 2026-04-25
   /cageracers shows 16 magazine covers scrolling horizontally between
   the letterbox bands — like flipping through a magazine rack. Each
   cover is a portrait card with a FormulaH2O accent colour, a hero
   image, athlete number (I–XVI) + placeholder name. Real magazine
   templates ship tomorrow.
   ═══════════════════════════════════════════════════════════════════════ */
.cageracer-strip {
  position: fixed;
  top: max(116px, calc((100vh - 100vw / 2.39) / 2));
  bottom: max(116px, calc((100vh - 100vw / 2.39) / 2));
  left: 0;
  right: 0;
  z-index: 4;
  background: var(--true-black);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
  -webkit-overflow-scrolling: touch;
}
.cageracer-strip::-webkit-scrollbar { height: 6px; }
.cageracer-strip::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
.cageracer-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }

.cageracer-strip-rail {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 28px;
  /* Tighter edge padding so 3 MAG covers fit visibly at once on a
     1920px viewport. Each cover ≈ 535px wide × 803px tall.
     Brett-locked 2026-04-27. */
  padding: 0 60px;
  width: max-content;
}
.cageracer-cover {
  flex: 0 0 auto;
  position: relative;
  /* MAGs fill the photo band height — top and bottom touch the
     letterboxes on a 1920×803 desktop. Magazine 4:5 portrait —
     Brett-locked 2026-04-26 EVE (matches cover spec). */
  height: 100%;
  aspect-ratio: 4 / 5;
  background: var(--cover-color, #111);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.65), 0 6px 16px rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  color: inherit;
}
.cageracer-cover.cageracer-cover--director .cover-tag {
  background: rgba(255, 0, 0, 0.18);
  border-color: rgba(255, 0, 0, 0.55);
  color: #fff;
}

/* Trident-only cover for roster slots without a hero photo yet
   (Brett-locked 2026-04-26 EVE — "if there is no CageRace found,
   just put the Trident logo up"). 2026-04-27 update: tiles can now
   carry an athlete name underneath the trident (e.g. Greyson Bell
   #06 — name added before the photo arrives). The trident sits in
   the upper portion; cover-meta (number + name + tag) renders below. */
.cageracer-cover--trident {
  background: #0a0a0a;
}
.cageracer-cover--trident::after { display: none; }
.cageracer-cover--trident .cover-image {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  opacity: 1;
  background: transparent;
  padding-top: 14%;
}
.cageracer-cover--trident .cover-image svg {
  width: 46%;
  height: auto;
  max-width: 200px;
  opacity: 0.55;
}
.cageracer-cover--trident .cover-image svg path {
  fill: rgba(255, 255, 255, 0.7);
}

/* MAG cover · shame meter (small, bottom-right, noticeable not loud) */
.cover-shame {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 5;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 50%;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.cover-shame svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cover-shame span {
  position: relative;
  z-index: 1;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}
.cover-shame--empty span { opacity: 0.7; }

/* MAG cover · updated date (top-right, small) */
.cover-updated {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 4;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  text-align: right;
  max-width: 140px;
  line-height: 1.4;
}
.cageracer-cover:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(0,0,0,0.7), 0 6px 16px rgba(0,0,0,0.85);
}
.cageracer-cover .cover-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Brett-locked 2026-04-26 EVE: photos render at full opacity, no
     desaturation. The tint that came from opacity 0.55 + cover-color
     showing through made every face look filtered. The bottom gradient
     handles legibility for the name + number; that's all we need. */
  opacity: 1;
  z-index: 1;
}
.cageracer-cover::after {
  /* dark gradient at the bottom for legibility */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.85) 100%);
  z-index: 2;
}
.cover-mast {
  position: relative;
  z-index: 3;
  padding: 18px 20px 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cover-color, #fff);
  mix-blend-mode: screen;
  filter: brightness(1.4);
}
.cover-meta {
  position: relative;
  z-index: 3;
  margin-top: auto;
  padding: 20px;
  color: var(--white);
}
.cover-num {
  display: block;
  font-family: 'Times New Roman', Georgia, serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(64px, 6vw, 110px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--white);
  -webkit-text-stroke: 1.5px var(--cover-color, var(--red));
  text-shadow: 3px 3px 0 #000;
}
.cover-name {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(20px, 1.6vw, 28px);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--white);
  margin: 6px 0 0;
}
.cover-tag {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}
.cageracer-strip-hint {
  position: absolute;
  bottom: 6px;
  right: 18px;
  z-index: 5;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  pointer-events: none;
}

@media (max-width: 768px) {
  .cageracer-strip {
    position: relative;
    top: auto; bottom: auto;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    background: transparent;
    scroll-snap-type: x mandatory;
  }
  .cageracer-strip-rail {
    height: 70vh;
    max-height: 540px;
    padding: 12px 20px;
    gap: 16px;
  }
  .cageracer-cover {
    height: 100%;
    aspect-ratio: 2 / 3;
  }
  .cageracer-strip-hint { display: none; }
}

/* ── BRAND-NAME COLOUR SPLIT ─────────────────────────────────────────
   When CAGERACE / CAGERACERS / CAGERACER / CAGERACING appears in CAPS,
   wrap with <span class="logo-cage">CAGE</span><span class="logo-race">RACE…</span>.
   CAGE half = black or red, RACE half = white. In body copy use the
   plain CageRace mixed-case form (no spans, just capital C + R). */
.logo-cage { color: #000; font-weight: inherit; }
.logo-race { color: #fff; font-weight: inherit; }
/* On dark contexts (nav, frame headlines, hero, photo bands, magazine
   covers) — CAGE flips to red so it doesn't disappear on black. */
.frame-headline .logo-cage,
.cr-page-title .logo-cage,
.cover-mast .logo-cage,
.mag-cover-mast .logo-cage,
.image-band-content .logo-cage,
.homepage-hero-top .logo-cage,
.cr-body-inline .logo-cage { color: var(--red); }

/* ── LEGALS — Brett-locked 2026-04-28 PM: bottom drop-up retired in
   favour of a top-nav dropdown. The .legals-menu element is hidden
   globally so the JS-injected drop-up no longer appears, while the
   modal-trigger handlers stay live for the new top-nav links. */
.legals-menu { display: none !important; }

/* RETIRED 2026-04-28 PM — legacy bottom-letterbox positioning kept
   commented for archaeology only. */
.legals-menu--legacy {
  position: fixed;
  right: 24px;
  bottom: calc(max(116px, calc((100vh - 100vw / 2.39) / 2)) - 50px);
  z-index: 100;
}
.legals-parent {
  background: none;
  border: none;
  color: var(--white);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: opacity 0.2s, color 0.2s;
}
.legals-parent:hover { opacity: 1; color: var(--red); }
.legals-arrow {
  font-size: 9px;
  opacity: 0.5;
  transition: transform 0.2s;
  display: inline-block;
}
.legals-menu.is-open .legals-arrow { transform: rotate(180deg); opacity: 0.9; }

.legals-dropup {
  position: absolute;
  bottom: calc(100% + 16px);
  right: 0;
  min-width: 210px;
  background: rgba(6,6,6,0.97);
  border: 1px solid rgba(255,255,255,0.1);
  border-bottom: 2px solid var(--red);
  border-radius: 8px 8px 0 0;
  padding: 6px 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 2000;
}
.legals-menu.is-open .legals-dropup {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.legals-dropup-item {
  display: block;
  width: 100%;
  text-align: right;
  padding: 10px 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.legals-dropup-item:hover { color: #fff; background: rgba(255,0,0,0.08); }

@media (max-width: 640px) {
  .legals-menu { right: 16px; bottom: 60px; }
  .legals-parent { font-size: 12px; }
}

/* ── SOCIAL · centred SVG avatars in the bottom letterbox ────────────
   The legals.js script swaps .social-icon innerHTML with SVGs and adds
   the .social-icons--avatar / .social-icon--avatar marker classes.
   Hide the row until JS upgrades it so we don't flash the old text
   labels on first paint (Brett-flagged 2026-04-27). */
.social-icons { visibility: hidden; }
.social-icons.social-icons--avatar { visibility: visible; }
.social-icons.social-icons--avatar {
  position: fixed;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  /* Brett-locked 2026-04-28 PM: lowered ONTO the bottom letterbox.
     Was bottom: <letterbox height> - 50px. */
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 100;
}
.social-icon--avatar {
  /* Brett-locked 2026-04-28 PM: bumped from 48px → 64px circles. */
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: 1.5px solid var(--red);
  color: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
}
.social-icon--avatar:hover {
  background: var(--red);
  color: #fff;
}
.social-icon--avatar:active { transform: scale(0.94); }
.social-icon--avatar svg {
  /* SVG bumped from 22px → 30px to match larger circle. */
  width: 30px;
  height: 30px;
  fill: currentColor;
  display: block;
}
.social-icon-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 768px) {
  .social-icons.social-icons--avatar { gap: 10px; bottom: 56px; }
  .social-icon--avatar { width: 40px; height: 40px; }
  .social-icon--avatar svg { width: 18px; height: 18px; }
}

/* ── LEGALS · inline panel (renders inside .cr-register-form on /register
   instead of taking over the viewport with a modal). ───────────────── */
/* When the inline mode is active on a host (e.g. .cr-register-form),
   hide the host's other children — the form, success div — so the
   panel takes over the column. innerHTML is preserved so all form
   state survives a Back-to-the-Form click. */
.legals-inline-active > *:not(.legals-inline) { display: none !important; }

.legals-inline {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 6px;
  overflow: hidden;
}
.legals-inline-head {
  padding: 14px 18px 12px;
  background: #000;
  border-bottom: 2px solid var(--red);
}
.legals-inline-kicker {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--red);
}
.legals-inline-title {
  margin: 4px 0 0;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1;
  color: #fff;
  text-shadow: 2px 2px 0 #000;
}
.legals-inline-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 18px 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.94);
}
.legals-inline-body h2 {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: #fff;
}
.legals-inline-body h3 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 18px 0 6px;
  color: var(--red);
}
.legals-inline-body p { margin: 0 0 10px; }
.legals-inline-body ul {
  margin: 4px 0 12px 16px;
  padding: 0;
}
.legals-inline-body ul li { list-style: disc; margin-bottom: 4px; }
.legals-inline-body em { font-style: italic; }
.legals-inline-body a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legals-inline-foot {
  padding: 12px 18px 14px;
  border-top: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.7);
  text-align: left;
}
.legals-inline-back {
  padding: 9px 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: var(--red);
  border: 1px solid var(--red);
  border-radius: 4px;
  cursor: pointer;
  transition: filter 0.15s;
}
.legals-inline-back:hover { filter: brightness(1.1); }

/* ── LEGALS — bottom-letterbox menu + privacy modal ──────────────────
   The trigger lives in the bottom letterbox (auto-injected by legals.js
   on any page that has a .letterbox-bottom). Click opens a full-viewport
   modal with the privacy policy text. Designed to "cover the form" on
   register.html and act as a site-wide legal-info entry point. */
.legals-trigger {
  position: fixed;
  right: 20px;
  bottom: 14px;
  z-index: 80;
  padding: 6px 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 0, 0, 0.18);
  border: 1px solid rgba(255, 0, 0, 0.55);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.legals-trigger:hover { background: var(--red); color: #fff; border-color: var(--red); }

.legals-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  margin-top: 14px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.92);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.legals-link:hover { background: rgba(255, 0, 0, 0.16); border-color: var(--red); color: #fff; }

html.legals-modal-locked,
html.legals-modal-locked body { overflow: hidden; }

.legals-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.legals-modal.is-open { display: flex; }
.legals-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}
.legals-modal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  max-height: min(86vh, 880px);
  background: #ffffff;
  color: #111;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.legals-modal-head {
  position: relative;
  padding: 22px 56px 22px 28px;
  background: #000;
  color: #fff;
  border-bottom: 4px solid var(--red);
}
.legals-modal-kicker {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--red);
}
.legals-modal-title {
  margin: 4px 0 0;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  text-shadow: 2px 2px 0 #000;
}
.legals-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.legals-modal-close:hover { background: var(--red); border-color: var(--red); }
.legals-modal-body {
  padding: 28px 32px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #1a1a1a;
}
.legals-modal-body h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: #000;
}
.legals-modal-body h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 22px 0 8px;
  color: var(--red);
}
.legals-modal-body p { margin: 0 0 12px; }
.legals-modal-body ul {
  margin: 6px 0 14px 18px;
  padding: 0;
}
.legals-modal-body ul li {
  margin-bottom: 6px;
  list-style: disc;
}
.legals-modal-body em { font-style: italic; }
.legals-modal-body a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legals-modal-foot {
  padding: 14px 28px 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background: #f5f5f5;
  text-align: right;
}
.legals-modal-cta {
  padding: 10px 22px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  background: var(--red);
  border: 1px solid var(--red);
  border-radius: 4px;
  cursor: pointer;
  transition: filter 0.15s;
}
.legals-modal-cta:hover { filter: brightness(1.1); }

/* Mobile — modal goes near-full-screen, trigger pinned with smaller hit. */
@media (max-width: 640px) {
  .legals-trigger {
    right: 14px;
    bottom: 10px;
    font-size: 10px;
    padding: 5px 12px;
    letter-spacing: 0.22em;
  }
  .legals-modal { padding: 0; }
  .legals-modal-card {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  .legals-modal-head { padding: 18px 56px 16px 18px; }
  .legals-modal-body { padding: 20px 18px 18px; font-size: 14px; }
  .legals-modal-foot { padding: 12px 18px 14px; }
}

/* ═══════════════════════════════════════════════════════════
   HUMAN-FRIENDLY READING — Brett-locked sitewide style.
   Apply via .cr-prod-copy wrapper. Source: /production page.
   See feedback_cagerace_easy_read_template.md for the full spec.
   ═══════════════════════════════════════════════════════════ */
.cr-prod-copy {
  color: var(--white);
  text-align: left;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}
/* 2026-04-30: when the production essay lives inside .cr-body-inline
   (the new rules-style two-column layout), the column SITS ON THE LEFT
   side of the page (aside stays on the right) AND every text block in
   it is left-aligned. Default .cr-body-inline pins right + right-aligns
   text — both flipped here. Brett: "headline and text has to come
   across and align left". */
@media (min-width: 901px) {
  .cr-body-inline:has(.cr-prod-copy) {
    left: 56px;
    right: auto;
    /* Hold the column to the same width on every page so the headline
       fits without bleeding off the side. */
    width: min(46vw, 540px);
  }
}
.cr-body-inline:has(.cr-prod-copy),
.cr-body-inline:has(.cr-prod-copy) .page-headline,
.cr-body-inline:has(.cr-prod-copy) .page-ctas,
.cr-body-inline:has(.cr-prod-copy) .cr-prod-copy,
.cr-body-inline:has(.cr-prod-copy) .cr-prod-copy * {
  text-align: left;
}
.cr-body-inline:has(.cr-prod-copy) .page-ctas {
  justify-content: flex-start;
}
.cr-body-inline:has(.cr-prod-copy) .cr-prod-copy {
  margin-left: 0;
  padding-left: 0;
  max-width: 100%;
}
/* Cap the pull-quote ("MADE FOR / THE SCREEN") so it fits the 540px column
   without overflowing past the right edge. Default clamp scales to 120px,
   way wider than the column at "THE SCREEN" (10 chars). */
.cr-body-inline:has(.cr-prod-copy) .cr-prod-copy .prod-pull {
  font-size: clamp(40px, 8vw, 78px);
  line-height: 0.88;
  word-break: break-word;
}
/* Ensure the body essay paragraphs inherit left alignment too. */
.cr-body-inline:has(.cr-prod-copy) .cr-prod-copy h2,
.cr-body-inline:has(.cr-prod-copy) .cr-prod-copy h3,
.cr-body-inline:has(.cr-prod-copy) .cr-prod-copy p,
.cr-body-inline:has(.cr-prod-copy) .cr-prod-copy ul,
.cr-body-inline:has(.cr-prod-copy) .cr-prod-copy li {
  text-align: left;
}

/* ── PRODUCTION ASIDE — Brett 2026-04-30 ────────────────────────
   Default .page-aside is 32vw, too narrow for the pilot videos to
   read. Widen on production so the videos display at a usable size,
   and ensure the intro text sits ABOVE the first video (Brett: "the
   text to the right covers the first video"). */
@media (min-width: 901px) {
  body:has(.cr-prod-copy) .page-aside {
    width: clamp(420px, 42vw, 720px);
  }
  body:has(.cr-prod-copy) .cr-body-inline:has(.cr-prod-copy) {
    /* Ensure the body column doesn't overlap the wider aside on
       desktop — re-pin from the left with breathing room. */
    right: auto;
    left: 56px;
    width: min(40vw, 540px);
  }
}
.page-aside .prod-videos-kicker {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0 0 6px;
}
.page-aside .prod-videos-head {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
  margin: 0 0 8px;
}
.page-aside .prod-videos-sub {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.75);
  margin: 0 0 24px;
}
.page-aside .prod-video {
  margin: 0 0 24px;
}
.page-aside .prod-video:last-child {
  margin-bottom: 0;
}
.page-aside .prod-video .video-wrap {
  border-radius: 4px;
  /* re-asserted to cover any inherited override */
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.page-aside .prod-video .video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.page-aside .prod-video-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin: 8px 0 0;
}
.cr-prod-copy .prod-pull {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(52px, 7vw, 120px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.85;
  margin: 0 0 22px;
  text-transform: uppercase;
  text-shadow: 4px 4px 0 #000;
}
.cr-prod-copy .prod-pull::before {
  content: '';
  display: block;
  width: 72px;
  height: 5px;
  background: var(--red);
  margin: 0 0 18px;
}
.cr-prod-copy .prod-lead {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(19px, 2.1vw, 28px);
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 32px;
  text-shadow: 2px 2px 0 #000;
}
.cr-prod-copy p {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.6;
  font-weight: 500;
  margin: 0 0 14px;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.55);
}
.cr-prod-copy p + p { margin-top: 0; }
.cr-prod-copy h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1;
  margin: 38px 0 12px;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #000;
}
.cr-prod-copy h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 26px 0 10px;
  color: var(--red);
  text-shadow: 1px 1px 0 #000;
}
.cr-prod-copy ul {
  list-style: none;
  margin: 6px 0 22px;
  padding: 0;
}
.cr-prod-copy ul li {
  position: relative;
  padding: 10px 0 10px 18px;
  border-top: 1px solid rgba(255,255,255,0.16);
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.55;
  font-weight: 500;
  text-shadow: 1px 1px 0 #000;
}
.cr-prod-copy ul li:last-child { border-bottom: 1px solid rgba(255,255,255,0.16); }
.cr-prod-copy ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 18px;
  width: 8px; height: 2px;
  background: var(--red);
}
.cr-prod-copy ul li strong { color: #fff; font-weight: 800; display: inline; }
.cr-prod-copy strong { color: #fff; font-weight: 800; }

/* Wrapper that pads past the locked-frame chrome (frame-headline + frame-ctas)
   so the pull-quote opens cleanly. Use on any page that wraps body in .cr-prod-copy. */
.cr-easy-essay {
  padding: 160px 0 80px;
}
@media (max-width: 768px) {
  .cr-easy-essay { padding: 32px 0 48px; }
}

/* Body-level easy-read switch — apply class="easy-read-page" to <body>
   and existing .section-* paragraphs pick up the human-friendly
   typography (left-aligned, comfortable measure, line-height 1.7).
   For pages that already have rich .section content but want the
   reading rhythm without rewriting all the markup. */
.easy-read-page .section-label,
.easy-read-page .section-title {
  text-align: left;
}
.easy-read-page .section-body {
  text-align: left;
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
  opacity: 0.92;
}
.easy-read-page .section > .section-body,
.easy-read-page .section > ol,
.easy-read-page .section > ul {
  margin-left: auto;
  margin-right: auto;
}
.easy-read-page .section ol,
.easy-read-page .section ul {
  text-align: left;
  max-width: 65ch;
}

/* CageRacer sign-in pill — auto-injected by legals.js into the bottom
   letterbox. Sits to the left of the LEGALS dropup. Subtle by default,
   brightens on hover. !important on position/z-index because some
   late-loaded global rule was forcing position:relative on bare anchors. */
.signin-pill {
  position: fixed !important;
  right: 110px;
  bottom: calc(max(116px, calc((100vh - 100vw / 2.39) / 2)) - 50px);
  z-index: 100 !important;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  opacity: 0.7;
  padding: 6px 0;
  transition: opacity 0.15s, color 0.15s;
}
.signin-pill:hover,
.signin-pill:focus-visible {
  opacity: 1;
  color: var(--red);
  outline: none;
}
@media (max-width: 768px) {
  .signin-pill {
    position: fixed !important;
    bottom: 14px;
    right: 16px;
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    opacity: 0.95;
  }
}

/* Mobile: hide the floating social-icons cluster (Brett-locked
   2026-04-28 AM). The avatars are position-fixed and overlap content
   on phones — sign-in form, rules body, etc. Desktop unaffected. */
@media (max-width: 768px) {
  .social-icons,
  .social-icons.social-icons--avatar {
    display: none !important;
  }
}

/* ── LOG IN — Brett-locked 2026-04-28 PM. Small bottom-right link
   that takes athletes/operators to the Marketing Engine sign-in.
   Replaces the Legals drop-up that used to sit here. */
.login-cta {
  position: fixed;
  right: 24px;
  bottom: 28px;
  z-index: 100;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  padding: 7px 14px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.login-cta:hover {
  color: #fff;
  border-color: #FF0000;
  background: rgba(255,0,0,0.18);
}
@media (max-width: 768px) {
  .login-cta { right: 16px; bottom: 14px; font-size: 10px; padding: 6px 11px; }
}


/* ── BOTTOM-LETTERBOX LOGIN / MENU ─────────────────────────────────────────
   Brett-locked 2026-04-28: lives inside the 90px bottom letterbox at the
   right edge, mirroring the LE 14 JUILLET clock on the left and the
   centered social icons. Injected by main.js so every page picks it up
   without editing 24 HTML files. Desktop only. */
.nav-login {
  position: fixed;
  right: 24px;
  bottom: calc((var(--letterbox-h) - 18px) / 2);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  opacity: 0.85;
  transition: color 0.2s, opacity 0.2s;
}
.nav-login:hover { color: var(--red); opacity: 1; }
.nav-login .nl-sep { opacity: 0.45; font-weight: 400; }
@media (max-width: 768px) {
  /* Mobile uses the existing top-right hamburger; hide bottom login. */
  .nav-login { display: none; }
}