/* The GT Global Championship — shared site styles (base, nav, footer, components).
   Homepage keeps its own hero/carousel/section CSS inline; this file powers the sub-pages. */

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

    :root {
      /* core palette — Aston Martin green (deep petrol/racing green field + sparing AMR lime spark) */
      --bg: #04100d;            /* AMR green-black */
      --bg-2: #05130e;          /* deep petrol-green section */
      --bg-card: rgba(190,215,200,0.04);
      --border: rgba(190,215,200,0.13);
      --border-light: rgba(130,210,175,0.5);

      --white: #eaf1ed;
      --gray-300: #beccc4;
      --gray-500: #76897f;
      --gray-700: #36453e;

      /* signal colors — --cyan var = everyday AMR petrol-emerald accent (calm, readable, NOT neon) */
      --cyan: #2a8a5c;          /* deep racing green — primary accent */
      --cyan-dim: rgba(42,138,92,0.5);
      --lime: #c5e000;          /* AMR lime-chartreuse — the signature spark, used SPARINGLY */
      --racing: #0a3a2a;        /* deep AMR petrol racing green — structural */
      --green: #c5e000;         /* CONFIRMED / HOME = AMR lime (the prize pops) */
      --amber: #ffce6b;
      /* class colors — the two-class system (lime stays reserved for founding/home/confirmed) */
      /* class hues are deliberately OFF the region rainbow (gold/silver "tier" read) */
      --gt3: #e8b94a;           /* GT3 — the apex (gold) */
      --gt4: #b7c6d2;           /* GT4 — the on-ramp (platinum-silver) */

      --font-heading: 'Chakra Petch', sans-serif;
      --font-body: 'Inter', sans-serif;
      --font-mono: 'Space Mono', monospace;

      --maxw: 1240px;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-body);
      color: var(--gray-300);
      background: var(--bg);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      line-height: 1.6;
    }

    a { color: inherit; text-decoration: none; }
    ::selection { background: var(--cyan); color: var(--white); }

    /* faint global grid + scanline atmosphere */
    body::before {
      content: "";
      position: fixed; inset: 0;
      background-image:
        linear-gradient(rgba(42,138,92,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(42,138,92,0.035) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 80%);
      pointer-events: none;
      z-index: 0;
    }

    .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }

    /* ── shared type ── */
    .eyebrow {
      font-family: var(--font-mono);
      font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
      color: var(--cyan); display: inline-flex; align-items: center; gap: 10px;
    }
    .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--cyan); display: inline-block; }

    h2.section-title {
      font-family: var(--font-heading); font-weight: 700;
      font-size: clamp(34px, 5vw, 62px); line-height: 0.98;
      text-transform: uppercase; color: var(--white); letter-spacing: 0.01em;
      margin: 18px 0 22px;
    }
    .lede { font-size: clamp(17px, 2vw, 20px); color: var(--gray-300); max-width: 760px; }

    section { padding: clamp(70px, 10vw, 130px) 0; position: relative; }

    /* ── top nav (mature series bar) ── */
    header.nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 28px; height: 66px;
      background: rgba(4,16,13,0.62);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid transparent;
      transition: border-color .3s, background .3s;
    }
    header.nav.scrolled { border-bottom-color: var(--border); background: rgba(4,16,13,0.94); }
    .brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-heading); font-weight: 700; color: var(--white); letter-spacing: 0.04em; font-size: 15px; text-transform: uppercase; }
    .brand .mark { height: 34px; width: auto; flex: none; display: block; }
    .brand .brandtext { white-space: nowrap; }
    @media (max-width: 560px) { .brand .brandtext { display: none; } }
    .navlinks { display: flex; gap: 21px; align-items: center; }
    .navlinks a:not(.nav-cta) {
      font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.07em;
      text-transform: uppercase; color: var(--gray-300); transition: color .2s; position: relative; padding: 22px 0;
    }
    .navlinks a:not(.nav-cta):hover, .navlinks a.active { color: var(--white); }
    .navlinks a:not(.nav-cta)::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: 16px; height: 2px; background: var(--lime);
      transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
    }
    .navlinks a:not(.nav-cta):hover::after, .navlinks a.active::after { transform: scaleX(1); }
    .nav-cta {
      font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase;
      color: var(--lime); background: transparent; border: 1px solid var(--lime); padding: 9px 15px; border-radius: 6px;
      transition: background .2s, color .2s, transform .15s;
    }
    .nav-cta:hover { background: var(--lime); color: #04100d; transform: translateY(-1px); }
    .menu-toggle { display: none; background: none; border: none; color: var(--white); font-size: 26px; line-height: 1; cursor: pointer; padding: 6px 4px; }
    @media (max-width: 1120px) {
      .menu-toggle { display: block; }
      .navlinks {
        position: fixed; top: 66px; left: 0; right: 0;
        flex-direction: column; gap: 0; align-items: stretch;
        background: rgba(4,16,13,0.98); backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--border);
        padding: 6px 0;
        transform: translateY(-12px); opacity: 0; pointer-events: none;
        transition: opacity .25s ease, transform .25s ease;
      }
      .nav.open .navlinks { transform: none; opacity: 1; pointer-events: auto; }
      .navlinks a:not(.nav-cta) { padding: 15px 28px; font-size: 14px; min-height: 50px; display: flex; align-items: center; }
      .navlinks a:not(.nav-cta)::after { display: none; }
      .navlinks .nav-cta { margin: 10px 24px 14px; text-align: center; min-height: 50px; display: flex; align-items: center; justify-content: center; }
    }

    /* ── hero carousel (track photography) ── */
    .hero {
      position: relative; height: 100svh; min-height: 600px;
      display: flex; align-items: center; padding-top: 66px; overflow: hidden;
      background: var(--bg);
    }
    .car-track { position: absolute; inset: 0; z-index: 0; }
    .car-slide {
      position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease;
      background-size: cover; background-position: center;
      transform: scale(1.06); animation: none;
    }
    .car-slide.active { opacity: 1; transform: scale(1); transition: opacity 1.1s ease, transform 7s ease-out; }
    .hero-scrim {
      position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background:
        linear-gradient(180deg, rgba(4,16,13,0.35) 0%, rgba(4,16,13,0.55) 55%, rgba(4,16,13,0.92) 100%),
        linear-gradient(90deg, rgba(4,16,13,0.88) 0%, rgba(4,16,13,0.4) 50%, transparent 80%);
    }
    .hero .wrap { z-index: 2; width: 100%; }
    .hero-tag {
      font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--cyan); margin-bottom: 22px; display: flex; align-items: center; gap: 12px;
    }
    .hero-tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); animation: pulse 2.2s infinite; }
    @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
    h1.hero-title {
      font-family: var(--font-heading); font-weight: 700;
      font-size: clamp(42px, 7.5vw, 104px); line-height: 0.92;
      text-transform: uppercase; color: var(--white); letter-spacing: -0.01em;
    }
    h1.hero-title .glow { color: var(--lime); }
    .hero-sub { font-size: clamp(16px, 2vw, 21px); color: var(--gray-300); max-width: 600px; margin: 24px 0 34px; }
    .hero-sub strong { color: var(--white); font-weight: 600; }
    /* per-slide circuit caption */
    .car-cap {
      position: absolute; right: 28px; bottom: 96px; z-index: 3; text-align: right; max-width: 60%;
      opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease;
    }
    .car-cap.show { opacity: 1; transform: none; }
    .car-cap .cc-rd { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); margin-bottom: 6px; display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
    .car-cap .cc-home { color: var(--lime); border: 1px solid rgba(197,224,0,0.5); border-radius: 100px; padding: 2px 9px; font-size: 9px; }
    .car-cap .cc-name { font-family: var(--font-heading); font-weight: 700; font-size: clamp(20px, 2.6vw, 32px); text-transform: uppercase; color: var(--white); line-height: 1; }
    .car-cap .cc-loc { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-300); margin-top: 6px; }
    /* controls */
    .car-dots { position: absolute; left: 0; right: 0; bottom: 38px; z-index: 4; display: flex; gap: 9px; justify-content: center; }
    .car-dot { width: 36px; height: 3px; background: rgba(255,255,255,0.28); border: none; padding: 0; cursor: pointer; border-radius: 2px; transition: background .3s; }
    .car-dot.active { background: var(--lime); }
    .car-arrow {
      position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
      width: 46px; height: 46px; border: 1px solid rgba(255,255,255,0.25); border-radius: 50%;
      background: rgba(4,16,13,0.35); color: var(--white); font-size: 18px; cursor: pointer;
      display: grid; place-items: center; transition: background .2s, border-color .2s;
    }
    .car-arrow:hover { background: rgba(4,16,13,0.7); border-color: var(--cyan); }
    .car-arrow.prev { left: 22px; } .car-arrow.next { right: 22px; }
    @media (max-width: 740px) {
      .car-cap { right: 20px; left: 20px; max-width: none; bottom: 86px; }
      .car-arrow { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .car-slide, .car-slide.active { transition: opacity .4s ease; transform: none; }
    }
    .hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
    .btn {
      font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
      padding: 15px 26px; border-radius: 8px; transition: all .2s; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      min-height: 48px;
    }
    @media (max-width: 480px) {
      .hero-ctas { gap: 12px; }
      .hero-ctas .btn { flex: 1 1 140px; padding: 14px 16px; }
    }
    .btn-primary { background: var(--lime); color: #04100d; box-shadow: 0 0 0 rgba(197,224,0,0); }
    .btn-primary:hover { box-shadow: 0 0 26px rgba(197,224,0,0.35); transform: translateY(-2px); }
    .btn-ghost { border: 1px solid var(--border); color: var(--white); }
    .btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }

    /* telemetry ticker under hero */
    .ticker {
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
      background: rgba(42,138,92,0.02);
    }
    .ticker .wrap { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding: 0; }
    .tk {
      padding: 26px 22px; border-right: 1px solid var(--border);
      display: flex; flex-direction: column; gap: 4px;
    }
    .tk:last-child { border-right: none; }
    .tk .n { font-family: var(--font-heading); font-weight: 700; font-size: clamp(28px, 4vw, 44px); color: var(--white); line-height: 1; }
    .tk .l { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-500); }
    @media (max-width: 760px) {
      .ticker .wrap { grid-template-columns: repeat(2, 1fr); }
      .tk:nth-child(odd) { border-right: 1px solid var(--border); }
      .tk { border-bottom: 1px solid var(--border); }
    }

    /* ── the bet ── */
    .bet { background: var(--bg-2); }
    .bet-quote {
      font-family: var(--font-heading); font-weight: 600;
      font-size: clamp(24px, 3.4vw, 40px); line-height: 1.18; color: var(--white);
      max-width: 1000px; margin: 26px 0;
    }
    .bet-quote em { color: var(--cyan); font-style: normal; }
    .bet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
    .bet-card { border: 1px solid var(--border); border-radius: 12px; padding: 28px; background: var(--bg-card); }
    .bet-card .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); margin-bottom: 12px; }
    .bet-card h3 { font-family: var(--font-heading); font-weight: 700; font-size: 21px; color: var(--white); text-transform: uppercase; margin-bottom: 10px; line-height: 1.1; }
    .bet-card p { font-size: 14px; color: var(--gray-500); }
    @media (max-width: 820px) { .bet-grid { grid-template-columns: 1fr; } }

    /* ── classes GT3 / GT4 ── */
    .classes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 44px; }
    .class-card {
      position: relative; border: 1px solid var(--border); border-radius: 16px; padding: 38px 34px;
      background: linear-gradient(160deg, rgba(42,138,92,0.05), transparent 60%), var(--bg-card);
      overflow: hidden;
    }
    .class-card.gt4 { background: linear-gradient(160deg, rgba(10,79,67,0.06), transparent 60%), var(--bg-card); }
    .class-card.gt3 { border-top: 2px solid var(--gt3); }
    .class-card.gt4 { border-top: 2px solid var(--gt4); }
    .class-card .badge {
      font-family: var(--font-heading); font-weight: 700; font-size: clamp(40px, 6vw, 64px);
      color: var(--white); line-height: 1; letter-spacing: 0.02em;
    }
    .class-card.gt3 .badge { color: var(--gt3); text-shadow: 0 0 26px rgba(232,185,74,0.30); }
    .class-card.gt4 .badge { color: var(--gt4); text-shadow: 0 0 26px rgba(183,198,210,0.26); }
    .class-card .role { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-500); margin: 14px 0 18px; }
    .class-card p { font-size: 15px; color: var(--gray-300); }
    .class-card .meta { display: flex; gap: 22px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
    .class-card .meta div span { display: block; }
    .class-card .meta .mv { font-family: var(--font-heading); font-weight: 700; color: var(--white); font-size: 17px; }
    .class-card .meta .ml { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-500); }
    @media (max-width: 760px) { .classes-grid { grid-template-columns: 1fr; } }

    /* ── 2028 calendar (reused g28- system) ── */
    .cal { background: var(--bg-2); }
    .g28-routewrap{margin:40px 0 8px;padding:8px 0;}
    .g28-route{width:100%;height:auto;display:block;}
    .g28-line{stroke:rgba(42,138,92,0.25);stroke-width:1.5;stroke-dasharray:2 6;stroke-linecap:round;}
    .g28-node{fill:var(--gray-300);}
    .g28-node-c{fill:var(--green);}
    .g28-rt{fill:var(--white);font-size:14px;font-weight:700;text-anchor:middle;font-family:var(--font-heading);letter-spacing:0.04em;}
    .g28-code{fill:var(--cyan);font-size:12px;font-weight:600;text-anchor:middle;letter-spacing:0.08em;font-family:var(--font-mono);}
    .g28-region{fill:var(--gray-700);font-size:11px;font-weight:700;text-anchor:middle;letter-spacing:0.18em;font-family:var(--font-mono);}
    .g28-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px;}
    .g28-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:20px;transition:border-color .3s,transform .3s, box-shadow .3s;}
    .g28-card:hover{border-color:var(--border-light);transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,0.5);}
    .g28-card-c{border-color:rgba(197,224,0,0.4);background:rgba(197,224,0,0.04);}
    .g28-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
    .g28-rd{font-family:var(--font-heading);font-size:18px;color:var(--cyan);letter-spacing:0.04em;}
    .g28-mo{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:0.14em;color:var(--gray-500);}
    .g28-map{height:120px;display:flex;align-items:center;justify-content:center;margin:6px 0 12px;}
    .g28-map svg{height:100%;width:100%;}
    .g28-map svg.trk path{vector-effect:non-scaling-stroke;stroke:#fff;stroke-width:2.6px;}
    .g28-card:hover .g28-map svg.trk path{stroke:var(--cyan);}
    .g28-card-c .g28-map svg.trk path{stroke:var(--green);}
    .g28-name{font-family:var(--font-heading);font-size:18px;line-height:1.05;text-transform:uppercase;color:var(--white);letter-spacing:0.02em;}
    .g28-loc{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--gray-500);margin:4px 0 10px;}
    .g28-stats{display:flex;gap:8px;font-size:12px;font-weight:600;color:var(--gray-300);margin-bottom:8px;}
    .g28-dot{color:var(--gray-700);}
    .g28-sig{font-size:12px;line-height:1.5;color:var(--gray-500);min-height:36px;}
    .g28-tag{display:inline-block;margin-top:12px;font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--gray-500);border:1px solid var(--border);border-radius:100px;padding:4px 10px;}
    .g28-conf{display:inline-block;margin-top:12px;font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--green);border:1px solid rgba(197,224,0,0.4);border-radius:100px;padding:4px 10px;}
    .g28-note{font-size:12px;line-height:1.6;color:var(--gray-500);max-width:880px;margin-top:30px;border-top:1px solid var(--border);padding-top:18px;}
    @media(max-width:860px){.g28-grid{grid-template-columns:repeat(2,1fr);}}
    @media(max-width:560px){.g28-grid{grid-template-columns:1fr;}}

    /* ── road atlanta feature ── */
    .home { position: relative; overflow: hidden; }
    .home-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: center; }
    .home-media {
      aspect-ratio: 4/3; border-radius: 16px; border: 1px solid var(--border);
      position: relative; overflow: hidden; background: #0c1410;
    }
    .home-media > picture img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .home-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(180deg, rgba(4,16,13,0.05) 35%, rgba(4,16,13,0.88)); }
    .home-media__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 22px 24px; display: flex; flex-direction: column; gap: 11px; align-items: flex-start; }
    .home-media__cap img.dcra { width: min(52%, 210px); height: auto; opacity: 0.96; }
    .home-media__cap span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-300); }
    .home-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); border: 1px solid rgba(197,224,0,0.4); border-radius: 100px; padding: 6px 14px; margin-bottom: 22px; }
    .home-pill .d { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
    @media (max-width: 860px) { .home-inner { grid-template-columns: 1fr; } }

    /* ── how it's funded ── */
    .funded { background: var(--bg-2); }
    .funded-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; counter-reset: step; }
    .fstep { border: 1px solid var(--border); border-radius: 12px; padding: 28px; background: var(--bg-card); position: relative; }
    .fstep::before { counter-increment: step; content: "0" counter(step); font-family: var(--font-mono); font-size: 12px; color: var(--cyan); letter-spacing: 0.1em; }
    .fstep h3 { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; color: var(--white); font-size: 19px; margin: 14px 0 10px; line-height: 1.1; }
    .fstep p { font-size: 14px; color: var(--gray-500); }
    @media (max-width: 820px) { .funded-grid { grid-template-columns: 1fr; } }

    /* ── cinematic film band (full-bleed breather) ── */
    .filmband {
      position: relative; min-height: 60vh; display: flex; align-items: center;
      background-image:
        linear-gradient(90deg, rgba(4,16,13,0.85) 0%, rgba(4,16,13,0.45) 60%, rgba(4,16,13,0.7) 100%),
        url("/images/band-machinery.jpg");
      background-size: cover; background-position: center; padding: 0;
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    }
    .filmband .wrap { z-index: 1; }
    .filmband .fb-ey { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--lime); margin-bottom: 16px; }
    .filmband h2 { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; font-size: clamp(30px, 5.5vw, 64px); line-height: 0.98; color: var(--white); max-width: 760px; }
    .filmband p { margin-top: 18px; max-width: 540px; color: var(--gray-300); font-size: 17px; }

    /* ── faq ── */
    .faq-list { margin-top: 40px; border-top: 1px solid var(--border); }
    .faq-item { border-bottom: 1px solid var(--border); padding: 26px 0; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; }
    .faq-item h3 { font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; color: var(--white); font-size: 20px; line-height: 1.1; letter-spacing: 0.01em; }
    .faq-item p { color: var(--gray-300); font-size: 15px; }
    .faq-item p a { color: var(--cyan); }
    @media (max-width: 720px) { .faq-item { grid-template-columns: 1fr; gap: 12px; } }

    /* ── media gallery band ── */
    .gallery { background: var(--bg-2); }
    .gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 36px; }
    .gal-grid figure { position: relative; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
    .gal-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
    .gal-grid figure:hover img { transform: scale(1.05); }
    .gal-grid figcaption { position: absolute; left: 14px; bottom: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); text-shadow: 0 1px 8px rgba(0,0,0,0.8); z-index: 1; }
    .gal-grid figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(4,16,13,0.7) 100%); }
    @media (max-width: 700px) { .gal-grid { grid-template-columns: 1fr 1fr; } }

    /* ── closing cta ── */
    .close { text-align: center; }
    .close-bg {
      position: absolute; inset: 0; z-index: 0;
      background-image:
        radial-gradient(70% 90% at 50% 120%, rgba(42,138,92,0.18), transparent 60%),
        linear-gradient(180deg, rgba(4,16,13,0.78), rgba(4,16,13,0.92)),
        url("/images/closing-bg.jpg");
      background-size: cover; background-position: center;
    }
    .close .wrap { z-index: 1; }
    .close h2 { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; font-size: clamp(34px, 6vw, 78px); color: var(--white); line-height: 0.95; margin-bottom: 22px; }
    .close p { max-width: 620px; margin: 0 auto 36px; color: var(--gray-300); font-size: 18px; }

    /* ── footer ── */
    footer { border-top: 1px solid var(--border); padding: 56px 0 40px; }
    footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 28px; }
    footer .fcol h3 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 14px; }
    footer .fcol a, footer .fcol p { display: block; font-size: 14px; color: var(--gray-300); margin-bottom: 9px; }
    footer .fcol a:hover { color: var(--cyan); }
    .foot-brand { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; color: var(--white); font-size: 18px; letter-spacing: 0.04em; margin-bottom: 12px; }
    .foot-legal { font-size: 12px; color: #8a978f; margin-top: 30px; }
    .foot-legal a { color: #aeb9b2; }
    .foot-legal a, main p a, .lede a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

    /* scroll reveal — progressive enhancement: only hidden when JS is active */
    .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
    .js .reveal.in { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      .js .reveal { opacity: 1; transform: none; transition: none; }
      .hero-tag .dot { animation: none; }
    }
  
/* ============================================================
   SUB-PAGE COMPONENTS (schedule / results / drivers / teams / news)
   ============================================================ */

/* compact page hero */
.page-hero {
  position: relative; padding: 150px 0 64px; overflow: hidden;
  border-bottom: 1px solid var(--border); background: var(--bg-2);
}
.page-hero.photo::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center; opacity: 0.5;
}
.page-hero.ra::before { background-image: linear-gradient(90deg, rgba(4,16,13,0.9), rgba(4,16,13,0.4) 60%, transparent), linear-gradient(180deg, transparent 40%, rgba(4,16,13,0.95)), url("/images/tracks/road-atlanta.jpg"); opacity: 1; }
.page-hero.grid::before { background-image: linear-gradient(90deg, rgba(4,16,13,0.92), rgba(4,16,13,0.45) 60%, transparent), linear-gradient(180deg, transparent 35%, rgba(4,16,13,0.96)), url("/images/band-machinery.jpg"); opacity: 1; }
.page-hero.spa::before { background-image: linear-gradient(90deg, rgba(4,16,13,0.9), rgba(4,16,13,0.4) 60%, transparent), linear-gradient(180deg, transparent 40%, rgba(4,16,13,0.95)), url("/images/tracks/spa.jpg"); opacity: 1; }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 {
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase;
  font-size: clamp(38px, 6vw, 76px); line-height: 0.95; color: var(--white); margin: 14px 0 14px; letter-spacing: 0.01em;
}
.page-hero p { color: var(--gray-300); max-width: 640px; font-size: clamp(16px,2vw,19px); }
.crumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-500); }
.crumb a { color: var(--cyan); }

/* generic build-phase notice */
.notice {
  display: flex; gap: 14px; align-items: flex-start; margin: 0 0 40px;
  border: 1px solid var(--border); border-left: 3px solid var(--lime); border-radius: 10px;
  background: rgba(197,224,0,0.04); padding: 18px 22px;
}
.notice .ico { color: var(--lime); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; flex: none; padding-top: 2px; }
.notice p { color: var(--gray-300); font-size: 15px; margin: 0; min-width: 0; }
.notice strong { color: var(--white); }
/* mobile: the long monospace label can't share a row — stack it */
@media (max-width: 600px) {
  .notice { flex-direction: column; gap: 8px; }
  .notice .ico { padding-top: 0; }
}

/* ── schedule ── */
.sched { display: flex; flex-direction: column; gap: 12px; }
.round {
  display: grid; grid-template-columns: 120px 1fr auto; gap: 26px; align-items: center;
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card);
  padding: 22px 26px; transition: border-color .25s, transform .25s;
}
.round:hover { border-color: var(--border-light); transform: translateX(3px); }
.round.home { border-color: rgba(197,224,0,0.35); background: rgba(197,224,0,0.035); }
.round .rd-no { display: flex; flex-direction: column; gap: 2px; }
.round .rd-no b { font-family: var(--font-heading); font-weight: 700; font-size: 34px; color: var(--cyan); line-height: 1; }
.round.home .rd-no b { color: var(--lime); }
.round .rd-no span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-500); }
.round .rd-main h3 { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; font-size: 22px; color: var(--white); line-height: 1.05; }
.round .rd-main .rd-loc { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); margin: 5px 0 8px; }
.round .rd-main .rd-spec { display: flex; gap: 8px; font-size: 13px; color: var(--gray-300); }
.round .rd-main .rd-spec span.s { color: var(--gray-700); }
.round .rd-side { text-align: right; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.pill { display: inline-block; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 100px; padding: 5px 12px; }
.pill.confirmed { color: var(--lime); border: 1px solid rgba(197,224,0,0.45); }
.pill.provisional { color: var(--gray-300); border: 1px solid var(--border); }
.pill.aspirational { color: var(--gray-500); border: 1px dashed rgba(190,215,200,0.28); }
.pill.finale { color: #04100d; background: var(--lime); border: 1px solid var(--lime); }
/* "extended summer break" divider in the schedule list */
.sched-break { display: flex; align-items: center; gap: 14px; padding: 4px 2px; color: var(--gray-700); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
.sched-break::before, .sched-break::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.rd-res { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-500); }
.rd-res a { color: var(--cyan); }
@media (max-width: 720px) {
  .round { grid-template-columns: 70px 1fr; gap: 16px; }
  .round .rd-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; text-align: left; border-top: 1px solid var(--border); padding-top: 12px; }
  .round .rd-no b { font-size: 26px; }
}

/* ── results empty state + table ── */
.empty {
  text-align: center; border: 1px dashed var(--border); border-radius: 16px; padding: 64px 28px; background: var(--bg-card);
}
.empty .big { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; font-size: clamp(24px,3.4vw,38px); color: var(--white); line-height: 1.05; margin-bottom: 14px; }
.empty p { color: var(--gray-500); max-width: 520px; margin: 0 auto 24px; }
.rtable { width: 100%; border-collapse: collapse; margin-top: 8px; }
.rtable th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-500); text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.rtable td { padding: 16px; border-bottom: 1px solid var(--border); color: var(--gray-300); font-size: 14px; }
.rtable td.pos { font-family: var(--font-heading); color: var(--white); font-size: 18px; width: 60px; }
.rtable td.dash { color: var(--gray-700); }
/* mobile: tighten cell padding so the 5-column table fits the viewport */
@media (max-width: 600px) {
  .rtable th { padding: 11px 8px; font-size: 10px; letter-spacing: 0.08em; }
  .rtable td { padding: 12px 8px; font-size: 13px; }
  .rtable td.pos { width: 34px; font-size: 16px; }
}

/* ── rosters (drivers / teams) ── */
.roster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 8px; }
.seat {
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); padding: 26px 24px;
  display: flex; flex-direction: column; gap: 12px; min-height: 200px; transition: border-color .25s;
}
.seat:hover { border-color: var(--border-light); }
.seat .av { width: 52px; height: 52px; border-radius: 12px; border: 1px solid var(--border); display: grid; place-items: center; color: var(--gray-700); font-family: var(--font-heading); font-size: 22px; }
.seat .lab { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lime); }
.seat h3 { font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; color: var(--white); font-size: 19px; line-height: 1.05; margin-top: auto; }
.seat p { font-size: 13px; color: var(--gray-500); }
@media (max-width: 820px) { .roster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .roster { grid-template-columns: 1fr; } }

/* ── news ── */
.news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.post { border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); padding: 30px 28px; transition: border-color .25s, transform .25s; }
.post:hover { border-color: var(--border-light); transform: translateY(-2px); }
.post .meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); margin-bottom: 12px; }
.post h3 { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; color: var(--white); font-size: 23px; line-height: 1.08; margin-bottom: 12px; }
.post p { color: var(--gray-300); font-size: 15px; }
.post.feature { grid-column: 1 / -1; }
@media (max-width: 720px) { .news-grid { grid-template-columns: 1fr; } }

/* page section spacing helper */
.page-body { padding: clamp(56px,8vw,96px) 0; }

/* ── news: media-first video cards ── */
.vid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vid {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--bg-card);
  transition: border-color .25s, transform .25s;
}
.vid:hover { border-color: var(--border-light); transform: translateY(-3px); }
.vid .thumb {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  background: linear-gradient(150deg, rgba(42,138,92,0.10), transparent 60%), #0b1a16;
  display: grid; place-items: center;
}
.vid .thumb img, .vid .thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid .thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(4,16,13,0.55)); pointer-events: none; }
.vid .play {
  position: absolute; z-index: 1; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(4,16,13,0.55); border: 1.5px solid rgba(255,255,255,0.55);
  display: grid; place-items: center; transition: background .2s, border-color .2s, transform .2s;
}
.vid:hover .play { background: var(--lime); border-color: var(--lime); transform: scale(1.06); }
.vid .play svg { width: 18px; height: 18px; fill: #fff; margin-left: 3px; }
.vid:hover .play svg { fill: #04100d; }
.vid .dur { position: absolute; z-index: 1; right: 10px; bottom: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--white); background: rgba(4,16,13,0.7); padding: 3px 8px; border-radius: 4px; }
.vid .cap { padding: 14px 16px 18px; }
.vid .cap .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 7px; }
.vid .cap h3 { font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--white); }
.vid.feature { grid-column: span 2; }
.vid.feature .cap h3 { font-size: 16px; }
@media (max-width: 860px) { .vid-grid { grid-template-columns: 1fr 1fr; } .vid.feature { grid-column: 1 / -1; } }
@media (max-width: 560px) { .vid-grid { grid-template-columns: 1fr; } }

/* ============================================================
   PARTNER / SPONSOR + IMAGE-PLACEHOLDER SYSTEM
   ============================================================ */

/* reusable image placeholder — communicates "real asset goes here" on-brand */
.ph {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background:
    repeating-linear-gradient(135deg, rgba(42,138,92,0.05) 0 12px, transparent 12px 24px),
    linear-gradient(180deg, #0b1a16, #07120f);
  border: 1px dashed rgba(42,138,92,0.3); border-radius: 12px; color: var(--gray-500);
  text-align: center; padding: 18px; overflow: hidden;
}
.ph .ph-ico { font-size: 22px; color: var(--cyan); opacity: 0.8; }
.ph .ph-lab { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-500); line-height: 1.4; }
.ph.ratio-1 { aspect-ratio: 1/1; }
.ph.ratio-43 { aspect-ratio: 4/3; }
.ph.ratio-169 { aspect-ratio: 16/9; }
.ph.ratio-32 { aspect-ratio: 3/2; }

/* big opportunity stat band */
.stat-band { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.stat-cell { padding: 14px 22px; border-right: 1px solid var(--border); }
.stat-cell:last-child { border-right: none; }
.stat-cell .sv { font-family: var(--font-heading); font-weight: 700; font-size: clamp(30px, 4vw, 50px); color: var(--white); line-height: 1; }
.stat-cell .sv em { color: var(--cyan); font-style: normal; }
.stat-cell .sl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-500); margin-top: 8px; }
@media (max-width: 760px) { .stat-row { grid-template-columns: 1fr 1fr; } .stat-cell { border-bottom: 1px solid var(--border); } .stat-cell:nth-child(odd){border-right:1px solid var(--border);} }

/* partnership tiers */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 38px; }
.tier { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); padding: 28px 24px; transition: border-color .25s, transform .25s; }
.tier:hover { border-color: var(--border-light); transform: translateY(-3px); }
.tier.featured { border-color: rgba(197,224,0,0.4); background: rgba(197,224,0,0.035); }
.tier .tt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); margin-bottom: 6px; }
.tier.featured .tt { color: var(--lime); }
.tier h3 { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; color: var(--white); font-size: 22px; line-height: 1; margin-bottom: 14px; }
.tier ul { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.tier li { font-size: 13px; color: var(--gray-300); padding-left: 18px; position: relative; }
.tier li::before { content: "›"; position: absolute; left: 0; color: var(--cyan); }
.tier .avail { margin-top: auto; padding-top: 18px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-500); }
@media (max-width: 1120px) { .tiers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .tiers { grid-template-columns: 1fr; } }

/* founding-partner logo wall (placeholders) */
.logo-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 30px; }
.logo-slot { aspect-ratio: 3/2; border: 1px dashed rgba(42,138,92,0.28); border-radius: 10px; display: grid; place-items: center; background: rgba(42,138,92,0.025); text-align: center; padding: 10px; }
.logo-slot span { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-700); line-height: 1.4; }
@media (max-width: 860px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { .logo-wall { grid-template-columns: repeat(2, 1fr); } }

/* two-col pitch block */
.pitch { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.pitch + .pitch { margin-top: 70px; }
.pitch.rev .pitch-media { order: -1; }
@media (max-width: 820px) { .pitch { grid-template-columns: 1fr; gap: 28px; } .pitch.rev .pitch-media { order: 0; } }

/* homepage founding-partners strip */
.partners-strip { background: var(--bg-2); }

/* ── circuit pages ── */
.page-hero.cimg { position: relative; overflow: hidden; }
.page-hero.cimg::before { content: ""; position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center;
  background-image: linear-gradient(90deg, rgba(4,16,13,0.9), rgba(4,16,13,0.45) 60%, transparent), linear-gradient(180deg, transparent 40%, rgba(4,16,13,0.95)), var(--hero-img); }
.page-hero .rd-badge { display: inline-flex; gap: 10px; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); margin-bottom: 10px; }
.page-hero .rd-badge .home { color: var(--lime); border: 1px solid rgba(197,224,0,0.5); border-radius: 100px; padding: 2px 9px; font-size: 9px; }
.circuit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.circuit-map { background: var(--bg-2); border: 1px solid var(--border); border-radius: 16px; padding: 44px; display: flex; align-items: center; justify-content: center; min-height: 300px; }
.circuit-map svg { width: 100%; max-width: 560px; height: auto; }
.circuit-map svg path { stroke: #fff; stroke-width: 2.4px; vector-effect: non-scaling-stroke; fill: none; }
.circuit-map.home svg path { stroke: var(--lime); }
.cspec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0 8px; }
.cspec .c { border: 1px solid var(--border); border-radius: 12px; padding: 18px; background: var(--bg-card); }
.cspec .cv { font-family: var(--font-heading); font-weight: 700; color: var(--white); font-size: 26px; line-height: 1; }
.cspec .cl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-500); margin-top: 6px; }
.csig { font-size: 17px; color: var(--gray-300); line-height: 1.5; margin: 18px 0; }
.round-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 54px; border-top: 1px solid var(--border); padding-top: 26px; }
.round-nav a { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gray-300); max-width: 45%; }
.round-nav a:hover { color: var(--cyan); }
.round-nav .rn-lab { color: var(--gray-500); display: block; font-size: 10px; margin-bottom: 5px; }
.round-nav .nxt { text-align: right; margin-left: auto; }
@media (max-width: 820px) { .circuit-grid { grid-template-columns: 1fr; gap: 26px; } .circuit-map { min-height: 220px; padding: 30px; } }

/* ── accessibility ── */
.skip { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--lime); color: #04100d; padding: 11px 18px; border-radius: 0 0 8px 0; font-weight: 700; font-size: 13px; }
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 2px; }
.navlinks a:focus-visible { outline-offset: -6px; }

/* ── about: roadmap timeline ── */
.timeline { margin-top: 42px; }
.tl-item { position: relative; padding: 0 0 38px 40px; border-left: 1px solid var(--border); }
.tl-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; left: -7px; top: 3px; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 2px solid var(--cyan); }
.tl-item.now::before { background: var(--lime); border-color: var(--lime); box-shadow: 0 0 12px rgba(197,224,0,0.6); }
.tl-head { display: flex; align-items: baseline; gap: 12px; }
.tl-yr { font-family: var(--font-heading); font-weight: 700; color: var(--white); font-size: 24px; line-height: 1; }
.tl-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); }
.tl-item.now .tl-tag { color: var(--lime); }
.tl-h { font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; color: var(--white); font-size: 18px; margin: 12px 0 6px; }
.tl-item p { color: var(--gray-500); font-size: 14px; max-width: 580px; }

/* ── 404 ── */
.e404 { min-height: 84vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 90px 24px 40px; position: relative; }
.e404 .num { font-family: var(--font-heading); font-weight: 700; font-size: clamp(90px, 20vw, 230px); line-height: 0.85; color: var(--white); letter-spacing: -2px; }
.e404 .num em { color: var(--lime); font-style: normal; }
.e404 h1 { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; font-size: clamp(24px, 4vw, 40px); color: var(--white); margin: 18px 0 12px; }
.e404 p { color: var(--gray-300); max-width: 480px; margin: 0 auto 30px; }

/* ── news 'coming soon' state ── */
.vid .soon { position: absolute; top: 10px; left: 10px; z-index: 1; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime); background: rgba(4,16,13,0.7); border: 1px solid rgba(197,224,0,0.4); padding: 4px 9px; border-radius: 100px; }
.vid { cursor: default; }

/* ── drivers roster (TPS founding members -> Championship drivers) ── */
.drivers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 8px; }
.driver { border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); overflow: hidden; transition: border-color .25s, transform .25s; }
.driver:hover { border-color: var(--border-light); transform: translateY(-3px); }
.driver.founding { border-color: rgba(197,224,0,0.4); background: rgba(197,224,0,0.03); }
.driver .portrait { position: relative; aspect-ratio: 1/1; overflow: hidden; background: linear-gradient(160deg, rgba(42,138,92,0.10), transparent 60%), #0b1a16; }
.driver .portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.driver .portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(4,16,13,0.85)); pointer-events: none; }
.driver .no { position: absolute; left: 16px; bottom: 12px; z-index: 1; font-family: var(--font-heading); font-weight: 700; font-size: 44px; line-height: 1; color: var(--white); letter-spacing: -1px; text-shadow: 0 2px 18px rgba(0,0,0,0.7); }
.driver.founding .no { color: var(--lime); }
.driver .tag { position: absolute; right: 14px; top: 14px; z-index: 1; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime); background: rgba(4,16,13,0.7); border: 1px solid rgba(197,224,0,0.4); padding: 4px 9px; border-radius: 100px; }
.driver .open { position: absolute; inset: 0; display: grid; place-items: center; gap: 8px; align-content: center;
  background: repeating-linear-gradient(135deg, rgba(42,138,92,0.05) 0 12px, transparent 12px 24px); }
.driver .open .oh { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; color: var(--gray-500); font-size: 15px; letter-spacing: 0.04em; }
.driver .body { padding: 16px 18px 20px; }
.driver .body h3 { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; color: var(--white); font-size: 19px; line-height: 1; margin-bottom: 7px; }
.driver .body .role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); }
.driver .body .role .c { color: var(--cyan); }
@media (max-width: 820px) { .drivers-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .drivers-grid { grid-template-columns: 1fr; } }

/* ── teams roster (founding entries; logos on light plates) ── */
.teams-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 8px; }
.team { border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); overflow: hidden; transition: border-color .25s, transform .25s; }
.team:hover { border-color: var(--border-light); transform: translateY(-3px); }
.team.founding { border-color: rgba(197,224,0,0.4); background: rgba(197,224,0,0.03); }
.team .plate { position: relative; aspect-ratio: 3/2; display: grid; place-items: center; padding: 26px; background: #eef1f4; }
.team .plate img { max-width: 84%; max-height: 64%; object-fit: contain; display: block; }
.team .tag { position: absolute; right: 12px; top: 12px; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #04100d; background: var(--lime); padding: 4px 9px; border-radius: 100px; }
.team .open { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 8px; background: repeating-linear-gradient(135deg, rgba(42,138,92,0.05) 0 12px, transparent 12px 24px); }
.team .open .oh { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; color: var(--gray-500); font-size: 15px; letter-spacing: 0.04em; }
.team .open .onum { font-family: var(--font-heading); font-weight: 700; color: var(--gray-700); font-size: 30px; line-height: 1; }
.team .body { padding: 16px 18px 20px; }
.team .body h3 { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; color: var(--white); font-size: 19px; line-height: 1; margin-bottom: 7px; }
.team .body .role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); }
.team .body .role .c { color: var(--cyan); }
@media (max-width: 820px) { .teams-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .teams-grid { grid-template-columns: 1fr; } }

/* ── country flag chip (schedule / circuits / results) ── */
img.flag { display: inline-block; width: 1.3em; height: auto; border-radius: 2px; vertical-align: -0.16em;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35); flex: none; }

/* ── class chip + class colors (GT3 / GT4) ── */
.clsbadge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-weight: 700;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cls,#fff);
  border: 1px solid var(--cls,#fff); border-radius: 100px; padding: 4px 11px; }
.clsbadge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cls,#fff);
  box-shadow: 0 0 8px var(--cls,#fff); }
.cls-gt3 { --cls: var(--gt3); } .cls-gt4 { --cls: var(--gt4); }

/* ── "How it works" 3-step band ── */
.how3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 10px 0 8px; }
.how3 .step { border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); padding: 24px 22px; position: relative; }
.how3 .step .n { font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--cyan); letter-spacing: 0.06em; }
.how3 .step h3 { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; color: var(--white); font-size: 18px; line-height: 1.05; margin: 10px 0 9px; }
.how3 .step p { font-size: 13.5px; color: var(--gray-300); line-height: 1.55; margin: 0; }
.how3 .step .picks { display: flex; gap: 8px; margin-top: 13px; flex-wrap: wrap; }
@media (max-width: 760px) { .how3 { grid-template-columns: 1fr; } }

/* ── The Grid — class-grouped entry list ── */
.gridclass { margin-top: 40px; }
.gc-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; border-left: 3px solid var(--cls,#fff); padding: 2px 0 2px 16px; }
.gc-head .gc-cls { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; font-size: clamp(26px,4vw,38px); line-height: 0.95; color: var(--cls,#fff); letter-spacing: -0.5px; }
.gc-head .gc-role { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-300); }
.gc-head .gc-count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); }
.gentries { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 18px; }
.gentry { position: relative; border: 1px solid var(--border); border-top: 2px solid var(--cls,var(--border)); border-radius: 14px; background: var(--bg-card); overflow: hidden; transition: border-color .25s, transform .25s; }
.gentry:hover { transform: translateY(-2px); }
.gentry .ge-port { position: relative; aspect-ratio: 1/1; overflow: hidden; background: linear-gradient(160deg, rgba(42,138,92,0.10), transparent 60%), #0b1a16; }
.gentry .ge-port img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gentry .ge-port::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(4,16,13,0.85)); pointer-events: none; }
.gentry .ge-no { position: absolute; left: 16px; bottom: 12px; z-index: 1; font-family: var(--font-heading); font-weight: 700; font-size: 42px; line-height: 1; color: var(--white); letter-spacing: -1px; text-shadow: 0 2px 18px rgba(0,0,0,0.7); }
.gentry .clsbadge { position: absolute; left: 14px; top: 14px; z-index: 1; background: rgba(4,16,13,0.66); }
.gentry .ge-tag { position: absolute; right: 14px; top: 14px; z-index: 1; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime); background: rgba(4,16,13,0.7); border: 1px solid rgba(197,224,0,0.4); padding: 4px 9px; border-radius: 100px; }
.gentry .ge-open { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 6px; background: repeating-linear-gradient(135deg, rgba(190,215,200,0.045) 0 12px, transparent 12px 24px); }
.gentry .ge-open .oh { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; color: var(--gray-500); font-size: 15px; letter-spacing: 0.04em; }
/* open-seat cards read as invitation slots, not unfinished cards — filled entries dominate */
.gentry:has(.ge-open) { border: 1px dashed rgba(190,215,200,0.22); border-top: 1px dashed rgba(190,215,200,0.22); background: transparent; }
.gentry:has(.ge-open):hover { transform: none; border-color: rgba(197,224,0,0.4); }
.gentry.founding { border-color: rgba(197,224,0,0.4); }
.gentry.founding .ge-no { color: var(--lime); }
.gentry .ge-body { padding: 15px 18px 18px; }
.gentry .ge-body h3 { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; color: var(--white); font-size: 18px; line-height: 1; margin-bottom: 8px; }
.gentry .ge-team { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-500); }
.gentry .ge-team .c { color: var(--cyan); }
.gentry .ge-team img { width: 18px; height: 18px; object-fit: contain; border-radius: 3px; background: #eef1f4; padding: 1px; }
@media (max-width: 820px) { .gentries { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .gentries { grid-template-columns: 1fr; } }

/* sebring + bathurst maps run past their viewBox — scale down to fit the box */
.circuit-map.sm svg { max-width: 430px; }
.g28-map.sm svg { transform: scale(0.84); }