/* =========================================================
   ACCUS Esports — Theme
   Palette drawn from the official ACCUS mark:
   Navy  #16325C  |  Red  #C8102E  |  White #FFFFFF
   ========================================================= */

:root {
  --navy: #16325c;
  --navy-deep: #0d1f3c;
  --navy-ink: #091529;
  --red: #c8102e;
  --red-bright: #e4002b;
  --red-neon: #ff2442;
  --white: #ffffff;
  /* dark esports base */
  --bg: #070c18;
  --surface: #111a30;
  --surface-2: #0d1526;
  --ink: #edf1fa;
  --off-white: #0d1526;              /* legacy hook: now the dark surface tone */
  --gray-line: #253253;
  --gray-text: #94a1bd;
  --gold: #ffd520;
  --green: #2ecc71;
  --font-display: "Chakra Petch", "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Rajdhani", -apple-system, "Segoe UI", sans-serif;
  --shadow-card: 0 0 0 1px rgba(255,255,255,0.05), 0 14px 36px rgba(0, 0, 0, 0.45);
  --glow-red: 0 0 18px rgba(228, 0, 43, 0.45);
  --radius: 12px;
}

::selection { background: var(--red); color: var(--white); }

/* no visible scrollbars — scrolling still works everywhere */
html { scrollbar-width: none; -ms-overflow-style: none; }
* { scrollbar-width: none; }
::-webkit-scrollbar { display: none; width: 0; height: 0; }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(ellipse 90% 40% at 50% -5%, rgba(22, 50, 92, 0.55), transparent),
    radial-gradient(ellipse 40% 30% at 90% 20%, rgba(200, 16, 46, 0.12), transparent),
    var(--bg);
  line-height: 1.55;
  font-weight: 500; /* Rajdhani reads best a notch heavier */
  letter-spacing: 0.01em;
}

/* Checkered-flag backdrop frozen mid-wave: the #flag-wave SVG filter drapes
   the checker into broad static folds; the mask paints the light bands.
   Deliberately NOT animated (Dylan's call — looks waving, stays still). */
#flag-bg {
  position: fixed;
  inset: -45%;
  z-index: -1;
  pointer-events: none;
  background: repeating-conic-gradient(rgba(120, 150, 210, 0.06) 0% 25%, transparent 0% 50%) 0 0 / 84px 84px;
  transform: rotate(-9deg) skewX(-16deg) scaleY(0.9);
  filter: url(#flag-wave);
  -webkit-mask-image: repeating-linear-gradient(105deg,
    rgba(0,0,0,0.2) 0 160px, #000 300px 460px, rgba(0,0,0,0.2) 600px 760px);
  mask-image: repeating-linear-gradient(105deg,
    rgba(0,0,0,0.2) 0 160px, #000 300px 460px, rgba(0,0,0,0.2) 600px 760px);
}

/* width/height attributes on <img> exist only to seed the aspect ratio (so the
   box is reserved before the file loads). Resetting both to auto here means
   they never act as a size — every image lays out exactly as it did without
   them, and CSS class sizes still win as usual. */
img { max-width: 100%; width: auto; height: auto; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
}

a { color: inherit; }

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.65em 1.6em;
  border: 2px solid transparent;
  /* chamfered esports corners */
  border-radius: 0;
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease, filter 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.btn:hover { transform: translateY(-2px); filter: drop-shadow(0 0 10px rgba(228,0,43,0.55)); }
.btn-red { background: linear-gradient(115deg, var(--red), var(--red-bright)); color: var(--white); }
.btn-red:hover { background: var(--red-neon); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-white { background: var(--white); color: var(--navy); }
.btn-outline-white { border-color: var(--white); color: var(--white); background: rgba(255,255,255,0.04); }
.btn-outline-white:hover { background: var(--white); color: var(--navy); filter: drop-shadow(0 0 10px rgba(255,255,255,0.45)); }
.btn-outline-navy { border-color: var(--gray-line); color: var(--ink); background: transparent; }
.btn-outline-navy:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-lg { font-size: 1.25rem; padding: 0.75em 2em; }

/* ============ HEADER ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7, 12, 24, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.header-inner {
  position: relative;
  width: 100%;
  padding: 0.6rem 1.4rem; /* slimmer header (Dylan: smaller for now) */
  /* ACCUS left | nav dead-center | iRacing Esports shield right */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
}
.brand { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; justify-self: start; }
.header-shield {
  justify-self: end;
  height: 46px;
  width: auto;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.5));
}
.brand-logo { height: 34px; width: auto; }
.brand-lockup {
  height: 36px;
  width: auto;
  /* soft white glow — header logo only (footer/drawer logos keep the plain dark shadow) */
  filter: drop-shadow(0 0 9px rgba(255,255,255,0.4)) drop-shadow(0 3px 10px rgba(0,0,0,0.45));
}

/* ============ HEADER NAV (dropdowns, no hamburger) ============ */
.main-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 1.9rem;
}
.nav-item { position: relative; }
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 1rem 0.15rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
/* down arrow on items with a dropdown */
.caret {
  width: 0; height: 0;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-top: 5.5px solid currentColor;
  opacity: 0.7;
  transition: transform 0.18s ease;
}
.nav-item:hover .caret { transform: rotate(180deg); }
/* hover = grow the item only (dropdown opens via .drop rules below) */
.nav-link { transition: transform 0.16s ease; transform-origin: center; }
.nav-item:hover .nav-link { transform: scale(1.14); }
/* smooth red→white→blue gradient ring surrounding the ACTIVE section only */
.nav-link::after {
  content: "";
  position: absolute;
  top: 0.55rem; bottom: 0.55rem;
  left: -0.75rem; right: -0.75rem;
  border-radius: 999px;
  padding: 1.5px; /* ring thickness */
  background: linear-gradient(100deg, var(--red), #f2f6ff 52%, #3a5f9e);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 7px rgba(200,16,46,0.3));
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.nav-link.active::after { opacity: 1; }
/* dropdown */
.drop {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 172px;
  padding: 0.45rem 0;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  z-index: 200;
}
/* hover-only (no :focus-within — a clicked link keeps focus and pinned the
   menu open); .drop-locked is set on click and lifted on the next mouseenter,
   so the menu closes the moment you pick a page */
.nav-item:not(.drop-locked):hover .drop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.drop a {
  display: block;
  padding: 0.55rem 1.15rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-text);
  text-decoration: none;
}
.drop a:hover { color: var(--ink); background: rgba(255,255,255,0.06); }
@media (max-width: 1080px) {
  .main-nav { gap: 1.1rem; }
  .nav-link { font-size: 0.86rem; }
}
.brand-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--white); /* white lettering with a red glow — matches the ACCUS logo */
  letter-spacing: 0.22em;
  text-shadow:
    0 0 5px rgba(255, 255, 255, 0.35),
    0 0 14px rgba(255, 36, 66, 0.85),
    0 0 26px rgba(228, 0, 43, 0.55);
  transform: skewX(-6deg);
}
/* the leading E: red letter, same red glow as the rest of the wordmark */
.brand-e { color: var(--red-neon); }
/* Member-club logos: equal-width grid cells so the MIDDLE logo (NASCAR)
   sits at the exact center of the page, with wide, even buffers */
.club-links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(3, 230px);
  gap: 4rem;
  justify-items: center;
  align-items: center;
}
.club-links a { display: inline-flex; opacity: 0.85; transition: opacity 0.15s, filter 0.15s; }
.club-links img {
  height: auto;
  max-height: 46px;
  max-width: 220px; /* wide logos must fit their grid cell — never overflow */
  width: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,0.9))
    drop-shadow(0 0 1px rgba(255,255,255,0.8));
}
/* main-header INDYCAR: rounded plate with layered border lines —
   blue outermost, then white, then black, then the gradient inside */
.club-links a:first-child img {
  max-height: 46px;
  padding: 4px 12px;
  border-radius: 12px;
  background: linear-gradient(125deg,
    #ffffff 0%, #eef3fc 26%, #ffffff 52%, #ffeef1 76%, #eaf1fe 100%);
  border: 2px solid #0b0b0d;
  box-shadow:
    0 0 0 3px #ffffff,
    0 0 0 6px #1e7dc2,
    0 4px 12px rgba(0, 0, 0, 0.45);
  filter: none;
}
/* NASCAR carries its own bold black keyline — no trim, just a soft shadow */
.club-links a:nth-child(2) img {
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.55));
}
.club-links a:hover { opacity: 1; filter: drop-shadow(0 0 8px rgba(255,36,66,0.55)); }

.header-actions { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
.header-actions .btn { font-size: 0.95rem; padding: 0.5em 1.2em; }
.user-chip {
  display: flex; align-items: center; gap: 0.65rem;
  background: var(--surface-2);
  border: 1px solid var(--gray-line);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  padding: 0.32rem 1rem 0.32rem 0.4rem;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s, filter 0.15s;
}
.user-chip:hover { border-color: var(--red-neon); filter: drop-shadow(0 0 9px rgba(255,36,66,0.5)); }
/* Hexagonal gamer avatar: outer layer is the bright edge, ::before is the fill */
.user-avatar {
  --hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  position: relative;
  z-index: 0;
  width: 40px; height: 36px;
  clip-path: var(--hex);
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,120,140,0.45));
  color: var(--white);
  font-family: var(--font-display); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  filter: drop-shadow(0 0 7px rgba(255,36,66,0.55));
}
.user-avatar::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  clip-path: var(--hex);
  background: linear-gradient(160deg, var(--red-neon) 10%, #6d0818 90%);
}
.user-id { display: flex; flex-direction: column; line-height: 1.15; }
.user-chip .user-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.user-meta {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-text);
}
.user-meta .tier { color: var(--gold); }
.btn-signout {
  border-color: var(--gray-line);
  color: var(--ink);
  background: transparent;
  font-size: 0.85rem;
  padding: 0.45em 1.1em;
}
.btn-signout:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.nav-toggle {
  display: flex;
  margin-left: auto; /* pin to the far right of the header */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 2px solid var(--gray-line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.nav-toggle:hover { border-color: var(--red-neon); box-shadow: var(--glow-red); }
.nav-toggle span {
  display: block;
  height: 2.5px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ============ NAV DRAWER ============ */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(9, 21, 41, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 150;
}
.drawer-backdrop.show { opacity: 1; pointer-events: auto; }
.nav-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(340px, 88vw);
  background: var(--navy-ink);
  z-index: 160;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.6, 0, 0.3, 1);
  display: flex;
  flex-direction: column;
  padding: 1.2rem 1.6rem 2rem;
  box-shadow: -12px 0 40px rgba(0,0,0,0.35);
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer::before {
  content: "";
  position: absolute; top: 0; left: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--red) 33%, var(--white) 33% 66%, #3a5f9e 66%);
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.6rem;
}
.drawer-head img {
  height: 42px;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.4));
}
.drawer-close {
  background: none; border: none;
  color: rgba(255,255,255,0.6);
  font-size: 2rem; line-height: 1;
  cursor: pointer;
}
.drawer-close:hover { color: var(--white); }
.nav-drawer a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  padding: 0.75rem 0.9rem;
  border-radius: 8px;
  border-left: 4px solid transparent;
}
.nav-drawer a:hover { background: rgba(255,255,255,0.07); color: var(--white); }
.nav-drawer a.active { color: var(--white); border-left-color: var(--red); background: rgba(200,16,46,0.14); }
.drawer-signout {
  margin-top: auto;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.75rem;
  color: #ff8095;
  background: rgba(228, 0, 43, 0.12);
  border: 1px solid rgba(228, 0, 43, 0.45);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.drawer-signout:hover { background: var(--red); color: var(--white); }
.drawer-foot {
  margin-top: 1.2rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
}
/* guests have no sign-out row — let the footer text take the bottom slot */
.nav-drawer:has(.drawer-signout[hidden]) .drawer-foot { margin-top: auto; }

.header-stripe { display: flex; height: 4px; }
.header-stripe span:nth-child(1) { flex: 1; background: var(--red); }
.header-stripe span:nth-child(2) { flex: 1; background: var(--white); }
.header-stripe span:nth-child(3) { flex: 1; background: var(--navy); }

/* ============ LAYOUT HELPERS ============ */
.container { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 3.5rem 0; }
.section-head { text-align: center; margin-bottom: 2.2rem; }
.section-head h2 { font-size: 2.4rem; font-weight: 800; color: var(--ink); }
.section-head h2 em {
  color: var(--red-neon);
  font-style: normal;
  text-shadow: 0 0 22px rgba(255, 36, 66, 0.5);
}
.section-head p { color: var(--gray-text); max-width: 640px; margin: 0.5rem auto 0; }
.kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red-neon);
  margin-bottom: 0.4rem;
}
.kicker::before { content: "// "; opacity: 0.75; }

/* ============ SIGNED-IN WELCOME BAND ============ */
/* Driver profile as a floating card with white space around it */
.welcome-wrap { padding: 2.4rem 0 0.6rem; }
.welcome-card {
  position: relative;
  background: var(--navy-ink); /* photo background set inline per driver's club */
  color: var(--white);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(13, 31, 60, 0.3);
}
.welcome-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--red) 33%, var(--white) 33% 66%, #3a5f9e 66%);
  z-index: 1;
}
.welcome-inner {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  flex-wrap: wrap;
  padding: 3rem 2.6rem 1.6rem;
}
.welcome-id { display: flex; align-items: center; gap: 1.3rem; }
.welcome-avatar {
  width: 96px; height: 86px;
  font-size: 2rem;
  filter: drop-shadow(0 0 14px rgba(255,36,66,0.5));
}
.welcome-avatar::before { inset: 3px; }
.welcome-id h3 { font-size: 2.5rem; line-height: 1.05; }
.welcome-sub { font-size: 0.95rem; color: rgba(255,255,255,0.75); }
.welcome-stats { display: flex; gap: 2.6rem; flex-wrap: wrap; margin-left: auto; }
.w-stat { display: flex; flex-direction: column; align-items: center; }
.w-stat .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.2rem;
  color: var(--white);
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}
.w-stat .lbl {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.7);
}
.welcome-card .btn { font-size: 1.05rem; }
.welcome-car-tag {
  position: absolute;
  top: 1.1rem;
  right: 1.4rem;
  z-index: 1;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.85);
  background: rgba(9,21,41,0.55);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  padding: 0.35em 1em;
  backdrop-filter: blur(3px);
}
.welcome-results { padding: 0 2.6rem 2.6rem; }
.welcome-results h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 1rem;
  color: rgba(255,255,255,0.65);
  margin-bottom: 0.8rem;
}
.wr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.9rem;
}
.wr-card {
  background: rgba(9,21,41,0.55);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  backdrop-filter: blur(3px);
}
.wr-finish {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1;
  color: rgba(255,255,255,0.85);
}
.wr-finish.wr-podium { color: var(--gold); }
.wr-finish.wr-top10 { color: #7ee2a0; }
.wr-track { font-weight: 600; font-size: 0.88rem; }
.wr-meta { font-size: 0.72rem; color: rgba(255,255,255,0.6); }
/* ============ INTRO BAND (home) ============ */
.intro-band {
  background: var(--navy-deep);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
/* Near-fullscreen opening hero */
.intro-full {
  /* fill the whole first screen below the header — no sliver of page bg */
  min-height: calc(100vh - 67px);
  min-height: calc(100svh - 67px);
  display: flex;
  align-items: center;
}
/* z-index:0 creates a stacking context so photo layering stays under the tint */
.hero-photos { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-photo {
  position: absolute;
  inset: 0;
  /* Full-bleed: the photo covers the hero and is cropped to fit. A scaled-to-fit
     version (blurred fill + measured edge fades) was tried in Sept 2026 and
     reverted — Dylan is choosing photos composed for this shape instead, and
     the fitted version left visible photo edges on wide screens. */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  /* crossfade only — no slow zoom: it cropped the photos further and
     softened them while it ran */
  transition: opacity 5s ease-in-out;   /* 5s dissolve — keep in step with the 5000ms in heroResume() */
  /* no permanent will-change: six full-screen layers pinned at once is what
     makes phones stutter; browsers promote the layer during the fade anyway */
}
.hero-photo.show { opacity: 1; }
.intro-tint {
  position: absolute;
  inset: 0;
  z-index: 1; /* explicitly above the rotating photos (z0), below content (z2) */
  background:
    radial-gradient(ellipse at 85% 25%, rgba(200,16,46,0.32), transparent 55%),
    linear-gradient(115deg, rgba(9,21,41,0.9), rgba(22,50,92,0.78) 60%, rgba(13,31,60,0.68)),
    repeating-linear-gradient(115deg, transparent 0 120px, rgba(255,255,255,0.025) 120px 122px);
  pointer-events: none;
  /* own GPU layer — without this the tint can drop for a frame while the
     photos beneath animate, flashing their raw colors */
  transform: translateZ(0);
  will-change: transform;
}
.intro-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 3rem;
  padding-top: 3.2rem;
  padding-bottom: 4.2rem;
  flex-wrap: wrap;
}
.scroll-cue {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  animation: cueBob 2.2s ease-in-out infinite;
}
.scroll-cue span {
  display: block;
  width: 16px; height: 16px;
  border-right: 3px solid rgba(255,255,255,0.7);
  border-bottom: 3px solid rgba(255,255,255,0.7);
  transform: rotate(45deg);
}
@keyframes cueBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}
.intro-copy { flex: 2; min-width: 300px; }
.intro-copy h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); font-weight: 800; margin: 0.5rem 0 1rem; }
.intro-copy h1 em { color: #ff5a70; font-style: normal; }
.intro-copy p { color: rgba(255,255,255,0.82); max-width: 660px; font-size: 1.05rem; }
.intro-ctas { display: flex; flex-direction: column; gap: 0.9rem; min-width: 240px; }

/* ============ SERIES SPOTLIGHT ============ */
.spotlight {
  display: flex;
  gap: 1.1rem;
  min-height: 480px;
}
.spot-panel {
  flex: 1;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  color: var(--white);
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.08);
  transition: flex 0.45s cubic-bezier(0.6, 0, 0.3, 1),
              transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: var(--shadow-card);
}
/* closed panels pulse softly — the cue that they're clickable */
.spot-panel:not(.active) { animation: spotIdle 3.2s ease-in-out infinite; }
@keyframes spotIdle {
  0%, 100% { box-shadow: var(--shadow-card); border-color: rgba(255,255,255,0.08); }
  50% { box-shadow: var(--shadow-card), 0 0 22px rgba(64,129,255,0.28); border-color: rgba(120,165,255,0.35); }
}
/* hovering is the strong indicator: lift + red glow */
.spot-panel:not(.active):hover {
  animation: none;
  transform: translateY(-6px);
  border-color: rgba(255,36,66,0.65);
  box-shadow: var(--shadow-card), 0 0 26px rgba(255,36,66,0.5);
}
.spot-panel::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 70px, rgba(255,255,255,0.035) 70px 72px);
  pointer-events: none;
}
.spot-panel.active { flex: 2.7; cursor: default; }
.spot-rail {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 1.4rem;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.spot-panel.active .spot-rail { opacity: 0; pointer-events: none; }
.spot-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 88px;
}
.spot-logo img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,0.95))
    drop-shadow(0 0 1px rgba(255,255,255,0.9))
    drop-shadow(0 0 7px rgba(255,255,255,0.32));
}
.spot-detail {
  position: absolute;
  inset: 0;
  padding: 2.2rem 2.4rem;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease 0.15s;
  z-index: 1;
}
.spot-panel.active .spot-detail { opacity: 1; pointer-events: auto; }
.spot-detail .spot-logo { width: 132px; height: 64px; margin-bottom: 1.1rem; }
.spot-detail h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.spot-tag {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 1rem;
  margin: 0.3rem 0 1.4rem;
}
.spot-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  flex: 1;
}
.spot-block h4 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.7rem;
}
.spot-standings { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.spot-standings li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  font-size: 0.88rem;
}
.spot-standings .p {
  font-family: var(--font-display);
  font-weight: 800;
  width: 1.4em;
  text-align: center;
  color: var(--gold);
}
.spot-standings .d { font-weight: 600; flex: 1; }
.spot-standings .pts { font-size: 0.78rem; color: rgba(255,255,255,0.65); }
.spot-next {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.9rem;
}
.spot-next span { font-size: 0.78rem; color: rgba(255,255,255,0.65); }
.spot-ctas { display: flex; gap: 0.7rem; margin-top: 1rem; flex-wrap: wrap; }
.spot-ctas .btn { font-size: 0.9rem; padding: 0.5em 1.3em; }

/* ============ ESPORTS BAND ============ */
.esports-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.6rem;
}
.e-stat {
  background: rgba(7,12,24,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 1.2rem 1rem;
  text-align: center;
  backdrop-filter: blur(3px);
}
.e-stat .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.2rem;
  color: var(--white);
}
.e-stat .lbl {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55);
}

/* ============ HERO ============ */
.hero {
  position: relative;
  background:
    linear-gradient(115deg, rgba(9,21,41,0.96) 0%, rgba(22,50,92,0.92) 55%, rgba(200,16,46,0.55) 130%),
    var(--navy-deep);
  color: var(--white);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(115deg, transparent 0 120px, rgba(255,255,255,0.025) 120px 122px),
    radial-gradient(ellipse at 85% 20%, rgba(200,16,46,0.28), transparent 55%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 5rem 1.5rem 4.5rem;
  text-align: center;
}
.hero .stars {
  font-size: 1.1rem;
  letter-spacing: 0.6em;
  color: var(--gold);
  margin-bottom: 1rem;
}
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 800;
}
.hero h1 .line-red { color: #ff5a70; }
.hero-tag {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.85);
  max-width: 680px;
  margin: 1.2rem auto 2rem;
}
.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero-stats {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 3.2rem;
  flex-wrap: wrap;
}
.hero-stat { text-align: center; }
.hero-stat .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  color: var(--white);
}
.hero-stat .lbl {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.65);
}

/* ============ CLUB CARDS ============ */
.club-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.6rem;
}
.club-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--navy-ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.club-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(13,31,60,0.18); }
.club-banner {
  padding: 1rem 1.4rem;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.club-visual {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3rem;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.92);
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.club-visual::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 42px, rgba(255,255,255,0.06) 42px 44px);
}
.club-body { padding: 1.4rem; flex: 1; display: flex; flex-direction: column; gap: 0.9rem; }
.club-body h3 { font-size: 1.5rem; color: var(--navy); }
.club-body p { color: var(--gray-text); font-size: 0.92rem; flex: 1; }
.club-facts { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }
.club-facts li {
  font-size: 0.85rem;
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  color: var(--navy);
  font-weight: 500;
}
.club-cta {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--red);
}

/* ============ NEWS CAROUSEL ============ */
.news-carousel {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  min-height: 320px;
}
.news-slide {
  position: absolute;
  inset: 0;
  color: var(--white);
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
  display: flex;
}
.news-slide.active { opacity: 1; pointer-events: auto; position: relative; }
.news-slide::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 90px, rgba(255,255,255,0.03) 90px 92px);
  pointer-events: none;
}
.news-slide-inner {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 2.6rem 4.5rem 3.4rem;
  width: 100%;
  position: relative;
  z-index: 1;
}
.news-copy { flex: 1; min-width: 0; }
.news-meta { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.8rem; }
.news-tag {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  background: var(--red);
  color: var(--white);
  padding: 0.25em 0.9em;
  border-radius: 4px;
}
.news-date { font-size: 0.8rem; color: rgba(255,255,255,0.65); font-weight: 500; }
.news-copy h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 0.7rem; }
.news-copy p { color: rgba(255,255,255,0.85); font-size: 0.95rem; max-width: 640px; margin-bottom: 1.4rem; }
.news-logo-chip {
  flex-shrink: 0;
  width: 220px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.news-logo-chip img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,0.95))
    drop-shadow(0 0 1px rgba(255,255,255,0.9))
    drop-shadow(0 0 8px rgba(255,255,255,0.32));
}
.news-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.16);
  color: var(--white);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}
.news-arrow:hover { background: rgba(255,255,255,0.35); }
.news-arrow.prev { left: 0.9rem; }
.news-arrow.next { right: 0.9rem; }
.news-dots {
  position: absolute;
  bottom: calc(1.1rem - 20px); /* offsets the buttons' tap padding so the bars sit where they did */
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  z-index: 2;
}
.news-dots button {
  /* the visible bar stays 26x5; padding widens the tap target to 38x45 and
     background-clip keeps the paint on the bar only */
  width: 26px; height: 5px;
  box-sizing: content-box;
  padding: 20px 6px;
  border-radius: 3px;
  border: none;
  background-color: rgba(255,255,255,0.3); /* -color, not the shorthand: the shorthand would reset background-clip */
  background-clip: content-box;
  cursor: pointer;
  transition: background-color 0.15s;
}
.news-dots button.active { background-color: var(--white); }
.news-dots button:hover { background-color: rgba(255,255,255,0.6); }

/* ============ CLUB LEADERBOARDS (home) ============ */
.leader-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.4rem;
  /* stretch, not start: the three championship cards stay the same height even
     when one has a longer entry that wraps (IMSA's four-driver line-ups do),
     and their "Full standings" links stay on one line with each other */
  align-items: stretch;
}
.leader-col { display: flex; }
.leader-col .table-card { display: flex; flex-direction: column; flex: 1; }
.leader-col .leader-more { margin-top: auto; }
/* Leaderboard cards are narrow: long pairings ("Collins / Rankin / Caruso /
   Rogers") must wrap rather than push the points column under the card's
   border. Points stay on one line with clear air before the edge. */
.leader-grid table.data td { white-space: normal; }
.leader-grid table.data td.points { white-space: nowrap; width: 1%; padding-right: 1.6rem; }
.leader-grid .driver-name { white-space: normal; }
/* leaderboard title bars carry the series logo, centered, color-inverted
   so the dark artwork pops light on screen */
.table-card .table-title.lb-title { justify-content: center; height: 68px; padding: 0.5rem 1.4rem; }
.lb-logo {
  height: 42px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
  filter: invert(1) hue-rotate(180deg)
          drop-shadow(0 0 6px rgba(255,255,255,0.18));
}
/* INDYCAR championship header: the whole bar IS the white/blue/red gradient,
   the regular logo sits straight on it (no plate) */
.series-theme-indycar .lb-logo {
  height: 60px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}
.series-theme-indycar .table-card .table-title.lb-title {
  background: linear-gradient(125deg,
    #ffffff 0%, #e7effc 22%, #ffffff 48%, #ffe9ed 74%, #e5eefe 100%);
}
/* NASCAR: real colors + white letters, glowing red (outer) and yellow so it
   doesn't wash into the white lettering; bar = its blue gradient */
.series-theme-nascar .lb-logo {
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.55));
}
.series-theme-nascar .table-card .table-title.lb-title {
  background: linear-gradient(115deg, #0e1c38 0%, #16325c 50%, #1c4f9e 115%);
}
/* IMSA keeps its normal logo with the header-style white trim;
   bar = black into its red & blue */
.series-theme-imsa .lb-logo {
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,0.9))
    drop-shadow(0 0 1px rgba(255,255,255,0.8));
}
.series-theme-imsa .table-card .table-title.lb-title {
  background: linear-gradient(115deg, #0b0b0e 0%, #17171c 45%, #4a0f1c 85%, #12265c 115%);
}
.fia-lb-logo { height: 68px; margin-bottom: 0.7rem; display: block; }
/* FIA esports band that flows with the leaderboards above it */
.leader-fia {
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2.5rem;
  align-items: center;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1rem 2rem 1.8rem;
}
.leader-fia-copy h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  color: var(--ink);
  margin: 0.35rem 0 0.7rem;
}
.leader-fia-copy p { color: var(--gray-text); font-size: 0.95rem; }
.leader-fia-side { display: flex; flex-direction: column; gap: 0.9rem; }
.leader-fia-facts { display: flex; flex-direction: column; gap: 0.7rem; }
.leader-fia .btn { align-self: flex-start; margin-top: 0.3rem; }
@media (max-width: 900px) {
  .leader-fia { grid-template-columns: 1fr; gap: 1.4rem; }
}
.leader-more {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--red-neon);
  text-decoration: none;
  padding: 0.8rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.leader-more:hover { background: rgba(255,36,66,0.1); }

.auth-title {
  text-align: center;
  font-size: 1.4rem;
  color: var(--ink);
  margin-bottom: 1.2rem;
}

/* ============ FIA ESPORTS INFO PAGE ============ */
/* Full-viewport landing hero: info up top, series logo rail pinned to the
   bottom — each logo scrolls to its band below */
.fia-hero-full {
  min-height: calc(100vh - 79px);
  min-height: calc(100svh - 79px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fia-hero-full .hero-inner { padding-top: 4rem; }
.fia-logo-strip {
  position: relative;
  z-index: 2;
  padding: 1.6rem 1.5rem 2.1rem;
  background: linear-gradient(to bottom, transparent, rgba(4, 8, 18, 0.88) 55%);
}
.strip-hint {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-text);
  margin-bottom: 1.1rem;
}
.fia-chips {
  display: flex;
  /* chips size to their logo and the row shares the leftover space evenly —
     equal gaps between logos and equal margins at both ends */
  justify-content: space-evenly;
  align-items: stretch;
  /* sized for the four remaining programs — a 1240px strip left four chips
     stranded far apart with undersized logos */
  gap: 0;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
}
.fia-chip {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  padding: 0.85rem 1rem;
  flex: 0 0 auto;   /* size to the logo; .fia-chips spreads the row evenly */
  min-width: 0;
}
.fia-chip img {
  height: 68px;
  max-width: 165px;
  width: auto;
  object-fit: contain;
  opacity: 0.85;
  transition: transform 0.22s ease, filter 0.22s ease, opacity 0.22s ease;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,0.9))
    drop-shadow(0 0 1px rgba(255,255,255,0.75))
    drop-shadow(0 0 7px rgba(255,255,255,0.12));
}
.fia-chip span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-text);
  white-space: nowrap;
  /* the label never widens the chip: it takes the logo's width and lets the
     text overflow both sides equally, so a long name under a narrow mark
     ("Motorsport Games") doesn't throw off the even logo spacing */
  width: 0;
  min-width: 100%;
  display: flex;
  justify-content: center;
  transition: color 0.22s ease, text-shadow 0.22s ease;
}
.fia-chip:hover img,
.fia-chip:focus-visible img {
  opacity: 1;
  transform: translateY(-5px) scale(1.1);
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,0.95))
    drop-shadow(0 0 1px rgba(255,255,255,0.85))
    drop-shadow(0 0 14px var(--acc))
    drop-shadow(0 0 4px var(--acc));
}
.fia-chip:focus-visible img[src*="mena"] {
  filter:
    drop-shadow(0 3px 9px rgba(0,0,0,0.5))
    drop-shadow(0 0 14px var(--acc))
    drop-shadow(0 0 4px var(--acc));
}
.fia-chip:hover span,
.fia-chip:focus-visible span { color: var(--ink); text-shadow: 0 0 10px var(--acc); }
/* Hill Climb, Gran Turismo, Motorsport Games: these marks are solid white
   or pale, so the white trim above made them glare. Each gets a quiet glow
   in its own programme accent instead, brightening to full accent on hover. */
/* GT and Motorsport Games marks were recoloured white (build assets). The
   default white trim reads as a haze on an all-white mark, so at rest they
   carry no filter at all — crisp, like Hill Climb. Glow on hover only:
   FIA blue for GT, a deeper gold for the Games. */
.fia-chip img[src*="fia-gt-logo"],
.fia-chip img[src*="fia-msg-logo"] { filter: none; }
.fia-chip:hover img[src*="fia-gt-logo"],
.fia-chip:focus-visible img[src*="fia-gt-logo"] {
  filter:
    drop-shadow(0 0 4px #3d6fe0)
    drop-shadow(0 0 16px #3d6fe0);
}
.fia-chip:hover img[src*="fia-msg-logo"],
.fia-chip:focus-visible img[src*="fia-msg-logo"] {
  filter:
    drop-shadow(0 0 4px #e0b000)
    drop-shadow(0 0 16px #e0b000);
}
.fia-chip img[src*="hillclimb"] {
  filter:
    drop-shadow(0 0 5px rgba(47,183,201,0.35))
    drop-shadow(0 0 14px rgba(47,183,201,0.18));
}
.fia-chip:hover img[src*="hillclimb"],
.fia-chip:focus-visible img[src*="hillclimb"] {
  filter:
    drop-shadow(0 0 4px var(--acc))
    drop-shadow(0 0 16px var(--acc));
}

.fia-series {
  border-left: 6px solid var(--red);
  margin: 1.3rem 0;
  /* the programme chips scrollIntoView() here; without this the sticky
     header (79px desktop / 62px phone) covered the band's logo and the
     jump landed a screen too low */
  scroll-margin-top: 104px;
  padding: 4.6rem 0;
  display: flex;
  align-items: center;
  min-height: 480px;
}
.fia-series > .container { width: 100%; }
.fia-series-copy { max-width: 660px; }
.fia-series-logo {
  display: block;
  height: auto;
  max-height: 118px;
  max-width: 340px;
  width: auto;
  object-fit: contain;
  margin-bottom: 1.2rem;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,0.95))
    drop-shadow(0 0 1px rgba(255,255,255,0.9))
    drop-shadow(0 0 8px rgba(255,255,255,0.28));
}
/* the MENA lockup is white with a fine pixel-checker motif — the white trim
   outlines every checker square and reads as noise, so it gets a soft shadow */
.fia-series-logo[src*="mena"] {
  filter: drop-shadow(0 5px 16px rgba(0,0,0,0.55));
}
/* GT / Motorsport Games band logos — same accent treatment as their chips */
.fia-series-logo[src*="fia-gt-logo"],
.fia-series-logo[src*="fia-msg-logo"] { filter: none; transition: filter 0.22s ease; }
.fia-series-logo[src*="fia-gt-logo"]:hover {
  filter: drop-shadow(0 0 4px #3d6fe0) drop-shadow(0 0 20px #3d6fe0);
}
.fia-series-logo[src*="fia-msg-logo"]:hover {
  filter: drop-shadow(0 0 4px #e0b000) drop-shadow(0 0 20px #e0b000);
}
/* Hill Climb band logo — same teal treatment as its chip, see .fia-chip above */
.fia-series-logo[src*="hillclimb"] {
  transition: filter 0.22s ease;
  filter:
    drop-shadow(0 0 5px rgba(47,183,201,0.35))
    drop-shadow(0 0 16px rgba(47,183,201,0.2));
}
.fia-series-logo[src*="hillclimb"]:hover {
  filter:
    drop-shadow(0 0 4px #2fb7c9)
    drop-shadow(0 0 20px #2fb7c9);
}
.fia-next {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
  padding: 0.7rem 1.1rem;
  background: rgba(7,12,24,0.55);
  border: 1px solid;
  border-radius: 8px;
  backdrop-filter: blur(3px);
  max-width: fit-content;
}
.fia-next-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fia-next strong { color: var(--white); font-size: 0.95rem; }
.fia-next-detail { color: var(--gray-text); font-size: 0.85rem; }
.fia-series-ctas {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.fia-series-kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.fia-series h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  color: var(--white);
  margin: 0.4rem 0 0.2rem;
}
.fia-series-format {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.9rem;
}
.fia-series p { color: rgba(255,255,255,0.82); font-size: 0.95rem; max-width: 600px; }
.fia-series-highlight {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--white);
  background: rgba(7,12,24,0.55);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  padding: 0.5rem 1.2rem;
  backdrop-filter: blur(3px);
}
.fia-official {
  text-align: center;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 3rem 2rem;
}
.fia-official img {
  height: 64px;
  margin-bottom: 1rem;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,0.95))
    drop-shadow(0 0 1px rgba(255,255,255,0.9))
    drop-shadow(0 0 7px rgba(255,255,255,0.3));
}
.fia-official h3 { font-size: 1.6rem; color: var(--ink); margin-bottom: 0.5rem; }
.fia-official p { color: var(--gray-text); max-width: 520px; margin: 0 auto 1.6rem; }

/* ============ FIA ESPORTS ============ */
.filter-chips {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
}
.chip {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.5em 1.4em;
  border-radius: 999px;
  border: 2px solid var(--gray-line);
  background: var(--surface);
  color: var(--gray-text);
  cursor: pointer;
  transition: all 0.15s ease;
}
.chip:hover { border-color: var(--red-neon); color: var(--ink); }
.chip.active {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
  box-shadow: var(--glow-red);
}
.fia-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 1.4rem;
}
.fia-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  border-top: 4px solid var(--navy);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.fia-card:hover { transform: translateY(-4px); }
.fia-card.tie-in { border-top-color: var(--red); }
.fia-card.tie-in:hover { box-shadow: var(--shadow-card), var(--glow-red); }
.fia-card-top { display: flex; justify-content: space-between; align-items: center; }
.fia-mark { height: 34px; width: auto; }
.fia-cat {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--off-white);
  border: 1px solid var(--gray-line);
  color: var(--gray-text);
  border-radius: 999px;
  padding: 0.3em 0.9em;
}
.fia-card h3 { font-size: 1.35rem; color: var(--ink); }
.fia-platform {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.fia-card p { font-size: 0.88rem; color: var(--gray-text); flex: 1; }
.fia-highlight {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
}
.fia-card.tie-in .fia-highlight { background: rgba(228,0,43,0.14); color: #ff8095; border-color: rgba(228,0,43,0.3); }

/* ============ SERIES LOGO CHIPS ============ */
.series-logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  margin-bottom: 1.2rem;
}
.series-logo-chip img {
  max-height: 100%; max-width: 240px; object-fit: contain;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,0.95))
    drop-shadow(0 0 1px rgba(255,255,255,0.9))
    drop-shadow(0 0 8px rgba(255,255,255,0.32));
}
.club-visual-logo { background: var(--white); border-bottom: 1px solid var(--gray-line); }
.club-visual-logo::after { display: none; }
.club-visual-logo img { max-height: 110px; max-width: 78%; object-fit: contain; }

/* ============ OFFER BAND ============ */
.offer-band {
  background: linear-gradient(100deg, var(--navy-deep), var(--navy));
  color: var(--white);
  border-radius: var(--radius);
  padding: 2.4rem 2.6rem;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.offer-band::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--red) 33%, var(--white) 33% 66%, #3a5f9e 66%);
}
.offer-copy { flex: 2; min-width: 280px; }
.offer-copy h3 { font-size: 2rem; margin-bottom: 0.5rem; }
.offer-copy h3 em { color: var(--gold); font-style: normal; }
.offer-copy p { color: rgba(255,255,255,0.82); font-size: 0.95rem; }
.offer-points { flex: 1.4; min-width: 250px; list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.offer-points li { display: flex; gap: 0.6rem; font-size: 0.9rem; font-weight: 500; }
.offer-points .check { color: var(--gold); font-weight: 700; }
.offer-band .btn { align-self: center; }

/* ============ PATHWAY ============ */
.pathway {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1.2rem;
}
.path-step {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.6rem 1.2rem;
  text-align: center;
  position: relative;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.path-step:hover { transform: translateY(-4px); border-color: rgba(255,36,66,0.5); }
.path-num {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 0.8rem;
  box-shadow: var(--glow-red);
}
.path-step h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.15rem;
  color: var(--ink);
  letter-spacing: 0.05em;
  margin-bottom: 0.35rem;
}
.path-step p { font-size: 0.82rem; color: var(--gray-text); }

/* ============ PLATFORM BAND ============ */
.platform-band {
  background: var(--navy-ink);
  color: var(--white);
  padding: 3rem 0;
}
.platform-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2rem;
  align-items: center;
}
.platform-grid .lead h3 { font-size: 1.8rem; }
.platform-grid .lead h3 em { color: #ff5a70; font-style: normal; }
.platform-grid .lead p { color: rgba(255,255,255,0.7); font-size: 0.9rem; margin-top: 0.5rem; }
.platform-item { border-left: 2px solid rgba(255,255,255,0.15); padding-left: 1.2rem; }
.platform-item .ico { font-size: 1.5rem; }
.platform-item p { font-size: 0.85rem; color: rgba(255,255,255,0.85); margin-top: 0.35rem; }

/* ============ SERIES PAGE ============ */
.series-hero {
  color: var(--white);
  position: relative;
  overflow: hidden;
}
/* series heroes rotate a photo set behind a series-colored tint;
   translateZ pins the tint to its own GPU layer so it never flickers
   while the photos crossfade underneath */
.hero-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform;
}
.series-hero .hero-inner { position: relative; z-index: 2; padding: 3.5rem 1.5rem 3rem; text-align: left; }
.series-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.series-hero .series-tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.15em;
  margin-top: 0.4rem;
}
.series-hero p.desc {
  max-width: 720px;
  margin-top: 1rem;
  color: rgba(255,255,255,0.85);
  font-size: 0.98rem;
}
.series-facts {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}
.series-fact {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  padding: 0.7rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 500;
  display: flex; gap: 0.5rem; align-items: center;
  backdrop-filter: blur(4px);
}

.tab-bar {
  display: flex;
  gap: 0.4rem;
  border-bottom: 2px solid var(--gray-line);
  margin-bottom: 1.8rem;
  overflow-x: auto;
}
.tab-bar button {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--gray-text);
  padding: 0.7rem 1.2rem;
  cursor: pointer;
  white-space: nowrap;
}
.tab-bar button.active { color: var(--red-neon); border-bottom-color: var(--red-neon); text-shadow: 0 0 16px rgba(255,36,66,0.45); }
.tab-bar button:hover { color: var(--ink); }
/* Phones: the three tabs share the width instead of overflowing — at 375px
   the third one ("Schedule") was 36% off-screen with no hint it scrolled. */
@media (max-width: 640px) {
  .tab-bar { gap: 0; overflow-x: visible; }
  .tab-bar button {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.7rem 0.3rem;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    text-align: center;
  }
}

/* ============ PER-SERIES THEMES ============ */
/* INDYCAR: red-forward on the classic navy */
.series-theme-indycar .table-card .table-title { background: var(--red); box-shadow: inset 0 -3px 0 #3f86ff; }
/* series cards are framed in their accent, same weight as the title line */
.series-theme-indycar .table-card { border: 3px solid #3f86ff; }
.series-theme-nascar  .table-card { border: 3px solid var(--gold); }
.series-theme-imsa    .table-card { border: 3px solid var(--red-bright); }
.series-theme-indycar .tab-bar button.active { color: var(--red); border-bottom-color: var(--red); }

/* NASCAR: navy with gold accents */
.series-theme-nascar .table-card .table-title { background: var(--navy); box-shadow: inset 0 -3px 0 var(--gold); }
.series-theme-nascar .tab-bar button.active { color: var(--gold); border-bottom-color: var(--gold); text-shadow: 0 0 16px rgba(255,213,32,0.4); }
.series-theme-nascar .status-next { background: var(--gold); color: var(--navy-ink); }

/* IMSA: red & black */
.series-theme-imsa .table-card .table-title { background: #121214; box-shadow: inset 0 -3px 0 var(--red-bright); }
.series-theme-imsa .tab-bar button.active { color: var(--red-bright); border-bottom-color: var(--red-bright); }
.series-theme-imsa td.points { color: var(--red-neon); }
.series-theme-imsa .status-upcoming { background: #121214; }

/* ============ TABLES ============ */
.table-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.table-card .table-title {
  padding: 1rem 1.4rem;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.table-title .demo-pill {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 0.25em 0.9em;
}
.table-scroll { overflow-x: auto; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
table.data th {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gray-text);
  text-align: left;
  padding: 0.75rem 1.2rem;
  border-bottom: 2px solid var(--gray-line);
  white-space: nowrap;
}
table.data td {
  padding: 0.7rem 1.2rem;
  border-bottom: 1px solid var(--gray-line);
  white-space: nowrap;
}
table.data tr:last-child td { border-bottom: none; }
table.data tr:hover td { background: var(--off-white); }
td.pos, th.pos { width: 3.2rem; text-align: center; }
td.pos {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink);
}
tr.podium-1 td.pos { color: var(--gold); text-shadow: 0 0 14px rgba(255,213,32,0.5); }
tr.podium-1 td.pos::before { content: "P"; font-size: 0.7em; opacity: 0.7; }
td .driver-name { font-weight: 600; color: var(--ink); }
td .team-name { display: block; font-size: 0.75rem; color: var(--gray-text); white-space: normal; }
td.points { font-weight: 700; color: var(--red-neon); }
.chg-up { color: var(--green); font-weight: 600; }
.chg-down { color: var(--red); font-weight: 600; }
.chg-flat { color: var(--gray-text); }
.lic-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  width: 1.7em; text-align: center;
  border-radius: 4px;
  color: var(--white);
}
.lic-A { background: #1a9850; }
.lic-B { background: #2166ac; }
.class-pill {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 4px;
  padding: 0.15em 0.6em;
  color: var(--white);
}
.class-GTP { background: var(--navy); }
.class-GTD { background: var(--red); }

/* rankings status badges */
.rk-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 4px;
  padding: 0.2em 0.6em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.rk-gold  { color: var(--gold); border-color: rgba(255,213,32,0.45); background: rgba(255,213,32,0.08); text-shadow: 0 0 8px rgba(255,213,32,0.4); }
.rk-green { color: #4ade80; border-color: rgba(74,222,128,0.4); background: rgba(74,222,128,0.07); }
.rk-blue  { color: #7db4ff; border-color: rgba(125,180,255,0.4); background: rgba(125,180,255,0.07); }
.rk-gray  { color: var(--gray-text); border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); }
.table-note {
  margin: 0.9rem 1.1rem 1rem;
  font-size: 0.8rem;
  color: var(--gray-text);
  line-height: 1.55;
}

/* standings: top 10 visible, rest expands */
.table-card tr.xtra { display: none; }
.table-card.expanded tr.xtra { display: table-row; }
.show-more {
  display: block;
  width: 100%;
  padding: 0.75rem;
  background: rgba(255,255,255,0.04);
  border: none;
  border-top: 1px solid rgba(255,255,255,0.09);
  color: var(--gray-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.show-more:hover { color: var(--ink); background: rgba(255,255,255,0.07); }

/* IMSA: GTD and GTP side by side */
.standings-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  align-items: start;
}
.standings-split .table-title { flex-wrap: wrap; gap: 0.4rem; }
@media (max-width: 980px) {
  .standings-split { grid-template-columns: 1fr; }
}

/* clickable schedule rows + expandable race detail panel */
tr.race-row { cursor: pointer; }
tr.race-row:hover td { background: rgba(255,255,255,0.035); }
tr.race-row.sel td { background: rgba(255,255,255,0.05); }
tr.race-detail td { padding: 0; border: none; }
tr.race-detail { display: none; }
tr.race-detail.open { display: table-row; }
/* info fills the left half; the whole right half is the circuit map */
.race-panel {
  display: grid;
  /* minmax(0,1fr) — NOT 1fr. A bare 1fr track floors at min-content, so the
     info column (long venue names, the event chips) grew past half and shoved
     the circuit diagram out of its column, overlapping the copy and forcing
     the table to scroll sideways. minmax(0,…) lets both tracks actually
     shrink to the half they were supposed to be. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.2rem;
  align-items: center;
  padding: 1.8rem 2rem;
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  animation: popIn 0.18s ease-out;
  /* the table sets nowrap to keep its own columns on one line; the panel is
     prose, so it has to opt back out or long copy runs off in a single line
     straight across the circuit diagram */
  white-space: normal;
}
.rp-info, .rp-layout { min-width: 0; }
/* diagrams are dark line art — invert to white and float on the dark panel
   with a red + blue glow (no light plate) */
.rp-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 230px;
}
.rp-layout img {
  width: 100%;
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  filter:
    invert(1) hue-rotate(180deg)
    drop-shadow(0 0 10px rgba(77, 139, 255, 0.55))
    drop-shadow(0 0 26px rgba(255, 36, 66, 0.35));
}
.rp-nolayout {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gray-text);
}
.rp-info h4 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  color: var(--ink);
  margin-bottom: 0.45rem;
}
.rp-meta { font-size: 1rem; color: var(--gray-text); }
.rp-winner { margin-top: 0.9rem; font-size: 1.05rem; color: var(--ink); }
.rp-winner strong { color: var(--gold); }
.rp-events { margin-top: 1.1rem; }
.rp-events-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gray-text);
  margin-bottom: 0.55rem;
}
.rp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rp-chip {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 0.3em 0.85em;
  white-space: nowrap;
}
.rp-date {
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-text);
}
@media (max-width: 760px) {
  .race-panel { grid-template-columns: 1fr; }
  .rp-layout { order: -1; min-height: 170px; }
  .rp-layout img { max-height: 200px; }
}

/* schedule statuses */
.status-pill {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  padding: 0.25em 0.9em;
}
.status-complete { background: rgba(255,255,255,0.08); color: var(--gray-text); }
.status-next { background: var(--red); color: var(--white); animation: pulseNext 1.8s ease-in-out infinite; }
.status-upcoming { background: var(--navy); color: var(--white); }
tr.row-next td { background: rgba(228,0,43,0.1); }
tr.row-next:hover td { background: rgba(228,0,43,0.16); }
@keyframes pulseNext {
  0%, 100% { box-shadow: 0 0 0 0 rgba(228,0,43,0.55); }
  50% { box-shadow: 0 0 12px 3px rgba(228,0,43,0.25); }
}

/* ============ FIA PAGE ============ */
.license-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 2rem;
}
.license-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.benefit-list { list-style: none; display: flex; flex-direction: column; gap: 0.8rem; }
.benefit-list li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.95rem; }
.benefit-list .check {
  color: var(--white); background: var(--green);
  width: 1.4em; height: 1.4em; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8rem; flex-shrink: 0; margin-top: 0.15em;
}

/* ============ DASHBOARD ============ */
.dash-hero {
  background: linear-gradient(115deg, var(--navy-ink), var(--navy));
  color: var(--white);
  padding: 2.6rem 0;
}
.dash-head { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.dash-avatar {
  --hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  position: relative;
  z-index: 0;
  width: 100px; height: 90px;
  clip-path: var(--hex);
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,120,140,0.45));
  font-family: var(--font-display);
  font-weight: 800; font-size: 2.1rem;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 0 16px rgba(255,36,66,0.5));
}
.dash-avatar::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  clip-path: var(--hex);
  background: linear-gradient(160deg, var(--red-neon) 10%, #6d0818 90%);
}
.dash-head h1 { font-size: 2.4rem; }
.dash-head .car-number { color: var(--gold); }
.dash-meta { color: rgba(255,255,255,0.75); font-size: 0.9rem; }
.dash-license {
  margin-left: auto;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  padding: 1rem 1.4rem;
  font-size: 0.85rem;
}
.dash-license .tier {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  color: var(--gold);
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1rem;
}
.stat-tile {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.2rem;
  text-align: center;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.stat-tile:hover { transform: translateY(-3px); border-top-color: var(--red-neon); }
.stat-tile .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  color: var(--ink);
}
.stat-tile.hot .num { color: var(--red-neon); text-shadow: 0 0 16px rgba(255,36,66,0.5); }
.stat-tile .lbl {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-text);
}
.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; }

/* ============ MODAL ============ */
.modal-backdrop[hidden] { display: none; }
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(9, 21, 41, 0.72);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
  padding: 1rem;
}
.modal {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  width: 100%;
  max-width: 420px;
  padding: 2.2rem;
  position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 40px rgba(228,0,43,0.12);
}
.modal-close {
  position: absolute; top: 0.8rem; right: 1rem;
  background: none; border: none;
  font-size: 1.6rem; color: var(--gray-text); cursor: pointer;
}
.modal-logo { height: 40px; display: block; margin: 0 auto 1.4rem; }
.auth-tabs {
  display: flex;
  border-radius: 8px;
  background: var(--off-white);
  padding: 4px;
  margin-bottom: 1.4rem;
}
.auth-tab {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.55rem;
  border: none;
  background: none;
  border-radius: 6px;
  color: var(--gray-text);
  cursor: pointer;
}
.auth-tab.active { background: var(--red); color: var(--white); box-shadow: var(--glow-red); }
#auth-form { display: flex; flex-direction: column; gap: 0.9rem; }
#auth-form label {
  display: flex; flex-direction: column; gap: 0.3rem;
  font-size: 0.8rem; font-weight: 600; color: var(--gray-text);
  text-transform: uppercase; letter-spacing: 0.06em;
}
#auth-form input {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.65rem 0.9rem;
  border: 1.5px solid var(--gray-line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
}
#auth-form input:focus { outline: none; border-color: var(--red-neon); box-shadow: 0 0 10px rgba(255,36,66,0.3); }
.auth-divider {
  display: flex; align-items: center; gap: 0.8rem;
  margin: 1.2rem 0;
  color: var(--gray-text);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--gray-line);
}
.auth-note {
  margin-top: 1rem;
  font-size: 0.72rem;
  color: var(--gray-text);
  text-align: center;
}

/* ============ CODE PORTAL ============ */
/* shared form styling for the applicant + admin forms */
.p-form { display: flex; flex-direction: column; gap: 0.9rem; }
.p-form label {
  display: flex; flex-direction: column; gap: 0.3rem;
  font-size: 0.8rem; font-weight: 600; color: var(--gray-text);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.p-form input, .p-form select {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.65rem 0.9rem;
  border: 1.5px solid var(--gray-line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
}
.p-form select { cursor: pointer; }
.p-form input:focus, .p-form select:focus {
  outline: none; border-color: var(--red-neon); box-shadow: 0 0 10px rgba(255,36,66,0.3);
}
.p-form .btn { margin-top: 0.4rem; }

/* license number (left) + JPEG upload (right) — labels share one row and
   the input/dropzone share the next, via subgrid, so the two columns line
   up no matter which label wraps */
.ap-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.9rem;
}
.ap-split > label,
.ap-split > .p-field {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  row-gap: 0.35rem;
}
.ap-col-label {
  align-self: end;
  font-size: 0.8rem; font-weight: 600; color: var(--gray-text);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.ap-opt { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: 0.6; }
.ap-split input,
.ap-drop { align-self: start; height: 46px; }
.ap-drop {
  display: flex; align-items: center; justify-content: center;
  padding: 0 0.9rem;
  border: 1.5px dashed var(--gray-line); border-radius: 8px;
  background: var(--surface-2); color: var(--gray-text);
  font-size: 0.9rem; text-align: center; cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}
.ap-drop:hover { border-color: var(--red-neon); color: var(--ink); }
.ap-drop.has-file { border-style: solid; border-color: rgba(46,204,113,0.55); color: var(--green); background: rgba(46,204,113,0.07); }
.ap-drop-cta { pointer-events: none; }
.ap-photo-preview:not(:empty) { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.7rem; }
.ap-photo-preview img {
  width: 82px; height: 82px; object-fit: cover; flex-shrink: 0;
  border-radius: 8px; border: 1px solid var(--gray-line);
}
.ap-photo-name { font-size: 0.82rem; color: var(--green); }
.ap-photo-err { font-size: 0.82rem; color: var(--red-neon); }
/* /#/license — the unlock card is narrow while it is a form and widens into
   a two-column result (card | details) once the licence is unlocked. */
.lic-unlock { max-width: 640px; margin: 0 auto; transition: max-width .3s ease; }
.lic-unlock.unlocked { max-width: 1040px; }
.lic-result { display: grid; grid-template-columns: minmax(240px, 380px) 1fr; gap: 2rem; align-items: start; }
.lic-visual figure { margin: 0; }
.lic-visual svg { width: 100%; height: auto; display: block; border-radius: 14px; box-shadow: 0 18px 44px rgba(0,0,0,0.5); }
.lic-back-thumb { margin-top: 0.9rem !important; opacity: 0.92; }
.lic-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1.2rem; margin: 0 0 1.1rem; }
.lic-facts dt { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-text); }
.lic-facts dd { margin: 0.1rem 0 0; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); letter-spacing: 0.03em; }
.lic-facts dd.yes { color: var(--green); } .lic-facts dd.no { color: #ff7a6b; }
.lic-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.lic-wallet-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.7rem; }
/* Google's official "Add to Google Wallet" asset (brand guidelines: use as
   supplied, don't recolour or stretch; min height 48px). */
.gwallet-btn { display: inline-flex; align-items: center; line-height: 0; }
.gwallet-btn img { height: 48px; width: auto; display: block; }
.gwallet-btn:hover img { opacity: 0.9; }
.btn-soon { opacity: 0.55; cursor: not-allowed; }
.btn-soon span { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; margin-left: 0.5rem; opacity: 0.8; }
.lic-code { margin-top: 1.2rem; }
@media (max-width: 760px) { .lic-result { grid-template-columns: 1fr; } .lic-visual { max-width: 340px; margin: 0 auto; } }
/* /#/verify — the result of a scanned licence QR */
.vf-badge { display: inline-block; margin-top: 1rem; padding: 0.55rem 1.1rem; border-radius: 8px; font-family: var(--font-display); font-weight: 800; letter-spacing: 0.14em; font-size: 1.05rem; }
.vf-ok  { background: rgba(46,204,113,0.14); color: var(--green); border: 1.5px solid rgba(46,204,113,0.55); }
.vf-bad { background: rgba(255,122,107,0.14); color: #ff7a6b; border: 1.5px solid rgba(255,122,107,0.55); }
.vf-name { font-size: 1.9rem; color: var(--ink); margin: 0.9rem 0 0.6rem; }
.vf-facts { margin-top: 0.6rem; }
.vf-line { color: var(--gray-text); font-size: 0.9rem; margin-top: 0.8rem; }
.ap-hint { font-size: 0.82rem; color: var(--gray-text); margin-top: 0.6rem; }
@media (max-width: 560px) {
  .ap-split { grid-template-columns: 1fr; grid-template-rows: none; }
  .ap-split > label, .ap-split > .p-field { grid-row: auto; display: flex; flex-direction: column; gap: 0.35rem; }
}

/* admin: license-photo thumbnail on a claimed slot */
.sp-photo { display: inline-block; margin-top: 0.35rem; }
.sp-photo img {
  max-width: 100%; max-height: 88px; border-radius: 6px;
  border: 1px solid var(--gray-line); display: block;
}
.sp-photo:hover img { border-color: var(--red-neon); }

/* applicant "how it works" steps */
.portal-steps { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.portal-steps li { display: flex; gap: 0.9rem; align-items: flex-start; }
.portal-steps .ps-num {
  flex-shrink: 0;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700;
  background: linear-gradient(115deg, var(--red), var(--red-bright));
  color: var(--white); box-shadow: var(--glow-red);
}
.portal-steps strong { color: var(--ink); font-size: 1.02rem; }
.portal-steps p { color: var(--gray-text); font-size: 0.9rem; margin-top: 0.15rem; }

/* result / message notices */
.p-notice {
  margin-top: 1.1rem; padding: 1rem 1.1rem;
  border-radius: 10px; border: 1.5px solid var(--gray-line);
  font-size: 0.95rem; color: var(--ink); line-height: 1.5;
  background: var(--surface-2);
}
.p-notice.p-ok   { border-color: rgba(46,204,113,0.55); background: rgba(46,204,113,0.10); }
.p-notice.p-warn { border-color: rgba(255,213,32,0.55); background: rgba(255,213,32,0.10); }
.p-notice small { color: var(--gray-text); }
/* Success box rhythm: the code sits on its own line, the Copy button is set
   clear of it rather than touching it, and the fine print drops below with
   room to breathe — the card has the vertical space to spare. */
.p-code-label { margin-top: 0.55rem; }
.p-notice .p-code { display: inline-block; margin-top: 0.45rem; }
.p-copy { margin-top: 1rem; }
.p-notice .p-fine { display: block; margin-top: 1.15rem; line-height: 1.55; }
.p-code {
  display: inline-block; margin-top: 0.3rem;
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em;
  font-size: 1.15rem; color: var(--green);
  background: rgba(46,204,113,0.12); border: 1px dashed rgba(46,204,113,0.5);
  padding: 0.3rem 0.7rem; border-radius: 8px;
}

/* strip linking staff to the admin sign-in */
.portal-admin-strip {
  margin-top: 2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.4rem;
  border: 1px dashed var(--gray-line); border-radius: var(--radius);
  background: var(--surface-2); color: var(--gray-text);
  font-size: 0.95rem;
}
.portal-admin-hero { background: linear-gradient(115deg, var(--navy-ink), var(--navy)); }

/* admin auth tabs */
.auth-tabs { display: flex; gap: 0.4rem; margin-bottom: 1.2rem; background: var(--surface-2); padding: 0.3rem; border-radius: 8px; }

/* admin dashboard — stat counters */
.slot-stats { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.4rem; }
.slot-stat {
  flex: 1; min-width: 130px;
  background: var(--surface); border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: 0.1rem;
}
.slot-stat .num { font-family: var(--font-display); font-weight: 700; font-size: 1.8rem; color: var(--ink); }
.slot-stat .lbl { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-text); }
.slot-stat.s-avail { border-color: rgba(46,204,113,0.5); }
.slot-stat.s-avail .num { color: var(--green); }
.slot-stat.s-claim { border-color: rgba(255,213,32,0.5); }
.slot-stat.s-claim .num { color: var(--gold); }
.slot-stat.s-empty .num { color: var(--gray-text); }

/* legend */
.slot-legend { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-bottom: 1.4rem; }
.slot-legend .lg-item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--gray-text); }
.lg-dot { width: 0.9rem; height: 0.9rem; border-radius: 4px; border: 1px solid rgba(255,255,255,0.2); }
.lg-dot.d-empty { background: rgba(148,161,189,0.25); }
.lg-dot.d-avail { background: var(--green); }
.lg-dot.d-claim { background: var(--gold); }

/* the code slots grid — grey / green / yellow states */
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.slot-card {
  border-radius: var(--radius); border: 1.5px solid var(--gray-line);
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.8rem;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.slot-card:hover { transform: translateY(-2px); }
.slot-empty     { background: rgba(148,161,189,0.06); border-color: var(--gray-line); }
.slot-available { background: rgba(46,204,113,0.10);  border-color: rgba(46,204,113,0.55); box-shadow: 0 0 18px -6px rgba(46,204,113,0.4); }
.slot-claimed   { background: rgba(255,213,32,0.10);  border-color: rgba(255,213,32,0.6);  box-shadow: 0 0 18px -6px rgba(255,213,32,0.4); }

.slot-head { display: flex; align-items: center; gap: 0.6rem; }
.slot-id { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.05em; color: var(--ink); }
.slot-badge {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em;
  padding: 0.18rem 0.55rem; border-radius: 999px; font-weight: 700;
  background: rgba(148,161,189,0.18); color: var(--gray-text);
}
.slot-available .slot-badge { background: rgba(46,204,113,0.22); color: #6ff0a4; }
.slot-claimed .slot-badge   { background: rgba(255,213,32,0.22); color: var(--gold); }
.slot-reset {
  margin-left: auto; width: 1.5rem; height: 1.5rem; border-radius: 6px;
  border: 1px solid var(--gray-line); background: transparent; color: var(--gray-text);
  cursor: pointer; font-size: 0.8rem; line-height: 1;
}
.slot-reset:hover { border-color: var(--red-neon); color: var(--red-neon); }

.slot-field { display: flex; flex-direction: column; gap: 0.25rem; }
.slot-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gray-text); }
.slot-code {
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em;
  font-size: 1.02rem; color: var(--ink);
}
.slot-add { display: flex; gap: 0.4rem; }
.slot-add input {
  flex: 1; min-width: 0; font-family: var(--font-body); font-size: 0.85rem;
  padding: 0.4rem 0.6rem; border: 1.5px solid var(--gray-line);
  border-radius: 6px; background: var(--surface-2); color: var(--ink);
}
.slot-add input:focus { outline: none; border-color: var(--red-neon); }
.slot-add button {
  font-family: var(--font-display); font-weight: 700; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.4rem 0.8rem; border: none; border-radius: 6px; cursor: pointer;
  background: linear-gradient(115deg, var(--red), var(--red-bright)); color: var(--white);
}
.slot-person { display: flex; flex-direction: column; gap: 0.1rem; }
.sp-name { font-weight: 600; color: var(--ink); }
.sp-meta { font-size: 0.82rem; color: var(--gray-text); }
.sp-when { font-size: 0.75rem; color: var(--gray-text); opacity: 0.8; }
.slot-person-empty { color: var(--gray-text); font-size: 0.9rem; font-style: italic; }

@media (max-width: 640px) {
  .slot-stats { gap: 0.6rem; }
  .slot-stat { min-width: 45%; }
  .portal-admin-strip { flex-direction: column; align-items: flex-start; }
}

/* ============ FOOTER ============ */
.site-footer {
  background: #050910;
  border-top: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.75);
  margin-top: 3rem;
}
.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2rem;
}
.footer-brand img {
  height: 48px;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.4));
}
.footer-brand p { margin-top: 0.9rem; font-size: 0.85rem; }
.footer-col h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white);
  margin-bottom: 0.7rem;
}
.footer-col a { display: block; font-size: 0.85rem; text-decoration: none; padding: 0.22rem 0; color: rgba(255,255,255,0.7); }
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 1.1rem 1.5rem;
  text-align: center;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px) {
  .club-links { display: none; }
}
@media (max-width: 900px) {
  .platform-grid { grid-template-columns: 1fr; }
  .platform-item { border-left: none; border-top: 2px solid rgba(255,255,255,0.15); padding: 1rem 0 0; }
  .license-grid, .dash-cols { grid-template-columns: 1fr; }
  .intro-ctas { flex-direction: row; flex-wrap: wrap; }
  .spotlight { flex-direction: column; min-height: 0; }
  .spot-panel { min-height: 96px; }
  .spot-panel.active { min-height: 560px; }
  .spot-rail { flex-direction: row; justify-content: center; gap: 1.1rem; padding: 1rem 1.4rem; }
  .spot-logo { width: 120px; height: 60px; }
  .spot-detail { padding: 1.6rem 1.4rem; }
  .spot-cols { grid-template-columns: 1fr; gap: 1.1rem; }
  .welcome-inner { padding: 2rem 1.5rem 1.2rem; gap: 1.6rem; }
  .welcome-results { padding: 0 1.5rem 2rem; }
  .news-slide-inner { flex-direction: column-reverse; align-items: flex-start; gap: 1.2rem; padding: 2rem 3.4rem 3.2rem; }
  .news-logo-chip { width: 150px; height: 90px; padding: 0.8rem 1rem; }
  .dash-license { margin-left: 0; width: 100%; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* ============ CHAKRA PETCH TUNING ============
   Display font swap: Chakra Petch is wider than Barlow Condensed, so key
   sizes are tightened, and hero-level headings take the ACCUS logo's
   italic lean. */
h1, h2 { font-style: italic; }
.brand-title {
  font-style: italic;
  transform: none;
  font-size: 1.3rem;
  letter-spacing: 0.12em;
}
.btn { font-size: 0.98rem; letter-spacing: 0.05em; }
.btn-lg { font-size: 1.12rem; }
.intro-copy h1 { font-size: clamp(2.1rem, 4.8vw, 3.8rem); }
.section-head h2 { font-size: 2.05rem; }
.series-hero h1 { font-size: clamp(1.8rem, 4.2vw, 3rem); }
.esports-wide-copy h2 { font-size: 2.3rem; }
.dash-head h1 { font-size: 2.1rem; }
.welcome-id h3 { font-size: 2rem; }
.offer-copy h3 { font-size: 1.7rem; }
.tab-bar button { font-size: 1rem; }
.table-title { font-size: 0.95rem; }
.nav-drawer a { font-size: 1.25rem; }
.drawer-signout { font-size: 1.05rem; }
.spot-detail h3 { font-size: clamp(1.25rem, 2vw, 1.7rem); }
.fia-card h3 { font-size: 1.15rem; }
.news-copy h3 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); }

/* ============ HOME REDESIGN: PILLARS FIRST SCREEN ============ */
.pillars {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0.9rem;
}
.pillars-head { text-align: center; padding: 1.1rem 0 1rem; }
.pillars-head h2 { font-size: 2.15rem; font-weight: 800; color: var(--ink); }
.pillars-head h2 em {
  color: var(--red-neon);
  font-style: italic;
  text-shadow: 0 0 22px rgba(255, 36, 66, 0.5);
}
.pillars .spotlight { flex: 1; min-height: 0; }
.pillars .spot-logo { width: 220px; height: 124px; }
/* click affordance: a slow pulse in each series' own colour (INDYCAR blue,
   NASCAR yellow, IMSA red) and a stronger blaze on hover. Just the logo —
   no text hint. --glow is an r,g,b triple so one keyframe serves all three. */
.pillars .spot-panel { --glow: 255,36,66; }
.pillars .spot-panel[data-series="indycar"] { --glow: 63,134,255; }
.pillars .spot-panel[data-series="nascar"]  { --glow: 255,213,32; }
.pillars .spot-panel[data-series="imsa"]    { --glow: 228,0,43; }
.pillars .spot-panel:not(.active) { animation: pillarIdle 2.6s ease-in-out infinite; }
@keyframes pillarIdle {
  0%, 100% { box-shadow: var(--shadow-card); border-color: rgba(255,255,255,0.1); }
  50% { box-shadow: var(--shadow-card), 0 0 34px rgba(var(--glow),0.4); border-color: rgba(var(--glow),0.6); }
}
.pillars .spot-panel:not(.active):hover {
  animation: none;
  transform: translateY(-8px);
  border-color: rgb(var(--glow));
  box-shadow: var(--shadow-card), 0 0 46px rgba(var(--glow),0.65);
}
.pillars .spot-rail { gap: 1.6rem; }

/* ============ SLOGAN BAND (rotating photos + new lockup) ============ */
.slogan-band {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 79px);
  min-height: calc(100svh - 79px);
  display: flex;
  align-items: center;
  background: var(--navy-deep);
}
/* the three club logos, front and center on the landing hero —
   plain images: no glow, no outline, no hover, not buttons (Dylan-specified).
   Order: NASCAR | INDYCAR | IMSA — the narrow shield sits at the exact page
   center with the two wide marks balanced on either side. */
.hero-clubs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  /* fluid gap + logo heights: all three marks scale together on narrow
     screens instead of the wide logos collapsing while the shield stays put */
  gap: clamp(1.2rem, 6vw, 7rem);
  align-items: center;
  max-width: 1280px;
  margin: 2.2rem auto 2.4rem;
}
/* the club-benefit band leads the scroll — buffered so it sits just below
   the fold rather than peeking into the landing view */
.member-benefit-lead { margin-top: 3.5rem; }
.hero-clubs img { height: clamp(24px, 5vw, 64px); width: auto; max-width: 100%; object-fit: contain; }
.hero-clubs img:first-child { justify-self: end; }
.hero-clubs img:nth-child(2) { height: clamp(46px, 8.75vw, 112px); /* the shield is square-ish */ }
.hero-clubs img:last-child { justify-self: start; }

.slogan-inner {
  position: relative;
  z-index: 2; /* above the tint layer */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.slogan-logo {
  width: min(580px, 88%);
  filter: drop-shadow(0 12px 40px rgba(0,0,0,0.55));
}
.slogan-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.8rem, 3.8vw, 2.9rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-top: -0.6rem;
}
.slogan-line em { color: var(--red-neon); text-shadow: 0 0 24px rgba(255,36,66,0.55); }
.slogan-sub { color: rgba(255,255,255,0.78); max-width: 600px; margin: 0.6rem 0 1.6rem; font-size: 1.02rem; }
.slogan-ctas { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
/* hero FIA-license CTA: grows on hover while a red/blue gradient mesh
   fades in behind the text (::before layer — mesh gradients can't
   transition directly, so we crossfade a painted underlay instead) */
.btn-fia-cta {
  position: relative;
  z-index: 0;
  transition: transform 0.18s ease, filter 0.18s ease, color 0.18s ease;
}
.btn-fia-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(at 18% 28%, rgba(228, 0, 43, 0.95), transparent 58%),
    radial-gradient(at 82% 18%, rgba(28, 79, 158, 0.95), transparent 55%),
    radial-gradient(at 64% 85%, rgba(255, 36, 66, 0.8), transparent 60%),
    radial-gradient(at 8% 88%, rgba(22, 50, 92, 0.95), transparent 55%),
    #101f3e;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.btn-fia-cta:hover {
  transform: scale(1.07) translateY(-2px);
  background: transparent; /* let the mesh underlay through (base .btn-outline-white:hover paints it white) */
  color: var(--white);
  filter: drop-shadow(0 0 14px rgba(228, 0, 43, 0.45)) drop-shadow(0 0 22px rgba(28, 79, 158, 0.35));
}
.btn-fia-cta:hover::before { opacity: 1; }

/* ============ BIGGER NEWS ============ */
.news-big .news-slide-inner { min-height: 52vh; align-items: center; }
.news-big .news-copy h3 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.news-big .news-copy p { font-size: 1.05rem; max-width: 680px; }
.news-big .news-logo-chip { width: 280px; height: 185px; }


/* ============ FIA PROMO (home) ============ */
.fia-promo-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3rem;
  align-items: center;
}
.fia-promo-copy h2 { font-size: 2.3rem; color: var(--ink); margin: 0.4rem 0 1rem; }
.fia-promo-copy h2 em { color: var(--red-neon); font-style: italic; text-shadow: 0 0 22px rgba(255,36,66,0.5); }
.fia-promo-copy p { color: var(--gray-text); font-size: 0.98rem; margin-bottom: 0.9rem; max-width: 640px; }
.fia-promo-side {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.8rem;
}
.fia-promo-fact { display: flex; align-items: center; gap: 1.1rem; }
.fia-promo-fact .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--red-neon);
  min-width: 74px;
  text-align: center;
}
.fia-promo-fact span:last-child { color: var(--gray-text); font-size: 0.9rem; }
.fia-promo-side .btn { margin-top: 0.5rem; text-align: center; }

/* ============ MEMBER BENEFIT — FULL-BLEED ANGLED BAND ============ */
.member-benefit {
  margin: 4rem 0 3rem;
  padding: 4.6rem 0;
  background:
    repeating-linear-gradient(115deg, transparent 0 60px, rgba(255,255,255,0.04) 60px 62px),
    linear-gradient(100deg, #58000f, var(--red) 45%, #8a0a1e 100%);
  clip-path: polygon(0 2.4rem, 100% 0, 100% calc(100% - 2.4rem), 0 100%);
  color: var(--white);
}
.mb-inner { display: flex; align-items: center; gap: 3rem; flex-wrap: wrap; }
.mb-copy { flex: 1; min-width: 300px; }
.mb-copy .kicker::before { opacity: 0.9; }
.mb-copy h2 { font-size: 2rem; margin: 0.3rem 0 0.8rem; color: var(--white); }
.mb-copy h2 em { color: var(--gold); font-style: italic; text-shadow: 0 0 18px rgba(255,213,32,0.45); }
.mb-copy p { color: rgba(255,255,255,0.9); max-width: 660px; font-size: 0.98rem; }
.mb-clubs { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.2rem; }
.mb-club {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  padding: 0.35em 1.1em;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.12);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.member-benefit .btn-white:hover { filter: drop-shadow(0 0 12px rgba(255,255,255,0.6)); }

/* ============ REDESIGN RESPONSIVE ============ */
@media (max-width: 900px) {
  .pillars { min-height: 0; padding: 0 1rem 1rem; }
  .pillars .spot-logo { width: 140px; height: 70px; }
  .pillars .spot-rail { gap: 1rem; }
  .pillars .spot-rail::after { font-size: 0.7rem; }
  .fia-promo-grid { grid-template-columns: 1fr; gap: 2rem; }
  .news-big .news-slide-inner { min-height: 0; }
  .news-big .news-logo-chip { width: 150px; height: 90px; }
}

/* Slogan band: darker tint so the logo plate melts into the backdrop */
.slogan-band .intro-tint {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(3, 19, 56, 0.55), transparent 70%),
    linear-gradient(115deg, rgba(5, 10, 22, 0.93), rgba(7, 16, 36, 0.88) 60%, rgba(10, 18, 38, 0.9)),
    repeating-linear-gradient(115deg, transparent 0 120px, rgba(255,255,255,0.02) 120px 122px);
}



/* ============ SIM RACING IS REAL — FULL-BLEED BAND ============ */
.esports-wide {
  position: relative;
  width: 100%;
  min-height: 620px;
  display: flex;
  align-items: center;
  margin: 3rem 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: #0b1226;
  padding: 4.5rem 0;
  overflow: hidden;
}
/* The champion fills the right side and dissolves into the navy on its left
   edge. The photo gets its own absolutely-positioned layer rather than being
   a background on the section: as a section background it had to sit under a
   full-width gradient, which landed at 96% opacity exactly where the driver
   was and erased him. The -wide crop trims dead sponsor wall off the right so
   the subject + trophy sit center-right of the frame and clear the copy. */
.esports-wide-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 58%;
  background: url("../assets/photos/enascar-champion-wide.jpg") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.55) 16%, #000 34%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.55) 16%, #000 34%);
}
.esports-wide::before {
  /* same red/white/blue thirds as the header stripe so the two line up */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--red) 33.333%, var(--white) 33.333% 66.666%, var(--navy) 66.666%);
}
.esports-wide-copy {
  position: relative;
  z-index: 2;
  margin-right: auto;
  max-width: 50%;
}
.esports-wide-copy h2 { font-size: 2.5rem; font-weight: 800; margin: 0.4rem 0 1rem; color: var(--white); }
.esports-wide-copy h2 em { color: #ff5a70; font-style: italic; text-shadow: 0 0 22px rgba(255,36,66,0.5); }
.esports-wide-copy p { color: rgba(255,255,255,0.85); font-size: 1.02rem; margin-bottom: 0.9rem; }
@media (max-width: 900px) {
  .esports-wide { padding: 3rem 0; }
  .esports-wide-copy { max-width: 100%; }
  /* stacked: photo becomes a top banner fading down into the copy */
  .esports-wide-photo {
    width: 100%;
    bottom: auto;
    height: 46%;
    background-position: center 22%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.5) 62%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.5) 62%, transparent 100%);
  }
  .esports-wide { padding-top: 15rem; }
}

/* ============ SERIES PAGE: TRACK MAP ============ */
.track-map {
  position: relative;
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: 1.4rem;
  padding: 1.4rem 1.4rem 2.6rem;
}
/* Dots are positioned in % of the image itself (map-canvas), NOT the padded
   card — keep this wrapper padding-free or every marker drifts off target. */
.map-canvas { position: relative; }
.track-map img { width: 100%; height: auto; display: block; opacity: 0.9; }
/* Inset map for overseas rounds (bottom-right corner) */
.map-inset {
  position: absolute;
  right: 1.5%;
  bottom: 2.5%;
  width: 13%;
  min-width: 96px;
  background: rgba(7, 12, 24, 0.72);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  z-index: 3;
}
.map-inset img { opacity: 1; }
.map-inset .inset-label {
  position: absolute;
  top: 4px;
  left: 7px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-text);
  z-index: 2;
}
/* NAC: no West-coast rounds, so the Panama inset sits up in the Pacific
   Northwest corner — bottom-left collided with the legend on phones. It's
   bigger than the Italy inset so the label and the final marker never meet,
   and the label moves to the bottom edge, well away from the centred marker. */
.map-inset.inset-left { right: auto; left: 2%; bottom: auto; top: 5%; width: 20%; min-width: 150px; }
.map-inset.inset-left .inset-label { top: auto; bottom: 5px; left: 8px; }
@media (max-width: 640px) {
  .map-inset.inset-left { width: 44%; min-width: 140px; }
}
.map-inset .track-dot { width: 21px; height: 21px; }
.map-inset .track-dot span { font-size: 0.66rem; }
.track-dot {
  position: absolute;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--navy);
  border: 2px solid rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
/* hover-a-dot event popup (pointer-events off so it never traps the mouse) */
.track-pop {
  pointer-events: none;
  position: absolute;
  z-index: 6;
  width: min(250px, 60%);
  background: rgba(9, 15, 32, 0.96);
  border: 1px solid;
  border-radius: 8px;
  padding: 0.8rem 0.95rem 0.7rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55), 0 0 18px rgba(255,255,255,0.06);
  cursor: default;
  animation: popIn 0.16s ease-out;
}
@keyframes popIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.track-pop .tp-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
}
.track-pop .tp-round {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-text);
}
.tp-status {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 0.18em 0.55em;
}
.tp-next { background: var(--red); color: var(--white); box-shadow: 0 0 10px rgba(255,36,66,0.5); }
.tp-upcoming { background: rgba(255,255,255,0.1); color: var(--ink); border: 1px solid rgba(255,255,255,0.25); }
.tp-done { background: #2a3554; color: var(--gray-text); }
.track-pop h4 {
  font-family: var(--font-display);
  font-size: 0.98rem;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.track-pop .tp-meta { font-size: 0.78rem; color: var(--gray-text); line-height: 1.45; }
.track-pop .tp-winner { font-size: 0.82rem; color: var(--ink); margin-top: 0.4rem; }
.track-pop .tp-winner strong { color: var(--gold); }
.track-pop .tp-date {
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.track-dot span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--white);
}
.track-dot.done { background: #2a3554; border-color: rgba(255,255,255,0.35); opacity: 0.85; }
.track-dot.next {
  background: var(--red);
  border-color: var(--white);
  animation: pulseNext 1.8s ease-in-out infinite;
  z-index: 3;
}
.track-dot { transition: transform 0.15s ease; }
.track-dot:hover {
  transform: translate(-50%, -50%) scale(1.35);
  z-index: 4;
}
/* Series-colored glow outline on the map markers — INDYCAR blue,
   NASCAR yellow, IMSA red */
.series-theme-indycar .track-dot { border-color: #3f86ff; box-shadow: 0 0 12px rgba(63,134,255,0.65), 0 0 3px rgba(63,134,255,0.9); }
.series-theme-indycar .track-dot.done { border-color: rgba(63,134,255,0.55); box-shadow: 0 0 8px rgba(63,134,255,0.35); }
.series-theme-nascar .track-dot { border-color: #ffd520; box-shadow: 0 0 12px rgba(255,213,32,0.6), 0 0 3px rgba(255,213,32,0.85); }
.series-theme-nascar .track-dot.done { border-color: rgba(255,213,32,0.5); box-shadow: 0 0 8px rgba(255,213,32,0.3); }
.series-theme-imsa .track-dot { border-color: #e4002b; box-shadow: 0 0 12px rgba(228,0,43,0.65), 0 0 3px rgba(228,0,43,0.9); }
.series-theme-imsa .track-dot.done { border-color: rgba(228,0,43,0.55); box-shadow: 0 0 8px rgba(228,0,43,0.35); }
.map-legend {
  position: absolute;
  left: 1.4rem; right: 1.4rem; bottom: 0.8rem;
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-text);
}
.map-legend .lg::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 0.45em;
  background: var(--navy);
  border: 1px solid rgba(255,255,255,0.6);
  vertical-align: -1px;
}
.map-legend .lg.done::before { background: #2a3554; }
.map-legend .lg.next::before { background: var(--red); }
.map-legend .lg.note { margin-left: auto; }
.map-legend .lg.note::before { display: none; }

/* ============ SERIES PAGE: NEWS CARDS ============ */
.snews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.4rem;
}
.snews-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.snews-card:hover { transform: translateY(-4px); border-color: rgba(255,36,66,0.45); }
.snews-photo {
  height: 175px;
  background-position: center;
  background-size: cover;
}
.snews-body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; }
.snews-body h3 { font-size: 1.1rem; color: var(--ink); line-height: 1.25; }
.snews-body p { font-size: 0.88rem; color: var(--gray-text); }

/* ============ SERIES PAGE: HOW TO JOIN ============ */
.join-band {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 6px solid var(--red);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 2.4rem 2.6rem;
}
.join-copy { flex: 2; min-width: 300px; }
.join-copy h2 { font-size: 1.9rem; color: var(--ink); margin: 0.3rem 0 0.6rem; }
.join-copy p { color: var(--gray-text); max-width: 640px; }
.join-steps {
  margin-top: 1rem;
  padding-left: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.95rem;
}
.join-side { display: flex; flex-direction: column; gap: 0.9rem; min-width: 260px; }
.join-side .btn { text-align: center; }

/* ============ SMALL-SCREEN / PHONE PASS (Jul 20) ============
   Keep at END of file so these override the desktop rules above. */

/* hard stop on sideways page panning — `clip` (not `hidden`) so no scroll
   container is created and the sticky header keeps working */
html, body { overflow-x: clip; }

/* Header: hamburger below 900px — nav + iRacing shield give way to
   ACCUS left / burger top-right; the menu drops down under the header. */
.nav-burger {
  display: none; /* desktop: hidden — flipped on in the 900px query below */
  justify-self: end;
  width: 44px;
  height: 38px;
  padding: 8px 9px;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
}
.nav-burger span {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--ink);
  box-shadow: 0 0 8px rgba(255,255,255,0.25);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
/* open state: bars fold into an X */
.nav-burger.open span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: absolute; /* sticky .site-header is the containing block */
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(7, 12, 24, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 24px 44px rgba(0,0,0,0.6);
  padding: 0.5rem 1.4rem 1.1rem;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
}
.mm-link {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 0.8rem 0.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mm-link:has(+ .mm-sub) { border-bottom: none; } /* series rows share a rule with their sub-links */
.mm-link.active { color: var(--red-neon); text-shadow: 0 0 14px rgba(255,36,66,0.5); }
.mm-sub {
  display: flex;
  gap: 1.6rem;
  padding: 0.15rem 0.2rem 0.85rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mm-sub a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gray-text);
  text-decoration: none;
}
.mm-sub a:hover { color: var(--ink); }

@media (max-width: 900px) {
  .main-nav { display: none; }
  .header-shield { display: none; }
  .header-inner { grid-template-columns: 1fr auto; gap: 1rem; }
  .nav-burger { display: flex; }
  .mobile-menu.open { display: block; }
}

@media (max-width: 640px) {
  .brand-lockup { height: 30px; }
  /* long CTA buttons (hero FIA license line) wrap without overflowing */
  .btn-lg { font-size: 1.02rem; padding: 0.7em 1.3em; }
  .slogan-ctas { padding: 0 1.2rem; }
  .series-hero .hero-inner { padding: 2.6rem 1.2rem 2.4rem; }
  .series-hero .series-tagline { font-size: 1.05rem; }
  .news-slide-inner { padding: 1.8rem 1.4rem 2.6rem; }
  .join-band { padding: 1.8rem 1.4rem; }
  .esports-wide-copy h2 { font-size: 1.9rem; }
  .footer-inner { grid-template-columns: 1fr; }
}


/* =========================================================
   NAV — wide dropdown (FIA Esports holds the NAC 2026 entry)
   ========================================================= */
.drop-wide { min-width: 268px; }
.drop-flag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.34rem;
  border-radius: 4px;
  background: var(--red);
  color: var(--white);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  vertical-align: 1px;
}

/* section head with a trailing action button */
.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.4rem;
  text-align: left;
  flex-wrap: wrap;
}
.section-head-row p { margin-left: 0; }

/* carousel gets a secondary "read the long version" link */
.news-slide-ctas { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.news-slide-read {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  padding-bottom: 2px;
}
.news-slide-read:hover { color: var(--white); border-bottom-color: var(--white); }


/* =========================================================
   NEWSROOM  —  #/news
   ========================================================= */
.news-hero {
  padding: 3.4rem 0 2.4rem;
  border-bottom: 1px solid var(--gray-line);
  background:
    radial-gradient(ellipse 70% 120% at 12% 0%, rgba(200,16,46,0.16), transparent 70%),
    radial-gradient(ellipse 60% 120% at 88% 10%, rgba(22,50,92,0.5), transparent 70%);
}
.news-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--ink); }
.news-hero h1 em {
  color: var(--red-neon);
  font-style: italic;
  text-shadow: 0 0 26px rgba(255,36,66,0.5);
}
.news-hero p.desc { max-width: 720px; margin-top: 0.7rem; color: var(--gray-text); }
.news-updated {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.2rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--gray-line);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-text);
}
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(46,204,113,0.7);
  animation: pulseDot 2.4s ease-out infinite;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(46,204,113,0.6); }
  70%  { box-shadow: 0 0 0 9px rgba(46,204,113,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); }
}

/* featured lead story */
.nlead {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 420px;
  padding: 2.4rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nlead:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 22px 50px rgba(0,0,0,0.6);
}
.nlead-copy { position: relative; z-index: 2; max-width: 660px; }
.nlead-copy h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight: 800;
  color: var(--white);
  margin: 0.3rem 0 0.8rem;
  line-height: 1.12;
}
.nlead-copy p { color: rgba(255,255,255,0.86); font-size: 1rem; margin-bottom: 1.1rem; }
.nlead-cta {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  border-bottom: 2px solid var(--red-neon);
  padding-bottom: 3px;
}
.nlead-logo {
  position: absolute;
  top: 2rem;
  right: 2.2rem;
  height: 62px;
  max-width: 190px;
  object-fit: contain;
  opacity: 0.95;
  z-index: 2;
}
.news-tag-lead { background: var(--red); color: var(--white); }

/* story grid */
.ngrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}
.ngrid-3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ncard {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.ncard:hover { transform: translateY(-3px); border-color: rgba(255,36,66,0.4); }
.ncard-media {
  position: relative;
  display: block;
  height: 178px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.ncard-logo {
  position: absolute;
  bottom: 0.9rem;
  left: 1.1rem;
  height: 34px;
  max-width: 130px;
  object-fit: contain;
}
.ncard-body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.ncard-body h3 {
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0.55rem;
}
.ncard-body h3 a { color: var(--ink); text-decoration: none; }
.ncard-body h3 a:hover { color: var(--red-neon); }
.ncard-body p {
  color: var(--gray-text);
  font-size: 0.92rem;
  margin-bottom: 1rem;
  /* clamp the summary so cards in a row stay even */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ncard-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.ncard-read {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-neon);
  text-decoration: none;
}
.ncard-read:hover { color: var(--white); }
.ncard-jump {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--gray-text);
  text-decoration: none;
  border-bottom: 1px solid var(--gray-line);
}
.ncard-jump:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* =========================================================
   ARTICLE PAGE  —  #/news/<id>
   ========================================================= */
.article-hero {
  position: relative;
  padding: 2.2rem 0 2.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.article-hero-inner { position: relative; z-index: 2; }
.article-hero h1 {
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.12;
  max-width: 940px;
}
.article-back {
  display: inline-block;
  margin-bottom: 1.3rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
}
.article-back:hover { color: var(--white); }
.article-logo {
  height: 48px;
  max-width: 170px;
  object-fit: contain;
  margin-top: 1.4rem;
}
.article-wrap { max-width: 800px; }
.article-body p {
  font-size: 1.06rem;
  line-height: 1.72;
  color: rgba(237,241,250,0.9);
  margin-bottom: 1.15rem;
}
/* lead paragraph reads a notch larger */
.article-body p:first-child { font-size: 1.18rem; color: var(--ink); }
.article-source {
  font-size: 0.86rem !important;
  color: var(--gray-text) !important;
  border-left: 3px solid var(--gray-line);
  padding-left: 0.9rem;
  margin-top: 1.6rem;
}
.article-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--gray-line);
}


/* =========================================================
   NAC 2026  —  #/nac
   Organizer's own palette: near-black ground, brand red,
   neon green micro-labels. Green stays inside this page.
   ========================================================= */
.nac-hero,
.nac-usa,
#nac-timeline,
.nac-spec {
  --nac-red: #e4281f;
  --nac-red-hot: #ff3b2f;
  --nac-green: #75f062;
}
.btn-nac {
  background: linear-gradient(115deg, #e4281f, #ff3b2f);
  color: var(--white);
  border-color: transparent;
}
.btn-nac:hover { background: #ff3b2f; filter: drop-shadow(0 0 14px rgba(255,59,47,0.55)); }

.nac-hero {
  position: relative;
  padding: 3.2rem 0 3.4rem;
  color: var(--white);
  border-bottom: 3px solid #e4281f;
  overflow: hidden;
  /* organizer's palette: near-black teal ground, brand red bloom on the right,
     plus the diagonal speed-slash motif from their artwork */
  background:
    repeating-linear-gradient(118deg, transparent 0 78px, rgba(255,255,255,0.022) 78px 80px),
    radial-gradient(ellipse 55% 120% at 88% 55%, rgba(228,40,31,0.3), transparent 70%),
    radial-gradient(ellipse 60% 130% at 12% 20%, rgba(11,60,74,0.6), transparent 72%),
    linear-gradient(104deg, #050d11 0%, #071216 46%, #0a2028 100%);
}
.nac-hero-watermark {
  position: absolute;
  right: -3%;
  top: 50%;
  transform: translateY(-50%) rotate(-8deg);
  width: 460px;
  max-width: 46%;
  opacity: 0.11;
  pointer-events: none;
  filter: drop-shadow(0 0 40px rgba(228,40,31,0.5));
}
.nac-hero-inner { position: relative; z-index: 2; }
.nac-hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.06;
  margin-top: 0.5rem;
}
.nac-tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.16em;
  color: #75f062;
  margin-top: 0.45rem;
}
.nac-hero p.desc {
  max-width: 740px;
  margin-top: 1rem;
  color: rgba(255,255,255,0.86);
  font-size: 1rem;
}

/* rebuilt championship lockup: SVG mark + type, so it stays crisp */
.nac-lockup { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.2rem; }
.nac-mark { height: 62px; width: auto; }
.nac-wordmark {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--white);
}
.nac-wordmark .nac-hash { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.nac-wordmark .nac-sub { color: #75f062; letter-spacing: 0.1em; }

.nac-status-pill {
  display: inline-block;
  padding: 0.34rem 0.85rem;
  border-radius: 999px;
  background: #e4281f;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* countdown */
.nac-countdown { margin-top: 1.7rem; }
.cd-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #75f062;
  margin-bottom: 0.5rem;
}
.cd-cells { display: flex; gap: 0.6rem; }
.cd-cell {
  min-width: 74px;
  padding: 0.6rem 0.5rem 0.5rem;
  text-align: center;
  background: rgba(7,18,22,0.72);
  border: 1px solid rgba(255,59,47,0.45);
  border-radius: 8px;
  box-shadow: inset 0 0 22px rgba(228,40,31,0.16);
}
.cd-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.85rem;
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.cd-lbl {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-text);
}

.nac-hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }
.nac-sanction {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.9rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.14);
  max-width: 780px;
}
/* the FIA mark is dark navy artwork — knock it white so it reads on the
   near-black hero */
.nac-sanction img { height: 26px; opacity: 0.9; filter: brightness(0) invert(1); }
.nac-sanction span { font-size: 0.86rem; color: rgba(255,255,255,0.7); }

/* the ACCUS angle band */
.nac-usa {
  background:
    radial-gradient(ellipse 80% 130% at 8% 50%, rgba(200,16,46,0.2), transparent 70%),
    linear-gradient(100deg, var(--surface) 0%, var(--surface-2) 100%);
  border-bottom: 1px solid var(--gray-line);
  padding: 3.2rem 0;
}
.nac-usa-inner {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 2.6rem;
  align-items: center;
}
.nac-usa-copy h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 800; margin: 0.3rem 0 1rem; }
.nac-usa-copy h2 em {
  color: var(--red-neon);
  font-style: italic;
  text-shadow: 0 0 22px rgba(255,36,66,0.45);
}
.nac-usa-copy p { color: var(--gray-text); margin-bottom: 0.9rem; }
.nac-usa-copy p strong { color: var(--ink); }
.nac-usa-copy .btn { margin-top: 0.5rem; }
.nac-usa-facts { display: grid; gap: 0.8rem; }
.nac-fact {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 1.15rem;
  background: rgba(7,12,24,0.6);
  border: 1px solid var(--gray-line);
  border-left: 3px solid var(--red);
  border-radius: 8px;
}
.nac-fact .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--white);
  min-width: 68px;
}
.nac-fact span:last-child { font-size: 0.9rem; color: var(--gray-text); }
.nac-fact-hot { border-left-color: #ff3b2f; background: rgba(228,40,31,0.12); }
.nac-fact-hot .num { font-size: 1.25rem; color: #ff8a7f; }

/* timeline */
.nac-timeline { list-style: none; display: grid; gap: 0; max-width: 940px; margin: 0 auto; }
.nac-step { display: grid; grid-template-columns: 74px 1fr; gap: 1.4rem; }
.nac-step-rail {
  position: relative;
  display: flex;
  justify-content: center;
}
/* the connecting spine, drawn behind the numbered node */
.nac-step-rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -0.2rem;
  width: 2px;
  background: var(--gray-line);
}
.nac-step:last-child .nac-step-rail::before { bottom: auto; height: 34px; }
.nac-step-num {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--gray-line);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--gray-text);
}
.nac-step-body { padding: 0.2rem 0 2.2rem; }
.nac-step-top { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.nac-step-body h3 { font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.nac-step-when {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin: 0.35rem 0 0.5rem;
}
.nac-step-when strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: #ff8a7f;
}
.nac-step-when span { font-size: 0.85rem; color: var(--gray-text); }
.nac-step-body p { font-size: 0.94rem; color: var(--gray-text); }
.nac-art {
  display: inline-block;
  margin-top: 0.55rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5c6b8c;
}
/* stage states */
.nac-step.past .nac-step-num { background: var(--gray-line); color: var(--ink); border-color: var(--gray-line); }
.nac-step.past .nac-step-body { opacity: 0.62; }
.nac-step.now .nac-step-num {
  background: linear-gradient(140deg, #e4281f, #ff3b2f);
  border-color: #ff8a7f;
  color: var(--white);
  box-shadow: 0 0 0 5px rgba(228,40,31,0.18);
}
.nac-now {
  padding: 0.16rem 0.55rem;
  border-radius: 4px;
  background: #ff3b2f;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nac-accus-chip {
  padding: 0.16rem 0.55rem;
  border-radius: 4px;
  border: 1px solid var(--red);
  color: #ff8a7f;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nac-step-accus .nac-step-body {
  border-left: 2px solid rgba(200,16,46,0.5);
  padding-left: 1rem;
  margin-left: -1rem;
}

/* circuits */
.nac-circuits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.1rem;
}
.nac-circuit {
  padding: 1.25rem 1.2rem;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-top: 3px solid var(--gray-line);
  border-radius: 10px;
}
.nac-circuit-stage {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-text);
  margin-bottom: 0.5rem;
}
.nac-circuit h4 { font-size: 1.05rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.nac-circuit-layout {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: #ff8a7f;
  font-weight: 600;
}
.nac-circuit-country {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--gray-line);
  border-radius: 4px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-text);
}
.nac-circuit p { margin-top: 0.6rem; font-size: 0.84rem; color: var(--gray-text); }
.nac-circuit-final {
  border-top-color: #e4281f;
  background: linear-gradient(160deg, rgba(228,40,31,0.16), var(--surface) 60%);
}
.nac-circuit-final h4 { color: var(--white); }

/* platform / car spec strip */
/* top padding clears the "The Package" tag, which sits above the box edge */
.nac-spec { padding: 1.2rem 0 2.4rem; }
.nac-spec-box {
  position: relative;
  padding: 1.5rem 1.7rem 1.4rem;
  background:
    radial-gradient(ellipse 60% 140% at 88% 50%, rgba(117,240,98,0.07), transparent 70%),
    #071216;
  border: 1px solid rgba(117,240,98,0.55);
  border-radius: 12px;
  box-shadow: 0 0 24px rgba(117,240,98,0.12), inset 0 0 30px rgba(117,240,98,0.04);
}
.nac-spec-tag {
  position: absolute;
  top: -0.62rem;
  left: 1.4rem;
  padding: 0.1rem 0.6rem;
  background: var(--bg);
  border: 1px solid rgba(117,240,98,0.55);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #75f062;
}
/* Four exactly-equal sections separated by hairline rules. The values differ
   a lot in length ("iRacing" vs "Porsche 911 GT3 Cup (992.2)"), so on a plain
   gap the short ones left ragged holes and the spacing read as uneven — the
   dividers make the equal quarters visible so it scans as deliberate. */
.nac-spec-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.nac-spec-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.1rem 1.5rem;
  min-width: 0;
}
.nac-spec-item + .nac-spec-item { border-left: 1px solid rgba(117,240,98,0.25); }
/* outer edges lose their inner padding so the first label lines up with the
   box's own padding rather than sitting a step further in than the rest */
.nac-spec-item:first-child { padding-left: 0; }
.nac-spec-item:last-child { padding-right: 0; }
.nac-spec-item .lbl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #75f062;
}
.nac-spec-item .val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--white);
}

/* eligibility */
.nac-elig {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.1rem;
}
.nac-elig-item {
  display: flex;
  gap: 1rem;
  padding: 1.2rem 1.25rem;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
}
.nac-elig-icon {
  flex: 0 0 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(46,204,113,0.16);
  color: var(--green);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
}
.nac-elig-item h4 { font-size: 1rem; font-weight: 700; color: var(--ink); }
.nac-elig-item p { margin-top: 0.3rem; font-size: 0.9rem; color: var(--gray-text); }
.nac-elig-item.flagged { border-color: rgba(255,59,47,0.45); background: rgba(228,40,31,0.09); }
.nac-elig-item.flagged .nac-elig-icon { background: rgba(255,59,47,0.2); color: #ff8a7f; }
.nac-elig-item.accus { border-left: 3px solid var(--red); }

.nac-countries {
  margin-top: 1.4rem;
  padding: 1rem 1.2rem;
  background: var(--surface-2);
  border: 1px solid var(--gray-line);
  border-radius: 10px;
}
.nac-countries summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.nac-countries summary span { color: var(--gray-text); font-size: 0.78rem; }
.nac-country-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.nac-country-list span {
  padding: 0.28rem 0.65rem;
  border: 1px solid var(--gray-line);
  border-radius: 5px;
  font-size: 0.84rem;
  color: var(--gray-text);
}
.nac-country-list span.usa {
  border-color: var(--red);
  background: rgba(200,16,46,0.16);
  color: var(--white);
  font-weight: 700;
}

/* prizes */
.nac-prizes { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.4rem; }
.nac-prize-pool {
  padding: 1.6rem 1.7rem;
  background: linear-gradient(150deg, rgba(228,40,31,0.16), var(--surface) 55%);
  border: 1px solid rgba(255,59,47,0.32);
  border-radius: var(--radius);
}
.nac-pool-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3rem;
  line-height: 1;
  color: var(--white);
}
.nac-prize-pool p { margin-top: 0.5rem; font-size: 0.92rem; color: var(--gray-text); }
.nac-payouts {
  display: grid;
  /* six tracks: podium tiles span two each (3 across); 4th and 5th span two
     each starting at tracks 2 and 4, so they sit centred under the gaps */
  grid-template-columns: repeat(6, 1fr);
  gap: 0.6rem;
  margin-top: 1.3rem;
}
.nac-payout { grid-column: span 2; }
.nac-payout:nth-child(4) { grid-column: 2 / span 2; }
.nac-payout:nth-child(5) { grid-column: 4 / span 2; }
.nac-payout {
  padding: 0.7rem 0.8rem;
  background: rgba(7,12,24,0.55);
  border: 1px solid var(--gray-line);
  border-radius: 8px;
  text-align: center;
}
.nac-payout .pos {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-text);
}
.nac-payout .amt {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--ink);
}
.nac-payout.top { border-color: var(--gold); background: rgba(255,213,32,0.12); }
.nac-payout.top .amt { color: var(--gold); }
.nac-payout.silver { border-color: #c3ccd8; background: rgba(195,204,216,0.10); }
.nac-payout.silver .amt { color: #dde3ea; }
.nac-payout.bronze { border-color: #cd7f32; background: rgba(205,127,50,0.12); }
.nac-payout.bronze .amt { color: #e39a5c; }
.nac-prize-bonus {
  padding: 1.6rem 1.7rem;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.nac-prize-bonus h3 { font-size: 1.3rem; font-weight: 700; color: var(--ink); margin: 0.2rem 0 0.6rem; }
.nac-prize-bonus p { font-size: 0.92rem; color: var(--gray-text); }

/* sporting notes */
.nac-notes {
  display: grid;
  /* fixed 3-up so the six notes fill two clean rows instead of leaving
     two empty cells on a wide screen */
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.nac-note {
  padding: 1.15rem 1.2rem;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
}
.nac-note h4 { font-size: 1rem; font-weight: 700; color: var(--ink); }
.nac-note p { margin-top: 0.35rem; font-size: 0.89rem; color: var(--gray-text); }

/* official links + documents */
.nac-links { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.nac-links-col {
  padding: 1.6rem 1.7rem;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
}
.nac-links-col h3 { font-size: 1.3rem; font-weight: 700; color: var(--ink); margin-bottom: 0.5rem; }
.nac-links-col p { font-size: 0.9rem; color: var(--gray-text); margin-bottom: 1.1rem; }
.nac-link-btns { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.nac-link-btns .btn { font-size: 0.9rem; padding: 0.6em 1.1em; }
.nac-disclaimer {
  margin-top: 1.6rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--gray-line);
  font-size: 0.86rem;
  color: var(--gray-text);
}

/* ---- NAC + newsroom responsive ---- */
@media (max-width: 900px) {
  .nac-usa-inner,
  .nac-prizes,
  .nac-links { grid-template-columns: 1fr; }
  .nlead { min-height: 340px; padding: 1.6rem; }
  .nlead-logo { height: 40px; max-width: 120px; top: 1.2rem; right: 1.2rem; }
  .article-body p:first-child { font-size: 1.08rem; }
}
@media (max-width: 640px) {
  .nac-hero h1 { font-size: clamp(1.7rem, 7vw, 2.3rem); }
  .nac-tagline { font-size: 1rem; letter-spacing: 0.12em; }
  .nac-mark { height: 48px; width: auto; }
  .cd-cell { min-width: 0; flex: 1; padding: 0.5rem 0.25rem 0.4rem; }
  .cd-num { font-size: 1.35rem; }
  .cd-lbl { font-size: 0.62rem; letter-spacing: 0.08em; }
  .nac-step { grid-template-columns: 54px 1fr; gap: 1rem; }
  .nac-step-num { width: 42px; height: 42px; font-size: 0.9rem; }
  .nac-pool-num { font-size: 2.2rem; }
  .section-head-row { align-items: flex-start; }
  .ncard-media { height: 152px; }
}

/* official poster artwork — shown at its native 4:5 portrait aspect */
.nac-posters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
}
.nac-poster {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.nac-poster:hover { transform: translateY(-4px); border-color: rgba(255,59,47,0.55); }
/* posters are 1080x1350 — declaring the ratio reserves the box before the
   lazy image arrives, so the grid doesn't collapse then jump */
.nac-poster img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--surface-2);
}

/* =========================================================
   NAC 2026 — HOME BANNER
   Shares the EXACT clip-path of .member-benefit below it, so
   the two bands are cut from the same diagonal: slide this one
   down and its bottom edge mates flush with that band's top
   edge, forming a clean rectangle. (An opposite/mirrored lean
   was tried first — the edges diverged into a wedge instead of
   nesting.) Sized to match or exceed that band's height.
   ========================================================= */
.nac-strip {
  margin: 3.5rem 0 0;
  padding: 4.6rem 0;
  color: var(--white);
  background:
    repeating-linear-gradient(115deg, transparent 0 60px, rgba(255,255,255,0.035) 60px 62px),
    radial-gradient(ellipse 46% 130% at 84% 46%, rgba(228,40,31,0.4), transparent 70%),
    linear-gradient(100deg, #050d11 0%, #08181e 46%, #0d2831 100%);
  clip-path: polygon(0 2.4rem, 100% 0, 100% calc(100% - 2.4rem), 0 100%);
  border-top: 2px solid rgba(228,40,31,0.45);
}
/* Even seam between the two mated diagonals. Because both bands are cut in
   the same direction their edges already sit 2.4rem apart before any margin,
   so the real seam is (2.4rem + this margin) — currently ~45px. The margin
   stays constant, which is what keeps the seam identical at both ends. */
.nac-strip + .member-benefit-lead { margin-top: 0.4rem; }

.nac-strip-inner {
  display: grid;
  grid-template-columns: 1.5fr 0.85fr;
  gap: 3rem;
  align-items: center;
}
/* grid tracks floor at min-content by default, so a wide child (the 4-up
   stage row) could push a track past the container and overflow */
.nac-strip-inner > * { min-width: 0; }

/* --- left column --- */
.nac-strip-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.nac-strip-mark { height: 66px; width: auto; flex: 0 0 auto; }
.nac-strip-chip {
  display: inline-block;
  padding: 0.24rem 0.75rem;
  border-radius: 999px;
  background: #e4281f;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nac-strip-sanction {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #75f062;
}
.nac-strip-copy h2 {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.08;
  margin: 0 0 0.7rem;
  color: var(--white);
}
.nac-strip-copy h2 em {
  color: #75f062;
  font-style: italic;
  text-shadow: 0 0 22px rgba(117,240,98,0.35);
}
.nac-strip-copy p { color: rgba(255,255,255,0.88); font-size: 1rem; max-width: 640px; }
.nac-strip-sub {
  margin-top: 0.6rem;
  font-size: 0.92rem !important;
  color: rgba(255,255,255,0.68) !important;
}

.nac-strip-facts {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: 1.9rem;
  margin: 1.5rem 0 1.4rem;
}
.nsf { display: flex; flex-direction: column; gap: 0.1rem; }
.nsf .v {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--white);
}
.nsf .k {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

/* compressed four-stage road to Panama */
/* Four equal columns rather than a wrapping flex row: the labels vary enough
   in width that a single flex line overflowed and dropped stage 04 onto its
   own row. Stacking the date under the label keeps all four on one line at
   any column width. */
.nac-strip-stages {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.nac-strip-stages li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "num key" "num date";
  column-gap: 0.45rem;
  padding: 0.5rem 0.65rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 7px;
}
.nss-num {
  grid-area: num;
  align-self: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: #ff6a5c;
}
.nss-k { grid-area: key; }
.nss-d { grid-area: date; }
.nss-k {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
}
.nss-d { font-size: 0.74rem; color: rgba(255,255,255,0.62); }

/* --- right column: the clock is the hero of this band --- */
.nac-strip-side { display: flex; flex-direction: column; gap: 1.1rem; }
.nac-strip-clock {
  padding: 1.5rem 1.4rem 1.3rem;
  text-align: center;
  border: 1px solid rgba(255,59,47,0.5);
  border-radius: 14px;
  background:
    radial-gradient(ellipse 90% 80% at 50% 0%, rgba(228,40,31,0.28), transparent 70%),
    rgba(5,13,17,0.72);
  box-shadow: inset 0 0 40px rgba(228,40,31,0.16), 0 14px 34px rgba(0,0,0,0.4);
}
.nsc-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #75f062;
}
.nsc-big {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.35rem 0 0.15rem;
}
.nsc-big .cd-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 5.4rem;
  line-height: 0.9;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 34px rgba(255,59,47,0.55);
}
.nsc-unit {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ff8a7f;
}
.nsc-sub {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 0.7rem 0 0;
  margin-top: 0.6rem;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.66);
}
.nsc-sub b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.nsc-deadline {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
}
.nac-strip-btns { display: flex; flex-direction: column; gap: 0.6rem; }
.nac-strip-btns .btn { text-align: center; justify-content: center; }

/* --- responsive --- */
@media (max-width: 1080px) {
  .nac-strip-inner { grid-template-columns: 1fr; gap: 2.2rem; }
  .nac-strip-side { max-width: 420px; }
  .nac-strip-copy p { max-width: none; }
}
@media (max-width: 900px) {
  /* shallower cut: a 2.4rem slice off a shorter band eats the content box */
  .nac-strip {
    clip-path: polygon(0 1.4rem, 100% 0, 100% calc(100% - 1.4rem), 0 100%);
    padding: 3.4rem 0;
  }
  /* the seam is (cut + margin); the phone cut is only 1.4rem, so add a touch
     more margin here to land a buffer proportionate to the desktop one */
  .nac-strip + .member-benefit-lead { margin-top: 1.1rem; }
  .nac-strip-facts { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 1.6rem; }
  /* four stage columns need ~435px of min-content — more than the container
     has on a phone, which overflowed the grid track */
  .nac-strip-stages { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .nac-strip-copy h2 { font-size: 1.6rem; }
  .nac-strip-mark { height: 50px; width: auto; }
  .nsc-big .cd-num { font-size: 4rem; }
  .nsc-unit { font-size: 1.2rem; }
  .nsc-sub { gap: 0.7rem; font-size: 0.78rem; }
  .nac-strip-stages li { padding: 0.4rem 0.6rem; }
  .nss-k { font-size: 0.78rem; }
}

/* ---- NAC: English guide to the organizer's Spanish entry form ---- */
.nac-form-guide {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: 1.6rem;
  align-items: start;
}
.nac-form-guide > * { min-width: 0; }
.nac-form-fields { list-style: none; display: grid; gap: 0.7rem; }
.nac-form-fields li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.95rem;
  padding: 1rem 1.15rem;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 3px solid rgba(228,40,31,0.55);
  border-radius: 9px;
}
.nff-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.4;
  color: #ff6a5c;
}
.nff-body h4 { font-size: 1rem; font-weight: 700; color: var(--ink); }
.nff-es {
  display: block;
  margin: 0.15rem 0 0.35rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: #75f062;
}
.nff-body p { font-size: 0.89rem; color: var(--gray-text); }

.nac-form-aside {
  position: sticky;
  top: 92px;
  padding: 1.5rem 1.5rem 1.6rem;
  background: linear-gradient(155deg, rgba(228,40,31,0.14), var(--surface) 58%);
  border: 1px solid rgba(255,59,47,0.3);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.nac-form-aside h3 { font-size: 1.3rem; font-weight: 700; color: var(--ink); }
.nac-form-ready { list-style: none; display: grid; gap: 0.5rem; }
.nac-form-ready li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.92rem;
  color: var(--gray-text);
}
.nac-form-ready li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}
.nac-form-ready strong { color: var(--ink); }
.nac-form-warn {
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--gold);
  background: rgba(255,213,32,0.07);
  border-radius: 0 7px 7px 0;
  font-size: 0.86rem;
  color: var(--gray-text);
}
.nac-form-warn strong { color: var(--ink); }
.nac-form-aside .btn { text-align: center; justify-content: center; }

/* small print under the home banner's register button */
.nac-strip-note {
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.6);
  text-align: center;
}
.nac-strip-note a { color: #75f062; text-decoration: none; border-bottom: 1px solid rgba(117,240,98,0.4); }
.nac-strip-note a:hover { color: var(--white); border-bottom-color: var(--white); }

@media (max-width: 900px) {
  .nac-form-guide { grid-template-columns: 1fr; }
  .nac-form-aside { position: static; }
}

/* ---- NAC: English entry form that prefills the official Spanish one ---- */
.nac-ef {
  padding: 1.8rem 1.9rem 1.6rem;
  background: linear-gradient(155deg, rgba(228,40,31,0.1), var(--surface) 55%);
  border: 1px solid rgba(255,59,47,0.3);
  border-radius: var(--radius);
}
.nac-ef-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.1rem 1.4rem;
}
.nac-ef-field { display: flex; flex-direction: column; gap: 0.35rem; }
.nac-ef-field > span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.nac-ef-field > span b { color: #ff6a5c; }
.nac-ef-field input,
.nac-ef-field select {
  width: 100%;
  padding: 0.62rem 0.8rem;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--ink);
  background: rgba(7,12,24,0.66);
  border: 1px solid var(--gray-line);
  border-radius: 8px;
}
.nac-ef-field input::placeholder { color: #5c6b8c; }
.nac-ef-field input:focus,
.nac-ef-field select:focus {
  outline: none;
  border-color: #ff6a5c;
  box-shadow: 0 0 0 3px rgba(255,59,47,0.16);
}
.nac-ef-field em {
  font-style: normal;
  font-size: 0.79rem;
  color: var(--gray-text);
}
.nac-ef-ages { border: 0; margin-top: 1.3rem; }
.nac-ef-ages legend {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.nac-ef-agerow { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.4rem; }
.nac-ef-age {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.85rem;
  background: rgba(7,12,24,0.6);
  border: 1px solid var(--gray-line);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--gray-text);
}
.nac-ef-age:has(input:checked) {
  border-color: #ff6a5c;
  background: rgba(228,40,31,0.16);
  color: var(--white);
}
.nac-ef-age input { accent-color: #ff3b2f; }
.nac-ef-ages em { font-style: normal; font-size: 0.79rem; color: var(--gray-text); }

.nac-ef-error {
  margin-top: 1rem;
  padding: 0.7rem 0.95rem;
  border-left: 3px solid #ff3b2f;
  background: rgba(228,40,31,0.14);
  border-radius: 0 7px 7px 0;
  font-size: 0.9rem;
  color: #ffb3aa;
}
.nac-ef-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}
.nac-ef-hint { font-size: 0.85rem; color: var(--gray-text); }
.nac-ef-legal {
  margin-top: 1.2rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--gold);
  background: rgba(255,213,32,0.07);
  border-radius: 0 7px 7px 0;
  font-size: 0.87rem;
  color: var(--gray-text);
}
.nac-ef-legal strong { color: var(--ink); }
.nac-ef-legal em { font-style: normal; font-weight: 700; color: var(--ink); }

.nac-ef-done {
  margin-top: 1.1rem;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(46,204,113,0.45);
  background: rgba(46,204,113,0.1);
  border-radius: 10px;
  font-size: 0.92rem;
  color: var(--gray-text);
}
.nac-ef-done strong { display: block; color: var(--ink); margin-bottom: 0.2rem; }
.nac-ef-done em { font-style: normal; font-weight: 700; color: var(--ink); }

/* the Spanish field-by-field walkthrough, now a disclosure */
.nac-form-details { margin-top: 1.6rem; }
.nac-form-details > summary {
  cursor: pointer;
  padding: 0.85rem 1.1rem;
  background: var(--surface-2);
  border: 1px solid var(--gray-line);
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.nac-form-details[open] > summary { margin-bottom: 1.2rem; }

/* small "EN" guide button sitting with the FIA sanction line in the hero */
.nac-sanction { flex-wrap: wrap; }
.nac-guide-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
  padding: 0.42rem 0.85rem;
  border: 1px solid rgba(117,240,98,0.5);
  border-radius: 999px;
  background: rgba(117,240,98,0.1);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #75f062;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.nac-guide-btn:hover { background: #75f062; color: #071216; }
.ngb-flag {
  padding: 0.05rem 0.34rem;
  border-radius: 4px;
  background: rgba(117,240,98,0.25);
  font-size: 0.72rem;
}
.nac-guide-btn:hover .ngb-flag { background: rgba(7,18,22,0.25); }
@media (max-width: 640px) {
  .nac-guide-btn { margin-left: 0; }
}

/* ---- NAC continental map + schedule ---- */
.nac-map { margin-bottom: 1.4rem; }
.nac-map .track-dot { border-color: #ff6a5c; }
/* the grand final gets a bigger, green marker so it reads as the destination */
.nac-map .track-dot.final {
  width: 30px;
  height: 30px;
  background: #75f062;
  border-color: #fff;
  color: #05131a;
  box-shadow: 0 0 0 6px rgba(117,240,98,0.22), 0 0 18px rgba(117,240,98,0.6);
}
.nac-map .track-dot.final span { color: #05131a; font-weight: 800; }
.nac-map .map-inset .track-dot.final { width: 26px; height: 26px; }
.map-legend .final-lg::before { background: #75f062 !important; border-color: #fff !important; }

.stage-pill {
  display: inline-block;
  padding: 0.16rem 0.55rem;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.05);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-text);
  white-space: nowrap;
}
tr.row-final .stage-pill {
  border-color: rgba(117,240,98,0.5);
  background: rgba(117,240,98,0.12);
  color: #75f062;
}
tr.row-final td { background: rgba(117,240,98,0.05); }

/* extra copy the NAC rounds carry in their detail panels */
.rp-detail {
  margin-top: 0.7rem;
  font-size: 0.93rem;
  color: var(--gray-text);
  max-width: 46ch;
}
.rp-settings {
  margin-top: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-left: 2px solid rgba(255,255,255,0.18);
  font-size: 0.84rem;
  color: var(--gray-text);
}

/* ---- NAC race panels: red divider, info left / circuit right ----
   Scoped to #nac-schedule for now so the club series keep their current look
   until we decide to roll this across them too. */
#nac-schedule .race-panel {
  gap: 0;
  align-items: stretch;
  padding: 1.9rem 0;
}
#nac-schedule .rp-info {
  padding: 0 2.2rem 0 2rem;
  align-self: center;
}
#nac-schedule .rp-layout {
  /* the divider: a red rule that fades out top and bottom rather than
     butting hard into the panel edges */
  position: relative;
  padding: 0 2rem 0 2.2rem;
  align-self: stretch;
}
#nac-schedule .rp-layout::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4%;
  bottom: 4%;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(228,40,31,0.85) 18%,
    #ff3b2f 50%,
    rgba(228,40,31,0.85) 82%,
    transparent 100%);
  box-shadow: 0 0 14px rgba(255,59,47,0.5);
}
/* the copy column reads better as a measured block than as full-width text */
#nac-schedule .rp-detail { max-width: none; }

@media (max-width: 900px) {
  /* stacked: the divider becomes a horizontal rule between the two blocks */
  #nac-schedule .race-panel { padding: 1.5rem 0; }
  #nac-schedule .rp-info { padding: 0 1.3rem; }
  /* the club series hoist the diagram above the copy on narrow screens
     (order:-1); here the copy leads, so the divider stays between them
     instead of floating above the whole panel */
  #nac-schedule .rp-layout { order: 0; padding: 1.3rem 1.3rem 0; }
  #nac-schedule .rp-layout::before {
    left: 1.3rem;
    right: 1.3rem;
    top: 0;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg,
      transparent 0%, rgba(228,40,31,0.85) 18%, #ff3b2f 50%,
      rgba(228,40,31,0.85) 82%, transparent 100%);
  }
}

/* ---- responsive for the reworked NAC blocks ---- */
@media (max-width: 1000px) {
  /* three notes across gets cramped before the 900px breakpoint */
  .nac-notes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .nac-spec-box { padding: 1.4rem 1.2rem 1.2rem; }
  .nac-spec-inner { grid-template-columns: repeat(2, 1fr); gap: 1.1rem 0; }
  /* only the right-hand item of each stacked pair keeps a divider */
  .nac-spec-item + .nac-spec-item { border-left: 0; }
  .nac-spec-item:nth-child(even) { border-left: 1px solid rgba(117,240,98,0.25); }
  .nac-spec-item:nth-child(odd) { padding-left: 0.2rem; }
  .nac-spec-item:nth-child(even) { padding-right: 0.2rem; }
  /* four chips wrap to 2x2 rather than shrinking to unreadable logos */
  .fia-chips { gap: 1.1rem; max-width: 460px; }
  .fia-chip { flex: 0 0 calc(50% - 0.55rem); }
  .fia-chip img { height: 56px; max-width: 130px; }
}
@media (max-width: 620px) {
  .nac-notes { grid-template-columns: 1fr; }
  .nac-spec-inner { grid-template-columns: 1fr; gap: 0; }
  /* single column: dividers go horizontal between rows */
  .nac-spec-item, .nac-spec-item:nth-child(even), .nac-spec-item:nth-child(odd) {
    border-left: 0;
    padding: 0.75rem 0.2rem;
  }
  .nac-spec-item + .nac-spec-item { border-top: 1px solid rgba(117,240,98,0.25); }
}

/* ---- The Package: centred cells, each with its own quiet backdrop ---- */
.nac-spec-item {
  position: relative;
  overflow: hidden;
  align-items: center;
  text-align: center;
  justify-content: center;
  min-height: 104px;
}
.nac-spec-item .lbl,
.nac-spec-item .val { position: relative; z-index: 2; }

.ns-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
  /* faint enough that the label carries the cell, but the supplied artwork is
     cleaner than the sketches it replaced and reads at a touch more presence */
  opacity: 0.17;
}
.ns-svg { width: 100%; height: 100%; }


/* ---- supplied artwork: chequered flag + 911 GT3 Cup ---- */
/* Both are raster line art keyed to transparency and already the right green,
   so they need no tinting — only layering and motion. */
.nsc-flag {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 92%;
  aspect-ratio: 176 / 169;
  transform: translate(-50%, -50%);
}
.nsc-pole  { position: absolute; left: 0;      top: 0;       width: 5.68%;  height: 100%; }
.nsc-cloth {
  position: absolute;
  left: 5.11%;
  top: 10.06%;
  width: 94.89%;
  height: 63.31%;
  /* pivots at the pole, so the fabric flaps away from it */
  transform-origin: left center;
  animation: nscWave 2.9s ease-in-out infinite;
}
@keyframes nscWave {
  0%, 100% { transform: skewY(0deg)    scaleY(1);    }
  25%      { transform: skewY(-2.4deg) scaleY(1.045);}
  55%      { transform: skewY(1.9deg)  scaleY(0.97); }
  80%      { transform: skewY(-1deg)   scaleY(1.02); }
}

.nsc-scene { position: absolute; inset: 0; }
.nsc-car {
  position: absolute;
  top: 50%;
  left: 21%;
  width: 76%;
  transform: translateY(-50%);
}
.nsc-body { display: block; width: 100%; }
/* the outer span holds the axle position; the img inside does the spinning,
   so the rotation can never drag the wheel off its axle */
/* Axle positions are the centres of each wheel's 10-fold spoke symmetry —
   found by optimising for "looks identical when rotated by 36°", which is
   literally the condition for spinning without wobble.
   Two earlier attempts used the TYRE ring's centroid instead; that sits ~3px
   away from the spoke centre in this artwork (the arch line contaminates the
   tyre annulus), and rotating about it orbited the rim inside the tyre.
   The disc is cut at r=28.5, in the empty gap between the rim ring (ends 26)
   and the tyre (starts 31), so nothing is clipped. */
.nsc-wheel {
  position: absolute;
  width: 16.54%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.nsc-wr { left: 22.593%; top: 72.394%; }
.nsc-wf { left: 76.951%; top: 72.394%; }
.nsc-wheel img {
  display: block;
  width: 100%;
  animation: nscSpin 1.1s linear infinite;
}
@keyframes nscSpin { to { transform: rotate(360deg); } }

/* speed lines sweeping back past the car (it faces right) */
.nsc-speed { position: absolute; inset: 0; }
.nsc-speed i {
  position: absolute;
  height: 2px;
  border-radius: 2px;
  background: #75f062;
  opacity: 0;
  animation: nscDash 1.35s linear infinite;
}
.nsc-speed i:nth-child(1) { top: 34%; left: 2%; width: 13%; animation-delay: 0s; }
.nsc-speed i:nth-child(2) { top: 48%; left: 0;  width: 19%; animation-delay: 0.3s; }
.nsc-speed i:nth-child(3) { top: 62%; left: 4%; width: 11%; animation-delay: 0.6s; }
.nsc-speed i:nth-child(4) { top: 76%; left: 1%; width: 16%; animation-delay: 0.88s; }
@keyframes nscDash {
  0%   { transform: translateX(26px); opacity: 0; }
  25%  { opacity: 0.95; }
  100% { transform: translateX(-24px); opacity: 0; }
}

/* setup sliders: three rails whose knobs settle at different marks, looping */
.ns-rail path { stroke: #75f062; stroke-width: 2; opacity: 0.55; }
.ns-knob { fill: #75f062; }
.k1 { animation: nsKnob1 7s ease-in-out infinite; }
.k2 { animation: nsKnob2 7s ease-in-out infinite; }
.k3 { animation: nsKnob3 7s ease-in-out infinite; }
@keyframes nsKnob1 { 0%,100%{transform:translateX(28px)} 38%{transform:translateX(84px)} 70%{transform:translateX(52px)} }
@keyframes nsKnob2 { 0%,100%{transform:translateX(72px)} 32%{transform:translateX(34px)} 66%{transform:translateX(96px)} }
@keyframes nsKnob3 { 0%,100%{transform:translateX(50px)} 44%{transform:translateX(100px)} 78%{transform:translateX(30px)} }

/* three pedals; only the clutch (leftmost) travels — the aid that's allowed */
.ns-floor { stroke: #75f062; stroke-width: 2; opacity: 0.4; }
.ns-arm { stroke: #75f062; stroke-width: 2.4; }
.ns-pad { fill: none; stroke: #75f062; stroke-width: 2.4; }
.ns-pedal { transform-origin: 40px 60px; animation: nsClutch 4.5s ease-in-out infinite; }
.ns-pedal-b, .ns-pedal-c { animation: none; opacity: 0.4; }
@keyframes nsClutch {
  0%, 62%, 100% { transform: rotate(0deg); }
  30%, 40%      { transform: rotate(19deg); }
}
@media (prefers-reduced-motion: reduce) {
  .k1, .k2, .k3, .ns-pedal,
  .nsc-cloth, .nsc-wheel img, .nsc-speed i { animation: none !important; }
}

/* The FIA mark ships as dark navy (#1a2c4f) artwork, so on the dark news
   surfaces it reads as a smudge. Knock it white wherever news art appears.
   INDYCAR and NASCAR are handled by using their light variants in data.js —
   their colour bars would be lost to a blanket invert. */
.news-logo-chip img[src*="fia-logo"],
.ncard-logo[src*="fia-logo"],
.nlead-logo[src*="fia-logo"],
.article-logo[src*="fia-logo"] {
  filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(0,0,0,0.5));
}

/* ---- the series logo occupies the tag slot in the news meta row ----
   No chip, no border — the mark sits directly on the card.

   Heights are set PER LOGO rather than one shared value. These marks range
   from 5.4:1 (the iRacing wordmark) to 0.89:1 (the INDYCAR shield), so a
   single height makes the wide ones look enormous and the square ones tiny.
   Each height below is derived from a constant bounding-box AREA, clamped so
   the square marks don't tower over the row — which is what makes them read
   as the same size. Recompute if a logo is swapped. */
.news-tag-logo { display: inline-flex; align-items: center; }
.news-tag-logo img {
  height: 19px;            /* wide wordmarks: iRacing, NASCAR */
  width: auto;
  object-fit: contain;
  display: block;
}
/* the iRacing mark is a SOLID red/blue block, not an open white mark like the
   rest of the row — same box area reads noticeably heavier, so it sits ~15%
   shorter than the other square marks to match them optically */
.news-tag-logo img[src*="iracing-mark"]       { height: 26px; }
.news-tag-logo img[src*="imsa-logo"]          { height: 20px; }
.news-tag-logo img[src*="accus-logo-white"]   { height: 24px; }
.news-tag-logo img[src*="nac-mark"]           { height: 30px; }
.news-tag-logo img[src*="indycar-logo-hero"]  { height: 30px; }
.news-tag-logo img[src*="fia-logo"]           { height: 30px; filter: brightness(0) invert(1); }

/* carousel, lead card and article header run the same marks ~45% larger */
.news-tag-logo.ntl-lg img                          { height: 28px; }
.news-tag-logo.ntl-lg img[src*="iracing-mark"]     { height: 38px; }
.news-tag-logo.ntl-lg img[src*="imsa-logo"]        { height: 29px; }
.news-tag-logo.ntl-lg img[src*="accus-logo-white"] { height: 35px; }
.news-tag-logo.ntl-lg img[src*="nac-mark"]         { height: 44px; }
.news-tag-logo.ntl-lg img[src*="indycar-logo-hero"]{ height: 44px; }
.news-tag-logo.ntl-lg img[src*="fia-logo"]         { height: 44px; }

@media (max-width: 640px) {
  .news-tag-logo.ntl-lg img                          { height: 23px; }
  .news-tag-logo.ntl-lg img[src*="accus-logo-white"] { height: 29px; }
  .news-tag-logo.ntl-lg img[src*="iracing-mark"]     { height: 31px; }
  .news-tag-logo.ntl-lg img[src*="nac-mark"],
  .news-tag-logo.ntl-lg img[src*="indycar-logo-hero"],
  .news-tag-logo.ntl-lg img[src*="fia-logo"]         { height: 36px; }
}

/* shown only when app.js never renders (no JS / unsupported browser) */
.app-fallback { max-width: 40rem; margin: 6rem auto; padding: 1.5rem; text-align: center; color: var(--ink, #111); background: #fff; border: 1px solid #ddd; border-radius: 6px; font-family: system-ui, sans-serif; }

/* ============ PHONE TEXT FLOOR ============
   Labels, pills and badges below 12px are hard to read on a phone. Every
   public-facing rule under 0.75rem is raised to 12px here; desktop keeps
   the tighter sizes. */
@media (max-width: 640px) {
  .cd-lbl, .map-inset .inset-label, .table-title .demo-pill, .tp-status,
  .fia-cat, .map-inset .track-dot span, .rk-badge,
  .class-pill, .nac-accus-chip, .nac-now, .nac-spec-tag, .status-pill,
  .slot-badge, .slot-label, .welcome-car-tag,
  .e-stat .lbl, .fia-next-label, .stat-tile .lbl,
  .auth-divider, .auth-note, .footer-bottom, .map-legend, .nac-art,
  .nac-circuit-country, .nac-circuit-stage, .nac-spec-item .lbl, .ngb-flag,
  .strip-hint, .track-pop .tp-round, .w-stat .lbl, .wr-meta,
  .fia-chip span, .nss-d, .rp-events-label, .show-more, .stage-pill {
    font-size: 0.75rem;
  }
}

/* ============ PHONE TAP TARGETS (#6) ============
   Small inline links get an invisible 44px-tall hit area via a pseudo-element,
   so the layout and underlines stay exactly as designed. */
@media (max-width: 640px) {
  .ncard-read, .ncard-jump, .article-back, .nac-strip-note a { position: relative; }
  .ncard-read::before, .ncard-jump::before, .article-back::before, .nac-strip-note a::before {
    content: "";
    position: absolute;
    left: -4px; right: -4px;
    top: -12px; bottom: -12px;
  }
}

/* ============ SMALL PHONES (#7) ============
   320px-wide screens (iPhone SE 1st gen, budget Android) have a 272px content
   column. Anything with a fixed minimum wider than that was being clipped at
   the right edge. */
@media (max-width: 360px) {
  .fia-series-logo { max-width: 100%; }
  .mb-copy, .offer-copy, .offer-points, .intro-copy, .intro-ctas,
  .join-copy, .join-side, .leader-grid > .leader-col,
  .esports-wide > .container { min-width: 0; }
  .esports-stats { grid-template-columns: 1fr; } /* two stat tiles side by side don't fit in 272px */
  .esports-wide-copy h2 { font-size: 1.9rem; }
  .ngrid, .nac-elig, .fia-grid, .wr-grid, .club-grid, .leader-grid,
  .snews-grid, .nac-ef-grid { grid-template-columns: 1fr; }
}

/* Home leaderboards on phones: multi-driver IMSA entries ("Collins / Rankin /
   Caruso / Rogers") were no-wrap, pushing the table to ~400px and clipping the
   points column at 375px. Let names wrap; the class pill stays on one piece.
   The card also scrolls sideways as a fallback rather than clipping. */
@media (max-width: 640px) {
  .leader-grid table.data td, .leader-grid .driver-name { white-space: normal; }
  .leader-grid .class-pill { white-space: nowrap; }
  .leader-grid .table-card { overflow-x: auto; }
}

/* ============ PHONE HERO KICKER (#13) ============
   The series kicker sits on the rotating photo; on INDYCAR that's red text
   over a red car at 15px. A tight dark shadow lifts it off any photo. */
@media (max-width: 640px) {
  .series-hero .kicker {
    text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.75), 0 0 22px rgba(0,0,0,0.5);
  }
}

@media (max-width: 900px) {
  .fia-series { scroll-margin-top: 86px; }
}

/* ============ PHONE: CENTRED HEADINGS + PATHWAY ORPHAN ============ */
@media (max-width: 900px) {
  /* the heading+button rows (news, etc.) stack and centre like every other
     section head instead of hugging the left edge */
  .section-head-row { flex-direction: column; align-items: center; text-align: center; }
  .section-head-row p { margin: 0.5rem auto 0; }
}
/* The pathway grid is auto-fit minmax(170px): one column below ~408px,
   two from 408-595px, three and up beyond. Only the two-column band leaves
   step 5 orphaned on the left, so only that band centres it. */
@media (min-width: 408px) and (max-width: 595px) {
  .pathway .path-step:nth-child(5):last-child {
    grid-column: 1 / -1;
    width: calc(50% - 0.6rem);
    justify-self: center;
  }
}

/* ============ PHONE: MAP LEGEND BELOW THE MAP ============
   The legend is pinned over the bottom of the map card; on a phone the map
   is short enough that it lands on the Florida markers (NAC, IMSA). Let it
   flow underneath instead. */
@media (max-width: 640px) {
  .track-map { padding-bottom: 1.2rem; }
  .map-legend { position: static; margin-top: 0.9rem; row-gap: 0.5rem; }
}

/* ============ PHONE: MAP MARKERS + POPUP ============
   (kept at the end of the file so it wins over the base marker rules) */
@media (max-width: 640px) {
  /* smaller markers, and venues that sit close together (Florida's three
     rounds) step sideways instead of piling up — the stack-N class is set
     by the map renderer for any marker within 7% of an earlier one */
  .map-canvas .track-dot { width: 21px; height: 21px; }
  .map-canvas .track-dot span { font-size: 0.72rem; }
  .map-canvas .map-inset .track-dot { width: 18px; height: 18px; }
  .nac-map .map-canvas .track-dot.final { width: 25px; height: 25px; }
  .nac-map .map-canvas .map-inset .track-dot.final { width: 24px; height: 24px; }
  /* grouped markers take the phone layout's position (the marker's own
     left/top is an inline style, hence !important); --nx/--ny nudge a marker
     to its true side of the group */
  .map-canvas .track-dot.stacked { left: var(--px) !important; top: var(--py) !important; }

  /* the Italy inset (INDYCAR's Mugello round) is tall; at its desktop
     minimum it covered the Southeast markers on a phone */
  .map-inset:not(.inset-left) { width: 26%; min-width: 72px; left: 37%; right: auto; bottom: 2%; }
  .map-inset:not(.inset-left) .inset-label { top: auto; bottom: 4px; }
}

/* leader lines for phone markers pulled off their true spot (see phoneLayout) */
.map-leaders {
  display: none;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}
.map-leaders line { stroke: rgba(255,255,255,0.6); stroke-width: 1.5; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.track-anchor {
  display: none;
  position: absolute;
  width: 7px; height: 7px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 0 2px rgba(7,12,24,0.7);
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 640px) {
  .map-leaders, .track-anchor { display: block; }
}

/* ============ PHONE PERFORMANCE ============
   backdrop-filter blur is cheap on a laptop and brutal on a phone — a blurred
   STICKY header re-blurs whatever scrolls beneath it on every frame, and
   Dylan saw the home page stall until it caught up. On touch devices the
   glass surfaces become solid; the colour is nudged more opaque so they read
   the same. Transient overlays (drawer, modal backdrops) keep their blur —
   nothing scrolls under them. */
@media (hover: none) and (pointer: coarse) {
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(7, 12, 24, 0.96); }
  .e-stat, .welcome-car-tag, .wr-card, .fia-next, .fia-series-highlight, .series-fact {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .e-stat { background: rgba(7, 12, 24, 0.8); }
}

/* ============ MOBILE SWEEP 17 Sep 2026 ============
   Three sub-12px / thin-target leftovers found by the phone audit. */
.track-dot span { font-size: 12px; }          /* round number inside a map dot */
.drop-flag { font-size: 12px; }               /* "2026" tag in the nav dropdown */
.news-slide-read { display: inline-block; padding: 0.6rem 0; }   /* 26px → 44px tap target */