/* Tony Wilson Racing: site styles.
 *
 * Race team look: dark pit-lane background, the car's purple/white livery,
 * electric blue and yellow accents pulled from the "Barney" hero card, heavy
 * condensed type. Anything marked .ph is a placeholder for a photo or logo.
 *
 * ── Two rules this file never breaks ─────────────────────────────────────
 * 1. IMAGES KEEP THEIR PROPORTIONS. Every <img> carries width/height attributes
 *    and gets height:auto, so it scales as one piece. No object-fit crops, no
 *    height:100% stretching into a grid cell, and no box whose height comes from
 *    the viewport. An earlier version sized the hero with vh and let photos fill
 *    grid cells; in a tall window (or a full-page capture) the car photo, merch
 *    and media all came out squashed or stretched and the hero copy drifted off
 *    the side of its photo.
 * 2. RESPONSIVE LIKE PCS: viewport-fit=cover with safe-area insets, a compact
 *    short-landscape layout (iPhone 18 Pro / Pro Max sideways), even columns that
 *    split on the fold of an open iPhone Duo (~951px), and 44pt touch targets on
 *    touch screens. The numbers come from the PCS measurements (Sept 2026):
 *    18 Pro 402x874, Pro Max 440x956, Duo closed 466x678, Duo open 951x669.
 */

:root {
  --bg: #0a0a0f;
  --bg-2: #111119;
  --panel: #17171f;
  --line: #2a2a38;
  --text: #f5f5f8;
  --muted: #a8a8b8;
  --purple: #7b35e8;
  --purple-deep: #3c1470;
  --blue: #29c5ff;
  --yellow: #ffd60a;
  --radius: 10px;
  --max: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Safe areas: zero on desktop and an upright iPhone; non-zero sideways (the
     Dynamic Island side) and on iPhone Duo, whose Safari strip can sit on either
     edge. Nothing assumes a side. */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --edge-l: var(--safe-l);
  --edge-r: var(--safe-r);
}
/* From tablet width up, keep columns centred on the SCREEN (wider inset on both
   sides) so two-column layouts split on an open Duo's fold, not beside it. */
@media (min-width: 768px) {
  :root { --edge-l: max(var(--safe-l), var(--safe-r)); --edge-r: max(var(--safe-l), var(--safe-r)); }
}

*, *::before, *::after { box-sizing: border-box; }
/* el.hidden must win over component display rules (.tag, .eyebrow and friends),
   otherwise site.js hides an element and the CSS puts it straight back. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--body);
  overflow-x: clip;
}
img, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--blue); }
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: .01em;
  margin: 0 0 .5em;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.5rem, 7vw, 5.25rem); }
h2 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.center { text-align: center; }
.mt-lg { margin-top: 40px; }
.nowrap { white-space: nowrap; }

/* Content column: clears the safe area on its own side while backgrounds run to
   the glass. With zero insets this is exactly width:min(...) + margin:auto. */
.container, .header-inner, .ticker-inner {
  --_w: min(100% - 2 * var(--gutter) - var(--edge-l) - var(--edge-r), var(--max));
  width: var(--_w);
  margin-left: calc((100% - var(--_w)) / 2 + (var(--edge-l) - var(--edge-r)) / 2);
  margin-right: auto;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 .8rem/1 var(--body); letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 34px; height: 4px; background: linear-gradient(90deg, var(--purple), var(--blue)); transform: skewX(-30deg); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 .95rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
  padding: 14px 26px; min-height: 44px; border-radius: 4px; text-decoration: none; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s, background .15s; text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--purple); color: #fff; }
.btn-primary:hover { background: #8d4bff; }
.btn-outline { border-color: #fff; color: #fff; background: transparent; }
.btn-outline:hover { background: #fff; color: var(--bg); }
.btn-yellow { background: var(--yellow); color: #111; }
.btn-sm { padding: 10px 16px; font-size: .85rem; }
.btn-lg { padding: 18px 30px; font-size: 1.05rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
/* Phones: a pair of CTAs stacks full width instead of wrapping into a ragged pair. */
@media (max-width: 560px) { .btn-row > .btn { flex: 1 1 100%; } }

/* ── Placeholders ────────────────────────────────────────── */
.ph {
  position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
  background: repeating-linear-gradient(135deg, #1b1b25 0 14px, #20202b 14px 28px);
  border: 1px dashed #3a3a4a; border-radius: var(--radius);
  color: #8a8a9c; font: 500 .8rem/1.4 ui-monospace, Menlo, monospace; padding: 16px; min-height: 180px;
}
.ph::before { content: "▣"; position: absolute; top: 10px; left: 12px; opacity: .5; }
.ph-logo { min-height: 90px; border-radius: 6px; }

/* ── Preview bar + race ticker ───────────────────────────── */
.preview-bar {
  background: var(--yellow); color: #111; text-align: center;
  font: 600 .74rem/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase;
  padding: 6px calc(16px + var(--safe-r)) 6px calc(16px + var(--safe-l));
}
.ticker { background: linear-gradient(90deg, var(--purple-deep), #1d0f38 60%, var(--bg-2)); border-bottom: 1px solid var(--line); }
.ticker-inner { padding: 9px 0; display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; font-size: .85rem; }
.ticker-label {
  background: var(--yellow); color: #111; font: 700 .72rem/1 var(--display); letter-spacing: .12em;
  text-transform: uppercase; padding: 5px 9px; transform: skewX(-12deg);
}
.ticker-event { font-weight: 600; }
.ticker-place { color: var(--muted); font-weight: 400; margin-left: 6px; }
.ticker-count { font: 700 1rem/1 var(--display); color: var(--blue); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.ticker-link { margin-left: auto; color: #fff; font-size: .8rem; }
@media (max-width: 700px) { .ticker-place, .ticker-link { display: none; } }
@media (pointer: coarse) and (min-width: 701px) { .ticker-link { display: inline-flex; align-items: center; min-height: 44px; } }

/* ── Header / nav ────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); }
/* The blur lives on a pseudo-element on purpose: backdrop-filter on the header
   itself makes it the containing block for the position:fixed mobile nav, which
   then sizes to the header instead of the screen and widens the page. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(10, 10, 15, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.header-inner { padding: 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.brand-num {
  font: 700 1.5rem/1 var(--display); color: #fff; background: var(--purple);
  padding: 8px 10px; transform: skewX(-12deg); border-right: 4px solid var(--blue);
}
.brand-text { font: 500 1.05rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .06em; }
.brand-text strong { display: block; font-size: 1.3rem; font-weight: 700; }

.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.nav-list a:not(.btn) {
  display: block; padding: 10px 11px; color: #d9d9e3; text-decoration: none;
  font: 500 .95rem/1 var(--display); text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 3px solid transparent;
}
.nav-list a:not(.btn):hover { color: #fff; border-color: var(--purple); }
body[data-page="team"] [data-nav="team"],
body[data-page="the-car"] [data-nav="the-car"],
body[data-page="schedule"] [data-nav="schedule"],
body[data-page="media"] [data-nav="media"],
body[data-page="partners"] [data-nav="partners"],
body[data-page="contact"] [data-nav="contact"] { color: #fff; border-color: var(--blue) !important; }

.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 9px; cursor: pointer; }
.nav-toggle span { display: block; width: 26px; height: 3px; background: #fff; margin: 5px 0; transition: .2s; }
@media (max-width: 1080px) {
  .nav-toggle { display: block; position: relative; z-index: 60; }
  .nav {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 86vw); z-index: 2;
    background: var(--bg-2); border-left: 1px solid var(--line);
    padding: 88px calc(20px + var(--safe-r)) calc(20px + env(safe-area-inset-bottom, 0px)) 20px;
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%); visibility: hidden; transition: transform .25s, visibility 0s .25s;
  }
  .nav.open { transform: none; visibility: visible; transition: transform .25s; }
  /* Open, the button is the panel's close control, so it is pinned to the top of
     the SCREEN. Left in the header it rode down with the event bar and the race
     ticker and ended up halfway down the panel, on top of a nav link. */
  .nav-toggle[aria-expanded="true"] {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    right: calc(var(--safe-r) + 14px);
  }
  /* Dim the page behind the panel. It hangs off the header so it sits inside the
     header's stacking context, below the panel and above everything else. */
  body.nav-open .site-header::after {
    content: ""; position: fixed; inset: 0; z-index: 1;
    background: rgba(10, 10, 15, .62);
  }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list a:not(.btn) { padding: 15px 8px; border-bottom: 1px solid var(--line); font-size: 1.1rem; }
  .nav-list .btn { margin-top: 18px; width: 100%; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* ── Hero ────────────────────────────────────────────────── */
/* The photo sets the hero's size (16:9, never cropped). From 900px the copy is
   laid over the bottom-left of the photo in the same grid cell; below that the
   photo shows in full and the copy follows underneath it. */
.hero { position: relative; display: grid; background: var(--bg); }
.hero-media { position: relative; }
.hero-media img, .hero-media .ph { width: 100%; }
.hero-media .ph { aspect-ratio: 16 / 9; min-height: 0; border: 0; border-radius: 0; }
.hero-content { padding: 28px 0 40px; }
.hero h1 span { display: block; color: transparent; -webkit-text-stroke: 2px #fff; }
.hero-sub { font-size: 1.1rem; color: #d9d9e3; max-width: 540px; margin-bottom: 24px; }

@media (min-width: 900px) {
  .hero > .hero-media, .hero > .hero-content { grid-area: 1 / 1; }
  .hero-content { align-self: end; position: relative; z-index: 2; padding: 0 0 clamp(32px, 5vw, 72px); }
  .hero-media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(10,10,15,.9) 0%, rgba(10,10,15,.55) 38%, rgba(10,10,15,0) 68%),
      linear-gradient(0deg, rgba(10,10,15,.85) 0%, rgba(10,10,15,0) 45%);
  }
  .hero-content > * { max-width: 620px; }
}
/* Photo on top, copy below: fade the photo's bottom edge into the page. */
@media (max-width: 899px) {
  .hero-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(0deg, var(--bg), rgba(10,10,15,0)); pointer-events: none; }
}

.page-hero { position: relative; padding: 64px 0 44px; border-bottom: 1px solid var(--line); background: radial-gradient(1200px 400px at 80% -10%, rgba(123,53,232,.35), transparent 60%), var(--bg); }
.page-hero p { max-width: 640px; color: #d0d0dc; font-size: 1.1rem; }

.stripes { height: 8px; background: repeating-linear-gradient(-60deg, var(--purple) 0 22px, transparent 22px 30px, var(--blue) 30px 40px, transparent 40px 48px); opacity: .9; }
.checker { height: 14px; background: conic-gradient(#fff 25%, #111 0 50%, #fff 0 75%, #111 0) 0 0 / 14px 14px; opacity: .85; }

/* ── Sections + grids ────────────────────────────────────── */
.section { padding: clamp(56px, 8vw, 88px) 0; }
.section-tight { padding: 40px 0; }
.section-alt { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.section-head h2 { margin: 0; }

.grid { display: grid; gap: 20px; }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.grid-3 { grid-template-columns: minmax(0, 1fr); }
.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; }
  .grid-4 { gap: 20px; }
}
/* Three-up only from 960px: an open iPhone Duo is ~951px, and three columns put
   the middle card across the fold. Until then three items stack, centred. */
@media (max-width: 959px) { .grid-3 { max-width: 560px; margin-inline: auto; } }
@media (min-width: 960px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Stat strip */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { padding: 20px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-k { font: 600 .72rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.stat-v { font: 700 clamp(1.3rem, 3vw, 2.1rem)/1.1 var(--display); text-transform: uppercase; margin-top: 8px; }
.stat-v small { font-size: .55em; color: var(--blue); }

/* Photos: always their own proportions. */
.photo { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); }

/* Cards */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.card-body { padding: 18px; }
@media (max-width: 420px) { .card-body { padding: 14px; } .card-body h3 { font-size: 1.05rem; } }
.card .ph { border-radius: 0; border: 0; border-bottom: 1px dashed #3a3a4a; }
.card-link { text-decoration: none; color: inherit; transition: transform .2s, border-color .2s; }
.card-link:hover { transform: translateY(-4px); border-color: var(--purple); }
.card-img { width: 100%; background: #1b1b25; }
.tag { display: inline-block; font: 600 .7rem/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); margin-bottom: 8px; }
.price { font: 700 1.25rem/1 var(--display); color: #fff; }

/* Spec sheet */
.spec { width: 100%; border-collapse: collapse; }
.spec th, .spec td { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec th { width: 42%; padding-right: 12px; font: 600 .76rem/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.spec td { font: 500 1.02rem/1.4 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.tbd { color: var(--yellow); font-family: var(--body); text-transform: none; font-size: .85rem; }

/* Schedule */
.race-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.race {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--purple); border-radius: 8px; padding: 16px;
}
@media (min-width: 768px) { .race { grid-template-columns: 90px minmax(0, 1fr) auto; padding: 18px 24px; } }
.race.next { border-left-color: var(--yellow); background: linear-gradient(90deg, rgba(255,214,10,.08), var(--panel) 40%); }
.race-date { text-align: center; font-family: var(--display); text-transform: uppercase; line-height: 1; }
.race-date b { display: block; font-size: 2rem; }
.race-date span { font-size: .8rem; color: var(--muted); letter-spacing: .1em; }
.race-date.long b { font-size: 1.25rem; }  /* a year or month name, not a day number */
.race h3 { margin: 0 0 4px; font-size: 1.15rem; }
.race p { margin: 0; color: var(--muted); font-size: .92rem; }
.race-action { grid-column: 1 / -1; }
@media (min-width: 768px) { .race-action { grid-column: auto; } }

.results { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 640px; }
.results th, .results td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.results th { font: 600 .72rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.results.compact { min-width: 0; }
.small-print { font-size: .88rem; margin-top: 12px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }

/* Partner wall */
.logo-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 1100px) { .logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tier-label { font: 600 .78rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 30px 0 14px; }

/* ── Media ───────────────────────────────────────────────── */
/* Featured item full width, then an even two-up (four-up on desktop) row of
   photos. Everything is 3:2 at its own proportions, so rows line up without
   cropping anything. */
.media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.media-grid > * { min-width: 0; }
.media-grid > img { width: 100%; border-radius: var(--radius); }
.media-grid .wide { grid-column: 1 / -1; }
.media-grid .ph { min-height: 140px; }
/* Desktop: featured item on the left half, four photos two-by-two on the right.
   A 3:2 item two columns wide is within a few px of two stacked 3:2 rows, so the
   halves line up at their natural sizes. */
@media (min-width: 1100px) {
  .media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .media-grid .wide { grid-column: span 2; grid-row: span 2; }
}

/* Click-to-play video: shows a still until tapped, then swaps in the player at
   the same size, so the page doesn't jump. */
.video { position: relative; width: 100%; border: 0; padding: 0; background: #000; border-radius: var(--radius); overflow: hidden; cursor: pointer; color: #fff; display: block; }
.video img { width: 100%; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video .play { position: absolute; top: 50%; left: 50%; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: 50%; background: rgba(123,53,232,.92); box-shadow: 0 0 0 8px rgba(123,53,232,.3); transition: transform .15s; }
.video:hover .play { transform: scale(1.08); }
.video .play::after { content: ""; position: absolute; left: 31px; top: 24px; border-style: solid; border-width: 15px 0 15px 24px; border-color: transparent transparent transparent #fff; }
.video .media-cap { position: absolute; left: 12px; right: 12px; bottom: 12px; text-align: left; }
.media-cap { display: inline-block; background: rgba(10,10,15,.82); padding: 7px 10px; border-radius: 4px; font: 600 .76rem/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.video .media-cap { display: block; width: max-content; max-width: calc(100% - 24px); }
.video.playing .play, .video.playing .media-cap, .video.playing img { visibility: hidden; }

.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.filter span { border: 1px solid var(--line); padding: 8px 14px; border-radius: 99px; font-size: .85rem; color: var(--muted); }
.filter span:first-child { background: var(--purple); color: #fff; border-color: var(--purple); }

/* CTA band */
.cta-band { position: relative; overflow: hidden; background: linear-gradient(110deg, var(--purple-deep), var(--purple) 55%, #4f1fb0); padding: 60px 0; }
.cta-band::after { content: "211"; position: absolute; right: -20px; bottom: -60px; font: 700 16rem/1 var(--display); color: rgba(255,255,255,.07); pointer-events: none; }
.cta-band .container { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-band h2 { margin: 0 0 6px; }
.cta-band p { margin: 0; color: #e6dcff; }
@media (max-width: 560px) { .cta-band .btn { width: 100%; } }

/* ── Forms ───────────────────────────────────────────────── */
.form { display: grid; gap: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 4vw, 32px); container-type: inline-size; }
/* Field pairs follow the FORM's width, not the window's: on an open Duo the form
   sits in half the screen. */
.form-row { display: grid; gap: 16px; }
@container (min-width: 520px) { .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend { font: 600 .78rem/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase; color: #cfcfdb; }
.field legend { margin-bottom: 8px; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; min-height: 48px; background: #0e0e15; border: 1px solid #34344a; border-radius: 6px; color: #fff;
  padding: 12px 14px; font: 400 16px/1.4 var(--body);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }
textarea { min-height: 140px; resize: vertical; }
.checks { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.checks label, .consent { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: .95rem; color: #d9d9e3; text-transform: none; letter-spacing: 0; font-weight: 400; }
.consent { align-items: flex-start; font-size: .85rem; color: var(--muted); padding-top: 10px; }
.consent input, .checks input { accent-color: var(--purple); width: 20px; height: 20px; flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer { background: #07070b; padding-bottom: env(safe-area-inset-bottom, 0px); }
.footer-grid { display: grid; gap: 32px; padding-top: 56px; padding-bottom: 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer-h { font-size: 1rem; letter-spacing: .1em; margin-bottom: 12px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.footer-links a { display: inline-block; padding: 6px 0; color: #cfcfdb; text-decoration: none; }
.footer-links a:hover { color: #fff; }
.social { list-style: none; padding: 0; margin: 16px 0 0; display: flex; gap: 8px; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; color: #fff; text-decoration: none; transition: background .15s, border-color .15s; }
.social svg { width: 20px; height: 20px; fill: currentColor; }
.social a:hover { background: var(--purple); border-color: var(--purple); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 18px; padding-bottom: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.footer-base a { color: var(--muted); }

/* ── Touch screens: 44pt targets ─────────────────────────── */
@media (pointer: coarse) {
  .footer-links a { padding: 11px 0; }
  .footer-base a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ── Short landscape: iPhone 18 Pro / Pro Max sideways (~874x402) ───────── */
@media (max-height: 500px) and (orientation: landscape) {
  .preview-bar { padding-top: 3px; padding-bottom: 3px; }
  .ticker-inner { padding: 4px 0; }
  .ticker-place { display: none; }
  .header-inner { padding: 6px 0; }
  .brand-num { font-size: 1.2rem; padding: 6px 8px; }
  .brand-text strong { font-size: 1.1rem; }
  h1 { font-size: clamp(2rem, 11svh, 3rem); }
  .page-hero { padding: 32px 0 24px; }
  .section { padding: 44px 0; }
  .nav { padding-top: 64px; }
  .nav-toggle[aria-expanded="true"] { top: calc(env(safe-area-inset-top, 0px) + 8px); }
  .nav-list a:not(.btn) { padding: 11px 8px; }
  /* Photo and headline side by side so both fit the first screen. */
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 24px; }
  .hero > .hero-media, .hero > .hero-content { grid-area: auto; }
  .hero-media::after { display: none; }
  .hero-content { padding: 16px calc(var(--gutter) + var(--safe-r)) 16px 0; }
  .hero-content .container, .hero-content.container { width: auto; margin: 0; }
  .hero-sub { font-size: .95rem; margin-bottom: 14px; }
  .btn-lg { padding: 12px 18px; font-size: .95rem; }
  .btn-row > .btn { flex: 0 1 auto; }
}

.card-note { margin: 0 0 10px; font-size: .9rem; }
.extras .card-body h3 { margin-bottom: 6px; }
.extras .card-body p:last-child { margin-bottom: 0; }

/* Next-race feature: the event poster at its own proportions beside the details. */
.next-event > img { max-width: 420px; justify-self: center; }
@media (max-width: 767px) { .next-event > img { max-width: 100%; } }

/* ── Event-day banner ────────────────────────────────────── */
/* Only appears while an event in #twrEvents is on (see site.js). */
.event-bar { background: linear-gradient(90deg, var(--yellow), #ffe75c); color: #111; }
.event-bar a {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  max-width: var(--max); margin: 0 auto; padding: 8px calc(16px + var(--safe-r)) 8px calc(16px + var(--safe-l));
  color: #111; text-decoration: none; font: 600 .82rem/1.3 var(--body); text-align: center;
}
.event-bar a:hover .event-cta { background: #111; color: var(--yellow); }
.event-flag {
  font: 700 .7rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase;
  background: #111; color: var(--yellow); padding: 5px 8px; transform: skewX(-12deg);
}
.event-cta {
  font: 700 .7rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase;
  border: 2px solid #111; border-radius: 3px; padding: 5px 9px; transition: background .15s, color .15s;
}
@media (max-width: 560px) { .event-bar a { font-size: .78rem; gap: 8px; } }
/* Anchored events sit BELOW the sticky header. Without this the browser scrolls
   the element to y=0, where the header covers it and the row above looks like
   the target. 100px clears the header plus a little breathing room. */
.race[id], .next-event[id], [id^="event-"] { scroll-margin-top: 100px; }
@media (max-width: 767px) { .race[id], .next-event[id] { scroll-margin-top: 88px; } }

/* The event the banner linked to, so it is obvious which one you landed on. */
.race:target, .next-event:target { outline: 2px solid var(--blue); outline-offset: 6px; border-radius: 8px; }