/* ===========================================================================
   valorracingteam.com
   ---------------------------------------------------------------------------
   One stylesheet. Cascade layers keep specificity flat, so nothing here needs
   !important and nothing has to out-guess anything else.

   The idea: a timing screen with editorial manners. Hairlines, tabular figures
   and section indices from the sport. Air, restraint and one accent from the
   editorial side. Black and gold, unchanged.
   =========================================================================== */

@layer font, token, base, layout, comp, util;

/* ------------------------------------------------------------------ font -- */
@layer font {
  /* Self hosted. No third party request in the critical path, and the CSP
     does not have to trust anyone else's domain. */
  @font-face{
    font-family:"Archivo";
    src:url("fonts/archivo-latin-var.woff2?v=e3a28eade2") format("woff2-variations");
    font-weight:300 800;
    font-stretch:62% 125%;
    font-style:normal;
    font-display:swap;
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }
  @font-face{
    font-family:"Plex Mono";
    src:url("fonts/plexmono-400-latin.woff2?v=08949f728d") format("woff2");
    font-weight:400;font-style:normal;font-display:swap;
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }
  @font-face{
    font-family:"Plex Mono";
    src:url("fonts/plexmono-500-latin.woff2?v=01d2854474") format("woff2");
    font-weight:500;font-style:normal;font-display:swap;
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }
}

/* ----------------------------------------------------------------- token -- */
@layer token {
:root{
  /* Grounds. Four steps, each one barely above the last, so panels separate
     by tone rather than by a shadow. The black is very slightly warm, which
     stops large fields of it reading as a dead screen. */
  --ink:#09090A;
  --ink-2:#0C0C0E;
  --panel:#121215;
  --panel-2:#17171B;

  /* Ink on that ground. */
  --fg:#EDEEEF;
  --fg-2:#AAB0B6;
  --fg-3:#8B9299;

  /* The accent is the team gold as printed on the suits: PANTONE 1245 C, from
     the OMP production specification. A lift for hover and a deep tone for
     anything sitting under text. Driver pink is PANTONE 213 C, the second mark
     on the suit, used here only where a single sharp note is wanted. */
  --gold:#CF9823;
  --gold-hi:#E6B347;
  --gold-lo:#8A6417;
  --pink:#E31C79;
  --suit-white:#F7F6F6;
  --suit-black:#212120;

  /* Lines carry the structure. Mixed rather than hardcoded so a change to the
     foreground colour keeps every hairline in step. */
  --line:rgba(237,238,239,.10);
  --line:color-mix(in oklab, var(--fg) 9%, transparent);
  --line-2:rgba(237,238,239,.18);
  --line-2:color-mix(in oklab, var(--fg) 17%, transparent);
  --line-3:rgba(237,238,239,.31);
  --line-3:color-mix(in oklab, var(--fg) 30%, transparent);
  --line-gold:rgba(207,152,35,.40);
  --line-gold:color-mix(in oklab, var(--gold) 38%, transparent);
  --wash-gold:rgba(207,152,35,.10);
  --wash-gold:color-mix(in oklab, var(--gold) 9%, transparent);

  /* Type. Archivo carries a width axis, so display sizes can be set wider and
     tighter than text without switching family. */
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --t-display:clamp(2.2rem,1.15rem + 2.9vw,3.9rem);
  --t-1:clamp(1.9rem,1.3rem + 1.9vw,2.95rem);
  --t-2:clamp(1.4rem,1.1rem + 1.15vw,2.05rem);
  --t-3:clamp(1.1rem,.98rem + .62vw,1.45rem);
  --t-lead:clamp(1.04rem,.99rem + .34vw,1.2rem);
  --t-body:clamp(1rem,.97rem + .16vw,1.0625rem);
  --t-small:.9375rem;
  --t-label:.6875rem;

  /* Space. One ratio, used everywhere, so nothing is a guess. */
  --s-1:.5rem; --s-2:.75rem; --s-3:1rem; --s-4:1.5rem;
  --s-5:2rem; --s-6:3rem; --s-7:4.5rem; --s-8:7rem;
  --band:clamp(4.5rem,3rem + 6.5vw,9.5rem);

  /* Measure. */
  --shell:1360px;
  --pad:clamp(1.25rem,.6rem + 3.1vw,4rem);
  --measure:66ch;

  --r:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.28s;

  color-scheme:dark;
}
}

/* ------------------------------------------------------------------ base -- */
@layer base {
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
  scrollbar-color:var(--line-2) transparent;
}
body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:var(--sans);
  font-size:var(--t-body);
  font-weight:400;
  font-stretch:100%;
  line-height:1.62;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-variant-numeric:lining-nums;
  overflow-x:hidden;overflow-x:clip;
}

/* A film of grain over the whole page. Three percent, no more. Large flat
   fields of near black band badly on cheap panels, and this breaks it up. */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:color-mix(in oklab, var(--gold) 30%, transparent);color:#fff}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r)}
[id]{scroll-margin-block-start:7rem}

h1,h2,h3,h4{
  margin:0;font-weight:700;line-height:1.08;letter-spacing:-.024em;
  text-wrap:balance;font-stretch:102%;
}
h1{font-size:var(--t-1)}
h2{font-size:var(--t-2)}
h3{font-size:var(--t-3);font-weight:600;letter-spacing:-.02em;line-height:1.16;font-stretch:100%}
h4{font-size:1rem;font-weight:600;letter-spacing:-.01em;font-stretch:100%}
p{margin:0 0 1.15em;text-wrap:pretty}
p:last-child{margin-bottom:0}
strong,b{font-weight:600;color:#fff}
ul{margin:0;padding:0;list-style:none}

/* Skip link. Present, invisible, and properly placed once focused. */
.skip{
  position:fixed;inset-block-start:.75rem;inset-inline-start:.75rem;z-index:1000;
  padding:.75rem 1.1rem;background:var(--gold);color:#101010;
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;
  border-radius:var(--r);transform:translateY(-160%);transition:transform .2s var(--ease);
}
.skip:focus-visible{transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}
}

/* ---------------------------------------------------------------- layout -- */
@layer layout {
/* The page runs on one twelve column grid. Everything that wants to line up
   with something else on another section lines up because it uses the same
   column names, not because a magic pixel value was copied. */
.shell{
  width:min(100% - (var(--pad) * 2), var(--shell));
  margin-inline:auto;
}
.grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(1rem,.4rem + 1.6vw,2rem);
}
.band{padding-block:var(--band)}
.band-sm{padding-block:calc(var(--band) * .62)}
.hr{border:0;height:1px;background:var(--line);margin:0}

/* Column spans, named for what they are rather than for their numbers. */
.col-full{grid-column:1 / -1}
.col-main{grid-column:1 / -1}
.col-wide{grid-column:1 / -1}
.col-side{grid-column:1 / -1}
@media (min-width:860px){
  .col-main{grid-column:4 / 12}
  .col-wide{grid-column:2 / 12}
  .col-side{grid-column:1 / 4}
}

.raise{background:var(--ink-2)}
.edge-t{border-block-start:1px solid var(--line)}
.edge-b{border-block-end:1px solid var(--line)}

/* Below the fold, let the browser skip work it does not need to do yet. */
.defer{content-visibility:auto;contain-intrinsic-size:auto 640px}
}

/* ------------------------------------------------------------------ comp -- */
@layer comp {

/* --- labels -------------------------------------------------------------- */
/* Every section is announced the same way: an index, a hairline, a word. This
   is the one device the whole site is built around. */
.label{
  display:flex;align-items:center;gap:.85rem;
  margin:0 0 var(--s-4);
  font-family:var(--mono);font-size:var(--t-label);font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.label::after{content:"";flex:1 1 auto;height:1px;background:var(--line);max-width:5.5rem}
.label .idx{color:var(--gold);opacity:.55}
.label.plain::after{display:none}
.label.mid{justify-content:center}
.label.mid::before{content:"";flex:0 0 auto;width:3rem;height:1px;background:var(--line-gold)}
.label.mid::after{flex:0 0 auto;width:3rem;max-width:none;background:var(--line-gold)}

.lede{font-size:var(--t-lead);line-height:1.5;color:var(--fg-2);max-width:52ch}
.meta{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-3);font-variant-numeric:tabular-nums;
}

/* --- actions ------------------------------------------------------------- */
.act{
  --bd:var(--line-2);
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  padding:1.05rem 1.9rem;border:1px solid var(--bd);border-radius:var(--r);
  font-family:var(--mono);font-size:var(--t-label);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  background:transparent;color:var(--fg);cursor:pointer;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),
             background var(--dur) var(--ease);
}
.act svg{width:.7rem;height:.7rem;flex:none;transition:transform var(--dur) var(--ease-out)}
.act:hover{--bd:var(--gold);color:var(--gold)}
.act:hover svg{transform:translateX(4px)}
.act--fill{background:var(--gold);border-color:var(--gold);color:#100E08}
.act--fill:hover{background:var(--gold-hi);border-color:var(--gold-hi);color:#100E08}
.act--bare{border-color:transparent;padding-inline:0;color:var(--gold)}
.act--bare:hover{color:var(--gold-hi)}
.acts{display:flex;flex-wrap:wrap;gap:.75rem}
@media (max-width:540px){.acts{flex-direction:column;align-items:stretch}}

/* --- masthead ------------------------------------------------------------ */
.head{
  position:sticky;inset-block-start:0;z-index:500;
  background:color-mix(in oklab, var(--ink) 82%, transparent);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  backdrop-filter:saturate(150%) blur(16px);
  border-block-end:1px solid var(--line);
  view-transition-name:head;
}
.head .bar{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-block:clamp(.9rem,.7rem + .5vw,1.15rem);
}
.head .mark img{height:clamp(30px,2vw + 20px,38px);width:auto}
.nav{display:flex;align-items:center;gap:clamp(1.25rem,.4rem + 1.7vw,2.1rem)}
.nav > a,.nav .has > a{
  position:relative;display:inline-flex;align-items:center;gap:.45rem;
  padding-block:.4rem;border:0;background:none;cursor:pointer;
  font-family:var(--mono);font-size:var(--t-label);font-weight:400;
  letter-spacing:.19em;text-transform:uppercase;color:var(--fg-2);
  transition:color var(--dur) var(--ease);
}
.nav > a::after,.nav .has > a::after{
  content:"";position:absolute;inset-inline-start:0;inset-block-end:0;
  height:1px;width:0;background:var(--gold);transition:width var(--dur) var(--ease-out);
}
.nav > a:hover,.nav .has:hover > button,.nav .has:focus-within > button{color:var(--fg)}
.nav > a:hover::after,.nav .has:hover > button::after{width:100%}
.nav > a[aria-current]{color:var(--fg)}
.nav > a[aria-current]::after{width:100%}
.nav .has > a i{
  width:4px;height:4px;border-inline-end:1px solid currentColor;
  border-block-end:1px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.6;
}
.nav .has{position:relative}
.nav .drop{
  position:absolute;inset-block-start:calc(100% + .95rem);inset-inline-start:-1.1rem;
  min-width:15rem;padding-block:.4rem;
  background:#0D0D10;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 30px 60px -30px rgb(0 0 0 / .95);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.nav .has:hover .drop,.nav .has:focus-within .drop{opacity:1;visibility:visible;transform:none}
.nav .drop a{
  display:block;padding:.72rem 1.15rem;font-size:var(--t-small);color:var(--fg-2);
  border-inline-start:2px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.nav .drop a:hover,.nav .drop a[aria-current]{color:#fff;background:rgb(255 255 255 / .03);border-inline-start-color:var(--gold)}
.nav .cta{
  border:1px solid var(--line-2);border-radius:var(--r);padding:.72rem 1.25rem;color:var(--gold);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.nav .cta::after{display:none}
.nav .cta:hover{background:var(--gold);border-color:var(--gold);color:#100E08}

/* Mobile. A checkbox drives it, so the menu works with the stylesheet alone. */
.head .toggle{position:absolute;opacity:0;pointer-events:none}
.head .burger{display:none}
@media (max-width:1024px){
  .head .burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    inline-size:44px;block-size:44px;margin-inline-end:-10px;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .head .burger span{
    display:block;inline-size:24px;block-size:1.5px;margin-inline-start:auto;background:var(--fg);
    transition:transform .3s var(--ease),opacity .2s var(--ease);
  }
  .nav{
    position:absolute;inset-inline:0;inset-block-start:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:#08080A;border-block-end:1px solid var(--line);
    max-block-size:0;overflow:hidden;transition:max-block-size .38s var(--ease);
  }
  .nav > a,.nav .has > a{
    inline-size:100%;padding:1.15rem var(--pad);font-size:.75rem;
    border-block-start:1px solid var(--line);justify-content:flex-start;
  }
  .nav > a::after,.nav .has > a::after{display:none}
  .nav .has > a i{display:none}
  .nav .drop{
    position:static;opacity:1;visibility:visible;transform:none;
    border:0;box-shadow:none;background:#101014;padding:0;min-inline-size:0;
  }
  .nav .drop a{padding:1rem var(--pad) 1rem calc(var(--pad) + 1.1rem)}
  /* inline-size:auto lets the stretch alignment size it inside its margins. */
  .nav .cta{inline-size:auto;margin:1.1rem var(--pad) 1.4rem;justify-content:center;padding-block:1.05rem}
  .head .toggle:checked ~ .nav{max-block-size:86vh;max-block-size:86svh;overflow-y:auto}
  .head .toggle:checked ~ .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .head .toggle:checked ~ .burger span:nth-child(2){opacity:0}
  .head .toggle:checked ~ .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}

/* --- hero ---------------------------------------------------------------- */
.hero{position:relative;isolation:isolate;overflow:hidden;overflow:clip;background:#000;min-block-size:min(88vh,820px);min-block-size:min(88svh,820px);display:flex;align-items:flex-end}
.hero .plate{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:54% 44%;
  filter:grayscale(.16) contrast(1.07) brightness(.95)}
.hero .plate::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgb(9 9 10 / .88) 0%,rgb(9 9 10 / .62) 28%,rgb(9 9 10 / .16) 56%,transparent 78%),
             linear-gradient(180deg,rgb(9 9 10 / .48) 0%,transparent 24%,transparent 46%,rgb(9 9 10 / .72) 80%,rgb(9 9 10 / .95) 94%,var(--ink) 100%);
}
.hero .inner{position:relative;z-index:1;padding-block-end:clamp(3.5rem,2rem + 5vw,6.5rem)}
.hero h1{
  font-size:var(--t-display);font-stretch:102%;letter-spacing:-.028em;line-height:1.02;
  max-inline-size:13ch;text-wrap:balance;
}
.hero .lede{margin-block-start:clamp(1.1rem,.9rem + .7vw,1.5rem);max-inline-size:38ch}
.hero .acts{margin-block-start:clamp(1.75rem,1.3rem + 1.1vw,2.4rem);align-items:center}
.hero .inner::after{
  content:"";position:absolute;inset-block-end:0;inset-inline-start:0;
  inline-size:4.5rem;block-size:2px;background:var(--gold);
}

/* --- page head ----------------------------------------------------------- */
.phead{position:relative;isolation:isolate;overflow:hidden;overflow:clip;border-block-end:1px solid var(--line);background:var(--ink-2)}
.phead .plate{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:50% 40%;
  opacity:.26;filter:grayscale(.5) contrast(1.06)}
.phead .plate::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(9 9 10 / .62),var(--ink))}
.phead .inner{padding-block:clamp(5rem,3rem + 7vw,9.5rem) clamp(3rem,2rem + 3.6vw,5rem)}
.phead h1{font-size:var(--t-1);font-stretch:102%;letter-spacing:-.026em;max-inline-size:18ch}
.phead .lede{margin-block-start:1.2rem}

/* --- section heading ----------------------------------------------------- */
.shead{display:grid;gap:var(--s-4);margin-block-end:clamp(2.5rem,1.6rem + 2.6vw,4.5rem)}
@media (min-width:860px){
  .shead{grid-template-columns:minmax(0,1fr) minmax(0,.78fr);align-items:end;gap:clamp(2rem,1rem + 3vw,4.5rem)}
}
.shead h2{font-stretch:102%}
.shead .note{color:var(--fg-2);max-inline-size:46ch;margin:0}
}

@layer comp {

/* --- statement ----------------------------------------------------------- */
/* The mission. One long sentence, set large, with the attribution treated as
   metadata rather than as a caption. */
.statement{border-block:1px solid var(--line);background:var(--ink-2)}
.statement blockquote{
  margin:0;font-size:clamp(1.22rem,1rem + 1.15vw,1.95rem);font-weight:600;font-stretch:102%;
  line-height:1.3;letter-spacing:-.022em;color:#fff;text-wrap:balance;
}
.statement .mark{inline-size:2.75rem;block-size:1px;background:var(--gold);margin-block-end:var(--s-4)}

/* --- index list ---------------------------------------------------------- */
/* Rows, not cards. A card is a box drawn around content that did not ask for
   one. A rule and a number does the same job with a tenth of the noise. */
.index{border-block-start:1px solid var(--line)}
.index li{border-block-end:1px solid var(--line)}
.index .row{
  display:grid;gap:.4rem clamp(1rem,.4rem + 1.6vw,2.5rem);
  padding-block:clamp(1.6rem,1.1rem + 1.5vw,2.5rem);
  position:relative;transition:padding-inline-start .4s var(--ease-out);
}
.index li:hover .row{padding-inline-start:.9rem}
.index li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block:0;inline-size:1px;
  background:var(--gold);transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .45s var(--ease-out);
}
.index li{position:relative}
.index li:hover::before{transform:scaleY(1);transform-origin:50% 0}
.index .n{
  font-family:var(--mono);font-size:var(--t-label);font-weight:500;letter-spacing:.2em;
  color:var(--gold);font-variant-numeric:tabular-nums;padding-block-start:.35rem;
}
.index h3{margin:0}
.index p{color:var(--fg-2);font-size:var(--t-small);margin:0;max-inline-size:60ch}
@media (min-width:860px){
  .index .row{grid-template-columns:4.5rem minmax(0,1fr) minmax(0,1.15fr);align-items:start}
}

/* --- split --------------------------------------------------------------- */
.split{display:grid;gap:clamp(2rem,1.2rem + 3.4vw,5rem);align-items:center}
@media (min-width:860px){.split{grid-template-columns:repeat(2,minmax(0,1fr))}}
.frame{position:relative;overflow:hidden;overflow:clip;border:1px solid var(--line);border-radius:var(--r);isolation:isolate}
.frame img{
  inline-size:100%;block-size:100%;object-fit:cover;aspect-ratio:4/3;
  filter:grayscale(.4) contrast(1.06);
  transition:transform 1.1s var(--ease-out),filter .7s var(--ease);
}
.frame:hover img{transform:scale(1.035);filter:grayscale(0) contrast(1.04)}
.frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgb(9 9 10 / .5));
}

/* --- prose --------------------------------------------------------------- */
.prose{max-inline-size:var(--measure)}
.prose > p{color:var(--fg-2);line-height:1.78;margin:0 0 1.4em}
.prose > p:first-of-type{font-size:var(--t-lead);line-height:1.55;color:var(--fg)}
.prose h2{margin-block:2.4em .75em;font-size:clamp(1.4rem,1.1rem + 1.1vw,2rem);font-stretch:104%}
.prose h2:first-child{margin-block-start:0}
.prose ul{margin:0 0 1.6em;border-block-start:1px solid var(--line)}
.prose ul li{
  padding-block:.85rem;border-block-end:1px solid var(--line);color:var(--fg-2);
  display:grid;grid-template-columns:2.5rem 1fr;gap:1rem;align-items:baseline;
}
.prose ul li::before{
  content:counter(step,decimal-leading-zero);counter-increment:step;
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;color:var(--gold);
}
.prose ul{counter-reset:step}
.prose .pull{
  margin-block:2.4em;padding-inline-start:clamp(1.2rem,.8rem + 1.2vw,2rem);
  border-inline-start:1px solid var(--gold);
  font-size:clamp(1.25rem,1rem + 1.1vw,1.85rem);font-weight:600;font-stretch:104%;
  line-height:1.28;letter-spacing:-.026em;color:#fff;
}
.byline{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-3);margin-block-end:2.6em;padding-block-end:1.4em;border-block-end:1px solid var(--line);
}

/* --- entry list (drivers) ------------------------------------------------ */
.entries{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;overflow:clip}
@media (min-width:620px){.entries{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.entries{grid-template-columns:repeat(4,minmax(0,1fr))}}
.entry{background:var(--panel);display:flex;flex-direction:column;transition:background .4s var(--ease)}
.entry:hover{background:var(--panel-2)}
/* The portrait slot. Until a photograph is dropped in, the number carries the
   frame, which is a decision rather than an empty box. */
.entry .shot{
  position:relative;aspect-ratio:4/3.4;overflow:hidden;overflow:clip;background:
    repeating-linear-gradient(115deg,transparent 0 9px,color-mix(in oklab,var(--fg) 3%,transparent) 9px 10px),
    linear-gradient(180deg,#141418,#0D0D10);
  display:grid;place-items:center;border-block-end:1px solid var(--line);
}
.entry .shot img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;
  filter:grayscale(.35) contrast(1.05);transition:filter .6s var(--ease),transform 1s var(--ease-out)}
.entry:hover .shot img{filter:grayscale(0);transform:scale(1.03)}
.entry .shot .no{
  font-family:var(--mono);font-weight:500;font-size:clamp(2.6rem,1.4rem + 4vw,4rem);
  letter-spacing:.04em;color:color-mix(in oklab,var(--fg) 14%, transparent);
  font-variant-numeric:tabular-nums;user-select:none;
}
.entry .body{padding:clamp(1.35rem,1rem + .9vw,1.9rem);display:flex;flex-direction:column;gap:.6rem;flex:1}
.entry h3{font-size:1.22rem;font-weight:600;letter-spacing:-.02em}
.entry .role{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);
}
.entry .role.f{color:var(--gold)}
.entry .links{margin-block-start:auto;padding-block-start:1.1rem;display:flex;flex-wrap:wrap;gap:.5rem}
.entry .links a{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);
  border:1px solid var(--line);border-radius:var(--r);padding:.5rem .7rem;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.entry .links a:hover{color:var(--gold);border-color:var(--line-gold)}
.entry.open .shot{background:linear-gradient(180deg,#0F0F12,#0A0A0C)}
.entry.open h3{color:var(--fg-3)}
.entry.open .seat{
  margin-block-start:auto;align-self:flex-start;
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);border:1px dashed var(--line-gold);border-radius:var(--r);padding:.6rem .8rem;
  transition:background .25s var(--ease)}
.entry.open .seat:hover{background:var(--wash-gold)}
}

@layer comp {

/* --- dossier (partners) -------------------------------------------------- */
.dossier{border-block-start:1px solid var(--line)}
.dossier > li{border-block-end:1px solid var(--line);position:relative}
.dossier > li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block:0;inline-size:1px;background:var(--gold);
  transform:scaleY(0);transform-origin:50% 100%;transition:transform .45s var(--ease-out);
}
.dossier > li:hover::before{transform:scaleY(1);transform-origin:50% 0}
.dossier .row{
  display:grid;gap:clamp(1.2rem,.6rem + 2vw,3rem);
  padding-block:clamp(1.8rem,1.2rem + 1.8vw,3rem);
  transition:padding-inline-start .4s var(--ease-out);
}
.dossier > li:hover .row{padding-inline-start:.9rem}
@media (min-width:820px){
  .dossier .row{grid-template-columns:3.5rem 12rem minmax(0,1fr);align-items:start}
}
.dossier .n{
  font-family:var(--mono);font-size:var(--t-label);font-weight:500;letter-spacing:.2em;color:var(--gold);
  font-variant-numeric:tabular-nums;padding-block-start:.3rem;
}
.dossier .mark{
  display:flex;align-items:center;justify-content:flex-start;
  inline-size:100%;min-block-size:4.5rem;
}
.dossier .mark img{
  max-block-size:3.4rem;max-inline-size:11rem;inline-size:auto;object-fit:contain;
  opacity:.9;transition:opacity .3s var(--ease),transform .5s var(--ease-out);
}
.dossier .mark:hover img{opacity:1;transform:scale(1.03)}
.dossier .tag{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-3);margin:0 0 .55rem;
}
.dossier h3{margin:0 0 .7rem}
.dossier h3 a{transition:color .25s var(--ease)}
.dossier h3 a:hover{color:var(--gold)}
.dossier p{color:var(--fg-3);font-size:var(--t-small);margin:0;max-inline-size:62ch}

/* --- marks strip --------------------------------------------------------- */
.marks{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1.75rem,1rem + 3.4vw,4.5rem);
}
.marks img{
  block-size:clamp(30px,1.4vw + 22px,42px);inline-size:auto;max-inline-size:9rem;object-fit:contain;
  opacity:.45;filter:grayscale(1);
  transition:opacity .4s var(--ease),filter .4s var(--ease);
}
.marks a:hover img,.marks img:hover{opacity:1;filter:none}

/* --- sheet (race calendar) ----------------------------------------------- */
/* Set like an entry list off a timing screen: tabular figures, a fixed rhythm,
   and no vertical rules, because the columns already line up. */
.sheet{border-block-start:1px solid var(--line-2);font-variant-numeric:tabular-nums}
.sheet .hd{
  display:none;padding-block:.9rem;border-block-end:1px solid var(--line);
  font-family:var(--mono);font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-3);
}
.sheet li{border-block-end:1px solid var(--line);position:relative}
.sheet li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block:0;inline-size:1px;background:var(--gold);
  transform:scaleY(0);transform-origin:50% 100%;transition:transform .4s var(--ease-out);
}
.sheet li:hover::before{transform:scaleY(1);transform-origin:50% 0}
.sheet .row{
  display:grid;gap:.5rem 1.5rem;padding-block:1.35rem;align-items:baseline;
  transition:padding-inline-start .35s var(--ease-out);
}
.sheet li:hover .row{padding-inline-start:.85rem}
.sheet .n{font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;color:var(--gold)}
.sheet .ev{font-weight:600;font-size:1.02rem;letter-spacing:-.018em;color:#fff;line-height:1.25}
.sheet .dt{font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;color:var(--fg)}
.sheet .dt.set{
  display:inline-block;padding:.35rem .6rem;border:1px solid var(--line-gold);border-radius:var(--r);
  background:var(--wash-gold);color:var(--gold);font-size:.75rem;
}
.sheet .loc{font-size:var(--t-small);color:var(--fg-3)}
.sheet .web a{
  font-family:var(--mono);font-size:.6875rem;overflow-wrap:anywhere;color:var(--fg-3);word-break:break-word;
  border-block-end:1px solid transparent;transition:color .25s var(--ease),border-color .25s var(--ease);
}
.sheet .web a:hover{color:var(--gold);border-block-end-color:var(--line-gold)}
.sheet .pause{
  padding-block:1rem;border-block-end:1px solid var(--line);background:#08080A;text-align:center;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.36em;text-transform:uppercase;color:var(--gold);
}
.sheet .k{display:none;font-family:var(--mono);font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);margin-block-end:.3rem}
@media (min-width:900px){
  .sheet .hd,.sheet .row{grid-template-columns:3.25rem minmax(0,1.9fr) 8.5rem minmax(0,1.25fr) 10.75rem}
  .sheet .hd{display:grid;gap:1.5rem}
}
@media (max-width:899px){
  .sheet .row{grid-template-columns:1fr;padding-block:1.6rem;padding-inline-end:3rem}
  .sheet .n{position:absolute;inset-block-start:1.6rem;inset-inline-end:0}
  .sheet .ev{margin-block-end:1rem}
  .sheet .k{display:block}
  .sheet .row > div{margin-block-end:.9rem}
  .sheet .row > div:last-child{margin-block-end:0}
}

/* --- notice (blog holding) ----------------------------------------------- */
.notice{
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:clamp(2.5rem,1.5rem + 4.5vw,6rem);text-align:center;
}
.notice h2{max-inline-size:22ch;margin-inline:auto;font-stretch:102%}
.notice .lede{margin:1.4rem auto 0;max-inline-size:50ch}
.notice .acts{justify-content:center;margin-block-start:2.4rem}

/* --- facts (contact) ----------------------------------------------------- */
.facts{border-block-start:1px solid var(--line)}
.facts li{border-block-end:1px solid var(--line)}
.facts .row{display:grid;gap:.5rem 2rem;padding-block:clamp(1.5rem,1.1rem + 1.2vw,2.2rem)}
@media (min-width:760px){.facts .row{grid-template-columns:10rem minmax(0,1fr) minmax(0,1fr);align-items:baseline}}
.facts .k{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.facts .v{font-size:1.15rem;font-weight:600;letter-spacing:-.02em;color:#fff;word-break:break-word}
.facts .v a{transition:color .25s var(--ease)}
.facts .v a:hover{color:var(--gold)}
.facts .n{color:var(--fg-3);font-size:var(--t-small)}

/* --- form ---------------------------------------------------------------- */
.form{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:clamp(1.5rem,1rem + 2.6vw,3.4rem)}
.fields{display:grid;gap:1.4rem}
@media (min-width:700px){.fields{grid-template-columns:repeat(2,minmax(0,1fr))}.fields .wide{grid-column:1 / -1}}
.field > label{
  display:block;margin-block-end:.6rem;
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2);
}
.field input,.field select,.field textarea{
  inline-size:100%;padding:.95rem 1rem;border:1px solid var(--line);border-radius:var(--r);
  background:#0A0A0C;color:var(--fg);font:inherit;font-size:var(--t-small);
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.field textarea{min-block-size:9.5rem;resize:vertical;line-height:1.6}
.field :is(input,select,textarea):focus{outline:none;border-color:var(--gold);background:#0D0D10}
.field :is(input,textarea)::placeholder{color:#5C6369}
.field select{
  appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--fg-3) 50%),linear-gradient(135deg,var(--fg-3) 50%,transparent 50%);
  background-position:calc(100% - 1.2rem) 1.35rem,calc(100% - .9rem) 1.35rem;
  background-size:5px 5px;background-repeat:no-repeat;
}
.hp{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.field > label.consent,
.consent{
  display:flex;gap:.8rem;align-items:flex-start;
  font-family:var(--sans);font-size:var(--t-small);font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--fg-3);line-height:1.55;margin:0;
}
.consent input{inline-size:1.05rem;block-size:1.05rem;flex:none;margin-block-start:.2rem;accent-color:var(--gold)}
.hint{font-size:var(--t-small);color:var(--fg-3);margin-block-start:1.1rem}
.hint a{color:var(--gold)}

/* --- closing call -------------------------------------------------------- */
.close{position:relative;isolation:isolate;overflow:hidden;overflow:clip;border-block-start:1px solid var(--line);background:var(--ink-2)}
.close .plate{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:50% 38%;opacity:.16;filter:grayscale(.6)}
.close .plate::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(9 9 10 / .82),rgb(9 9 10 / .96))}
.close .inner{padding-block:clamp(4rem,2.5rem + 6vw,8rem);text-align:center}
.close h2{max-inline-size:22ch;margin-inline:auto;font-stretch:102%}
.close p{margin:1.3rem auto 0;color:var(--fg-2);font-size:var(--t-lead)}
.close .acts{justify-content:center;margin-block-start:2.4rem}

/* --- footer -------------------------------------------------------------- */
.foot{background:#070708;border-block-start:1px solid var(--line);padding-block:clamp(3.5rem,2.4rem + 3.6vw,5.5rem) 2rem}
.foot .cols{display:grid;gap:clamp(2rem,1.2rem + 3vw,4rem)}
@media (min-width:560px){.foot .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.foot .cols{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}}
.foot .mark img{block-size:44px;inline-size:auto;margin-block-end:1.3rem}
.foot .brandline{color:var(--fg-3);font-size:var(--t-small);max-inline-size:32ch;margin:0}
.foot h2{
  font-family:var(--mono);font-size:var(--t-label);font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin:0 0 1.2rem;
}
.foot li{margin-block-end:.7rem}
.foot li a,.foot .fl{color:var(--fg-3);font-size:var(--t-small);transition:color .25s var(--ease)}
.foot li a:hover{color:var(--gold)}
.foot .base{
  display:flex;flex-wrap:wrap;gap:.9rem;justify-content:space-between;align-items:center;
  margin-block-start:clamp(2.8rem,2rem + 2.6vw,4rem);padding-block-start:1.6rem;border-block-start:1px solid var(--line);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;color:#7E858B;
}
.foot .base a:hover{color:var(--gold)}
}

/* ---------------------------------------------------------------- motion -- */
@layer comp {

/* Reveals are scroll driven, in CSS, with no observer and no script. The rule
   that matters is the guard: without support for a view timeline the content
   is simply visible. Nothing on this site can be hidden by a script failing,
   because no script is involved. */
@keyframes rise{
  from{opacity:0;transform:translateY(1.4rem)}
  to{opacity:1;transform:none}
}
@keyframes wipe{
  from{clip-path:inset(0 100% 0 0)}
  to{clip-path:inset(0 0 0 0)}
}
@keyframes drift{
  from{transform:scale(1.08) translateY(-1.5%)}
  to{transform:scale(1.08) translateY(1.5%)}
}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rise{animation:rise .1s linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    .rise.d1{animation-range:entry 6% entry 46%}
    .rise.d2{animation-range:entry 12% entry 52%}
    .rise.d3{animation-range:entry 18% entry 58%}
    /* The hairline in a section label draws itself as the label arrives. */
    .label::after{animation:wipe .1s linear both;animation-timeline:view();animation-range:entry 8% entry 50%}
  }
}

/* A slow drift on full bleed photography, tied to scroll rather than to a
   timer, so it never moves while the page is still. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:860px){
    .hero .plate,.phead .plate{
      animation:drift 1s linear both;animation-timeline:view();animation-range:cover 0% cover 100%;
    }
  }
}

/* The masthead tightens once the page has moved. Registered custom property,
   so the padding can be animated by the scroll position itself. */
@property --hpad{syntax:"<length>";inherits:true;initial-value:18px}
.head{--hpad:18px}
.head .bar{padding-block:var(--hpad)}
@keyframes condense{
  to{--hpad:11px;background:color-mix(in oklab, var(--ink) 94%, transparent)}
}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .head{animation:condense .1s linear both;animation-timeline:scroll(root block);animation-range:0 200px}
  }
}

/* Cross document view transitions. Navigating between two static pages stops
   being a white flash and becomes a cut. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-out .22s var(--ease) both}
  ::view-transition-new(root){animation:vt-in .34s var(--ease-out) both}
}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(.9rem)}to{opacity:1;transform:none}}
}

/* ------------------------------------------------------------------ util -- */
@layer util {
.mid{text-align:center}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.measure{max-inline-size:var(--measure)}
.mt-4{margin-block-start:var(--s-4)}
.mt-5{margin-block-start:var(--s-5)}
.mt-6{margin-block-start:var(--s-6)}
.mt-7{margin-block-start:var(--s-7)}
.dim{color:var(--fg-3)}
.tail{
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;
  margin-block-start:var(--s-6);
}
.tail p{margin:0;color:var(--fg-3);font-size:var(--t-small)}
.vh{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

@layer util {
.acts.mid{justify-content:center}
}

/* --------------------------------------------------------------- plates -- */
/* Photography is named here rather than set in a style attribute on the page.
   That is not tidiness for its own sake: with no inline styles anywhere, the
   Content Security Policy can refuse inline styles outright. */
@layer comp {
.p-hero{background-image:url("hero-valor.webp?v=0a8bccb9ee")}
.p-1{background-image:url("race-3.webp?v=8d9584f950")}
.p-2{background-image:url("hero-valor.webp?v=c95fb6733e")}
.p-3{background-image:url("race-4.webp?v=74d7979b53")}
.p-4{background-image:url("photo-2.webp?v=c44dad3912")}
}

@layer base { figure{margin:0} }

@layer util {
.opener{font-size:clamp(1.2rem,1rem + 1.1vw,1.78rem);line-height:1.44;letter-spacing:-.022em;color:var(--fg);margin:0}
.opener.gap{margin-block-end:clamp(2.5rem,1.6rem + 2.6vw,4.5rem)}
.pad-y{padding-block:clamp(2rem,1rem + 4vw,5rem)}
.mid .lede{margin-inline:auto}
.mid > .lede{margin-block-start:1.6rem}
.small{font-size:var(--t-small)}
.flush{margin:0}
.short{min-block-size:7rem}
}

/* --------------------------------------------------------------- gallery -- */
@layer comp {
/* A composition rather than a wall of equal squares. The first frame carries
   the block and the rest fall in around it, so five photographs read as a
   deliberate spread and fifty would read as a feed. */
.gallery{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;overflow:clip;
  grid-template-columns:1fr;
}
.gallery .shot{position:relative;overflow:hidden;overflow:clip;background:var(--panel);aspect-ratio:1;isolation:isolate}
.gallery .shot img{
  inline-size:100%;block-size:100%;object-fit:cover;
  filter:grayscale(.3) contrast(1.05);
  transition:transform 1.1s var(--ease-out),filter .55s var(--ease);
}
.gallery .shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgb(9 9 10 / .55));
  opacity:.9;transition:opacity .45s var(--ease);
}
.gallery .cap{
  position:absolute;inset-inline:0;inset-block-end:0;z-index:2;
  padding:1rem 1.15rem;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-2);opacity:0;transform:translateY(.4rem);
  transition:opacity .35s var(--ease),transform .35s var(--ease-out);
}
@media (hover:hover){
  .gallery .shot:hover img{transform:scale(1.045);filter:grayscale(0) contrast(1.04)}
  .gallery .shot:hover::after{opacity:1}
  .gallery .shot:hover .cap{opacity:1;transform:none}
}
@media (hover:none){.gallery .cap{opacity:1;transform:none}}
@media (min-width:640px){
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1000px){
  .gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gallery .shot.lead{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
}
.feednote{
  margin-block-start:var(--s-5);padding-block-start:var(--s-4);border-block-start:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;
}
.feednote p{margin:0;color:var(--fg-3);font-size:var(--t-small)}
}

/* ----------------------------------------------------------------- blade -- */
/* The suits are not decorated with rectangles. They carry tapered blades, a
   sharp gold stroke that runs at an angle and comes to a point. That shape is
   the team's own, so it does the work here that a plain rule was doing. */
@layer comp {
.blade{
  display:block;inline-size:4.5rem;block-size:3px;background:var(--gold);
  clip-path:polygon(0 0,100% 0,86% 100%,0 100%);
}
.blade.lg{inline-size:7rem;block-size:4px}

/* Section label: the trailing rule becomes a blade that tapers away. */
.label::after{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.label:not(.plain)::after{
  block-size:2px;background:linear-gradient(90deg,var(--gold),color-mix(in oklab,var(--gold) 12%,transparent));
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}

/* Hero mark becomes a blade rather than a bar. */
.hero .inner::after{
  inline-size:5.5rem;block-size:3px;
  clip-path:polygon(0 0,100% 0,84% 100%,0 100%);
}

/* The shoulder flash. On the suit each driver carries one colour across the
   driver-left shoulder. On the card it sits in the same place on the frame. */
.entry{--accent:var(--gold)}
.entry .shot::before{
  content:"";position:absolute;inset-block-start:0;inset-inline-end:0;z-index:2;
  inline-size:32%;block-size:7.5%;background:var(--accent);
  clip-path:polygon(46% 0,100% 0,100% 100%,0 100%);
  transition:inline-size .5s var(--ease-out);
}
@media (hover:hover){.entry:hover .shot::before{inline-size:40%}}
.entry.open .shot::before{background:color-mix(in oklab,var(--fg) 10%,transparent)}
.entry .role.f{color:var(--accent)}
.entry .links a:hover{color:var(--accent);border-color:color-mix(in oklab,var(--accent) 45%,transparent)}
/* A driver's portrait is the point of the card, so it gets the room. */
.entry .shot{aspect-ratio:4/5}
.entry .shot img{filter:brightness(.93) contrast(1.05) saturate(1.02)}
.entry:hover .shot img{filter:brightness(1) contrast(1.05) saturate(1.04)}
.entry .shot::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,color-mix(in oklab,var(--panel) 72%,transparent) 88%,var(--panel));
}

/* Section divider carrying the same stroke, used between major bands. */
.rule-blade{position:relative;block-size:1px;background:var(--line);border:0;margin:0}
.rule-blade::after{
  content:"";position:absolute;inset-block-start:-1px;inset-inline-start:0;
  inline-size:5.5rem;block-size:3px;background:var(--gold);
  clip-path:polygon(0 0,100% 0,84% 100%,0 100%);
}
}

/* Driver identity colours, matched to the shoulder flash and helmet on each
   suit. Set as classes rather than inline styles so the policy can keep
   refusing inline style outright. */
@layer comp {
.entry.d-elliott{--accent:#E31C79}   /* PANTONE 213 C, from the spec sheet */
.entry.d-philpot{--accent:#18E03F}
.entry.d-pineiro{--accent:#E5E317}
.entry.d-knight{--accent:#9213A3}
.entry.d-shaw{--accent:#E4002B}
}

/* ------------------------------------------------------------- suit marks -- */
/* Two shapes taken straight off the race suit.

   The sweep is the long gold stroke that runs the flank of the suit: thick
   through the middle, tapering to a point at both ends. It replaces the flat
   hairline wherever a section needs a real division rather than a whisper.

   The fan is the chest graphic, a set of blades converging to points. It sits
   behind flat panels at low opacity, the way a livery sits on bodywork, so the
   page carries the team's own marks rather than generic geometry. */
@layer comp {
.sweep{
  display:block;border:0;margin:0;block-size:clamp(12px,1.4vw,20px);
  background:url("sweep.svg?v=c213a2546d") 50% 50%/100% 100% no-repeat;
}
.sweep.flip{transform:scaleX(-1)}

.phead{position:relative}
.phead::after,
.statement::after,
.close::before{
  content:"";position:absolute;pointer-events:none;z-index:0;
  background-image:url("fan.svg?v=78fb3328e0");background-repeat:no-repeat;
}
.phead::after{
  inset-block:0;inset-inline-end:calc(var(--pad) * -.4);
  inline-size:min(26vw,300px);background-position:100% 55%;background-size:contain;opacity:.085;
}
.statement{position:relative;overflow:hidden;overflow:clip}
.statement::after{
  inset-block:-10%;inset-inline-end:calc(var(--pad) * -.5);
  inline-size:min(28vw,330px);background-position:100% 50%;background-size:contain;opacity:.10;
}
.close::before{
  inset-block:-8%;inset-inline-start:calc(var(--pad) * -.5);
  inline-size:min(26vw,300px);background-position:0 50%;background-size:contain;opacity:.09;
  transform:scaleX(-1);transform-origin:0 50%;
}
.close .inner,.statement .grid,.phead .inner{position:relative;z-index:1}

/* The fan is decoration. Anyone who has asked for less motion or is printing
   the page does not need it. */
@media print{.sweep,.phead::after,.statement::after,.close::before{display:none}}
}

/* On a narrow screen the hero text sits under the photograph rather than beside
   it, so the left weighted scrim is the wrong shape and the crop cuts the
   driver in half. Both change. */
@layer comp {
@media (max-width:760px){
  .hero .plate{background-position:45% 40%}
  .hero .plate::after{
    background:linear-gradient(180deg,rgb(9 9 10 / .58) 0%,rgb(9 9 10 / .12) 20%,rgb(9 9 10 / .5) 48%,rgb(9 9 10 / .9) 74%,var(--ink) 100%);
  }
  .hero{min-block-size:min(84vh,760px);min-block-size:min(84svh,760px)}
}
}

/* ============================================================== touch pass ==
   Everything below exists because a finger is not a mouse pointer and iOS is
   not Chrome. None of it changes the desktop layout.
   ========================================================================= */
@layer comp {

/* A tap on iOS paints a grey box over the element. Removing it is only
   acceptable if something replaces it, so every interactive thing gets a
   visible pressed state instead. */
a,button,label,summary,input,select,textarea{-webkit-tap-highlight-color:transparent}
@media (pointer:coarse){
  .act:active,.nav a:active,.entry .links a:active,.sheet .web a:active,
  .foot li a:active,.dossier h3 a:active,.marks a:active{opacity:.62}
  .index li:active,.dossier > li:active,.sheet li:active{background:var(--panel-2)}
}

/* Form fields must be at least 16px on iOS. Below that Safari zooms the whole
   page in on focus and leaves the visitor stranded halfway through the form. */
.field input,.field select,.field textarea{font-size:1rem}

/* Hit areas. The visual size of these can stay small, the touchable size
   cannot: 44px is the floor Apple sets and it is the right one. */
@media (pointer:coarse){
  .entry .links a,.sheet .web a,.foot li a,.dossier h3 a,.hint a,.facts .v a{
    min-block-size:44px;display:inline-flex;align-items:center;
  }
  .entry .links a{padding-inline:.85rem}
  .foot li{margin-block-end:.25rem}
  .foot li a{padding-block:.35rem}
  .sheet .web a{padding-block:.6rem}
  .marks a,.dossier .mark a{min-block-size:44px;display:flex;align-items:center}
  /* Small mono type is fine to read at arm's length on a desktop and not on a
     phone held at a distance. Nothing drops below 11px. */
  .entry .links a{font-size:.6875rem}
  .sheet .k{font-size:.625rem}
  .foot .base{font-size:.75rem}
}

/* Hover belongs to devices that have a pointer. On a touch screen a hover state
   sticks after the tap, so the card stays lit and the page looks stuck. */
@media (hover:none){
  .frame:hover img,.entry:hover .shot img,.gallery .shot:hover img{transform:none}
  .index li:hover .row,.dossier > li:hover .row,.sheet li:hover .row{padding-inline-start:0}
  .index li:hover::before,.dossier > li:hover::before,.sheet li:hover::before{transform:scaleY(0)}
  .marks img{opacity:.62;filter:grayscale(1)}
  .act:hover{color:var(--fg);border-color:var(--bd)}
  .act--fill:hover{background:var(--gold);border-color:var(--gold);color:#100E08}
}

/* Landscape on a phone is a short, wide viewport. The hero should not eat the
   whole of it before a word has been read. */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-block-size:auto;padding-block-start:clamp(2rem,8vh,4rem)}
  .hero .inner{padding-block-end:clamp(2rem,7vh,3.5rem)}
  .phead .inner{padding-block:clamp(2.5rem,9vh,4rem) clamp(2rem,7vh,3rem)}
}

/* Long words in a narrow column, mostly championship names and domains. */
@media (max-width:420px){
  .sheet .ev,.dossier h3,.entry h3,.facts .v{overflow-wrap:anywhere}
}
}

/* The audit found these. Every one is a real target a finger has to hit, and
   every one was under the 44px floor. The visual size is unchanged, only the
   touchable area grows. */
@layer comp {
@media (pointer:coarse){
  .skip{min-block-size:44px;display:inline-flex;align-items:center}
  .head .mark{min-block-size:44px;display:flex;align-items:center}
  /* An iPad Pro in landscape is a touch device showing the full width nav. */
  .nav > a,.nav .has > a,.nav .cta{min-block-size:44px;display:inline-flex;align-items:center}
  .foot .base a{min-block-size:44px;display:inline-flex;align-items:center}
  .entry.open .seat{min-block-size:44px}
  .field > label.consent,.consent{min-block-size:44px}
  /* Nothing on a phone drops below 11px. */
  .gallery .cap,.sheet .k,.sheet .pause,.sheet .hd,.foot .base{font-size:.6875rem}
}
}

/* Last two from the re-check: the calendar website links landed a fraction under
   44px, and a short partner name such as "eba" made a target only 30px wide. */
@layer comp {
@media (pointer:coarse){
  .sheet .web a{padding-block:.75rem}
  .dossier h3 a{min-inline-size:44px}
  /* Tapping a field label focuses its input, so give it a little more to aim at
     without pushing the form apart. */
  .field > label{padding-block-end:.15rem}
}
}

/* ============================================================
   DRIVER MARK
   The photographs were soft at card size and the five renders never
   sat as one set. A drawn helmet replaces them: identical geometry on
   every card, the driver's colour in the visor, the gold blade off the
   suit above it. Vector, so it is sharp on any screen at any size, and
   it costs no image request.
   ============================================================ */
@layer comp {
  .entry .shot .fig{position:absolute;inset:0;inline-size:100%;block-size:100%;z-index:0;
    transition:transform 1s var(--ease-out) }

  .entry .fig .f-sil{fill:#08080A}
  .entry .fig .f-rim{fill:none;stroke:rgba(237,238,239,.13);stroke-width:2}
  .entry .fig .f-rim{stroke:color-mix(in oklab,var(--fg) 13%,transparent)}
  .entry .fig .f-edge{fill:none;stroke:rgba(237,238,239,.20);stroke-width:2.5;stroke-linecap:round}
  .entry .fig .f-vent{fill:#191920}
  .entry .fig .f-gld{fill:var(--gold);opacity:.72;transition:opacity .5s var(--ease)}

  /* The visor is the only saturated colour on the card, so it is knocked
     back off the raw identity value or it shouts over the name. */
  .entry .fig .f-vis{fill:var(--accent)}
  .entry .fig .f-visd{fill:#000000;opacity:.19}
  .entry .fig .f-visd2{fill:#000000;opacity:.15}
  .entry .fig .f-vish{fill:#FFFFFF;opacity:.10}
  .entry .fig .f-gloss{fill:#FFFFFF;opacity:.12}

  /* The ground behind the mark carries a wash of the driver's colour, which
     is what stops eight identical helmets reading as eight identical cards. */
  .entry:not(.open) .shot{background:linear-gradient(180deg,#191920,#0C0C0F)}
  .entry:not(.open) .shot{
    background:
      radial-gradient(116% 72% at 50% 25%, color-mix(in oklab,var(--accent) 20%,transparent), transparent 62%),
      repeating-linear-gradient(115deg,transparent 0 9px,color-mix(in oklab,var(--fg) 3%,transparent) 9px 10px),
      linear-gradient(180deg,#191920,#0C0C0F); }

  .entry .shot::after{z-index:1}
  .entry .shot::before{z-index:2}

  /* The number stops being the fallback and becomes a race number in the
     corner of the frame, which is where a number lives on a kart. */
  .entry:not(.open) .shot .no{position:absolute;z-index:3;
    inset-block-start:.9rem;inset-inline-start:1.05rem;
    font-size:.75rem;letter-spacing:.18em;
    color:rgba(237,238,239,.34);color:color-mix(in oklab,var(--fg) 34%,transparent) }

  /* An open seat gets the same helmet, unlit. */
  .entry.open .fig{opacity:.4}
  .entry.open .fig .f-vis{fill:rgba(237,238,239,.15);fill:color-mix(in oklab,var(--fg) 15%,transparent)}
  .entry.open .fig .f-gld{opacity:.25}

  @media (hover:hover){
    .entry:hover .fig{transform:scale(1.03)}
    .entry:hover .fig .f-gld{opacity:1}
  }
}