/* elliotgriggsracing.com — the whole stylesheet.

   Every colour, size and spacing value below comes from src/_data/tokens.json,
   the Elliot Griggs Racing Design System, through src/_data/theme.js. Nothing
   here is a brand decision: change the token and the site follows. A
   hard-coded colour in this file is a bug (tools/test-site.py checks).

   Theme: "default" — a dark blue page, white text, a pink accent. Pink is line
   work and focus, never body text: on this blue it is too low-contrast to read.
   Fonts are self-hosted (src/assets/fonts, SIL OFL licence beside them): nothing
   is loaded from anybody else. Headings use Barlow Condensed. Tachyon,
   the design system's display face, is kept for the logo and brand art only (Mike,
   2 October 2026): Adobe's licence forbids self-hosting it, and the logos are already
   outlined shapes. A big fixed word that must be Tachyon is made as an image. */

:root {
	--blue-950: #04162b;
	--blue-900: #00204a;
	--navy-700: #002f61;
	--blue-700: #013c85;
	--blue-600: #024aa2;
	--blue-500: #1e6bc4;
	--blue-400: #3d8fe0;
	--blue-300: #6eaedf;
	--blue-200: #a9d0ee;
	--black: #030303;
	--pink-600: #b80459;
	--pink-500: #e30572;
	--pink-400: #ff3d92;
	--paper: #ffffff;
	--silver-200: #e9eef6;
	--silver-300: #c3d2e4;
	--silver-400: #93a8c4;
	--silver-500: #6c82a0;
	--pink-fast: var(--pink-500);
	--green-pb: #2bd97a;
	--yellow-caution: #ffd11a;
	--red-flag: #ff3b30;
	--blue-flag: var(--blue-300);
	--sponsor-cb-pink: #ce3375;
	--sponsor-cb-blue: #1b5091;
	--bg-page: var(--blue-950);
	--bg-surface: var(--navy-700);
	--bg-raised: var(--blue-700);
	--bg-inset: var(--blue-900);
	--bg-invert: var(--paper);
	--bg-brand: var(--blue-600);
	--text-primary: var(--paper);
	--text-secondary: var(--silver-300);
	--text-muted: var(--silver-500);
	--text-invert: var(--blue-950);
	--text-accent: var(--pink-500);
	--accent: var(--pink-500);
	--accent-hover: var(--pink-400);
	--accent-ink: var(--paper);
	--border-hair: rgba(195,210,228,.16);
	--border-mid: rgba(195,210,228,.28);
	--border-strong: rgba(195,210,228,.55);
	--focus-ring: rgba(227,5,114,.6);
	--overlay-scrim: rgba(4,22,43,.78);
	--status-best: var(--pink-500);
	--status-pb: var(--green-pb);
	--status-warn: var(--yellow-caution);
	--status-bad: var(--red-flag);
	--status-info: var(--blue-300);
	--label-size: 0.75rem;
	--data-xl: 2.5rem;
	--data-lg: 1.5rem;
	--data-md: 1.0625rem;
	--data-sm: 0.8125rem;
	--space-0: 0;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;
	--gutter: 24px;
	--gutter-lg: 48px;
	--container: 1200px;
	--container-narrow: 720px;
	--container-wide: 1440px;
	--hair: 1px;
	--rule-strong: 2px;
	--tap-min: 44px;
	--radius-0: 0;
	--radius-1: 2px;
	--radius-2: 4px;
	--radius-3: 8px;
	--radius-pill: 999px;
	--radius-circle: 50%;
	--shadow-none: none;
	--shadow-raised: 0 1px 0 rgba(195,210,228,.07) inset;
	--shadow-lift: 0 8px 24px rgba(0,0,0,.55);
	--shadow-modal: 0 24px 64px rgba(0,0,0,.7);
	--glow-accent: 0 0 0 1px rgba(227,5,114,.55),0 0 24px rgba(227,5,114,.28);
	--dial-ring: 0 0 0 6px #e30572;
	--ease-out: cubic-bezier(.2,0,.3,1);
	--ease-in-out: cubic-bezier(.4,0,.2,1);
	--dur-fast: 120ms;
	--dur-base: 180ms;
	--dur-slow: 320ms;
	--display-1: clamp(3rem,9vw,7.5rem);
	--display-2: clamp(2.25rem,6vw,4.5rem);
	--display-3: clamp(1.75rem,3.5vw,2.75rem);
	--dial-gradient: radial-gradient(circle at 50% 34%,#6EAEDF 0%,#1B5091 52%,#064A9C 100%);
	--keyline: 0 0 0 2px #FFFFFF;
	--arc-stack: repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.16) 0 2px,transparent 2px 14px);
	--kerb: repeating-linear-gradient(135deg,#FF3B30 0 12px,#FFFFFF 12px 24px);
	--grid-fine: repeating-linear-gradient(0deg,rgba(195,210,228,.06) 0 1px,transparent 1px 8px),repeating-linear-gradient(90deg,rgba(195,210,228,.06) 0 1px,transparent 1px 8px);
	--tread: repeating-linear-gradient(90deg,rgba(195,210,228,.18) 0 2px,transparent 2px 7px);
	--scrim-bottom: linear-gradient(to top,#04162B 0%,rgba(4,22,43,.85) 35%,rgba(4,22,43,0) 100%);
	--focus-outline: 2px solid #E30572;
	--focus-offset: 2px;
	--display-tracking: 0.01em;
	--label-tracking: 0.16em;
	--data-tracking: -0.01em;
	--display-leading: 0.92;
	--leading-tight: 1.25;
	--label-weight: 600;
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;
	--text-lead: 1.3125rem;
	--text-body: 1.0625rem;
	--text-body-leading: 1.55;
	--text-sm: 0.9375rem;
	--text-xs: 0.8125rem;
	--font-display: "Barlow Condensed","Arial Narrow",sans-serif;
	--font-text: "Barlow","Helvetica Neue",Arial,sans-serif;
	--font-condensed: "Barlow Condensed","Barlow","Arial Narrow",sans-serif;
	--font-data: "IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/barlow-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/assets/fonts/barlow-latin-600-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/barlow-condensed-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

*, *::before, *::after { box-sizing: border-box; }

html {
	background: var(--bg-page);
	color: var(--text-primary);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background: var(--bg-page);
	color: var(--text-primary);
	font-family: var(--font-text);
	font-size: var(--text-body);
	line-height: var(--text-body-leading);
}

main { flex: 1 0 auto; }

/* The one column every page sits in. count.js uses it too, for its note. */
.piece {
	width: 100%;
	max-width: var(--container-narrow);
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

a {
	color: var(--text-primary);
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-decoration-thickness: var(--rule-strong);
	text-underline-offset: 0.2em;
	transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-hover); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: var(--focus-outline);
	outline-offset: var(--focus-offset);
	box-shadow: 0 0 0 3px var(--focus-ring);
}

h1, h2 {
	margin: 0 0 var(--space-4);
	font-family: var(--font-display);
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--display-tracking);
	line-height: var(--leading-tight);
}
h1 { font-size: var(--display-3); }
h2 { font-size: var(--data-lg); margin-top: var(--space-7); }
p, ul { margin: 0 0 var(--space-4); color: var(--text-secondary); }
li { margin-bottom: var(--space-2); }
strong { color: var(--text-primary); font-weight: var(--weight-semibold); }

/* Top of every page but the holding page. */
.masthead { padding-top: var(--space-5); padding-bottom: var(--space-5); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); }
main > .page { padding-top: var(--space-6); padding-bottom: var(--space-8); }

.site-footer {
	flex-shrink: 0;
	padding-top: var(--space-5);
	padding-bottom: var(--space-6);
	border-top: var(--hair) solid var(--border-hair);
}
.site-footer p { margin: 0; color: var(--text-muted); }
.site-footer a {
	display: inline-block;
	padding: var(--space-3) 0;
	color: var(--text-secondary);
}

/* The holding page: his name, what he does, the two pages that exist. */
main > .holding {
	min-height: 70vh;
	min-height: 70dvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.holding__name {
	margin: 0;
	font-size: var(--display-1);
	line-height: var(--display-leading);
	font-weight: var(--weight-semibold);
}
.holding__tagline {
	margin: var(--space-4) 0 var(--space-7);
	font-family: var(--font-condensed);
	font-weight: var(--label-weight);
	font-size: var(--text-lead);
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
	color: var(--text-secondary);
}
.holding__links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin: 0; }
.holding__links a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-min);
	font-family: var(--font-condensed);
	font-weight: var(--label-weight);
	font-size: var(--text-sm);
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
}

/* The contact form. */
.write h2 { margin-top: var(--space-7); }
.write__goes { color: var(--text-primary); }
.write__row { display: flex; flex-direction: column; gap: var(--space-2); }
.write label {
	font-family: var(--font-condensed);
	font-weight: var(--label-weight);
	font-size: var(--text-sm); /* 15 px: labels are read, so not under the 14 px floor */
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
	color: var(--text-secondary);
}
.write input[type="text"],
.write input[type="email"],
.write textarea {
	width: 100%;
	min-height: var(--tap-min);
	padding: var(--space-3);
	font: inherit;
	color: var(--text-primary);
	background: var(--bg-inset);
	border: var(--hair) solid var(--border-mid);
	border-radius: var(--radius-1);
}
.write textarea { resize: vertical; }
.write__error {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--text-primary);
	border-left: var(--rule-strong) solid var(--accent);
	padding-left: var(--space-2);
}
.write__error.is-fixed { visibility: hidden; }
.write input[aria-invalid="true"],
.write textarea[aria-invalid="true"] { border-color: var(--accent); }
.write button {
	min-height: var(--tap-min);
	padding: var(--space-3) var(--space-6);
	font-family: var(--font-condensed);
	font-weight: var(--label-weight);
	font-size: var(--text-sm);
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
	color: var(--accent-ink);
	background: var(--accent);
	border: 0;
	border-radius: var(--radius-1);
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-out);
}
.write button:hover { background: var(--accent-hover); }
.write button:active { transform: translateY(1px); }
/* The line under the form: small, in the same secondary colour as the form labels. */
.write__note { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
/* The trap: never seen by a person, filled in by a bot. Off-screen, not
   display:none, because bots skip fields that are display:none. */
.write__trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* The line count.js prints where a person has just switched counting on or off. */
.countnote {
	margin: var(--space-4) 0 0;
	padding: var(--space-3) var(--space-4);
	color: var(--text-primary);
	background: var(--bg-surface);
	border: var(--hair) solid var(--border-mid);
	border-radius: var(--radius-2);
}

/* ======================================================================
   The home page, option A: Mike's own home screen
   (docs/design-system/ui_kits/website/HomeScreen.jsx and Site.jsx), ported.
   The components below are the design system's: Badge, Button, StatBlock,
   SectionHeading, KerbRule, LapChip, Tag, ResultsTable, Card, NavBar,
   SponsorStrip. Everything is drawn from the tokens.

   Reading rules kept throughout: nothing read is under --text-sm (15 px);
   nothing pressed is under 44 px tall (--tap-min); muted silver is used
   only on the page colour, never on the lighter panels (contrast). Pink is
   a bar, a border or a fill under white text, never the colour of a word.
   ====================================================================== */

.home { --section-y: var(--space-8); }

/* ---- Components ---- */

.badge {
	display: inline-flex;
	align-items: center;
	min-height: calc(var(--space-5) + var(--space-1));
	padding: 0 var(--space-3);
	font-family: var(--font-condensed);
	font-size: var(--text-sm);
	font-weight: var(--label-weight);
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--text-secondary);
	background: color-mix(in srgb, var(--silver-300) 9%, transparent);
	border: var(--hair) solid var(--border-mid);
	border-radius: var(--radius-1);
}
.badge--best {
	color: var(--text-primary);
	background: color-mix(in srgb, var(--pink-500) 22%, transparent);
	border-color: color-mix(in srgb, var(--pink-500) 70%, transparent);
}
.badge--pb {
	color: var(--green-pb);
	background: color-mix(in srgb, var(--green-pb) 14%, transparent);
	border-color: color-mix(in srgb, var(--green-pb) 42%, transparent);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--tap-min);
	padding: 0 var(--space-5);
	font-family: var(--font-condensed);
	font-size: var(--text-sm);
	font-weight: var(--label-weight);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	border: var(--hair) solid transparent;
	border-radius: var(--radius-1);
	transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn--lg { min-height: calc(var(--tap-min) + var(--space-3)); padding: 0 var(--space-6); font-size: var(--text-body); }
.btn--primary { color: var(--accent-ink); background: var(--accent); }
.btn--primary:hover { color: var(--accent-ink); background: var(--pink-600); }
.btn--solid { color: var(--text-invert); background: var(--paper); }
.btn--solid:hover { color: var(--text-invert); background: var(--silver-200); }
.btn--outline {
	color: var(--text-primary);
	background: transparent;
	border-color: var(--border-strong);
}
.btn--outline:hover { color: var(--text-primary); background: color-mix(in srgb, var(--silver-300) 12%, transparent); }
.btn:active { transform: translateY(1px); }

.stat__value {
	display: inline-block;
	font-family: var(--font-data);
	font-weight: var(--weight-medium);
	font-size: var(--data-xl);
	line-height: 1;
	letter-spacing: var(--data-tracking);
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
	padding-bottom: var(--space-2);
	border-bottom: var(--space-1) solid transparent;
}
.stat--best .stat__value { border-bottom-color: var(--accent); }
.stat--pb .stat__value { color: var(--green-pb); }
.stat__label {
	margin-top: var(--space-2);
	font-family: var(--font-condensed);
	font-size: var(--text-sm);
	font-weight: var(--label-weight);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--silver-400);
}

.sechead__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
	font-family: var(--font-condensed);
	font-size: var(--text-sm);
	font-weight: var(--label-weight);
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
	color: var(--text-secondary);
}
.sechead__eyebrow::before {
	content: "";
	flex: none;
	width: var(--space-5);
	height: var(--rule-strong);
	background: var(--accent);
}
.home .sechead__title {
	margin: 0;
	font-size: var(--display-3);
	line-height: var(--display-leading);
	font-weight: var(--weight-semibold);
	color: var(--text-primary);
}
.sechead__sub {
	margin: var(--space-3) 0 0;
	max-width: 56ch;
	font-size: var(--text-body);
	line-height: var(--text-body-leading);
	color: var(--text-secondary);
	text-wrap: pretty;
}

.kerb { width: 100%; height: var(--space-2); background: var(--kerb); }

.lapchip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) var(--space-3);
	font-family: var(--font-data);
	font-size: var(--data-md);
	font-variant-numeric: tabular-nums;
	background: var(--bg-inset);
	border: var(--hair) solid var(--border-mid);
	border-radius: var(--radius-1);
}
.lapchip__label { color: var(--text-secondary); }
.lapchip__value { font-weight: var(--weight-medium); color: var(--text-primary); }

.tag {
	display: inline-flex;
	align-items: center;
	min-height: calc(var(--space-5) + var(--space-2));
	padding: var(--space-1) var(--space-3);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--text-secondary);
	border: var(--hair) solid var(--border-mid);
	border-radius: var(--radius-pill);
}

.card {
	position: relative;
	padding: var(--space-5);
	background: var(--bg-surface);
	border: var(--hair) solid var(--border-mid);
	border-radius: var(--radius-2);
}
.band--tint .card { background: var(--bg-inset); }
.card--accent { border-color: color-mix(in srgb, var(--pink-500) 60%, transparent); }

.writes {
	padding: var(--space-4) var(--space-5);
	color: var(--text-secondary);
	background: transparent;
	border: var(--rule-strong) dashed var(--border-strong);
	border-radius: var(--radius-2);
}
.writes__label {
	font-family: var(--font-condensed);
	font-size: var(--text-body);
	font-weight: var(--label-weight);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-primary);
}
.writes__hint { margin: var(--space-1) 0 0; }
/* Elliot's own words, once Mike has pasted them in (src/_data/home.json). */
.prose { max-width: 62ch; color: var(--text-secondary); }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--space-3); }
.prose h3, .prose h4 { margin: var(--space-4) 0 var(--space-2); color: var(--text-primary); }
.prose blockquote { margin: 0 0 var(--space-3); padding-left: var(--space-3); border-left: var(--rule-strong) solid var(--accent); }
.prose blockquote p { margin: 0; color: var(--text-primary); }

/* The writing bar's two colours (the editor, 1 November 2026). Blue is blue-300:
   7.6:1 on the page and 5.6:1 on a card. Pink is not offered as words: 3.9:1 at
   best, and the design system keeps pink for line work. A highlight is white on
   pink instead, which reads at 4.6:1. Bold or italic inside keeps the colour. */
.blue { color: var(--blue-300); }
mark { background: var(--accent); color: var(--paper); padding: 0 0.15em; border-radius: var(--radius-1); }
.blue strong, .blue em, mark strong, mark em { color: inherit; }

.note { margin: var(--space-4) 0 0; color: var(--text-secondary); font-size: var(--text-sm); }

/* ---- Top bar ---- */

.nav {
	position: sticky;
	top: 0;
	z-index: 20;
	background: color-mix(in srgb, var(--bg-page) 88%, transparent);
	-webkit-backdrop-filter: blur(var(--space-3));
	backdrop-filter: blur(var(--space-3));
	border-bottom: var(--hair) solid var(--border-hair);
}
.nav__in {
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--space-2) var(--gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-6);
}
.nav__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--space-5);
	margin-left: auto;
}
.nav__links a:not(.btn) {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-min);
	font-family: var(--font-condensed);
	font-size: var(--text-sm);
	font-weight: var(--label-weight);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--text-secondary);
	border-bottom: var(--rule-strong) solid transparent;
}
.nav__links a:not(.btn):hover { color: var(--text-primary); border-bottom-color: var(--accent); }

/* Instagram and YouTube in the top bar (Mike, 9 Nov 2026). No box: on hover each icon gets the menu
   words' single line under it (Mike: "the single baseline rollowver rather than a box"). */
.nav__social { display: inline-flex; gap: 0; }
/* 44 px wide (13 px each side of the 18 px icon), so a thumb hits the right one; the line runs the full width. */
.nav__social a.nav__icon {
	display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-min);
	min-width: var(--tap-min); padding: 0;
	color: var(--text-secondary); text-decoration: none;
	border: 0; border-bottom: var(--rule-strong) solid transparent; border-radius: 0;
}
.nav__social a.nav__icon:hover { color: var(--text-primary); border-bottom-color: var(--accent); }
.nav__icon svg { display: block; }
/* On a phone the icons go last, so KARTING ... CONTACT stays on one line. */
@media (max-width: 700px) {
	.nav .nav__links { gap: 0 var(--space-2); }
	.nav__social { order: 1; }
	.nav__social a.nav__icon { min-width: 40px; }
}

/* ---- Hero ----
   The onboard clip from option B, framed, with the badge (which carries his name) and
   the headline. Phone: the badge sits beside the headline, the clip under them.
   Wide screen: badge, words, clip in one row. Nothing from YouTube loads until a tap. */

.hero {
	position: relative;
	overflow: hidden;
	border-bottom: var(--hair) solid var(--border-hair);
}
.hero::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(var(--container-wide) * 1.1);
	height: calc(var(--container-wide) * 1.1);
	transform: translate(-50%, -50%);
	background: var(--arc-stack);
	-webkit-mask-image: radial-gradient(closest-side, var(--black), transparent);
	mask-image: radial-gradient(closest-side, var(--black), transparent);
	pointer-events: none;
}
.hero__in {
	position: relative;
	max-width: var(--container-wide);
	margin: 0 auto;
	padding: var(--space-6) var(--gutter) var(--space-6);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas: "id head" "latest latest" "more more";
	gap: var(--space-5) var(--space-5);
	align-items: center;
}
.hero__words { display: contents; }
.hero__id { grid-area: id; margin: 0; line-height: 0; }
.hero__head { grid-area: head; }
.hero__more { grid-area: more; }
.hero__latest { grid-area: latest; }
.hero__clip { grid-area: clip; width: 100%; max-width: calc(var(--space-9) * 5); }
.hero__badge {
	display: block;
	height: calc(var(--space-10) * 1.1);
	width: auto;
	aspect-ratio: 945 / 1243;
}
.hero__badges { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-4); }
.hero__lead {
	margin: 0;
	max-width: 20ch;
	font-family: var(--font-display);
	font-size: var(--display-3);
	font-weight: var(--weight-semibold);
	line-height: var(--display-leading);
	letter-spacing: var(--display-tracking);
	text-transform: uppercase;
	color: var(--text-primary);
	text-wrap: balance;
}
.hero__writes { max-width: 48ch; }
.hero__buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* The framed clip: the still is a vertical video with blurred bars either side, so only
   its sharp centre is used, on the navy ground. Ported from option B. */
.clip {
	position: relative;
	display: block;
	aspect-ratio: 400 / 376;
	background: var(--black);
	border: var(--hair) solid var(--border-strong);
	border-radius: var(--radius-2);
	overflow: hidden;
}
.clip__still { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-base) var(--ease-out); }
.clip:hover .clip__still { opacity: 0.8; }
.clip__chip {
	position: absolute;
	left: var(--space-3);
	top: var(--space-3);
	display: inline-flex;
	align-items: center;
	min-height: calc(var(--space-5) + var(--space-1));
	padding: 0 var(--space-3);
	font-family: var(--font-condensed);
	font-weight: var(--label-weight);
	font-size: var(--text-sm);
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
	color: var(--text-primary);
	background: var(--bg-page);
	border-radius: var(--radius-1);
}
.clip__play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--space-9);
	height: var(--space-9);
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent-ink);
	background: var(--accent);
	border-radius: var(--radius-circle);
	box-shadow: var(--keyline);
}
.clip__play svg { width: 44%; height: 44%; margin-left: 6%; }
.clip__cap { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
.clip__title { color: var(--text-primary); }

@media (min-width: 1100px) {
	.hero__in {
		padding-top: var(--space-8);
		padding-bottom: var(--space-8);
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas: "id words" "latest latest";
		gap: var(--space-7);
	}
	.hero__words { display: block; grid-area: words; }
	.hero__badge { height: calc(var(--space-10) * 2.2); }
	.hero__lead { font-size: var(--display-2); max-width: 14ch; }
	.hero__head { margin-bottom: var(--space-5); }
	.hero__clip { max-width: none; }
}

/* ---- Bands: the page's sections ---- */

.band { scroll-margin-top: calc(var(--tap-min) + var(--space-5)); }
.band--tint { background: var(--bg-surface); }
.band__in { max-width: var(--container); margin: 0 auto; padding: var(--section-y) var(--gutter); }
.band--last { border-top: var(--hair) solid var(--border-hair); }
#karting, #sim, #latest, #roadmap { scroll-margin-top: calc(var(--tap-min) + var(--space-5)); }

.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-7); align-items: start; }
.split--even { grid-template-columns: 1fr 1fr; }
.split--even .writes { margin-top: var(--space-5); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-5); }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-5) 0 0; }
.row--sample { margin-top: var(--space-4); }
.actions { margin-top: var(--space-5); }

.card--panel { display: grid; gap: var(--space-4); }
.card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.card__label {
	font-family: var(--font-condensed);
	font-size: var(--text-sm);
	font-weight: var(--label-weight);
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
	color: var(--text-secondary);
}
.card .note { margin: 0; }
.chips { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.card--aim { display: flex; flex-direction: column; justify-content: center; }
.card__big {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--data-lg);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
	text-transform: uppercase;
	color: var(--text-primary);
}
.card__small { margin: var(--space-3) 0 0; }

/* The roadmap */
.roadmap__item { margin: 0; display: flex; flex-direction: column; align-items: flex-start; }
.roadmap__title {
	margin: var(--space-4) 0 0;
	font-family: var(--font-display);
	font-size: var(--data-lg);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
	text-transform: uppercase;
	color: var(--text-primary);
}
.roadmap__when { margin: var(--space-3) 0 0; font-family: var(--font-data); font-size: var(--data-md); color: var(--text-secondary); }

/* The ask */
.card--cta { padding: var(--space-7); }
.cta { display: grid; grid-template-columns: 1fr auto; gap: var(--space-6); align-items: center; }
.cta__buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* The karting sheet: the kit's ResultsTable */
.sheet { margin-top: var(--space-5); }
.results { width: 100%; border-collapse: collapse; background: var(--bg-inset); }
.results th {
	padding: var(--space-3);
	text-align: left;
	font-family: var(--font-condensed);
	font-size: var(--text-sm);
	font-weight: var(--label-weight);
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
	color: var(--text-secondary);
	border-bottom: var(--hair) solid var(--border-strong);
	white-space: nowrap;
}
.results td {
	padding: var(--space-3);
	font-size: var(--text-body);
	color: var(--text-secondary);
	border-bottom: var(--hair) solid var(--border-hair);
	vertical-align: middle;
}
.results__pos { width: calc(var(--space-9) + var(--space-5)); }
.results__event { color: var(--text-primary); font-weight: var(--weight-medium); }
.results__note a { display: inline-flex; align-items: center; min-height: var(--tap-min); }
.results__note { display: block; margin-top: var(--space-1); font-weight: var(--weight-regular); font-size: var(--text-sm); color: var(--text-secondary); }
.results td.results__date { font-family: var(--font-data); font-size: var(--text-sm); white-space: nowrap; }

/* ---- Footer ---- */

.foot { background: var(--bg-surface); border-top: var(--hair) solid var(--border-hair); }
.foot__in { max-width: var(--container); margin: 0 auto; padding: var(--space-7) var(--gutter) var(--space-6); display: grid; gap: var(--space-5); }
.sponsors {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-5);
	padding: var(--space-4) 0;
	border-top: var(--hair) solid var(--border-hair);
	border-bottom: var(--hair) solid var(--border-hair);
}
.sponsors__label {
	font-family: var(--font-condensed);
	font-size: var(--text-sm);
	font-weight: var(--label-weight);
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
	color: var(--silver-400);
}
.sponsors__name { font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--text-primary); }
.foot__nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); }
.foot__nav a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-min);
	font-family: var(--font-condensed);
	font-size: var(--text-sm);
	font-weight: var(--label-weight);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--text-primary);
	border-bottom: var(--rule-strong) solid transparent;
}
.foot__nav a:hover { border-bottom-color: var(--accent); }
.foot__small { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }

/* ---- Narrower screens: the kit's grids stack ---- */

@media (max-width: 900px) {
	.split, .split--even, .cta { grid-template-columns: 1fr; }
	.split--even { gap: var(--space-6); }
	.grid3 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
	.home { --section-y: var(--space-7); }
	.nav { position: static; }
	.nav__links { margin-left: 0; gap: 0 var(--space-3); }
	.nav__links a:not(.btn) { letter-spacing: 0.05em; }
	.nav__links .btn { padding: 0 var(--space-4); }
	.grid2 { grid-template-columns: 1fr; }
	.card--cta { padding: var(--space-5); }
	.cta__buttons .btn { flex: 1 1 100%; }
	/* Get in touch is in the top bar and in the ask below: the phone's first screen keeps room for the results. */
	.hero__buttons { display: none; }
	.clip { aspect-ratio: 2 / 1; }
	.hero__writes .writes { padding: var(--space-3) var(--space-4); }
	.hero__in { gap: var(--space-4); padding-top: var(--space-5); padding-bottom: var(--space-5); }
	.clip__cap { margin-top: var(--space-2); }
	.hero__badges { margin-bottom: var(--space-3); }
	.hero__lead { font-size: var(--text-lead); line-height: 1.1; }
	.btn--lg { white-space: normal; text-align: center; }
	/* The sheet becomes a stack of cards: no sideways scroll. */
	.results thead { display: none; }
	.results, .results tbody, .results tr, .results td { display: block; width: 100%; }
	.results tr { padding: var(--space-4) var(--space-3); border-bottom: var(--hair) solid var(--border-hair); }
	.results td { padding: 0; border: 0; }
	.results td.results__pos { width: auto; }
	.results__event { margin-top: var(--space-3); }
	.results td.results__date { margin-top: var(--space-1); }
}

/* The top bar's contact link: a button on a wide screen, a plain link on a phone,
   where the button would not fit the row. */
.nav__links a.nav__contact { display: none; }
@media (max-width: 700px) {
	.nav__links .btn { display: none; }
	.nav__links a.nav__contact { display: inline-flex; }
}

/* ---- Latest results: one card for karting, one for iRacing, exactly the same shape ---- */

.band--compact .band__in { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.pair { align-items: stretch; }
.pair > li { margin: 0; }
.rcard { display: flex; flex-direction: column; align-items: flex-start; }
.rcard__kind {
	margin: 0;
	font-family: var(--font-condensed);
	font-size: var(--text-sm);
	font-weight: var(--label-weight);
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
	color: var(--text-secondary);
}
.rcard__value {
	margin: var(--space-3) 0 0;
	font-family: var(--font-data);
	font-weight: var(--weight-medium);
	font-size: var(--data-xl);
	line-height: 1;
	letter-spacing: var(--data-tracking);
	color: var(--text-primary);
}
/* The karting headline reads as one result ("P3 · P2 · P3"): never a lone "P3" on a line of its own
   (design-checker, 9 November 2026, at about 800 px wide). */
.rcard:has(.rcard__value--heats) { container-type: inline-size; }
.rcard__value--heats { white-space: nowrap; font-size: min(var(--data-xl), 12.5cqi); }
.rcard__title {
	margin: var(--space-3) 0 0;
	font-family: var(--font-display);
	font-size: var(--data-lg);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
	text-transform: uppercase;
	color: var(--text-primary);
}
.rcard__small { margin: var(--space-2) 0 0; font-size: var(--text-body); color: var(--text-secondary); }
.band--compact .sechead + .writes, .band--compact .sechead + .pair { margin-top: var(--space-4); }
@media (max-width: 700px) {
	.band--compact .band__in { padding-top: var(--space-5); padding-bottom: var(--space-5); }
	.pair { gap: var(--space-3); }
	.rcard { padding: var(--space-4); }
	.rcard__value { margin-top: var(--space-2); }
}

/* The iRacing section's one card (the aim) is as wide as the table above it. */
.card--wide { margin-top: var(--space-5); }
/* Latest results sit inside the hero's grid, close under their heading. */
.hero__latest .pair { margin-top: var(--space-4); }
@media (max-width: 700px) {
	/* Phone: badge beside a short headline, the two result cards straight after, then the clip. */
	.hero__badge { height: var(--space-9); }
	.hero__in { gap: var(--space-3) var(--space-4); padding-top: var(--space-4); padding-bottom: var(--space-5); }
	.hero__latest .sechead__title { font-size: var(--data-lg); }
	.hero__latest .pair { margin-top: var(--space-2); }
	.hero__latest .rcard__value { font-size: var(--data-lg); margin-top: var(--space-1); }
	.hero__latest .rcard__title { font-size: var(--text-lead); margin-top: var(--space-1); }
	.hero__latest .rcard__small { margin-top: var(--space-1); font-size: var(--text-sm); }
}
/* On a wide screen the results line up with every other section's content. */
@media (min-width: 1100px) {
	.hero__latest { width: 100%; max-width: calc(var(--container) - 2 * var(--gutter)); justify-self: center; }
}

/* ---- Latest: four boxes (Mike, 3 October 2026; he picked option B) ----
   "four boxes potentially on the right hand side": iRacing and karting results on the left
   (iRacing above), the onboard clip (plays in the box, src/assets/js/clip.js) and his latest
   Instagram post (a picture on this site; no Instagram code loads) on the right. On a wide
   screen they fill the hero's right-hand side; on a phone they come straight after the
   badge and headline. A results box shows the newest result big and the ones before it. */
@media (min-width: 1100px) {
	.hero__in {
		grid-template-columns: auto minmax(0, 0.9fr) minmax(0, 1.35fr);
		grid-template-areas: "id words latest";
		align-items: center;
	}
	.hero__latest { max-width: none; justify-self: stretch; }
	.hero__lead { font-size: var(--display-3); }
	.hero__badge { height: calc(var(--space-10) * 1.6); }
}
.four__boxes {
	list-style: none; margin: var(--space-4) 0 0; padding: 0;
	display: grid; gap: var(--space-3);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas: "ir kart";
	align-items: start;
}
.four__box { margin: 0; min-width: 0; }
.four__box--karting { grid-area: kart; }
.four__box--iracing { grid-area: ir; }
.four .rcard { padding: var(--space-4); }
.four .rcard__value { font-size: var(--data-xl); margin-top: var(--space-1); }
.four .rcard__value--heats { font-size: min(var(--data-xl), 12.5cqi); }
.four .rcard__title { font-size: var(--text-lead); margin-top: var(--space-1); }
.four .rcard__small { margin-top: var(--space-1); font-size: var(--text-sm); }
/* The clip and the post, in the hero where the one-line box was (Mike, 26 October 2026). */
.hero__media { max-width: 48ch; }
.heromedia { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.heromedia__item { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.heromedia .clip { width: 100%; aspect-ratio: 16 / 10; }
.heromedia .clip__cap { margin-top: var(--space-2); }
.heromedia .clip__chip { left: var(--space-2); top: var(--space-2); padding: 0 var(--space-2); font-size: var(--text-sm); }
.clip__link { color: var(--text-primary); text-decoration: underline; text-underline-offset: 0.2em; display: inline-flex; align-items: center; min-height: var(--tap-min); }
/* the clip big, the post as a small row under it */
.heromedia .heromedia__yt .clip { aspect-ratio: 16 / 9; }
.heromedia .heromedia__ig { display: grid; grid-template-columns: calc(var(--space-10) * 1.1) minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.heromedia .heromedia__ig .clip { aspect-ratio: 1 / 1; }
.heromedia .heromedia__ig .clip__chip { display: none; }
.heromedia .heromedia__ig .clip__cap { margin: 0; }
.clip--photo .clip__still { object-position: 30% 50%; }
.clip__player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* The results before the newest: one row each, the place, the event, the date. */
.rcard__before {
	align-self: stretch;
	margin: var(--space-4) 0 0;
	padding-top: var(--space-3);
	border-top: var(--hair) solid var(--border-hair);
	font-family: var(--font-condensed);
	font-size: var(--text-sm);
	font-weight: var(--label-weight);
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
	color: var(--text-secondary);
}
.rlist {
	align-self: stretch; list-style: none; margin: var(--space-2) 0 0; padding: 0;
	display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-3) var(--space-3); align-items: baseline;
}
.rlist__row { display: contents; }
.rlist__row .badge { justify-self: start; }
.rlist__event { font-size: var(--text-sm); color: var(--text-primary); }
.rlist__note { display: block; color: var(--text-secondary); }
.rlist__date { display: block; font-size: var(--text-sm); color: var(--text-secondary); }

@media (max-width: 700px) {
	/* Phone: the two results full width, one under the other; the clip and the post side by side. */
	.four__boxes { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ir" "kart"; }
	.heromedia .clip__play { width: var(--space-8); height: var(--space-8); }
}

/* ---- The logo with the headline (Mike, 3 October 2026) ----
   "the Elliott Griggs logo on the far left it feels a bit lost ... Elliott Griggs with the
   headline ... would be together with the logo." On a wide screen the badge and the headline
   sit side by side as one block, as they do on the phone, and the tags, Elliot's line and
   Get in touch line up under them on the badge's left edge. He picked option B: the badge
   beside his name in big letters, with the headline under the name. */
@media (min-width: 1100px) {
	.hero__in {
		/* the same left and right edges as the top bar and every section below */
		max-width: var(--container);
		grid-template-columns: auto minmax(0, 0.7fr) minmax(0, 1.55fr);
		grid-template-rows: auto 1fr;
		grid-template-areas: "id head latest" "more more latest";
		align-items: center;
		gap: var(--space-5) var(--space-5);
	}
	.hero__latest { margin-left: var(--space-5); width: auto; }
	.hero__words { display: contents; }
	.hero__head { margin-bottom: 0; }
	.hero__more { align-self: start; }
	.hero__latest { align-self: center; }
	.hero__badge { height: calc(var(--space-10) * 1.25); }
	.hero__lead { font-size: var(--display-3); max-width: 16ch; }
}
.hero__name {
	margin: 0 0 var(--space-2);
	font-family: var(--font-display);
	font-size: var(--display-3);
	font-weight: var(--weight-semibold);
	line-height: var(--display-leading);
	letter-spacing: var(--display-tracking);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--text-primary);
}
.hero__name + .hero__lead { font-size: var(--data-lg); line-height: var(--leading-tight); color: var(--text-secondary); max-width: 24ch; }
@media (max-width: 700px) {
	.hero__name { font-size: var(--display-3); margin-bottom: var(--space-1); }
	.hero__name + .hero__lead { font-size: var(--text-body); }
}

/* ---- The top bar's name: the roundel with ELLIOT GRIGGS RACING (Mike, 3 October 2026) ----
   The roundel at 40 px, in the nav size band, which leaves its 25% clear space in the bar;
   the words beside it are Tachyon letter shapes (src/_includes/brand.njk). */
.brand {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--tap-min);
	text-decoration: none;
	color: var(--text-primary);
}
.brand__mark { display: block; height: 40px; width: auto; aspect-ratio: 945 / 913; }
.brand__word { display: block; height: 14px; width: auto; aspect-ratio: 1785 / 70; }
.masthead .brand { margin: 0; }
.brand { max-width: 100%; min-width: 0; }
@media (max-width: 700px) {
	/* 255 x 10 px, but the words may shrink on the narrowest phones (320 px), so the page never
	   scrolls sideways (checkers, 9 November 2026; Mike: fix before go-live). */
	.brand__word { height: auto; width: 255px; max-width: 100%; flex: 0 1 auto; min-width: 0; }
}

/* ---- Results (Mike, 26 October 2026: "fill it with data") ----
   The race rows, tabs, filters and folds, ported from the round-2 pitch W1 (docs/company/
   2026-10-25-restart-site/round-2/pitch-w1/site/style.css) onto this site's tokens. Every name starts
   with rs- so nothing here touches the home page's own classes. A row is a place badge, the race, and
   a few numbers; on a phone the numbers sit under the race, on a wide screen they line up in columns. */
.rs-mono { font-family: var(--font-data); }
.rs-lab {
	margin: 0; min-width: calc(var(--space-8)); font-family: var(--font-condensed); font-size: var(--text-sm);
	font-weight: var(--label-weight); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--text-secondary);
}
.rs-note { margin: var(--space-4) 0 0; max-width: 70ch; font-size: var(--text-body); line-height: var(--text-body-leading); color: var(--text-primary); }
.rs-note a { font-weight: var(--weight-semibold); }
.rs-note--small { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }

.rs-tabs { display: flex; margin: var(--space-4) 0 var(--space-2); border-bottom: var(--hair) solid var(--border-mid); }
.rs-tab {
	flex: 1; min-height: calc(var(--tap-min) + var(--space-2)); padding: 0 var(--space-4); background: none; border: 0;
	border-bottom: var(--space-1) solid transparent; margin-bottom: calc(var(--hair) * -1); color: var(--text-secondary);
	font-family: var(--font-condensed); font-size: var(--text-lead); font-weight: var(--label-weight);
	letter-spacing: var(--label-tracking); text-transform: uppercase; cursor: pointer;
}
.rs-tab[aria-selected="true"] { color: var(--text-primary); border-bottom-color: var(--accent); }
.rs-tab .rs-mono { margin-left: var(--space-2); font-size: var(--text-sm); letter-spacing: 0; }
.rs-panel { margin-top: var(--space-2); }
.rs-panel[hidden] { display: none; }
html:not(.js) .rs-tabs, html:not(.js) .rs-toolswrap { display: none; }
html:not(.js) .rs-panel { margin-top: var(--space-7); }
@media (min-width: 720px) { .rs-tab { flex: 0 0 auto; min-width: calc(var(--space-9) * 2); } }

/* filters */
.rs-toolswrap { margin-top: var(--space-4); }
.rs-toolswrap > summary {
	list-style: none; display: flex; align-items: center; min-height: calc(var(--tap-min) + var(--space-1)); padding: 0 var(--space-4);
	background: var(--bg-surface); border: var(--hair) solid var(--border-mid); border-radius: var(--radius-2);
	font-family: var(--font-condensed); font-size: var(--text-body); font-weight: var(--label-weight);
	letter-spacing: var(--label-tracking); text-transform: uppercase; cursor: pointer;
}
.rs-toolswrap > summary::-webkit-details-marker { display: none; }
.rs-toolswrap > summary::after { content: "+"; margin-left: auto; font-size: var(--data-lg); }
.rs-toolswrap[open] > summary::after { content: "−"; }
.rs-tools { display: grid; gap: var(--space-3); margin-top: var(--space-2); padding: var(--space-4); background: var(--bg-surface); border: var(--hair) solid var(--border-hair); border-radius: var(--radius-2); }
.rs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.rs-chip {
	min-height: var(--tap-min); padding: 0 var(--space-4); background: transparent; border: var(--hair) solid var(--border-mid);
	border-radius: var(--radius-1); color: var(--text-secondary); font-family: var(--font-condensed); font-size: var(--text-sm);
	font-weight: var(--label-weight); letter-spacing: var(--label-tracking); text-transform: uppercase; cursor: pointer;
}
.rs-chip[aria-pressed="true"] { background: var(--paper); color: var(--text-invert); border-color: var(--paper); }
.rs-sortby { display: flex; align-items: center; gap: var(--space-3); }
.rs-sortsel {
	flex: 1; min-height: var(--tap-min); padding: 0 var(--space-3); background: var(--bg-inset); color: var(--text-primary);
	border: var(--hair) solid var(--border-mid); border-radius: var(--radius-1); font: inherit; max-width: 100%;
}
@media (min-width: 960px) {
	.rs-toolswrap > summary { display: none; }
	.rs-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-7); }
	.rs-sortby { flex: 0 1 auto; }
	.rs-sortsel { flex: 0 1 auto; }
}
.rs-sum { display: flex; align-items: center; min-height: var(--tap-min); margin: var(--space-3) 0 0; padding: var(--space-1) 0; font-size: var(--text-sm); color: var(--text-primary); border-bottom: var(--hair) solid var(--border-hair); }
.rs-morewrap { margin: var(--space-5) 0 0; text-align: center; }
.rs-morewrap[hidden] { display: none; }
.rs-morewrap [hidden] { display: none; }
.rs-morewrap .btn { width: 100%; max-width: calc(var(--space-9) * 4); }
html:not(.js) .rs-morewrap { display: none; }
.rs-empty { padding: var(--space-5) 0; font-size: var(--text-body); color: var(--text-primary); }
.rs-linkbtn { background: none; border: 0; padding: 0; color: var(--text-primary); font: inherit; font-weight: var(--weight-semibold); text-decoration: underline; cursor: pointer; }
.rs-notes { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--hair) solid var(--border-hair); }
.rs-notes p { font-size: var(--text-sm); line-height: var(--text-body-leading); color: var(--text-secondary); max-width: 80ch; }

/* a race: one row. Phone: place on the left, race and date, numbers under, the check link last. */
.rs-rows { margin-top: var(--space-4); }
.rs-list { list-style: none; margin: 0; padding: 0; border-top: var(--hair) solid var(--border-mid); }
.rs-head { display: none; }
.rs-row {
	position: relative; display: grid; grid-template-columns: calc(var(--space-8)) minmax(0, 1fr);
	grid-template-areas: "res date" "res ev" "res stat" "res link"; gap: var(--space-1) var(--space-3); align-items: start;
	margin: 0; padding: var(--space-3) var(--space-1) var(--space-3) var(--space-3);
	border-bottom: var(--hair) solid var(--border-hair); border-left: var(--space-1) solid color-mix(in srgb, var(--silver-400) 35%, transparent);
}
.rs-row[hidden] { display: none; }
.rs-row--w { border-left-color: var(--pink-500); }
.rs-row--p { border-left-color: var(--green-pb); }
.rs-row--t { border-left-color: var(--blue-300); }
.rs-row__date { grid-area: date; font-family: var(--font-data); font-size: var(--text-sm); color: var(--text-secondary); white-space: nowrap; }
.rs-row__res { grid-area: res; }
.rs-row__ev { grid-area: ev; min-width: 0; }
.rs-row__ev strong { display: block; font-size: var(--text-body); line-height: var(--leading-tight); color: var(--text-primary); }
.rs-sub { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--text-secondary); }
.rs-row__stat { grid-area: stat; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-family: var(--font-data); font-size: var(--text-sm); color: var(--text-primary); }
.rs-row__stat i { font-style: normal; color: var(--text-secondary); }
.rs-row__link { grid-area: link; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); min-height: var(--tap-min); }
.rs-row__link a {
	display: inline-flex; align-items: center; gap: 0.3em; min-height: var(--tap-min); font-family: var(--font-condensed); font-size: var(--text-sm);
	font-weight: var(--label-weight); letter-spacing: var(--label-tracking); text-transform: uppercase;
}
.rs-needs { font-size: var(--text-sm); color: var(--text-secondary); }
.rs-long { display: none; }
.rs-needs--open { color: var(--green-pb); }
.rs-pos {
	display: inline-flex; align-items: center; justify-content: center; min-width: calc(var(--space-7) + var(--space-1)); height: var(--tap-min); padding: 0 var(--space-1);
	font-family: var(--font-data); font-size: var(--text-lead); font-weight: var(--weight-medium); color: var(--text-primary);
	background: color-mix(in srgb, var(--silver-300) 8%, transparent); border: var(--hair) solid var(--border-mid); border-radius: var(--radius-1);
}
.rs-pos--w { background: var(--pink-500); border-color: var(--pink-500); color: var(--accent-ink); }
.rs-pos--p { background: color-mix(in srgb, var(--green-pb) 16%, transparent); border-color: color-mix(in srgb, var(--green-pb) 55%, transparent); color: var(--green-pb); }
.rs-pos--t { background: color-mix(in srgb, var(--blue-300) 14%, transparent); border-color: color-mix(in srgb, var(--blue-300) 45%, transparent); }
.rs-fl { color: var(--green-pb); font-weight: var(--weight-medium); }
.rs-dl--up { color: var(--green-pb); }
.rs-dl--dn, .rs-dl--nil { color: var(--text-secondary); }
.rs-s--nil { display: none; }
.rs-s--more { display: none; }
.rs-wide { display: none; }
.rs-row__stat .rs-s { white-space: nowrap; }
@media (min-width: 960px) {
	.rs-rows--ir { --rs-cols: 92px 64px minmax(0, 1fr) 60px 66px 60px 84px 96px 164px; }
	.rs-rows--k { --rs-cols: 92px 64px minmax(0, 1fr) 78px 64px 92px 104px 92px 164px; }
	.rs-head, .rs-row { display: grid; grid-template-columns: var(--rs-cols); gap: 0 var(--space-3); align-items: center; }
	.rs-head {
		padding: var(--space-3) var(--space-1) var(--space-3) calc(var(--space-3) + var(--space-1)); border-bottom: var(--hair) solid var(--border-strong);
		font-family: var(--font-condensed); font-size: var(--text-sm); font-weight: var(--label-weight); letter-spacing: var(--label-tracking);
		text-transform: uppercase; color: var(--text-secondary);
	}
	.rs-row { grid-template-columns: var(--rs-cols); grid-template-areas: none; padding: var(--space-2) var(--space-1) var(--space-2) var(--space-3); }
	.rs-row__date, .rs-row__res, .rs-row__ev, .rs-row__link { grid-area: auto; }
	.rs-row__date { text-align: left; padding: 0; font-size: var(--text-sm); }
	.rs-row__stat { display: contents; }
	.rs-row__stat .rs-s { font-size: var(--text-sm); }
	.rs-row__stat i { display: none; }
	.rs-s--nil { display: block; }
	.rs-s--more { display: block; }
	.rs-wide { display: block; }
	.rs-row__link { display: block; min-height: 0; }
	.rs-row__link a { min-height: 0; }
	.rs-needs { display: block; }
	.rs-long { display: inline; }
	.rs-row:hover { background: color-mix(in srgb, var(--silver-300) 6%, transparent); }
}

.rs-totals { margin: var(--space-4) 0 0; flex-wrap: nowrap; gap: var(--space-5); }

/* Home page: the iRacing totals under the aim card, and the "best results" box in Latest. */
.irtotals { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-7); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.irtotals li { margin: 0; }
.irtotals__link { margin: var(--space-4) 0 0; }
.rcard__more { margin: var(--space-3) 0 0; font-size: var(--text-sm); }
.rcard__more a { display: inline-flex; align-items: center; min-height: var(--tap-min); font-weight: var(--weight-semibold); }

/* ---- Pitch A, "the photo leads": the race poster ----
   The whole portrait photo (1600 x 2001, never cropped) is the picture; the badge is the mark;
   his name is the name. Phone: badge and name on top, the photo whole at nearly full width,
   his three proof numbers in a row under it, then Mike's headline. From 700 px: the photo whole
   on the left at its own shape, everything else on the right. */
.poster {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(ellipse 70% 80% at 25% 45%, color-mix(in srgb, var(--blue-500) 55%, transparent), transparent 70%),
		linear-gradient(180deg, var(--bg-surface), var(--bg-page) 90%);
}
.poster__in {
	position: relative;
	max-width: var(--container-wide);
	margin: 0 auto;
	padding: var(--space-4) var(--gutter) var(--space-6);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas: "id name" "photo photo" "proof proof" "lead lead" "cta cta";
	gap: var(--space-4);
	align-items: center;
}
.poster__id { grid-area: id; margin: 0; line-height: 0; }
.poster__badge { display: block; height: calc(var(--space-9) + var(--space-5)); width: auto; aspect-ratio: 945 / 1243; }
.poster__name { grid-area: name; min-width: 0; }
.poster__driver {
	margin: 0 0 var(--space-2);
	font-family: var(--font-display);
	font-size: var(--display-3);
	font-weight: var(--weight-semibold);
	line-height: var(--display-leading);
	letter-spacing: var(--display-tracking);
	text-transform: uppercase;
	color: var(--text-primary);
}
.poster__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.poster__tags .badge { font-size: 0.75rem; padding-left: var(--space-2); padding-right: var(--space-2); }
.poster__photo { grid-area: photo; margin: 0 var(--space-3) 0 0; justify-self: center; width: min(100%, 340px); }
.poster__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1600 / 1735;
	border: var(--hair) solid var(--border-strong);
	border-radius: var(--radius-2);
	box-shadow: var(--space-2) var(--space-2) 0 var(--accent);
}
.poster__proof { grid-area: proof; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-self: start; }
.poster__proof li { margin: 0; }
.poster__proof .stat__value { font-size: var(--data-lg); padding-bottom: var(--space-1); }
.poster__proof .stat__label { font-size: var(--text-sm); margin-top: var(--space-1); line-height: 1.2; }
.poster__lead {
	grid-area: lead;
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-lead);
	font-weight: var(--weight-semibold);
	line-height: 1.45;
	color: var(--text-primary);
}
.poster__buttons { grid-area: cta; display: none; }

.latest { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; margin-top: var(--space-2); }
.latest__media { max-width: 48ch; }

/* 700 to 899 px: photo left, the rest stacked on the right. */
@media (min-width: 700px) {
	.poster__in {
		--photo-w: clamp(260px, min(44vw, calc((100svh - 130px) * 0.8)), 800px);
		padding-top: var(--space-6);
		padding-bottom: var(--space-7);
		grid-template-columns: var(--photo-w) minmax(0, 1fr);
		grid-template-areas: "photo id" "photo name" "photo proof" "photo lead" "photo cta";
		grid-template-rows: auto auto auto auto 1fr;
		column-gap: var(--space-6);
		row-gap: var(--space-5);
		align-items: start;
	}
	.poster__photo { align-self: center; grid-row: 1 / -1; width: 100%; margin: 0; justify-self: stretch; }
	.poster__photo img { box-shadow: var(--space-3) var(--space-3) 0 var(--accent); }
	.poster__badge { height: calc(var(--space-10) * 1.2); }
	.poster__driver { font-size: var(--display-2); }
	.poster__proof .stat__value { font-size: var(--data-lg); }
	.poster__lead { font-size: var(--text-lead); }
	.poster__buttons { display: flex; }
	.latest { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 900px) {
	.poster__in {
		padding-left: var(--space-6);
		padding-right: var(--space-6);
		grid-template-columns: var(--photo-w) auto minmax(0, 1fr);
		grid-template-areas: "photo id name" "photo proof proof" "photo lead lead" "photo cta cta";
		grid-template-rows: auto auto auto 1fr;
		column-gap: var(--space-7);
		row-gap: var(--space-6);
		align-items: center;
	}
	.poster__photo img { box-shadow: var(--space-4) var(--space-4) 0 var(--accent); }
	.poster__id { margin-left: var(--space-5); }
	.poster__badge { height: calc(var(--space-10) * 1.6); }
	.poster__driver { max-width: 6.5ch; margin-bottom: var(--space-3); }
	.poster__proof { gap: var(--space-5); }
	.poster__proof .stat__value { font-size: var(--data-xl); padding-bottom: var(--space-2); }
	.poster__proof .stat__label { font-size: var(--text-body); margin-top: var(--space-2); }
	.poster__tags .badge { font-size: inherit; padding-left: revert; padding-right: revert; }
	.poster__lead { font-size: var(--data-lg); max-width: 48ch; }
	.poster__lead, .poster__buttons { align-self: start; }
	.latest { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-6); }
	.latest__media { max-width: none; }
}
/* Big screens: the poster grows, photo up to 800 px wide, badge about 240 px. */
@media (min-width: 1600px) {
	.poster__in { max-width: 1760px; --photo-w: clamp(320px, calc((100svh - 130px) * 0.8), 800px); }
	.poster__badge { height: calc(var(--space-10) * 1.9); }
	.poster__driver { font-size: calc(var(--display-2) * 1.25); }
	.poster__lead { font-size: calc(var(--data-lg) * 1.15); }
}

/* Mike's crit, 9 November 2026. Two numbers in the poster, much bigger: "definitely the 9 and the P3
   need to be a lot bigger". On a wide screen the clip and his latest post move up into the poster,
   "above the red and white line", so the Latest Results boxes below get the whole width. The phone
   keeps them under the results (the band's own copy). */
.poster__proof { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
.poster__proof .stat__value { font-size: calc(var(--display-1) * 1.6); }
.poster__media { display: none; }
@media (min-width: 900px) {
	/* each number's column may shrink, so its label wraps instead of running off the edge (1100 px) */
	.poster__proof { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: clamp(var(--space-6), 5vw, var(--space-9)); }
	.poster__proof .stat__value { font-size: var(--display-1); padding-bottom: var(--space-3); }
	.poster__proof .stat__label { font-size: var(--text-lead); }
	.poster__media { display: block; min-width: 0; }
	.latest { grid-template-columns: minmax(0, 1fr); }
	.latest__media { display: none; }
	/* the clip and the post side by side, the same height: 16:9 beside 1:1 */
	.heromedia--poster { grid-template-columns: minmax(0, 16fr) minmax(0, 9fr); align-items: start; }
	.heromedia--poster .heromedia__ig { display: flex; flex-direction: column; }
	.heromedia--poster .heromedia__ig .clip__chip { display: inline-flex; }
	/* a quick glance: the chip on each picture says what it is, so no line under them here */
	.heromedia--poster .clip__cap { display: none; }
	.heromedia--poster .clip__play { width: var(--space-8); height: var(--space-8); }
}
@media (min-width: 900px) {
	/* Option A: the clip and the post in one row with Get in touch, under Mike's headline. */
	.poster__in { row-gap: var(--space-5); }
	.poster__foot { grid-area: cta; display: flex; align-items: flex-start; gap: var(--space-6); min-width: 0; }
	.poster__foot .poster__buttons { flex: none; display: flex; }
	.poster__foot .poster__media { flex: 1 1 auto; max-width: 30rem; }
}
@media (min-width: 900px) and (max-width: 1149px) {
	/* Under 1150 px the row beside Get in touch is too narrow: the tiles fell to 81 px and the
	   INSTAGRAM chip ran off its picture (checkers, 9 November 2026; Mike: fix before go-live).
	   Here the clip and the post sit under the button, the column's full width. */
	.poster__foot { flex-direction: column; gap: var(--space-4); }
	.poster__foot .poster__media { width: 100%; }
}
.poster__foot { grid-area: cta; }
@media (max-width: 699px) { .poster__foot { display: none; } }

/* The three sim cars, small, in a row above both iRacing results: a sign, not a section
   (Mike, 7 November 2026). src/_includes/sim-cars.njk. */
.simcars { display: flex; align-items: flex-end; gap: var(--space-2); align-self: stretch; max-width: 100%; margin: 0 0 var(--space-5); }
.simcars__car { display: block; flex: 0 1 140px; min-width: 0; width: 140px; height: auto; }
.simcars--small { margin-bottom: var(--space-3); }
.simcars--small .simcars__car { flex-basis: 96px; width: 96px; }

/* Banner heads (pitch A, "the icon banner", 8 November 2026). One shape for both disciplines: a band
   the width of the section, the word at the left, the picture at the right. iRacing is a dark band
   with his three cars on its floor line; karting is the same band made of the wide Buckmore photo.
   src/_includes/banner-heads.njk. No motion. */
.bhead {
	--bhead-h: 200px;
	position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4);
	height: var(--bhead-h); overflow: hidden; margin: 0 0 var(--space-4);
	background: var(--bg-inset); border: var(--hair) solid var(--border-mid); border-radius: var(--radius-1);
}
.bhead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--rule-strong); background: var(--accent); }
.bhead__words { position: relative; z-index: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: var(--space-4); min-width: 0; }
.bhead__eyebrow { margin: 0 0 var(--space-2); font-family: var(--font-condensed); font-size: var(--text-sm); font-weight: var(--label-weight); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--text-secondary); }
.bhead__title { margin: 0; font-size: var(--display-3); line-height: var(--display-leading); color: var(--text-primary); }
.bhead__tag { margin: var(--space-2) 0 0; font-family: var(--font-data); font-size: var(--text-sm); color: var(--text-secondary); }
.bhead__sub { margin: 0 0 var(--space-5); }
.bhead__cars { display: flex; align-items: flex-end; gap: var(--space-2); padding: 0 var(--space-4); margin-bottom: calc(var(--rule-strong) - 8px); min-width: 0; }
.bhead__car { display: block; flex: 0 1 auto; width: 31vw; max-width: 230px; min-width: 0; height: auto; }
.bhead__pic, .bhead__pic img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bhead__pic img { object-fit: cover; object-position: 100% 50%; }
.bhead--kt { align-items: stretch; }
/* iRacing band (Mike, 8 Nov 2026): the cars centred up and down, iRacing's own logo in place of the word. */
.bhead--ir { align-items: center; }
.bhead--ir .bhead__cars { position: relative; z-index: 1; align-items: center; margin-bottom: 0; }
/* White ground behind the cars so their floor shadows show (Mike, 8 Nov 2026), fading in from the left
   the same way the karting photo does. */
.bhead--ir::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 70%; background: var(--paper); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 22%); mask-image: linear-gradient(to right, transparent 0%, black 22%); }
.bhead--ir .bhead__eyebrow { margin-bottom: var(--space-4); }
.bhead__logo { display: block; height: 40px; width: auto; max-width: 100%; }
@media (min-width: 700px) {
	.bhead--kt .bhead__pic { inset: 0 0 0 auto; width: auto; aspect-ratio: 3.2 / 1; max-width: none; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 28%); mask-image: linear-gradient(to right, transparent 0%, black 28%); }
	.bhead--kt .bhead__pic img { object-position: 50% 50%; }
}
.bhead--kt .bhead__words { padding-right: var(--space-8); }
@media (max-width: 699px) {
	.bhead { --bhead-h: auto; flex-direction: column; align-items: stretch; gap: 0; }
	.bhead--ir { height: auto; }
	.bhead--ir .bhead__words { padding-bottom: var(--space-4); }
	.bhead--ir .bhead__cars { padding-top: var(--space-3); padding-bottom: var(--space-3); background: var(--paper); }
	.bhead--ir::before { content: none; }
	.bhead__cars { justify-content: space-between; gap: var(--space-1); padding: 0 var(--space-3); margin-bottom: var(--rule-strong); }
	.bhead__car { flex: 1 1 0; width: auto; max-width: 104px; }
	.bhead--kt { height: auto; }
	.bhead--kt .bhead__words { order: -1; background: none; padding: var(--space-4) var(--space-4) var(--space-2); }
	.bhead--kt .bhead__pic { position: relative; inset: auto; display: block; aspect-ratio: 2 / 1; }
	.bhead--kt .bhead__pic img { position: static; }
}
@media (min-width: 700px) { .bhead { --bhead-h: 220px; } .bhead__title { font-size: var(--display-2); } .bhead__logo { height: 56px; } }
/* Small bands across the top of the Latest boxes (Mike, 9 Nov 2026: "smaller obviously"). Edge to edge
   in the box, picture only. The iRacing one is the phone form of the big band, made small: the logo on
   the dark, the three cars on white below it, so the cars stay as big as the old row of small cars.
   The karting one is the Buckmore photo, the same height. src/_includes/banner-heads.njk. */
.bhead--small {
	--bhead-h: 128px;
	align-self: stretch; height: var(--bhead-h); gap: 0;
	margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-4);
	border: 0; border-bottom: var(--hair) solid var(--border-mid); border-radius: var(--radius-2) var(--radius-2) 0 0;
}
.bhead--small.bhead--ir { flex-direction: column; align-items: stretch; }
.bhead--small.bhead--ir::before { content: none; }
/* the pink line under the band, as on the karting box: the white strip of cars sat over it (Mike, 9 Nov 2026) */
.bhead--small::after { z-index: 2; }
.bhead--small .bhead__words { flex: 0 0 40px; justify-content: center; padding: 0 var(--space-4); }
.bhead--small .bhead__logo { height: 18px; align-self: flex-start; }
.bhead--small .bhead__cars { flex: 1 1 auto; justify-content: space-between; align-items: center; gap: var(--space-1); padding: 0 var(--space-3); margin: 0; background: var(--paper); }
.bhead--small .bhead__car { flex: 0 1 auto; width: auto; max-width: 31%; max-height: 74px; }
.bhead--small.bhead--kt .bhead__pic { position: absolute; inset: 0; width: 100%; aspect-ratio: auto; -webkit-mask-image: none; mask-image: none; }
.bhead--small.bhead--kt .bhead__pic img { position: absolute; object-fit: cover; object-position: 50% 45%; }
/* Where the box is wide enough, the small iRacing band is the big band made small (Mike, 9 Nov 2026: "a
   smaller version of exactly what you have for the iRacing large banner"): the logo on the dark at the
   left, the three cars on the white fade at the right. A narrow box keeps the stacked form, as the big
   band does on a phone. */
.four__box--iracing { container-type: inline-size; }
/* Parked up beside each other in the stacked form too (Mike, 9 Nov 2026, picked from phone pictures): centred,
   each car tucked 30 px behind the one to its right, as big as fits (122 px at most). */
.bhead--small.bhead--ir .bhead__cars { justify-content: center; gap: 0; }
.bhead--small.bhead--ir .bhead__car { position: relative; flex: 0 0 auto; width: min(122px, calc((100% + 60px) / 3)); max-width: none; max-height: none; min-width: 0; }
.bhead--small.bhead--ir .bhead__car + .bhead__car { margin-left: -30px; }
.bhead--small.bhead--ir .bhead__car:nth-child(1) { z-index: 1; }
.bhead--small.bhead--ir .bhead__car:nth-child(2) { z-index: 2; }
.bhead--small.bhead--ir .bhead__car:nth-child(3) { z-index: 3; }
@container (min-width: 500px) {
	.bhead--small.bhead--ir { flex-direction: row; align-items: center; justify-content: space-between; }
	.bhead--small.bhead--ir::before { content: ""; }
	.bhead--small.bhead--ir .bhead__words { flex: 0 0 auto; align-self: stretch; padding: 0 var(--space-4); }
	.bhead--small.bhead--ir .bhead__logo { height: 32px; }
	.bhead--small.bhead--ir .bhead__cars { flex: 0 1 auto; justify-content: flex-end; gap: 0; padding: 0 var(--space-4) 0 0; background: none; }
	.bhead--small.bhead--ir .bhead__car { position: relative; flex: 0 0 auto; width: 112px; max-width: none; max-height: none; min-width: 0; }
	/* Parked up beside each other (Mike, 9 Nov 2026: "the McLaren would be occluding the F4, which would be
	   occluding the LM"): each car tucks behind the one to its right, so the white fade can start further from
	   the "g" of iRacing. */
	.bhead--small.bhead--ir .bhead__car + .bhead__car { margin-left: -34px; }
	.bhead--small.bhead--ir::before { width: 58%; }
}