/* ═══════════════════════════════════════════════════════════════
   FURRED AND FEATHERS RACING

   The two cars carry the two halves of the team name.
   #337 runs fox red. #338 runs feather blue. Anything that
   belongs to a car gets that car's accent and a left spine,
   so you can tell them apart at a glance even when they're
   racing in different splits.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Surfaces */
  --ink:        #08080b;
  --panel:      #0f0f15;
  --panel-2:    #15151e;
  --panel-3:    #1c1c27;
  --line:       rgba(255, 255, 255, 0.07);
  --line-soft:  rgba(255, 255, 255, 0.04);

  /* Type */
  --cream:  #f4ead9;
  --bone:   #cec6b9;
  --slate:  #8b8598;
  --dim:    #57536a;

  /* Car 337 — fur */
  --fur:        #d8501c;
  --fur-bright: #ff7a45;
  --fur-deep:   #7a1800;
  --fur-glow:   rgba(216, 80, 28, 0.30);

  /* Car 338 — feather */
  --feather:        #3d9be9;
  --feather-bright: #74c0ff;
  --feather-deep:   #0f3b66;
  --feather-glow:   rgba(61, 155, 233, 0.28);

  /* Cars outside the current line-up */
  --legacy:        #9a93a8;
  --legacy-bright: #c4bdd1;
  --legacy-deep:   #2c2838;
  --legacy-glow:   rgba(154, 147, 168, 0.20);

  /* Status */
  --green: #35c46b;
  --red:   #e2513e;
  --amber: #e8b33c;
  --gold:  #d9b45c;
  --silver:#a9a9ba;
  --bronze:#c07840;

  /* Defaults for anything not scoped to a car */
  --accent:        var(--cream);
  --accent-bright: #ffffff;
  --accent-deep:   #2a2632;
  --accent-glow:   rgba(244, 234, 217, 0.14);

  --shell: 1320px;
}

[data-accent="fur"] {
  --accent: var(--fur); --accent-bright: var(--fur-bright);
  --accent-deep: var(--fur-deep); --accent-glow: var(--fur-glow);
}
[data-accent="feather"] {
  --accent: var(--feather); --accent-bright: var(--feather-bright);
  --accent-deep: var(--feather-deep); --accent-glow: var(--feather-glow);
}
[data-accent="legacy"] {
  --accent: var(--legacy); --accent-bright: var(--legacy-bright);
  --accent-deep: var(--legacy-deep); --accent-glow: var(--legacy-glow);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── TYPE ROLES ─────────────────────────────────────────────────
   Archivo, widened, for anything structural. Barlow Condensed for
   labels. JetBrains Mono for numbers you'd read off a timing screen. */

.display {
  font-family: 'Archivo', system-ui, sans-serif;
  font-stretch: 118%;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--cream);
  line-height: 1.05;
}

.label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
}

.data {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── LAYOUT ─────────────────────────────────────────────────── */

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
.shell-tight { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.band { padding: 72px 0; }
.band-tight { padding: 44px 0; }
.band-sunk { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.band-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.band-head h2 { font-size: 1.35rem; }
.band-note { color: var(--slate); font-size: 0.92rem; margin-bottom: 28px; max-width: 62ch; }

/* ── TEAM STRIPE ────────────────────────────────────────────────
   Two lanes, fox red then feather blue. The site's spine motif in
   its smallest form. */

.stripe {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1000;
  background: linear-gradient(90deg,
    var(--fur-deep) 0%, var(--fur) 30%,
    var(--cream) 49%, var(--cream) 51%,
    var(--feather) 70%, var(--feather-deep) 100%);
}

/* ── NAV ────────────────────────────────────────────────────── */

.nav {
  position: fixed; top: 3px; left: 0; right: 0; z-index: 999;
  height: 62px; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(8, 8, 11, 0.86);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.nav.is-scrolled { background: rgba(8, 8, 11, 0.97); }

.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-brand img { height: 34px; width: auto; }
.nav-brand span {
  font-family: 'Archivo', sans-serif; font-stretch: 118%; font-weight: 800;
  font-size: 0.86rem; letter-spacing: 0.06em; color: var(--cream);
}

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 500;
  font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--slate); text-decoration: none; padding: 4px 0;
  border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.nav-links a:hover { color: var(--cream); }
.nav-links a[aria-current="page"] { color: var(--cream); border-bottom-color: var(--fur); }

.burger {
  display: none; width: 38px; height: 38px; position: relative;
  background: none; border: none; cursor: pointer; z-index: 1001;
}
.burger i {
  position: absolute; left: 8px; width: 22px; height: 2px;
  background: var(--bone); border-radius: 1px; transition: transform .25s, opacity .2s, top .25s;
}
.burger i:nth-child(1) { top: 12px; }
.burger i:nth-child(2) { top: 18px; }
.burger i:nth-child(3) { top: 24px; }
.burger[aria-expanded="true"] i:nth-child(1) { top: 18px; transform: rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { top: 18px; transform: rotate(-45deg); }

.scrim { position: fixed; inset: 0; z-index: 997; background: rgba(0,0,0,.65); display: none; }
.scrim.is-open { display: block; }

/* ── CAR SWITCH ─────────────────────────────────────────────────
   Pick a car, or watch both. Lives in the nav on wide screens. */

.carswitch { display: flex; gap: 4px; padding: 3px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; }
.carswitch button {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.04em; padding: 5px 13px; border-radius: 999px;
  background: none; border: none; color: var(--slate); cursor: pointer;
  transition: background .2s, color .2s;
}
.carswitch button:hover { color: var(--cream); }
.carswitch button[aria-pressed="true"] {
  background: var(--accent-deep); color: var(--accent-bright);
  box-shadow: inset 0 0 0 1px var(--accent-glow);
}
.carswitch button[data-accent="fur"][aria-pressed="true"] { background: var(--fur-deep); color: var(--fur-bright); }
.carswitch button[data-accent="feather"][aria-pressed="true"] { background: var(--feather-deep); color: var(--feather-bright); }
.carswitch button[data-accent="both"][aria-pressed="true"] { background: var(--panel-3); color: var(--cream); }

/* ── HERO ───────────────────────────────────────────────────── */

.hero {
  position: relative; overflow: hidden;
  padding: 150px 0 70px;
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 55% 70% at 22% 20%, rgba(122,24,0,.42), transparent 62%),
    radial-gradient(ellipse 55% 70% at 78% 25%, rgba(15,59,102,.42), transparent 62%);
}
.hero > * { position: relative; z-index: 1; }

.hero-mark { display: flex; align-items: center; gap: 20px; margin-bottom: 26px; }
.hero-mark img { height: 72px; width: auto; }
.hero-name { font-size: clamp(1.9rem, 5.2vw, 3.4rem); }
.hero-tag {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 400;
  font-size: 0.82rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--slate);
}

/* ── LANES ──────────────────────────────────────────────────────
   THE SIGNATURE. One lane per car, running in parallel down the
   page, each carrying its own split. Collapses to one column on
   narrow screens and when only one car is entered. */

.lanes { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.lanes.is-single { grid-template-columns: minmax(0, 1fr); }

.lane {
  position: relative; background: var(--panel);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 4px; padding: 24px 26px 22px;
  transition: border-color .25s, box-shadow .25s;
}
.lane::after {
  content: ''; position: absolute; inset: 0; border-radius: 4px; pointer-events: none;
  background: linear-gradient(100deg, var(--accent-glow), transparent 42%); opacity: .5;
}
.lane > * { position: relative; z-index: 1; }
.lane:hover { box-shadow: 0 0 0 1px var(--accent-glow), 0 18px 44px rgba(0,0,0,.4); }

.lane-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.lane-id { display: flex; align-items: baseline; gap: 10px; }
.lane-num {
  font-family: 'Archivo', sans-serif; font-stretch: 125%; font-weight: 900;
  font-size: 2.5rem; line-height: .9; color: var(--accent-bright);
}
.lane-name {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: 0.76rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent);
}
.lane-car { font-size: 0.85rem; color: var(--slate); margin-top: 2px; }

.split-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; font-weight: 500;
  padding: 4px 10px; border-radius: 3px;
  background: var(--panel-3); border: 1px solid var(--line); color: var(--bone);
}
.split-chip b { color: var(--accent-bright); font-weight: 700; }

/* Start → finish, the shape of the race in one line */
.trace { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.trace-pos { display: flex; flex-direction: column; gap: 2px; min-width: 62px; }
.trace-pos .label { font-size: 0.6rem; letter-spacing: .18em; }
.trace-val { font-family: 'Archivo', sans-serif; font-stretch: 112%; font-weight: 800; font-size: 2.1rem; line-height: 1; }
.trace-from .trace-val { color: var(--slate); }
.trace-to .trace-val { color: var(--accent-bright); }
.trace-arrow { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 60px; }
.trace-bar { width: 100%; height: 2px; border-radius: 1px; background: linear-gradient(90deg, var(--dim), var(--accent)); position: relative; }
.trace-bar::after {
  content: ''; position: absolute; right: -1px; top: 50%; transform: translateY(-50%);
  border-left: 7px solid var(--accent); border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.trace-delta { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 700; }
.is-gain { color: var(--green); }
.is-loss { color: var(--red); }
.is-flat { color: var(--slate); }
.trace.is-loss .trace-bar { background: linear-gradient(90deg, var(--dim), var(--red)); }
.trace.is-loss .trace-bar::after { border-left-color: var(--red); }

/* Small stat grid inside a lane */
.readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 14px 10px; }
.readout div { display: flex; flex-direction: column; gap: 1px; }
.readout b { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 0.94rem; color: var(--cream); }
.readout span { font-family: 'Barlow Condensed', sans-serif; font-size: 0.6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }

/* Driver stints */
.stints { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.stint { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.86rem; }
.stint-name { color: var(--bone); }
.stint-num { font-family: 'JetBrains Mono', monospace; font-size: 0.76rem; color: var(--slate); white-space: nowrap; }
.stint-num b { color: var(--cream); font-weight: 500; }

/* ── PILLS ──────────────────────────────────────────────────── */

.pillrow { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 500;
  font-size: 0.78rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 3px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); color: var(--slate);
  transition: all .2s; white-space: nowrap;
}
.pill:hover { border-color: var(--line); color: var(--cream); background: var(--panel-2); }
.pill[aria-pressed="true"] { color: var(--cream); border-color: var(--accent); background: var(--accent-deep); }
.pill small { display: block; font-size: 0.62rem; letter-spacing: .12em; color: var(--dim); }
.pill[aria-pressed="true"] small { color: var(--bone); }

.pill-season { display: flex; flex-direction: column; gap: 1px; padding: 9px 16px; text-align: left; }

/* ── EVENT HEADER ───────────────────────────────────────────── */

.eventbar { display: flex; gap: 10px 22px; flex-wrap: wrap; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.eventbar div { font-size: 0.84rem; color: var(--slate); }
.eventbar b { color: var(--cream); font-weight: 600; }

/* ── SESSION TABS ───────────────────────────────────────────────
   One tab per split we entered. When both cars share a split
   there's only one tab and both rows light up in the table. */

.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 0; }
.tab {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 500;
  font-size: 0.8rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 16px; color: var(--slate);
  background: var(--panel); border: 1px solid var(--line); border-bottom: none;
  border-radius: 4px 4px 0 0; transition: all .2s;
}
.tab:hover { color: var(--cream); }
.tab[aria-selected="true"] { color: var(--cream); background: var(--panel-2); box-shadow: inset 0 2px 0 var(--accent); }
.tab-cars { display: flex; gap: 4px; }
.tab-car {
  font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; font-weight: 700;
  padding: 1px 6px; border-radius: 2px;
  background: var(--accent-deep); color: var(--accent-bright);
}

/* ── TABLE ──────────────────────────────────────────────────── */

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 0 4px 4px 4px; background: var(--panel-2); }
.tabs + .tablewrap { border-top-left-radius: 0; }

table.classification { width: 100%; border-collapse: collapse; font-size: 0.84rem; min-width: 900px; }

.classification thead th {
  position: sticky; top: 0; z-index: 2;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: 0.66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim); text-align: left; white-space: nowrap;
  padding: 12px 12px; background: var(--panel-3);
  border-bottom: 1px solid var(--line); cursor: pointer; user-select: none;
}
.classification thead th:hover { color: var(--bone); }
.classification thead th.is-sorted { color: var(--cream); }

.classification td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.classification tbody tr:hover td { background: rgba(255,255,255,.022); }

.cell-pos { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--bone); width: 46px; }
.cell-pos.p1 { color: var(--gold); }
.cell-pos.p2 { color: var(--silver); }
.cell-pos.p3 { color: var(--bronze); }
.cell-num { font-family: 'JetBrains Mono', monospace; color: var(--slate); width: 52px; }
.cell-team { color: var(--cream); font-weight: 500; min-width: 180px; }
.cell-car { color: var(--slate); font-size: 0.79rem; min-width: 150px; }
.cell-data { font-family: 'JetBrains Mono', monospace; font-size: 0.79rem; color: var(--bone); white-space: nowrap; }
.cell-dim { color: var(--dim); }

/* Our cars, tinted by whose row it is */
tr.is-ours td { background: var(--accent-deep); }
tr.is-ours:hover td { background: var(--accent-deep); filter: brightness(1.18); }
tr.is-ours .cell-team { color: var(--accent-bright); font-weight: 600; }
tr.is-ours td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

.tag-inc-low  { color: var(--green); }
.tag-inc-mid  { color: var(--amber); }
.tag-inc-high { color: var(--red); }
.tag-fin { color: var(--green); font-size: 0.72rem; letter-spacing: .08em; }
.tag-dnf { color: var(--amber); font-size: 0.72rem; letter-spacing: .08em; }
.tag-dsq { color: var(--red);   font-size: 0.72rem; letter-spacing: .08em; }

.expand {
  background: none; border: 1px solid var(--line); border-radius: 3px;
  color: var(--slate); cursor: pointer; width: 22px; height: 22px; line-height: 1;
  font-size: 0.7rem; transition: all .2s;
}
.expand:hover { color: var(--cream); border-color: var(--slate); }

tr.substint { display: none; }
tr.substint.is-open { display: table-row; }
tr.substint td { background: rgba(0,0,0,.28); font-size: 0.78rem; color: var(--slate); padding-top: 6px; padding-bottom: 6px; }
tr.substint .sub-name { color: var(--bone); padding-left: 26px; }

/* Class badges for multi-class events */
.cbadge {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: 0.64rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 2px; display: inline-block; white-space: nowrap;
}
.cbadge.c0 { background: rgba(216,80,28,.16);  color: var(--fur-bright);     border: 1px solid rgba(216,80,28,.3); }
.cbadge.c1 { background: rgba(61,155,233,.14); color: var(--feather-bright); border: 1px solid rgba(61,155,233,.28); }
.cbadge.c2 { background: rgba(53,196,107,.13); color: var(--green);          border: 1px solid rgba(53,196,107,.26); }
.cbadge.c3 { background: rgba(232,179,60,.13); color: var(--amber);          border: 1px solid rgba(232,179,60,.26); }

.classfilter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 16px 0 0; }

/* ── NEXT RACE ──────────────────────────────────────────────── */

.next {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  padding: 22px 26px; position: relative; overflow: hidden;
}
.next::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--fur), var(--feather));
}
.next-eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.next-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fur); box-shadow: 0 0 10px var(--fur); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.next-track { font-family: 'Archivo', sans-serif; font-stretch: 112%; font-weight: 800; font-size: 1.4rem; color: var(--cream); }
.next-sub { font-family: 'Barlow Condensed', sans-serif; font-size: 0.84rem; letter-spacing: .06em; color: var(--slate); }
.next-when { font-family: 'JetBrains Mono', monospace; font-size: 1rem; color: var(--cream); text-align: right; }

/* ── SCHEDULE TABLE ─────────────────────────────────────────── */

table.schedule { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 780px; }
.schedule thead th {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: 0.66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
  text-align: left; padding: 12px; background: var(--panel-3); border-bottom: 1px solid var(--line);
}
.schedule td { padding: 13px 12px; border-bottom: 1px solid var(--line-soft); }
.schedule tr.is-next td { background: rgba(216,80,28,.07); }
.schedule tr.is-next td:first-child { box-shadow: inset 3px 0 0 var(--fur); }
.schedule tr.is-done td { color: var(--slate); }
.schedule .round-no { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--cream); }
.schedule .track-name { color: var(--cream); font-weight: 500; }
.schedule a { color: var(--fur-bright); text-decoration: none; font-family: 'Barlow Condensed', sans-serif; letter-spacing: .08em; text-transform: uppercase; font-size: 0.76rem; }
.schedule a:hover { text-decoration: underline; }

.badge {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 0.64rem;
  letter-spacing: .14em; text-transform: uppercase; padding: 3px 9px; border-radius: 2px;
  display: inline-block; white-space: nowrap;
}
.badge-done  { background: rgba(255,255,255,.05); color: var(--slate); }
.badge-next  { background: rgba(216,80,28,.16); color: var(--fur-bright); }
.badge-ok    { background: rgba(53,196,107,.12); color: var(--green); }
.badge-tbd   { background: rgba(232,179,60,.12); color: var(--amber); }
.badge-soon  { background: rgba(255,255,255,.04); color: var(--slate); }

/* Which cars are entered in a round */
.entrylist { display: flex; gap: 4px; }
.entrytag {
  font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; font-weight: 700;
  padding: 2px 7px; border-radius: 2px; background: var(--accent-deep); color: var(--accent-bright);
}

/* ── STANDINGS ──────────────────────────────────────────────── */

.tally { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.formline { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 16px; }
.formcell {
  width: 30px; height: 30px; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; font-weight: 700;
  background: var(--panel-3); color: var(--bone); border: 1px solid var(--line);
  cursor: default;
}
.formcell.win  { background: rgba(217,180,92,.22); color: var(--gold); border-color: rgba(217,180,92,.4); }
.formcell.podium { background: rgba(53,196,107,.16); color: var(--green); border-color: rgba(53,196,107,.32); }
.formcell.top10 { background: rgba(255,255,255,.07); color: var(--cream); }
.formcell.dnf  { background: rgba(226,81,62,.14); color: var(--red); border-color: rgba(226,81,62,.3); }
.formcell.none { color: var(--dim); border-style: dashed; }

.h2h { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px 18px; align-items: center; margin-top: 4px; }
.h2h-metric { font-family: 'Barlow Condensed', sans-serif; font-size: 0.66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); text-align: center; white-space: nowrap; }
.h2h-val { font-family: 'JetBrains Mono', monospace; font-size: 1rem; color: var(--bone); }
.h2h-val.left { text-align: right; }
.h2h-val.win { color: var(--cream); font-weight: 700; }
.h2h-val.left.win { color: var(--fur-bright); }
.h2h-val.right.win { color: var(--feather-bright); }

/* ── LINK & SPONSOR CARDS ───────────────────────────────────── */

.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  padding: 20px; text-decoration: none; display: flex; flex-direction: column; gap: 6px;
  transition: border-color .2s, transform .2s;
}
.card:hover { border-color: var(--slate); transform: translateY(-2px); }
.card b { font-family: 'Archivo', sans-serif; font-stretch: 110%; font-weight: 700; font-size: 0.9rem; color: var(--cream); }
.card span { font-size: 0.82rem; color: var(--slate); }

.sponsors { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sponsor {
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  padding: 24px; text-decoration: none; display: flex; flex-direction: column;
  align-items: center; gap: 12px; text-align: center; transition: border-color .2s;
}
.sponsor:hover { border-color: var(--slate); }
.sponsor img { max-height: 52px; max-width: 190px; width: auto; object-fit: contain; }
.sponsor b { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 0.86rem; color: var(--cream); }

.affiliate-note {
  margin-top: 16px;
  font-size: 0.78rem;
  color: var(--dim);
  max-width: 62ch;
}

/* ── STATES ─────────────────────────────────────────────────── */

.state { padding: 48px 24px; text-align: center; color: var(--slate); }
.state b { display: block; font-family: 'Archivo', sans-serif; font-stretch: 110%; font-weight: 700; font-size: 1.05rem; color: var(--cream); margin-bottom: 6px; }
.state button {
  margin-top: 14px; font-family: 'Barlow Condensed', sans-serif; font-size: 0.78rem;
  letter-spacing: .14em; text-transform: uppercase; padding: 9px 20px; cursor: pointer;
  background: var(--panel-3); border: 1px solid var(--line); border-radius: 3px; color: var(--cream);
}
.state button:hover { border-color: var(--slate); }

.loading { display: flex; align-items: center; gap: 12px; justify-content: center; padding: 48px 24px; color: var(--dim); }
.loading i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--fur); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── BUTTONS ────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 0.8rem;
  letter-spacing: .16em; text-transform: uppercase; padding: 13px 26px;
  border-radius: 3px; transition: all .2s; cursor: pointer;
}
.btn-solid { background: var(--fur-deep); color: var(--cream); border: 1px solid var(--fur); }
.btn-solid:hover { background: var(--fur); }
.btn-ghost { background: transparent; color: var(--bone); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--slate); color: var(--cream); }

/* ── FOOTER ─────────────────────────────────────────────────── */

.footer { border-top: 1px solid var(--line); padding: 40px 24px; text-align: center; }
.footer img { height: 42px; opacity: .5; margin-bottom: 14px; }
.footer p { font-size: 0.76rem; color: var(--dim); }
.footer a { color: var(--slate); text-decoration: none; }
.footer a:hover { color: var(--bone); }

/* ── REVEAL ─────────────────────────────────────────────────── */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */

@media (max-width: 900px) {
  .burger { display: block; }
  .nav-links {
    position: fixed; inset: 0 0 0 auto; z-index: 998; width: 264px;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 88px 26px 40px; background: rgba(13,13,18,.98);
    border-left: 1px solid var(--line);
    transform: translateX(100%); transition: transform .25s ease;
  }
  .nav-links.is-open { transform: none; }
  .nav-links a { padding: 15px 0; font-size: 0.94rem; border-bottom: 1px solid var(--line-soft); }
  .nav-links a[aria-current="page"] { border-bottom-color: var(--fur); }
  .carswitch { margin-top: 22px; justify-content: center; }
  .hero { padding: 120px 0 56px; }
  .hero-mark img { height: 54px; }
}

@media (max-width: 620px) {
  .band { padding: 52px 0; }
  .shell, .shell-tight { padding: 0 16px; }
  .lanes { grid-template-columns: minmax(0, 1fr); }
  .hero-mark { gap: 14px; }
  .next-when { text-align: left; }
  .h2h { gap: 8px 12px; }
  .formcell { width: 26px; height: 26px; font-size: 0.62rem; }
}