/* =========================================================
   OVERTAKERS F1 — Cadillac F1 Fan Site
   Shared stylesheet
   Design language: dark / luxury / high-contrast / motorsport
   ========================================================= */

:root {
  /* Palette */
  --bg-0:       #07070b;
  --bg-1:       #0f0f15;
  --bg-2:       #17171f;
  --bg-card:    #1c1c26;
  --bg-elev:    #232330;

  --text-0:     #ffffff;
  --text-1:     #d7d7de;
  --text-2:     #8a8a94;
  --text-3:     #5a5a64;

  --accent:     #ced4da;   /* Platinum — base */
  --accent-hi:  #e9ecef;   /* Platinum — highlight */
  --accent-dim: #6c757d;   /* Dim platinum for hover borders, subtle accents */

  --link:       #7eb8ec;   /* Cool sky blue — used ONLY for clickable hyperlinks
                              so they pop against the Platinum palette */

  --red:        #e11d48;   /* Secondary — reserved; used only where red is explicitly wanted */
  --border:     #2a2a35;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;

  --shadow-md:  0 10px 30px rgba(0,0,0,0.45);
  --shadow-lg:  0 24px 60px rgba(0,0,0,0.6);

  --max-w:      1240px;
  --nav-h:      72px;
}

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

html, body {
  margin: 0; padding: 0;
  background: var(--bg-0);
  color: var(--text-1);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, Oxygen, Ubuntu, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

img { max-width: 100%; display: block; }
a   { color: var(--link); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--text-0); }

/* Headings */
h1, h2, h3, h4 {
  font-family: 'Anton', 'Oswald', 'Inter', sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-0);
  line-height: 1.05;
  margin: 0 0 .5em;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.6rem, 6vw, 5.4rem); }
h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.4rem); }

p  { margin: 0 0 1em; color: var(--text-1); }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
}

/* ---------- Navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(7,7,11,0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  line-height: 1;
}
.brand-icon {
  width: 42px; height: 42px;      /* 25% larger than baseline 34px */
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-hi);   /* current color inherited by SVGs */
}
.brand-icon svg { width: 100%; height: 100%; display: block; }

.brand-text {
  font-family: 'Shadows Into Light', 'Caveat', cursive;
  font-weight: 400;
  font-size: 2.1rem;
  letter-spacing: 0.01em;
  line-height: 1;
  /* Gray gradient fill */
  background: linear-gradient(180deg, #f2f2f6 0%, #7a7a84 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Subtle lift so handwritten script doesn't disappear on dark bg */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.25));
}

.nav-links {
  display: flex; gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
.nav-links a {
  display: inline-block;
  padding: 10px 14px;
  color: var(--text-1);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--text-0);
  background: rgba(233, 236, 239,0.07);
}
.nav-links a.active {
  box-shadow: inset 0 -2px 0 var(--accent-hi);
  border-radius: 0;
}

/* ---------- Dropdown nav (May 2026) ----------
   The 8-item flat nav got tight on smaller laptops, so editorial groups
   collapse under three top-level dropdowns: Videos, Analysis, Shop. The
   parent labels are <button>s (not <a>s) since they don't navigate
   anywhere themselves — the dropdown items do. */
.has-dropdown { position: relative; }
.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 10px 14px;
  color: var(--text-1);
  font-family: inherit;
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: color .2s ease, background .2s ease;
}
.dropdown-toggle:hover,
.has-dropdown:focus-within .dropdown-toggle,
.has-dropdown.parent-active .dropdown-toggle {
  color: var(--text-0);
  background: rgba(233, 236, 239, 0.07);
}
.has-dropdown.parent-active .dropdown-toggle {
  box-shadow: inset 0 -2px 0 var(--accent-hi);
  border-radius: 0;
}
.dropdown-toggle .chev {
  width: 10px; height: 10px;
  transition: transform .2s ease;
  opacity: 0.8;
}
.has-dropdown:hover .dropdown-toggle .chev,
.has-dropdown:focus-within .dropdown-toggle .chev,
.has-dropdown[aria-expanded="true"] .dropdown-toggle .chev {
  transform: rotate(180deg);
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 6px 0 0;
  padding: 6px 0;
  list-style: none;
  min-width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 50;
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu,
.has-dropdown[aria-expanded="true"] .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-menu li { margin: 0; padding: 0; list-style: none; }
.dropdown-menu a {
  display: block;
  padding: 10px 16px;
  color: var(--text-1);
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 0;
  border-left: 3px solid transparent;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.dropdown-menu a:hover,
.dropdown-menu a:focus {
  color: var(--text-0);
  background: rgba(233, 236, 239, 0.06);
  border-left-color: var(--accent-dim);
  outline: none;
}
.dropdown-menu a.active {
  color: var(--accent-hi);
  background: rgba(233, 236, 239, 0.04);
  border-left-color: var(--accent-hi);
  /* Override the inline-block + bottom-border style from .nav-links a.active */
  box-shadow: none;
}

/* (mobile drawer styles consolidated into the @media block below) */

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-0);
  width: 42px; height: 42px;
  border-radius: 8px;
  cursor: pointer;
}

/* ---------- Mobile nav: simple inline-expand panel (May 2026 v2) ----------
   Earlier attempt at a position:fixed slide-in drawer with body scroll lock
   broke on Android Chrome (Samsung Galaxy S23 confirmed) — drawer rendered
   invisible while backdrop blurred everything. Replaced with the simplest
   pattern that works everywhere: an absolute-positioned dropdown panel
   that sits below the sticky nav header. No transforms, no fixed
   positioning to viewport edges, no body class, no backdrop element.

   Sean's original complaint with v1 mobile was "tap to expand each group
   is annoying." Solved here by showing every link at once, no nesting —
   the .has-dropdown buttons turn into non-interactive section headers
   and all .dropdown-menu items render directly under them. */
@media (max-width: 820px) {
  /* Hamburger toggle visible */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Menu panel — hidden until JS adds .open
     Spacing tightened May 23 2026 to fit 10+ entries on Galaxy S25 without
     scrolling. Previous values were generous (50px tall items, 36px container
     padding); new values keep ~44px tap targets (iOS HIG floor) while
     saving ~95px of vertical space across the menu. */
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: var(--bg-1);
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 8px 0 16px;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
    list-style: none;
    z-index: 60;
  }
  .nav-links.open { display: flex; }

  /* Direct top-level links (just "Home" right now) */
  .nav-links > li:not(.has-dropdown) > a {
    display: block;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-0);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    border-left: 4px solid transparent;
    border-radius: 0;
    background: transparent;
  }
  .nav-links > li:not(.has-dropdown) > a:hover,
  .nav-links > li:not(.has-dropdown) > a.active {
    background: rgba(233, 236, 239, 0.06);
    color: var(--accent-hi);
    border-left-color: var(--accent-hi);
    box-shadow: none;
  }

  /* Dropdown group container — section header + always-visible items */
  .has-dropdown {
    display: block;
    padding: 10px 0 2px;
    border-bottom: 1px solid var(--border);
  }
  .has-dropdown.parent-active .dropdown-toggle {
    box-shadow: none;
    color: var(--accent);
  }

  /* Section-header style for the dropdown-toggle button */
  .dropdown-toggle {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0 24px 4px;
    color: var(--text-2);
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: default;
    pointer-events: none;
  }
  .dropdown-toggle .chev { display: none; }

  /* All dropdown items always visible inline */
  .dropdown-menu {
    position: static;
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    min-width: 0;
    list-style: none;
  }
  .dropdown-menu li { padding: 0; list-style: none; }
  .dropdown-menu a {
    display: block;
    padding: 11px 24px;
    color: var(--text-1);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    white-space: normal;
    border-left: 4px solid transparent;
    border-radius: 0;
    background: transparent;
  }
  .dropdown-menu a:hover {
    background: rgba(233, 236, 239, 0.05);
    color: var(--text-0);
    border-left-color: var(--accent-dim);
  }
  .dropdown-menu a.active {
    background: rgba(233, 236, 239, 0.08);
    color: var(--accent-hi);
    border-left-color: var(--accent-hi);
    box-shadow: none;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.hero-montage {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0;
  z-index: -2;
}
.hero-montage .tile {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
  /* Black & white + slightly dimmed. The Platinum nav/title colors pop more
     against a desaturated backdrop, and the mood reads more "editorial"
     than "stock photo." Applied at the tile level so it covers img + the
     placeholder gradient. */
  filter: grayscale(1) brightness(0.78) contrast(1.05);
}
.hero-montage .tile:first-child { grid-row: 1 / span 2; }
.hero-montage .tile img,
.hero-montage .tile picture,
.hero-montage .tile .ph {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 12s linear;
  animation: kenburns 18s ease-in-out infinite alternate;
}
.hero-montage .tile picture img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* let the <picture> wrapper drive the Ken Burns */
  animation: none;
  transform: none;
}
/* Slightly offset each tile's animation so they don't move in unison */
.hero-montage .tile:nth-child(2) picture { animation-delay: -6s; }
.hero-montage .tile:nth-child(3) picture { animation-delay: -12s; }
@keyframes kenburns {
  from { transform: scale(1.05) translate(0, 0); }
  to   { transform: scale(1.18) translate(-2%, -2%); }
}

/* Placeholder gradient tiles until Sean adds real photos */
.hero-montage .ph {
  background:
    radial-gradient(1200px 400px at 20% 30%, rgba(233, 236, 239, 0.18), transparent 60%),
    radial-gradient(900px 400px at 80% 70%, rgba(206, 212, 218, 0.14), transparent 60%),
    linear-gradient(180deg, #101018, #05050a);
  display: flex; align-items: flex-end; padding: 14px;
  color: var(--text-3); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
}

.hero::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,7,11,0.0) 0%, rgba(7,7,11,0.55) 60%, rgba(7,7,11,0.96) 100%),
    linear-gradient(90deg, rgba(7,7,11,0.65) 0%, rgba(7,7,11,0.0) 45%);
  z-index: -1;
}

.hero-content {
  position: relative;
  padding: 80px 0 72px;
  max-width: 900px;
}
/* Centered variant — Overtakers homepage uses this with the 3-line title */
.hero-content--centered {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--accent-hi);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.hero-kicker .bar {
  width: 36px; height: 2px;
  background: var(--accent-hi);
  display: inline-block;
}
.hero h1 {
  margin-bottom: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #c9c9d4 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero h1 .accent {
  background: linear-gradient(180deg, var(--accent-hi) 0%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* Three-line hero title — two smaller outer lines flanking a larger middle */
.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 20px;
  /* Override the default h1 clamp — each line sizes itself below */
  font-size: 0; line-height: 1;
}
.hero-title__line {
  display: block;
  font-family: 'Anton', 'Oswald', 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.95;
}
.hero-title__line--sm {
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  letter-spacing: 0.18em;
  /* Smaller top/bottom lines get the softer white gradient */
  background: linear-gradient(180deg, #ffffff 0%, #c9c9d4 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero-title__line--lg {
  font-size: clamp(3.4rem, 8vw, 7rem);
  letter-spacing: 0.03em;
  /* The accent line inherits the platinum gradient from .hero h1 .accent above */
}
.hero-sub {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: var(--text-1);
  max-width: 640px;
  margin-bottom: 28px;
}
.hero-content--centered .hero-sub {
  margin-left: auto;
  margin-right: auto;
}
.hero-cta {
  display: flex; flex-wrap: wrap; gap: 12px;
}
.hero-content--centered .hero-cta {
  justify-content: center;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  border: 1px solid transparent;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent-hi), var(--accent));
  color: #11110c;
  box-shadow: 0 10px 30px rgba(206, 212, 218,0.25);
}
.btn-primary:hover { transform: translateY(-2px); color: #11110c; }

.btn-ghost {
  background: transparent;
  color: var(--text-0);
  border-color: var(--border);
}
.btn-ghost:hover {
  border-color: var(--accent-hi);
  color: var(--accent-hi);
}

/* ---------- Section ---------- */
.section {
  padding: 80px 0;
}
.section-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 32px;
}
.section-eyebrow {
  color: var(--accent-hi);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* ---------- News grid ---------- */
.news-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.news-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.news-card:hover {
  transform: translateY(-4px);
  border-color: rgba(233, 236, 239,0.4);
  box-shadow: var(--shadow-md);
  color: inherit;
}

.news-card .thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a24, #0c0c12);
}
.news-card .thumb img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.news-card:hover .thumb img { transform: scale(1.05); }

.news-card .thumb::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
  z-index: 2;
}

/* Placeholder for missing/broken images — source name on a carbon-fiber
   dark gradient with a subtle image icon. Kept visible only when the thumb
   has no loaded <img> (either .no-image class from markup, or the img
   errored at load time and removed itself). */
.news-card .thumb-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  color: var(--text-2);
  background:
    linear-gradient(135deg, rgba(206, 212, 218,0.06), rgba(206, 212, 218,0) 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 6px),
    linear-gradient(135deg, #1a1a24, #0c0c12);
  z-index: 0;
}
.news-card .thumb-placeholder-icon {
  width: 32px; height: 32px;
  color: var(--text-2);
  opacity: 0.6;
}
.news-card .thumb-placeholder-source {
  font-family: 'Anton', 'Impact', sans-serif;
  font-size: clamp(18px, 2.5vw, 26px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-1);
  max-width: 80%;
  text-align: center;
  line-height: 1.05;
}
/* When an image is present and loads successfully, it covers the placeholder.
   If no image was provided, the thumb has .no-image and the gradient shows
   through cleanly (no img element in the DOM to begin with). */

.news-card .badge {
  position: absolute; top: 12px; left: 12px;
  z-index: 1;
  padding: 4px 10px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(7,7,11,0.7); color: var(--accent-hi);
  border: 1px solid rgba(233, 236, 239,0.35);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.news-card .body {
  padding: 18px 18px 22px;
  display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.news-card .date {
  color: var(--text-2);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.news-card h3 {
  font-size: 1.15rem;
  margin: 4px 0 6px;
  color: var(--text-0);
  line-height: 1.2;
}
.news-card .summary {
  color: var(--text-1);
  font-size: 0.95rem;
  margin: 0;
  flex: 1;
}
.news-card .source {
  margin-top: 12px;
  color: var(--text-2);
  font-size: 0.78rem;
  display: flex; align-items: center; gap: 8px;
}
.news-card .source::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-hi);
}

/* ---------- Video grid (Overtakers catalog) ---------- */
.video-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.video-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.video-card:hover {
  transform: translateY(-4px);
  border-color: rgba(233, 236, 239,0.4);
  box-shadow: var(--shadow-md);
}
.video-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
  display: block;
  overflow: hidden;
}
.video-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.video-thumb::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(233, 236, 239,0.0) 0%, rgba(233, 236, 239,0.0) 35%, rgba(0,0,0,0.35) 100%);
}
.video-thumb .play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: 50%;
  background: rgba(206, 212, 218,0.92);
  color: #11110c;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  transition: transform .2s ease;
}
.video-thumb:hover .play { transform: translate(-50%, -50%) scale(1.08); }
.video-thumb .play svg { width: 26px; height: 26px; margin-left: 3px; }

.video-thumb .duration {
  position: absolute; bottom: 10px; right: 10px;
  background: rgba(7,7,11,0.85);
  color: #fff;
  font-size: 0.75rem; font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

.video-body {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.video-body h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text-0);
}
.video-body .desc {
  font-size: 0.92rem;
  color: var(--text-1);
  flex: 1;
}
.video-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 6px;
}
.video-meta .date {
  color: var(--text-2);
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.video-meta .overview {
  color: var(--accent-hi);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.video-meta .overview:hover { color: var(--text-0); }

/* ---------- Apparel grid ---------- */
.apparel-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.apparel-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  color: inherit;
  text-decoration: none;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.apparel-card:hover {
  transform: translateY(-4px);
  border-color: rgba(233, 236, 239,0.45);
  box-shadow: var(--shadow-md);
  color: inherit;
}
.apparel-thumb {
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, #14141c, #06060a);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3);
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.apparel-thumb img { width: 100%; height: 100%; object-fit: cover; }
.apparel-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.apparel-body h3 { font-size: 1rem; margin: 0; }
.apparel-body .vendor { color: var(--text-2); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.apparel-body .apparel-eyebrow {
  display: block;
  color: var(--accent);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
  font-weight: 500;
}
.apparel-body .price { color: var(--accent-hi); font-weight: 700; margin-top: 6px; }

/* Shortcut cards (category tiles for shops we can't scrape) */
.apparel-card.shortcut .shortcut-thumb {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(233, 236, 239,0.22), transparent 55%),
    radial-gradient(120% 80% at 100% 100%, rgba(234,179,8,0.14), transparent 55%),
    linear-gradient(135deg, #1a1a22 0%, #0a0a10 100%);
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  text-align: center;
}
.apparel-card.shortcut .shortcut-thumb::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(transparent 0, transparent calc(100% - 1px), rgba(255,255,255,0.04) 100%),
    linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), rgba(255,255,255,0.04) 100%);
  background-size: 28px 28px;
  pointer-events: none;
  opacity: 0.5;
}
.apparel-card.shortcut .shortcut-vendor {
  position: relative;
  font-family: 'Anton', 'Inter', sans-serif;
  font-size: 1.9rem;
  line-height: 1.05;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-0);
  max-width: 80%;
}
.apparel-card.shortcut .shortcut-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-hi);
  font-weight: 600;
}
.apparel-card.shortcut:hover .shortcut-cta { color: #fff; }
.apparel-card.shortcut:hover .shortcut-cta svg { transform: translateX(3px); }
.apparel-card.shortcut .shortcut-cta svg { transition: transform .2s ease; }

/* ---------- Collectibles grid (square contain tiles) ----------
   Separate from apparel: square 1:1 thumbs, object-fit:contain on a
   consistent dark "stage" so mixed-shape product shots (wide die-cast,
   tall posters, square helmets) all show in full and sit on the same
   backdrop. Body trimmed to a short tag + 2-line title + vendor/price. */
.collectible-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.collectible-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  color: inherit;
  text-decoration: none;
  min-width: 0;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.collectible-card:hover {
  transform: translateY(-4px);
  border-color: rgba(233, 236, 239, 0.45);
  box-shadow: var(--shadow-md);
  color: inherit;
}
.collectible-thumb {
  aspect-ratio: 1 / 1;
  background: radial-gradient(120% 90% at 50% 28%, #20202a 0%, #0a0a10 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  box-sizing: border-box;
}
.collectible-thumb img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}
/* Designed full-bleed art tiles (marketplace SVGs) fill the square frame */
.collectible-thumb.is-art {
  padding: 0;
  background: none;
}
.collectible-thumb.is-art img {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  object-fit: cover;
}
.collectible-body {
  padding: 14px 15px 16px;
  display: flex; flex-direction: column;
  gap: 8px;
  flex: 1;
}
.collectible-tag {
  align-self: flex-start;
  background: rgba(206, 212, 218, 0.10);
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 6px;
}
.collectible-body h3 {
  font-size: 1rem;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.collectible-meta {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px 10px;
  margin-top: auto;
}
.collectible-vendor {
  color: var(--text-2);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.collectible-price {
  color: var(--accent-hi);
  font-weight: 700;
  font-size: 0.95rem;
}
/* Shortcut collectibles tiles (no product image) */
.collectible-card.shortcut .shortcut-thumb {
  position: relative;
  overflow: hidden;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  padding: 24px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(233, 236, 239, 0.18), transparent 55%),
    linear-gradient(135deg, #1a1a22 0%, #0a0a10 100%);
}
.collectible-card.shortcut .shortcut-vendor {
  position: relative;
  font-family: 'Anton', 'Inter', sans-serif;
  font-size: 1.5rem;
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-0);
  max-width: 85%;
}
.collectible-card.shortcut .shortcut-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-hi);
  font-weight: 600;
}
.collectible-card.shortcut:hover .shortcut-cta { color: #fff; }
.collectible-card.shortcut:hover .shortcut-cta svg { transform: translateX(3px); }
.collectible-card.shortcut .shortcut-cta svg { transition: transform .2s ease; }

/* ---------- Video overview (transcript) page ---------- */
.overview-hero {
  padding: 40px 0 24px;
}
.overview-hero .thumb-large {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
.overview-hero .thumb-large iframe,
.overview-hero .thumb-large img {
  width: 100%; height: 100%;
  border: 0;
  object-fit: cover;
}
.overview-title { margin: 28px 0 12px; }
.overview-meta {
  color: var(--text-2);
  font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase;
  display: flex; gap: 14px; flex-wrap: wrap;
}
.overview-meta span::after {
  content: "•"; margin-left: 14px; color: var(--text-3);
}
.overview-meta span:last-child::after { content: ""; margin: 0; }

.overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 48px;
  padding: 48px 0 120px;
}
@media (max-width: 900px) {
  .overview-layout { grid-template-columns: 1fr; }
}

.transcript {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-1);
}
.transcript h2 {
  margin-top: 40px;
  font-size: 1.6rem;
  color: var(--text-0);
}
.transcript figure {
  margin: 28px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
}
.transcript figure img { width: 100%; }
.transcript figure figcaption {
  padding: 12px 16px;
  color: var(--text-2);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
}
.transcript blockquote {
  margin: 24px 0;
  padding: 16px 20px;
  border-left: 3px solid var(--accent-hi);
  color: var(--text-0);
  background: rgba(233, 236, 239,0.05);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
}

.sidecard {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  position: sticky; top: calc(var(--nav-h) + 16px);
  height: fit-content;
}
.sidecard h4 {
  margin: 0 0 12px;
  font-size: 0.8rem; letter-spacing: 0.2em;
  color: var(--accent-hi);
}
.sidecard ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.sidecard a {
  display: block; padding: 8px 10px; border-radius: 6px;
  color: var(--text-1); font-size: 0.92rem;
}
.sidecard a:hover { background: rgba(255,255,255,0.04); color: var(--text-0); }

/* ---------- Technical Analysis grid ---------- */
.analysis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 28px;
  padding: 12px 0 48px;
}
.analysis-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
a.analysis-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-dim);
  box-shadow: var(--shadow-lg);
  color: inherit;
}
.analysis-card.coming-soon {
  opacity: 0.95;
  cursor: default;
}
.analysis-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #000;
}
.analysis-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
a.analysis-card:hover .analysis-thumb img { transform: scale(1.04); }
.analysis-thumb-placeholder {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background:
    radial-gradient(600px 300px at 20% 20%, rgba(233, 236, 239,0.24), transparent 60%),
    radial-gradient(600px 300px at 80% 80%, rgba(234,179,8,0.12), transparent 60%),
    linear-gradient(135deg, #1a1a22 0%, #0a0a10 100%);
}
.analysis-thumb-placeholder::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(transparent 0, transparent calc(100% - 1px), rgba(255,255,255,0.04) 100%),
    linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), rgba(255,255,255,0.04) 100%);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.6;
}
.placeholder-label {
  position: relative;
  font-family: 'Anton', 'Inter', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-0);
  max-width: 80%;
}
.coming-soon-ribbon {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(206, 212, 218,0.35);
}
.analysis-body {
  padding: 22px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.analysis-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-hi);
  font-weight: 700;
}
.analysis-body h3 {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  margin: 0;
}
.analysis-body .desc {
  color: var(--text-1);
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 0;
}
.analysis-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.analysis-tags .tag {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.analysis-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
}
.analysis-meta .author::before {
  content: "\2022";
  margin-right: 14px;
  color: var(--text-3);
}
.analysis-cta,
.coming-soon-cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-hi);
  font-weight: 700;
}
.coming-soon-cta {
  color: var(--text-2);
}
a.analysis-card:hover .analysis-cta { color: #fff; }
a.analysis-card:hover .analysis-cta svg { transform: translate(2px,-2px); }
.analysis-cta svg { transition: transform .2s ease; }

/* ---------- Director feature (What Makes Fast) ---------- */
.director-feature {
  position: relative;
  padding: 72px 0 56px;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 15% 10%, rgba(233, 236, 239,0.10), transparent 60%),
    radial-gradient(700px 360px at 85% 90%, rgba(234,179,8,0.06), transparent 60%),
    linear-gradient(180deg, #0c0c12 0%, #07070b 100%);
  border-bottom: 1px solid var(--border);
}
.director-feature::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(transparent 0, transparent calc(100% - 1px), rgba(255,255,255,0.03) 100%),
    linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), rgba(255,255,255,0.03) 100%);
  background-size: 42px 42px;
  pointer-events: none;
  opacity: 0.5;
}
.director-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 48px;
  align-items: center;
}
@media (max-width: 820px) {
  .director-inner { grid-template-columns: 1fr; gap: 28px; }
}
.director-portrait {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.director-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 12s ease-out;
}
.director-feature:hover .director-portrait img { transform: scale(1.04); }
.director-portrait::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(7,7,11,0.55) 100%);
  pointer-events: none;
}
.director-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-hi);
  font-weight: 700;
  margin-bottom: 18px;
}
.director-eyebrow .bar {
  width: 28px; height: 2px;
  background: var(--accent);
}
.director-name {
  font-family: 'Anton', 'Inter', sans-serif;
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-0);
  margin: 0 0 8px;
}
.director-role {
  font-size: 1.05rem;
  color: var(--text-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 22px;
  font-weight: 500;
}
.director-bio {
  color: var(--text-1);
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 58ch;
}
.director-bio p { margin: 0 0 0.9em; }
.director-bio p:last-child { margin-bottom: 0; }
.director-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.director-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(28,28,38,0.6);
  color: var(--text-1);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  transition: all .2s ease;
}
.director-link:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-1px);
}
.director-link svg {
  width: 14px; height: 14px;
  transition: transform .2s ease;
}
.director-link:hover svg { transform: translateX(3px); }

/* ---------- Page header (interior pages) ---------- */
.page-head {
  padding: 80px 0 32px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(800px 300px at 20% 20%, rgba(233, 236, 239, 0.08), transparent 60%),
    radial-gradient(600px 300px at 80% 80%, rgba(206, 212, 218, 0.06), transparent 60%);
}
.page-head p { color: var(--text-1); max-width: 720px; font-size: 1.1rem; }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--border);
  padding: 48px 0 36px;
  background: var(--bg-1);
  color: var(--text-2);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 32px;
}
@media (max-width: 720px) {
  .footer-inner { grid-template-columns: 1fr; }
}
.footer h5 {
  color: var(--text-0); font-size: 0.82rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  margin: 0 0 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}
.footer a { color: var(--text-1); }
.footer a:hover { color: var(--accent-hi); }
.footer .legal {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 0.8rem; color: var(--text-3);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}

/* ---------- Utility ---------- */
.loading {
  padding: 40px; text-align: center; color: var(--text-3);
  font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.hidden { display: none !important; }

/* ---------- Mobile hardening ----------
   The default grids use minmax(300px, 1fr) which forces cards to at least
   300px wide. On narrow viewports (iPhone SE, Android with Display Zoom,
   landscape-address-bar), that can overflow the container and cause the
   page to scroll horizontally, which on touch devices can make hit-targets
   land on the wrong card. Collapse to a single column on small screens so
   the cards always fit cleanly inside the viewport.                        */
@media (max-width: 640px) {
  .news-grid,
  .video-grid,
  .apparel-grid,
  .collectible-grid,
  .analysis-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .section { padding: 56px 0; }
  .section-head { margin-bottom: 20px; }
  .hero { min-height: 72vh; }
  .hero-content { padding: 56px 0 48px; }

  /* On phones, make the big left tile fill most of the hero and stack
     the two supporting tiles as a slim strip on the right. */
  .hero-montage {
    grid-template-columns: 1.6fr 1fr;
  }
}

/* Belt-and-suspenders: even on narrow viewports where an explicit breakpoint
   isn't matched (e.g. very wide phones in desktop mode), never let news
   cards force horizontal overflow. min-width:0 inside a grid item lets it
   shrink smaller than its intrinsic content.                                */
.news-card,
.video-card,
.apparel-card {
  min-width: 0;
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   Driver profile pages (drivers/perez.html, drivers/bottas.html)
   Consolidated from the previously-duplicated inline blocks (P2.3).
   Scoped under .driver-page so the generic class names
   (.stat-card, .h-section, .meta, .play, .bar, .dot ...) never
   collide with the-car.html / results.html / global styles.
   Per-driver bits: set --driver-glow on <body>; add the
   .driver-photo--studio modifier for a light (white-bg) portrait.
   ============================================================ */
.driver-page .driver-hero { position: relative; padding: 56px 0 40px; overflow: hidden; }
.driver-page .driver-hero::before { content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(800px 360px at 12% 30%, rgba(206,212,218,0.10), transparent 60%),
    radial-gradient(900px 480px at 88% 70%, var(--driver-glow, rgba(206,212,218,0.08)), transparent 60%);
  pointer-events: none; z-index: 0; }
.driver-page .driver-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 880px) { .driver-page .driver-hero-grid { grid-template-columns: 1fr; gap: 32px; } }
.driver-page .driver-id { display: flex; align-items: flex-start; gap: 24px; }
.driver-page .driver-number { font-family: 'Anton', Impact, sans-serif; font-size: clamp(7rem, 16vw, 14rem); line-height: 0.82; letter-spacing: -0.04em; background: linear-gradient(180deg, #ffffff 0%, #6c757d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 24px rgba(206,212,218,0.18)); }
.driver-page .driver-id-body { min-width: 0; }
.driver-page .driver-eyebrow { color: var(--accent-hi); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.driver-page .driver-eyebrow .flag { display: inline-flex; width: 26px; height: 18px; border-radius: 2px; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 2px 6px rgba(0,0,0,0.4); }
.driver-page .driver-eyebrow .flag svg { width: 100%; height: 100%; display: block; }
.driver-page .driver-name { font-family: 'Anton', Impact, sans-serif; font-size: clamp(2.6rem, 5.5vw, 4.2rem); letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; margin: 0 0 12px; background: linear-gradient(180deg, #ffffff 0%, #c9c9d4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.driver-page .driver-name .surname { display: block; font-size: 1.25em; letter-spacing: 0.03em; }
.driver-page .driver-tagline { font-size: 1.05rem; color: var(--text-1); margin: 0 0 20px; max-width: 460px; }
.driver-page .driver-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.driver-page .driver-meta strong { color: var(--text-0); font-weight: 600; }

/* Photo frame — default = dark (press-portrait); .driver-photo--studio = light/white-bg portrait */
.driver-page .driver-photo { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden;
  background: radial-gradient(120% 80% at 0% 0%, rgba(233,236,239,0.18), transparent 55%), linear-gradient(180deg, #1a1a22 0%, #0a0a10 100%);
  border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.driver-page .driver-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: contrast(1.03); }
.driver-page .driver-photo--studio { background: linear-gradient(180deg, #ffffff 0%, #eef0f3 65%, #ced4da 100%); border: 1px solid var(--accent-dim); }
.driver-page .driver-photo--studio img { filter: none; }
.driver-page .driver-photo--studio::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent-hi), transparent); pointer-events: none; }
.driver-page .driver-photo .photo-tag { position: absolute; bottom: 14px; left: 14px; padding: 6px 12px; background: rgba(7,7,11,0.82); backdrop-filter: blur(8px); border: 1px solid rgba(233,236,239,0.20); border-radius: 999px; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-hi); }

/* Stat tiles */
.driver-page .stat-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: 8px; }
.driver-page .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px 18px; position: relative; overflow: hidden; transition: border-color .25s ease, transform .25s ease; }
.driver-page .stat-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--accent-hi), transparent); opacity: 0.5; }
.driver-page .stat-card:hover { transform: translateY(-3px); border-color: rgba(233,236,239,0.35); }
.driver-page .stat-value { font-family: 'Anton', Impact, sans-serif; font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: 0.95; letter-spacing: 0.02em; color: var(--text-0); margin: 0; }
.driver-page .stat-label { margin-top: 4px; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-2); }
.driver-page .stat-foot { margin-top: 8px; font-size: 0.78rem; color: var(--text-3); }

/* Section heads */
.driver-page .h-section { font-family: 'Anton', Impact, sans-serif; font-size: clamp(1.6rem, 2.4vw, 2.2rem); letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-0); margin: 0 0 8px; }
.driver-page .h-eyebrow { color: var(--accent-hi); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 10px; }

/* Career timeline */
.driver-page .timeline { position: relative; margin: 24px 0 0; padding: 4px 0 4px 28px; border-left: 2px solid var(--border); }
.driver-page .timeline-item { position: relative; padding: 0 0 26px 14px; }
.driver-page .timeline-item::before { content: ""; position: absolute; left: -36px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent-hi); box-shadow: 0 0 0 4px rgba(233,236,239,0.10); }
.driver-page .timeline-item.current::before { background: #dc2626; box-shadow: 0 0 0 4px rgba(220,38,38,0.18), 0 0 16px rgba(220,38,38,0.4); }
.driver-page .timeline-year { font-family: 'Anton', Impact, sans-serif; font-size: 1.3rem; letter-spacing: 0.04em; color: var(--accent-hi); margin: 0 0 2px; }
.driver-page .timeline-team { font-size: 1rem; font-weight: 600; color: var(--text-0); margin: 0 0 6px; }
.driver-page .timeline-body { color: var(--text-1); font-size: 0.95rem; margin: 0; }

/* Pull quote */
.driver-page .pull-quote { margin: 32px 0 0; padding: 28px 32px; background: radial-gradient(60% 100% at 0% 0%, rgba(233,236,239,0.08), transparent 60%), linear-gradient(180deg, var(--bg-card), var(--bg-2)); border: 1px solid var(--border); border-left: 3px solid var(--accent-hi); border-radius: var(--radius-md); position: relative; }
.driver-page .pull-quote .quote-mark { font-family: 'Anton', Impact, sans-serif; font-size: 4rem; line-height: 0.7; color: var(--accent-dim); opacity: 0.6; margin-bottom: 8px; }
.driver-page .pull-quote blockquote { margin: 0 0 12px; font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.4; color: var(--text-0); font-style: italic; }
.driver-page .pull-quote cite { font-style: normal; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }

/* Watch cards (mini) */
.driver-page .watch-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 8px; }
.driver-page .watch-card { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; text-decoration: none; color: inherit; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.driver-page .watch-card:hover { transform: translateY(-3px); border-color: rgba(233,236,239,0.35); box-shadow: var(--shadow-md); color: inherit; }
.driver-page .watch-thumb { position: relative; aspect-ratio: 16/9; background: #000; overflow: hidden; }
.driver-page .watch-thumb img { width: 100%; height: 100%; object-fit: cover; }
.driver-page .watch-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.6) 100%); }
.driver-page .watch-thumb .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(206,212,218,0.94); color: #11110c; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,0.5); z-index: 1; }
.driver-page .watch-thumb .play svg { width: 20px; height: 20px; margin-left: 2px; }
.driver-page .watch-body { padding: 14px 16px 16px; }
.driver-page .watch-body h4 { margin: 0 0 6px; font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--text-0); line-height: 1.3; text-transform: none; letter-spacing: 0; }
.driver-page .watch-body .meta { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }

/* Career stats table */
.driver-page .stats-table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 0.95rem; }
.driver-page .stats-table th, .driver-page .stats-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.driver-page .stats-table th { font-family: 'Inter', sans-serif; font-weight: 600; color: var(--text-2); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; background: rgba(255,255,255,0.02); }
.driver-page .stats-table td { color: var(--text-1); }
.driver-page .stats-table td:last-child { color: var(--text-0); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* Caveat note */
.driver-page .note-block { margin-top: 18px; padding: 14px 18px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.82rem; color: var(--text-2); }