/* ============================================================
   TIER 1 — raw tokens. The only place a literal appears.
   ============================================================ */
:root {
  --raw-color-ice-50: #f7fafb;
  --raw-color-ice-100: #ebeef1;
  --raw-color-ice-200: #dfe5e9;
  --raw-color-steel-400: #b6c1c8;
  --raw-color-ink-950: #090a0b;
  --raw-color-ink-900: #0e0f14;
  --raw-color-ink-800: #1b1d24;
  --raw-color-ink-700: #2a2d36;
  --raw-color-ink-alpha-35: rgb(9 10 11 / 0.35);
  --raw-color-slate-500: #7a7a7a;
  --raw-color-slate-600: #4d4d4d;
  --raw-color-slate-900: #1e1e1e;
  --raw-color-cyan-400: #02d2e3;
  --raw-color-cyan-alpha-25: rgb(2 210 227 / 0.25);
  --raw-color-stone-600: #535450;
  --raw-color-white-alpha-10: rgb(255 255 255 / 0.1);
  --raw-color-white-alpha-20: rgb(255 255 255 / 0.2);
  --raw-color-ink-alpha-08: rgb(9 10 11 / 0.08);
  --raw-color-white-alpha-40: rgb(255 255 255 / 0.4);
  --raw-color-white: #ffffff;
  --raw-color-orange-500: #ff6b00;

  --raw-font-size-96: 6rem;
  --raw-font-size-70: 4.375rem;
  --raw-font-size-52: 3.25rem;
  --raw-font-size-38: 2.375rem;
  --raw-font-size-20: 1.25rem;
  --raw-font-size-18: 1.125rem;
  --raw-font-size-16: 1rem;
  --raw-font-size-14: 0.875rem;
  --raw-font-size-12: 0.75rem;
  --raw-font-size-55: 3.4375rem;
  --raw-font-size-36: 2.25rem;

  --raw-leading-95: 0.95;
  --raw-leading-90: 0.9;
  --raw-leading-72: 0.72;
  --raw-leading-110: 1.1;
  --raw-tracking-stat: -0.08em;
  --raw-tracking-label: -0.04em;
  --raw-tracking-eyebrow: -0.02em;

  --raw-radius-16: 1rem; --raw-radius-48: 3rem; --raw-radius-100: 6.25rem;
  --raw-duration-fast: 150ms; --raw-duration-normal: 250ms; --raw-duration-slow: 700ms;
  --raw-edge-fade-share: 10%; --raw-edge-fade-length: 6rem;

  /* ---- TIER 2 — roles ---- */
  --background: var(--raw-color-ice-50);
  --foreground: var(--raw-color-ink-950);
  --foreground-muted: var(--raw-color-ink-alpha-35);
  --surface-dark: var(--raw-color-ink-900);
  --surface-dark-raised: var(--raw-color-ink-800);
  --surface-black: var(--raw-color-ink-950);
  --surface-muted: var(--raw-color-ice-100);
  --surface-soft: var(--raw-color-ice-200);
  --foreground-on-dark: var(--raw-color-white);
  --foreground-on-dark-muted: var(--raw-color-steel-400);
  --foreground-on-dark-faint: var(--raw-color-white-alpha-40);
  --border-muted: var(--raw-color-ice-200);
  --border-on-dark: var(--raw-color-ink-700);
  --map-dot: var(--raw-color-slate-500);
  --map-grid: var(--raw-color-slate-600);
  --map-grid-ghost: var(--raw-color-slate-900);
  --map-mark: var(--raw-color-ice-50);
  --timeline-outline: var(--raw-color-stone-600);
  --timeline-fill: var(--raw-color-white-alpha-10);
  --timeline-rail: var(--raw-color-white-alpha-20);
  --paddock-contour: var(--raw-color-ink-alpha-08);
  --footer-contour: var(--raw-color-white-alpha-10);
  --accent: var(--raw-color-cyan-400);
  --accent-muted: var(--raw-color-cyan-alpha-25);

  --type-impact: var(--raw-font-size-96); --type-display-lg: var(--raw-font-size-70);
  --type-display: var(--raw-font-size-52); --type-heading: var(--raw-font-size-38);
  --type-title: var(--raw-font-size-20); --type-lead: var(--raw-font-size-18);
  --type-label: var(--raw-font-size-16); --type-body: var(--raw-font-size-14);
  --type-eyebrow: var(--raw-font-size-12); --type-display-sm: var(--raw-font-size-55);
  --type-year: var(--raw-font-size-36);

  --leading-headline: 0.95; --leading-flat: 0.9; --leading-cap: 0.72; --leading-display: 1.1;
  --duration-fast: 150ms; --duration-normal: 250ms; --duration-plate: 700ms;
  --ease-entrance: cubic-bezier(0.2, 0, 0, 1);
  --ease-plate: cubic-bezier(0.33, 0, 0, 1);
  --font-sans: "Space Grotesk", system-ui, sans-serif;
  --font-display: "Oswald", Impact, sans-serif;
}

/* ---- The root font-size bands ---- */
html { font-size: 16px; }
@media (max-width: 1920px) { html { font-size: 0.833333vw; } }
@media (max-width: 1440px) { html { font-size: 1.111111vw; } }
@media (max-width: 1279px) { html { font-size: 16px; } }

/* The 1441–1920 band is based on 1920, but the blocks were drawn at 1440. */
@media (min-width: 1441px) and (max-width: 1920px) {
  [data-hero] {
    --hero-base: calc(1920 / 1440);
    --type-impact: calc(6rem * var(--hero-base));
    --type-display-lg: calc(4.375rem * var(--hero-base));
    --type-display: calc(3.25rem * var(--hero-base));
    --type-heading: calc(2.375rem * var(--hero-base));
    --type-title: calc(1.25rem * var(--hero-base));
    --type-lead: calc(1.125rem * var(--hero-base));
    --type-label: calc(1rem * var(--hero-base));
    --type-body: calc(0.875rem * var(--hero-base));
    --type-eyebrow: calc(0.75rem * var(--hero-base));
  }
  [data-hero] [data-hero-panels] { width: calc(13.625rem * var(--hero-base, 1)); }
  [data-hero] [data-hero-stats] { width: calc(10.75rem * var(--hero-base, 1)); }
  [data-hero] [data-hero-map] { height: calc(3.125rem * var(--hero-base, 1)); width: calc(4.875rem * var(--hero-base, 1)); }
  [data-season] {
    --season-base: calc(1920 / 1440);
    --type-display-sm: calc(3.4375rem * var(--season-base));
    --type-lead: calc(1.125rem * var(--season-base));
    --type-body: calc(0.875rem * var(--season-base));
    --type-eyebrow: calc(0.75rem * var(--season-base));
  }
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--background); color: var(--foreground);
  min-height: 100lvh; font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, dt, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- the text engine's containers ---- */
.rv { display: flex; flex-wrap: wrap; column-gap: 0.3em; }
.rv > span { display: inline-block; will-change: transform, opacity; }

/* ---- the asset-failure banner ---- */
#asset-error {
  position: fixed; inset-inline: 0; top: 0; z-index: 120;
  display: none; flex-direction: column; gap: 2px;
  background: var(--raw-color-orange-500); color: #fff;
  font-family: var(--font-sans); font-size: 12px; line-height: 1.3;
  padding: 10px 14px; text-transform: uppercase; letter-spacing: -0.02em;
}
#asset-error.on { display: flex; }

/* ============================================================
   THE STICKY STACK
   ============================================================ */
.stack { position: relative; background: var(--surface-black); }
.pin { position: sticky; top: 0; }
.pin--hero { z-index: 0; }
.pin--season { z-index: 10; }
.pin__inner { transform-origin: center; }
.pin__shade {
  position: absolute; inset: 0; background: var(--surface-black);
  opacity: 0; pointer-events: none; z-index: 40;
}
.stack__last { position: relative; z-index: 20; }

/* ============================================================
   1 — THE HERO
   ============================================================ */
[data-hero] {
  position: relative; isolation: isolate; min-height: 100lvh;
  overflow: hidden; background: var(--background);
}
.hero__canvas {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  transform: translateZ(0); backface-visibility: hidden; will-change: transform;
}
.hero__canvas canvas { width: 100%; height: 100%; display: block; }
.hero__fallback { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: none; }
.hero__fallback.on { display: block; }
.hero__fallback .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__fallback .sub { position: absolute; left: 50%; bottom: 0; height: 92%; width: auto; transform: translateX(-50%); }

/* the fit box the layout owns below xl */
.hero__figbox { position: absolute; inset: 0; margin: 0 -1.5rem; pointer-events: none; }
.hero__fit { position: absolute; left: 0; right: 0; bottom: 0; height: calc(100% - 4rem); }
@media (min-width: 768px) { .hero__fit { height: calc(100% - 2rem); } }
@media (max-width: 1023px) {
  .hero__figbox { top: 30%; }
  .hero__fit { height: 100%; }
}
@media (max-width: 639px) { .hero__figbox { top: 36%; } }
@media (min-width: 1280px) { .hero__figbox { display: none; } }

/* the copy ramp, below xl */
.hero__ramp {
  position: absolute; inset-inline: 0; bottom: 0; height: 22%; z-index: 10; pointer-events: none;
  background-image: linear-gradient(to bottom,
    color-mix(in srgb, var(--background) 0%, transparent) 0%,
    color-mix(in srgb, var(--background) 6%, transparent) 26%,
    color-mix(in srgb, var(--background) 20%, transparent) 46%,
    color-mix(in srgb, var(--background) 45%, transparent) 64%,
    color-mix(in srgb, var(--background) 74%, transparent) 80%,
    color-mix(in srgb, var(--background) 93%, transparent) 91%,
    var(--background) 100%);
}
.hero__ramp2 {
  position: absolute; inset-inline: 0; bottom: -13rem; height: 26rem; z-index: 10; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--background) 60%, var(--background));
}
@media (min-width: 768px) { .hero__ramp2 { display: none; } }
@media (min-width: 1280px) { .hero__ramp, .hero__ramp2 { display: none; } }

.hero__content {
  position: relative; z-index: 20; min-height: 100lvh;
  display: flex; flex-direction: column; padding: 1.5rem; gap: 2rem;
}
@media (min-width: 640px) { .hero__content { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 768px) { .hero__content { gap: 1.5rem; } }
@media (max-width: 1023px) { .hero__content { gap: 1rem; } }
@media (max-width: 639px) { .hero__content { gap: 0.5rem; } }
@media (max-height: 500px) {
  .hero__content { padding-top: 0.75rem; padding-bottom: 0.75rem; gap: 1rem; }
}

/* --- masthead --- */
.hero__header {
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 30;
}
.hero__logo img { height: 1.5rem; width: auto; }
.hero__nav { display: none; }
.hero__garage { display: none; }
@media (min-width: 1280px) {
  .hero__nav { display: block; position: absolute; left: 50%; transform: translateX(-50%); }
  .hero__garage { display: block; }
}
.hero__nav ul { display: flex; gap: 4rem; }
.navlink {
  font-size: var(--type-label); text-transform: uppercase; line-height: 0.9;
  color: var(--foreground); transition: color var(--duration-fast) var(--ease-entrance);
}
.navlink:hover { color: var(--accent); }
.hero__garage .navlink { font-weight: 700; }
.burger { display: block; padding: 0.5rem; margin-right: -0.5rem; }
@media (min-width: 1280px) { .burger { display: none; } }
.burger span { display: block; width: 1.5rem; height: 1px; background: var(--foreground); }
.burger span + span { margin-top: 0.3125rem; }

/* --- the middle --- */
.hero__mid { flex: 1; display: flex; flex-direction: column; min-height: 0; }
@media (min-width: 768px) {
  .hero__mid { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 2rem; }
}
@media (min-width: 1280px) {
  .hero__mid { align-items: center; justify-content: space-between; }
}

/* --- identity --- */
.hero__identity {
  order: 2; position: relative; max-width: 26.0625rem;
  display: flex; flex-direction: column; gap: 6.0625rem;
}
@media (max-width: 1279px) { .hero__identity { gap: 1rem; } }
.hero__id {
  font-size: var(--type-label); text-transform: uppercase; line-height: 0.9;
  color: var(--foreground-muted); margin-bottom: 1rem;
}
@media (max-height: 500px) { .hero__id { margin-bottom: 0.25rem; } }
@media (min-width: 1280px) {
  .hero__id { position: absolute; left: 20.0625rem; top: 0.5625rem; margin-bottom: 0; }
}
.hero__name {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  line-height: 0.95; font-size: var(--type-display-lg);
  max-width: 6em; justify-content: flex-start; text-align: left;
}
@media (max-height: 500px) { .hero__name { font-size: var(--type-heading); } }
@media (min-width: 768px) { .hero__name { font-size: var(--type-impact); } }
@media (min-width: 1024px) { .hero__name { font-size: var(--type-display-lg); } }
@media (min-width: 1280px) { .hero__name { font-size: var(--type-impact); } }
.hero__meta { display: flex; flex-direction: column; gap: 1rem; }
@media (max-height: 500px) { .hero__meta { gap: 0.25rem; } }
.hero__meta li { display: flex; align-items: center; gap: 0.5rem; }
.hero__meta li > span {
  font-size: var(--type-lead); text-transform: uppercase; line-height: 0.9;
}
.hero__meta img { flex: none; }

/* --- panels --- */
[data-hero-panels] { order: 3; display: flex; flex-direction: column; gap: 2rem; }
@media (max-width: 639px) { [data-hero-panels] { display: none; } }
@media (min-width: 768px) { [data-hero-panels] { width: 13.625rem; } }
.bracket-panel { position: relative; padding: 1rem; color: var(--foreground); }
@media (min-width: 640px) { .bracket-panel { padding: 1rem 1.375rem 1.1875rem; } }
.bracket-panel > .bk { position: absolute; width: 0.625rem; height: 0.625rem; }
.bk--tr { top: 0; right: 0; }
.bk--tl { top: 0; left: 0; transform: scaleX(-1); }
.bk--bl { bottom: 0; left: 0; transform: scale(-1); }
.bk--br { bottom: 0; right: 0; transform: scaleY(-1); }
.eyebrow {
  font-size: var(--type-eyebrow); font-weight: 500; text-transform: uppercase;
  line-height: 0.9; letter-spacing: -0.02em; color: var(--accent);
}
.hero__race { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
@media (min-width: 768px) { .hero__race { display: block; } }
.hero__race dl {
  font-size: var(--type-body); text-transform: uppercase; line-height: 0.9;
  display: flex; flex-direction: column; gap: 0.375rem; margin-top: 1rem;
}
.hero__race dt { font-weight: 700; }
[data-hero-map] { width: 3.125rem; height: 4.875rem; object-fit: contain; object-position: left; flex: none; }
@media (min-width: 768px) {
  [data-hero-map] { margin-top: 1.75rem; width: 4.375rem; height: 6.25rem; object-position: right; margin-left: auto; }
}
[data-hero-stats] { margin-top: 1.5rem; display: flex; justify-content: space-between; width: 10.75rem; }
@media (min-width: 768px) {
  [data-hero-stats] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; width: auto; }
}
[data-hero-stats] > div { text-align: center; }
@media (min-width: 768px) { [data-hero-stats] > div { text-align: left; } }
[data-hero-stats] dt {
  font-size: var(--type-eyebrow); text-transform: uppercase;
  letter-spacing: -0.04em; white-space: nowrap;
}
[data-hero-stats] dd {
  font-family: var(--font-display); font-weight: 500; font-size: var(--type-heading);
  line-height: 0.72; letter-spacing: -0.08em; margin-top: .35em;
}
[data-hero-stats] .rv { justify-content: center; }
@media (min-width: 768px) { [data-hero-stats] .rv { justify-content: flex-start; } }

/* --- actions --- */
.hero__actions { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) {
  .hero__actions {
    margin-top: 0; display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: end; gap: 2rem;
  }
}
.hero__trailer { display: none; }
@media (min-width: 640px) { .hero__trailer { display: flex; align-items: center; } }
.hero__trailer img { width: 2rem; height: 2rem; flex: none; }
.hero__trailer .lines {
  display: flex; flex-direction: column; gap: 0.375rem; margin-left: 0.375rem;
  font-size: var(--type-body); text-transform: uppercase; line-height: 0.9;
}
.hero__trailer .lines b { font-weight: 500; transition: color var(--duration-normal) var(--ease-entrance); }
.hero__trailer:hover .lines b { color: var(--accent); }
.hero__trailer .lines i { font-style: normal; color: var(--foreground-muted); }
.hero__social { display: none; }
@media (min-width: 640px) {
  .hero__social {
    display: flex; justify-content: flex-end; gap: 2rem;
    font-size: var(--type-body); text-transform: uppercase; line-height: 0.9;
  }
}
@media (min-width: 1280px) { .hero__social { gap: 3.6875rem; } }
.hero__social a { transition: color var(--duration-fast) var(--ease-entrance); }
.hero__social a:hover { color: var(--accent); }

/* --- the profile CTA --- */
.cta {
  position: relative; display: flex; align-items: center; justify-content: center;
  font-size: var(--type-title); width: 100%; height: 3.5rem; gap: 1.6em;
}
@media (min-width: 640px) { .cta { height: 2.5em; width: 11em; } }
.cta__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.cta__flood { transform-origin: left; transform: scaleX(0); transition: transform var(--duration-normal) var(--ease-plate); }
.cta:hover .cta__flood { transform: scaleX(1); }
.cta__label {
  position: relative; text-transform: uppercase; line-height: 0.9; color: var(--accent);
  transition: color var(--duration-normal) var(--ease-entrance);
}
.cta__arrow {
  position: relative; width: 0.65em; height: 0.5em; flex: none;
  transition: transform var(--duration-fast) var(--ease-entrance);
}
.cta__arrow path { stroke: var(--accent); transition: stroke var(--duration-normal) var(--ease-entrance); }
.cta:hover .cta__label { color: var(--surface-black); }
.cta:hover .cta__arrow { transform: translateX(0.25rem); }
.cta:hover .cta__arrow path { stroke: var(--surface-black); }

/* ============================================================
   THE LOADING VEIL
   ============================================================ */
.veil {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column;
  align-items: center; justify-content: center; background: var(--background);
}
.veil__inner { display: flex; flex-direction: column; align-items: center; }
.veil__helmet {
  position: relative; width: 7.2rem; height: 8.5rem;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.veil__shell { position: absolute; inset: 0; background: var(--foreground); opacity: 0.12; }
.veil__fill { position: absolute; inset: 0; background: var(--foreground); transform-origin: top; transform: scaleY(0); }
.veil__name {
  margin-top: 1.75rem; font-size: var(--type-lead); text-transform: uppercase;
  line-height: 0.9; letter-spacing: 0.18em;
}
.veil__meter { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--border-muted); }
.veil__meter i { display: block; height: 100%; background: var(--foreground); transform-origin: left; transform: scaleX(0); }

/* ============================================================
   THE MENU SHEET
   ============================================================ */
.sheet {
  position: fixed; inset: 0; z-index: 50; background: var(--background);
  padding: 1.5rem 2rem; display: flex; flex-direction: column; opacity: 0;
}
.sheet__top { display: flex; align-items: center; justify-content: space-between; }
.sheet__top img { height: 1.5rem; width: auto; }
.sheet__close { position: relative; width: 1.5rem; height: 1.5rem; }
.sheet__close span {
  position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: var(--foreground);
}
.sheet__close span:first-child { transform: rotate(45deg); }
.sheet__close span:last-child { transform: rotate(-45deg); }
.sheet nav { flex: 1; display: flex; align-items: center; }
.sheet ul { display: flex; flex-direction: column; gap: 1rem; width: 100%; }
@media (min-width: 640px) { .sheet ul { gap: 1.5rem; } }
.sheet a {
  display: inline-block;
  font-family: var(--font-display); font-weight: 700; font-size: var(--type-heading);
  text-transform: uppercase; line-height: 0.95;
  transition: color var(--duration-fast) var(--ease-entrance);
}
@media (min-width: 640px) { .sheet a { font-size: var(--type-display); } }
.sheet a:hover { color: var(--accent); }
html.locked { position: relative; overflow: hidden; height: 100%; }

/* ============================================================
   2 — THE SEASON SO FAR
   ============================================================ */
[data-season] {
  container-type: inline-size; position: relative; isolation: isolate;
  min-height: var(--season-h, 100lvh); overflow: hidden;
  background: var(--surface-black); color: var(--foreground-on-dark);
  --season-gutter: max(2.2222cqw, var(--gutter-min, 0px));
}
@media (max-width: 1023px) {
  [data-season] {
    --gutter-min: 32px; --type-min: 13px; --copy-min-size: 17px; --copy-min-w: 15rem;
    --head-min: 6.6667cqw; --plate-w: 277px; --plate-h: 78px; --plate-cell: 83px;
    --plate-badge-gap: 11px; --plate-globe-w: 37px; --plate-globe-h: 23px;
    --plate-stats-left: 16px; --plate-stats-gap: 8px; --plate-eyebrow: 12px; --plate-body: 14px;
  }
}
@media (max-width: 639px) {
  [data-season] { --head-min: 40px; --head-air: 20px; --season-h: 680px; }
}

.circuit { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
@media (min-width: 1024px) {
  .circuit {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
  }
}
.circuit__stage { position: absolute; left: 0; top: 0; width: 1440px; height: 800px; transform-origin: top left; }
.circuit__map { position: absolute; left: 0; top: -4.559px; width: 1438.43px; height: 809.1101px; }
.circuit__map canvas, .circuit__map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.circuit__trace { position: absolute; left: 0; top: 0; width: 1440px; height: 800px; }

.flagband {
  position: absolute; inset-inline: 0; top: 0; height: 34svh;
  pointer-events: none; z-index: 10;
}
@media (max-width: 639px) { .flagband { z-index: 0; } }

.season__copy {
  position: relative; z-index: 20; min-height: var(--season-h, 100lvh);
  display: flex; flex-direction: column; justify-content: space-between; gap: 4rem;
  padding: 4.8611cqw 1.5rem 2rem;
}
@media (min-width: 640px) {
  .season__copy {
    padding-left: var(--season-gutter); padding-right: var(--season-gutter);
    padding-bottom: var(--season-gutter);
  }
}
.season__head {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  line-height: 0.95; color: var(--accent);
  font-size: max(3.8194cqw, var(--head-min, 0px));
}
.season__head .rv { justify-content: flex-start; }
.season__rule {
  width: 1.6667cqw; height: 0.1389cqw; background: var(--accent);
  margin-top: max(1.9444cqw, var(--head-air, 0px)); transform-origin: left; transform: scaleX(0);
}
.season__intro {
  text-transform: uppercase; line-height: 1.1;
  margin-top: max(2.0833cqw, var(--head-air, 0px));
  width: max(16.1111cqw, var(--copy-min-w, 0px));
  font-size: max(1.25cqw, var(--copy-min-size, 0px));
}
.season__intro .rv { column-gap: 0.22em; }

.plate {
  align-self: flex-end; position: relative;
  width: var(--plate-w, 19.2361cqw); height: var(--plate-h, 5.4167cqw);
  display: grid; grid-template-columns: var(--plate-cell, 5.7639cqw) 1fr;
}
.plate__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.plate__badge {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--plate-badge-gap, 0.7639cqw);
}
.plate__globe { width: var(--plate-globe-w, 2.5694cqw); height: var(--plate-globe-h, 1.5972cqw); }
.plate__wordmark {
  display: flex; align-items: baseline; gap: 0.3em;
  font-size: var(--plate-eyebrow, max(0.8333cqw, var(--type-min, 0px)));
  text-transform: uppercase; line-height: 0.72; letter-spacing: -0.02em;
}
.plate__wordmark .rv { column-gap: 0; }
.plate__wordmark .b { color: var(--foreground-on-dark); }
.plate__wordmark .a { color: var(--accent); }
.plate__stats {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  padding-left: var(--plate-stats-left, 1.1111cqw); gap: var(--plate-stats-gap, 0.5556cqw);
  text-transform: uppercase; line-height: 0.72;
  font-size: var(--plate-body, max(0.9722cqw, var(--type-min, 0px)));
}
.plate__row { display: flex; align-items: baseline; gap: 0.35em; }
.plate__row dt { color: var(--accent); }
.plate__row dd { color: var(--foreground-on-dark); flex: 1; white-space: nowrap; }
.plate__row .rv { column-gap: 0; flex-wrap: nowrap; }

/* ============================================================
   3 — FROM KARTS TO F1 (the timeline)
   ============================================================ */
.timeline {
  container-type: inline-size; position: relative; isolation: isolate; width: 100%;
  background: var(--surface-black); color: var(--foreground-on-dark);
  --gutter: max(2.2222cqw, var(--gutter-min, 0px));
  --bottom-pad: 10.4167cqw;
  --top-pad: 11.7361cqw;
  --rail-top: 0px;
  padding-bottom: var(--bottom-pad);
}
@media (max-width: 1023px) {
  .timeline {
    overflow-x: clip;
    --copy-min-size: 17px; --head-min: 6.6667cqw; --head-w-min: 82cqw;
    --year-min: 30px; --copy-min-w: 200px;
    --bottom-pad: 5cqw;
    --rail-top: calc(11.7361cqw + var(--top-pad-extra, 0px));
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .timeline { --top-pad-extra: 16cqw; --head-top: var(--bottom-pad); }
}
@media (max-width: 639px) {
  .timeline {
    --head-min: 40px; --top-pad-extra: 15cqw; --copy-min-w: 320px; --gutter-min: 24px;
  }
}
@media (min-width: 640px) { .timeline { --copy-max-w: 26.9444cqw; } }

.timeline__wrap {
  position: relative; width: 100%;
  padding-top: calc(var(--top-pad) + var(--top-pad-extra, 0px));
}
@media (max-width: 639px) {
  .timeline__wrap {
    display: flex; flex-direction: column; gap: 2.5rem;
    padding-left: var(--gutter); padding-right: var(--gutter);
  }
}
.timeline__head {
  position: absolute; z-index: 20;
  top: var(--head-top, var(--gutter)); right: var(--gutter);
  width: max(20.3472cqw, var(--head-w-min, 0px));
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  line-height: 0.95; color: var(--accent);
  font-size: max(3.8194cqw, var(--head-min, 0px));
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.timeline__head .rv { justify-content: center; }
@media (min-width: 1024px) {
  .timeline__head { align-items: flex-end; text-align: right; }
  .timeline__head .rv { justify-content: flex-end; }
}
@media (max-width: 639px) {
  .timeline__head {
    left: var(--gutter); right: auto; align-items: flex-start; text-align: left;
    flex-direction: row; gap: 0.28em; width: auto;
  }
  .timeline__head .rv { justify-content: flex-start; }
}
.timeline__rail {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  z-index: 10; width: 1.1111cqw; top: var(--rail-top);
}
@media (max-width: 639px) { .timeline__rail { display: none; } }
.timeline__rail svg { width: 100%; height: 100%; overflow: visible; }

.trow { position: relative; width: 100%; }
@media (max-width: 639px) {
  .trow { display: flex; flex-direction: column; gap: 0.75rem; height: auto !important; }
}
.trow__plate { position: absolute; top: 0; bottom: 0; }
@media (max-width: 639px) {
  .trow__plate { position: relative; top: auto; bottom: auto; width: 82% !important; aspect-ratio: 710/462; left: auto !important; right: auto !important; transform: none !important; }
  .trow--even .trow__plate { margin-right: auto; }
  .trow--odd .trow__plate { margin-left: auto; }
}
.plateshape { position: absolute; inset: 0; }
.plateshape__fill {
  position: absolute; inset: 0; overflow: hidden; background: var(--timeline-fill);
  transition: inset 700ms cubic-bezier(0.33, 0, 0, 1);
  -webkit-clip-path: var(--plate-clip); clip-path: var(--plate-clip);
}
@media (hover: hover) { .plateshape:hover .plateshape__fill { inset: 5%; } }
.plateshape__slot { position: absolute; inset: 0; }
.plateshape__slot img { position: absolute; inset-inline: 0; top: 0; width: 100%; height: 110%; object-fit: cover; object-position: top; }
.plateshape__outline { position: absolute; inset: 0; width: 100%; height: 100%; }
.trow__year {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 20; pointer-events: none;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  line-height: 0.95; color: var(--accent);
  font-size: max(2.5cqw, var(--year-min, 0px));
}
@media (max-width: 639px) {
  .trow__year {
    position: relative; left: auto; top: -28.8cqw; transform: none;
    height: 0; width: 82%; text-align: center;
  }
  .trow__year .rv { justify-content: center; }
  .trow--odd .trow__year { margin-left: auto; }
}
.trow__copy {
  position: absolute; left: 70.8333cqw; top: 50%; transform: translateY(-50%);
  z-index: 20; pointer-events: none;
  text-transform: uppercase; line-height: 1.1; color: var(--foreground-on-dark);
  width: min(max(var(--copy-w), var(--copy-min-w, 0px)), var(--copy-max-w, 100vw));
  font-size: max(1.25cqw, var(--copy-min-size, 0px));
}
.trow__copy b { font-weight: 700; }
@media (max-width: 639px) {
  .trow__copy { position: relative; left: auto; top: auto; transform: none; width: 100%; }
}
.timeline--dim .trow { transition: opacity 700ms cubic-bezier(0.33, 0, 0, 1); }
@media (hover: hover) {
  .timeline--dim .trow { opacity: 0.3; }
  .timeline--dim .trow.is-hover { opacity: 1; }
}

/* ============================================================
   4 — FROM THE PADDOCK
   ============================================================ */
.paddock {
  container-type: inline-size; position: relative; isolation: isolate;
  min-height: var(--block-h, 100lvh); width: 100%; overflow: hidden;
  background: var(--background); color: var(--foreground);
  --panel-u: calc(100cqw / 1440);
  --cta-h: 3.4722cqw;
}
@media (min-width: 640px) and (max-width: 1023px) {
  .paddock {
    --type-min: 13px; --copy-min-size: 17px; --stats-row-min: 42px;
    --fig-cap: 118.75cqw; --fig-x-override: 65.7%; --cta-h: 50px;
    --band-scale: 1.75; --cal-spread: 1.75; --cal-mark-drop: 8cqw; --cal-card-drop: 1.3cqw;
    --panel-u: 1px; --stats-rule-top: 16px; --stats-rule-bottom: 11px;
    --stats-frame-drop: 0px; --stats-drop: 2.86cqw; --stats-col-w: 170px; --intro-min-w: 280px;
    --stats-left: calc(2.2222cqw + 13px);
    --stats-frame-left: 2.2222cqw;
    --stats-frame-right: calc(2.2222cqw + 195px);
    --stats-stretch: calc(var(--panel-u) * -62);
    --meet-frame-left: calc(100% - 2.2222cqw - 131px);
    --meet-frame-right: calc(100% - 2.2222cqw);
    --meet-frame-top: 2.8646cqw;
    --meet-frame-bottom: calc(2.8646cqw + 73px);
    --meet-left: calc(100% - 2.2222cqw - 118px);
    --meet-top: calc(2.8646cqw + 11px);
    --bracket-drop: 1.7cqw; --bracket-stretch: 5.9cqw;
  }
}
@media (max-width: 1023px) { .paddock { --head-min: 6.6667cqw; } }
@media (max-width: 639px) {
  .paddock {
    --block-h: 1062px; --intro-bottom: 139px;
    --head-left: 24px; --intro-left: 24px; --meet-frame-left: 24px; --stats-frame-left: 24px;
    --head-top: 24px; --intro-min-w: 320px; --intro-gap: 24px; --band-fade: 60px;
    --cta-h: 50px; --panel-u: 1px; --meet-left: 37px; --meet-top: 121px;
    --meet-frame-top: 110px; --meet-frame-bottom: 183px; --meet-frame-right: 155px;
    --stats-left: 37px; --stats-frame-right: 369px; --stats-col-w: 320px; --stats-drop: 63px;
    --fig-cap: 599px; --fig-x-override: 48.5%; --fig-lift: 328px;
    --band-scale: 8.48; --cal-card-w: 100%; --head-min: 40px; --type-min: 13px;
    --copy-min-size: 17px;
  }
}
.paddock__contours { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.paddock__contours canvas { width: 100%; height: 100%; }
.paddock__band {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 1;
  height: calc(11.7361cqw * var(--band-scale, 1)); background: var(--surface-black);
}
.paddock__figwrap { position: absolute; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; }
.paddock__figlayer { position: absolute; left: 0; right: 0; top: 0; height: 100%; }
.paddock__portrait {
  position: absolute; bottom: var(--fig-lift, 0px); left: var(--fig-x-override, 65.6917%);
  transform: translateX(-50%);
  height: min(calc(102.0363% * var(--fig-fit, 1)), var(--fig-cap, 100000px));
  width: auto; aspect-ratio: 1.15881; object-fit: cover; user-select: none; max-width: none;
}
.paddock__melt {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 10; pointer-events: none;
  height: calc(11.7361cqw * var(--band-scale, 1));
  background: linear-gradient(to bottom, rgb(9 10 11 / 0) 0%, var(--surface-black) var(--band-fade, 38.685%));
}
.paddock__head {
  position: absolute; z-index: 20;
  left: var(--head-left, 2.2222cqw); top: var(--head-top, 2.2222cqw);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  line-height: 0.95; color: var(--foreground);
  font-size: max(max(6.6667cqw, var(--type-min, 0px)), var(--head-min, 0px));
}
.paddock__head .rv { justify-content: flex-start; }
.paddock__introcol {
  position: absolute; z-index: 20;
  left: var(--intro-left, 2.2222cqw);
  bottom: var(--intro-bottom, calc(11.7361cqw * var(--band-scale, 1) + 2.2222cqw));
  width: max(23.4722cqw, var(--intro-min-w, 0px));
  display: flex; flex-direction: column; gap: var(--intro-gap, 2.7778cqw);
}
.paddock__report {
  text-transform: uppercase; line-height: 1.1;
  font-size: max(1.25cqw, var(--copy-min-size, 0px));
}
.paddock__report .rv { column-gap: 0.22em; }
@media (max-width: 639px) { .paddock__report { color: var(--foreground-on-dark); } }

.slabcta {
  position: relative; display: block;
  height: var(--cta-h); width: calc(var(--cta-h) * 4.34);
}
.slabcta__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.slabcta__label {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center;
  left: calc(var(--cta-h) * 24 / 50); gap: calc(var(--cta-h) * 32 / 50);
  font-size: calc(var(--cta-h) * 20 / 50);
  text-transform: uppercase; line-height: 0.9; color: var(--accent);
  transition: color var(--duration-normal) var(--ease-entrance);
}
.slabcta__arrow {
  width: calc(var(--cta-h) * 13.71 / 50); height: calc(var(--cta-h) * 10.71 / 50); flex: none;
  transition: transform var(--duration-fast) var(--ease-entrance);
}
.slabcta__arrow path { stroke: var(--accent); transition: stroke var(--duration-normal) var(--ease-entrance); }
.slabcta:hover .slabcta__label { color: var(--surface-black); }
.slabcta:hover .slabcta__arrow { transform: translateX(0.25rem); }
.slabcta:hover .slabcta__arrow path { stroke: var(--surface-black); }

/* --- the two right-hand panels --- */
.pnl { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
@media (max-width: 639px) { .pnl { display: none; } }
.pbk {
  position: absolute; width: calc(var(--panel-u) * 10); height: calc(var(--panel-u) * 10);
  transition: left 700ms var(--ease-plate), top 700ms var(--ease-plate);
}
.pcol {
  position: absolute; z-index: 20; display: flex; flex-direction: column;
  text-transform: uppercase; line-height: 0.9;
}
@media (max-width: 639px) { .pcol { display: none; } }
.pmeet { gap: calc(var(--panel-u) * 6); font-size: calc(var(--panel-u) * 14); }
.pmeet b { font-weight: 700; }
.pstats > .pstatrow { display: flex; align-items: flex-end; gap: calc(var(--panel-u) * 24); height: calc(var(--panel-u) * 58); }
.pstats img { width: calc(var(--panel-u) * 31); height: auto; flex: none; }
.pstats .lab {
  font-size: calc(var(--panel-u) * 12); text-transform: uppercase;
  letter-spacing: calc(var(--panel-u) * -0.48); color: var(--foreground-muted);
}
.pstats .fig {
  font-family: var(--font-display); font-weight: 500; font-size: calc(var(--panel-u) * 38);
  line-height: 0.72; letter-spacing: calc(var(--panel-u) * -3.04); margin-top: .3em;
}
.pstats hr {
  border: 0; height: 1px; background: var(--foreground-muted);
  margin: var(--stats-rule-top, calc(var(--panel-u) * 24)) 0 var(--stats-rule-bottom, calc(var(--panel-u) * 23));
  transform-origin: left; transform: scaleX(0);
}

/* --- the calendar strip --- */
.cal {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 20;
  height: calc(11.7361cqw * var(--band-scale, 1));
}
.cal__link { position: absolute; height: 1px; transform-origin: left; transform: scaleX(0); }
.cal__card {
  position: absolute; display: flex; flex-direction: column; align-items: center;
  text-align: center; text-transform: uppercase; gap: max(0.8333cqw, var(--type-min, 0px));
}
.cal__round { font-size: max(0.8333cqw, var(--type-min, 0px)); letter-spacing: -0.0167cqw; color: var(--foreground-on-dark-muted); }
.cal__name {
  font-family: var(--font-display); font-weight: 700; line-height: 0.95;
  color: var(--foreground-on-dark);
  font-size: max(max(1.25cqw, var(--type-min, 0px)), var(--copy-min-size, 0px));
}
.cal__date { font-size: max(0.9722cqw, var(--type-min, 0px)); letter-spacing: -0.0194cqw; color: var(--foreground-on-dark-muted); }
.cal__card.is-live .cal__round, .cal__card.is-live .cal__date { color: var(--accent); }
.cal__card .rv { justify-content: center; flex-wrap: nowrap; }
.cal__mark { position: absolute; display: flex; align-items: center; justify-content: center; }
.cal__mark .res {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: max(0.8333cqw, var(--type-min, 0px)); color: var(--foreground-on-dark);
}
.cal__bracket { position: absolute; inset: 0; pointer-events: none; }
@media (max-width: 639px) {
  .cal__link, .cal__mark, .cal__bracket { display: none; }
  .cal {
    display: grid; grid-template-columns: repeat(3, 1fr);
    column-gap: 0.75rem; row-gap: 1.25rem; padding: 1.5rem 4%;
    align-content: start; border-top: 1px solid rgb(255 255 255 / 0.15);
    height: calc(11.7361cqw * var(--band-scale, 1));
  }
  .cal__card { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; }
  .cal__card--hide { display: none; }
}

/* ============================================================
   5 — KEEP PUSHING FORWARD (the footer)
   ============================================================ */
.foot {
  container-type: inline-size; position: relative; isolation: isolate;
  min-height: var(--foot-h, 100lvh); width: 100%; overflow: hidden;
  background: var(--accent);
  --cta-h: 3.4722cqw;
}
@media (max-width: 1023px) {
  .foot {
    --type-min: 13px; --foot-bottom-min: 5cqw; --head-min: 6.6667cqw;
    --head-w-min: 44cqw; --foot-head-min: 6.6667cqw;
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .foot {
    --foot-h: 104cqw; --fig-scale: 0.87; --fig-shift: 3%;
    --logo-w: 106px; --logo-h: 24px; --nav-size: 36px; --nav-gap: 12px; --nav-row: 34px;
    --cta-left: 50%; --cta-shift: -50%; --foot-copy-min: 200px; --cta-h: 50px;
  }
}
@media (max-width: 639px) {
  .foot {
    --foot-gutter: 24px; --foot-h: 680px; --nav-mid: 282px; --cta-bottom: 73px;
    --social-bottom: 151px; --social-left: 24px; --social-right: auto; --social-min-w: auto;
    --logo-w: 106px; --logo-h: 24px; --nav-size: 30px; --nav-gap: 18px; --nav-row: auto;
    --nav-w: calc(100cqw - 48px); --cta-left: 24px; --cta-w: calc(100cqw - 48px);
    --foot-head-left: 24px; --foot-head-right: auto; --foot-head-top: 78px;
    --cta-h: 50px; --foot-copy-min: 212px; --foot-head-min: 40px; --head-w-min: 240px;
  }
}
.foot__panel {
  position: absolute; inset: 1.1111cqw; overflow: hidden;
  background: var(--surface-black); color: var(--foreground-on-dark);
}
.foot__panel canvas { width: 100%; height: 100%; }
.foot__figgroup {
  position: absolute; inset: 0; z-index: 10; pointer-events: none;
  transform-origin: bottom; scale: var(--fig-scale, 1); translate: var(--fig-shift, 0);
}
@media (max-width: 639px) { .foot__figgroup { display: none; } }
.foot__figlayer { position: absolute; left: 0; right: 0; top: 0; height: 100%; }
.foot__body {
  position: absolute; z-index: 10; left: 50%; bottom: -1.225%;
  height: 96.078%; aspect-ratio: 1.15902; transform: translateX(-50%);
  object-fit: cover; width: auto; max-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 69%, black 72%);
  mask-image: linear-gradient(to bottom, transparent 69%, black 72%);
}
.foot__helmet {
  position: absolute; z-index: 11; left: 50%; top: 1.25%;
  height: 83.364%; aspect-ratio: 1.5; transform: translateX(-50%);
  width: auto; max-width: none; object-fit: contain;
}
.foot__logo {
  position: absolute; z-index: 20; left: var(--foot-gutter, 2.2222cqw); top: var(--foot-gutter, 2.2222cqw);
  width: var(--logo-w, 7.3611cqw); height: var(--logo-h, 1.6667cqw);
  background: var(--accent);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.foot__head {
  position: absolute; z-index: 20;
  top: var(--foot-head-top, var(--foot-gutter, 2.2222cqw));
  right: var(--foot-head-right, var(--foot-gutter, 2.2222cqw));
  left: var(--foot-head-left, auto);
  width: max(25.6944cqw, var(--head-w-min, 0px));
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  line-height: 0.95; color: var(--accent);
  display: flex; flex-direction: column; align-items: flex-end; text-align: right;
  font-size: max(3.8194cqw, var(--foot-head-min, 0px));
}
.foot__head .rv { justify-content: flex-end; }
@media (max-width: 639px) {
  .foot__head { align-items: flex-start; text-align: left; }
  .foot__head .rv { justify-content: flex-start; }
}
.foot__nav {
  position: absolute; z-index: 20; left: 0; margin-left: var(--foot-gutter, 2.2222cqw);
  top: var(--nav-mid, 50%); transform: translateY(-50%);
  width: var(--nav-w, 10.9722cqw);
  display: flex; flex-direction: column;
  gap: var(--nav-gap, max(0.8333cqw, var(--type-min, 0px)));
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  line-height: 0.95; color: var(--foreground-on-dark);
  font-size: var(--nav-size, max(2.5cqw, var(--type-min, 0px)));
}
.foot__nav a {
  display: block; width: max-content; height: var(--nav-row, max(2.3611cqw, var(--type-min, 0px)));
  transition: color var(--duration-fast) var(--ease-entrance);
}
.foot__nav a:hover { color: var(--accent); }
.foot__nav .rv { column-gap: 0.2em; flex-wrap: nowrap; }
@media (max-width: 639px) {
  .foot__nav li { border-bottom: 1px solid rgb(255 255 255 / 0.15); padding-bottom: 0.5rem; }
  .foot__nav a { width: 100%; display: flex; align-items: center; justify-content: space-between; }
  .foot__nav .arw { color: var(--accent); }
}
.foot__nav .arw { display: none; }
@media (max-width: 639px) { .foot__nav .arw { display: inline; } }
.foot__copy {
  position: absolute; z-index: 20; left: var(--foot-gutter, 2.2222cqw);
  bottom: max(2.2222cqw, var(--foot-bottom-min, 0px));
  width: max(max(15.2778cqw, var(--type-min, 0px)), var(--foot-copy-min, 0px));
  font-size: max(0.9722cqw, var(--type-min, 0px));
  text-transform: uppercase; line-height: 1.1; color: var(--foreground-on-dark-faint);
}
.foot__cta {
  position: absolute; z-index: 20; left: var(--cta-left, 40.4861cqw);
  bottom: var(--cta-bottom, max(2.2222cqw, var(--foot-bottom-min, 0px)));
  transform: translateX(var(--cta-shift, 0));
  height: var(--cta-h); width: var(--cta-w, calc(var(--cta-h) * 5.5));
}
.foot__social {
  position: absolute; z-index: 20; right: var(--social-right, var(--foot-gutter, 2.2222cqw));
  left: var(--social-left, auto);
  bottom: var(--social-bottom, max(2.2222cqw, var(--foot-bottom-min, 0px)));
  width: max(max(14.3056cqw, var(--type-min, 0px)), var(--social-min-w, 0px));
  display: flex; justify-content: space-between; gap: 2rem;
  font-size: max(0.9722cqw, var(--type-min, 0px));
  text-transform: uppercase; line-height: 0.9; color: var(--foreground-on-dark);
}
.foot__social a { transition: color var(--duration-fast) var(--ease-entrance); }
.foot__social a:hover { color: var(--accent); }