/* ── the real Formula1 typeface, when the machine has it ────────────────── */
/* Pulled from installed fonts only. Titillium Web is the fallback everywhere
   else: it is the family the Formula1 face was drawn from, so the page keeps
   its proportions instead of falling back to a system grotesk.
   ponytail: local() only, no self-hosted copy, because the Formula1 face is
   licensed and serving the file would redistribute it. To ship it to every
   visitor, drop the woff2 in fonts/ and add a url() after each local(). */
@font-face{
  font-family:"F1";
  src:local("Formula1"), local("Formula1 Display-Regular"), local("Formula1-Regular");
  font-weight:300 600;
  font-display:swap;
}
@font-face{
  font-family:"F1";
  src:local("Formula1 Black"), local("Formula1-Black");
  font-weight:700 900;
  font-display:swap;
}

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root{
  /* F1 livery: #E10600 red on #15151E carbon. Timing colours keep their
     broadcast meaning: purple = fastest sector, green = personal best. */
  --red:      oklch(0.575 0.235 28);       /* #E10600 */
  --red-hi:   oklch(0.665 0.220 30);       /* text-safe on carbon, hover state */
  --red-wash: oklch(0.575 0.235 28 / 0.20);

  --carbon:      oklch(0.196 0.016 279);   /* #15151E */
  --carbon-deep: oklch(0.132 0.013 279);

  --screen:      var(--carbon-deep);
  --screen-2:    oklch(0.255 0.016 279);
  --screen-line: oklch(0.335 0.014 279);
  --screen-ink:  oklch(0.985 0 0);
  --screen-dim:  oklch(0.760 0.008 279);

  --bg:      var(--carbon);
  --surface: oklch(0.243 0.016 279);
  --line:    oklch(0.318 0.014 279);
  --line-2:  oklch(0.420 0.014 279);
  --ink:     oklch(0.985 0 0);
  --ink-mid: oklch(0.780 0.008 279);

  --purple:       oklch(0.660 0.235 305);  /* fastest sector */
  --purple-vivid: oklch(0.660 0.235 305);
  --green:        oklch(0.730 0.175 156);  /* personal best */
  --amber:        oklch(0.800 0.155 82);

  --font-f1:   "F1", "Titillium Web", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Titillium Web", ui-sans-serif, system-ui, sans-serif;

  --z-sticky: 20;
  --z-lapbar: 40;
  --z-radio:  60;
  --z-lights: 80;

  --step--1: clamp(0.76rem, 0.74rem + 0.10vw, 0.82rem);
  --step-0:  clamp(1rem, 0.97rem + 0.16vw, 1.09rem);
  --step-1:  clamp(1.3rem, 1.22rem + 0.40vw, 1.55rem);
  --step-2:  clamp(1.72rem, 1.55rem + 0.85vw, 2.3rem);
  --step-3:  clamp(2.2rem, 1.85rem + 1.75vw, 3.3rem);

  --gutter: clamp(1.15rem, 4.5vw, 4.5rem);
  --measure: 68ch;
  --out: cubic-bezier(0.16, 1, 0.3, 1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.6;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.hero-num,.figs dd,.sector-tag{
  font-family:var(--font-f1);
}
h1,h2,h3{ margin:0; line-height:1.06; text-wrap:balance; font-weight:900; letter-spacing:-0.004em; }
p{ margin:0; text-wrap:pretty; }
a{ color:inherit; }

.mono{
  font-family:var(--font-f1);
  font-size:var(--step--1);
  letter-spacing:0.02em;
  font-weight:500;
}

.wrap{ width:min(100%, 1180px); margin-inline:auto; padding-inline:var(--gutter); }

:focus-visible{ outline:3px solid var(--red-hi); outline-offset:3px; border-radius:2px; }
.skip{
  position:absolute; left:0.6rem; top:-4rem; z-index:calc(var(--z-sticky) + 1);
  background:var(--screen); color:var(--screen-ink);
  padding:0.7rem 1rem; transition:top 0.18s var(--out);
}
.skip:focus{ top:0.6rem; }

/* ── session bar ────────────────────────────────────────────────────────── */
.session{
  background:var(--screen);
  color:var(--screen-dim);
  border-bottom:1px solid var(--screen-line);
}
.session .wrap{
  display:flex; flex-wrap:wrap; gap:0.4rem 1.6rem;
  align-items:center; justify-content:space-between;
  padding-block:0.62rem;
}
.session dl{ display:flex; flex-wrap:wrap; gap:0.4rem 1.6rem; margin:0; }
.session div{ display:flex; gap:0.5rem; align-items:baseline; }
.session dt{ color:oklch(0.60 0.010 279); }
.session dd{ margin:0; color:var(--screen-ink); }
/* Green flag: the one deliberately rounded element on the page, so the hiring
   signal reads as a live status chip rather than another label in the bar. */
.live{
  display:inline-flex; align-items:center; gap:0.55rem;
  padding:0.32rem 0.85rem 0.34rem;
  border:1px solid oklch(0.60 0.14 152 / 0.5);
  border-radius:999px;
  background:oklch(0.60 0.16 152 / 0.13);
  color:oklch(0.875 0.135 152);
  font-weight:600;
}
.live::before{
  content:""; inline-size:0.5rem; block-size:0.5rem; border-radius:50%;
  background:oklch(0.72 0.19 150); box-shadow:0 0 0 0 oklch(0.72 0.19 150 / 0.6);
  animation:pulse 2.4s var(--out) infinite;
}
@keyframes pulse{ 70%{ box-shadow:0 0 0 0.55rem oklch(0.72 0.19 150 / 0); } 100%{ box-shadow:0 0 0 0 oklch(0.72 0.19 150 / 0); } }

/* ── hero: the pit-wall screen ──────────────────────────────────────────── */
.screen{
  background:var(--screen);
  color:var(--screen-ink);
  position:relative;
  overflow:hidden;
}
.screen::after{ /* scanline grid, very faint */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(to bottom, oklch(1 0 0 / 0.032) 0 1px, transparent 1px 4px);
}
.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(2.2rem, 5vw, 4rem);
  padding-block:clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4.5rem);
  position:relative; z-index:1;
}
@media (min-width: 62rem){
  .hero{ grid-template-columns:minmax(0, 1.02fr) minmax(0, 0.98fr); align-items:center; }
}

.hero-num{
  font-size:clamp(3.4rem, 12vw, 5.6rem);
  font-weight:900; line-height:0.82; letter-spacing:0.01em;
  color:transparent;
  -webkit-text-stroke:1.5px var(--screen-line);
  margin-bottom:0.4rem;
}
h1{
  font-size:var(--step-3);
  letter-spacing:-0.004em;
  text-transform:uppercase;
}
h1 .sur{ display:block; color:var(--red); font-style:italic; }
.role{
  margin-top:0.9rem;
  font-size:var(--step-1);
  font-weight:500;
  color:var(--screen-ink);
  letter-spacing:-0.01em;
}
.blurb{
  margin-top:1.4rem;
  max-width:52ch;
  color:var(--screen-dim);
  line-height:1.68;
}
.blurb b{ color:var(--screen-ink); font-weight:600; }

.links{
  display:flex; flex-wrap:wrap; gap:0.55rem;
  margin-top:2rem; padding:0; list-style:none;
}
.links a{
  display:inline-block;
  padding:0.6rem 1rem;
  border:1px solid var(--screen-line);
  color:var(--screen-ink);
  text-decoration:none;
  font-family:var(--font-f1);
  font-size:var(--step--1);
  transition:background 0.2s var(--out), border-color 0.2s var(--out), color 0.2s var(--out);
}
.links a:hover{ background:var(--red); border-color:var(--red); color:var(--carbon-deep); }
.links .primary{ background:var(--red); border-color:var(--red); color:var(--carbon-deep); }
.links .cv{ border-color:var(--red); color:var(--red-hi); }
.links .primary:hover{ background:var(--red-hi); border-color:var(--red-hi); color:var(--carbon-deep); }

/* ── circuit ────────────────────────────────────────────────────────────── */
.circuit{ display:block; inline-size:100%; block-size:auto; overflow:visible; }
.circuit .bed{ fill:none; stroke:oklch(0.315 0.016 279); stroke-width:20; stroke-linejoin:round; }
.circuit .sector{
  fill:none; stroke-width:6; stroke-linecap:butt;
  opacity:0.6; transition:opacity 0.3s var(--out), stroke-width 0.3s var(--out);
}
.circuit .sector.on{ opacity:1; stroke-width:9; }
.circuit .comet{
  fill:none; stroke:oklch(0.99 0 0); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:12 288;
  filter:drop-shadow(0 0 8px oklch(0.75 0.20 28));
  animation:lap 9s linear infinite;
}
@keyframes lap{ to{ stroke-dashoffset:-300; } }
.circuit .tick line{ stroke:var(--screen-dim); stroke-width:3; }
.circuit .flag rect{ fill:var(--screen-ink); }
.circuit .flag .alt{ fill:var(--screen); }
.circuit text{
  font-family:var(--font-f1); font-size:17px; font-weight:700;
  fill:var(--screen-dim); letter-spacing:0.08em;
  transition:fill 0.3s var(--out);
}
.circuit .lbl.on{ fill:var(--screen-ink); }

/* ── cursor ─────────────────────────────────────────────────────────────── */
/* Racing helmet by Delapouite, game-icons.net, CC BY 3.0.
   https://game-icons.net/1x1/delapouite/full-motorcycle-helmet.html
   Dark halo behind the white fill so it holds on every surface here.
   Hotspot sits on the visor edge, not the empty top-left corner.
   Safari ignores SVG cursors and falls back to the keyword. */
body{ cursor:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iLTI4IC0yOCA1NjggNTY4Ij48cGF0aCBkPSJNMjk0LjM5NiA1Mi4xMjdjLTE3Ljk0NC4wNjYtMzUuNzc3IDEuODM0LTUyLjg4NiA0Ljc0Ni04Ni43MjcgMTQuNzYtMTM1LjYxMiA1My40NjctMTYxLjk5IDEwNy44MjQgMzEuMjE1LTIuNDM0IDYyLjAwMi01LjAyNCA5MS45NjYtNC44MzggMjQuMTE0LjE1IDQ3LjY5NiAyLjA5NyA3MC41NCA3LjM3IDE1LjE1IDMuNSAyNC42NTIgMTYuNjQ3IDI3LjYwNyAzMS43MzUgMi45NTQgMTUuMDg4Ljg1OCAzMi45Mi01LjA1NSA1MS41NTNsLS4yODcuOTA0LS40NjguODI2Yy03Ljc2MiAxMy42NC0yNC4yNjMgMjQuNDk4LTQ1LjI5NSAzNS45OTQtMjEuMDMyIDExLjQ5Ny00Ni42OTUgMjIuNjkzLTcyLjI3IDMyLjQyOC0yNS41NzQgOS43MzUtNTEuMDEyIDE3Ljk4LTcxLjU3NSAyMy40MzctNy4yNTQgMS45MjUtMTMuODUgMy40OC0xOS43MzUgNC42NTcgMi4yNzUgMzEuMTMgNi41NjIgNjMuMzggMTIuMDA4IDk1Ljk4IDE0MC4xMTgtMzguMjUgMjczLjUtNzkuODg4IDQwMy41MS0xMjMuMjU0IDI1LjkzNS00NC40NTcgMjkuOTI3LTg2LjQ0OCAxNi45NjctMTI2LjczNC0yMi4zOTMtNjkuNjA1LTYwLjktMTA3LjA0OC0xMDUuMjE1LTEyNi4xNjgtMjcuNjk2LTExLjk1LTU3LjkxMy0xNi41Ny04Ny44Mi0xNi40NnpNMTMwLjE4NCAxNzkuMjA1Yy05LjA2LjUxLTE4LjI2NSAxLjE1Ni0yNy41MzIgMS44MzZMNTkuMzEgMzI5LjM4NmMzLjM4NC0uNzkgNi45MzYtMS42NjMgMTAuNzU0LTIuNjc2IDQuMDA0LTEuMDYzIDguMjctMi4yNyAxMi42Ni0zLjU1NCAxMC4wMjItMzEuMDcgNDMuMy0xMzEuNDE1IDQ3LjQ2LTE0My45NXptLTQ2LjcgMy4yNjJjLTEwLjg2OC44MjYtMjEuODI0IDEuNjU0LTMyLjkwOCAyLjM3LS4zMi40NDUtLjcxNC45NDctMS4zMTggMi4yNjctMS41OCAzLjQ1LTMuMzc1IDkuNDE4LTQuOTEyIDE2LjcyNC0zLjA3NSAxNC42MTItNS4zNyAzNC43MjctNi43MDUgNTQuODc3LTEuMzMzIDIwLjE1LTEuNzMgNDAuNDM4LTEuMTkzIDU1LjU4Mi4yNjggNy41NzIuNzkgMTMuOTA1IDEuNDQyIDE3Ljk2LjA0OC4zMDYuMDc4LjMxMi4xMy41OS40Ni0uMDEgMS4wMzMtLjA0NCAxLjU0Ni0uMDY0bDQzLjkxOC0xNTAuMzA2ek0yMjQgMTgzYy0xNS41OTYgMC0yOC42NiAxMi41ODItMjguNjYgMjguMTUyczEzLjA2NCAyOC4xNTUgMjguNjYgMjguMTU1IDI4LjY2LTEyLjU4NCAyOC42Ni0yOC4xNTVjMC0xNS41Ny0xMy4wNjQtMjguMTUyLTI4LjY2LTI4LjE1MnptMCAxOGM2LjEyIDAgMTAuNjYgNC41NjcgMTAuNjYgMTAuMTUyIDAgNS41ODYtNC41NCAxMC4xNTUtMTAuNjYgMTAuMTU1cy0xMC42Ni00LjU3LTEwLjY2LTEwLjE1NWMwLTUuNTg1IDQuNTQtMTAuMTUyIDEwLjY2LTEwLjE1MnptMjMwLjE5IDE0NC44NjVDMzMwLjM4MyAzODYuODUyIDIwMy4yODUgNDI2LjIzIDcwLjA1NCA0NjIuNTZjLjQxMyAyLjMxNy44MSA0LjYzIDEuMjMyIDYuOTQ4IDE0Ny42MDctMjYuNjUgMjU1Ljk3NC02OC45NjUgMzcxLjM2LTEwOS4xNjQgNC4xMTgtNC44NTcgNy45NDctOS42OCAxMS41NDYtMTQuNDh6IiBmaWxsPSIjMTUxNTFFIiBzdHJva2U9IiMxNTE1MUUiIHN0cm9rZS13aWR0aD0iNTIiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMjk0LjM5NiA1Mi4xMjdjLTE3Ljk0NC4wNjYtMzUuNzc3IDEuODM0LTUyLjg4NiA0Ljc0Ni04Ni43MjcgMTQuNzYtMTM1LjYxMiA1My40NjctMTYxLjk5IDEwNy44MjQgMzEuMjE1LTIuNDM0IDYyLjAwMi01LjAyNCA5MS45NjYtNC44MzggMjQuMTE0LjE1IDQ3LjY5NiAyLjA5NyA3MC41NCA3LjM3IDE1LjE1IDMuNSAyNC42NTIgMTYuNjQ3IDI3LjYwNyAzMS43MzUgMi45NTQgMTUuMDg4Ljg1OCAzMi45Mi01LjA1NSA1MS41NTNsLS4yODcuOTA0LS40NjguODI2Yy03Ljc2MiAxMy42NC0yNC4yNjMgMjQuNDk4LTQ1LjI5NSAzNS45OTQtMjEuMDMyIDExLjQ5Ny00Ni42OTUgMjIuNjkzLTcyLjI3IDMyLjQyOC0yNS41NzQgOS43MzUtNTEuMDEyIDE3Ljk4LTcxLjU3NSAyMy40MzctNy4yNTQgMS45MjUtMTMuODUgMy40OC0xOS43MzUgNC42NTcgMi4yNzUgMzEuMTMgNi41NjIgNjMuMzggMTIuMDA4IDk1Ljk4IDE0MC4xMTgtMzguMjUgMjczLjUtNzkuODg4IDQwMy41MS0xMjMuMjU0IDI1LjkzNS00NC40NTcgMjkuOTI3LTg2LjQ0OCAxNi45NjctMTI2LjczNC0yMi4zOTMtNjkuNjA1LTYwLjktMTA3LjA0OC0xMDUuMjE1LTEyNi4xNjgtMjcuNjk2LTExLjk1LTU3LjkxMy0xNi41Ny04Ny44Mi0xNi40NnpNMTMwLjE4NCAxNzkuMjA1Yy05LjA2LjUxLTE4LjI2NSAxLjE1Ni0yNy41MzIgMS44MzZMNTkuMzEgMzI5LjM4NmMzLjM4NC0uNzkgNi45MzYtMS42NjMgMTAuNzU0LTIuNjc2IDQuMDA0LTEuMDYzIDguMjctMi4yNyAxMi42Ni0zLjU1NCAxMC4wMjItMzEuMDcgNDMuMy0xMzEuNDE1IDQ3LjQ2LTE0My45NXptLTQ2LjcgMy4yNjJjLTEwLjg2OC44MjYtMjEuODI0IDEuNjU0LTMyLjkwOCAyLjM3LS4zMi40NDUtLjcxNC45NDctMS4zMTggMi4yNjctMS41OCAzLjQ1LTMuMzc1IDkuNDE4LTQuOTEyIDE2LjcyNC0zLjA3NSAxNC42MTItNS4zNyAzNC43MjctNi43MDUgNTQuODc3LTEuMzMzIDIwLjE1LTEuNzMgNDAuNDM4LTEuMTkzIDU1LjU4Mi4yNjggNy41NzIuNzkgMTMuOTA1IDEuNDQyIDE3Ljk2LjA0OC4zMDYuMDc4LjMxMi4xMy41OS40Ni0uMDEgMS4wMzMtLjA0NCAxLjU0Ni0uMDY0bDQzLjkxOC0xNTAuMzA2ek0yMjQgMTgzYy0xNS41OTYgMC0yOC42NiAxMi41ODItMjguNjYgMjguMTUyczEzLjA2NCAyOC4xNTUgMjguNjYgMjguMTU1IDI4LjY2LTEyLjU4NCAyOC42Ni0yOC4xNTVjMC0xNS41Ny0xMy4wNjQtMjguMTUyLTI4LjY2LTI4LjE1MnptMCAxOGM2LjEyIDAgMTAuNjYgNC41NjcgMTAuNjYgMTAuMTUyIDAgNS41ODYtNC41NCAxMC4xNTUtMTAuNjYgMTAuMTU1cy0xMC42Ni00LjU3LTEwLjY2LTEwLjE1NWMwLTUuNTg1IDQuNTQtMTAuMTUyIDEwLjY2LTEwLjE1MnptMjMwLjE5IDE0NC44NjVDMzMwLjM4MyAzODYuODUyIDIwMy4yODUgNDI2LjIzIDcwLjA1NCA0NjIuNTZjLjQxMyAyLjMxNy44MSA0LjYzIDEuMjMyIDYuOTQ4IDE0Ny42MDctMjYuNjUgMjU1Ljk3NC02OC45NjUgMzcxLjM2LTEwOS4xNjQgNC4xMTgtNC44NTcgNy45NDctOS42OCAxMS41NDYtMTQuNDh6IiBmaWxsPSIjZmZmIi8+PC9zdmc+") 2 14, auto; }

/* ── creed: the one statement of intent, set apart from the CV sections ─── */
/* Tighter than the section default on both sides: three lines of type don't
   need the leading a full section does, and the next section supplies the gap
   below, so this one carries no bottom pad. */
.creed{ padding-block:clamp(2.4rem, 5vw, 4rem) 0; }
.creed + section{ padding-block-start:clamp(2.4rem, 5vw, 4rem); }
/* Rule on the paragraph, not the section: .wrap's side padding would push a
   section border wider than every other rule on the page. */
.creed p{
  margin:0;
  border-top:3px solid var(--red);
  padding-block-start:clamp(1.4rem, 3vw, 2.1rem);
  max-inline-size:48ch;
  font-family:var(--font-f1); font-weight:700; font-style:italic;
  font-size:var(--step-1); line-height:1.45; letter-spacing:0.005em;
  text-wrap:balance;
}
.creed em{ font-style:inherit; color:var(--red-hi); }

/* ── section headers: a timing-screen bar, not a stacked kicker ─────────── */
section{ padding-block:clamp(3.2rem, 7vw, 5.5rem); }
.bar{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:0.5rem 1.5rem;
  border-block:1px solid var(--line);
  border-block-width:3px 1px;
  border-block-start-color:var(--red);
  padding-block:0.75rem;
  margin-bottom:clamp(1.8rem, 4vw, 3rem);
}
.bar h2{ font-size:var(--step-2); text-transform:uppercase; font-style:italic; }
.bar .mono{ color:var(--ink-mid); }

/* ── race history ───────────────────────────────────────────────────────── */
.stints{ list-style:none; margin:0; padding:0; }
.stint{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0.35rem 2.5rem;
  padding-block:clamp(1.6rem, 3vw, 2.2rem);
  border-bottom:1px solid var(--line);
  transition:background 0.25s var(--out);
}
.stints .stint:first-child{ border-top:0; }
.stint:hover{ background:var(--surface); }
@media (min-width: 52rem){
  .stint{ grid-template-columns:9.5rem minmax(0,1fr); }
}
.stint-meta{ display:flex; flex-direction:column; gap:0.45rem; }
.sector-tag{
  display:inline-flex; align-items:center; gap:0.5rem;
  align-self:start;
  font-family:var(--font-f1); font-size:var(--step--1); font-weight:700;
  padding:0.28rem 0.55rem;
  color:var(--carbon-deep);
  background:var(--ink-mid);
}
.stint[data-sector="1"] .sector-tag{ background:var(--purple); }
.stint[data-sector="2"] .sector-tag{ background:var(--green); }
.stint[data-sector="3"] .sector-tag{ background:oklch(0.46 0.014 279); color:oklch(0.99 0 0); }
.dates{ font-family:var(--font-f1); font-size:var(--step--1); color:var(--ink-mid); }
.stint h3{ font-size:var(--step-1); letter-spacing:-0.004em; }
.team{
  margin-top:0.35rem; font-weight:600; color:var(--red-hi);
}
.team .desc{ font-weight:400; color:var(--ink-mid); }
.notes{ margin:1.05rem 0 0; padding:0; list-style:none; max-width:var(--measure); }
.notes li{
  position:relative;
  padding-left:1.6rem;
  padding-block:0.3rem;
  color:var(--ink-mid);
  line-height:1.62;
}
.notes li::before{
  content:"";
  position:absolute; left:0; top:0.92em;
  inline-size:0.85rem; block-size:2px;
  background:var(--line-2);
}
.notes b{ color:var(--ink); font-weight:600; }

/* ── lap deltas ─────────────────────────────────────────────────────────── */
/* Each row states before and after as two labelled bars. A bar's length is the
   duration it represents, so "shorter is better" is shown, not assumed. */
.deltas{ list-style:none; margin:0 0 clamp(2.4rem,5vw,3.4rem); padding:0; display:grid; gap:clamp(1.6rem,3vw,2.2rem); }
.delta-head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:0.3rem 1rem; margin-bottom:0.85rem;
}
.delta-head .what{ font-weight:600; font-size:var(--step-0); }
.gain{
  font-family:var(--font-f1); font-size:var(--step--1); font-weight:700;
  color:var(--red-hi); white-space:nowrap;
}
.ba{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:0.5rem 0.85rem;
}
.ba .lab{
  font-family:var(--font-f1); font-size:var(--step--1);
  color:var(--ink-mid); text-transform:uppercase; letter-spacing:0.06em;
}
.ba .val{
  font-family:var(--font-f1); font-size:var(--step--1);
  color:var(--ink-mid); white-space:nowrap; text-align:right;
  min-inline-size:8ch;
}
.ba .val.hi{ color:var(--ink); font-weight:700; }
.track{ block-size:0.8rem; background:oklch(0.28 0.014 279); position:relative; }
.track span{
  position:absolute; inset-block:0; left:0;
  inline-size:var(--w);
  min-inline-size:3px;
  background:var(--red);
  transform-origin:left;
}
.track.before span{ background:oklch(0.42 0.075 28); }
/* Bars are drawn by default. Only when JS is running do they start collapsed
   and animate out, so a blocked script can never ship an empty chart. */
.js .track span{ transform:scaleX(0); animation:fill 0.9s var(--out) forwards; animation-play-state:paused; }
.js .is-in .track span{ animation-play-state:running; }
.js .is-in .track:not(.before) span{ animation-delay:0.18s; }
@keyframes fill{ to{ transform:scaleX(1); } }

.figs{
  border-top:1px solid var(--line-2);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(11.5rem, 1fr));
  column-gap:1.5rem;
}
.figs div{
  padding:1rem 1rem 1.1rem 0;
  border-bottom:1px solid var(--line);
}
.figs dt{ font-family:var(--font-f1); font-size:var(--step--1); color:var(--ink-mid); }
.figs dd{
  margin:0.35rem 0 0; font-size:var(--step-1); font-weight:900; letter-spacing:0.005em;
}

/* ── garage ─────────────────────────────────────────────────────────────── */
.builds{ display:grid; gap:clamp(2rem, 4vw, 3rem); }
.build{ border-top:2px solid var(--line-2); padding-top:1.4rem; }
.build-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:0.4rem 1.5rem; }
.build h3{ font-size:var(--step-1); letter-spacing:-0.004em; }
.build .stack{ font-family:var(--font-f1); font-size:var(--step--1); color:var(--ink-mid); }
.build .visit{
  font-family:var(--font-f1); font-size:var(--step--1);
  color:var(--red-hi); text-decoration-thickness:1px; text-underline-offset:0.28em;
}

/* ── setup sheet ────────────────────────────────────────────────────────── */
.setup{ margin:0; border-top:2px solid var(--line-2); }
.setup > div{
  display:grid; grid-template-columns:minmax(0,1fr); gap:0.3rem 2rem;
  padding-block:1.05rem;
  border-bottom:1px solid var(--line);
}
@media (min-width: 44rem){ .setup > div{ grid-template-columns:11rem minmax(0,1fr); align-items:baseline; } }
.setup dt{ font-family:var(--font-f1); font-size:var(--step--1); color:var(--ink-mid); }
.setup dd{ margin:0; display:flex; flex-wrap:wrap; gap:0.4rem 0.45rem; }
.setup dd span{
  padding:0.22rem 0.55rem;
  border:1px solid var(--line-2);
  font-size:var(--step--1);
  font-family:var(--font-f1);
}
.setup dd span.key{ border-color:var(--red); color:var(--red-hi); }

/* ── paddock ────────────────────────────────────────────────────────────── */
.paddock{ background:var(--screen); color:var(--screen-ink); }
.paddock .bar{ border-block-color:var(--screen-line); }
.paddock .bar .mono{ color:var(--screen-dim); }
.paddock-grid{ display:grid; gap:clamp(2rem,5vw,3.5rem); }
@media (min-width: 52rem){ .paddock-grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr); } }
.paddock h3{ font-size:var(--step-2); letter-spacing:-0.004em; }
.paddock .say{ margin-top:1rem; color:var(--screen-dim); max-width:44ch; }
.contact{ list-style:none; margin:0; padding:0; }
.contact li{ border-bottom:1px solid var(--screen-line); }
.contact li:first-child{ border-top:1px solid var(--screen-line); }
.contact a, .contact .plain{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-block:0.95rem;
  text-decoration:none;
  transition:padding-inline-start 0.24s var(--out), color 0.24s var(--out);
}
.contact a:hover{ padding-inline-start:0.7rem; color:var(--red-hi); }
.contact .k{ font-family:var(--font-f1); font-size:var(--step--1); color:var(--screen-dim); }
.contact .v{ font-weight:600; text-align:right; }
.creds{
  margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--screen-line);
  display:grid; gap:0.9rem;
}
.creds p{ color:var(--screen-dim); font-size:var(--step--1); font-family:var(--font-f1); line-height:1.7; }
.creds b{ color:var(--screen-ink); font-weight:500; }
footer{ border-block-start:3px solid var(--red); }
footer .wrap{
  display:flex; flex-wrap:wrap; gap:0.5rem 1.5rem; justify-content:space-between;
  padding-block:1.2rem 1.6rem;
  color:var(--screen-dim);
}

/* ── entrance: content is visible by default, motion only sweetens it ───── */
.js .rise{ animation:rise 0.7s var(--out) both; animation-play-state:paused; }
.js .rise.is-in{ animation-play-state:running; }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .circuit .comet{ animation:none; stroke-dashoffset:-8; }
  .live::before{ animation:none; }
  .rise, .track span{ animation:none !important; opacity:1 !important; transform:none !important; }
  .contact a:hover{ padding-inline-start:0; }
  *{ transition-duration:0.01ms !important; }
}

/* ══ motion layer ═══════════════════════════════════════════════════════════ */

/* ── start lights ───────────────────────────────────────────────────────── */
/* The five-light gantry, held for a beat and then extinguished. Runs once per
   session, JS-gated, click-to-skip: nobody should sit through it twice. */
.lights{
  position:fixed; inset:0; z-index:var(--z-lights);
  background:var(--carbon-deep);
  display:grid; place-content:center; justify-items:center; gap:2rem;
  transition:opacity 0.45s var(--out);
}
.lights.done{ opacity:0; pointer-events:none; }
.rig{
  display:flex; gap:clamp(0.5rem, 2vw, 1.1rem);
  padding:clamp(0.7rem, 2vw, 1.15rem);
  border:2px solid var(--screen-line);
  background:oklch(0.10 0.010 279);
}
.rig span{
  display:flex; flex-direction:column; gap:clamp(0.35rem, 1.2vw, 0.6rem);
  inline-size:clamp(1.9rem, 6.5vw, 2.9rem);
}
.rig span::before, .rig span::after{
  content:""; aspect-ratio:1; border-radius:50%;
  background:oklch(0.215 0.012 279);
  box-shadow:inset 0 0 0 2px oklch(0.30 0.014 279);
  transition:background 0.12s linear, box-shadow 0.12s linear;
}
.rig span.on::before, .rig span.on::after{
  background:var(--red);
  box-shadow:inset 0 0 0 2px oklch(0.70 0.20 30), 0 0 22px oklch(0.60 0.24 28 / 0.7);
}
.lights-hint{ color:oklch(0.45 0.010 279); }

/* ── lap progress ───────────────────────────────────────────────────────── */
/* Scroll-driven, no JS. Browsers without scroll timelines get no bar at all,
   which is why it is opted into rather than shown by default. */
.lap-bar{ display:none; }
@supports (animation-timeline: scroll()){
  .lap-bar{
    display:block;
    position:fixed; inset-block-start:0; inset-inline:0;
    block-size:3px; z-index:var(--z-lapbar);
    background:var(--red);
    transform:scaleX(0); transform-origin:left;
    animation:lap-progress linear both;
    animation-timeline:scroll(root block);
  }
}
@keyframes lap-progress{ to{ transform:scaleX(1); } }

/* ── team radio toast ───────────────────────────────────────────────────── */
.radio{
  position:fixed; inset-block-end:1.1rem; inset-inline-end:1.1rem;
  z-index:var(--z-radio);
  max-inline-size:min(22rem, calc(100vw - 2.2rem));
  padding:0.7rem 1rem;
  background:var(--carbon-deep);
  border:1px solid var(--red);
  border-left-width:1px;
  color:var(--ink);
  box-shadow:0 12px 34px oklch(0 0 0 / 0.55);
  animation:radio-in 0.42s var(--out) both;
}
.radio b{ color:var(--red-hi); font-weight:400; }
.radio.amber{ border-color:var(--amber); }
.radio.amber b{ color:var(--amber); }
@keyframes radio-in{ from{ opacity:0; transform:translateY(0.8rem); } }

/* ── lights-out reveal ──────────────────────────────────────────────────── */
/* Gated on `go`, which app.js adds the moment the lights go out. Without it
   these never start, so the reveal cannot burn away behind the overlay. */
.js.go .hero > *{ animation:hero-in 0.85s var(--out) both; }
.js.go .hero > *:nth-child(2){ animation-delay:0.14s; }
@keyframes hero-in{ from{ opacity:0; transform:translateY(1.1rem); } }

.js.go .circuit .bed{ stroke-dasharray:300; stroke-dashoffset:300; animation:draw 1.7s var(--out) 0.3s forwards; }
.js.go .circuit .sector, .js.go .circuit .flag, .js.go .circuit .tick, .js.go .circuit text{
  animation:fade-up 0.7s var(--out) 1.3s both;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fade-up{ from{ opacity:0; } }

/* ── DRS ────────────────────────────────────────────────────────────────── */
/* S1 is the main straight on this circuit, which is where a DRS zone actually
   lives, so activation lights that sector and sends the car round faster. */
.drs .circuit .comet{ animation-duration:2.4s; }
.drs .circuit #s1{
  stroke:oklch(0.78 0.19 152) !important;
  opacity:1; stroke-width:11;
  filter:drop-shadow(0 0 10px oklch(0.72 0.19 152 / 0.85));
  animation:drs-pulse 0.85s var(--out) infinite alternate;
}
.drs .circuit #l1{ fill:oklch(0.82 0.16 152); }
.drs .lap-bar{ background:var(--green); box-shadow:0 0 16px oklch(0.7 0.18 152 / 0.7); }
@keyframes drs-pulse{ to{ stroke-width:15; } }

/* ── safety car ─────────────────────────────────────────────────────────── */
.sc .lap-bar{ background:var(--amber); animation:none; transform:scaleX(1); }
.sc .circuit .sector{ stroke:var(--amber) !important; opacity:0.85; }
.sc .circuit .comet{ animation-duration:26s; }
.sc .screen::after{ background:repeating-linear-gradient(115deg,
  oklch(0.80 0.155 82 / 0.09) 0 22px, transparent 22px 44px); }

@media (prefers-reduced-motion: reduce){
  .lights{ display:none; }
  .lap-bar{ animation:none; transform:scaleX(1); }
  .radio{ animation:none; }
  .js.go .hero > *{ animation:none; }
  .js.go .circuit .bed{ stroke-dasharray:none; stroke-dashoffset:0; animation:none; }
  .js.go .circuit .sector, .js.go .circuit .flag, .js.go .circuit .tick,
  .js.go .circuit text, .js.go .senna{ animation:none; }
  .drs .circuit #s1{ animation:none; }
}

/* ── fastest-lap band ───────────────────────────────────────────────────── */
.band{
  position:relative; overflow:hidden;
  background:var(--carbon-deep);
  border-block:1px solid var(--line);
  padding-block:clamp(5rem, 14vw, 9rem);
  display:grid; align-items:center;
}
.band-layers{ position:absolute; inset:0; pointer-events:none; }
.band .ghost{
  position:absolute; inset-block-start:50%; inset-inline-start:50%;
  translate:-50% -50%;
  margin:0;
  font-family:var(--font-f1); font-weight:900; font-style:italic;
  font-size:clamp(7rem, 27vw, 20rem); line-height:0.8;
  color:transparent;
  -webkit-text-stroke:2px oklch(0.30 0.020 279);
  white-space:nowrap;
}
.band .chequer{
  position:absolute; inset-block:0; inset-inline-end:-8%;
  inline-size:min(30rem, 52vw);
  background:repeating-conic-gradient(oklch(0.245 0.014 279) 0% 25%, transparent 0% 50%)
    0 0 / 2.6rem 2.6rem;
  rotate:-14deg;
  opacity:0.85;
}
.band .streaks{
  position:absolute; inset:0;
  background:repeating-linear-gradient(to bottom,
    oklch(0.575 0.235 28 / 0.16) 0 2px, transparent 2px 46px);
  mask-image:linear-gradient(to right, transparent, black 18%, black 55%, transparent 78%);
}
/* ── Tamburello memorial ────────────────────────────────────────────────── */
.senna line{ stroke:var(--line-2); stroke-width:1.5; }
.senna .dove{ fill:var(--ink); }
.senna text{
  fill:var(--ink-mid);
  font-family:var(--font-f1); font-weight:700;
  font-size:17px; letter-spacing:0.08em; text-anchor:middle;
}
.js.go .senna{ animation:fade-up 0.9s var(--out) 2.1s both; }

.band-copy{ position:relative; z-index:1; }
.purple-tag{
  display:inline-block;
  padding:0.26rem 0.7rem;
  background:var(--purple);
  color:var(--carbon-deep);
  font-family:var(--font-f1); font-weight:900; font-style:italic;
  font-size:var(--step--1); text-transform:uppercase; letter-spacing:0.06em;
  margin-bottom:1.1rem;
}
.band h2{
  font-size:var(--step-2); text-transform:uppercase; font-style:italic;
  max-inline-size:24ch; text-wrap:balance;
}
.band-say{
  margin-top:1.2rem; max-inline-size:56ch;
  color:var(--ink-mid); line-height:1.68;
}