@import url('https://fonts.googleapis.com/css2?family=Anton&family=Saira+Condensed:wght@600;700;800&family=Archivo:wght@400;500;600;700&display=swap');

:root {
  /* core fight-night palette — single source of truth for every page */
  --bg: #080808;
  --ink: #f6f4ef;
  --muted: #8a8f98;
  --red: #ff1f1f;
  --red-hot: #ff3b3b;       /* brighter red for hover energy (non-title rows) */
  --red-deep: #c70000;
  --blue: #2e8bff;          /* blue corner — pairs with --red for the FightCard wordmark + brand mark */
  --blue-deep: #1660d6;     /* deeper blue for glow / gradient stops */
  --gold: #d8b25e;
  --gold-soft: rgba(216, 178, 94, .16);
  --line: rgba(255, 255, 255, .12);
  --line-gold: rgba(216, 178, 94, .24);
  --e-quart: cubic-bezier(.25, 1, .5, 1);
  --e-expo: cubic-bezier(.16, 1, .3, 1);
  /* semantic z-scale — content < hero-glow sits behind hero via -1 < sticky nav < scroll progress */
  --z-hero-glow: -1;
  --z-sticky: 50;
  --z-progress: 60;
  /* back-compat aliases consumed by the fighter / fight sub-page components */
  --text: var(--ink);
  --panel: rgba(18, 18, 22, 0.88);
  --panel-2: rgba(255, 255, 255, 0.06);
  --red-soft: rgba(255, 31, 31, 0.24);
}

* { box-sizing: border-box; }

/* Kill horizontal scroll from decorative bleed. The hero glow and other ambient
   layers are oversized on purpose (they inset past the viewport so their soft
   edges never show a hard seam), which makes the page scroll ~250px into empty
   space on the right at mobile widths. `overflow-x: clip` clips that bleed at the
   document edge without creating a scroll container — so the sticky nav and
   vertical scrolling are unaffected (which `overflow: hidden` would have risked).
   Nothing real overflows here; only decoration, so clipping hides no content.
   Set on body (not just the root) because a root-only clip propagates to the
   viewport and doesn't actually stop the horizontal scroll in Chromium. */
html, body { overflow-x: clip; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: Archivo, system-ui, sans-serif;
  background-image:
    radial-gradient(120% 60% at 82% -6%, rgba(255, 31, 31, .24), transparent 48%),
    radial-gradient(90% 50% at 8% 102%, rgba(255, 31, 31, .07), transparent 46%),
    radial-gradient(150% 120% at 50% 40%, transparent 58%, rgba(0, 0, 0, .6) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
/* fight-night grain — depth without weight (applies to every page) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px;
}

/* Scroll-progress hairline (every page) — a red→gold rule that fills as you read.
   Pure CSS scroll-timeline: composited (scaleX only), needs no JS, works over
   file://. It's non-essential chrome, so where the feature is unsupported
   (Firefox-default, older Safari) the bar simply never appears — nothing else
   shifts. Gated off under reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    body::before {
      content: "";
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 3px;
      z-index: var(--z-progress);
      pointer-events: none;
      transform: scaleX(0);
      transform-origin: 0 50%;
      background: linear-gradient(90deg, var(--red-deep), var(--red) 58%, var(--gold));
      animation: scrollProgress auto linear;
      animation-timeline: scroll(root);
    }
    @keyframes scrollProgress { to { transform: scaleX(1); } }
  }
}

a { color: inherit; text-decoration: none; }

.page {
  max-width: 1220px;
  margin: 0 auto;
  padding: 28px;
  position: relative;
  z-index: 1;
}

/* ---------- Navigation (shared shell, every page) ---------- */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0 6px;
  margin-bottom: 28px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  color: inherit;
}
.brand-mark {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  /* red corner / blue corner split disc with a soft specular highlight */
  background:
    radial-gradient(circle at 33% 28%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 42%),
    linear-gradient(105deg, var(--red) 0 47%, var(--blue) 53% 100%);
  box-shadow: 0 0 22px rgba(255, 31, 31, .32), 0 0 22px rgba(46, 139, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.brand-text { line-height: 1.1; }
.brand-name {
  font: 800 15px 'Saira Condensed';
  letter-spacing: .26em;
  text-transform: uppercase;
  line-height: 1;
}
.brand-name .bn-red  { color: var(--red); }
.brand-name .bn-blue { color: var(--blue); }
.brand-tag {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.nav-links {
  display: flex;
  gap: 22px;
  align-items: center;
  font: 600 12px Archivo;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-links a { transition: color .2s var(--e-quart); }
.nav-links a:hover { color: var(--ink); }
.nav-cta {
  color: var(--ink);
  border: 1px solid var(--line-gold);
  border-radius: 999px;
  padding: 8px 15px;
  transition: border-color .2s var(--e-quart), color .2s var(--e-quart), box-shadow .25s var(--e-quart);
}
.nav-cta:hover { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 26px rgba(216, 178, 94, .22); }

/* Baseline display heading for sub-pages (home overrides via .home h1) */
h1 {
  margin: 0;
  font-size: clamp(48px, 7.5vw, 96px);
  line-height: .9;
  text-transform: uppercase;
  letter-spacing: -0.06em;
}
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.pill {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .055);
  border-radius: 14px;
  padding: 12px 14px;
  color: #e8e8e8;
  font-size: 14px;
}

/* small "vs" token (fight-page tale-of-the-tape header) */
.vs {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--red-deep);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 0 24px rgba(255, 31, 31, .4);
}

/* ---------- Section shell (shared) ---------- */
.section {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--panel);
  padding: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 18px;
}
h2 {
  margin: 0;
  font-family: Anton;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .015em;
  font-size: 34px;
}
.section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
/* A section head carrying a page-level <h1> (the page title) gets the full
   width on its own line with its blurb beneath — the same treatment the ≤900px
   override below already applies, here scoped to the h1 so a poster-size title
   isn't squeezed into a narrow flex column beside its text and forced to wrap.
   <h2> section labels keep their compact desktop side-by-side layout. */
.section-head:has(h1) {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.section-head h1 {
  margin: 0;
  font-family: Anton;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .95;
  font-size: clamp(40px, 7vw, 84px);
}
.section-head:has(h1) p {
  max-width: 66ch;
  font-size: 14px;
}

/* ---------- Inline videos per fight ---------- */
.fight-videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.vslot { display: block; }
.video-label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.vmedia {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
}
.vmedia iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* click-to-load facade: lightweight thumbnail + play, no live iframe until clicked */
.facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  background-color: #0c0c0e;
  display: grid;
  place-items: center;
}
.facade::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .55));
}
.play {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--red);
  font-weight: 900;
  box-shadow: 0 0 38px rgba(215, 25, 32, .48);
}
/* "watch on youtube" fallback when a video can't be embedded */
.watch-yt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  background: #0c0c0e;
  color: var(--text);
}
.watch-yt span:last-child { color: var(--muted); font-size: 13px; font-weight: 600; }
.watch-yt:hover span:last-child { color: var(--text); }

/* empty "coming soon" state */
.vmedia.empty {
  display: grid;
  place-items: center;
  text-align: center;
  border-style: dashed;
  border-color: rgba(255, 255, 255, .26);
  background:
    linear-gradient(135deg, rgba(215, 25, 32, .1), transparent),
    rgba(255, 255, 255, .03);
}
.vmedia.empty span {
  color: var(--muted);
  font-size: 13px;
}

.footer-note {
  color: var(--muted);
  font-size: 12px;
  margin-top: 30px;
  line-height: 1.6;
  max-width: 80ch;
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}

/* ---------- Fighter sub-page ---------- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.back-link:hover { color: var(--text); }

.fighter-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.fighter-hero h1 { font-family: 'Saira Condensed'; font-weight: 800; letter-spacing: .005em; font-size: clamp(44px, 7vw, 82px); }
.nickname {
  color: var(--gold);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.bigrecord { text-align: right; }
.bigrecord b {
  display: block;
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -.03em;
}
.bigrecord span {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* identity section with full-body portrait — the portrait pins (position: sticky)
   while the intro / vitals / read scroll past it in the right column, like a
   broadcast still frame holding on the fighter. Sub-page nav isn't sticky, so a
   small top offset (clearing the scroll-progress hairline) is all it needs.
   No JS, no scroll-timeline: sticky degrades to a normal portrait everywhere. */
.fighter-id {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: 32px;
  align-items: start;
}
.fighter-portrait {
  width: 100%;
  height: auto;
  aspect-ratio: 46 / 70;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55));
  position: sticky;
  top: 24px;
  align-self: start;
}
.fighter-id-body > * + * { margin-top: 18px; }

/* ---------- Next fight (upcoming) — anticipatory gold, separate from results ---------- */
.next-fight {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--line-gold);
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(216, 178, 94, .10), rgba(216, 178, 94, .02));
  transition: border-color .2s var(--e-quart), box-shadow .25s var(--e-quart), transform .2s var(--e-quart);
}
.next-flag {
  font: 800 11px 'Saira Condensed'; letter-spacing: .16em; text-transform: uppercase;
  color: #0b0b0b; background: var(--gold); padding: 6px 11px; border-radius: 999px; white-space: nowrap;
}
.next-opp { display: block; font: 800 21px 'Saira Condensed'; text-transform: uppercase; letter-spacing: .01em; }
.next-sub { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
.next-event { text-align: right; color: var(--muted); font-size: 12px; letter-spacing: .04em; white-space: nowrap; }
.next-event b { display: block; color: var(--ink); font-weight: 700; }
.next-cta { color: var(--gold); font-size: 20px; transition: transform .2s var(--e-quart); }

@media (max-width: 640px) {
  .fighter-id { grid-template-columns: 1fr; justify-items: start; }
  /* Single column: a sticky portrait would pin a tall image and waste the whole
     viewport while the body scrolls — drop back to a normal in-flow portrait. */
  .fighter-portrait { width: auto; max-height: 240px; position: static; }
  .next-fight { grid-template-columns: auto 1fr; }
  .next-event { grid-column: 1 / -1; text-align: left; }
  .next-cta { display: none; }
}

.snapshot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 26px;
}
.snap {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  background: var(--panel-2);
}
.snap span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.snap b { font-size: 18px; font-weight: 800; }

/* ---------- metric explainers ("i" tooltips on jargon/derived rows) ----------
   Shared by the Vitals snapshot and the tale of the tape. Built as a real <button>
   + role="tooltip"; the popover reveals on hover (pointer devices), on keyboard focus,
   and on a touch tap (which focuses the button) — so it works with NO JS and over
   file://. The popover is a child of .minfo, so moving onto it keeps it open
   (hoverable + persistent, WCAG 1.4.13). Esc-dismiss is layered on by assets/minfo.js. */
.minfo { position: relative; display: inline-flex; vertical-align: middle; }
.minfo-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0; margin: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--muted);
  font: 700 11px/1 Georgia, "Times New Roman", serif; /* a serif "i" reads as info, not a typo'd letter */
  font-style: italic; text-transform: none; letter-spacing: 0;
  cursor: help; -webkit-appearance: none; appearance: none;
}
.minfo-btn:hover, .minfo-btn:focus-visible { color: var(--ink); border-color: var(--gold); }
.minfo-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.minfo-pop {
  display: none;
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  z-index: 30; width: max-content; max-width: min(280px, 78vw);
  padding: 11px 13px; border: 1px solid var(--line-gold); border-radius: 12px;
  background: #14141a; box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
  text-align: left; text-transform: none; letter-spacing: 0;
  font-weight: 400; line-height: 1.45; white-space: normal;
}
.minfo-pop::before { /* little caret up to the trigger */
  content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-bottom-color: var(--line-gold);
}
.minfo-pop b { display: block; font-size: 12px; font-weight: 800; color: var(--ink); margin-bottom: 3px; }
.minfo-pop span { display: block; font-size: 12px; color: #cfcfcf; }
/* Reveal: focus works everywhere (incl. a touch tap); hover only on hover-capable pointers. */
.minfo:focus-within > .minfo-pop { display: block; }
@media (hover: hover) and (pointer: fine) {
  .minfo:hover > .minfo-pop { display: block; }
}
/* Esc-dismissed (assets/minfo.js) — outranks the reveal rules so the popover hides while
   focus OR the pointer stays put. Covers both ways it can be open: keyboard (:focus-within)
   and hover (:hover), so WCAG 1.4.13 "dismissible" holds however the tooltip was opened. */
.minfo.is-dismissed:focus-within > .minfo-pop,
.minfo.is-dismissed:hover > .minfo-pop { display: none; }

.prose {
  color: #d6d6d6;
  font-size: 16px;
  line-height: 1.65;
}
.prose p { margin: 0 0 14px; }

.oncard {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.oncard .cta {
  color: var(--red);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.stack > * + * { margin-top: 24px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .hero {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 30px;
    min-height: auto;
  }
  .fight-head {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 10px;
  }
  .vs-mini { text-align: left; }
  .fight-videos { grid-template-columns: 1fr; }
  .bigrecord { text-align: left; }
}

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

/* ======================================================================
   Fight page + richer fighter page components
   ====================================================================== */

/* ---------- Breadcrumb ---------- */
.crumbs { margin: 0 0 18px; }
.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs li:not(:first-child)::before { content: "›"; opacity: .55; }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current="page"] { color: var(--text); }

/* ---------- Status badge ---------- */
.status-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(255, 255, 255, .04);
}
.status-badge.scheduled {
  color: #fff;
  border-color: rgba(215, 25, 32, .5);
  background: rgba(215, 25, 32, .16);
}

/* ---------- Bout hero (fight page) ---------- */
.bout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: center;
  margin-top: 22px;
}
.corner { text-align: center; }
.bout-portrait {
  display: block;
  width: auto;
  height: clamp(150px, 21vw, 230px);
  margin: 0 auto 16px;
  aspect-ratio: 46 / 70;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .55));
}
.corner .fnick {
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 8px;
  min-height: 14px;
}
.corner .fname {
  font-family: 'Saira Condensed';
  font-size: clamp(30px, 4.6vw, 54px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .95;
}
.corner .frec { margin-top: 10px; color: var(--muted); font-weight: 700; }
.vs-big {
  flex: none;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--red);
  font-weight: 900;
  font-size: 16px;
  box-shadow: 0 0 30px rgba(215, 25, 32, .5);
}

/* ---------- Tale of the Tape ---------- */
.tape-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  margin-bottom: 6px;
}
.tape-head .a { text-align: right; }
.tape-head .b { text-align: left; }
.tape-head a {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.02em;
}
.tape-head .vs { color: #fff; align-self: center; }
.tape-grid { margin: 0; }
.tape-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.tape-row:last-child { border-bottom: 0; }
.tape-row dd { margin: 0; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tape-row .a { text-align: right; }
.tape-row .b { text-align: left; }
.tape-row dt {
  text-align: center;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.35;
  max-width: 14ch;
  margin: 0 auto;
}
.tape-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* ---------- Tale of the Tape — diverging comparison bars (P1 + P2) ----------
   Numeric rows grow a red (corner A) and a steel/blue (corner B) bar from the centre
   label outward; the longer bar reads as the edge at a glance. Red-vs-steel mirrors the
   universal red-corner/blue-corner convention and reuses the prediction-tally palette.
   Colour is never the only signal: every bar keeps its printed number and the leading
   side carries a text "Edge" marker. */
.tape-row .tv { flex: 0 0 auto; color: var(--ink); font-variant-numeric: tabular-nums; }
.tape-row.is-bar .a,
.tape-row.is-bar .b { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tape-row.is-bar .a { justify-content: flex-end; }
.tape-row.is-bar .b { justify-content: flex-start; }
.tape-row .bar {
  flex: 1 1 auto;
  max-width: clamp(54px, 13vw, 150px);
  height: 9px;
  display: flex;
  background: #0e0f12;
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.tape-row .a .bar { justify-content: flex-end; }   /* fill anchors at the centre and grows outward */
.tape-row .b .bar { justify-content: flex-start; }
.bar-fill { height: 100%; width: 0; }
.tape-row .a .bar-fill { background: linear-gradient(90deg, rgba(199, 0, 0, .32), var(--red)); }
.tape-row .b .bar-fill { background: linear-gradient(270deg, rgba(47, 95, 160, .32), var(--steel)); }
@media (prefers-reduced-motion: no-preference) {
  .bar-fill { transition: width .85s var(--e-expo); }
}
.tape-row .edge {
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}
.tape-row.edge-a .a .edge { border-color: var(--red-soft); }
.tape-row.edge-b .b .edge { border-color: rgba(91, 143, 214, .5); }
.tape-row.edge-a .a .bar-fill { box-shadow: 0 0 10px rgba(255, 31, 31, .45); }
.tape-row.edge-b .b .bar-fill { box-shadow: 0 0 10px rgba(91, 143, 214, .42); }

/* ---------- Tale of the Tape — snapshot radar (P5) + striking readout (P4) ---------- */
.tape-snapshot {
  display: grid;
  grid-template-columns: minmax(250px, 350px) 1fr;
  gap: 30px;
  align-items: center;
  margin: 8px 0 20px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .018);
}
.rdr-wrap { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rdr { width: 100%; max-width: 330px; height: auto; overflow: visible; }
.rdr-ring { fill: rgba(255, 255, 255, .015); stroke: var(--line); stroke-width: 1; }
.rdr-spoke { stroke: var(--line); stroke-width: 1; }
.rdr-poly { stroke-width: 2; stroke-linejoin: round; }
.rdr-a { fill: rgba(255, 31, 31, .16); stroke: var(--red); }
.rdr-b { fill: rgba(91, 143, 214, .13); stroke: var(--steel); stroke-dasharray: 5 3; }
.rdr-axis {
  fill: var(--muted);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.rdr-legend {
  display: flex;
  gap: 18px;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rdr-key { position: relative; padding-left: 24px; color: var(--ink); }
.rdr-key::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 18px; transform: translateY(-50%);
}
.rdr-key-a::before { border-top: 3px solid var(--red); }
.rdr-key-b::before { border-top: 3px dashed var(--steel); }
.ax-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.ax-meta { display: flex; flex-direction: column; gap: 1px; margin-bottom: 5px; }
.ax-name { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); }
.ax-sub { font-size: 10px; color: var(--muted); letter-spacing: .03em; }
.ax-cmp { display: grid; grid-template-columns: 3.6em 1fr 3.6em; align-items: center; gap: 12px; }
.ax-v { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.ax-v.a { text-align: right; }
.ax-v.b { text-align: left; }
.ax-v.is-win { color: var(--ink); }
.ax-mk { color: var(--gold); font-size: 12px; }
.ax-bar { display: flex; height: 8px; background: #0e0f12; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.ax-h { flex: 1; display: flex; }
.ax-ha { justify-content: flex-end; }
.ax-hb { justify-content: flex-start; }
.ax-h i { height: 100%; }
.ax-ha i { background: linear-gradient(90deg, rgba(199, 0, 0, .32), var(--red)); }
.ax-hb i { background: linear-gradient(270deg, rgba(47, 95, 160, .32), var(--steel)); }

/* ---------- Editorial breakdown ---------- */
.breakdown-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.case {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  background: var(--panel-2);
}
.case h3 {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}
.case p { margin: 0; color: #d6d6d6; font-size: 15px; line-height: 1.6; }
.watch ul { margin: 0; padding-left: 20px; color: #d6d6d6; line-height: 1.65; }
.watch li { margin-bottom: 6px; }

/* ---------- Record split chips ---------- */
.splits { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.split {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 14px;
  background: var(--panel-2);
  font-size: 13px;
  color: var(--muted);
}
.split b { color: var(--text); font-size: 16px; margin-right: 6px; }

/* ---------- Fights list / history ----------
   Each row is a native <details>: the head (<summary>) is the always-visible
   result line; click/tap (or keyboard) expands a verified breakdown. Same
   accessible, no-JS-required idiom as the predictions accordion below. */
.fights-list { display: flex; flex-direction: column; gap: 10px; }
.fl-row {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-2);
  overflow: hidden;
  transition: border-color .2s ease;
}
.fl-row.upcoming { border-color: rgba(215, 25, 32, .5); background: rgba(215, 25, 32, .07); }
.fl-row[open] { border-color: rgba(215, 25, 32, .45); }

/* Head = the <summary>: the always-visible row. */
.fl-head {
  display: grid;
  grid-template-columns: 64px 1fr auto auto 18px;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  transition: background .2s ease;
}
.fl-head.no-thumb { grid-template-columns: 64px 1fr auto 18px; }
.fl-head::-webkit-details-marker { display: none; }
.fl-row[open] .fl-head { background: linear-gradient(90deg, rgba(215, 25, 32, .09), transparent 72%); }
.fl-res {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.fl-res.win { color: #5db872; }
.fl-res.loss { color: #d76b6b; }
.fl-res.nc { color: #9a9aa5; }
.fl-res.next { color: var(--red); }
.fl-opp { font-weight: 800; }
.fl-opp .fl-sub { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 600; }
.fl-event { text-align: right; color: var(--muted); font-size: 12px; }
.fl-row a.fl-opp:hover { color: var(--red); }

/* Chevron — points down, rotates up on open (matches .pred-chev). */
.fl-chev {
  width: 9px; height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .2s ease;
  justify-self: center;
}
.fl-row[open] .fl-chev { transform: rotate(-135deg); }

/* Detail — the expandable, web-verified breakdown. */
.fl-detail { padding: 4px 16px 18px; border-top: 1px solid var(--line); }
.fl-summary { margin: 14px 0 0; color: var(--ink); font: 400 15px/1.55 Archivo; max-width: 64ch; }
.fl-mlabel { margin: 16px 0 0; font: 800 12px 'Saira Condensed'; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.fl-moments { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; max-width: 64ch; }
.fl-moments li { position: relative; padding-left: 18px; color: var(--ink); font: 400 14px/1.5 Archivo; }
.fl-moments li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }

/* ---------- Video thumbnail surface (shared: row thumbs + grid tiles) ---------- */
.vthumb {
  position: relative;
  display: grid;
  place-items: center;
  background-color: #0c0c0e;
  background-size: cover;
  background-position: center;
}
.vthumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .5));
}

/* per-fight row thumbnail (opens the lightbox) */
.fl-thumb {
  width: 116px;
  aspect-ratio: 16 / 9;
  flex: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s var(--e-quart), transform .2s var(--e-quart), box-shadow .25s var(--e-quart);
}
.fl-thumb .play { width: 34px; height: 34px; font-size: 12px; box-shadow: 0 0 20px rgba(215, 25, 32, .5); }

/* ---------- Signature Finishes grid ---------- */
.vgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.vtile {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  font: inherit;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-2);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s var(--e-quart), transform .2s var(--e-quart), box-shadow .25s var(--e-quart);
}
.vtile .vthumb { width: 100%; aspect-ratio: 16 / 9; }
.vtile .vthumb .play { width: 50px; height: 50px; font-size: 15px; }
.vtile-title { font: 800 17px 'Saira Condensed'; text-transform: uppercase; letter-spacing: .02em; padding: 14px 16px 0; }
.vtile-desc { color: var(--muted); font-size: 13px; line-height: 1.5; padding: 6px 16px 16px; }

/* ---------- Lightbox (near-fullscreen shared player) ---------- */
html:has(.lightbox[open]) { overflow: hidden; }
.lightbox {
  width: 100vw; max-width: 100vw;
  height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0;
  background: transparent;
  color: var(--ink);
  overflow: hidden;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(4, 4, 5, .86); backdrop-filter: blur(6px); }
.lb-panel {
  width: min(1120px, 94vw, calc(80dvh * 16 / 9));
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lb-bar { display: flex; align-items: center; gap: 12px; }
.lb-title {
  margin-right: auto;
  font: 800 16px 'Saira Condensed';
  text-transform: uppercase;
  letter-spacing: .04em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-toggle { display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.lb-toggle[hidden] { display: none; }
.lb-tab {
  background: transparent; border: 0; cursor: pointer;
  padding: 8px 15px;
  font: 800 11px 'Saira Condensed'; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
  transition: color .2s var(--e-quart), background .2s var(--e-quart);
}
.lb-tab[aria-selected="true"] { background: var(--red-deep); color: #fff; }
.lb-close {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .05);
  color: var(--ink); font-size: 15px; cursor: pointer;
  transition: border-color .2s var(--e-quart), background .2s var(--e-quart);
}
.lb-close:hover { border-color: var(--red); background: rgba(215, 25, 32, .18); }
.lb-stage {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.lb-media { position: relative; width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
.lightbox[open] .lb-panel { animation: lbRise .34s var(--e-expo); }
.lightbox[open]::backdrop { animation: lbFade .34s ease; }
@keyframes lbRise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .lightbox[open] .lb-panel, .lightbox[open]::backdrop { animation: none; }
}

/* ---------- Lightbox moments timeline (a prediction video's picks, click to jump) ---------- */
.lb-moments[hidden] { display: none; }
.lb-moments { display: flex; flex-direction: column; min-height: 0; }
.lb-moments-head {
  margin: 0 0 8px; flex: none;
  font: 800 11px 'Saira Condensed'; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.lb-moments-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.lb-moment {
  width: 100%; display: flex; align-items: baseline; gap: 10px; text-align: left; cursor: pointer;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255, 255, 255, .03); color: var(--ink);
  transition: border-color .18s var(--e-quart), background .18s var(--e-quart);
}
.lb-moment:hover { border-color: var(--line-gold); background: var(--gold-soft); }
.lb-moment[aria-current="true"] { border-color: var(--gold); background: var(--gold-soft); }
.lb-moment-t {
  flex: none; font: 800 13px/1 'Saira Condensed'; color: var(--gold);
  font-variant-numeric: tabular-nums; min-width: 42px;
}
.lb-moment[aria-current="true"] .lb-moment-t::after { content: " \25B6"; font-size: 9px; } /* ▶ marks the playing moment (not colour alone) */
.lb-moment-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lb-moment-label { font-weight: 700; font-size: 13px; line-height: 1.25; }
.lb-moment-pick { font-size: 12px; color: var(--ink); opacity: .82; }
.lb-moment-note { font-size: 12px; color: var(--ink); opacity: .82; } /* a fight chapter's short verified description */
.lb-moment-by { font-size: 11px; color: var(--muted); letter-spacing: .02em; }
/* Settled-pick outcome — glyph + word carry the meaning; colour only reinforces (WCAG 1.4.1).
   Mirrors the .pmark badge so a Hit looks like a Hit everywhere (Miss is steel, not red). */
.lb-moment-result {
  display: inline-flex; align-items: center; gap: 3px; align-self: flex-start; margin-top: 1px;
  font-size: 10px; font-weight: 800; letter-spacing: .02em; line-height: 1;
  padding: 2px 6px; border-radius: 999px; border: 1px solid transparent;
}
.lb-moment-result--hit     { color: #6fcf97;      background: rgba(111, 207, 151, .16); border-color: rgba(111, 207, 151, .5); }
.lb-moment-result--perfect { color: var(--gold);  background: rgba(216, 178, 94, .18);  border-color: var(--line-gold); }
.lb-moment-result--miss    { color: var(--steel); background: rgba(91, 143, 214, .12);  border-color: rgba(91, 143, 214, .4); }
@media (min-width: 900px) {
  .lightbox.has-moments .lb-panel {
    width: min(1340px, 96vw);
    display: grid; align-items: start;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas: "bar bar" "stage moments";
    column-gap: 16px;
  }
  .lightbox.has-moments .lb-bar { grid-area: bar; }
  .lightbox.has-moments .lb-stage { grid-area: stage; }
  .lightbox.has-moments .lb-moments { grid-area: moments; max-height: calc(min(96vw, 1340px - 336px) * 9 / 16); }
}
@media (max-width: 899px) {
  .lb-moments { margin-top: 4px; max-height: 28dvh; }
}

/* the small "N moments" hint on a gallery card thumbnail */
.vcard-moments {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  padding: 3px 8px; border-radius: 999px;
  font: 800 10px 'Saira Condensed'; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); background: rgba(8, 8, 8, .78); border: 1px solid var(--line);
}

/* ---------- Fighter link cards (fight page) ---------- */
.fighter-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fcard {
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  background: var(--panel-2);
}
.fcard .fcard-face {
  flex: none; width: 76px; height: 76px; border-radius: 50%;
  border: 3px solid var(--gold);
  background-color: #0e0e0e; background-repeat: no-repeat; background-size: cover; background-position: 50% 48%;
  box-shadow: 0 0 0 5px rgba(216, 178, 94, .10), 0 0 30px rgba(255, 31, 31, .28), 0 8px 22px rgba(0, 0, 0, .5);
}
.fcard .fcard-body { min-width: 0; }
.fcard .fcard-name { font-size: 20px; font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; }
.fcard .fcard-meta { margin-top: 6px; color: var(--muted); font-size: 13px; }
.fcard .fcard-cta { margin-top: 12px; color: var(--red); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 720px) {
  /* Keep the two fighters side-by-side (corner | VS | corner) — stacking them
     wastes a full viewport of vertical space. Just shrink to fit the narrow column. */
  .bout { gap: 8px; }
  .bout-portrait { height: clamp(112px, 33vw, 150px); margin-bottom: 12px; }
  .corner .fnick { font-size: 10px; letter-spacing: .08em; margin-bottom: 5px; }
  .corner .fname { font-size: clamp(19px, 6.2vw, 28px); }
  .corner .frec { margin-top: 6px; font-size: 14px; }
  .vs-big { width: 46px; height: 46px; font-size: 13px; }
  .breakdown-cols { grid-template-columns: 1fr; }
  .fighter-cards { grid-template-columns: 1fr; }
  /* Let the heading own the full width instead of being squeezed into a narrow
     flex column next to its blurb; drop the description underneath it. */
  .section-head { flex-direction: column; align-items: stretch; gap: 8px; }
  /* Label on top, the two values mirrored to the outer edges so they read as a
     comparison (fighter A ← | → fighter B) rather than two left-aligned columns. */
  .tape-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "label label" "a b";
    row-gap: 4px;
  }
  .tape-row dt { grid-area: label; }
  .tape-row .a { grid-area: a; text-align: left; }
  .tape-row .b { grid-area: b; text-align: right; }
  /* Bars: value sits at the outer edge, bar grows toward the centre column. */
  .tape-row.is-bar .a { justify-content: flex-start; }
  .tape-row.is-bar .b { justify-content: flex-end; }
  .tape-snapshot { grid-template-columns: 1fr; gap: 18px; padding: 16px; }
  .ax-cmp { gap: 9px; }
  .fl-head { grid-template-columns: 52px 1fr auto 18px; }
  .fl-opp { grid-column: 2; grid-row: 1; }
  .fl-event { grid-column: 2; grid-row: 2; text-align: left; }
  .fl-thumb { grid-column: 3; grid-row: 1 / span 2; width: 96px; align-self: center; }
  .fl-chev { grid-column: 4; grid-row: 1 / span 2; align-self: center; }
}

/* ======================================================================
   HOME — fight-card landing system
   Scoped under .home so none of it touches the fighter / fight sub-pages.
   ====================================================================== */
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 30px 64px;
  position: relative;
  z-index: 1;
}

.home {
  /* ---- Hero ---- */
  .hero { position: relative; z-index: 0; padding: 54px 0 18px; }
  .kicker {
    display: inline-block; font: 800 13px 'Saira Condensed'; letter-spacing: .22em; text-transform: uppercase;
    color: #fff; background: var(--red); padding: 8px 16px; transform: skewX(-11deg); margin-bottom: 30px;
    box-shadow: 0 8px 30px rgba(255, 31, 31, .28);
  }
  .kicker span { display: inline-block; transform: skewX(11deg); }
  h1 {
    font-family: Anton; font-weight: 400; text-transform: uppercase; margin: 0;
    font-size: clamp(34px, 10vw, 132px); line-height: .9; letter-spacing: .005em; white-space: nowrap;
  }
  .l-out { color: transparent; -webkit-text-stroke: 2px var(--ink); }
  .l-num { color: var(--red); text-shadow: 0 0 70px rgba(255, 31, 31, .6), 0 0 4px rgba(255, 31, 31, .4); }
  .hero-body { display: grid; grid-template-columns: minmax(0, 1.1fr) auto; gap: 40px; align-items: end; margin-top: 30px; }
  .sub { max-width: 52ch; color: #cfd2d6; font-size: 18px; line-height: 1.55; margin: 0; }
  .meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
  .meta span {
    font: 700 13px 'Saira Condensed'; letter-spacing: .07em; text-transform: uppercase;
    border: 1px solid var(--line); padding: 10px 15px; color: #e9e9e9; border-radius: 4px;
  }
  .meta span.hot { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 6px 22px rgba(255, 31, 31, .25); }
  .meta span.gold { border-color: var(--line-gold); color: var(--gold); }

  /* ---- Main-event feature card: full-body cutouts replace headshots ---- */
  .fhead-feature .fcut { flex: none; height: clamp(230px, 24.5vw, 302px); width: auto; aspect-ratio: 46 / 70; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .55)); }
  .fhead-feature .fname.has-pic { position: relative; }
  .fhead-feature .flink { gap: 20px; }
  .fhead-feature .fname.has-pic::before {
    content: ""; position: absolute; bottom: 6px; width: 190px; height: 190px; border-radius: 50%; z-index: 0; pointer-events: none;
    background: radial-gradient(circle, rgba(216, 178, 94, .17), rgba(255, 31, 31, .06) 46%, transparent 64%);
  }
  .fhead-feature .fname:not(.right)::before { left: -12px; }
  .fhead-feature .fname.right::before { right: -12px; }
  .fhead-feature .fmeta { position: relative; z-index: 1; }
  .vs-orb {
    width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; flex: none;
    border: 1px solid var(--gold); color: var(--gold); font: 800 17px 'Saira Condensed'; letter-spacing: .04em;
    background: radial-gradient(circle at 50% 35%, var(--gold-soft), transparent 70%);
    animation: orbPulse 3.4s ease-in-out infinite;
  }

  /* ---- Card shell ---- */
  .card { margin-top: 34px; }
  .card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 30px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .card-head h2 { font-family: Anton; font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 5vw, 52px); margin: 0; letter-spacing: .01em; }
  .card-head .count { font: 700 12px 'Saira Condensed'; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

  .group-label { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; font: 800 13px 'Saira Condensed'; letter-spacing: .32em; text-transform: uppercase; color: var(--muted); }
  .group-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
  .group-label.gold { color: var(--gold); }
  .group-label.gold::after { background: var(--line-gold); }
  .card-group + .card-group { margin-top: 44px; }

  /* ---- Fight rows ---- */
  .fight {
    border: 1px solid var(--line); border-radius: 14px; margin-bottom: 14px; padding: 22px 24px; position: relative; overflow: hidden;
    background: rgba(255, 255, 255, .018); transition: border-color .22s var(--e-quart), transform .22s var(--e-quart), box-shadow .25s var(--e-quart);
  }
  .fight::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: linear-gradient(90deg, rgba(255, 31, 31, .14), transparent 60%); transition: opacity .22s var(--e-quart); }
  .fight.title { border-color: var(--line-gold); background: rgba(216, 178, 94, .04); }
  .fight.title::before { background: linear-gradient(90deg, rgba(216, 178, 94, .14), transparent 62%); }
  /* The card + title hover lift live in the touch-safe @media (hover: hover) block
     further down — applying them on touch made the whole-card link need two taps. */

  .fhead { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto; column-gap: 18px; row-gap: 16px; align-items: center; }
  .fhead > .me-head { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .fhead > .fname:not(.right) { grid-column: 1; grid-row: 2; justify-self: start; text-align: left; }
  .fhead > .vsm { grid-column: 2; grid-row: 2; }
  .fhead > .vs-orb { grid-column: 2; grid-row: 2; }
  .fhead > .fname.right { grid-column: 3; grid-row: 2; justify-self: end; text-align: right; }

  .me-head { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; position: relative; text-align: center; }
  .me-top { font: 800 13px 'Saira Condensed'; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); line-height: 1; }
  .me-sub { font: 700 10px Archivo; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
  .fight.title .me-head { padding: 0 30px; }
  .fight.title .me-top { color: var(--gold); font-size: 16px; letter-spacing: .2em; }
  .fight.title .me-head::before, .fight.title .me-head::after { content: ""; position: absolute; top: 50%; width: 20px; height: 1px; background: var(--gold); opacity: .6; }
  .fight.title .me-head::before { left: 0; }
  .fight.title .me-head::after { right: 0; }

  .fname { font: 800 23px 'Saira Condensed'; text-transform: uppercase; line-height: .98; letter-spacing: .01em; }
  .fname a { transition: color .2s var(--e-quart); }
  /* Fighter link wraps image + name. It carries the flex row itself (rather than
     display:contents) so it stays a real, keyboard-focusable box — display:contents
     anchors drop out of the tab order in Chromium, making fighter pages
     unreachable by keyboard. Layout is identical to the old contents model. */
  .flink { display: flex; align-items: center; gap: 14px; min-width: 0; }
  .flink > * { cursor: pointer; }
  /* A card with a fight page is clickable anywhere that isn't a fighter link. */
  .fight[data-href] { cursor: pointer; }
  .fight[data-href]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .fname .rec { display: block; font: 600 12px Archivo; letter-spacing: .06em; color: var(--muted); margin-top: 5px; font-feature-settings: "tnum" 1; }
  .fname.has-pic { display: flex; align-items: center; }
  .fname.has-pic.right .flink { flex-direction: row-reverse; }
  .fmeta { display: flex; flex-direction: column; min-width: 0; }
  .favatar {
    flex: none; border-radius: 50%; border: 3px solid var(--gold);
    background-color: #0e0e0e; background-repeat: no-repeat; background-size: cover; background-position: 50% 48%;
    box-shadow: 0 0 0 6px rgba(216, 178, 94, .10), 0 0 40px rgba(255, 31, 31, .32), 0 12px 28px rgba(0, 0, 0, .55);
    width: 96px; height: 96px;
  }
  .fight.title .favatar { width: 150px; height: 150px; }
  .fight.prelim .favatar { width: 76px; height: 76px; border-width: 2px; }
  .vsm { font: 800 14px 'Saira Condensed'; letter-spacing: .06em; color: var(--red); text-align: center; }
  .fight.title .vsm { color: var(--gold); font-size: clamp(18px, 2.4vw, 26px); }

  /* tier scale: title bouts dominate, prelims compress */
  .fight.title .fname { font-size: clamp(24px, 3.4vw, 38px); }
  .fight.prelim { padding: 16px 22px; }
  .fight.prelim .fname { font-size: 19px; }
  .fight.prelim .me-top { font-size: 12px; }

  .foot { color: var(--muted); font-size: 12px; margin-top: 30px; line-height: 1.6; max-width: 80ch; margin-inline: auto; text-align: center; text-wrap: balance; }
}

/* Home — responsive */
@media (max-width: 820px) {
  /* Keep the two fighters side-by-side (fighter | VS | fighter) instead of stacking
     them down the card — stack image-over-name *inside* each corner so two fit the
     narrow column. Mirrors the fight-page bout hero. */
  .home .fhead { column-gap: 8px; }
  .home .fname.has-pic .flink,
  .home .fname.has-pic.right .flink { flex-direction: column; gap: 8px; text-align: center; }
  .home .fmeta { align-items: center; text-align: center; }
  .home .fhead > .fname:not(.right) { justify-self: center; text-align: center; }
  .home .fhead > .fname.right { justify-self: center; text-align: center; }
  .home .fhead-feature .fcut { height: clamp(120px, 30vw, 180px); }
  .home .fhead-feature .flink { gap: 10px; }
  .home .fhead-feature .fname.has-pic::before { display: none; }
  .home .favatar { width: 84px; height: 84px; }
  .home .fight.title .favatar { width: 100px; height: 100px; }
  .home .fight.prelim .favatar { width: 64px; height: 64px; }
  .home .hero-body { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .home .nav-links a:not(.nav-cta) { display: none; }
}

/* Home — motion (reveal enhances an already-visible default) */
.js .reveal { opacity: 0; transform: translateY(20px); }
@media (prefers-reduced-motion: no-preference) {
  .reveal.in { animation: rise .7s var(--e-expo) forwards; }
  .d1 { animation-delay: .04s; } .d2 { animation-delay: .14s; } .d3 { animation-delay: .24s; } .d4 { animation-delay: .34s; } .d5 { animation-delay: .44s; }
  /* Stagger the bouts down the card — but cap the cascade so a longer card
     never lags past ~0.36s total (later rows would read as system lag, not rhythm). */
  .fight.reveal.in { animation-delay: min(calc(var(--i, 0) * 70ms), 360ms); }
  @keyframes rise { to { opacity: 1; transform: none; } }
  .js .l-num.in { animation: rise .7s var(--e-expo) forwards, numGlow 1.1s var(--e-quart) .2s 1; }
  @keyframes numGlow {
    0% { text-shadow: 0 0 0 rgba(255, 31, 31, 0), 0 0 0 rgba(255, 31, 31, 0); }
    40% { text-shadow: 0 0 120px rgba(255, 31, 31, .9), 0 0 18px rgba(255, 31, 31, .7); }
    100% { text-shadow: 0 0 70px rgba(255, 31, 31, .6), 0 0 4px rgba(255, 31, 31, .4); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .vs-orb { animation: none; }
  * { transition-duration: .01ms !important; }
}
@keyframes orbPulse {
  0%, 100% { box-shadow: 0 0 28px var(--gold-soft); }
  50% { box-shadow: 0 0 0 4px rgba(216, 178, 94, .06), 0 0 44px rgba(216, 178, 94, .32); }
}

/* ====================== Expert Predictions ====================== */
/* Gaethje's tally colour is a cool steel — gold stays reserved for the title framing. */
:root {
  --steel: #5b8fd6; --steel-deep: #2f5fa0;            /* blue corner (fighter B) — red-corner/blue-corner convention */
  --steel-soft: rgba(91, 143, 214, .24);              /* mirrors --red-soft for the blue corner */
  --bar-trough: #0e0f12;                              /* shared empty-bar/meter track */
}

/* Scoreboard tally — who picks whom. Text carries it; colour only reinforces (WCAG 1.4.1). */
.pred-tally {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 12px;
}
.pt-side { display: flex; flex-direction: column; gap: 2px; }
.pt-a { align-items: flex-end; text-align: right; }
.pt-b { align-items: flex-start; text-align: left; }
.pt-count { font-family: Anton; font-size: clamp(34px, 7vw, 54px); line-height: .85; }
.pt-a .pt-count { color: var(--red); }
.pt-b .pt-count { color: var(--steel); }
.pt-name { font: 800 13px 'Saira Condensed'; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.pt-bar { display: flex; width: min(46vw, 340px); height: 10px; background: #0e0f12; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.pt-fill { height: 100%; }
.pt-fill-a { background: linear-gradient(90deg, var(--red-deep), var(--red)); }
.pt-fill-b { background: linear-gradient(90deg, var(--steel-deep), var(--steel)); margin-left: auto; }
.pred-method-split { margin: 12px 2px 0; text-align: center; color: var(--muted); font: 500 14px Archivo; }

/* Scorecard matrix — every expert is one full-width row; the marker sits under the
   fighter they picked (or under Undecided). Scan a column to read the split top-to-bottom. */
.pred-matrix { --pcol: clamp(58px, 15vw, 104px); margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.pred-matrix-head, .pred-row-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) var(--pcol) var(--pcol) var(--pcol) 18px;
  align-items: center;
  gap: 14px;
}
.pred-matrix-head { padding: 2px 16px 6px; }
.pmh-expert { grid-column: 1 / 3; font: 800 12px 'Saira Condensed'; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.pmh-col { text-align: center; font: 800 12px 'Saira Condensed'; text-transform: uppercase; letter-spacing: .05em; line-height: 1.15; }
.pmh-a { color: var(--red); }
.pmh-b { color: var(--steel); }
.pmh-u { color: var(--muted); }

/* Row = native <details>: keyboard + screen-reader friendly, works with no JS. */
.pred-row { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; transition: border-color .2s ease; }
.pred-row[open] { border-color: rgba(255, 31, 31, .5); }
.pred-row.is-miss { opacity: .82; }
.pred-row.is-miss[open] { opacity: 1; }
.pred-row-head { list-style: none; cursor: pointer; padding: 14px 16px; transition: background .2s ease; }
.pred-row-head::-webkit-details-marker { display: none; }
.pred-row:hover .pred-row-head, .pred-row[open] .pred-row-head { background: linear-gradient(90deg, rgba(255, 31, 31, .10), transparent 72%); }

.pred-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.pred-avatar--mono { display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #2a1416, #15181b); border: 1px solid var(--line); color: var(--ink); font: 800 15px 'Saira Condensed'; }
.pred-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pred-name { font: 700 18px 'Saira Condensed'; text-transform: uppercase; letter-spacing: .01em; color: var(--ink); overflow-wrap: anywhere; }
.pred-tr { font: 500 12px Archivo; color: var(--muted); }

/* the three marker columns */
.pcell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 44px; }
.pcell-for { display: none; }
.pcell-method { font: 600 11px Archivo; color: var(--muted); letter-spacing: .02em; text-align: center; }
.pmark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; line-height: 1; border: 1.5px solid transparent; }
.pmark.is-pick    { color: var(--red);   background: rgba(255, 31, 31, .14);  border-color: rgba(255, 31, 31, .55); }
.pmark.is-hit     { color: #6fcf97;      background: rgba(111, 207, 151, .16); border-color: rgba(111, 207, 151, .5); }
.pmark.is-perfect { color: var(--gold);  background: rgba(216, 178, 94, .18);  border-color: var(--line-gold); }
.pmark.is-miss    { color: var(--steel); background: rgba(91, 143, 214, .12); border-color: rgba(91, 143, 214, .4); }
.pmark.is-undec   { color: var(--muted); background: rgba(255, 255, 255, .05); border-color: var(--line); }
/* Pre-fight pick marker mirrors the corner the expert picked — red corner red (default above),
   blue corner steel — so the icon's colour matches the tally counts and column headers. The
   fighter's name carries the pick too, so colour is never the sole indicator (WCAG 1.4.1).
   Undecided stays neutral grey (above), visibly distinct from a blue-corner pick. */
.pcell-b .pmark.is-pick { color: var(--steel); background: rgba(91, 143, 214, .14); border-color: rgba(91, 143, 214, .55); }

.pred-chev { width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s ease; justify-self: center; }
.pred-row[open] .pred-chev { transform: rotate(-135deg); }

.pred-body { padding: 2px 16px 16px 74px; }
.pred-reason { margin: 0 0 14px; color: var(--ink); font: 400 15px/1.55 Archivo; max-width: 62ch; }
.pred-quote { margin: 0 0 14px; padding: 0 0 0 14px; border-left: 2px solid var(--line); color: var(--ink); font: 400 16px/1.55 Archivo; font-style: italic; max-width: 62ch; }
.pred-points { margin: -4px 0 14px; padding: 0 0 0 18px; color: var(--ink); font: 400 14px/1.5 Archivo; max-width: 62ch; list-style: none; }
.pred-points li { position: relative; margin: 0 0 5px; }
.pred-points li::before { content: ""; position: absolute; left: -14px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--line-gold, currentColor); opacity: .8; }
.pred-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pred-source { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgba(255, 31, 31, .45); background: rgba(255, 31, 31, .08); color: var(--ink); border-radius: 999px; font: 700 13px 'Saira Condensed'; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.pred-source:hover { background: rgba(255, 31, 31, .18); border-color: var(--red); }
.pred-source-ico { color: var(--red); font-size: 10px; }
.pred-channel { color: var(--muted); font: 600 12px Archivo; letter-spacing: .01em; text-decoration: none; border-bottom: 1px solid transparent; }
.pred-channel:hover { color: var(--ink); border-bottom-color: var(--line); }
.pred-record { margin: 12px 0 0; color: var(--muted); font: 400 13px Archivo; }
/* caveat: an asterisk on the pick + an explanation in the body (e.g. a reaction-video pick) */
.pred-ast { color: var(--gold); font-weight: 800; margin-left: 1px; }
.pred-caveat { margin: -4px 0 14px; padding: 8px 12px; border: 1px solid var(--line-gold); background: rgba(216, 178, 94, .06); border-radius: 8px; color: var(--ink); font: 400 13px/1.5 Archivo; max-width: 62ch; }

/* Resolved (post-fight) mode — a different table: Predicted vs Actual vs Result.
   Status is label + icon in its own column; colour only reinforces it (WCAG 1.4.1). */
.pred-results { --rgrid: 44px minmax(110px, 1.3fr) minmax(92px, 1fr) minmax(92px, 1fr) minmax(118px, .95fr) 18px; margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.pred-results-head, .pred-results-rowhead { display: grid; grid-template-columns: var(--rgrid); align-items: center; gap: 14px; }
.pred-results-head { padding: 2px 16px 6px; }
.pred-results-head > span { font: 800 12px 'Saira Condensed'; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.prh-expert { grid-column: 1 / 3; }
.pred-results-rowhead { list-style: none; cursor: pointer; padding: 14px 16px; transition: background .2s ease; }
.pred-results-rowhead::-webkit-details-marker { display: none; }
.pred-row:hover .pred-results-rowhead, .pred-row[open] .pred-results-rowhead { background: linear-gradient(90deg, rgba(255, 31, 31, .10), transparent 72%); }
.rcell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rk { display: none; }
.rv { font: 700 14px 'Saira Condensed'; text-transform: uppercase; letter-spacing: .01em; color: var(--ink); overflow-wrap: anywhere; }
.rv-actual { color: var(--muted); }
.rflag { display: inline-flex; align-items: center; gap: 6px; font: 800 12px 'Saira Condensed'; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.rflag-ico { font-size: 13px; }
.rflag.is-perfect { color: var(--gold); }
.rflag.is-hit { color: #6fcf97; }
.rflag.is-miss { color: var(--steel); }
.rflag.is-none { color: var(--muted); }

/* Resolved (post-fight) mode — banner + winner emphasis on the tally */
.pred-result-banner { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--line-gold); background: rgba(216, 178, 94, .06); border-radius: 10px; }
.prb-label { font: 800 11px 'Saira Condensed'; text-transform: uppercase; letter-spacing: .16em; color: var(--gold); }
.prb-result { font: 800 18px 'Saira Condensed'; text-transform: uppercase; letter-spacing: .01em; color: var(--ink); }
.pt-side.is-winner .pt-count { text-shadow: 0 0 22px rgba(255, 31, 31, .45); }
.pt-side.is-winner .pt-name::after { content: " · winner"; color: var(--muted); font-weight: 600; }

/* visually-hidden text screen readers still announce (the markers carry meaning visually) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Odds (sportsbook consensus + Polymarket) ----------
   "What the markets say" — a peer to Expert Predictions. The hero is a vig-stripped sportsbook
   CONSENSUS (never a best-price board); Polymarket sits beneath as a compact sibling. Reuses the
   red-corner / blue-corner split-bar idiom (.pt-bar / .tape-row) so the reader reads it instantly as
   "where the money is". Gold stays reserved (this is data, not prestige). Data-not-brand: CSS/SVG
   only, never a logo, iframe, or operator link; a responsible-gambling notice rides the footer. */
.market-signal {
  margin-top: clamp(28px, 5vw, 46px);
  padding: clamp(18px, 3vw, 28px) clamp(16px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.market-signal .section-head { margin-bottom: 20px; }
.market-signal .section-head p { max-width: 58ch; }
.market-signal .section-head strong { font-weight: 700; color: var(--ink); }
.ms-src { color: var(--muted); }

/* Who wins — Anton percentages flanking the red/steel split bar.
   Two tracking tokens only: primary caps labels .12em (matches .pt-name), inline chips/captions .05em. */
.ms-wins__label, .ms-finish__label {
  margin: 0 0 12px;
  font: 800 12px 'Saira Condensed', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
}
.ms-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 2.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(10px, 2.5vw, 24px);
}
.ms-side { display: flex; flex-direction: column; min-width: 0; gap: 4px; }
.ms-side--a { align-items: flex-start; text-align: left; }
.ms-side--b { align-items: flex-end; text-align: right; }
.ms-pct {            /* paired with .pt-count (Expert Predictions tally) — keep the numeral treatment identical */
  font-family: Anton, system-ui, sans-serif;
  line-height: .85;
  font-size: clamp(34px, 7vw, 54px);
  font-variant-numeric: tabular-nums;
}
.ms-side--a .ms-pct { color: var(--red); }
.ms-side--b .ms-pct { color: var(--steel); }
.ms-name {
  font: 800 13px 'Saira Condensed', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink);
}
.ms-move {           /* one half-step quieter than the percentage (deep, not the headline --red/--steel) */
  font: 700 11px 'Saira Condensed', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.ms-move--red { color: var(--red-deep); }
.ms-move--blue { color: var(--steel-deep); }

/* The split bar — red grows from the left, steel from the right, meeting at the line's split.
   The favoured-side glow lives on the bar itself (an outset shadow on the inner fill would be
   clipped by this element's own overflow:hidden). Border carries ≥3:1 non-text contrast (1.4.11). */
.ms-bar {
  display: flex;
  height: 14px;
  background: var(--bar-trough);
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 2px;
  overflow: hidden;
}
.ms-bar.is-fav-red { box-shadow: 0 0 12px rgba(255, 31, 31, .45); }
.ms-bar.is-fav-blue { box-shadow: 0 0 12px rgba(91, 143, 214, .42); }
.ms-bar__a, .ms-bar__b { height: 100%; }
.ms-bar__a { background: linear-gradient(90deg, var(--red-deep), var(--red)); transform-origin: left center; }
.ms-bar__b { background: linear-gradient(90deg, var(--steel-deep), var(--steel)); transform-origin: right center; }
.ms-fav, .ms-steady {
  margin: 16px 0 0;
  font: 700 12px 'Saira Condensed', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  text-align: center;
}
.ms-steady { margin-top: 8px; font-size: 11px; }

/* Caption beneath a bar — the quiet sourcing detail (consensus book count + agreement range, or the
   Polymarket traded volume). Not uppercase: it carries numerals and an en-dash range. */
.ms-note {
  margin: 10px 0 0;
  font: 600 12px 'Saira Condensed', system-ui, sans-serif;
  letter-spacing: .03em;
  color: var(--muted);
  text-align: center;
}

/* Per-book detail — a native <details> of book-name + vig-stripped %. Chips, never a price grid:
   the consensus is the story, the individual books are the footnote (and we show no best-price line). */
.ms-books { margin-top: 16px; }
.ms-books summary {
  cursor: pointer;
  font: 700 12px 'Saira Condensed', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding: 6px 0;
}
.ms-books summary:hover { color: var(--ink); }
.ms-books summary:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 2px;
}
.ms-chips {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ms-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bar-trough);
}
.ms-chip__book {
  font: 700 11px 'Saira Condensed', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.ms-chip__pct {
  font: 400 13px Anton, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.ms-books__foot { margin: 12px 0 0; font-size: 11px; color: var(--muted); max-width: 58ch; }

/* Polymarket as the compact sibling beneath the sportsbook consensus — deliberately demoted: a hairline
   divider above, smaller numerals, a slimmer bar. (With NO consensus it renders as a full .ms-wins hero
   instead, so this class only fires in the two-source layout.) */
.ms-wins--pm {
  margin-top: clamp(22px, 3.5vw, 30px);
  padding-top: clamp(20px, 3vw, 26px);
  border-top: 1px solid var(--line);
}
.ms-wins--pm .ms-pct { font-size: clamp(26px, 5vw, 38px); }
.ms-wins--pm .ms-bar { height: 11px; }

/* Finish or decision — one market, one number. A COMPACT inline gauge (not a full-width bar), so it
   never reads as a third corner stat competing with the red/steel who-wins split bar above. */
.ms-finish { margin-top: clamp(20px, 3vw, 28px); }
.ms-finish__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ms-meter {
  flex: 0 0 140px;
  width: 140px;
  height: 8px;
  background: var(--bar-trough);
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 2px;
  overflow: hidden;
}
.ms-meter span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(246, 244, 239, .5), rgba(246, 244, 239, .92));
  transform-origin: left center;
}
.ms-finish__cap { margin: 0; font-size: 14px; color: var(--ink); }
.ms-finish__cap strong { font-weight: 800; }
.ms-thin {
  margin-left: 8px;
  font: 700 11px 'Saira Condensed', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}

/* Footer — quiet sourcing strip, set off by a hairline. */
.market-signal__meta {
  margin: clamp(16px, 3vw, 24px) 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.market-signal__meta .ms-nba { font-weight: 700; color: var(--muted); }
.market-signal__meta .ms-age { font-weight: 700; }
.market-signal__meta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.market-signal__meta a:hover { color: var(--ink); }
.market-signal__meta a:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Motion — bars grow from their anchored edge as they scroll into view. Pure CSS (fight pages ship
   no reveal JS): scroll-driven where supported, full-width fallback everywhere else, flattened for
   reduced motion. transform: scaleX (GPU-friendly), never animating width/layout. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ms-bar__a, .ms-bar__b, .ms-meter span {
      animation: ms-grow linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 28%;
    }
    @keyframes ms-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}

/* Stack early (≤680px): below this the 3-col flank squeezes long fighter names + Anton percentages
   into overlapping side tracks. Numbers ride one row, the bar spans full width beneath. */
@media (max-width: 680px) {
  .ms-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "a b" "bar bar";
    row-gap: 16px;
  }
  .ms-side--a { grid-area: a; }
  .ms-side--b { grid-area: b; }
  .ms-bar { grid-area: bar; }
}

@media (max-width: 760px) {
  .pt-bar { width: 28vw; }
  .pred-name { font-size: 16px; }
  .pred-body { padding-left: 16px; }
  /* collapse the grid: hide the column header, stack name over an inline pick badge */
  .pred-matrix-head { display: none; }
  .pred-row-head { grid-template-columns: 44px 1fr auto; gap: 6px 12px; }
  .pred-row-head > .pred-avatar { grid-column: 1; grid-row: 1; }
  .pred-id { grid-column: 2; grid-row: 1; }
  .pred-row-head > .pred-chev { grid-column: 3; grid-row: 1; justify-self: end; align-self: center; }
  .pcell { display: none; }
  .pcell.is-active { display: flex; flex-direction: row; align-items: center; gap: 8px; grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; min-height: 0; padding-left: 56px; }
  .pcell-for { display: inline; font: 800 14px 'Saira Condensed'; text-transform: uppercase; letter-spacing: .01em; color: var(--ink); }
  .pcell.is-active .pcell-method::before { content: "· "; }
  .pcell.is-active .pmark { width: 22px; height: 22px; font-size: 12px; }
  /* results table: drop the header, stack Predicted / Actual / Result as labelled rows */
  .pred-results-head { display: none; }
  .pred-results-rowhead { grid-template-columns: 44px 1fr auto; gap: 6px 12px; }
  .pred-results-rowhead > .pred-avatar { grid-column: 1; grid-row: 1; }
  .pred-results-rowhead > .pred-id { grid-column: 2; grid-row: 1; }
  .pred-results-rowhead > .pred-chev { grid-column: 3; grid-row: 1; justify-self: end; align-self: center; }
  .rcell { flex-direction: row; align-items: baseline; gap: 8px; grid-column: 1 / -1; padding-left: 56px; }
  .rk { display: inline; flex: none; min-width: 72px; font: 800 11px 'Saira Condensed'; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
}

/* ====================== Empty state · 404 / coming-soon ====================== */
/* Reuses the home hero language (skew kicker, outline word + red-glow word) for
   a single dominant idea per fold. Inherits the global red-glow canvas + grain. */
.oops {
  min-height: clamp(500px, 76vh, 760px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 32px 0 56px;
}
.oops .kicker {
  display: inline-block; font: 800 13px 'Saira Condensed'; letter-spacing: .22em; text-transform: uppercase;
  color: #fff; background: var(--red); padding: 8px 16px; transform: skewX(-11deg); margin-bottom: 30px;
  box-shadow: 0 8px 30px rgba(255, 31, 31, .28);
}
.oops .kicker span { display: inline-block; transform: skewX(11deg); }
.oops h1 {
  font-family: Anton; font-weight: 400; text-transform: uppercase; margin: 0;
  font-size: clamp(58px, 13vw, 178px); line-height: .82; letter-spacing: .005em; text-wrap: balance;
}
.oops .l-out { display: block; color: transparent; -webkit-text-stroke: 2px var(--ink); }
.oops .l-num { display: block; color: var(--red); text-shadow: 0 0 70px rgba(255, 31, 31, .6), 0 0 4px rgba(255, 31, 31, .4); }
.oops .sub { max-width: 52ch; color: #cfd2d6; font-size: clamp(16px, 2.2vw, 19px); line-height: 1.55; margin: 28px 0 0; }
.oops .meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.oops .meta span {
  font: 700 13px 'Saira Condensed'; letter-spacing: .07em; text-transform: uppercase;
  border: 1px solid var(--line); padding: 10px 15px; color: #e9e9e9; border-radius: 4px;
}
.oops .meta span.gold { border-color: var(--line-gold); color: var(--gold); }
.oops .meta span.hot { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 6px 22px rgba(255, 31, 31, .25); }

.oops-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.oops-actions a {
  font: 800 14px 'Saira Condensed'; letter-spacing: .08em; text-transform: uppercase;
  padding: 14px 24px; border-radius: 6px; transition: transform .22s var(--e-quart), box-shadow .25s var(--e-quart), border-color .2s var(--e-quart), color .2s var(--e-quart);
}
.oops-actions .btn-primary { background: var(--red); color: #fff; box-shadow: 0 10px 30px rgba(255, 31, 31, .28); }
.oops-actions .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(255, 31, 31, .4); }
.oops-actions .btn-ghost { border: 1px solid var(--line-gold); color: var(--gold); }
.oops-actions .btn-ghost:hover { border-color: var(--gold); box-shadow: 0 0 26px rgba(216, 178, 94, .22); }
.oops-actions a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.oops-foot {
  color: var(--muted); font-size: 12px; line-height: 1.6; max-width: 80ch;
  margin: 8px 0 0; border-top: 1px solid var(--line); padding-top: 22px; text-wrap: balance;
}

@media (max-width: 560px) {
  .oops { min-height: 70vh; }
  .oops-actions { width: 100%; }
  .oops-actions a { flex: 1 1 auto; text-align: center; }
}

/* ====================================================================== */
/* Home — added motion layer (parallax · sticky nav · hover zoom · atmos) */
/* Smooth, meaningful, low-distraction. Everything degrades to an already- */
/* visible, usable default and is neutralised under reduced-motion.        */
/* ====================================================================== */

/* ---- 1. Sticky nav condense ---------------------------------------- */
/* Nav docks to the top and frosts over the card once you leave the hero. */
.home .nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  margin-inline: -30px;            /* span the full content column ... */
  padding-inline: 30px;            /* ... then re-inset the contents   */
  border-bottom: 1px solid transparent;
  contain: layout;                 /* scope the padding-condense reflow to the bar */
  transition: padding .28s var(--e-quart), background .28s var(--e-quart),
              box-shadow .28s var(--e-quart), border-color .28s var(--e-quart);
}
.home .nav.scrolled {
  padding-top: 10px;
  padding-bottom: 10px;
  background: rgba(8, 8, 8, .72);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  border-bottom-color: var(--line-gold);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
/* No backdrop-filter (older Firefox): lean on a more opaque bg so the docked
   bar still reads cleanly over scrolled content — no frost, no contrast loss. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .home .nav.scrolled { background: rgba(8, 8, 8, .94); }
}

/* ---- 2. Hero atmosphere -------------------------------------------- */
/* A slow breathing red wash behind the headline. Sits below hero text.  */
.home .hero::before {
  content: "";
  position: absolute;
  z-index: var(--z-hero-glow);
  pointer-events: none;
  /* Box edges sit well outside the viewport on every side AND a soft mask fades
     the rectangle's own bounds to nothing, so the box can never clip the still-
     coloured gradient into a hard line — structurally seam-proof, not just by
     keeping edges off-screen (survives anything later added above the hero). */
  inset: -180px -280px -140px;
  background: radial-gradient(52% 58% at 76% 22%, rgba(255, 31, 31, .20), transparent 68%);
  -webkit-mask-image: radial-gradient(72% 72% at 76% 22%, #000 55%, transparent 100%);
  mask-image: radial-gradient(72% 72% at 76% 22%, #000 55%, transparent 100%);
}
@media (prefers-reduced-motion: no-preference) {
  /* Opacity-only breathing — no transform, so there's no scaled-layer seam.
     Gentle amplitude + slow 12s cycle so it reads as ambient depth, not a
     pulse that keeps re-catching the eye during long card-reading sessions. */
  .home .hero::before { animation: heroBreath 12s ease-in-out infinite; }

  /* Scroll parallax: the red glow drifts up a touch as the hero scrolls away,
     so the backdrop and the headline/cutouts separate into two depth planes.
     Layered onto the breathing as a second, scroll-timed animation — composited
     (transform only) and bounded to the first viewport of scroll. The glow box
     is oversized + radial-masked, so a 34px drift stays inside its own fade and
     can't expose a hard edge. Where scroll-timelines aren't supported it's just
     absent; reduced-motion drops it with the rest. */
  @supports (animation-timeline: scroll()) {
    .home .hero::before {
      animation: heroBreath 12s ease-in-out infinite, heroDrift auto linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 90vh;
    }
  }
}
@keyframes heroBreath {
  0%, 100% { opacity: .72; }
  50%      { opacity: .94; }
}
@keyframes heroDrift { to { transform: translate3d(0, -34px, 0); } }

/* Gold broadcast hairline that wipes across the main-event card on reveal. */
.home .fight.title::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  pointer-events: none;
  transform-origin: left;          /* true left-to-right wipe, not a centre fade */
  opacity: .85;
  background: linear-gradient(90deg, transparent, var(--gold) 28%, var(--gold) 72%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .js .fight.title.reveal::after { transform: scaleX(0); }
  /* ~0.7s total (delay + draw) keeps the reveal inside the Doherty budget so
     fast scanners aren't reading the names while a line is still crossing them. */
  .js .fight.title.reveal.in::after { animation: hairlineWipe .58s var(--e-expo) .12s forwards; }
}
@keyframes hairlineWipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- 3. Hero cutout parallax (JS sets --px / --py / --rot) ---------- */
/* Scale lives in --sc so hover-zoom and parallax compose in one transform.
   No `will-change`: translate3d already promotes a compositor layer, so a
   permanent will-change would only pin idle layers for no gain. */
.home .fhead-feature .fcut {
  transform: translate3d(var(--px, 0), var(--py, 0), 0) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  transition: transform .22s var(--e-quart);
}
.home .fhead-feature .fname.has-pic:focus-within .fcut { --sc: 1.04; }

/* ---- 4. Fighter image + name zoom, sharper row hover / tap ---------- */
/* Two distinct, honest affordances per row:
   - the fighter NAME/PHOTO is its own link (→ fighter page): it grows AND draws
     a link underline, so it reads unmistakably as "a link to this fighter";
   - the surrounding CARD is a separate link (→ fight page): it keeps the panel
     lift + red wash from the base rules.
   Every :hover is mirrored with :focus-within so keyboard users get the same
   discovery cues (WCAG 2.1.1 / 2.4.7). */
.home .favatar {
  transition: transform .28s var(--e-quart), box-shadow .28s var(--e-quart), border-color .28s var(--e-quart);
}
.home .fname.has-pic:focus-within .favatar {
  transform: scale(1.06);
  box-shadow: 0 0 0 6px rgba(216, 178, 94, .14), 0 0 50px rgba(255, 31, 31, .45), 0 14px 30px rgba(0, 0, 0, .6);
}
.home .fnm {
  position: relative;
  display: inline-block;
  transition: transform .28s var(--e-quart), color .2s var(--e-quart);
}
.home .fname:not(.right) .fnm { transform-origin: left center; }
.home .fname.right .fnm       { transform-origin: right center; }
.home .fname.has-pic:focus-within .fnm { transform: scale(1.05); color: var(--red); }

/* Link underline — the signal that the name is its own click target. Draws in
   from the leading edge on hover/focus; absent at rest so the poster stays clean. */
.home .fname.has-pic .fnm::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: currentColor;          /* tracks the name's hover red */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--e-quart);
}
.home .fname.right .fnm::after { transform-origin: right; }
.home .fname.has-pic:focus-within .fnm::after { transform: scaleX(1); }

/* VS marks react when you hover/focus into the whole row. Held to 1.06 (matching
   the orb) so the loudest motion is never on a non-interactive decoration. */
.home .vsm { display: inline-block; transition: transform .22s var(--e-quart), color .2s var(--e-quart); }
.home .fight:focus-within .vsm   { transform: scale(1.06); }
/* Only the regular red VS brightens; a title bout's gold VS keeps its prestige
   colour (just scales) so gold stays reserved — never flashes red on hover. */
.home .fight:not(.title):focus-within .vsm { color: var(--red-hot); }
.home .vs-orb { transition: transform .26s var(--e-quart); }
.home .fight:focus-within .vs-orb { transform: scale(1.06); }

/* Press feedback — acknowledges a tap on touch as well as click. */
.home .fight:active { transform: translateY(-1px) scale(.995); }

/* ---- Touch-safe hover ------------------------------------------------ */
/* Every home-page hover affordance is gated to a real hover-capable pointer.
   On touch (iOS especially) a tap on an element that has :hover styles is
   consumed showing the hover state, and the click only fires on a SECOND tap —
   so the whole-card fight link needed two taps to open. The :focus-within
   mirrors above stay unguarded (keyboard cues intact) and :active press
   feedback stays for touch; only the hover halves move in here. */
@media (hover: hover) {
  .home .fight:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, .4); }
  .home .fight:hover::before { opacity: 1; }
  .home .fight.title:hover { border-color: var(--gold); box-shadow: 0 14px 38px rgba(0, 0, 0, .45); }
  .home .fname a:hover { color: var(--red); }
  .home .fhead-feature .fname.has-pic:hover .fcut { --sc: 1.04; }
  .home .fname.has-pic:hover .favatar {
    transform: scale(1.06);
    box-shadow: 0 0 0 6px rgba(216, 178, 94, .14), 0 0 50px rgba(255, 31, 31, .45), 0 14px 30px rgba(0, 0, 0, .6);
  }
  .home .fname.has-pic:hover .fnm { transform: scale(1.05); color: var(--red); }
  .home .fname.has-pic:hover .fnm::after { transform: scaleX(1); }
  .home .fight:hover .vsm { transform: scale(1.06); }
  .home .fight:not(.title):hover .vsm { color: var(--red-hot); }
  .home .fight:hover .vs-orb { transform: scale(1.06); }
}

/* Touch-safe hover — fight + fighter sub-pages. Same rationale as the home block
   above: these are real tap targets (the next-fight card, video tiles and
   thumbnails, the linked fighter card, the expandable record rows), so an
   unguarded :hover made the first tap reveal the hover state instead of acting
   on it. Focus rings (native / :focus-visible) still give keyboard users a cue,
   and .fl-row[open] keeps its expanded-state highlight unconditionally. */
@media (hover: hover) {
  .next-fight:hover { border-color: var(--gold); box-shadow: 0 14px 34px rgba(0, 0, 0, .4); transform: translateY(-2px); }
  .next-fight:hover .next-cta { transform: translateX(3px); }
  .corner .fname a:hover { color: var(--red); }
  .tape-head a:hover { color: var(--red); }
  .fl-row:hover .fl-head { background: linear-gradient(90deg, rgba(215, 25, 32, .09), transparent 72%); }
  .fl-thumb:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
  .vtile:hover { border-color: var(--red); transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0, 0, 0, .45); }
  .fcard:hover { border-color: rgba(215, 25, 32, .45); }
}

/* ---- Reduced-motion: kill the looping / wiping animations ----------- */
/* Hover/press TRANSITIONS (scale, colour, underline draw) are flattened to
   instant by the global `* { transition-duration: .01ms !important }` rule in
   the existing reduced-motion block above — so the affordances still APPEAR
   (name still reddens + underlines on hover/focus), they just don't animate.
   Only the looping/one-shot keyframe animations need explicit silencing here. */
@media (prefers-reduced-motion: reduce) {
  .home .hero::before { animation: none; }
  .js .fight.title.reveal::after,
  .js .fight.title.reveal.in::after { animation: none; transform: scaleX(1); }
}

/* ====================== Expert pages ====================== */
/* Header — quiet identity block (avatar reuses .pred-avatar; an expert isn't a fighter, so no hype). */
.ehead { display: grid; gap: 14px; }
.ehead-id { display: flex; align-items: center; gap: 16px; }
.ehead .pred-avatar { width: 64px; height: 64px; font-size: 22px; flex: none; }
.ehead-meta h1 { margin: 0; font: 400 clamp(30px, 6vw, 48px)/0.98 'Anton', sans-serif; letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
.ehead-role { margin-top: 4px; font: 800 13px 'Saira Condensed', sans-serif; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); }
.ehead-handle { font: 600 13px 'Archivo', 'Inter', sans-serif; color: var(--muted); margin-top: 2px; }
.ehead-blurb { color: var(--muted); max-width: 65ch; margin: 0; }
.ehead-channel { font: 700 13px 'Saira Condensed', sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); width: fit-content; padding-bottom: 1px; }
.ehead-channel:hover { color: var(--red); border-color: var(--red); }

/* Track-record totals strip — denominator headline + Hits / Misses / Perfect (icon + label, not colour alone). */
.etr { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: grid; gap: 16px; }
.etr-headline { margin: 0; font: 800 clamp(20px, 3.4vw, 28px) 'Saira Condensed', sans-serif; text-transform: uppercase; letter-spacing: .01em; color: var(--ink); }
.etr-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.etr-cell { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px; text-align: center; display: grid; gap: 4px; }
.etr-cell b { font: 400 30px 'Anton', sans-serif; color: var(--ink); font-feature-settings: "tnum"; }
.etr-cell span { font: 700 11px 'Saira Condensed', sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.etr-ico { font-size: 12px; }

/* Call rows — one per prediction (reuses .pred-body / .pred-chev / .rflag / .rk / .rv). */
.ecalls { display: grid; gap: 8px; }
.ecall { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ecall.is-miss { opacity: .85; }
.ecall.is-miss[open] { opacity: 1; }
.ecall-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 16px; cursor: pointer; list-style: none; transition: background .2s ease; }
.ecall-head::-webkit-details-marker { display: none; }
.ecall:hover .ecall-head, .ecall[open] .ecall-head { background: linear-gradient(90deg, rgba(255, 31, 31, .10), transparent 72%); }
.ecall-fight { font: 800 15px 'Saira Condensed', sans-serif; text-transform: uppercase; letter-spacing: .02em; color: var(--ink); text-decoration: none; flex: 1 1 160px; min-width: 0; }
a.ecall-fight:hover { color: var(--red); }
.ecall-c { display: flex; align-items: baseline; gap: 8px; }
.ecall-c .rk { display: inline; font: 800 10px 'Saira Condensed', sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); min-width: 62px; }
.ecall-flag { margin-left: auto; }
.ecall .pred-chev { flex: none; }
.ecalls-empty { color: var(--muted); background: var(--panel); border: 1px dashed var(--line); border-radius: 12px; padding: 18px; margin: 0; }
.rflag.is-pending { color: var(--muted); }

/* Roster index */
.ecards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ecard { display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.ecard:hover { border-color: var(--red); transform: translateY(-1px); }
.ecard .pred-avatar { width: 48px; height: 48px; font-size: 17px; flex: none; }
.ecard-body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ecard-name { font: 800 16px 'Saira Condensed', sans-serif; text-transform: uppercase; letter-spacing: .01em; color: var(--ink); }
.ecard-role { font: 700 11px 'Saira Condensed', sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); }
.ecard-tr { font: 600 12px 'Archivo', 'Inter', sans-serif; color: var(--muted); }
.ecard-cta { color: var(--muted); font-size: 18px; flex: none; }
.ecard:hover .ecard-cta { color: var(--red); }

@media (max-width: 560px) {
  .etr-cells { grid-template-columns: 1fr; }
  .ecall-flag { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ecard:hover { transform: none; }
}

/* ====================================================================== */
/* Video Library — search + filter controls and the gallery grid          */
/* ====================================================================== */
.vlib-controls {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 12px;
  margin-bottom: 4px;
  /* fade the page out behind the bar so cards don't bleed under it */
  background: linear-gradient(180deg, var(--bg) 72%, transparent);
}
.vsearch { position: relative; flex: 1 1 260px; max-width: 440px; min-width: 220px; }
.vsearch::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .7;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E");
}
.vsearch-input {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font: 500 15px 'Archivo', 'Inter', sans-serif;
  padding: 11px 18px 11px 44px;
  transition: border-color .2s var(--e-quart), box-shadow .2s var(--e-quart);
}
.vsearch-input::placeholder { color: var(--muted); }
.vsearch-input:hover { border-color: var(--line-gold); }
.vsearch-input:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-color: var(--red);
}
/* clear the type-search reveal/clear pseudo so it doesn't clash with our pill */
.vsearch-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.vchips { display: flex; flex-wrap: wrap; gap: 8px; }
.vchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 15px;
  font: 700 11px 'Saira Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: .09em;
  cursor: pointer;
  transition: border-color .2s var(--e-quart), color .2s var(--e-quart), background .2s var(--e-quart);
}
.vchip:hover { color: var(--ink); border-color: var(--line-gold); }
.vchip[aria-pressed="true"] { color: #fff; background: var(--red-deep); border-color: var(--red); }
.vchip:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.vchip-n { font: 700 11px 'Archivo', sans-serif; font-variant-numeric: tabular-nums; opacity: .8; }
.vchip[aria-pressed="true"] .vchip-n { opacity: 1; }

.vlib-count {
  color: var(--muted);
  font: 600 12px 'Archivo', 'Inter', sans-serif;
  letter-spacing: .04em;
  margin: 0 0 18px;
}

.vgallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 18px;
}
.vcard { height: 100%; }
.vcard[hidden] { display: none; }
/* match the gallery's red focus identity (controls use red; the site default is gold) */
.vcard:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* the thumbnail layer: lazy <img> at the back, gradient, then badge + play on top */
.vcard .vthumb { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.vcard-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  background: #0c0c0e;
}
.vcard .vthumb::before { z-index: 1; }
.vcard .vthumb .play { position: relative; z-index: 2; }

.vcard-cat {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
  font: 800 10px 'Saira Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink); /* the WORD carries the category; colour only reinforces */
  background: rgba(8, 8, 8, .82);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 5px;
  padding: 4px 8px;
}
.vcard-cat--fight { border-left-color: var(--gold); }
.vcard-cat--highlight { border-left-color: var(--red); }
.vcard-cat--prediction { border-left-color: var(--steel); }

.vcard-meta {
  color: var(--muted);
  font: 600 12px 'Archivo', 'Inter', sans-serif;
  letter-spacing: .01em;
  padding: 5px 16px 0;
}
/* keep cards even: clamp the blurb to three lines */
.vcard .vtile-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.vlib-empty {
  color: var(--muted);
  font: 500 15px 'Archivo', 'Inter', sans-serif;
  text-align: center;
  padding: 48px 16px;
}
.vlib-reset {
  background: none;
  border: 0;
  color: var(--red);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vlib-reset:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 3px; }

@media (max-width: 560px) {
  .vlib-controls { gap: 12px; }
  .vsearch { max-width: none; }
  .vgallery { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
}

/* Hand-off links: fighter / fight / expert pages → the library (deep-linked) */
.vlib-out { margin: 18px 0 0; }
.vlib-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 800 13px 'Saira Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  transition: border-color .2s var(--e-quart), color .2s var(--e-quart), background .2s var(--e-quart);
}
.vlib-link:hover { border-color: var(--red); color: #fff; background: var(--red-deep); }
.vlib-link span { transition: transform .2s var(--e-quart); }
.vlib-link:hover span { transform: translateX(3px); }
.vlib-link:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Homepage promo band */
.vlib-promo {
  margin-top: 28px;
  padding: 20px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.vlib-promo p {
  margin: 0;
  color: var(--ink);
  font: 700 clamp(15px, 2.4vw, 19px) 'Saira Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* ---------- Mobile nav disclosure (native <details> — no JS, file://-safe) ---------- */
.nav-mobile { display: none; position: relative; }
.nav-mobile > summary {
  list-style: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.nav-mobile > summary::-webkit-details-marker { display: none; }
.nav-mobile > summary::marker { content: ""; }
.nav-mobile > summary:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.nav-mobile[open] > summary { border-color: var(--red); }
/* three-bar "hamburger" built from one span + its two pseudos */
.nav-burger-bars,
.nav-burger-bars::before,
.nav-burger-bars::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}
.nav-burger-bars { position: relative; }
.nav-burger-bars::before { position: absolute; top: -6px; left: 0; }
.nav-burger-bars::after { position: absolute; top: 6px; left: 0; }
.nav-drawer {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
  display: grid;
  gap: 2px;
  min-width: 190px;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
.nav-drawer a {
  display: block;
  padding: 11px 12px;
  border-radius: 8px;
  font: 700 13px 'Saira Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  text-decoration: none;
}
.nav-drawer a:hover,
.nav-drawer a:focus-visible { color: var(--ink); background: var(--panel-2); }
.nav-drawer a[aria-current="page"] { color: var(--ink); }

@media (max-width: 900px) {
  .nav-mobile { display: block; }
}

/* ---------- Fighters directory (fighters/index.html) ---------- */
/* Controls are progressive enhancement: hidden until JS adds html.js, so there's never a
   dead-looking search box / select when the script doesn't run. */
.fdir-controls { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
html:not(.js) .fdir-controls { display: none; }
.fdir-field { display: grid; gap: 6px; flex: 1 1 220px; min-width: 0; }
.fdir-field label { font: 700 11px 'Saira Condensed', sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.fdir-field input, .fdir-field select {
  width: 100%; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 13px; color: var(--ink); font: 600 14px 'Archivo', 'Inter', sans-serif;
}
.fdir-field input::placeholder { color: var(--muted); }
.fdir-field input:focus-visible, .fdir-field select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--gold); }
.fdir-status { color: var(--muted); font: 600 12px 'Archivo', 'Inter', sans-serif; margin: 0 0 14px; }
.fdir-empty { color: var(--muted); background: var(--panel); border: 1px dashed var(--line); border-radius: 12px; padding: 18px; margin: 14px 0 0; }

.fdir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.fdir-card { display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
a.fdir-card:hover { border-color: var(--red); transform: translateY(-1px); }
/* A filtered-out card must stay gone even if a future class rule sets display on .fdir-card. */
.fdir-card[hidden] { display: none !important; }
.fdir-card.is-unprofiled { opacity: .82; }
.fdir-avatar { flex: none; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; background: #0e0e0e; border: 2px solid var(--line-gold); }
.fdir-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; }
.fdir-avatar--mono { display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #2a1416, #15181b); border: 1px solid var(--line); color: var(--ink); font: 800 16px 'Saira Condensed', sans-serif; }
.fdir-body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.fdir-name { font: 800 16px 'Saira Condensed', sans-serif; text-transform: uppercase; letter-spacing: .01em; color: var(--ink); }
.fdir-meta { font: 600 12px 'Archivo', 'Inter', sans-serif; color: var(--muted); }
.fdir-cta { color: var(--muted); font-size: 18px; flex: none; }
a.fdir-card:hover .fdir-cta { color: var(--red); }
.fdir-badge { flex: none; font: 700 10px 'Saira Condensed', sans-serif; text-transform: uppercase; letter-spacing: .07em; color: var(--gold); border: 1px solid var(--line-gold); border-radius: 999px; padding: 4px 9px; }

@media (prefers-reduced-motion: reduce) {
  a.fdir-card:hover { transform: none; }
}