/* =========================================================
   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 */
  .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: 12px 0 24px;
    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: 16px 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: 14px 0 6px;
    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 6px;
    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: 14px 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; }

/* ---------- 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,
  .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;
  }
}