*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 64px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --black: #0a0a0a;
  --panel: #101110;
  --panel-2: #161816;
  --off: #f2f2ef;
  --volt: #d6ff3f;
  --dim: rgba(242, 242, 239, 0.56);
  --dimmer: rgba(242, 242, 239, 0.36);
  --hair: rgba(242, 242, 239, 0.13);
  --hair-soft: rgba(242, 242, 239, 0.07);
}

body {
  background: var(--black);
  color: var(--off);
  font-family: 'Space Grotesk', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.micro {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}
:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }

/* ---------- top bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 15px 28px;
  background: rgba(10, 10, 10, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair);
}
.mark { white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 10px; font-family: 'Anton', sans-serif; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; }
.mark i { width: 9px; height: 9px; background: var(--volt); display: block; flex: none; }
.bar nav { display: flex; gap: 22px; }
.bar nav a { text-decoration: none; transition: color 150ms ease-out; }
.bar nav a:hover, .bar nav a[aria-current] { color: var(--volt); }
.bar-mail { text-decoration: none; transition: color 150ms ease-out; }
.bar-mail:hover { color: var(--volt); }
.bar-right { display: flex; align-items: center; gap: 18px; }
.lang-sw { display: flex; align-items: center; gap: 4px; }
.lang-btn { background: none; border: none; cursor: pointer; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.12em; color: var(--dimmer); padding: 3px 2px; transition: color 150ms; }
.lang-btn:hover { color: var(--off); }
.lang-btn.lang-on { color: var(--volt); }
.lang-div { color: var(--hair); font-size: 11px; }

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: calc(100svh - 58px);
  border-bottom: 1px solid var(--hair);
}
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between;
  padding: 11px 28px;
  border-bottom: 1px solid var(--hair-soft);
}
.hero-main { display: grid; grid-template-columns: 1.1fr 0.9fr; min-height: 0; }
.hero-copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px 40px 40px 28px;
  border-right: 1px solid var(--hair-soft);
}
.title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(48px, 7.4vw, 108px);
  line-height: 0.82;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.title .out { color: transparent; -webkit-text-stroke: 1.5px rgba(242, 242, 239, 0.52); }
.hero-tag { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.hero-tag i { width: 26px; height: 3px; background: var(--volt); display: block; flex: none; }
.hero-lede { max-width: 44ch; margin-top: 20px; font-size: 15.5px; line-height: 1.64; color: var(--dim); }

/* next race card */
.hero-next {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 16px;
  max-width: 460px; margin-top: 28px; padding: 14px 16px;
  border: 1px solid var(--hair);
  border-left: 3px solid var(--volt);
  text-decoration: none;
  transition: background-color 160ms ease-out, border-color 160ms ease-out;
}
.hero-next:hover { background: var(--panel); border-color: rgba(214, 255, 63, 0.5); border-left-color: var(--volt); }
.hero-next .nx-days { grid-row: 1 / 3; font-family: 'Anton', sans-serif; font-size: 40px; line-height: 0.9; color: var(--volt); font-variant-numeric: tabular-nums; text-align: center; min-width: 52px; }
.hero-next .nx-days small { display: block; margin-top: 4px; font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.hero-next .nx-label { color: var(--dimmer); }
.hero-next .nx-name { font-family: 'Anton', sans-serif; font-size: 20px; text-transform: uppercase; letter-spacing: 0.015em; line-height: 1.05; }
.hero-next .nx-arrow { grid-row: 1 / 3; grid-column: 3; color: var(--dim); transition: transform 200ms var(--ease-out), color 160ms; }
.hero-next:hover .nx-arrow { transform: translateY(3px); color: var(--volt); }

.hero-social {
  margin-top: 28px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.hero-social .micro { color: var(--dimmer); }
.social-row { display: flex; gap: 8px; }
.social {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  color: var(--off);
  border: 1px solid var(--hair);
  background: transparent;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
  transition: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out, transform 140ms var(--ease-out);
}
.social svg { width: 16px; height: 16px; display: block; overflow: visible; }
.social:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .social-ig:hover { background: rgba(228, 64, 95, 0.14); border-color: rgba(228, 64, 95, 0.45); }
  .social-st:hover { background: rgba(252, 76, 2, 0.14); border-color: rgba(252, 76, 2, 0.5); }
  .social-tt:hover { background: rgba(254, 44, 85, 0.12); border-color: rgba(37, 244, 238, 0.4); }
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  background: var(--volt); color: var(--black);
  border: 1px solid var(--volt);
  font-family: 'Space Mono', monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none;
  transition: transform 140ms var(--ease-out), background-color 160ms ease-out, color 160ms ease-out;
}
.btn:active { transform: scale(0.97); }

.hero-media { position: relative; overflow: hidden; background: var(--panel); min-height: 300px; }
.hero-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%;
  filter: grayscale(0.3) contrast(1.06);
  opacity: 0;
  transition: opacity 900ms ease;
}
.hero-slide.is-active { opacity: 1; z-index: 1; }
.hero-dots { position: absolute; right: 14px; bottom: 8px; z-index: 5; display: flex; }
.hero-dot { width: 34px; height: 34px; display: grid; align-items: center; padding: 0 3px; background: transparent; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hero-dot i { display: block; height: 2px; background: rgba(242, 242, 239, 0.3); position: relative; overflow: hidden; }
.hero-dot i::after { content: ''; position: absolute; inset: 0; background: var(--volt); transform-origin: left; transform: scaleX(0); }
.hero-dot.is-active i::after { transform: scaleX(1); }
.autoplay .hero-dot.is-active i::after { transform: scaleX(0); }
.autoplay .hero-dot.is-active.run i::after { animation: heroProg var(--hero-ms, 5500ms) linear forwards; }
@keyframes heroProg { to { transform: scaleX(1); } }
.hero-media:hover .hero-dot.run i::after, .hero-media:focus-within .hero-dot.run i::after { animation-play-state: paused; }
@media (prefers-reduced-motion: no-preference) {
  .hero-slide.is-active { animation: kenburns calc(var(--hero-ms, 5500ms) + 1500ms) ease-out both; }
  @keyframes kenburns { from { transform: scale(1.06); } to { transform: scale(1); } }
}
.hero-media::after {
  content: ''; z-index: 2;
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--black) 0%, rgba(10, 10, 10, 0.34) 26%, rgba(10, 10, 10, 0) 58%),
    linear-gradient(0deg, rgba(10, 10, 10, 0.6), rgba(10, 10, 10, 0) 38%);
}
.shot-cap {
  position: absolute; left: 20px; bottom: 16px; z-index: 4;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

/* ---------- sections ---------- */
.sec { padding: 88px 28px; border-bottom: 1px solid var(--hair); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 18px; margin-bottom: 40px; }
.h {
  font-family: 'Anton', sans-serif;
  font-size: clamp(38px, 6.2vw, 84px);
  line-height: 0.86;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin-top: 12px;
}
.h em { font-style: normal; color: var(--volt); }
.sec-note { max-width: 42ch; font-size: 15px; line-height: 1.64; color: var(--dim); }

/* ---------- bests: record board ---------- */
.records { list-style: none; border-top: 2px solid var(--volt); }
.rec { border-bottom: 1px solid var(--hair); }
.rec-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(110px, 0.6fr) minmax(0, 1fr) minmax(190px, 1fr) 24px;
  align-items: center; gap: 20px;
  width: 100%;
  padding: 12px 8px 15px 0;
  background: transparent; border: 0; text-align: left;
  transition: background-color 180ms ease-out, padding 260ms var(--ease-out);
}
button.rec-row { cursor: pointer; }
.rec-dist { font-family: 'Anton', sans-serif; font-size: clamp(17px, 1.7vw, 22px); line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; }
.rec-dist small { display: block; margin-top: 5px; color: var(--dimmer); }
.rec-time {
  display: inline-flex; align-items: flex-end;
  font-family: 'Anton', sans-serif;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1; letter-spacing: -0.01em;
  transition: color 180ms ease-out;
}
.rec-time > span { display: inline-flex; }
.odo { display: inline-block; height: 1em; overflow: hidden; }
.odo-reel { display: block; transform: translateY(calc(var(--d) * -1em)); }
.odo-reel span { display: block; height: 1em; line-height: 1em; text-align: center; }
.odo-sep { display: inline-block; height: 1em; line-height: 1em; padding: 0 0.02em; color: var(--volt); }
.rec-meta b { display: block; font-family: 'Space Mono', monospace; font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; }
.rec-meta .micro { display: block; margin-top: 5px; }
.rec-go { width: 18px; height: 18px; color: var(--dimmer); transition: color 180ms, transform 220ms var(--ease-out); }
.rec-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.rec-bar i { position: absolute; inset: 0; background: var(--volt); opacity: 0.85; transform-origin: left; transform: scaleX(var(--p)); }
@media (hover: hover) and (pointer: fine) {
  button.rec-row:hover { background: var(--panel); padding-left: 14px; }
  button.rec-row:hover .rec-time { color: var(--volt); }
  button.rec-row:hover .rec-go { color: var(--volt); transform: translate(2px, -2px); }
}

/* ---------- race calendar ---------- */
.races { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.race-list { background: var(--black); }
.race-group { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 13px 22px 11px; background: var(--panel); border: 0; border-bottom: 1px solid var(--hair-soft); text-align: left; }
.year { border-bottom: 1px solid var(--hair-soft); }
.year > summary { list-style: none; cursor: pointer; }
.year > summary::-webkit-details-marker { display: none; }
.year > summary .chev { width: 10px; height: 10px; color: var(--dim); transition: transform 200ms var(--ease-out); }
.year[open] > summary .chev { transform: rotate(180deg); }
.year > summary:hover .micro { color: var(--off); }
.race {
  display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  width: 100%; padding: 17px 22px; text-align: left;
  background: transparent; border: 0; border-bottom: 1px solid var(--hair-soft);
  cursor: pointer;
  transition: background-color 150ms ease-out;
}
.year .race:last-child { border-bottom: none; }
@media (hover: hover) { .race:hover { background: var(--panel); } }
.race[data-active] { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--volt); }
.race-when { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--dimmer); font-variant-numeric: tabular-nums; line-height: 1.5; }
.race-when b { display: block; color: var(--off); font-weight: 400; }
.race-name { font-family: 'Anton', sans-serif; font-size: 21px; text-transform: uppercase; letter-spacing: 0.015em; line-height: 1.06; }
.race-sub { display: block; margin-top: 5px; font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.race-res { font-family: 'Space Mono', monospace; font-size: 17px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; text-align: right; white-space: nowrap; }
.race-res .pb-flag { display: block; margin-top: 6px; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--volt); }
.race-res .pending { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.pill { display: inline-block; padding: 5px 10px; background: var(--volt); color: var(--black); font-size: 9.5px; letter-spacing: 0.15em; text-transform: uppercase; }
.pill-soft { background: transparent; color: var(--dim); border: 1px solid var(--hair); }

.race-detail { background: var(--black); position: sticky; top: 58px; align-self: start; }
.detail-media { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--panel); border-bottom: 1px solid var(--hair-soft); }
.detail-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.3) contrast(1.06); z-index: 2; }
.detail-blank {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px;
  background:
    repeating-linear-gradient(135deg, rgba(214, 255, 63, 0.09) 0 1px, transparent 1px 14px),
    var(--panel);
}
.detail-blank b { font-family: 'Anton', sans-serif; font-size: clamp(38px, 6vw, 74px); line-height: 0.86; text-transform: uppercase; color: var(--dimmer); font-weight: 400; }
.detail-loc { display: block; margin-top: 8px; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); }
.detail-map { position: absolute; inset: 0; z-index: 1; background: #0c0d0c; }
.detail-map.leaflet-container { background: #0c0d0c; font-family: inherit; }
.detail-map .leaflet-tile-pane { filter: invert(0.9) hue-rotate(180deg) saturate(0.55) brightness(0.95) contrast(1.06); }
.detail-map .leaflet-control-attribution {
  background: rgba(10, 10, 10, 0.72) !important;
  color: var(--dimmer);
  font-family: 'Space Mono', monospace;
  font-size: 9px; letter-spacing: 0.04em;
}
.detail-map .leaflet-control-attribution a { color: var(--dim); }
.detail-map .leaflet-control-zoom {
  margin: 12px 12px 0 0;
  border: 1px solid var(--hair); border-radius: 0; box-shadow: none; overflow: hidden;
  background: rgba(10, 10, 10, 0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.detail-map .leaflet-bar a {
  width: 36px; height: 36px; line-height: 36px;
  background: transparent; color: var(--off);
  border-bottom: 1px solid var(--hair); border-radius: 0;
  font-family: 'Space Mono', monospace; font-size: 18px; font-weight: 400;
  text-decoration: none;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.detail-map .leaflet-bar a:last-child { border-bottom: none; }
@media (hover: hover) and (pointer: fine) { .detail-map .leaflet-bar a:hover { background: var(--panel); color: var(--volt); } }
.detail-map .leaflet-bar a.leaflet-disabled { color: var(--dimmer); background: transparent; cursor: default; }
.race-pin-wrap { background: none !important; border: none !important; }
.race-pin {
  display: block; width: 12px; height: 12px;
  background: var(--volt);
  border: 2px solid var(--black);
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(214, 255, 63, 0.22);
}
@media (prefers-reduced-motion: no-preference) {
  .race-pin { animation: pinPulse 2.4s ease-out infinite; }
  @keyframes pinPulse {
    0% { box-shadow: 0 0 0 0 rgba(214, 255, 63, 0.45); }
    70% { box-shadow: 0 0 0 14px rgba(214, 255, 63, 0); }
    100% { box-shadow: 0 0 0 0 rgba(214, 255, 63, 0); }
  }
}
.detail-map-overlay {
  position: absolute; bottom: 14px; left: 14px; z-index: 500;
  font-family: 'Space Mono', monospace; font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dim); background: rgba(10, 10, 10, 0.7);
  padding: 4px 8px;
  pointer-events: none;
}
.detail-map-overlay:empty { display: none; }
.media-toggle {
  position: absolute; top: 12px; left: 12px; z-index: 600;
  display: flex;
  border: 1px solid var(--hair);
  background: rgba(10, 10, 10, 0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.media-toggle button {
  padding: 8px 12px; background: transparent; border: 0; cursor: pointer;
  font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim);
  transition: color 150ms, background-color 150ms;
}
.media-toggle button[aria-pressed="true"] { background: var(--volt); color: var(--black); }
.detail-body { padding: 26px 26px 30px; }
.detail-body h3 { font-family: 'Anton', sans-serif; font-size: clamp(26px, 3vw, 38px); font-weight: 400; line-height: 0.98; text-transform: uppercase; margin: 10px 0 16px; }
.figure { font-family: 'Anton', sans-serif; font-size: clamp(42px, 5.6vw, 72px); line-height: 0.88; letter-spacing: 0.005em; font-variant-numeric: tabular-nums; }
.figure.pending { color: var(--volt); }
.figure.muted { color: var(--dimmer); font-size: clamp(30px, 4vw, 48px); }
.detail-grid { display: flex; flex-wrap: wrap; gap: 18px 38px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hair-soft); }
.detail-grid b { display: block; margin-top: 6px; font-family: 'Space Mono', monospace; font-size: 14px; font-weight: 400; font-variant-numeric: tabular-nums; }
.detail-note { margin-top: 20px; font-size: 14.5px; line-height: 1.68; color: var(--dim); }
.detail-link { display: inline-flex; gap: 8px; align-items: center; margin-top: 18px; color: #fc4c02; text-decoration: none; }
.detail-link:hover { color: var(--off); }
@media (prefers-reduced-motion: no-preference) {
  .swap { animation: swap 260ms var(--ease-out) both; }
  @keyframes swap { from { opacity: 0; transform: translateY(8px); } }
  .detail-img { animation: fadeIn 320ms ease-out both; }
  @keyframes fadeIn { from { opacity: 0; } }
}

/* ---------- gallery: scroll strip ---------- */
#gallery { padding-right: 0; padding-left: 0; }
#gallery .sec-head { padding: 0 28px; }
.filmstrip {
  display: flex; gap: 8px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 28px;
  scrollbar-width: none;
  padding-bottom: 6px;
  cursor: grab;
}
.filmstrip:active { cursor: grabbing; }
.filmstrip::-webkit-scrollbar { display: none; }
.film {
  flex: 0 0 min(72vw, 460px);
  scroll-snap-align: start;
  position: relative; overflow: hidden;
  background: var(--panel);
  aspect-ratio: 3 / 4;
}
.film:first-child { margin-left: 28px; }
.film:last-child { margin-right: 28px; }
.film img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.3) contrast(1.05);
  transition: transform 900ms var(--ease-out), filter 600ms;
  -webkit-user-drag: none;
  user-select: none;
}
@media (hover: hover) { .film:hover img { transform: scale(1.04); filter: grayscale(0) contrast(1.06); } }
.film-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 54px 20px 18px;
  background: linear-gradient(to top, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.4) 50%, transparent 100%);
}
.film-t { display: block; font-family: 'Anton', sans-serif; font-size: clamp(18px, 2.4vw, 26px); text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05; }
.film-s { display: block; margin-top: 5px; color: rgba(255,255,255,0.6); }
.film-idx { position: absolute; top: 16px; left: 18px; z-index: 1; font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--volt); }
.gallery-nav { display: flex; gap: 8px; margin-top: 18px; padding-left: 28px; }
.film-btn {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  color: var(--off);
  border: 1px solid var(--hair);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
  transition: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out, transform 140ms var(--ease-out);
}
.film-btn svg { width: 16px; height: 16px; display: block; }
.film-btn:active:not(:disabled) { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .film-btn:hover:not(:disabled) { color: var(--black); background: var(--volt); border-color: var(--volt); }
}
.film-btn:disabled { color: var(--dimmer); cursor: default; opacity: 0.45; }

/* ---------- partner ---------- */
.partner { background: var(--volt); color: var(--black); padding: 84px 28px; }
.partner .micro { color: rgba(10, 10, 10, 0.62); }
.partner h2 { font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(38px, 6.2vw, 84px); line-height: 0.86; text-transform: uppercase; margin: 12px 0 34px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--black); border-bottom: 1px solid rgba(10, 10, 10, 0.25); margin-bottom: 48px; }
.stat { padding: 18px 18px 20px 0; }
.stat + .stat { padding-left: 18px; border-left: 1px solid rgba(10, 10, 10, 0.2); }
.stat b { display: block; font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(34px, 4.6vw, 64px); line-height: 0.9; font-variant-numeric: tabular-nums; }
.stat .micro { display: block; margin-top: 8px; }
.partner-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: start; }
.partner p { font-size: 17px; line-height: 1.7; }
.partner p + p { margin-top: 15px; }
.partner .quote { font-family: 'Anton', sans-serif; font-size: clamp(24px, 3.1vw, 38px); line-height: 1.1; text-transform: uppercase; margin-bottom: 24px; }
.offer { list-style: none; margin-top: 14px; border-top: 1px solid rgba(10, 10, 10, 0.25); }
.offer li { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(10, 10, 10, 0.25); font-size: 16px; }
.offer span { font-family: 'Space Mono', monospace; font-size: 11px; opacity: 0.6; padding-top: 3px; }
.btn-dark { background: var(--black); color: var(--volt); border-color: var(--black); margin-top: 28px; }
.btn-dark:hover { background: #1c1c1c; color: var(--volt); }

/* ---------- footer ---------- */
.foot { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; padding: 38px 28px 46px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 22px; }
.foot a { text-decoration: none; transition: color 150ms ease-out; }
.foot a:hover { color: var(--volt); }

/* ---------- motion ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(12px); }
.js [data-reveal][data-shown] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .rise { animation: rise 520ms var(--ease-out) both; }
  .d1 { animation-delay: 60ms; }
  .d2 { animation-delay: 120ms; }
  .d3 { animation-delay: 180ms; }
  .d4 { animation-delay: 240ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } }

  /* record board: digits roll into place like a stadium clock */
  .js .paceboard .odo-reel { transform: translateY(0); }
  .js .paceboard[data-shown] .odo-reel {
    transform: translateY(calc(var(--d) * -1em));
    transition: transform 1100ms cubic-bezier(0.2, 0.9, 0.25, 1) var(--o);
  }
  .js .paceboard .rec-bar i { transform: scaleX(0); }
  .js .paceboard[data-shown] .rec-bar i { transform: scaleX(var(--p)); transition: transform 1000ms var(--ease-out) calc(300ms + var(--i) * 110ms); }
  .js .paceboard .rec { opacity: 0; transform: translateY(10px); }
  .js .paceboard[data-shown] .rec { opacity: 1; transform: none; transition: opacity 420ms var(--ease-out) calc(var(--i) * 90ms), transform 420ms var(--ease-out) calc(var(--i) * 90ms); }

  /* race rows cascade in on first reveal */
  .races.intro .race { opacity: 0; transform: translateX(-8px); }
  .races.intro[data-shown] .race {
    opacity: 1; transform: none;
    transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out), background-color 150ms ease-out;
    transition-delay: calc(min(var(--i, 0), 10) * 40ms + 120ms);
  }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  html { scroll-padding-top: 54px; }
  .bar { padding: 12px 16px; gap: 12px; }
  .bar nav { gap: 18px; overflow-x: auto; scrollbar-width: none; margin: 0 4px; }
  .bar nav::-webkit-scrollbar { display: none; }
  .bar nav a { white-space: nowrap; }
  .bar-mail { display: none; }
  .hero { min-height: 0; }
  .hero-meta { padding: 10px 16px; }
  .hero-main { grid-template-columns: 1fr; }
  .hero-media { order: -1; height: 46svh; min-height: 280px; border-bottom: 1px solid var(--hair-soft); }
  .hero-dots { right: 8px; bottom: 6px; }
  .hero-media::after { background: linear-gradient(0deg, var(--black) 1%, rgba(10, 10, 10, 0.2) 40%, rgba(10, 10, 10, 0) 72%); }
  .hero-copy { padding: 24px 16px 34px; border-right: none; }
  .rec-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dist time" "meta meta"; gap: 4px 12px; padding: 12px 0 14px; }
  .rec-dist { grid-area: dist; font-size: 17px; }
  .rec-dist small { margin-top: 6px; }
  .rec-time { grid-area: time; font-size: clamp(34px, 10vw, 44px); }
  .rec-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
  .rec-meta b { font-size: 13px; }
  .rec-meta .micro { margin-top: 0; }
  .rec-go { display: none; }
  .rec-row > span:empty { display: none; }
  .sec { padding: 58px 16px; }
  #gallery { padding: 58px 0; }
  #gallery .sec-head { padding: 0 16px; }
  .races { grid-template-columns: minmax(0, 1fr); }
  .race-detail { position: static; }
  .detail-media { aspect-ratio: auto; height: 280px; }
  .race { grid-template-columns: 54px minmax(0, 1fr) auto; padding: 15px 16px; gap: 12px; }
  .race-name { font-size: 18px; }
  .race-res { font-size: 15px; }
  .pill { padding: 4px 7px; font-size: 8.5px; letter-spacing: 0.1em; }
  .race-group { padding: 12px 16px 10px; }
  .film { flex: 0 0 78vw; }
  .film:first-child { margin-left: 16px; }
  .film:last-child { margin-right: 16px; }
  .filmstrip { scroll-padding-left: 16px; }
  .gallery-nav { padding-left: 16px; }
  .partner { padding: 58px 16px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid rgba(10, 10, 10, 0.2); }
  .partner-grid { grid-template-columns: 1fr; gap: 32px; }
  .detail-body { padding: 22px 18px 26px; }
  .foot { padding: 30px 16px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- strava embed ---------- */
.strava-wrap { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hair-soft); }
.strava-wrap .detail-link { margin-top: 14px; }
.strava-box { border: 1px solid var(--hair); }
.strava-box > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; transition: background-color 150ms; }
.strava-box > summary::-webkit-details-marker { display: none; }
.strava-box > summary .micro { color: #fc4c02; }
.strava-box > summary:hover { background: var(--panel); }
.strava-box .chev { width: 10px; height: 10px; color: var(--dim); transition: transform 200ms var(--ease-out); }
.strava-box[open] .chev { transform: rotate(180deg); }
.strava-body { padding: 0 14px 14px; }
.strava-body iframe { max-width: 100%; }
.strava-embed-placeholder { min-height: 120px; }
@media (min-width: 901px) {
  .race-detail { max-height: calc(100svh - 58px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--hair) transparent; }
}