/* Archivo, self-hosted (SIL OFL): no request is made to Google Fonts */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; src: url("../fonts/archivo-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; src: url("../fonts/archivo-latin.woff2") format("woff2"); 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; }
/* Valverde Motorsport — the dark world.
   Black and charcoal, white type, red as an energy source (never a fill). One family: Archivo.
   Display = condensed black caps. Navigation + buttons = bold caps. Supporting lines = sentence case.
   Every effect is static-first: without JS (or with reduced motion) the pages are simply long, readable and complete. */

:root {
  --bg: #08090a;
  --bg2: #0e1012;
  --panel: #14171a;
  --t: #f3f2ef;
  --dim: rgba(243, 242, 239, .62);
  --line: rgba(243, 242, 239, .16);
  --red: #e1111f;
  --glow: 0 0 16px rgba(225, 17, 31, .6);
  --pad: clamp(20px, 4vw, 64px);
  --gut: clamp(14px, 2vw, 32px);
  --max: 1760px;
  --edge: max(var(--pad), calc((100vw - var(--sbw, 0px) - var(--max)) / 2 + var(--pad)));   /* left/right margin of the content measure */
  --hud: 76px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --io: cubic-bezier(.76, 0, .24, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--t); font: 400 clamp(16px, 1.05vw, 18px)/1.6 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
picture { display: contents; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3, h4, ul, ol, figure, dl, dd { margin: 0; padding: 0; }
h2, h3 { text-wrap: balance; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 600; background: var(--t); color: var(--bg); padding: .6rem 1rem; }
.skip:focus { left: 8px; }
body.menu-open { overflow: hidden; }
[hidden] { display: none !important; }

/* ---------- type ---------- */
.mono { font: 500 .92rem/1.45 'Archivo', sans-serif; letter-spacing: .005em; }
.dim { color: var(--dim); }
.red { color: var(--red); }
.huge { font-weight: 900; font-stretch: 62%; text-transform: uppercase; letter-spacing: -.012em; line-height: .8; }
.d2 { font-size: clamp(3.2rem, 10vw, 11rem); }
.d2s { font-size: clamp(3rem, 8.4vw, 9.4rem); }
.d3 { font-size: clamp(2.2rem, 5vw, 5.2rem); line-height: .86; }
.d4 { font-size: clamp(1.6rem, 2.6vw, 2.5rem); line-height: .92; }
.lede { font-size: clamp(1.15rem, 1.7vw, 1.65rem); line-height: 1.32; font-weight: 500; font-stretch: 88%; letter-spacing: -.01em; max-width: 30ch; }
.say { font-weight: 800; font-stretch: 72%; font-size: clamp(2.2rem, 5.6vw, 6rem); line-height: .96; letter-spacing: -.02em; text-wrap: balance; }
.say em { font-style: normal; color: var(--red); }
.small { font-size: .95rem; line-height: 1.55; }
.measure { max-width: 46ch; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gut); }
.rule { border-top: 1px solid var(--line); }

/* ---------- links, buttons ---------- */
.link, .btn, .links a, .menu-btn { font: 700 .78rem/1 'Archivo', sans-serif; font-stretch: 88%; letter-spacing: .09em; text-transform: uppercase; }
.link { display: inline-flex; gap: .7em; align-items: baseline; padding: .9em 0; border-bottom: 1px solid var(--line); transition: color .3s, gap .45s var(--ease), border-color .3s; }
.link:hover { color: var(--red); gap: 1.2em; border-color: var(--red); }
.btn { position: relative; display: inline-flex; gap: .8em; align-items: baseline; background: var(--red); color: #fff; padding: 1.25em 1.8em; overflow: hidden; transition: box-shadow .4s; }
.btn::before { content: ""; position: absolute; inset: 0; background: #fff; transform: translateY(101%); transition: transform .5s var(--ease); }
.btn span { position: relative; transition: color .3s; }
.btn:hover { box-shadow: 0 0 30px rgba(225, 17, 31, .5); }
.btn:hover::before { transform: none; }
.btn:hover span { color: var(--bg); }

/* ---------- cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 700; pointer-events: none; opacity: 0; transition: opacity .3s; }
.cursor.on { opacity: 1; }
.cursor i { position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; mix-blend-mode: difference; }
.cursor b { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.cursor u { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); display: grid; place-items: center; font: 700 .55rem/1 'Archivo', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #fff; text-decoration: none; transition: transform .45s var(--ease), background .3s, border-color .3s; }
.cursor[data-s="link"] u { transform: scale(1.5); border-color: var(--red); }
.cursor[data-s="view"] u { transform: scale(2.1); background: var(--red); border-color: var(--red); }
.cursor[data-s="view"] u::after { content: "View"; transform: scale(.5); }
.cursor.down u { transform: scale(.8); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- HUD (navigation): the driver's number and the team wordmark are one lock-up ---------- */
.hud { position: fixed; z-index: 100; top: 0; left: 0; right: 0; height: var(--hud); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--edge); background: linear-gradient(to bottom, rgba(8, 9, 10, .96) 0%, rgba(8, 9, 10, .86) 45%, rgba(8, 9, 10, 0) 100%); pointer-events: none; }
.hud > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 16px; }
.num { position: relative; display: grid; place-items: center; flex: none; width: 46px; height: 46px; font-weight: 900; font-stretch: 62%; font-size: 1.45rem; line-height: 1; }
.num svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.num circle { fill: none; stroke-width: 2; }
.num .track { stroke: rgba(255, 255, 255, .22); }
.num .prog { stroke: var(--red); stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(225, 17, 31, .8)); }
.num span { position: relative; }
.brand__logo { display: block; height: 27px; width: auto; transition: opacity .4s, transform .5s var(--ease); }
.brand:hover .brand__logo { transform: translateX(3px); }
.hud__r { display: flex; align-items: center; gap: clamp(1.2rem, 2.6vw, 2.6rem); }
.links { display: none; gap: clamp(1.2rem, 2.4vw, 2.4rem); transition: opacity .4s, transform .5s var(--ease); }
.links a { position: relative; padding: .9rem 0; }
.links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .45rem; height: 1px; background: var(--red); box-shadow: var(--glow); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.links a:hover::after, .links a[aria-current="page"]::after { transform: scaleX(1); }
.menu-btn { display: inline-flex; align-items: center; gap: .7rem; padding: .9rem 0; min-height: 46px; }
.menu-btn i { display: block; width: 24px; height: 8px; position: relative; }
.menu-btn i::before, .menu-btn i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .4s var(--ease), top .4s var(--ease); }
.menu-btn i::before { top: 0; } .menu-btn i::after { top: 6px; }
.menu-btn[aria-expanded="true"] i::before { top: 3px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] i::after { top: 3px; transform: rotate(-45deg); }
@media (min-width: 1000px) { .links { display: flex; } }
.hud.min .links, .hud.min .brand__logo, body.menu-open .links { opacity: 0; transform: translateY(-8px); pointer-events: none; }
body.menu-open .hud { background: none; }
body.menu-open .hud .brand__logo { opacity: 1; transform: none; }
@media (max-width: 599px) { .brand { gap: 12px; } .num { width: 42px; height: 42px; font-size: 1.3rem; } .brand__logo { height: 22px; } }

/* ---------- menu ---------- */
.overlay { position: fixed; inset: 0; z-index: 90; background: var(--bg); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: clamp(30px, 5vw, 90px); padding: 0 var(--edge); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .8s var(--io), visibility 0s .8s; }
.overlay.open { clip-path: inset(0); visibility: visible; transition: clip-path .8s var(--io); }
.overlay__nav { align-self: center; padding: calc(var(--hud) + 10px) 0 30px; }
.overlay__nav a { display: grid; grid-template-columns: 3rem 1fr; align-items: baseline; padding: .3vh 0; border-top: 1px solid var(--line); overflow: hidden; }
.overlay__nav a:last-child { border-bottom: 1px solid var(--line); }
.overlay__nav small { font: 600 .8rem/1 'Archivo', sans-serif; letter-spacing: .04em; color: var(--dim); }
.overlay__nav span { display: block; font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: clamp(3.2rem, 14vh, 9.5rem); line-height: 1; transform: translateY(105%); transition: transform .9s var(--ease), color .3s, padding .5s var(--ease); }
.overlay.open .overlay__nav span { transform: none; transition-delay: calc(var(--i) * 70ms + 300ms), 0s, 0s; }
.overlay__nav a:hover span, .overlay__nav a:focus-visible span { color: var(--red); padding-left: .15em; }
.overlay__nav a[aria-current="page"] span { color: var(--red); }
/* the preview is a photograph at its own 3:2 shape, set on the same centre line as the list */
.overlay__side { align-self: center; padding: calc(var(--hud) + 10px) 0 30px; }
.overlay__ph { position: relative; aspect-ratio: 3 / 2; background: var(--panel); overflow: hidden; }
.overlay__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .7s ease, transform 1.4s var(--ease); }
.overlay__ph img.on { opacity: .92; transform: none; }
.overlay__mail { margin: 1.1rem 0 0; color: var(--dim); }
.overlay__mail a:hover { color: var(--t); }
@media (max-width: 999px), (max-height: 560px) { .overlay { grid-template-columns: 1fr; } .overlay__side { display: none; } .overlay__nav span { font-size: clamp(3rem, min(16vw, 13vh), 7rem); } }

/* ---------- cinematic page transition: the wordmark, then the page ---------- */
.curtain { position: fixed; inset: 0; z-index: 500; pointer-events: none; display: none; }
.js .curtain { display: block; }
.curtain .slat { position: absolute; top: 0; bottom: 0; width: 20.2%; background: #050506; transform: scaleY(0); transform-origin: bottom; }
.curtain .slat::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--red); box-shadow: 0 0 18px var(--red); }
.curtain .slat:nth-child(1) { left: 0; } .curtain .slat:nth-child(2) { left: 20%; } .curtain .slat:nth-child(3) { left: 40%; } .curtain .slat:nth-child(4) { left: 60%; } .curtain .slat:nth-child(5) { left: 80%; }
.curtain__label { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; opacity: 0; transition: opacity .16s; }
.curtain__logo { display: block; width: min(52vw, 400px); height: auto; }
.curtain__label b { display: block; margin-top: clamp(18px, 3vh, 34px); font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: clamp(4.4rem, 16vw, 16rem); line-height: .8; }
.curtain__label b:empty { display: none; }
body.t-in .curtain .slat { transform: scaleY(1); transition: transform .6s var(--io); transition-delay: calc(var(--k) * 55ms); }
body.t-in .curtain__label { opacity: 1; transition-delay: .35s; }
body.t-out .curtain .slat { transform: scaleY(0); transform-origin: top; transition: transform .7s var(--io); transition-delay: calc(var(--k) * 55ms); }
body.t-hold .curtain .slat { transform: scaleY(1); transition: none; }
body.t-hold .curtain__label { opacity: 1; }

/* ---------- photographs ---------- */
.ph { position: relative; background: var(--panel); overflow: hidden; }
.ph img { width: 100%; }
.ph--bare { background: none; overflow: visible; }
.js #page img { opacity: 0; transition: opacity .8s ease, transform 1.4s var(--ease), filter .5s ease; }
.js #page img.loaded { opacity: 1; }
figcaption { margin-top: .7rem; font-size: .85rem; }

/* ---------- reveal ---------- */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }
.js .wipe { background: transparent; }
.js #page .wipe img { -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% 0% no-repeat; mask: linear-gradient(#000, #000) 0 0 / 100% 0% no-repeat; transition: -webkit-mask-size 1.4s var(--io) var(--d, 0s), mask-size 1.4s var(--io) var(--d, 0s), opacity .8s ease, transform 1.4s var(--ease), filter .5s ease; }
.js #page .wipe.in img { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.js .line { display: block; overflow: hidden; padding-top: .04em; margin-top: -.04em; }
.js .line > span { display: block; transform: translateY(108%); transition: transform 1.1s var(--ease) var(--d, 0s); }
.js .ready .line > span, .js .in .line > span, .js .line.in > span { transform: none; }
/* a page's own title rises only once the curtain's label has gone */
.js .ready .phead .line > span, .js .ready .hero__name .line > span { transition-delay: calc(.26s + var(--d, 0s)); }

/* the V: a quiet signature between chapters of the home page */
.vmark { width: 34px; height: auto; display: block; filter: drop-shadow(0 0 14px rgba(225, 17, 31, .45)); }
.vdiv { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); padding: clamp(34px, 4.4vw, 70px) var(--edge); }
.vdiv i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line) 30%, var(--line) 70%, transparent); transform: scaleX(0); transition: transform 1.2s var(--ease); }
.vdiv i:first-child { transform-origin: right; } .vdiv i:last-child { transform-origin: left; }
.vdiv.in i { transform: scaleX(1); }
.js .vdiv.rv { opacity: 1; transform: none; }
.js #page .vdiv .vmark { opacity: 0; transform: translateY(8px) scale(.8); transition: opacity .8s .3s, transform .9s .3s var(--ease); }
.js #page .vdiv.in .vmark { opacity: 1; transform: none; }

/* ============================ HOME: hero ============================
   Opening: the photograph with the name set large in the space the photograph leaves free (never over the car).
   Then the film cuts in and the name settles to the lower left, above the supporting line. */
.hero { position: relative; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; isolation: isolate; --mx: 66%; --my: 60%; --p: 0; --hfs: min(14.4vw, 24svh); }
.hero__img, .hero__vid { position: absolute; inset: -3%; z-index: -3; }
.hero__img { will-change: transform; transform: translate3d(calc(var(--ox, 0) * -1px), calc(var(--oy, 0) * -1px + var(--p) * 90px), 0) scale(calc(1.04 + var(--p) * .12)); transform-origin: 66% 60%; }
.hero__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--px, 68%) var(--py, 30%); filter: brightness(.94) contrast(1.06) saturate(1.05); }
.js .hero__img { opacity: 0; clip-path: inset(44% 0 44% 0); transition: opacity 1s ease, clip-path 1.25s var(--io); }
.js .ready .hero__img { opacity: 1; clip-path: inset(0); }
.hero__vid { display: none; }
.js .hero__vid { display: block; overflow: hidden; clip-path: inset(0 100% 0 0); }
.hero__vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; filter: contrast(1.04) saturate(1.04); }
.hero.is-live .hero__vid { clip-path: inset(0); transition: clip-path .5s cubic-bezier(.7, 0, .15, 1); }
.hero__edge { display: none; }
.js .hero__edge { display: block; position: absolute; top: -2%; bottom: -2%; left: 0; width: 3px; z-index: -2; background: var(--red); box-shadow: 0 0 40px 6px rgba(225, 17, 31, .8); opacity: 0; pointer-events: none; }
.hero.is-live .hero__edge { animation: edge .5s cubic-bezier(.7, 0, .15, 1) forwards; }
@keyframes edge { 0% { left: 0; opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
/* light follows the pointer across the film */
.hero__dim { position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: 0; background: radial-gradient(circle min(46vw, 520px) at var(--mx) var(--my), rgba(8, 9, 10, 0) 0%, rgba(8, 9, 10, .55) 55%, rgba(8, 9, 10, .88) 100%); transition: opacity .8s ease; }
.hero.is-live .hero__dim { opacity: .2; }
/* legibility: the left (where the name sits) and the foot (where the supporting line sits) are held down */
.hero__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to top, rgba(8, 9, 10, .9) 0%, rgba(8, 9, 10, .3) 24%, rgba(8, 9, 10, 0) 44%), linear-gradient(100deg, rgba(8, 9, 10, .6) 0%, rgba(8, 9, 10, .22) 42%, rgba(8, 9, 10, 0) 66%), linear-gradient(to bottom, rgba(8, 9, 10, .5), rgba(8, 9, 10, 0) 18%); }
.hero.is-live .hero__shade { background: linear-gradient(to top, rgba(8, 9, 10, .92) 0%, rgba(8, 9, 10, .5) 24%, rgba(8, 9, 10, 0) 50%), linear-gradient(to bottom, rgba(8, 9, 10, .5), rgba(8, 9, 10, 0) 16%); }
.hero__name { position: relative; z-index: 2; align-self: flex-start; margin: calc(var(--hud) + clamp(8px, 2.6svh, 36px)) 0 0; padding: 0 var(--edge); font-size: var(--hfs); transform-origin: var(--edge) 0; transform: translate3d(calc(var(--p) * -9vw), calc(var(--dy, 0px) + var(--p) * 30px), 0) scale(var(--sc, 1)); opacity: calc(1 - var(--p) * 1.15); will-change: transform; }
.hero__name .l2 { color: var(--red); font-size: 1.05em; }   /* VALVERDE is set a touch larger so both lines share one width */
.hero__name .l2 > span { margin-left: .017em; }
.hero.is-live:not(.settled) .hero__name { transition: transform .9s cubic-bezier(.7, 0, .15, 1) .08s; }
.hero__bar { position: relative; z-index: 2; margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 1.2rem 2rem; flex-wrap: wrap; padding: 0 var(--edge) clamp(20px, 3.6svh, 40px); }
.hero__bar .lede { margin: 0; max-width: none; font-size: clamp(1.1rem, 1.5vw, 1.45rem); line-height: 1.3; }
.hero__cd { display: block; text-align: right; }
.hero__cd .cap { display: block; font: 600 clamp(.9rem, 1.05vw, 1.05rem)/1.2 'Archivo', sans-serif; color: rgba(243, 242, 239, .8); }
.cdm { display: inline-flex; gap: .56em; margin-top: .55rem; font-weight: 900; font-stretch: 62%; font-size: clamp(2rem, 3.5vw, 3.5rem); line-height: .9; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.cdm b { position: relative; font-weight: inherit; padding-bottom: 1.15rem; text-align: center; }
.cdm b::after { content: attr(data-l); position: absolute; left: 0; right: 0; bottom: 0; font: 500 .74rem/1 'Archivo', sans-serif; font-stretch: 100%; letter-spacing: .02em; color: var(--dim); }
.cdm b + b::before { content: ":"; position: absolute; left: -.4em; top: -.05em; color: rgba(243, 242, 239, .4); }
.hero.is-live .hero__bar { text-shadow: 0 1px 24px rgba(0, 0, 0, .6); }
@media (max-width: 599px), (orientation: portrait) {
  /* phones and upright tablets: the picture is a band, the name sits beneath it at full measure */
  .hero { min-height: 0; padding-top: calc(var(--hud) + 10px + 66.667vw + clamp(22px, 5vw, 44px)); }
  .hero__img, .hero__vid { inset: auto 0 auto 0; top: calc(var(--hud) + 10px); height: auto; aspect-ratio: 3 / 2; }
  .hero__img { transform: none; }
  .hero__img img { object-position: 50% 50%; }
  .hero__img::after, .hero__vid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8, 9, 10, 0) 62%, var(--bg) 100%); }
  .js .hero__edge { top: calc(var(--hud) + 10px); bottom: auto; height: 66.667vw; }
  .hero__dim, .hero__shade,   .hero__name { margin: 0; font-size: calc((100vw - 2 * var(--edge)) / 3.97); transform: translate3d(0, calc(var(--p) * 20px), 0); }
  .hero.is-live:not(.settled) .hero__name { transition: none; }
  .hero__bar { margin-top: clamp(16px, 3.4vw, 30px); flex-direction: column; align-items: flex-start; gap: 1.4rem; padding-bottom: clamp(34px, 8vw, 70px); }
  .hero__bar .lede { max-width: none; font-size: clamp(1.1rem, 3.2vw, 1.6rem); text-wrap: balance; }
  .hero__cd { text-align: left; }
  .cdm { font-size: clamp(2.2rem, 9vw, 4rem); }
}

/* ============================ statement ============================ */
.statement { position: relative; padding: clamp(90px, 12vw, 190px) 0 clamp(60px, 8vw, 120px); background: radial-gradient(120% 80% at 80% 0%, #15181c 0%, var(--bg) 60%); }
.statement .say { grid-column: 1 / -1; font-size: clamp(2.4rem, 8.2vw, 9.4rem); }
.statement__side { grid-column: 1 / span 5; margin-top: clamp(40px, 5.4vw, 86px); }
.facts { grid-column: 8 / -1; margin-top: clamp(40px, 5.4vw, 86px); border-top: 1px solid var(--line); }
.facts div { display: flex; justify-content: space-between; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--dim); }
.facts dd { font-weight: 900; font-stretch: 62%; font-size: clamp(2rem, 3.6vw, 3.8rem); line-height: .9; font-feature-settings: "tnum" 1; }
.facts dd.red { color: var(--red); text-shadow: 0 0 24px rgba(225, 17, 31, .35); }
@media (max-width: 899px) {
  .statement { padding-top: 64px; }
  .statement .say { font-size: clamp(2.3rem, 10.6vw, 4.8rem); }
  .statement .say br { display: none; }
  .statement__side, .facts { grid-column: 1 / -1; }
}

/* ============================ the photograph expands ============================
   Two words hold the corners; the photograph grows beneath them until it fills the screen.
   RACING sits in the blurred background, SINCE 2013 on the tarmac: neither ever covers the kart. */
.expand { position: relative; background: var(--bg); }
.expand__frame { position: relative; overflow: hidden; }
.expand__frame img { width: 100%; }
.expand__big { display: none; }
.expand__cap { margin: 0; padding: 14px var(--edge) 0; font: 500 .92rem/1.4 'Archivo', sans-serif; color: var(--dim); }
.expand.on { height: 230vh; }
.expand.on .expand__stick { position: sticky; top: 0; height: 100svh; overflow: hidden; --f: min(13.6vw, 21svh); }
.expand.on .expand__frame { position: absolute; inset: 0; background: none; clip-path: inset(var(--iy, 13%) var(--ix, 15%)); }
.expand.on .expand__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--epx, 60%) var(--epy, 74%); }
.js #page .expand__frame img { transition: opacity .8s ease; }
.expand.on .expand__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(5, 5, 6, .34), rgba(5, 5, 6, 0) 30%, rgba(5, 5, 6, 0) 68%, rgba(5, 5, 6, .5)); pointer-events: none; }
.expand.on .expand__big { display: block; position: absolute; z-index: 2; font-size: var(--f); white-space: nowrap; pointer-events: none; text-shadow: 0 0 80px rgba(0, 0, 0, .45); }
.expand.on .expand__big.a { left: var(--edge); top: calc(var(--hud) + 2.2svh); transform: translate3d(calc((1 - var(--q, 0)) * 5vw), calc((1 - var(--q, 0)) * 3svh), 0); }
.expand.on .expand__big.b { right: var(--edge); bottom: 4.4svh; color: var(--red); transform: translate3d(calc((1 - var(--q, 0)) * -5vw), calc((1 - var(--q, 0)) * -3svh), 0); }
.expand.on .expand__cap { position: absolute; z-index: 3; left: var(--edge); bottom: 4.4svh; padding: 0; max-width: 24ch; color: rgba(243, 242, 239, .9); text-shadow: 0 1px 14px rgba(0, 0, 0, .7); opacity: var(--q, 0); }
@media (orientation: portrait) {
  /* upright screens: the photograph keeps its own shape in the middle, one word above it, one below */
  .expand.on { height: 190vh; }
  .expand.on .expand__stick { --f: min(27vw, 15svh); }
  .expand.on .expand__frame { inset: auto 0; top: 50%; aspect-ratio: 3 / 2; transform: translateY(-50%); clip-path: inset(var(--iy, 10%) var(--ix, 9%)); }
  .expand.on .expand__frame img { object-position: var(--epx, 50%) var(--epy, 50%); }
  .expand.on .expand__shade { display: none; }
  .expand.on .expand__big.a { top: auto; bottom: calc(50% + 33.4vw + 3svh); transform: translate3d(calc((1 - var(--q, 0)) * 4vw), 0, 0); }
  .expand.on .expand__big.b { bottom: auto; top: calc(50% + 33.4vw + 3svh); font-size: min(calc((100vw - 2 * var(--edge)) / 3.94), 15svh); transform: translate3d(calc((1 - var(--q, 0)) * -4vw), 0, 0); }
  .expand.on .expand__cap { left: var(--edge); right: var(--edge); bottom: auto; top: calc(50% + 33.4vw + 3svh + min(calc((100vw - 2 * var(--edge)) / 3.94), 15svh) * .8 + 14px); max-width: none; color: var(--dim); text-shadow: none; }
}

/* ============================ THE LAP (career) ============================ */
.lap { position: relative; background: linear-gradient(to bottom, var(--bg) 0%, #0b0c0e 40%, var(--bg) 100%); }
.lap__head { padding: clamp(50px, 7vw, 110px) var(--edge) clamp(20px, 3vw, 40px); }
.lap__head .huge { font-size: clamp(1.5rem, 2.6vw, 2.6rem); line-height: .9; margin-top: .45rem; }
.lap__item { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gut); padding: clamp(30px, 4vw, 60px) var(--edge); border-top: 1px solid var(--line); align-items: center; }
.lap__year { grid-column: 1 / span 4; grid-row: 1; font-size: clamp(5rem, 13vw, 14rem); }
.lap__txt { grid-column: 1 / span 4; grid-row: 2; margin-top: 1.4rem; }
.lap__lab { margin: 0; }
.lap__txt h3 { margin: .5rem 0 1rem; }
.lap__txt > p:not(.lap__lab) { color: var(--dim); max-width: 40ch; }
.lap__fig { grid-column: 5 / -1; grid-row: 1 / span 2; justify-self: end; }
.lap__fig figcaption { text-align: right; }
.lap__svg { display: none; }
/* pinned: one screen, six moments, the lap drawn underneath */
.lap.on .lap__track { height: var(--h, 700vh); }
.lap.on .lap__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; --tb: 5svh; --th: 13svh; --top: calc(var(--hud) + 14px); --foot: calc(var(--tb) + var(--th) + 30px); }
.lap.on .lap__head { position: absolute; z-index: 3; top: calc(var(--hud) + 6px); left: var(--edge); padding: 0; }
.lap.on .lap__item { position: absolute; inset: 0; grid-template-rows: minmax(0, 1fr); padding: var(--top) var(--edge) var(--foot); border: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s .7s; pointer-events: none; }
.lap.on .lap__item.is-active { opacity: 1; visibility: visible; transition: opacity .7s ease .1s, visibility 0s; pointer-events: auto; }
.lap.on .lap__year { grid-row: 1; align-self: start; margin-top: 82px; font-size: min(13vw, 24svh); line-height: .76; transform: translate3d(0, 40px, 0); opacity: 0; transition: transform 1s var(--ease), opacity .7s; }
.lap.on .is-active .lap__year { transform: none; opacity: 1; transition-delay: .15s; }
.lap.on .lap__txt { grid-row: 1; align-self: end; margin: 0; }
.lap.on .lap__txt h3 { font-size: clamp(2rem, min(4.7vw, 8.2svh), 5rem); margin: .4rem 0 .9rem; }
.lap.on .lap__txt > * { transform: translate3d(0, 24px, 0); opacity: 0; transition: transform .9s var(--ease), opacity .6s; }
.lap.on .is-active .lap__txt > * { transform: none; opacity: 1; }
.lap.on .is-active .lap__txt > :nth-child(1) { transition-delay: .3s; } .lap.on .is-active .lap__txt > :nth-child(2) { transition-delay: .38s; } .lap.on .is-active .lap__txt > :nth-child(3) { transition-delay: .46s; } .lap.on .is-active .lap__txt > :nth-child(4) { transition-delay: .54s; }
.lap.on .lap__txt > p:last-child, .lap.on .lap__txt > .link:last-child { margin-bottom: 0; }
.lap.on .lap__fig { grid-row: 1; justify-self: end; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 10px; transform: translate3d(40px, 0, 0); opacity: 0; transition: transform 1.2s var(--ease), opacity .8s; }
.lap.on .is-active .lap__fig { transform: none; opacity: 1; transition-delay: .2s; }
.lap.on .lap__fig .ph { max-width: 100%; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); }
.lap.on .lap__fig img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100svh - var(--top) - var(--foot) - 34px); }
.lap.on .lap__fig figcaption { margin: 0; }
/* a portrait keeps its shape and its full height; the words take the wider column */
.lap.on .lap__item--tall .lap__txt { grid-column: 1 / span 6; }
.lap.on .lap__item--tall .lap__txt h3 { font-size: clamp(2.2rem, min(6vw, 10svh), 6.4rem); }
.lap.on .lap__item--tall .lap__txt > p:not(.lap__lab) { max-width: 44ch; }
.lap.on .lap__item--tall .lap__fig { grid-column: 7 / -1; }
.lap.on .lap__svg { display: block; position: absolute; left: var(--edge); bottom: var(--tb); height: var(--th); width: calc(100% - var(--edge) * 2); overflow: visible; z-index: 2; }
.lap__ref { fill: none; stroke: none; }
.lap__base { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lap__run { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(225, 17, 31, .8)); }
.lap__mk { fill: var(--bg); stroke: rgba(255, 255, 255, .5); stroke-width: 1.5; }
.lap__mk.done { stroke: var(--red); fill: var(--red); }
.lap__lb { fill: rgba(243, 242, 239, .6); font: 600 12px 'Archivo', sans-serif; letter-spacing: .04em; }
.lap__lb.on { fill: #fff; }
.lap__car { fill: #fff; filter: drop-shadow(0 0 8px var(--red)); }
@media (min-width: 900px) and (orientation: landscape) and (max-height: 700px) {
  .lap.on .lap__head .huge { display: none; }
  .lap.on .lap__year { margin-top: 36px; font-size: min(13vw, 22svh); }
  .lap.on .lap__txt > p:not(.lap__lab) { font-size: .92rem; line-height: 1.5; }
}
@media (max-width: 899px), (orientation: portrait) {
  .lap__item { display: block; }
  .lap__txt { margin-top: 1rem; }
  .lap__fig { margin-top: 1.4rem; }
  .lap__fig figcaption { text-align: left; }
  .lap.on .lap__stage { --tb: 3.4svh; --th: 10svh; --top: calc(var(--hud) + 38px); --foot: calc(var(--tb) + var(--th) + 26px); }
  .lap.on .lap__head .huge { display: none; }
  .lap.on .lap__item { display: flex; flex-direction: column; gap: 0; }
  .lap.on .lap__year { margin: 0; font-size: min(24vw, 11svh); }
  .lap.on .lap__txt { margin: 12px 0 0; align-self: stretch; }
  .lap.on .lap__txt h3 { font-size: clamp(1.7rem, min(7.6vw, 4.4svh), 3rem); margin: .25rem 0 .5rem; }
  .lap.on .lap__txt > p:not(.lap__lab) { font-size: clamp(.9rem, 2vw, 1.05rem); line-height: 1.5; max-width: 52ch; }
  .lap.on .lap__fig { margin: 16px 0 0; flex: 1 1 0; min-height: 0; height: auto; align-items: flex-start; justify-content: flex-start; gap: 8px; transform: translate3d(0, 24px, 0); }
  .lap.on .lap__fig .ph { flex: 0 1 auto; min-height: 0; display: flex; }
  .lap.on .lap__fig img { max-height: 100%; width: auto; min-height: 0; object-fit: contain; }
  /* the frame carries no panel colour or box shadow here: if a browser leaves the frame wider than the photograph once its height is
     capped, nothing is painted beside the picture. The shadow follows the photograph's own pixels instead. */
  .lap.on .lap__fig .ph { background: transparent; box-shadow: none; filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .5)); }
  .lap.on .lap__fig img { object-position: left top; }
  .lap.on .lap__item--tall .lap__txt, .lap.on .lap__item--tall .lap__fig { grid-column: auto; }
}

/* ============================ RESULTS ============================
   Left: choose a round, read the weekend in a sentence. Right: the photograph. Beneath both: the scoreboard. */
.race { position: relative; padding: clamp(80px, 10vw, 160px) 0 clamp(70px, 9vw, 140px); background: radial-gradient(90% 70% at 100% 0%, #1a0d10 0%, #0a0b0d 60%); }
.race__head { margin-bottom: clamp(28px, 4vw, 60px); }
.race__head .huge { margin-top: .9rem; }
.race__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gut); grid-template-rows: auto 1fr auto; }
.race__nav { grid-column: 1 / span 4; grid-row: 1; }
.race__hint { margin: 0 0 .7rem; }
.race__tabs { border-top: 1px solid var(--line); }
.race__tab { display: grid; grid-template-columns: 2.6rem 1fr; align-items: baseline; width: 100%; text-align: left; padding: 1.1rem 0; border-bottom: 1px solid var(--line); color: var(--dim); transition: color .35s, padding .5s var(--ease); }
.race__tab small { font: 600 .8rem/1 'Archivo', sans-serif; }
.race__tab b { font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: clamp(1.8rem, 3.4vw, 3.4rem); line-height: .9; }
.race__tab em { display: block; font: 500 .8rem/1.35 'Archivo', sans-serif; font-style: normal; margin-top: .5rem; }
.race__tab:hover, .race__tab[aria-selected="true"] { color: var(--t); }
.race__tab[aria-selected="true"] { padding-left: .7rem; box-shadow: inset 2px 0 0 var(--red); }
.race__tab[aria-selected="true"] small { color: var(--red); }
.race__panel { display: contents; }
.race__ph { grid-column: 5 / -1; grid-row: 1 / span 2; }
.race__sum { grid-column: 1 / span 4; grid-row: 2; align-self: end; padding-top: clamp(24px, 3vw, 40px); }
.race__sum .lede { margin: 0 0 .8rem; max-width: none; }
.res { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--gut); border-top: 2px solid var(--t); }
.res div { padding: .9rem 0 0; }
.res .mono { color: var(--dim); }
.res b { display: block; margin-top: .5rem; font-weight: 900; font-stretch: 62%; font-size: clamp(2.2rem, 4.6vw, 4.6rem); line-height: .9; font-feature-settings: "tnum" 1; }
.res b small { font: 500 .8rem/1 'Archivo', sans-serif; font-stretch: 100%; letter-spacing: .02em; color: var(--dim); margin-left: .35em; }
.res b.hi { color: var(--red); text-shadow: 0 0 24px rgba(225, 17, 31, .35); }
.race .res { grid-column: 1 / -1; grid-row: 3; margin-top: clamp(30px, 3.6vw, 56px); }
.race .res b { font-size: clamp(2.6rem, 7vw, 7.4rem); }
.res--next { grid-template-columns: 1fr; }
.race__panel.in-anim > * { animation: panelin .9s var(--ease) both; }
.race__panel.in-anim > .race__sum { animation-delay: .08s; } .race__panel.in-anim > .res { animation-delay: .14s; }
@keyframes panelin { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) {
  .race__body { display: flex; flex-direction: column; }
  .race__ph { margin-top: 30px; }
  .race .res { margin-top: 26px; }
  .race__sum { padding-top: 26px; align-self: stretch; }
  .race__sum .lede { max-width: 32ch; }
}
@media (max-width: 599px) {
  .res { grid-template-columns: repeat(2, 1fr); row-gap: 1.2rem; }
  .res--next { grid-template-columns: 1fr; }
}

/* ============================ RACE WEEK ============================
   The clock and the action on the left, the poster on the right, the place across the foot. */
.week { position: relative; overflow: hidden; isolation: isolate; padding: clamp(70px, 7.4vw, 116px) var(--edge) clamp(30px, 3.4vw, 54px); background: #050506; }
.week__bg { position: absolute; inset: 0; z-index: -2; background: #0b0c0e; }
.week__bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s; filter: saturate(.9) contrast(1.05); }
.week__bg video.on { opacity: .42; }
.week::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 70% at 30% 90%, rgba(8, 9, 10, .25), rgba(8, 9, 10, .9)), linear-gradient(to bottom, #050506, rgba(8, 9, 10, 0) 24%); }
.week__top { display: flex; justify-content: space-between; gap: .4rem 1.5rem; flex-wrap: wrap; font-size: .95rem; }
.week__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gut); align-items: center; margin: clamp(26px, 3.6vw, 56px) 0 0; }
.week__info { grid-column: 1 / span 7; container-type: inline-size; position: relative; z-index: 3; }
.week__poster { grid-column: 8 / -1; perspective: 900px; z-index: 3; }
.week__grid--wide .week__info { grid-column: 1 / span 5; }
.week__grid--wide .week__poster { grid-column: 6 / -1; }
.week__poster .tilt { transform: rotateY(calc(var(--rx, 0) * 7deg)) rotateX(calc(var(--ry, 0) * -5deg)); transition: transform .5s var(--ease); will-change: transform; }
.week__poster .ph { box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .8); }
.week__where { margin: 0; }
.board { display: flex; gap: .24em; margin: clamp(14px, 1.8vw, 24px) 0 .9rem; font-weight: 900; font-stretch: 62%; font-size: clamp(3.4rem, 11vw, 13rem); line-height: .8; font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }
@supports (font-size: 1cqi) { .board { font-size: min(21.6cqi, 14rem); } }
.board div { position: relative; padding-bottom: 1.6rem; }
.board div::after { content: attr(data-l); position: absolute; left: .08em; bottom: 0; font: 500 .8rem/1 'Archivo', sans-serif; font-stretch: 100%; letter-spacing: .02em; color: var(--dim); }
.board div + div::before { content: ""; position: absolute; left: -.12em; top: 8%; bottom: 1.7rem; width: 1px; background: var(--line); }
.cd-note { margin: 0; font-size: .9rem; }
.cd-done { display: none; }
.is-done .board, .is-done .cd-note { display: none; }
.is-done .cd-done { display: block; font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: clamp(3.6rem, 12vw, 12rem); line-height: .85; margin: 1rem 0; color: var(--red); text-shadow: 0 0 40px rgba(225, 17, 31, .4); }
.week__info .lede, .week__info .measure { margin: clamp(22px, 2.6vw, 38px) 0 0; }
.week__info .btn { margin-top: clamp(20px, 2.2vw, 30px); }
/* the place: it travels exactly the width it has to spare, so it is never cut by the screen */
.week__name { display: block; container-type: inline-size; margin: clamp(30px, 4vw, 64px) 0 0; line-height: .86; }
.week__name span { display: inline-block; white-space: nowrap; margin-left: -.03em; font-size: clamp(3.4rem, 16.6vw, 19rem); color: rgba(243, 242, 239, .94); transform: translate3d(var(--wx, 0px), 0, 0); will-change: transform; }
@supports (font-size: 1cqi) { .week__name span { font-size: calc(92cqi / 4.878); } }
.week--sm { padding-top: clamp(40px, 5vw, 80px); }
@media (max-width: 899px) {
  .week__grid { display: flex; flex-direction: column; align-items: stretch; }
  .week__poster { order: -1; width: min(100%, 460px); margin: 4px 0 30px; }
  .week__grid--wide .week__poster { width: 100%; margin: 4px 0 30px; }
}

/* ============================ 2027 ============================
   The year stands whole above the artwork it names; the words run down the right-hand column. */
.next { position: relative; padding: clamp(80px, 10vw, 160px) 0 clamp(90px, 11vw, 170px); overflow: hidden; background: radial-gradient(60% 55% at 12% 62%, rgba(225, 17, 31, .13) 0%, rgba(225, 17, 31, 0) 72%), #0b0c0e; }
.next__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(22px, 2.8vw, 44px) var(--gut); margin-top: clamp(14px, 1.6vw, 24px); }
.next__big { grid-column: 1 / span 8; grid-row: 1; container-type: inline-size; margin: 0; line-height: .8; }
.next__big span { display: block; margin-left: -.022em; white-space: nowrap; font-size: clamp(8rem, 36vw, 40rem); color: transparent; -webkit-text-stroke: 1.4px rgba(243, 242, 239, .36); }
@supports (font-size: 1cqi) { .next__big span { font-size: calc(100cqi / 1.652); } }
.next__say { grid-column: 9 / -1; grid-row: 1; align-self: end; margin: 0; font-size: clamp(1.9rem, 3.3vw, 3.5rem); }
.next__ph { grid-column: 1 / span 8; grid-row: 2; }
.next__txt { grid-column: 9 / -1; grid-row: 2; align-self: start; }
.next__cta { display: flex; gap: 1rem 1.6rem; flex-wrap: wrap; align-items: center; margin: 1.6rem 0 0; }
@media (max-width: 899px) {
  .next__grid { display: block; }
  .next__say { margin: 18px 0 14px; font-size: clamp(2rem, 8vw, 3.4rem); max-width: 14ch; }
  .next__ph { margin-top: 34px; }
  .next__txt { margin-top: 26px; }
}

/* ============================ footer ============================ */
.foot { position: relative; padding: clamp(80px, 10vw, 160px) 0 0; overflow: hidden; background: linear-gradient(180deg, #0b0c0e 0%, #060607 100%); }
.foot__mail { display: block; margin-top: .6rem; font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: clamp(2rem, 6vw, 6.4rem); line-height: .92; overflow-wrap: anywhere; transition: color .3s, text-shadow .3s; }
.foot__mail:hover { color: var(--red); text-shadow: 0 0 40px rgba(225, 17, 31, .4); }
.foot__cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem var(--gut); margin-top: clamp(50px, 7vw, 100px); padding-top: 1.6rem; border-top: 1px solid var(--line); }
.foot__about { grid-column: 1 / span 5; } .foot__about p { max-width: 34ch; }
.foot__pages { grid-column: 8 / span 2; } .foot__follow { grid-column: 11 / span 2; }
.foot h4, .foot__h { margin: 0 0 1rem; font: 700 .8rem/1 'Archivo', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 1rem; }
.foot li { padding: .2rem 0; } .foot li a:hover { color: var(--red); }
/* the wordmark closes the page, margin to margin */
.foot__brand { margin-top: clamp(50px, 7vw, 110px); }
.foot__brand img { display: block; width: 100%; height: auto; }
.js #page .foot__brand img, .js #page .foot__brand img.loaded { opacity: .2; transition: opacity .8s; }
.js #page .foot:hover .foot__brand img.loaded { opacity: .4; }
.foot__bot { margin: 0; padding: clamp(20px, 2.4vw, 32px) 0 26px; font-size: .85rem; color: var(--dim); }
.foot--plain { padding-top: clamp(50px, 6vw, 90px); }
.foot--plain .foot__cols { margin-top: 0; }
@media (max-width: 899px) { .foot__about { grid-column: 1 / -1; } .foot__pages { grid-column: 1 / span 6; } .foot__follow { grid-column: 7 / span 6; } }

/* ============================ inner pages ============================
   Every page opens with its name set to the full measure. */
.phead { position: relative; padding: calc(var(--hud) + clamp(30px, 5vw, 80px)) 0 clamp(44px, 6vw, 96px); overflow: hidden; background: radial-gradient(70% 90% at 90% 0%, #171a1f 0%, var(--bg) 62%); }
.phead .wrap { container-type: inline-size; }
.phead .mono { margin: 0; color: var(--dim); font-weight: 600; font-size: 1rem; }
.phead .huge { font-size: clamp(4rem, 22vw, 26rem); margin: clamp(14px, 2.2vw, 34px) 0 0 -.03em; white-space: nowrap; }
@supports (font-size: 1cqi) { .phead .huge { font-size: calc(100cqi / var(--fit, 3.9)); } }
.phead .lede { margin: clamp(22px, 3vw, 44px) 0 0; }

/* season */
.chap { position: relative; padding: clamp(80px, 10vw, 160px) 0 clamp(44px, 6vw, 96px); border-top: 1px solid var(--line); }
.chap__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gut); align-items: end; }
.chap__no { grid-column: 1 / span 2; color: var(--red); font-size: clamp(3.4rem, 11vw, 12rem); text-shadow: 0 0 40px rgba(225, 17, 31, .3); }
.chap__title { grid-column: 3 / -1; font-size: clamp(4rem, 14vw, 16rem); }
.chap__title--2 { font-size: clamp(3rem, 12.4vw, 14.4rem); }
.chap__meta { display: flex; justify-content: space-between; gap: .4rem 1.5rem; flex-wrap: wrap; margin: 0; padding: clamp(18px, 2.4vw, 32px) 0; color: var(--dim); font: 500 .95rem/1.4 'Archivo', sans-serif; }
.chap__full { margin: 0 auto; width: min(100%, calc(var(--max) - 2 * var(--pad))); }   /* edge to edge, until the screen is wider than the measure */
.chap__txt { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gut); padding: clamp(28px, 4vw, 60px) 0; }
.chap__txt .res { grid-column: 1 / span 6; align-self: start; }
.chap__txt .body { grid-column: 8 / -1; }
.chap__txt .body p { color: var(--dim); }
.chap__txt .body .lede { color: var(--t); }
.spread { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(26px, 3.4vw, 56px) var(--gut); align-items: var(--al, start); margin-top: clamp(20px, 3vw, 50px); }
.spread figure { grid-column: var(--c) / span var(--s); }
.spread:hover figure:not(:hover) .ph img, .jrow:hover figure[data-lb]:not(:hover) .ph img { filter: brightness(.55); }
.spread figure:hover .ph img, .jrow figure[data-lb]:hover .ph img { transform: scale(1.03); }
.spread--lb figure, .jrow figure[data-lb] { cursor: none; }
/* the quote and the man who said it */
.chap--quote .grid { align-items: center; }
.chap--quote .a { grid-column: 1 / span 8; }
.chap--quote .b { grid-column: 9 / -1; }
.chap--quote .say { margin: 1.2rem 0 0; font-size: clamp(1.8rem, 4.2vw, 4.4rem); line-height: 1; }
.chap__end { margin-top: clamp(20px, 3vw, 44px); align-items: start; }
.chap__end .a { grid-column: 1 / span 4; align-self: center; }
.chap__end .a .say { margin: 0; font-size: clamp(1.8rem, 3.1vw, 3.3rem); }
.chap__end .b { grid-column: 6 / -1; }
.chap__end .b .btn { margin-top: 1.4rem; }
@media (max-width: 899px) {
  .chap__head { display: block; } .chap__no { display: block; font-size: 3rem; margin-bottom: .6rem; }
  .chap__txt { display: block; } .chap__txt .body { margin-top: 26px; }
  .spread { display: block; } .spread figure { margin-bottom: 26px; }
  .chap--quote .grid, .chap__end { display: block; }
  .chap--quote .b { margin-top: 34px; }
  .chap--quote .say { font-size: clamp(1.7rem, 6.6vw, 3rem); }
  .chap__end .b { margin-top: 30px; }
}

/* a row of pictures that share one height and fill the measure */
.jrow { display: flex; gap: var(--gut); align-items: flex-start; }
.jrow > figure { flex: var(--r, 1.5) 1 0%; min-width: 0; }
.jrow + .jrow { margin-top: clamp(28px, 3.6vw, 58px); }
.vid { background: #000; } .vid video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* three across is too small on a tablet: two share the first line, the third takes the next */
@media (min-width: 700px) and (max-width: 999px) { .jrow--3 { flex-wrap: wrap; row-gap: clamp(28px, 3.6vw, 58px); } .jrow--3 > figure:last-child { flex-basis: 100%; } }
@media (max-width: 699px) { .jrow { display: block; } .jrow > figure + figure { margin-top: 26px; } .jrow + .jrow { margin-top: 26px; } }

/* story */
.phead--lead { padding-bottom: clamp(50px, 7vw, 110px); }
.lead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gut); align-items: end; margin-top: clamp(30px, 4.4vw, 70px); }
.lead .lede { grid-column: 1 / span 3; margin: 0 0 2.2rem; max-width: none; }
.lead__fig { grid-column: 4 / -1; justify-self: end; width: 100%; }
.story { padding: clamp(70px, 9vw, 140px) 0; border-top: 1px solid var(--line); }
.story__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gut); align-items: start; }
.story__no { grid-column: 1 / span 4; position: sticky; top: calc(var(--hud) + 20px); align-self: start; }
.story__no b { display: block; font-size: clamp(5rem, 14vw, 15rem); line-height: .78; color: transparent; -webkit-text-stroke: 1.2px rgba(243, 242, 239, .42); }
.story__no .mono { margin: 1rem 0 0; color: var(--dim); }
.story__main { grid-column: 5 / -1; }
.story__main .d3 { margin-bottom: 1.6rem; }
.story__main p { color: var(--dim); }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gut); align-items: start; }
.cols2 > p:last-child, .cols2 > div > p:last-child { margin-bottom: 0; }
.story__main .say { color: var(--t); font-size: clamp(1.8rem, 3vw, 3.1rem); }
.story__main .say--end { font-size: clamp(1.9rem, 3.5vw, 3.7rem); max-width: 26ch; }
.story__cta { margin: 1.8rem 0 0; }
.honors { border-top: 1px solid var(--line); }
.honors li { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.honors li span:first-child { color: var(--dim); font-variant-numeric: tabular-nums; }
.story__media { margin-top: clamp(40px, 5vw, 80px); }
@media (max-width: 899px) {
  .lead { display: block; } .lead .lede { margin-bottom: 1.6rem; }
  .story__top { display: block; } .story__no { position: static; margin-bottom: 1.2rem; } .story__no b { font-size: 5rem; }
  .cols2 { display: block; } .cols2 > * + * { margin-top: 1.4rem; }
  .story__media { margin-top: 34px; }
}

/* gallery */
.gal { padding-bottom: clamp(70px, 9vw, 140px); }
.lb { position: fixed; inset: 0; z-index: 650; background: rgba(5, 5, 6, .97); color: var(--t); display: none; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
.lb.open { display: flex; animation: panelin .4s ease; }
.lb img { max-height: 82vh; max-width: 100%; width: auto; }
.lb p { margin: 1rem 0 0; }
.lb button { position: absolute; width: 56px; height: 56px; font-size: 1.7rem; transition: color .2s; }
.lb button:hover { color: var(--red); }
.lb .x { top: 12px; right: 12px; } .lb .pv { left: 8px; top: 50%; translate: 0 -50%; } .lb .nx { right: 8px; top: 50%; translate: 0 -50%; }

/* partners */
.pintro { padding-bottom: clamp(60px, 8vw, 120px); }
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gut); align-items: center; }
.split > .a { grid-column: 1 / span 6; } .split > .b { grid-column: 8 / -1; }
.pintro .split > .a { grid-column: 1 / span 4; } .pintro .split > .b { grid-column: 5 / -1; }
.pintro .lede { margin-bottom: 1.6rem; }
.pintro__cta { margin: 1.8rem 0 0; }
/* the car is a cut-out with air above and below it: the caption tucks up under the wheels */
.car figcaption { margin-top: -9%; text-align: right; }
.car img { filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .55)); }
.sec { padding: clamp(80px, 10vw, 160px) 0; }
.sec__h { margin-bottom: clamp(30px, 5vw, 70px); }
.sec__lede { margin: 1.6rem 0 clamp(30px, 5vw, 70px); }
.why li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gut); padding: clamp(26px, 3vw, 46px) 0; border-top: 1px solid var(--line); align-items: start; }
.why li:last-child { border-bottom: 1px solid var(--line); }
.why .no { grid-column: 1 / span 2; font-weight: 900; font-stretch: 62%; font-size: clamp(3rem, 6vw, 6rem); line-height: .8; color: var(--red); text-shadow: 0 0 30px rgba(225, 17, 31, .3); }
.why h3 { grid-column: 3 / span 4; }
.why p { grid-column: 8 / -1; margin: 0; color: var(--dim); max-width: 52ch; font-size: .98rem; }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--t); }
.tier { padding: 1.4rem var(--gut) 2rem 0; border-right: 1px solid var(--line); transition: background .5s; }
.tier + .tier { padding-left: var(--gut); } .tier:last-child { border-right: 0; padding-right: 0; }
.tier:hover { background: linear-gradient(to bottom, rgba(255, 255, 255, .03), transparent); }
.tier__tag { margin: 0; font: 700 .8rem/1.4 'Archivo', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.tier h3 { margin: .6rem 0 1rem; }
.tier__blurb { color: var(--dim); font-size: .95rem; min-height: 4.8em; }
.tier li { padding: .7rem 0; border-top: 1px solid var(--line); font-size: .92rem; }
.tier--hi { box-shadow: inset 0 2px 0 var(--red); margin-top: -2px; padding-top: calc(1.4rem + 2px); } .tier--hi .tier__tag { color: var(--red); }
.split--goals > .a { grid-column: 1 / span 4; } .split--goals > .b { grid-column: 6 / -1; }
.split--goals h2 { margin: 1rem 0 1.6rem; }
.split--goals .say { margin: 1.6rem 0 0; font-size: clamp(1.8rem, 3vw, 3rem); }
.split--contact { align-items: start; }
.split--contact h2 { margin: 1rem 0 1.6rem; }
.contact__intro { margin: 0; max-width: 44ch; font-size: 1.08rem; line-height: 1.6; color: var(--dim); }
.contact { margin-top: 2rem; display: grid; gap: 1rem; }
.contact dt { color: var(--dim); font-size: .92rem; } .contact dd a:hover { color: var(--red); }
.field { display: block; margin-bottom: 1.5rem; } .field > span { display: block; margin-bottom: .2rem; color: var(--dim); font-size: .95rem; }
.field input, .field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: inherit; padding: .7rem 0; font: inherit; border-radius: 0; transition: border-color .3s, box-shadow .3s; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 1px 0 var(--red); }
.hp { position: absolute; left: -9999px; } .err { color: var(--red); font-size: .9rem; margin-top: 1rem; }
@media (max-width: 899px) {
  .split { display: block; } .split > .b { margin-top: 36px; }
  .car figcaption { margin-top: -7%; text-align: left; }
  .why li { display: block; } .why .no { display: block; margin-bottom: .8rem; } .why h3 { margin-bottom: .8rem; }
  .tiers { grid-template-columns: 1fr; } .tier, .tier + .tier { padding: 1.4rem 0; border-right: 0; border-bottom: 1px solid var(--line); } .tier__blurb { min-height: 0; }

}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .js .rv, .js .line > span, .js .hero__img { opacity: 1; transform: none; clip-path: none; }
  .js #page .wipe img { -webkit-mask: none; mask: none; }
  .js #page .vdiv .vmark { opacity: 1; transform: none; } .vdiv i { transform: none; }
  .curtain, .js .hero__vid, .js .hero__edge { display: none; }
}

/* ======================= THE CAREER ARCHIVE =======================
   Chapters > seasons > race weekends. The photograph or the finishing position leads every level. */
.js .cx-flat { display: none; }
.cx-flat { padding: 40px 0 80px; color: var(--dim); } .cx-flat h2, .cx-flat h3, .cx-flat h4 { color: var(--t); margin: 1.4em 0 .4em; }
[data-career].cx-in { animation: cxin .7s var(--ease) both; }
@keyframes cxin { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.cx-crumbs { display: flex; flex-wrap: wrap; gap: .4rem .7rem; margin: 0 0 1.4rem; font: 600 .9rem/1.2 'Archivo', sans-serif; color: var(--dim); }
.cx-crumbs a:hover { color: var(--t); } .cx-crumbs [aria-current] { color: var(--t); }

/* the chapters */
.cx-hub { display: grid; grid-template-columns: 2fr 1.12fr; gap: clamp(26px, 3vw, 52px) var(--gut); padding-bottom: clamp(70px, 9vw, 140px); }
.cx-group { display: flex; flex-direction: column; }
.cx-gl { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.cx-gl b { font: 800 1.05rem/1 'Archivo', sans-serif; font-stretch: 80%; letter-spacing: .06em; text-transform: uppercase; }
.cx-gl span { color: var(--dim); font-size: .95rem; font-variant-numeric: tabular-nums; }
.cx-panels { display: grid; gap: var(--gut); flex: 1; }
.cx-panels--2 { grid-template-columns: 1fr 1fr; } .cx-panels--1 { grid-template-columns: 1fr; }
.cx-panel { position: relative; display: block; min-height: clamp(460px, 74svh, 800px); overflow: hidden; background: var(--panel); isolation: isolate; }
.cx-panel__ph { position: absolute; inset: 0; z-index: -2; }
.cx-panel__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), filter .6s, opacity .8s; }
.cx-panel--rental img { object-position: 50% 30%; } .cx-panel--pro img { object-position: 36% 50%; } .cx-panel--cars img { object-position: 50% 38%; }
.cx-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8, 9, 10, .92) 0%, rgba(8, 9, 10, .55) 34%, rgba(8, 9, 10, 0) 62%); }
.cx-panel::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--red); box-shadow: var(--glow); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.cx-panel:hover::after, .cx-panel:focus-visible::after { transform: scaleX(1); }
.cx-panel:hover img { transform: scale(1.04); }
.cx-hub:hover .cx-panel:not(:hover) img { filter: brightness(.6); }
.cx-panel__t { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(18px, 2vw, 30px); }
.cx-panel__y { display: block; font: 700 .9rem/1 'Archivo', sans-serif; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: rgba(243, 242, 239, .8); margin-bottom: .7rem; }
.cx-panel h2 { font-size: clamp(2.3rem, 3.9vw, 4.4rem); line-height: .86; }
.cx-panel p { margin: .8rem 0 0; max-width: 28ch; color: rgba(243, 242, 239, .82); font-size: .98rem; line-height: 1.4; }
.cx-more { display: inline-flex; gap: .6em; margin-top: 1.1rem; font: 700 .78rem/1 'Archivo', sans-serif; font-stretch: 88%; letter-spacing: .09em; text-transform: uppercase; transition: gap .45s var(--ease), color .3s; }
.cx-panel:hover .cx-more { gap: 1.1em; color: var(--red); }
@media (max-width: 899px) {
  .cx-hub { grid-template-columns: 1fr; }
  .cx-panels--2 { grid-template-columns: 1fr; }
  .cx-panel { min-height: clamp(420px, 66svh, 620px); }
}

/* a discipline: its stages, its seasons */
.cx-stages, .cx-seasons { padding-bottom: clamp(40px, 6vw, 90px); }
.cx-stage { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: var(--gut); align-items: baseline; padding: clamp(24px, 3vw, 44px) 0; border-top: 1px solid var(--line); transition: padding .5s var(--ease), color .3s; }
.cx-stage__y { font-size: clamp(2.6rem, 6vw, 6.4rem); color: var(--dim); transition: color .3s; }
.cx-stage h3 { font-size: clamp(2.2rem, 5vw, 5.4rem); } .cx-stage p { grid-column: 2; margin: 0; color: var(--dim); }
.cx-stage:hover { padding-left: .6rem; } .cx-stage:hover .cx-stage__y { color: var(--red); }
.cx-seasons { border-bottom: 1px solid var(--line); }
.cx-season { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.6fr) minmax(0, 1fr) 2rem; gap: var(--gut); align-items: center; padding: clamp(22px, 2.6vw, 38px) 0; border-top: 1px solid var(--line); transition: padding .5s var(--ease); }
.cx-season__y { font-size: clamp(4.4rem, 10vw, 10.5rem); line-height: .78; transition: color .3s; }
.cx-season__t h3 { font-size: clamp(1.8rem, 3.2vw, 3.4rem); line-height: .9; }
.cx-season__t p { margin: .7rem 0 0; color: var(--dim); max-width: 46ch; }
.cx-season__t .cx-season__m { font-size: .9rem; margin-top: .9rem; color: rgba(243, 242, 239, .5); }
.cx-season__ph { aspect-ratio: 3 / 2; overflow: hidden; background: var(--panel); }
.cx-season__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity .8s; }
.cx-season:hover { padding-left: .6rem; } .cx-season:hover .cx-season__y { color: var(--red); } .cx-season:hover .cx-season__ph img { transform: scale(1.04); }
.cx-season__a { font-size: 1.5rem; color: var(--dim); transition: transform .45s var(--ease), color .3s; } .cx-season:hover .cx-season__a { transform: translateX(6px); color: var(--red); }
@media (max-width: 899px) {
  .cx-stage { display: block; } .cx-stage h3 { margin-top: .5rem; } .cx-stage p { margin-top: .8rem; }
  .cx-season { grid-template-columns: 1fr; gap: 14px; } .cx-season__a { display: none; } .cx-season__ph { order: -1; }
}

/* a karting stage */
.cx-stage-body { padding-bottom: clamp(50px, 7vw, 110px); }
.cx-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 120px); align-items: start; margin-bottom: clamp(40px, 5vw, 80px); }
.cx-prose p { color: var(--dim); max-width: 60ch; } .cx-prose p:first-child { color: var(--t); }
.cx-stage-body .honors { margin-top: 0; }
@media (max-width: 899px) { .cx-cols { grid-template-columns: 1fr; gap: 28px; } }

/* photographs: rows that share one height and fill the measure; nothing is cropped */
.cx-gal { margin-top: clamp(26px, 3vw, 48px); }
.cx-row { display: flex; gap: var(--gut); align-items: flex-start; width: 100%; max-width: calc(86svh * var(--rsum)); }
.cx-row + .cx-row { margin-top: clamp(20px, 2.4vw, 36px); }
.cx-row > .cx-fig { flex: var(--r) 1 0%; min-width: 0; margin: 0; }
.cx-fig { cursor: none; }
.cx-fig .ph img { width: 100%; height: auto; transition: transform 1.2s var(--ease), opacity .8s, filter .5s; }
.cx-fig:hover .ph img { transform: scale(1.03); }
.cx-row:hover .cx-fig:not(:hover) .ph img { filter: brightness(.6); }
@media (max-width: 699px) { .cx-row { display: block; max-width: none; } .cx-row > .cx-fig + .cx-fig { margin-top: 20px; } .cx-fig { max-width: none !important; } }

/* a season */
.cx-shead { position: relative; padding: calc(var(--hud) + clamp(26px, 4vw, 64px)) 0 clamp(40px, 5vw, 80px); background: radial-gradient(70% 90% at 90% 0%, #171a1f 0%, var(--bg) 62%); }
.cx-shead__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gut); align-items: start; }
.cx-shead__t { grid-column: 1 / span 6; }
.cx-shead__y { font-size: clamp(6rem, 17vw, 17rem); line-height: .76; margin: 0 0 0 -.03em; }
.cx-shead__n { margin: clamp(18px, 2vw, 30px) 0 clamp(18px, 2vw, 28px); font: 800 clamp(1.5rem, 2.6vw, 2.6rem)/1.05 'Archivo', sans-serif; font-stretch: 78%; letter-spacing: -.01em; text-transform: uppercase; }
.cx-shead__ph { grid-column: 8 / -1; margin: 0; justify-self: end; width: fit-content; max-width: 100%; }
.cx-shead__ph .ph img { width: auto; max-width: 100%; max-height: 78svh; margin-left: auto; }
.cx-shead__ph.cx-nophoto { width: 100%; aspect-ratio: 4 / 5; display: grid; place-items: center; background: var(--panel); } .cx-nophoto img { width: 34%; opacity: .6; }
.cx-facts { display: flex; flex-wrap: wrap; gap: 22px clamp(26px, 3.4vw, 56px); margin: clamp(26px, 3vw, 44px) 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.cx-facts dt { font-size: .9rem; color: var(--dim); margin-bottom: .45rem; }
.cx-facts dd { font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: clamp(2.2rem, 3.6vw, 3.8rem); line-height: .9; }
.cx-facts dd small { display: block; margin-top: .45rem; font: 500 .85rem/1.2 'Archivo', sans-serif; font-stretch: 100%; letter-spacing: 0; text-transform: none; color: var(--dim); }
@media (max-width: 899px) { .cx-shead__t, .cx-shead__ph { grid-column: 1 / -1; } .cx-shead__ph { margin-top: 34px; justify-self: start; } .cx-shead__ph .ph img { margin-left: 0; max-height: 70svh; } }

.cx-archive { padding-top: clamp(40px, 5vw, 80px); }
.cx-series + .cx-series { margin-top: clamp(56px, 7vw, 110px); }
.cx-series__h { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .6rem 2rem; padding-bottom: 18px; border-bottom: 2px solid var(--t); }
.cx-series__h h2 { font-size: clamp(2rem, 4vw, 4.2rem); line-height: .86; } .cx-series__h p { margin: 0; color: var(--dim); }
.cx-event { border-bottom: 1px solid var(--line); }
.cx-event__h { display: grid; grid-template-columns: minmax(0, 1fr) auto 2.4rem; gap: 14px clamp(20px, 3vw, 56px); align-items: center; width: 100%; text-align: left; padding: clamp(22px, 2.6vw, 36px) 0; transition: padding .5s var(--ease); }
.cx-event__h:hover:not(:disabled) { padding-left: .6rem; } .cx-event__h:disabled { cursor: default; }
.cx-event__m { display: block; margin-bottom: .7rem; color: var(--dim); font-size: .92rem; line-height: 1.3; }
.cx-event__t h3 { font-size: clamp(2.1rem, 4.4vw, 4.6rem); line-height: .86; }
.cx-results { display: flex; gap: clamp(16px, 2.2vw, 40px); }
.cx-res { min-width: 3.4rem; }
.cx-res__l { display: block; font-size: .82rem; color: var(--dim); margin-bottom: .5rem; white-space: nowrap; }
.cx-res__v { display: block; font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: clamp(2.2rem, 3.6vw, 3.9rem); line-height: .86; font-variant-numeric: tabular-nums; }
.cx-res__v small { font: 500 .8rem/1 'Archivo', sans-serif; font-stretch: 100%; color: var(--dim); margin-left: .3em; letter-spacing: 0; }
.cx-res.is-out .cx-res__v { color: rgba(243, 242, 239, .55); }
.cx-res__w { display: block; margin-top: .5rem; font-size: .76rem; line-height: 1.15; color: var(--dim); }
.cx-res.is-hi .cx-res__v { color: var(--red); text-shadow: 0 0 24px rgba(225, 17, 31, .35); }
.cx-event__tg { position: relative; width: 2.4rem; height: 2.4rem; border: 1px solid var(--line); border-radius: 50%; transition: border-color .3s; }
.cx-event__tg i::before, .cx-event__tg i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--t); transform: translate(-50%, -50%); transition: transform .4s var(--ease); }
.cx-event__tg i::after { transform: translate(-50%, -50%) rotate(90deg); }
.cx-event.is-open .cx-event__tg i::after { transform: translate(-50%, -50%) rotate(0); }
.cx-event__h:hover .cx-event__tg { border-color: var(--red); }
.cx-event__p { padding: 0 0 clamp(28px, 3.4vw, 54px); animation: cxin .6s var(--ease) both; }
.cx-event__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gut); }
.cx-event__s { grid-column: 1 / span 6; margin: 0; font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.5; max-width: 50ch; }
.cx-quote { grid-column: 8 / -1; margin: 0; padding-left: 1.2rem; border-left: 2px solid var(--red); color: var(--dim); font-size: 1rem; line-height: 1.55; }
@media (max-width: 1099px) { .cx-event__h { grid-template-columns: minmax(0, 1fr) 2.4rem; } .cx-results { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; } }
@media (max-width: 899px) { .cx-event__s, .cx-quote { grid-column: 1 / -1; } .cx-quote { margin-top: 22px; } }
@media (max-width: 520px) { .cx-results { gap: 14px 22px; } .cx-res__v { font-size: 2.3rem; } }

.cx-sum { padding-top: clamp(50px, 6vw, 100px); padding-bottom: clamp(50px, 6vw, 100px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gut); }
.cx-sum__l { grid-column: 1 / span 3; margin: 0; color: var(--dim); font-size: .95rem; }
.cx-sum__t { grid-column: 4 / span 8; margin: 0; font: 600 clamp(1.4rem, 2.3vw, 2.4rem)/1.2 'Archivo', sans-serif; font-stretch: 85%; letter-spacing: -.01em; text-wrap: balance; }
@media (max-width: 899px) { .cx-sum__l, .cx-sum__t { grid-column: 1 / -1; } .cx-sum__l { margin-bottom: 12px; } }

.cx-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gut); padding-top: 0; padding-bottom: clamp(60px, 8vw, 120px); }
.cx-pg { display: block; padding: 22px 0; border-top: 1px solid var(--line); transition: color .3s, padding .5s var(--ease); }
.cx-pg small { display: block; color: var(--dim); font-size: .85rem; margin-bottom: .6rem; }
.cx-pg b { display: block; font-size: clamp(1.8rem, 3.4vw, 3.4rem); line-height: .9; } .cx-pg span { color: var(--dim); font-size: .9rem; }
.cx-pg--n { text-align: right; } .cx-pg:hover { color: var(--red); } .cx-pg--p:hover { padding-left: .6rem; } .cx-pg--n:hover { padding-right: .6rem; }
@media (max-width: 699px) { .cx-pager { grid-template-columns: 1fr; } .cx-pg--n { text-align: left; } }

.phead .huge.cx-long, .cx-head .huge.cx-long { white-space: normal; line-height: .84; }


/* ======================= REFINEMENT: content pass, October 2026 ======================= */
/* hero: a quiet route to the season, in place of the countdown */
.hero__go { align-self: flex-end; }
.hero.is-live .hero__go { border-color: rgba(243, 242, 239, .4); }
@media (max-width: 899px), (orientation: portrait) { .hero__go { align-self: flex-start; } }

/* racing since 2013: any photograph shape; the static fallback keeps a sensible band */
.expand:not(.on) .expand__frame img { aspect-ratio: 3 / 2; height: auto; object-fit: cover; object-position: var(--epx, 50%) var(--epy, 30%); }

/* home: the latest race weekend points at the Season page */
.week--latest { padding-top: clamp(70px, 7.4vw, 116px); }
.week__ev { font-size: clamp(3rem, 7.6vw, 8.6rem); line-height: .84; margin: 0; }
.week__series { margin: clamp(14px, 1.6vw, 24px) 0 0; font-weight: 900; font-stretch: 62%; text-transform: uppercase; letter-spacing: -.005em; font-size: clamp(1.7rem, 3.2vw, 3.4rem); line-height: .9; color: var(--red); text-shadow: 0 0 30px rgba(225, 17, 31, .3); }
.week--latest .week__info .lede { margin-top: clamp(22px, 2.6vw, 38px); max-width: 34ch; }
.week--latest .week__grid { margin-top: clamp(26px, 3.6vw, 56px); padding-bottom: clamp(30px, 4vw, 70px); }
.week--latest .week__poster { max-width: 520px; justify-self: end; width: 100%; }

/* season: the event, its series, its result */
.chap__titles { grid-column: 3 / -1; }
.chap__titles .chap__title { grid-column: auto; }
.chap__series { margin: clamp(10px, 1.4vw, 22px) 0 0; font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: clamp(1.8rem, 4vw, 4.4rem); line-height: .9; color: var(--red); text-shadow: 0 0 30px rgba(225, 17, 31, .28); }
.res b.out { color: rgba(243, 242, 239, .6); }
.res b em { display: block; margin-top: .55rem; font: 500 .8rem/1.2 'Archivo', sans-serif; font-stretch: 100%; letter-spacing: 0; font-style: normal; text-transform: none; color: var(--dim); }
.chap--event .chap__txt .res { max-width: 760px; }
.chap--next { padding-top: clamp(30px, 4vw, 70px); }
@media (max-width: 899px) { .chap__titles { grid-column: auto; } }

/* story: solid numerals with a controlled glow */
.story__no b { color: var(--red); -webkit-text-stroke: 0; text-shadow: 0 0 18px rgba(225, 17, 31, .42), 0 0 64px rgba(225, 17, 31, .22); }

/* career */
.cx-prose p + p { margin-top: .2rem; }
.cx-more { padding-bottom: clamp(30px, 4vw, 60px); }

/* partners: the first screen does the work */
.pt-hero { position: relative; padding: calc(var(--hud) + clamp(30px, 4.4vw, 72px)) 0 clamp(30px, 4vw, 64px); overflow: hidden; background: radial-gradient(70% 90% at 90% 0%, #171a1f 0%, var(--bg) 62%); }
.pt-hero__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gut); align-items: center; }
.pt-hero__t { grid-column: 1 / span 6; }
.pt-hero__t .mono { margin: 0 0 clamp(14px, 1.6vw, 24px); color: var(--dim); font-weight: 600; font-size: 1rem; }
.pt-hero h1 { font-size: clamp(3.6rem, 9.4vw, 10.6rem); line-height: .8; }
.pt-hero__t .lede { margin: clamp(20px, 2.4vw, 36px) 0 0; max-width: 36ch; }
.pt-hero__why { margin: 1rem 0 0; color: var(--dim); max-width: 46ch; font-size: 1rem; line-height: 1.5; }
.pt-ways { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: clamp(18px, 2vw, 28px) 0 0; font: 700 .78rem/1 'Archivo', sans-serif; font-stretch: 88%; letter-spacing: .09em; text-transform: uppercase; }
.pt-ways a { display: inline-block; padding: .55em 0; border-bottom: 1px solid var(--line); transition: color .3s, border-color .3s; }
.pt-ways a:hover { color: var(--red); border-color: var(--red); }
.pt-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: clamp(22px, 2.6vw, 38px) 0 0; }
.pt-hero__ph { grid-column: 7 / -1; }
.pt-hero__ph .car { margin: 0; }
.pt-hero__ph .car figcaption { margin-top: -6%; text-align: right; }
.pt-glance { padding-top: clamp(14px, 2vw, 30px); padding-bottom: clamp(40px, 5vw, 80px); }
.pt-glance dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gut); border-top: 1px solid var(--line); padding-top: 18px; margin: 0; }
.pt-glance dt { color: var(--dim); font-size: .92rem; margin-bottom: .45rem; }
.pt-glance dd { font-weight: 900; font-stretch: 62%; font-size: clamp(2.2rem, 4vw, 4.2rem); line-height: .9; font-variant-numeric: tabular-nums; margin: 0; }
.opps { margin-top: clamp(10px, 2vw, 30px); border-top: 2px solid var(--t); }
.opp { border-bottom: 1px solid var(--line); }
.opp summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 2.4rem; gap: 6px clamp(20px, 3vw, 56px); align-items: center; padding: clamp(20px, 2.4vw, 34px) 0; cursor: pointer; transition: padding .5s var(--ease); }
.opp summary::-webkit-details-marker { display: none; }
.opp summary:hover { padding-left: .6rem; }
.opp__tag { grid-column: 1; font: 700 .8rem/1.2 'Archivo', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.opp__name { grid-column: 1; grid-row: 2; font-size: clamp(2rem, 4.4vw, 4.6rem); line-height: .86; transition: color .3s; }
.opp__blurb { grid-column: 2; grid-row: 1 / span 2; color: var(--dim); font-size: 1rem; line-height: 1.45; max-width: 40ch; }
.opp__tg { grid-column: 3; grid-row: 1 / span 2; position: relative; width: 2.4rem; height: 2.4rem; border: 1px solid var(--line); border-radius: 50%; transition: border-color .3s; }
.opp__tg i::before, .opp__tg i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--t); transform: translate(-50%, -50%); transition: transform .4s var(--ease); }
.opp__tg i::after { transform: translate(-50%, -50%) rotate(90deg); }
.opp[open] .opp__tg i::after { transform: translate(-50%, -50%) rotate(0); }
.opp summary:hover .opp__tg { border-color: var(--red); }
.opp[open] .opp__name { color: var(--red); }
.opp ul { padding: 0 0 clamp(22px, 2.6vw, 38px); margin: 0; columns: 2; column-gap: clamp(24px, 3vw, 56px); max-width: 960px; animation: cxin .5s var(--ease) both; }
.opp li { break-inside: avoid; padding: .7rem 0; border-top: 1px solid var(--line); font-size: .95rem; }
.opps__cta { margin: clamp(22px, 2.6vw, 36px) 0 0; }
.pintro .a .mono { margin: 0 0 1rem; }
@media (max-width: 899px) {
  .pt-hero__t, .pt-hero__ph { grid-column: 1 / -1; }
  .pt-hero__ph { margin-top: 30px; }
  .pt-hero__ph .car figcaption { text-align: left; margin-top: -4%; }
  .pt-glance dl { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .opp summary { grid-template-columns: minmax(0, 1fr) 2.4rem; }
  .opp__blurb { grid-column: 1; grid-row: 3; margin-top: .4rem; }
  .opp__tg { grid-column: 2; grid-row: 1 / span 2; }
  .opp ul { columns: 1; }
}
/* partners hero: the title takes two lines so the contact action sits inside the first screen */
.pt-hero__t { grid-column: 1 / span 7; }
.pt-hero__ph { grid-column: 8 / -1; }
.pt-hero h1 { font-size: clamp(3rem, 6.5vw, 8.2rem); }
.pt-hero h1 .line { white-space: nowrap; }
.pt-hero__t .lede { max-width: 40ch; }
@media (max-width: 899px) { .pt-hero__t, .pt-hero__ph { grid-column: 1 / -1; } .pt-hero h1 { font-size: clamp(3rem, 15vw, 6rem); } }


/* ======================= REFINEMENT: scale, composition and social ======================= */

/* ---- Racing since 2013: the words take the left of the frame, on the track; the subject keeps the right ---- */
@media (orientation: landscape) {
  .expand.on .expand__big.a { top: auto; left: var(--edge); bottom: calc(4.4svh + var(--f) * .8 + clamp(6px, 1.2svh, 14px)); transform: translate3d(calc((1 - var(--q, 0)) * 5vw), calc((1 - var(--q, 0)) * -2svh), 0); }
  .expand.on .expand__big.b { right: auto; left: var(--edge); bottom: 4.4svh; transform: translate3d(calc((1 - var(--q, 0)) * 5vw), calc((1 - var(--q, 0)) * 2svh), 0); }
  .expand.on .expand__cap { left: calc(var(--edge) + var(--f) * 3.95 + 22px); right: auto; top: auto; bottom: 4.4svh; text-align: left; max-width: 17ch; }
}

/* ---- Season: one calm scale, one measure, and a results table that can be read in a glance ---- */
[data-page="season.html"] .phead { padding-bottom: clamp(30px, 4vw, 56px); }
[data-page="season.html"] .phead .huge { font-size: clamp(3.4rem, 9.5vw, 9.5rem); }
[data-page="season.html"] .phead .lede { margin-top: clamp(14px, 1.8vw, 26px); }
[data-page="season.html"] .chap { padding: clamp(44px, 5.4vw, 84px) 0 clamp(20px, 2.6vw, 40px); }
[data-page="season.html"] .chap__head { align-items: baseline; }
[data-page="season.html"] .chap__no { font-size: clamp(2rem, 3.8vw, 4rem); }
[data-page="season.html"] .chap__title { font-size: clamp(2.6rem, 6.2vw, 6.8rem); }
[data-page="season.html"] .chap__series { font-size: clamp(1.3rem, 2.3vw, 2.4rem); margin-top: clamp(6px, .8vw, 12px); }
[data-page="season.html"] .chap__meta { padding: clamp(12px, 1.4vw, 20px) 0; font-size: .92rem; }
[data-page="season.html"] .chap__full { width: min(calc(100% - 2 * var(--edge)), calc(72svh * 1.5)); margin-left: var(--edge); margin-right: auto; }
[data-page="season.html"] .chap__txt { padding: clamp(22px, 2.6vw, 40px) 0 clamp(8px, 1vw, 16px); align-items: start; }
[data-page="season.html"] .chap__txt .res { max-width: 640px; grid-column: 1 / span 6; }
[data-page="season.html"] .chap__txt .res b { font-size: clamp(1.9rem, 3.2vw, 3.3rem); }
[data-page="season.html"] .chap__txt .body { grid-column: 8 / -1; }
[data-page="season.html"] .chap__txt .lede { font-size: clamp(1.1rem, 1.5vw, 1.4rem); margin-bottom: .6rem; }
[data-page="season.html"] .jrow { --rowh: min(54svh, 520px); }
[data-page="season.html"] .jrow + .jrow, [data-page="season.html"] .chap__txt + .jrow { margin-top: clamp(14px, 1.8vw, 26px); }
[data-page="season.html"] .chap__txt + .jrow { margin-top: clamp(10px, 1.4vw, 20px); }
[data-page="season.html"] .chap--quote { padding-top: clamp(40px, 5vw, 76px); }
[data-page="season.html"] .chap--quote .a { grid-column: 1 / span 8; }
[data-page="season.html"] .chap--quote .b { grid-column: 10 / -1; }
[data-page="season.html"] .chap--quote .say { font-size: clamp(1.4rem, 2.5vw, 2.5rem); line-height: 1.08; }
[data-page="season.html"] .chap__end .a .say { font-size: clamp(1.4rem, 2.4vw, 2.4rem); }
[data-page="season.html"] .chap__end .a { grid-column: 1 / span 5; }
[data-page="season.html"] .chap__end .b { grid-column: 7 / -1; }
.jrow { max-width: calc(var(--rsum, 3) * var(--rowh, 99999px)); }
@media (max-width: 699px) { .jrow { max-width: none; } }
@media (max-width: 899px) {
  [data-page="season.html"] .chap__full { width: 100%; margin-left: 0; }
  [data-page="season.html"] .chap--quote .b { grid-column: auto; max-width: 62%; }
  [data-page="season.html"] .chap__end .a, [data-page="season.html"] .chap__end .b { grid-column: auto; }
}

.sg { padding-top: clamp(8px, 1.6vw, 24px); padding-bottom: clamp(30px, 3.6vw, 56px); }
.sg__head { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem 2rem; flex-wrap: wrap; margin-bottom: 14px; }
.sg__head h2 { margin: 0; font: 800 1rem/1 'Archivo', sans-serif; font-stretch: 80%; letter-spacing: .06em; text-transform: uppercase; }
.sg__head p { margin: 0; font-size: .95rem; }
.sg__t { width: 100%; border-collapse: collapse; border-top: 2px solid var(--t); }
.sg__t th, .sg__t td { text-align: left; font-weight: inherit; padding: 14px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.sg__t thead th { padding: 11px 0; color: var(--dim); font-size: .85rem; font-weight: 500; }
.sg__t td { font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: clamp(1.6rem, 2.7vw, 2.7rem); line-height: .9; font-variant-numeric: tabular-nums; }
.sg__t td small { font: 500 .8rem/1 'Archivo', sans-serif; font-stretch: 100%; color: var(--dim); margin-left: .3em; letter-spacing: 0; }
.sg__t td.hi { color: var(--red); }
.sg__t td.out { color: rgba(243, 242, 239, .6); }
.sg__t tbody th { width: 34%; }
.sg__t tbody th a { display: grid; grid-template-columns: 2.2rem 1fr; column-gap: 6px; align-items: baseline; padding: 2px 0; transition: color .3s, padding .4s var(--ease); }
.sg__n { grid-row: span 2; color: var(--red); font-weight: 700; font-size: .85rem; }
.sg__t tbody th b { grid-column: 2; font: 900 clamp(1.3rem, 2vw, 2rem)/.95 'Archivo', sans-serif; font-stretch: 62%; text-transform: uppercase; }
.sg__t tbody th small { grid-column: 2; margin-top: .3rem; color: var(--dim); font-size: .85rem; font-weight: 400; }
.sg__t tbody tr:hover th a { color: var(--red); padding-left: .4rem; }
@media (max-width: 700px) {
  .sg__t thead { display: none; }
  .sg__t, .sg__t tbody { display: block; }
  .sg__t tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .sg__t th, .sg__t td { border: 0; padding: 0; }
  .sg__t tbody th { grid-column: 1 / -1; width: auto; }
  .sg__t td::before { content: attr(data-l); display: block; margin-bottom: .45rem; font: 500 .72rem/1 'Archivo', sans-serif; font-stretch: 100%; letter-spacing: 0; text-transform: none; color: var(--dim); }
  .sg__t td { font-size: 1.7rem; }
}

/* ---- social: visible without being loud ---- */
.hud__soc { display: none; align-items: center; gap: 15px; transition: opacity .4s; }
@media (min-width: 1000px) { .hud__soc { display: flex; } }
.hud__soc a { display: block; width: 18px; height: 18px; color: var(--dim); transition: color .3s, transform .4s var(--ease); }
.hud__soc a:hover { color: var(--t); transform: translateY(-1px); }
.hud__soc svg { display: block; width: 100%; height: 100%; }
.hud.min .hud__soc, body.menu-open .hud__soc { opacity: 0; pointer-events: none; }

.overlay__main { align-self: center; padding: calc(var(--hud) + 10px) 0 30px; }
.overlay__main .overlay__nav { align-self: auto; padding: 0; }
.overlay__soc { display: flex; align-items: center; gap: 22px; margin: clamp(16px, 2.4vh, 28px) 0 0; font: 700 .78rem/1 'Archivo', sans-serif; font-stretch: 88%; letter-spacing: .09em; text-transform: uppercase; }
.overlay__soc span { color: var(--dim); }
.overlay__soc a { display: inline-flex; align-items: center; gap: .6em; transition: color .3s; }
.overlay__soc a:hover { color: var(--red); }
.overlay__soc svg { width: 18px; height: 18px; }
@media (min-width: 1000px) and (min-height: 561px) { .overlay__nav span { font-size: clamp(2.8rem, 11.5vh, 8.5rem); } }

.follow { padding: clamp(60px, 8vw, 128px) 0; border-top: 1px solid var(--line); background: radial-gradient(60% 120% at 100% 100%, rgba(225, 17, 31, .08) 0%, rgba(225, 17, 31, 0) 70%), var(--bg); }
.follow__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 30px var(--gut); align-items: end; }
.follow__t { grid-column: 1 / span 6; }
.follow__t .mono { margin: 0; }
.follow__t h2 { margin: .8rem 0 1rem; }
.follow__p { margin: 0; color: var(--dim); max-width: 44ch; }
.follow__l { grid-column: 8 / -1; margin: 0; padding: 0; border-top: 2px solid var(--t); }
.follow__l li { border-bottom: 1px solid var(--line); }
.follow__l a { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 18px 0; transition: padding .5s var(--ease), color .3s; }
.follow__ic svg { display: block; width: 26px; height: 26px; }
.follow__n b { display: block; font: 900 clamp(1.7rem, 2.8vw, 2.8rem)/.9 'Archivo', sans-serif; font-stretch: 62%; text-transform: uppercase; }
.follow__n small { display: block; margin-top: .45rem; color: var(--dim); font-size: .92rem; }
.follow__a { font-size: 1.4rem; color: var(--dim); transition: transform .45s var(--ease), color .3s; }
.follow__l a:hover { color: var(--red); padding-left: .6rem; }
.follow__l a:hover .follow__a { color: var(--red); transform: translateX(6px); }
.follow--slim { padding: clamp(40px, 5vw, 78px) 0; }
.follow--slim .follow__t h2 { font-size: clamp(1.8rem, 3.2vw, 3.2rem); }
@media (max-width: 899px) { .follow__t, .follow__l { grid-column: 1 / -1; } }
.pt-soc { margin: 16px 0 0; color: var(--dim); font-size: .95rem; }
.pt-soc a { color: var(--t); border-bottom: 1px solid var(--line); transition: color .3s, border-color .3s; }
.pt-soc a:hover { color: var(--red); border-color: var(--red); }
.contact dd a { transition: color .3s; }
.foot__follow .dim { margin-left: .2em; }


/* ======================= legal pages, 404, forms, FAQ ======================= */
.foot__bot { display: flex; justify-content: space-between; gap: .4rem 1.5rem; flex-wrap: wrap; }
.foot__legal { display: flex; gap: 1.4rem; } .foot__legal a:hover { color: var(--t); }
.legal { max-width: 860px; margin: 0; padding-bottom: clamp(60px, 8vw, 120px); }
.legal__upd { margin: 0 0 1.6rem; }
.legal h2 { font: 800 clamp(1.3rem, 2vw, 1.8rem)/1.1 'Archivo', sans-serif; font-stretch: 80%; letter-spacing: -.005em; margin: 2.2rem 0 .7rem; text-transform: uppercase; }
.legal p, .legal li { color: var(--dim); line-height: 1.65; max-width: 68ch; }
.legal ul { margin: 0 0 1em; }
.legal li { margin: 0 0 .5rem 1.2rem; list-style: disc; } .legal b { color: var(--t); font-weight: 600; }
.legal a { color: var(--t); border-bottom: 1px solid var(--line); } .legal a:hover { color: var(--red); border-color: var(--red); }
.nf { min-height: 70svh; display: flex; align-items: center; } .nf .wrap { width: 100%; }
.nf__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: clamp(22px, 2.6vw, 38px) 0 0; }
.field em { font-style: normal; opacity: .7; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--red); }
.form-note { margin: 0 0 1.2rem; font-size: .9rem; } .form-note a { color: var(--t); border-bottom: 1px solid var(--line); }
.form-status { margin: 1.2rem 0 0; padding: .9rem 1rem; border-left: 2px solid var(--line); font-size: .98rem; outline: none; }
.form-status--ok { border-color: #3bd37b; background: rgba(59, 211, 123, .08); }
.form-status--error { border-color: var(--red); background: rgba(225, 17, 31, .1); }
.btn[disabled] { opacity: .6; cursor: progress; }
.faq { border-top: 2px solid var(--t); margin-top: clamp(20px, 3vw, 40px); max-width: 900px; }
.faq__i { border-bottom: 1px solid var(--line); }
.faq__i summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; font: 700 clamp(1.1rem, 1.5vw, 1.35rem)/1.25 'Archivo', sans-serif; font-stretch: 85%; }
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary::after { content: "+"; color: var(--dim); font-size: 1.4rem; line-height: 1; transition: transform .4s var(--ease), color .3s; }
.faq__i[open] summary::after { transform: rotate(45deg); color: var(--red); }
.faq__i div { padding: 0 0 1.3rem; } .faq__i p { margin: 0; color: var(--dim); max-width: 62ch; }
.faq__i a { color: var(--t); border-bottom: 1px solid var(--line); } .faq__i a:hover { color: var(--red); border-color: var(--red); }

/* onward links: useful routes between the story, the archive and the season */
.story__more { display: flex; flex-wrap: wrap; gap: 4px 26px; margin: 1.1rem 0 0; }
.phead__more { display: flex; flex-wrap: wrap; gap: 2px 28px; margin: clamp(12px, 1.6vw, 22px) 0 0; }
.cx-xlink { margin: 1rem 0 0; } .cx-event__in .cx-xlink { grid-column: 1 / -1; }
.statement__side .link + .link { margin-left: 1.6rem; }

.cx-single { margin-top: clamp(22px, 2.6vw, 38px); max-width: 300px; }
.cx-single .cx-gal { margin-top: 0; }

/* the sign-off: a quiet personal signature at the end of the story, on the text column's left edge */
.signoff { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gut); padding-top: clamp(30px, 5vw, 80px); padding-bottom: clamp(44px, 6vw, 96px); }
.signoff img { grid-column: 5 / span 5; width: min(100%, 420px); height: auto; opacity: .92; }
@media (max-width: 899px) { .signoff img { grid-column: 1 / -1; width: min(70%, 300px); } }


/* ======================= partners: the car, lit like a showroom =======================
   One concept render (a transparent cut-out). Every effect is derived from its own silhouette (--car as a mask),
   so light, shadow and reflection follow the bodywork. No 3D model is involved.
   Ground plane, measured from the tyre contact points in the 1536x1024 source:
     near-side wheels (132,656) -> (775,867): the car's length axis, slope  .328
     front edge, from (775,867) along the track axis:                 slope -.107
   A floor reflection mirrors each column about that ground line, so it is a skewed flip (matrix) and not a plain flip. */
.stage { position: relative; margin: 0; isolation: isolate; }
.stage__room { position: absolute; inset: -14% -10% -22% -10%; z-index: -1; pointer-events: none; }
/* restrained red: a back-wall wash behind the car, not a light under it */
.stage__glow { position: absolute; inset: 0; background:
    radial-gradient(46% 38% at 66% 38%, rgba(225, 17, 31, .13) 0%, rgba(225, 17, 31, 0) 70%),
    radial-gradient(60% 50% at 40% 30%, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, 0) 70%); }
/* a cool pool of light on a dark polished floor, centred under the car */
.stage__floor { position: absolute; left: 4%; right: 4%; top: 58%; bottom: 8%;
  background: radial-gradient(50% 50% at 50% 38%, rgba(190, 200, 215, .10) 0%, rgba(190, 200, 215, .04) 50%, rgba(190, 200, 215, 0) 76%); }

.stage__car { --car: url("../images/brand-1-1440.webp"); position: relative; aspect-ratio: 1536 / 1024; isolation: isolate; }
.stage__car > picture > img, .stage__car > img { position: relative; z-index: 3; display: block; width: 100%; height: auto; }
.stage .fx { position: absolute; inset: 0; display: block; pointer-events: none; transform-origin: 0 0; }

/* left half: the near-side bodywork, ground line slope .328; right half: the nose, slope -.107 (they meet at x = 775) */
.refl--l, .shd--l, .cnt--l { clip-path: inset(0 49.54% 0 0); }
.refl--r, .shd--r, .cnt--r { clip-path: inset(0 0 0 50.46%); }

/* reflection: the car's own pixels, mirrored about the ground line, darker than the car and fading with distance from it */
.refl { z-index: 0; background: var(--car) 0 0 / 100% 100% no-repeat; opacity: .36; filter: blur(1.2px) brightness(.62) contrast(1.05); }
.refl--l { translate: 0 119.66%; transform: matrix(1, .656, 0, -1, 0, 0);
  -webkit-mask-image: linear-gradient(18.1deg, #000 26.9%, transparent 44%); mask-image: linear-gradient(18.1deg, #000 26.9%, transparent 44%); }
.refl--r { translate: 0 185.5%; transform: matrix(1, -.214, 0, -1, 0, 0);
  -webkit-mask-image: linear-gradient(-6.1deg, #000 20.1%, transparent 42%); mask-image: linear-gradient(-6.1deg, #000 20.1%, transparent 42%); }

/* cast shadow and contact shadow: the silhouette, flattened onto the same ground line (k = .12 and .035), then blurred */
.shd, .cnt { background: #000; -webkit-mask: var(--car) 0 0 / 100% 100% no-repeat; mask: var(--car) 0 0 / 100% 100% no-repeat; }
.shd { z-index: 1; filter: blur(7px); opacity: .62; }
.shd--l { translate: 0 67%; transform: matrix(1, .367, 0, -.12, 0, 0); }
.shd--r { translate: 0 103.9%; transform: matrix(1, -.1198, 0, -.12, 0, 0); }
.cnt { z-index: 2; filter: blur(2.2px); opacity: .9; }
.cnt--l { translate: 0 61.9%; transform: matrix(1, .3395, 0, -.035, 0, 0); }
.cnt--r { translate: 0 96%; transform: matrix(1, -.1107, 0, -.035, 0, 0); }

/* volume: white paint needs shading to read as a form. Multiplied over the body only (clipped by the silhouette):
   brightest on the roof and bonnet, falling away down the flanks, plus a softer fall-off toward the nose. */
.shade { z-index: 4; mix-blend-mode: multiply;
  -webkit-mask: var(--car) 0 0 / 100% 100% no-repeat; mask: var(--car) 0 0 / 100% 100% no-repeat;
  background:
    radial-gradient(90% 75% at 34% 30%, #fff 38%, #d6d9df 72%, #b9bdc6 100%),
    linear-gradient(to bottom, #fff 0%, #fff 30%, #e3e5ea 46%, #b7bbc4 62%, #7d818b 80%, #5d616b 100%);
  background-blend-mode: multiply; }
/* rim light: a thin line along the top-facing edges (cool white) and the lower-right edges (red, restrained).
   Each is the silhouette minus a copy of itself nudged a couple of pixels, so it hugs every curve of the car. */
.rim { z-index: 5; background: rgba(235, 242, 255, .85); opacity: .75;
  -webkit-mask-image: var(--car), var(--car); mask-image: var(--car), var(--car);
  -webkit-mask-size: 100% 100%, 100% 100%; mask-size: 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 0, 0 2px; mask-position: 0 0, 0 2px;
  -webkit-mask-composite: source-out; mask-composite: subtract; }
.rim--red { background: rgba(225, 17, 31, .9); opacity: .5;
  -webkit-mask-position: 0 0, -2px -2px; mask-position: 0 0, -2px -2px; }

/* a slow pass of light along the bodywork, clipped to the silhouette */
.sheen { z-index: 6; opacity: 0; mix-blend-mode: soft-light;
  -webkit-mask: var(--car) 0 0 / 100% 100% no-repeat; mask: var(--car) 0 0 / 100% 100% no-repeat;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 0) 62%) 130% 0 / 260% 100% no-repeat; }
@media (prefers-reduced-motion: no-preference) { .js .ready .sheen { animation: sheen 11s cubic-bezier(.4, 0, .2, 1) 1.6s infinite; } }
@keyframes sheen { 0% { background-position: 130% 0; opacity: 0; } 8% { opacity: .9; } 34% { background-position: -30% 0; opacity: .9; } 42% { opacity: 0; background-position: -30% 0; } 100% { opacity: 0; background-position: -30% 0; } }

.stage figcaption { position: relative; z-index: 6; margin: -2% 0 0; text-align: right; color: var(--dim); font-size: .85rem; }
@media (max-width: 899px) { .stage figcaption { text-align: left; } .stage__room { inset: -8% -6% -16% -6%; } .shd { filter: blur(5px); } }

/* photographs and film: no drag ghost, no iOS long-press save sheet. Selection of text is unaffected. */
img, video { -webkit-user-drag: none; -webkit-touch-callout: none; }

/* ======================= driver profile ======================= */
.dp-hero__ph { display: flex; justify-content: flex-end; }
.dp-hero__fig { margin: 0; width: min(100%, 440px); }
.dp-hero__fig img { width: 100%; max-height: 74svh; object-fit: cover; object-position: 50% 30%; }
.dp-facts { padding: clamp(40px, 6vw, 96px) 0; border-top: 1px solid var(--line); }
.dp-facts h2 { margin: 0 0 clamp(18px, 2.4vw, 36px); font-weight: 600; font-size: 1rem; }
.dp-facts__l { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gut); }
.dp-facts__l > div { display: flex; align-items: baseline; gap: clamp(14px, 2vw, 28px); padding: clamp(14px, 1.6vw, 22px) 0; border-top: 1px solid var(--line); }
.dp-facts__l dt { flex: 0 0 clamp(6.4rem, 14vw, 13rem); white-space: nowrap; font-size: clamp(2.2rem, 3.8vw, 3.8rem); line-height: .9; font-feature-settings: "tnum" 1; }
.dp-facts__l dd { margin: 0; color: var(--dim); font-size: 1.02rem; line-height: 1.35; }
.dp-facts__l > div:nth-child(7) dt { color: var(--red); }
.dp-s { padding: clamp(44px, 7vw, 120px) 0; border-top: 1px solid var(--line); }
.dp-s__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gut); }
.dp-s__k { grid-column: 1 / span 3; margin: 0; color: var(--dim); font-weight: 600; font-size: 1rem; }
.dp-s__main { grid-column: 4 / span 7; }
.dp-s__main .body { margin-top: clamp(20px, 2.4vw, 36px); max-width: 60ch; }
.dp-s__main .body p { margin: 0 0 1em; }
.dp-s__media { grid-column: 4 / -1; margin-top: clamp(28px, 4vw, 60px); }
.dp-s__media figure { margin: 0; }
.dp-go { padding: clamp(40px, 6vw, 96px) 0 clamp(60px, 8vw, 130px); border-top: 1px solid var(--line); }
.dp-go h2 { margin: 0 0 clamp(14px, 2vw, 28px); font-weight: 600; font-size: 1rem; }
.dp-go__l { list-style: none; margin: 0; padding: 0; }
.dp-go__l a { display: flex; justify-content: space-between; align-items: baseline; padding: clamp(14px, 1.8vw, 26px) 0; border-top: 1px solid var(--line); font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: clamp(2rem, 5.4vw, 5.4rem); line-height: .9; transition: color .3s, padding-left .45s var(--ease); }
.dp-go__l li:last-child a { border-bottom: 1px solid var(--line); }
.dp-go__l a:hover { color: var(--red); padding-left: .25em; }
@media (max-width: 899px) {
  .dp-hero__ph { justify-content: flex-start; margin-top: clamp(24px, 6vw, 40px); }
  .dp-hero__fig { width: min(78%, 360px); }
  .dp-facts__l { grid-template-columns: 1fr; }
  .dp-s__k, .dp-s__main, .dp-s__media { grid-column: 1 / -1; }
  .dp-s__k { margin-bottom: 14px; }
}

/* ======================= refinement pass: scale and spacing ======================= */
/* page names: still set across the measure, about a third smaller */
@supports (font-size: 1cqi) { .phead .huge { font-size: calc(100cqi / var(--fit, 3.9) * .66); } }
.phead { padding-bottom: clamp(30px, 4vw, 64px); }
.phead--lead { padding-bottom: clamp(36px, 5vw, 76px); }
.phead .lede { margin-top: clamp(16px, 2vw, 30px); }
/* sections on the long pages */
.sec { padding: clamp(52px, 6.4vw, 100px) 0; }
.sec .d2 { font-size: clamp(2.6rem, 6.4vw, 6.6rem); }
.sec .d3 { font-size: clamp(2rem, 4vw, 4rem); }
.sec__h { margin-bottom: clamp(22px, 3.4vw, 48px); }
.sec__lede { margin: 1.2rem 0 clamp(20px, 3vw, 44px); max-width: 40ch; }
.opp__name { font-size: clamp(1.7rem, 3.4vw, 3.5rem); }
.opp summary { padding: clamp(16px, 1.8vw, 26px) 0; }
.pt-hero { padding-bottom: clamp(22px, 3vw, 44px); }
.pt-glance { padding-bottom: clamp(26px, 3.4vw, 54px); }
.pt-glance dd { font-size: clamp(1.8rem, 3.2vw, 3.2rem); }
.why2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gut); align-items: start; }
.why2 h2 { grid-column: 1 / span 5; margin: 0; }
.why2__t { grid-column: 7 / -1; }
.why2__t p { margin: 0 0 1.1em; font-size: clamp(1.05rem, 1.25vw, 1.2rem); line-height: 1.5; max-width: 52ch; }
.why2__t p:last-child { margin-bottom: 0; color: var(--dim); }
.split--goals h2 { margin: .8rem 0 1.2rem; }
.opps__cta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.4rem; }
.opps__cta .link.is-copied { color: var(--red); border-color: var(--red); }
.copy-fb { font-size: .92rem; color: var(--dim); }
.copy-fb a { color: var(--t); border-bottom: 1px solid var(--line); }
.copy-again { font: 700 .78rem/1 'Archivo', sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--t); background: none; border: 0; border-bottom: 1px solid var(--line); padding: .3em 0; cursor: pointer; margin-left: .6rem; }
.copy-again:hover, .copy-again:focus-visible { color: var(--red); border-color: var(--red); }
.faq__i ul { margin: .7rem 0 .9rem; padding-left: 1.1rem; color: var(--dim); max-width: 62ch; }
.faq__i li { margin: 0 0 .35rem; }
.faq__i div > p + p { margin-top: .6rem; }
/* homepage: 2027 */
.next { padding: clamp(60px, 7vw, 110px) 0 clamp(64px, 7.6vw, 120px); }
.next__say { font-size: clamp(1.8rem, 3vw, 3.2rem); }
.next__txt { align-self: end; }
.next__p { margin: 0; font-size: clamp(1.05rem, 1.2vw, 1.2rem); line-height: 1.5; color: rgba(243, 242, 239, .8); max-width: 40ch; }
@media (max-width: 899px) {
  .why2 h2, .why2__t { grid-column: 1 / -1; }
  .why2__t { margin-top: 1.2rem; }
  .sec { padding: clamp(44px, 10vw, 64px) 0; }
}
@media (min-width: 900px) {
  .next__big span { font-size: clamp(6rem, 24vw, 26rem); }
  .next__say { font-size: clamp(2rem, 3.4vw, 3.6rem); }
  .next__txt { align-self: center; }
}
@media (min-width: 900px) {
  .next__ph { grid-row: 2 / span 2; }
  .next__say { grid-row: 2; align-self: end; margin-bottom: 0; }
  .next__txt { grid-row: 3; align-self: start; }
}

/* ======================= refinement pass 2 ======================= */
/* homepage 2027: copy and picture share the measure */
.next { padding: clamp(56px, 6.4vw, 100px) 0 clamp(60px, 7vw, 110px); }
.next2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) var(--gut); align-items: center; }
.next2__txt { grid-column: 1 / span 6; }
.next2__ph { grid-column: 7 / -1; }
.next2__ph figure { margin: 0; max-width: none !important; }
.next2__yr { margin: .35rem 0 0 -.02em; font-size: clamp(5rem, 9.6vw, 10rem); line-height: .8; color: transparent; -webkit-text-stroke: 1.2px rgba(243, 242, 239, .4); }
.next2 .next__say { margin: clamp(18px, 2vw, 30px) 0 0; font-size: clamp(2.2rem, 3.7vw, 4rem); line-height: .98; max-width: 14ch; }
.next2 .next__p { margin: clamp(16px, 1.8vw, 26px) 0 0; font-size: clamp(1.12rem, 1.35vw, 1.35rem); line-height: 1.5; max-width: 34ch; color: rgba(243, 242, 239, .84); }
.next2 .next__cta { margin: clamp(22px, 2.4vw, 34px) 0 0; }
@media (max-width: 899px) {
  .next2__txt, .next2__ph { grid-column: 1 / -1; }
  .next2__yr { font-size: clamp(4.4rem, 22vw, 7rem); }
  .next2 .next__say { font-size: clamp(2rem, 8.6vw, 2.8rem); max-width: 16ch; }
  .next2 .next__p { font-size: 1.12rem; max-width: none; }
}
/* partners: the three options side by side */
.ways__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gut); align-items: end; margin-bottom: clamp(20px, 2.6vw, 38px); }
.ways__head h2 { grid-column: 1 / span 6; margin: 0; }
.ways__lede { grid-column: 7 / -1; margin: 0; color: var(--dim); font-size: 1.05rem; max-width: 40ch; }
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 2.6vw, 44px); border-top: 2px solid var(--t); }
.way { padding: clamp(18px, 2vw, 28px) 0 clamp(16px, 2vw, 26px); }
.way__tag { margin: 0; font: 700 .78rem/1.2 'Archivo', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.way__name { margin: .5rem 0 0; font-size: clamp(1.7rem, 2.8vw, 3rem); line-height: .9; }
.way__blurb { margin: .7rem 0 1rem; color: var(--t); font-size: 1.02rem; line-height: 1.4; min-height: 2.8em; }
.way ul { list-style: none; margin: 0; padding: 0; }
.way li { padding: .5rem 0; border-top: 1px solid var(--line); font-size: .95rem; line-height: 1.35; color: var(--dim); }
.opps__cta { margin: clamp(14px, 1.8vw, 26px) 0 0; }
/* partners: why + picture */
.why3 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gut); align-items: center; }
.why3__t { grid-column: 1 / span 7; }
.why3__t h2 { margin: 0 0 clamp(18px, 2.2vw, 32px); }
.why3__t p { margin: 0 0 1.1em; font-size: clamp(1.08rem, 1.3vw, 1.25rem); line-height: 1.5; max-width: 50ch; }
.why3__t p:last-child { margin-bottom: 0; color: var(--dim); }
.why3__ph { grid-column: 9 / -1; }
.why3__ph figure { margin: 0; max-width: none !important; }
.why3__ph .ph img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 899px) {
  .ways__head h2, .ways__lede { grid-column: 1 / -1; }
  .ways__lede { margin-top: .8rem; }
  .ways { grid-template-columns: 1fr; }
  .way { border-top: 1px solid var(--line); }
  .way:first-child { border-top: 0; }
  .way__blurb { min-height: 0; }
  .why3__t, .why3__ph { grid-column: 1 / -1; }
  .why3__ph { margin-top: 1.6rem; max-width: 320px; }
}
.split--contact h2 { font-size: clamp(2rem, 3.6vw, 3.8rem); line-height: .94; margin: .8rem 0 1.1rem; }
/* season chapters, story chapters and joins: same layouts, less air */
.chap { padding: clamp(52px, 6vw, 96px) 0 clamp(30px, 4vw, 60px); }
.chap__no { font-size: clamp(2.6rem, 5.6vw, 6rem); }
.chap__title { font-size: clamp(2.8rem, 8.2vw, 8.8rem); }
.chap__title--2 { font-size: clamp(2.6rem, 7.6vw, 8.2rem); }
.chap__txt { padding: clamp(20px, 2.6vw, 40px) 0; }
.race { padding: clamp(52px, 6.4vw, 100px) 0 clamp(46px, 5.6vw, 90px); }
.story { padding: clamp(44px, 5.6vw, 88px) 0; }
.story__no b { font-size: clamp(3.6rem, 8vw, 8.6rem); }
.story__media { margin-top: clamp(26px, 3.4vw, 54px); }
.vdiv { padding: clamp(24px, 3vw, 46px) var(--edge); }
@media (max-width: 899px) {
  .sec { padding: clamp(36px, 9vw, 52px) 0; }
  .way { padding: 18px 0 8px; }
  .way__blurb { margin: .5rem 0 .7rem; }
  .way li { padding: .38rem 0; font-size: .92rem; }
  .why3__ph { max-width: none; }
  .why3__ph .ph img { aspect-ratio: 16 / 10; object-position: 50% 40%; }
  .pt-glance dd { font-size: 1.9rem; }
}