/* fightschedule.live — the site's design system (approved 2026-10-14; ported from the redesign mocks:
   landing/hybrid4/hybrid.css with its generated card block frozen in place, plus the shared parts of the list and
   fight pages' CSS). Markup: templates/_ui.html macros. Logic: design.py. Behaviour: static/js/site.js.
   Page-only rules live in site-<page>.css files. Admin pages use Flask-Admin's Bootstrap and never load this file.

   ONE composition on ONE grid: 12 columns, 1360px max content, 40px outer margins at 1440, 24px column gaps.
   Desktop >= 1024px: header (one 64px row) -> the next big fights (two poster cards, or one) -> ONE schedule table
   -> results -> footer. Phone: header + nav row -> stacked poster -> one card list.
   One sport marker everywhere: a 3px bar on the time (red UFC, amber boxing).
   Type: display (Big Shoulders): poster names (fitted) · poster time 52-84 · table time 28 · table names 24
         text (Instrument Sans): 15 · 14 · 13 · 12 (headings 21-22). Radii: 8 controls, 12 cards.
   Rejected by the owner, never to appear: oval / cameo vignettes, radial spotlights, grey slabs behind photos,
   halos or glows behind text, clip-art silhouettes, ring-rope art, amber / sepia photo fields, tinted pill badges. */

/* ---------- fonts: self-hosted latin subsets, metric-adjusted local fallbacks ---------- */
@font-face { font-family: 'Big Shoulders'; font-style: normal; font-weight: 800 900; font-display: swap;
  src: url(../fonts/bs-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Big Shoulders'; font-style: normal; font-weight: 800 900; font-display: swap;
  src: url(../fonts/bs-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/is-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/is-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'BS Narrow'; font-weight: 800 900;
  src: local('Arial Narrow Bold'), local('ArialNarrow-Bold'), local('Roboto Condensed Bold'), local('RobotoCondensed-Bold');
  size-adjust: 85%; ascent-override: 92%; descent-override: 24%; }
@font-face { font-family: 'BS Wide'; font-weight: 800 900;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Helvetica Bold');
  size-adjust: 69%; ascent-override: 92%; descent-override: 24%; }
@font-face { font-family: 'IS Fallback'; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Helvetica');
  size-adjust: 98.5%; }

:root {
  --bg: #0B0B0C;
  --s1: #141415;
  --s2: #1B1B1D;
  --s3: #26262A;
  --line: rgba(255, 255, 255, .075);
  --line2: rgba(255, 255, 255, .14);
  --t1: #F3F2EE;
  --t2: #ABAAA4;
  --t3: #8E8D87;
  --ufc: #E5251F;
  --box: #F5A524;
  --win: #22C55E;
  --live: #FF4A3D;
  --focus: #F3F2EE;
  --f-d: 'Big Shoulders', 'BS Narrow', 'BS Wide', 'Arial Narrow', sans-serif;
  --f-t: 'Instrument Sans', 'IS Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --r: 8px;
  --r2: 12px;
  --maxw: 1360px;
  --gut: 16px;
  --cg: 24px;
}
@media (min-width: 700px) { :root { --gut: 32px; } }
@media (min-width: 1200px) { :root { --gut: 40px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; background: var(--bg); scroll-padding-top: 16px; }
body { margin: 0; background: var(--bg); color: var(--t1); font: 400 15px/1.5 var(--f-t); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wrap { width: min(var(--maxw), 100% - 2 * var(--gut)); margin-inline: auto; }
.ic { width: 16px; height: 16px; flex: none; }
time { font-variant-numeric: tabular-nums; }
.sep { white-space: pre; color: var(--t3); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: var(--r); background: var(--t1); color: var(--bg); font-weight: 600; }
.skip:focus { top: 12px; }
svg.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* the sport: one marker, a 3px bar on the time. It starts the column (the time's digits follow 11px later), so
   the bar is the ink on the grid edge. */
.ufc { --sport: var(--ufc); }
.boxing { --sport: var(--box); }
.tm { position: relative; display: inline-block; padding-left: 11px; }
.tm::before { content: ""; position: absolute; left: 0; top: .12em; bottom: .12em; width: 3px; border-radius: 1px; background: var(--sport, var(--t3)); }
.kick { font: 600 12px/1.25 var(--f-t); letter-spacing: .05em; text-transform: uppercase; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kick.nil { display: none; }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 18px; border-radius: var(--r); font: 600 15px var(--f-t); white-space: nowrap; transition: transform 120ms var(--ease), background-color 160ms var(--ease); }
.btn .ic { transition: transform 160ms var(--ease); }
.btn.pri { background: var(--t1); color: var(--bg); }
.btn.sec { background: rgba(255, 255, 255, .08); color: var(--t1); box-shadow: inset 0 0 0 1px var(--line2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .btn.pri:hover { background: #FFFFFF; }
  .btn.sec:hover { background: rgba(255, 255, 255, .14); }
  .btn:hover .ic.ar { transform: translateX(2px); }
  .btn:hover .ic.ext { transform: translate(1px, -1px); }
}

/* =========================================================
   HEADER — one row on desktop: wordmark | nav | time zone + Search. Phone: wordmark + Search, the nav as a row
   under it. The nav is the only sport control: Schedule, UFC and Boxing are pages.
   ========================================================= */
.site-h { position: relative; z-index: 30; background: var(--bg); }
.site-h-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo search" "nav nav"; align-items: center; }
.logo { grid-area: logo; display: flex; align-items: center; height: 56px; width: max-content; color: var(--t1); }
.wm { display: block; width: auto; height: 20px; color: var(--t1); }
.nav { grid-area: nav; display: flex; gap: 0; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut); overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav-pill { position: relative; display: flex; align-items: center; height: 44px; padding: 0 12px; flex: none; font: 600 15px var(--f-t); color: var(--t2); }
.nav-pill:first-child { margin-left: -12px; }
.nav-pill[aria-current] { color: var(--t1); }
.nav-pill[aria-current]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--t1); }
.tzh { display: none; }
.search-btn { grid-area: search; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; min-width: 44px; margin-right: -10px; border-radius: var(--r); color: var(--t1); font: 600 15px var(--f-t); }
.search-btn .ic { width: 20px; height: 20px; }
.search-btn .sl { display: none; }
@media (hover: hover) and (pointer: fine) { .nav-pill:hover { color: var(--t1); } .search-btn:hover { background: var(--s2); } }
.search-bar { padding: 8px 0 14px; }
.search-bar input { width: 100%; height: 48px; padding: 0 16px; border-radius: var(--r); border: 0; outline: 0; background: var(--s2); color: var(--t1); font: 500 17px var(--f-t); box-shadow: inset 0 0 0 1px var(--line); -webkit-appearance: none; appearance: none; }
.search-bar input:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
@media (min-width: 1024px) {
  /* the header on the page grid: the wordmark in columns 1-2, the nav from column 3, time zone + Search on the right
     edge; every item sits on one text baseline */
  .site-h-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); grid-template-areas: none; height: 64px; align-items: baseline; }
  .logo { grid-area: auto; grid-column: 1 / 3; grid-row: 1; height: 44px; align-self: center; }
  .wm { height: 22px; margin-top: 1px; }
  .nav { grid-area: auto; grid-column: 3 / 9; grid-row: 1; margin: 0; padding: 0; height: 64px; align-items: stretch; overflow: visible; align-self: stretch; }
  .nav-pill { height: 64px; padding: 0 14px; }
  .nav-pill:first-child { margin-left: -14px; }
  .nav-pill[aria-current]::after { left: 14px; right: 14px; }
  .tzh { grid-column: 9 / 13; grid-row: 1; justify-self: end; align-self: center; display: block; margin-right: 112px; font: 500 13px/1.3 var(--f-t); color: var(--t2); white-space: nowrap; }
  .tzh b { font-weight: 600; color: var(--t1); }
  .search-btn { grid-area: auto; grid-column: 12; grid-row: 1; justify-self: end; align-self: center; margin-right: -12px; padding: 0 12px; color: var(--t1); }
  .search-btn .sl { display: inline; }
  .search-btn .ic { width: 18px; height: 18px; color: var(--t2); }
}
/* 1024-1279: the nav starts where the table's times start (column 3), the wordmark keeps columns 1-2 */
@media (min-width: 1024px) and (max-width: 1279.98px) { .site-h .wm { height: 19px; } }

/* =========================================================
   HERO — the next big fight(s): the SPLIT POSTER, the way broadcast face-off graphics do it.
   The stage is cut into two halves; each half is filled by its fighter's photo, top to bottom and edge to edge.
   The halves meet at the centre in ONE straight vertical blend (--B wide: the left half fades out over the right
   one, a true cross-fade). ONE bottom-up gradient of the surface lies over the lower part for the type.
   No radial, elliptical or shaped masks, no fields or slabs behind photos, no halos behind text.
   Each photo (inline vars from build.py hero_img: aspect, face landmarks, file width, curated x0..x1, tone):
     width = min(1.25 x its file, max(covering its half [within x0..x1], the face target --Mt)), so it is never
     shown larger than 1.25x its pixels: a photo that would need more is shown smaller ("zoomed out") instead;
     placed with its face near the middle of its half and the face's centre at --fyt of the height, clamped so it
     covers the half wherever it is large enough. Where it still cannot cover, its edges inside the half fade
     (straight, --F) into a darkened, blurred copy of the same file (.bf) filling the half; a file too short for
     its half (sh) carries on with its own top and bottom rows stretched out instead (.bt, .bb: no enlarged face),
     and always covers its half's width, past the 1.25x cap if it must (no framed box on a wide poster).
   A cut-out (no surroundings) stands on the surface, sized by its face (--Mtc), its cut lower edge faded.
   A missing photo: the half is the plain surface; the other photo fades into it over 40 % of its half.
   ========================================================= */
.big-section { position: relative; }
.hero { position: relative; isolation: isolate; container-type: inline-size; --B: 56px; --F: 96px; --fyt: .34; --surf: var(--bg); }
.stage { position: relative; overflow: hidden; container-type: size; background: var(--surf); }
/* one photo in the card (the other missing, TBA or failed to load): it fades into the plain surface over 40 % of its
   half, still one straight linear gradient, so a light backdrop (a studio wall, a press board) falls off into the
   card instead of ending in a lit edge */
.stage:has(> .ph.vacant) { --B: max(56px, 20cqw); }
.ph { position: absolute; top: 0; bottom: 0; width: calc(50% + var(--B) / 2); overflow: hidden; }
/* the centre blend: the left half fades out over the right one (--cut: where a curated edge ends it early) */
.ph.l { left: 0; z-index: 2;
  -webkit-mask-image: linear-gradient(to left, transparent 0, transparent var(--cut, 0px), rgba(0,0,0,.16) calc(var(--cut, 0px) + var(--B) * .25), rgba(0,0,0,.5) calc(var(--cut, 0px) + var(--B) * .5), rgba(0,0,0,.84) calc(var(--cut, 0px) + var(--B) * .75), #000 calc(var(--cut, 0px) + var(--B)));
  mask-image: linear-gradient(to left, transparent 0, transparent var(--cut, 0px), rgba(0,0,0,.16) calc(var(--cut, 0px) + var(--B) * .25), rgba(0,0,0,.5) calc(var(--cut, 0px) + var(--B) * .5), rgba(0,0,0,.84) calc(var(--cut, 0px) + var(--B) * .75), #000 calc(var(--cut, 0px) + var(--B))); }
.ph.r { right: 0; z-index: 1; }
/* no left photo (missing, TBA, 404): the right one fades into the surface at the centre over the same width */
.stage:has(> .ph.l.vacant) > .ph.r {
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.16) calc(var(--B) * .25), rgba(0,0,0,.5) calc(var(--B) * .5), rgba(0,0,0,.84) calc(var(--B) * .75), #000 var(--B));
  mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,.16) calc(var(--B) * .25), rgba(0,0,0,.5) calc(var(--B) * .5), rgba(0,0,0,.84) calc(var(--B) * .75), #000 var(--B)); }
.ph img { position: absolute; max-width: none; transition: opacity 300ms var(--ease); }
/* the geometry, on the half (its photo and the blurred copy both use it) */
.ph:not(.vacant) {
  --HW: calc(50cqw + var(--B) / 2);
  --Wc: max(var(--HW) / (var(--x1) - var(--x0)), 100cqh * var(--ar));
  --Wf: calc(var(--Mt) * var(--ar) / var(--em));
  --Wi: min(var(--sw) * 1.25px, max(var(--Wc), var(--Wf)));
  --Hi: calc(var(--Wi) / var(--ar));
  --Lt: calc(var(--fxb) - var(--ex) * var(--Wi));
  --La: calc(-1 * var(--x0) * var(--Wi));
  --Lb: calc(var(--HW) - var(--x1) * var(--Wi));
  --L: clamp(min(var(--La), var(--Lb)), var(--Lt), max(var(--La), var(--Lb)));
  --Tt: calc(var(--fyt) * 100cqh - (var(--ey) + var(--em) / 2) * var(--Hi));
  --T: clamp(min(0px, 100cqh - var(--Hi)), var(--Tt), var(--sh) * max(0px, 100cqh - var(--Hi))); }
.ph.l { --fxb: 25cqw; }
.ph.r { --fxb: calc(25cqw + var(--B) / 2); }
/* a curated edge (build.py CURATE: a bystander beyond it) outranks covering the half */
.ph.cr { --L: clamp(var(--Lb), var(--Lt), var(--La)); }
.ph.cl { --L: min(var(--La), max(var(--Lb), var(--Lt))); }
/* a left photo curated on its inner edge (Volkanovski: a child beyond it) beside a cut-out or an empty half: the
   photo is flush with the card's outer edge (never a gap there), its face as near the middle as the curated part
   allows; the curated edge may stop up to 30 px short of the centre, and the blend then ends AT that edge (the
   seam moves left over the flat surface, never onto the bystander) */
.stage:has(> .ph.r:is(.cut, .ko, .vacant)) > .ph.l.cr {
  --L: min(0px, clamp(var(--Lb) - 30px, var(--Lt), var(--Lb)));
  --cut: max(0px, var(--HW) - var(--L) - var(--x1) * var(--Wi)); }
/* a cut-out: sized by its face (--Mtc), as wide as its half at least (its shoulders run off the half's edges) */
.ph.cut { --Wf: calc(var(--Mtc, var(--Mt)) * var(--ar) / var(--em)); --Wi: min(var(--sw) * 1.25px, max(var(--HW), var(--Wf))); --T: var(--Tt); }
/* an edge of the photo that falls inside the half fades (straight, up to --F) into the copy behind */
.ph:not(.vacant) {
  --Fl: clamp(0px, var(--L) * 8, var(--F));
  --Fr: clamp(0px, (var(--HW) - var(--L) - var(--Wi)) * 8, var(--F));
  --Ft: clamp(0px, var(--T) * 8, var(--F));
  --Fb: clamp(0px, (100cqh - var(--T) - var(--Hi)) * 8, var(--F)); }
.ph img.pi {
  z-index: 1; width: var(--Wi); height: var(--Hi); left: var(--L); top: var(--T);
  filter: grayscale(1) brightness(var(--b, .95)) contrast(var(--c, 1.05));
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--Fl), #000 calc(100% - var(--Fr)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--Ft), #000 calc(100% - var(--Fb)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--Fl), #000 calc(100% - var(--Fr)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--Ft), #000 calc(100% - var(--Fb)), transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
/* a cut-out's lower edge is a cut: it fades out (the card's gradient covers it too) */
.ph.cut img.pi { -webkit-mask-image: linear-gradient(to bottom, #000 70%, rgba(0,0,0,.5) 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 70%, rgba(0,0,0,.5) 85%, transparent 100%); }
/* the hero's knockout (#ko) pulls the mask in 2.5 px and feathers it, so no light fringe of the old backdrop stays on
   the fists and arms against the dark card */
.ph.ko img.pi { filter: url(#ko) grayscale(1) brightness(var(--b, .92)) contrast(var(--c, 1.12)); }
/* a light backdrop: highlights compressed (SVG #lt) before the photo's own tone */
.ph.lt img.pi { filter: url(#lt) grayscale(1) brightness(var(--b, .95)) contrast(var(--c, 1.05)); }
/* the blurred copy: the same file scaled up around the same face point, just enough to fill the half (plus the
   blur's reach), so its content continues the photo's own; darkened to shadow; hidden behind the photo wherever
   the photo covers */
.ph img.bf {
  --fxa: calc(var(--L) + var(--ex) * var(--Wi));
  --fya: calc(var(--T) + var(--ey) * var(--Hi));
  --Wb: max(1.06 * var(--Wi), (var(--fxa) + 48px) / var(--ex), (var(--HW) - var(--fxa) + 48px) / (1 - var(--ex)),
            (var(--fya) + 48px) / var(--ey) * var(--ar), (100cqh - var(--fya) + 48px) / (1 - var(--ey)) * var(--ar));
  z-index: 0; width: var(--Wb); height: calc(var(--Wb) / var(--ar));
  left: calc(var(--fxa) - var(--ex) * var(--Wb)); top: calc(var(--fya) - var(--ey) * var(--Wb) / var(--ar));
  filter: grayscale(1) brightness(calc(var(--b, .95) * .5)) contrast(var(--c, 1.05)) blur(14px); }
.ph.lt img.bf { filter: url(#lt) grayscale(1) brightness(calc(var(--b, .95) * .5)) contrast(var(--c, 1.05)) blur(14px); }
/* a file too short for its half (sh): the face a little higher (less to fill above it), short straight fades, and the
   photo's own top and bottom rows (the outer 4 %) stretched out from its edges to the half's top and bottom (.bt,
   .bb, across the half's width): the backdrop above the head carries on as shadow, and no enlarged copy of the face
   shows above or below the head. The face-anchored copy (.bf) stays underneath only for a sliver at the sides. */
/* It always covers its half's WIDTH (within x0..x1), past the 1.25x cap when it must (Puello's 299 px file on the fight
   page's 477 px half: 1.6x): the stretched rows run across the half's width, so where the photo stopped short of
   the half's sides their straight top and bottom edges cut across the blurred copy and the photo sat in a framed box
   (QA 2026-10-14). A softer photo is the lesser cost; such files are on the image review page's replace list. */
.ph.sh { --F: 36px; --Wi: max(min(var(--sw) * 1.25px, max(var(--Wc), var(--Wf))), var(--HW) / (var(--x1) - var(--x0))); }
.card .ph.sh, .solo .ph.sh { --fyt: .3; }
.ph.sh img.bt, .ph.sh img.bb { --f: .04; --pad: 24px;
  --bl: calc(min(var(--L), 0px) - 10px); left: var(--bl); width: calc(max(var(--L) + var(--Wi), var(--HW)) + 10px - var(--bl)); height: var(--Hb);
  filter: grayscale(1) brightness(calc(var(--b, .95) * .5)) contrast(var(--c, 1.05)) blur(6px); }
.ph.sh.lt img.bt, .ph.sh.lt img.bb { filter: url(#lt) grayscale(1) brightness(calc(var(--b, .95) * .5)) contrast(var(--c, 1.05)) blur(6px); }
.ph.sh img.bt { --Hb: max(var(--Hi), (var(--T) + var(--pad)) / var(--f)); top: calc(var(--T) - var(--f) * var(--Hb));
  clip-path: inset(0 0 max(0px, (1 - var(--f)) * var(--Hb) - var(--Ft) - 2px) 0); }
.ph.sh img.bb { --gb: calc(100cqh - var(--T) - var(--Hi)); --Hb: max(var(--Hi), (var(--gb) + var(--pad)) / var(--f));
  top: calc(var(--T) + var(--Hi) - (1 - var(--f)) * var(--Hb));
  clip-path: inset(max(0px, (1 - var(--f)) * var(--Hb) - var(--Fb) - 2px) 0 0 0); }
/* the small round faces keep the lighter knockout (#kos: a 40 px face is drawn from a 94 px image, so the hero's wider
   pull-in would eat the face) */
.face img.ko, .won-ring img.ko { filter: url(#kos) grayscale(1) brightness(var(--b, .92)) contrast(var(--c, 1.12)); }
html.js .ph img:not(.ok), html.js .face img:not(.ok), html.js .won-ring img:not(.ok) { opacity: 0; }
/* the one gradient: bottom-up, the surface under the type (per layout: where the type starts) */
.stage::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; }

/* the type */
.eyebrow { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; font: 500 14px/1.35 var(--f-t); color: var(--t1); }
.eb-h { font: 650 14px/1.35 var(--f-t); color: var(--t1); letter-spacing: 0; }
.eb-l { display: flex; flex-wrap: wrap; align-items: baseline; }
.eb-l .dash { margin-right: 10px; color: var(--t1); }
.eb-b .ldot { margin-right: 6px; }
.lockup { font-family: var(--f-d); font-weight: 900; text-transform: uppercase; color: var(--t1); letter-spacing: -.004em; white-space: nowrap; }
.lockup .tba { font-size: .5em; color: var(--t2); }
.lockup .vs { font-family: var(--f-d); font-weight: 800; text-transform: lowercase; letter-spacing: .01em; color: var(--t2); }
.hy > .ln { display: inline; }
.ld-time .tm { padding-left: 14px; }
.ld-time .tm::before { top: .06em; bottom: .04em; width: 4px; }
.ld-time time, .ld-time .live { display: block; font: 800 var(--tsz, 76px)/.8 var(--f-d); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ld-time time.tba { font-size: calc(var(--tsz, 76px) * .5); line-height: .9; color: var(--t1); text-transform: uppercase; }
.tilde { font-size: .55em; vertical-align: .5em; margin-right: .04em; color: var(--t2); }
.live { display: inline-flex; align-items: center; text-transform: uppercase; color: var(--t1); }
.ldot { display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--live); vertical-align: .1em; }
.ld-time .live { display: flex; align-items: center; }
.ld-time .live .ldot { width: max(8px, .14em); height: max(8px, .14em); margin-right: .14em; }
.ld-date, .ld-what { display: grid; font: 500 15px/1.35 var(--f-t); color: var(--t2); font-variant-numeric: tabular-nums; }
.ld-date b, .ld-what b { font-weight: 650; color: var(--t1); }
.ld-date .rel { white-space: nowrap; }
.ld-date .rel.now { color: var(--t1); font-weight: 600; }
.ld-date .cd { color: var(--t1); font-weight: 600; white-space: nowrap; }
.ld-date .cdw:has(.cd:empty) { display: none; }
.ld-note { font: 500 14px/1.3 var(--f-t); color: var(--t2); white-space: nowrap; }
.ld-note .est { font-weight: 650; color: var(--t1); }
.ld-note time { color: inherit; }
.acts { display: flex; align-items: center; gap: 12px; }
.acts .bc { font: 500 15px var(--f-t); color: var(--t2); white-space: nowrap; }
/* one link to the fight page ("Fight card"); its hit area covers the whole poster, Watch sits above it */
/* (no backdrop-filter on it: a backdrop-filter makes the button the containing block of its ::after, and the hit area
   shrank to the button; the button sits on the solid card or page surface, so the blur did nothing anyway. No press
   scale either: .btn:active's transform does the same between mousedown and mouseup, so the mouseup landed outside
   the link and a click on the photo, names or time went nowhere; checks/browser_checks.py clicks them for real) */
.hero .fc, .hero .fc:active { position: static; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; }
.hero .fc::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.hero .rc-watch { z-index: 2; }
.hero .fc:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---------- hero: ONE big fight, desktop (>= 1024) ----------
   The split poster is a card on the grid, columns 1-8, never full bleed: each half is then no wider than its photo
   can fill at the 1.25x cap (a 400 px file is 500 px; a half is ~430 px at 1440 and ~455 px at 1920), so no wide
   blurred copy and no soft photo edges inside the card. The surnames sit on the card's lower edge over the one
   bottom gradient. Columns 9-12, on the plain page surface: the small line, the date line, the big local time,
   Watch + Fight card, the buttons' bottom on the names' bottom line. */
@media (min-width: 1024px) {
  .hero.solo { --Hc: clamp(420px, 100vh - 268px, 520px); --cpad: 28px; --cpb: 26px; --cap1: 112px; --tsz: 64px; --cbg: #141415;
    width: min(var(--maxw), 100% - 2 * var(--gut)); margin-inline: auto;
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); align-items: end;
    /* the card's width (columns 1-8) from the article's, and the names fitted to it (one size, the "vs" on the seam
       unless a long name pushes it off) */
    --CW: calc(100cqw * 2 / 3 - var(--cg) / 3);
    --IW: calc(var(--CW) - 2 * var(--cpad));
    --s: min(var(--cap1), var(--IW) / (var(--e1) + var(--e2) + .55) / 1.03);
    --gv: calc(var(--s) * .275);
    --w1: calc(var(--e1) * var(--s));
    --w2: calc(var(--e2) * var(--s));
    --xs: clamp(var(--cpad) + var(--w1) + var(--gv), var(--CW) / 2, var(--CW) - var(--cpad) - var(--w2) - var(--gv)); }
  .hero.solo.n0 { --Hc: 280px; }
  /* z-index 0: the photo layers stay inside the stage, under the one Fight card hit area that covers the hero */
  .solo .stage { grid-column: 1 / 9; grid-row: 1; z-index: 0; height: var(--Hc); border-radius: var(--r2); background: var(--cbg); --surf: var(--cbg);
    --Mt: calc(100cqh * .092); --Mtc: calc(100cqh * .11); }
  /* the one gradient: the card surface rising under the names, clear over the faces */
  .solo .stage::after { background: linear-gradient(to top, var(--surf) 0, var(--surf) 40px,
    color-mix(in srgb, var(--surf) 92%, transparent) 76px, color-mix(in srgb, var(--surf) 76%, transparent) 112px,
    color-mix(in srgb, var(--surf) 52%, transparent) 150px, color-mix(in srgb, var(--surf) 24%, transparent) 190px, transparent 232px); }
  .solo .hero-in { display: contents; }
  /* the h1 and the label are on the line above the card (build.py big_band); the hero's own label stays for
     screen readers, visually hidden */
  .solo .eyebrow { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .solo .lockup { grid-column: 1 / 9; grid-row: 1; align-self: end; position: relative; z-index: 5; pointer-events: none;
    display: grid; grid-template-columns: calc(var(--xs) - var(--gv) - var(--cpad)) calc(2 * var(--gv)) minmax(0, 1fr); align-items: center;
    margin: 0; padding: .06em var(--cpad) var(--cpb); font-size: var(--s); line-height: .8; }
  .solo .lockup .n1 { grid-column: 1; justify-self: end; margin: 0 calc(var(--rsb, 0) * -1em) 0 0; }
  .solo .lockup .vs { grid-column: 2; justify-self: center; font-size: .26em; line-height: 1; margin: .05em 0 0; }
  .solo .lockup .n2 { grid-column: 3; justify-self: start; margin: 0 0 0 calc(var(--lsb, 0) * -1em); }
  .solo .lockup .tba { align-self: center; }
  .solo .lockup .hy > .ln { display: inline; }
  /* columns 9-12: one column of type, bottom-aligned with the card */
  .solo .info { grid-column: 9 / 13; grid-row: 1; align-self: end; display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
    margin: 0; padding-bottom: var(--cpb); }
  .solo .when { display: contents; }
  .solo .ld-what { order: 1; display: block; max-width: 100%; font: 500 15px/1.4 var(--f-t); color: var(--t2); }
  .solo .ld-what b { display: block; font-weight: 650; color: var(--t1); }
  .solo .ld-date { order: 2; display: block; margin-top: 16px; font: 500 15px/1.35 var(--f-t); color: var(--t2); }
  .solo .ld-date b::after { content: "\00A0·\00A0"; font-weight: 400; color: var(--t2); }
  .solo .ld-time { order: 3; margin-top: 12px; }
  .solo .ld-note { order: 4; margin-top: 8px; padding: 0; }
  .solo .acts { order: 5; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
  .solo .acts .btn { height: 46px; padding: 0 18px; font-size: 15px; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .hero.solo { --cpad: 24px; --tsz: 56px; }
  .solo .acts .btn { padding: 0 14px; }
}
@media (min-width: 1600px) and (min-height: 821px) { .hero { --tsz: 84px; } .hero.solo { --tsz: 72px; } }
/* short laptop screens (1440x790, 1366x768, 1280x720 and their real browser heights): ~28 px off the photo area, so
   the first table row is whole on the first screen with the hero's time + Watch (covering a shorter half needs
   less, so the photos keep their 1.25x cap) */
@media (min-width: 1024px) and (max-height: 800px) {
  .hero.solo { --Hc: clamp(420px, 100vh - 296px, 496px); --tsz: 56px; }
  .solo .ld-date { margin-top: 12px; }
  .solo .acts { margin-top: 16px; }
}

/* ---------- hero: phone + tablet (< 1024): the stacked poster ----------
   The photos above (heads ~3.6 x --Mt: ~150px on a 390x844 phone), the type below; the eyebrow and the first name
   ride on the photos' faded lower edge. Masks come from build.py (in each photo's own box). */
/* (the phone poster block: the same rules are repeated for .hero.c1 and .hero.c2 below) */
@media (max-width: 1023.98px) {
  .hero:not(.card) { --Mt: clamp(28px, min(10vw, 4.8svh), 44px); --tsz: clamp(48px, 7svh, 58px); }
  .hero:not(.card) { --fyt: .4; --B: 40px; --F: 48px; }
  .hero:not(.card) .stage { height: calc(4.5 * var(--Mt) + 30px); }
  /* the one gradient: the page surface rising under the eyebrow and the first name */
  .hero:not(.card) .stage::after { background: linear-gradient(to bottom, transparent 0, transparent 48%, rgba(11,11,12,.22) 58%, rgba(11,11,12,.55) 70%, rgba(11,11,12,.84) 82%, rgba(11,11,12,.96) 91%, var(--bg) 100%); }
  .hero:not(.card).n0 .stage { height: 36px; }
  .hero:not(.card).n0 .ph { display: none; }
  .hero:not(.card) .hero-in { position: relative; z-index: 5; margin-top: calc(-.55 * var(--Mt)); container-type: inline-size; }
  .hero:not(.card) .lockup { display: grid; margin-top: 8px; --max: min(104px, 10svh);
    font-size: min(var(--max), calc(100cqi / var(--em-stack, 4) / 1.03)); line-height: .86; }
  .hero:not(.card) .lockup .n1 { justify-self: start; margin-left: calc(var(--lsb, 0) * -1em); }
  .hero:not(.card) .lockup .n2 { justify-self: end; text-align: right; margin-right: calc(var(--rsb, 0) * -1em); }
  .hero:not(.card) .lockup .hy > .ln { display: block; line-height: 1.02; }
  .hero:not(.card) .lockup .vs { justify-self: center; margin: .07em 0 .11em; font-size: clamp(14px, .22em, 19px); line-height: 1; letter-spacing: .02em; }
  .hero:not(.card) .info { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "time fc" "note note" "date date" "what what" "go go"; align-items: end; margin-top: 18px; }
  .hero:not(.card) .when { display: contents; }
  .hero:not(.card) .ld-time { grid-area: time; }
  .hero:not(.card) .ld-note { grid-area: note; margin-top: 8px; padding-left: 0; }
  .hero:not(.card) .ld-date { grid-area: date; display: block; margin-top: 10px; }
  .hero:not(.card) .ld-date b::after { content: " · "; font-weight: 400; color: var(--t2); }
  .hero:not(.card) .ld-what { grid-area: what; display: block; margin-top: 2px; }
  .hero:not(.card) .ld-what b { font-weight: 500; color: var(--t2); }
  .hero:not(.card) .ld-what span::before { content: " · "; }
  .hero:not(.card) .acts { display: contents; }
  .hero:not(.card) .acts .rc-watch { grid-area: go; width: 100%; height: 52px; margin-top: 18px; }
  .hero:not(.card) .acts .fc { grid-area: fc; height: 44px; margin: 0 -10px -2px 0; padding: 0 10px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 15px; color: var(--t1); }
  .hero:not(.card) .acts .fc.pri { grid-area: go; width: 100%; height: 52px; margin: 18px 0 0; background: var(--t1); color: var(--bg); }
  .hero:not(.card) .acts .bc { grid-area: fc; padding-bottom: 12px; font-size: 13px; }
}
@media (max-width: 699.98px) {
  .hero:not(.card) .info:has(.bc) { grid-template-areas: "time time" "note note" "date date" "what what" "go go" "bc bc"; }
  .hero:not(.card) .info:has(.bc) .acts .bc { grid-area: bc; justify-self: center; padding: 10px 0 0; }
}
@media (min-width: 700px) and (max-width: 1023.98px) {
  /* the tablet, one big fight: the desktop's one-line lockup, seated on the centre; each face over its own name (two
     big fights: both are inset cards, the generated .hero.card block) */
  .hero:not(.card) { --Mt: clamp(36px, min(6.4vw, 5.6svh), 54px); --e1t: calc(var(--e1) * 1); --s: min(112px, (100cqw - 2 * var(--gut)) / (var(--e1) + var(--e2) + .5) / 1.03); --gv: calc(var(--s) * .25); }
  /* the lockup is centred as a whole (a long name on one side may not fit half the width): faces over each name */
  .hero:not(.card) .lockup { display: grid; grid-template-columns: auto calc(2 * var(--gv)) auto; justify-content: center; align-items: center; font-size: var(--s); line-height: .8; margin-top: 12px; padding-top: .06em; }
  .hero:not(.card) .lockup .n1 { grid-column: 1; justify-self: end; margin: 0 calc(var(--rsb, 0) * -1em) 0 0; }
  .hero:not(.card) .lockup .vs { grid-column: 2; justify-self: center; margin: .05em 0 0; font-size: .26em; }
  .hero:not(.card) .lockup .n2 { grid-column: 3; justify-self: start; text-align: left; margin: 0 0 0 calc(var(--lsb, 0) * -1em); }
  .hero:not(.card) .lockup .hy > .ln { display: inline; }
  .hero:not(.card) .info { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "time date acts" "note what acts"; column-gap: 24px; row-gap: 2px; align-items: center; }
  .hero:not(.card) .ld-date { display: block; margin: 0; }
  .hero:not(.card) .ld-what { display: grid; margin: 0; }
  .hero:not(.card) .ld-what b { font-weight: 650; color: var(--t1); }
  .hero:not(.card) .ld-what span::before { content: none; }
  .hero:not(.card) .ld-note { margin-top: 4px; }
  .hero:not(.card) .acts { display: flex; grid-area: acts; }
  .hero:not(.card) .acts .rc-watch, .hero:not(.card) .acts .fc, .hero:not(.card) .acts .fc.pri { width: auto; height: 48px; margin: 0; }
  .hero:not(.card) .acts .fc { padding: 0 18px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px var(--line2); }
  .hero:not(.card) .acts .bc { padding: 0; }
}

/* =========================================================
   THE TWO-FIGHT HERO — the page's h1 as a quiet eyebrow, then the next two big fights.
   >= 1024: two equal poster cards on the grid (6 + 6 columns, the gutter between them).
   700-1023: both are the same inset card (label above, photos, names, small line, date line, time + buttons).
   < 700: card 1 is the stacked poster (full bleed); card 2 follows as a smaller card. The card rules are generated
   by build.py from work/card.tpl.css (desktop, tablet) and the phone hero block (phone: card 1 and card 2).
   ========================================================= */
.duo-top { padding: 6px 0 2px; }
.duo-h1 { font: 600 13px/1.35 var(--f-t); color: var(--t2); letter-spacing: 0; }
/* short phones (320x568 and the like): the h1 line costs ~25px, so the poster tightens to keep time + Watch on the
   first screen */
@media (max-width: 699.98px) and (max-height: 620px) {
  html .hero:not(.c2) { --Mt: clamp(25px, min(10vw, 4.8svh), 44px); }
  html .hero:not(.c2) .info { margin-top: 8px; }
  html .hero:not(.c2) .acts .rc-watch, html .hero:not(.c2) .acts .fc.pri { margin-top: 8px; }
  html .hero:not(.c2) .ld-date { margin-top: 6px; }
  html .hero:not(.c2) .ld-note { margin-top: 6px; }
}
.big-section.none .duo-top { padding-bottom: 0; }
.hero.c1 .eb-l .eb-b, .hero.c2 .eb-l .eb-b { color: var(--t1); }
/* tablet (two big fights): ONE card anatomy for both cards: inset on the grid, the label above each card on the page
   (never on its photos: the stage clips the photos), then the same type stack and buttons in the same place */
@media (min-width: 700px) and (max-width: 1023.98px) {
  html .hero.card { margin: 44px var(--gut) 0; overflow: visible; }
  html .hero.c1 { margin-top: 36px; }
  html .hero.card .stage { border-radius: var(--r2); }
  html .hero.card .eyebrow { top: -27px; left: 0; right: 0; font-size: 14px; }
}
/* the cards' labels on the h1's line (>= 1024): "UFC & boxing schedule — Next big fight" over card 1, "Then" over
   card 2; the cards' own labels stay for screen readers, visually hidden */
.duo-lb { display: none; }
@media (min-width: 1024px) {
  .duo-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); align-items: baseline; }
  .duo-top .dt1 { grid-column: 1 / 7; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
  .duo-top .dt2 { grid-column: 7 / 13; }
  .duo-lb { display: flex; align-items: baseline; font: 650 14px/1.35 var(--f-t); color: var(--t1); }
  .duo-lb .dash { margin-right: 10px; font-weight: 500; color: var(--t2); }
  .duo-lb .ldot { align-self: center; margin-right: 7px; }
  .card .eyebrow { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 1024px) {
  .duo-top { padding: 20px 0 14px; }
  .duo-h1 { font-size: 14px; }
  .duo { width: min(var(--maxw), 100% - 2 * var(--gut)); margin-inline: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); }
  .duo > .card { grid-column: span 6; }
}
/* ---------- the poster cards per layout (frozen from the mock's generated block: desktop >= 1024, tablet
   700-1023, phone card 1 and card 2; edit here) ---------- */
@media (min-width: 1024px) {
  .card { --Hc: clamp(420px, 100vh - 268px, 520px); --cpad: 28px; --cpt: 22px; --cpb: 26px; --cap1: 96px; --cap2: 84px; --nhk: .3; --mtk: .092; --eyeo: 50px; --tsz: 56px; --cbg: #141415; --dgap: 14px; --lkmb: 12px; --scr0: 44%; --bpx: 18px; --bfs: 15px; }
  /* the poster card: a fixed-height size container; every length inside comes from its own width (cqw) and height
     (cqh). The photos: the split poster (hybrid.css .ph), on the card's own surface. */
  .card { position: relative; height: var(--Hc); border-radius: var(--r2); overflow: hidden; container-type: size; isolation: isolate;
    background: var(--cbg); --surf: var(--cbg); }
  .card .stage, .card .hero-in {
    --IW: calc(100cqw - 2 * var(--cpad));
    --nh: calc(100cqh * var(--nhk));
    --s1: min(var(--cap1), var(--IW) / (var(--e1) + var(--e2) + .55) / 1.03);
    --s2: min(var(--cap2), var(--IW) / var(--est) / 1.03, var(--nh) / (var(--nl) * .86 + .3));
    --s: var(--s1);
    --gv: calc(var(--s) * .275);
    --w1: calc(var(--e1) * var(--s));
    --w2: calc(var(--e2) * var(--s));
    /* the face target (a photo that can be shown larger than covering its half is zoomed to it, within its cap);
       a cut-out is sized by --Mtc */
    --Mt: calc(100cqh * var(--mtk));
    --Mtc: calc(100cqh * .11);
    /* the "vs": between the names; when the names are narrower than the card it centres (on the photos' seam) */
    --xs: clamp(var(--cpad) + var(--w1) + var(--gv), 50cqw, 100cqw - var(--cpad) - var(--w2) - var(--gv));
  }
  .card.sd .stage, .card.sd .hero-in { --s: var(--s2); --xs: 50cqw; }
  /* no photos at all: the stacked names grow into the space the faces would have used */
  .card.n0 .stage, .card.n0 .hero-in { --cap2: 150px; --nhk: .54; }
  .card .stage { position: absolute; inset: 0; height: auto; overflow: hidden; background: none; }
  /* the one gradient, bottom-up, measured from the card's bottom edge where the type stack sits (time row, date
     line, small line, names: the names' baseline ~150px up, their top ~225px; --gsh lifts it where the buttons wrap
     under the time): the surface under the type, clear over the faces */
  .card .stage::after { background: linear-gradient(to top, var(--surf) 0, var(--surf) calc(90px + var(--gsh, 0px)),
    color-mix(in srgb, var(--surf) 96%, transparent) calc(125px + var(--gsh, 0px)), color-mix(in srgb, var(--surf) 87%, transparent) calc(161px + var(--gsh, 0px)),
    color-mix(in srgb, var(--surf) 70%, transparent) calc(198px + var(--gsh, 0px)), color-mix(in srgb, var(--surf) 47%, transparent) calc(234px + var(--gsh, 0px)),
    color-mix(in srgb, var(--surf) 20%, transparent) calc(266px + var(--gsh, 0px)), transparent calc(300px + var(--gsh, 0px))); }

  /* the type, from the bottom up: Watch + Fight card on the time's row, the date line, the small line, the names */
  .card .hero-in { position: absolute; inset: 0; z-index: 5; width: auto; margin: 0; display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 var(--cpad) var(--cpb); }
  .card .eyebrow { position: absolute; top: var(--cpt); left: var(--cpad); right: var(--cpad); display: block; font: 600 13px/1.3 var(--f-t); color: var(--t1);
    letter-spacing: .01em; }
  .card .eyebrow .eb-l { display: block; }
  .card .lockup { display: grid; grid-template-columns: calc(var(--xs) - var(--gv) - var(--cpad)) calc(2 * var(--gv)) minmax(0, 1fr); align-items: center;
    margin: 0 0 var(--lkmb); font-size: var(--s); line-height: .8; padding-top: .06em; }
  .card .lockup .n1 { grid-column: 1; justify-self: end; margin: 0 calc(var(--rsb, 0) * -1em) 0 0; }
  .card .lockup .vs { grid-column: 2; justify-self: center; font-size: .26em; line-height: 1; margin: .05em 0 0; }
  .card .lockup .n2 { grid-column: 3; justify-self: start; margin: 0 0 0 calc(var(--lsb, 0) * -1em); }
  .card .lockup .hy > .ln { display: inline; }
  .card.sd .lockup { grid-template-columns: minmax(0, 1fr); line-height: .86; }
  .card.sd .lockup .n1 { grid-column: 1; justify-self: start; margin: 0 0 0 calc(var(--lsb, 0) * -1em); }
  .card.sd .lockup .vs { grid-column: 1; justify-self: center; font-size: .22em; line-height: 1; margin: .07em 0 .11em; }
  .card.sd .lockup .n2 { grid-column: 1; justify-self: end; text-align: right; margin: 0 calc(var(--rsb, 0) * -1em) 0 0; }
  .card.sd .lockup .hy > .ln { display: block; line-height: 1.02; }
  /* one wrapping row of type: the small line; the date line (date · day count · note); then the time with Watch +
     Fight card pushed to the right edge. When the buttons do not fit beside the time (a narrow card, a long
     broadcaster or "Watch live on ...") they wrap under it on their own: nothing is ever squeezed or clipped. */
  .card .info { display: flex; flex-wrap: wrap; align-items: flex-end; margin: 0; }
  .card .info::before { content: ""; order: 4; flex: 0 0 100%; height: 0; }
  .card .when { display: contents; }
  .card .ld-what { order: 1; flex: 0 0 100%; display: block; min-width: 0; margin: 0; font: 500 14px/1.35 var(--f-t); color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card .ld-what b { font-weight: 650; color: var(--t1); }
  .card .ld-what span::before { content: "\00A0·\00A0"; }
  .card .ld-date { order: 2; display: block; margin: var(--dgap) 0 0; font: 500 14px/1.35 var(--f-t); color: var(--t2); white-space: nowrap; }
  .card .ld-date b { font-weight: 650; color: var(--t1); }
  .card .ld-date b::after { content: "\00A0·\00A0"; font-weight: 400; color: var(--t2); }
  .card .ld-note { order: 3; margin: var(--dgap) 0 0; padding: 0; font: 500 14px/1.35 var(--f-t); color: var(--t2); white-space: nowrap; }
  .card .ld-note::before { content: "\00A0·\00A0"; }
  .card .ld-time { order: 5; margin: 8px 16px 0 0; }
  .card .acts { order: 6; display: flex; gap: 10px; margin: 12px 0 0 auto; }
  .card .acts .btn { height: 46px; padding: 0 var(--bpx); font-size: var(--bfs); }
  .card .acts .bc { font-size: 13px; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) { .card { --cpad: 24px; --tsz: 52px; --bpx: 16px; --gsh: 54px; } }
@media (min-width: 1024px) and (max-height: 800px) { .card { --Hc: clamp(420px, 100vh - 296px, 496px); } }
@media (min-width: 700px) and (max-width: 1023.98px) {
  .hero.card { --Hc: 460px; --cpad: 24px; --cpt: 20px; --cpb: 24px; --cap1: 96px; --cap2: 84px; --nhk: .3; --mtk: .09; --eyeo: 48px; --tsz: 54px; --cbg: #141415; --dgap: 12px; --lkmb: 12px; --scr0: 44%; --bpx: 18px; --bfs: 15px; }
  /* the poster card: a fixed-height size container; every length inside comes from its own width (cqw) and height
     (cqh). The photos: the split poster (hybrid.css .ph), on the card's own surface. */
  .hero.card { position: relative; height: var(--Hc); border-radius: var(--r2); overflow: hidden; container-type: size; isolation: isolate;
    background: var(--cbg); --surf: var(--cbg); }
  .hero.card .stage, .hero.card .hero-in {
    --IW: calc(100cqw - 2 * var(--cpad));
    --nh: calc(100cqh * var(--nhk));
    --s1: min(var(--cap1), var(--IW) / (var(--e1) + var(--e2) + .55) / 1.03);
    --s2: min(var(--cap2), var(--IW) / var(--est) / 1.03, var(--nh) / (var(--nl) * .86 + .3));
    --s: var(--s1);
    --gv: calc(var(--s) * .275);
    --w1: calc(var(--e1) * var(--s));
    --w2: calc(var(--e2) * var(--s));
    /* the face target (a photo that can be shown larger than covering its half is zoomed to it, within its cap);
       a cut-out is sized by --Mtc */
    --Mt: calc(100cqh * var(--mtk));
    --Mtc: calc(100cqh * .11);
    /* the "vs": between the names; when the names are narrower than the card it centres (on the photos' seam) */
    --xs: clamp(var(--cpad) + var(--w1) + var(--gv), 50cqw, 100cqw - var(--cpad) - var(--w2) - var(--gv));
  }
  .hero.card.sd .stage, .hero.card.sd .hero-in { --s: var(--s2); --xs: 50cqw; }
  /* no photos at all: the stacked names grow into the space the faces would have used */
  .hero.card.n0 .stage, .hero.card.n0 .hero-in { --cap2: 150px; --nhk: .54; }
  .hero.card .stage { position: absolute; inset: 0; height: auto; overflow: hidden; background: none; }
  /* the one gradient, bottom-up, measured from the card's bottom edge where the type stack sits (time row, date
     line, small line, names: the names' baseline ~150px up, their top ~225px; --gsh lifts it where the buttons wrap
     under the time): the surface under the type, clear over the faces */
  .hero.card .stage::after { background: linear-gradient(to top, var(--surf) 0, var(--surf) calc(90px + var(--gsh, 0px)),
    color-mix(in srgb, var(--surf) 96%, transparent) calc(125px + var(--gsh, 0px)), color-mix(in srgb, var(--surf) 87%, transparent) calc(161px + var(--gsh, 0px)),
    color-mix(in srgb, var(--surf) 70%, transparent) calc(198px + var(--gsh, 0px)), color-mix(in srgb, var(--surf) 47%, transparent) calc(234px + var(--gsh, 0px)),
    color-mix(in srgb, var(--surf) 20%, transparent) calc(266px + var(--gsh, 0px)), transparent calc(300px + var(--gsh, 0px))); }

  /* the type, from the bottom up: Watch + Fight card on the time's row, the date line, the small line, the names */
  .hero.card .hero-in { position: absolute; inset: 0; z-index: 5; width: auto; margin: 0; display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 var(--cpad) var(--cpb); }
  .hero.card .eyebrow { position: absolute; top: var(--cpt); left: var(--cpad); right: var(--cpad); display: block; font: 600 13px/1.3 var(--f-t); color: var(--t1);
    letter-spacing: .01em; }
  .hero.card .eyebrow .eb-l { display: block; }
  .hero.card .lockup { display: grid; grid-template-columns: calc(var(--xs) - var(--gv) - var(--cpad)) calc(2 * var(--gv)) minmax(0, 1fr); align-items: center;
    margin: 0 0 var(--lkmb); font-size: var(--s); line-height: .8; padding-top: .06em; }
  .hero.card .lockup .n1 { grid-column: 1; justify-self: end; margin: 0 calc(var(--rsb, 0) * -1em) 0 0; }
  .hero.card .lockup .vs { grid-column: 2; justify-self: center; font-size: .26em; line-height: 1; margin: .05em 0 0; }
  .hero.card .lockup .n2 { grid-column: 3; justify-self: start; margin: 0 0 0 calc(var(--lsb, 0) * -1em); }
  .hero.card .lockup .hy > .ln { display: inline; }
  .hero.card.sd .lockup { grid-template-columns: minmax(0, 1fr); line-height: .86; }
  .hero.card.sd .lockup .n1 { grid-column: 1; justify-self: start; margin: 0 0 0 calc(var(--lsb, 0) * -1em); }
  .hero.card.sd .lockup .vs { grid-column: 1; justify-self: center; font-size: .22em; line-height: 1; margin: .07em 0 .11em; }
  .hero.card.sd .lockup .n2 { grid-column: 1; justify-self: end; text-align: right; margin: 0 calc(var(--rsb, 0) * -1em) 0 0; }
  .hero.card.sd .lockup .hy > .ln { display: block; line-height: 1.02; }
  /* one wrapping row of type: the small line; the date line (date · day count · note); then the time with Watch +
     Fight card pushed to the right edge. When the buttons do not fit beside the time (a narrow card, a long
     broadcaster or "Watch live on ...") they wrap under it on their own: nothing is ever squeezed or clipped. */
  .hero.card .info { display: flex; flex-wrap: wrap; align-items: flex-end; margin: 0; }
  .hero.card .info::before { content: ""; order: 4; flex: 0 0 100%; height: 0; }
  .hero.card .when { display: contents; }
  .hero.card .ld-what { order: 1; flex: 0 0 100%; display: block; min-width: 0; margin: 0; font: 500 14px/1.35 var(--f-t); color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hero.card .ld-what b { font-weight: 650; color: var(--t1); }
  .hero.card .ld-what span::before { content: "\00A0·\00A0"; }
  .hero.card .ld-date { order: 2; display: block; margin: var(--dgap) 0 0; font: 500 14px/1.35 var(--f-t); color: var(--t2); white-space: nowrap; }
  .hero.card .ld-date b { font-weight: 650; color: var(--t1); }
  .hero.card .ld-date b::after { content: "\00A0·\00A0"; font-weight: 400; color: var(--t2); }
  .hero.card .ld-note { order: 3; margin: var(--dgap) 0 0; padding: 0; font: 500 14px/1.35 var(--f-t); color: var(--t2); white-space: nowrap; }
  .hero.card .ld-note::before { content: "\00A0·\00A0"; }
  .hero.card .ld-time { order: 5; margin: 8px 16px 0 0; }
  .hero.card .acts { order: 6; display: flex; gap: 10px; margin: 12px 0 0 auto; }
  .hero.card .acts .btn { height: 46px; padding: 0 var(--bpx); font-size: var(--bfs); }
  .hero.card .acts .bc { font-size: 13px; }
}
/* phone: card 1 = the phone hero block above, re-scoped to .hero.c1 */
@media (max-width: 699.98px) {
  .hero.c1 { --Mt: clamp(28px, min(10vw, 4.8svh), 44px); --tsz: clamp(48px, 7svh, 58px); }
  .hero.c1 { --fyt: .4; --B: 40px; --F: 48px; }
  .hero.c1 .stage { height: calc(4.5 * var(--Mt) + 30px); }
  /* the one gradient: the page surface rising under the eyebrow and the first name */
  .hero.c1 .stage::after { background: linear-gradient(to bottom, transparent 0, transparent 48%, rgba(11,11,12,.22) 58%, rgba(11,11,12,.55) 70%, rgba(11,11,12,.84) 82%, rgba(11,11,12,.96) 91%, var(--bg) 100%); }
  .hero.c1.n0 .stage { height: 36px; }
  .hero.c1.n0 .ph { display: none; }
  .hero.c1 .hero-in { position: relative; z-index: 5; margin-top: calc(-.55 * var(--Mt)); container-type: inline-size; }
  .hero.c1 .lockup { display: grid; margin-top: 8px; --max: min(104px, 10svh);
    font-size: min(var(--max), calc(100cqi / var(--em-stack, 4) / 1.03)); line-height: .86; }
  .hero.c1 .lockup .n1 { justify-self: start; margin-left: calc(var(--lsb, 0) * -1em); }
  .hero.c1 .lockup .n2 { justify-self: end; text-align: right; margin-right: calc(var(--rsb, 0) * -1em); }
  .hero.c1 .lockup .hy > .ln { display: block; line-height: 1.02; }
  .hero.c1 .lockup .vs { justify-self: center; margin: .07em 0 .11em; font-size: clamp(14px, .22em, 19px); line-height: 1; letter-spacing: .02em; }
  .hero.c1 .info { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "time fc" "note note" "date date" "what what" "go go"; align-items: end; margin-top: 18px; }
  .hero.c1 .when { display: contents; }
  .hero.c1 .ld-time { grid-area: time; }
  .hero.c1 .ld-note { grid-area: note; margin-top: 8px; padding-left: 0; }
  .hero.c1 .ld-date { grid-area: date; display: block; margin-top: 10px; }
  .hero.c1 .ld-date b::after { content: " · "; font-weight: 400; color: var(--t2); }
  .hero.c1 .ld-what { grid-area: what; display: block; margin-top: 2px; }
  .hero.c1 .ld-what b { font-weight: 500; color: var(--t2); }
  .hero.c1 .ld-what span::before { content: " · "; }
  .hero.c1 .acts { display: contents; }
  .hero.c1 .acts .rc-watch { grid-area: go; width: 100%; height: 52px; margin-top: 18px; }
  .hero.c1 .acts .fc { grid-area: fc; height: 44px; margin: 0 -10px -2px 0; padding: 0 10px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 15px; color: var(--t1); }
  .hero.c1 .acts .fc.pri { grid-area: go; width: 100%; height: 52px; margin: 18px 0 0; background: var(--t1); color: var(--bg); }
  .hero.c1 .acts .bc { grid-area: fc; padding-bottom: 12px; font-size: 13px; }
}
@media (max-width: 699.98px) {
  .hero.c1 .info:has(.bc) { grid-template-areas: "time time" "note note" "date date" "what what" "go go" "bc bc"; }
  .hero.c1 .info:has(.bc) .acts .bc { grid-area: bc; justify-self: center; padding: 10px 0 0; }
}

/* phone: card 2 = the phone hero block above, re-scoped to .hero.c2 */
@media (max-width: 699.98px) {
  .hero.c2 { --Mt: clamp(28px, min(10vw, 4.8svh), 44px); --tsz: clamp(48px, 7svh, 58px); }
  .hero.c2 { --fyt: .4; --B: 40px; --F: 48px; }
  .hero.c2 .stage { height: calc(4.5 * var(--Mt) + 30px); }
  /* the one gradient: the page surface rising under the eyebrow and the first name */
  .hero.c2 .stage::after { background: linear-gradient(to bottom, transparent 0, transparent 48%, rgba(11,11,12,.22) 58%, rgba(11,11,12,.55) 70%, rgba(11,11,12,.84) 82%, rgba(11,11,12,.96) 91%, var(--bg) 100%); }
  .hero.c2.n0 .stage { height: 36px; }
  .hero.c2.n0 .ph { display: none; }
  .hero.c2 .hero-in { position: relative; z-index: 5; margin-top: calc(-.55 * var(--Mt)); container-type: inline-size; }
  .hero.c2 .lockup { display: grid; margin-top: 8px; --max: min(104px, 10svh);
    font-size: min(var(--max), calc(100cqi / var(--em-stack, 4) / 1.03)); line-height: .86; }
  .hero.c2 .lockup .n1 { justify-self: start; margin-left: calc(var(--lsb, 0) * -1em); }
  .hero.c2 .lockup .n2 { justify-self: end; text-align: right; margin-right: calc(var(--rsb, 0) * -1em); }
  .hero.c2 .lockup .hy > .ln { display: block; line-height: 1.02; }
  .hero.c2 .lockup .vs { justify-self: center; margin: .07em 0 .11em; font-size: clamp(14px, .22em, 19px); line-height: 1; letter-spacing: .02em; }
  .hero.c2 .info { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "time fc" "note note" "date date" "what what" "go go"; align-items: end; margin-top: 18px; }
  .hero.c2 .when { display: contents; }
  .hero.c2 .ld-time { grid-area: time; }
  .hero.c2 .ld-note { grid-area: note; margin-top: 8px; padding-left: 0; }
  .hero.c2 .ld-date { grid-area: date; display: block; margin-top: 10px; }
  .hero.c2 .ld-date b::after { content: " · "; font-weight: 400; color: var(--t2); }
  .hero.c2 .ld-what { grid-area: what; display: block; margin-top: 2px; }
  .hero.c2 .ld-what b { font-weight: 500; color: var(--t2); }
  .hero.c2 .ld-what span::before { content: " · "; }
  .hero.c2 .acts { display: contents; }
  .hero.c2 .acts .rc-watch { grid-area: go; width: 100%; height: 52px; margin-top: 18px; }
  .hero.c2 .acts .fc { grid-area: fc; height: 44px; margin: 0 -10px -2px 0; padding: 0 10px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 15px; color: var(--t1); }
  .hero.c2 .acts .fc.pri { grid-area: go; width: 100%; height: 52px; margin: 18px 0 0; background: var(--t1); color: var(--bg); }
  .hero.c2 .acts .bc { grid-area: fc; padding-bottom: 12px; font-size: 13px; }
}
@media (max-width: 699.98px) {
  .hero.c2 .info:has(.bc) { grid-template-areas: "time time" "note note" "date date" "what what" "go go" "bc bc"; }
  .hero.c2 .info:has(.bc) .acts .bc { grid-area: bc; justify-self: center; padding: 10px 0 0; }
}
/* phone (< 700): card 2 is a smaller copy of card 1's stacked poster (the block above, re-scoped by build.py),
   inside a card box: its two photos side by side, the names, the time row with Fight card, the date and small line,
   Watch across the bottom */
@media (max-width: 699.98px) {
  .hero.c2 { --cbg: #141415; --surf: var(--cbg); --Mt: 25px; --tsz: 42px; margin: 12px var(--gut) 0; border-radius: var(--r2); overflow: hidden; background: var(--cbg); }
  .hero.c2 .stage { background: none; height: calc(4.5 * var(--Mt) + 34px); }
  .hero.c2 .stage::after { background: linear-gradient(to bottom, transparent 0, transparent 48%, rgba(20,20,21,.22) 58%, rgba(20,20,21,.55) 70%, rgba(20,20,21,.84) 82%, rgba(20,20,21,.96) 91%, var(--cbg) 100%); }
  .hero.c2 .hero-in { padding-bottom: 16px; }
  .hero.c2 .lockup { --max: 46px; }
  /* a short pair stays on one line (fit.py: stacked only when that is much larger) */
  .hero.c2:not(.sp) .lockup { --s: min(46px, 100cqi / (var(--e1) + var(--e2) + .55) / 1.03); --gv: calc(var(--s) * .275);
    grid-template-columns: auto calc(2 * var(--gv)) auto; justify-content: center; align-items: center; font-size: var(--s); line-height: .8; padding-top: .06em; }
  .hero.c2:not(.sp) .lockup .n1 { grid-column: 1; justify-self: end; margin: 0 calc(var(--rsb, 0) * -1em) 0 0; }
  /* the "vs": the same rule as card 1's (at least 14 px, so it never shrinks to a speck beside smaller names) */
  .hero.c2:not(.sp) .lockup .vs { grid-column: 2; justify-self: center; margin: .05em 0 0; font-size: clamp(14px, .22em, 19px); }
  .hero.c2:not(.sp) .lockup .n2 { grid-column: 3; justify-self: start; text-align: left; margin: 0 0 0 calc(var(--lsb, 0) * -1em); }
  .hero.c2:not(.sp) .lockup .hy > .ln { display: inline; }
  .hero.c2 .info { margin-top: 14px; }
  .hero.c2 .ld-date { margin-top: 8px; }
  .hero.c2 .acts .rc-watch, .hero.c2 .acts .fc.pri { height: 46px; margin-top: 14px; }
}

/* ---------- end of the poster card block ---------- */

/* =========================================================
   SECTION HEADS: the h2 on the left edge, one quiet meta on the right edge
   ========================================================= */
.sec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 36px 0 4px; }
.sec-h h2 { font: 650 21px/1.2 var(--f-t); letter-spacing: -.012em; }
.sec-sub { font-size: 13px; color: var(--t2); font-variant-numeric: tabular-nums; }
.tz-copy { flex: 1 0 100%; font-size: 13px; color: var(--t2); }
.tz-copy b { font-weight: 600; color: var(--t1); }
@media (min-width: 1024px) {
  .sec-h { margin: 64px 0 0; }
  .sec-h h2 { font-size: 22px; }
  .tz-copy { display: none; }
  .sched > .sec-h { margin-top: 30px; }
}

/* =========================================================
   SCHEDULE — ONE table. Phone first: a card list (Precision structure): day heading, then cards with
   label + city, the two names (faces only on big fights), the time on the right, Watch + "N fights" in the foot.
   ========================================================= */
.grp-h { display: flex; align-items: center; gap: 14px; margin: 28px 0 0; font: 650 12px/1.2 var(--f-t); letter-spacing: .09em; text-transform: uppercase; color: var(--t2); }
.grp-h .gs { margin-left: -6px; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 13px; }
.grp-h .gs::before { content: "·"; margin-right: 8px; color: var(--t3); }
.grp-h::after { content: ""; flex: 1; height: 1px; background: var(--line2); }
.grp:first-of-type .grp-h { margin-top: 16px; }
.grp-none { margin: 12px 0 0; padding: 14px 0; font-size: 15px; color: var(--t2); }
.day { margin-top: 18px; }
.day-h { display: flex; align-items: baseline; gap: 8px; margin: 0 2px 10px; font-weight: 400; }
.day-h .dshort { display: none; }
.day-h .dfull { font: 650 15px/1.2 var(--f-t); }
.day-h .dfull span { font-weight: 400; color: var(--t2); margin-left: 2px; }
.day-h .drel { margin-left: auto; font: 500 13px var(--f-t); color: var(--t2); white-space: nowrap; }
.day-h .drel.soon { color: var(--t1); font-weight: 600; }

.ev { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top top" "fx t" "ch foot" "uc uc";
  margin-top: 8px; background: var(--s1); border-radius: var(--r2); isolation: isolate; transition: background-color 160ms var(--ease); }
/* the first card under a day heading sits on the heading's own 10px; every later card keeps its 8px gap */
.day > .ev:nth-child(1 of .ev) { margin-top: 0; }
.ev .top { grid-area: top; display: flex; justify-content: space-between; align-items: baseline; column-gap: 12px; padding: 14px 16px 0; min-width: 0; }
.ev.nokick .top { justify-content: flex-end; }
.ev .top .where { font-size: 12px; line-height: 1.25; color: var(--t2); white-space: nowrap; overflow-x: clip; text-overflow: ellipsis; min-width: 0; }
.where:has(.w-short) .w-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (min-width: 1024px) { .where:has(.w-short) .w-full { position: static; width: auto; height: auto; overflow: visible; clip-path: none; } .w-short { display: none; } }
.ev .pair { display: none; }
.ev-main { grid-area: fx; display: block; padding: 10px 0 14px 16px; min-width: 0; border-radius: inherit; }
.ev-main::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.ev-main:focus-visible { outline: 0; }
.ev-main:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
.fx { display: grid; gap: 6px; container-type: inline-size; }
.fx .vb { display: contents; }
.fx .f { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; column-gap: 12px; min-width: 0; }
.fx .f { grid-template-columns: 32px minmax(0, 1fr); }
/* the small "vs" between the stacked names (phone), on the names' line, so a pair never reads as one person */
.fx .vs { display: block; margin: -3px 0 -3px 44px; font: 600 11px/1 var(--f-t); font-style: normal; letter-spacing: .02em; color: var(--t3); }
.sn { display: block; min-width: 0; font: 800 24px/1 var(--f-d); text-transform: uppercase; letter-spacing: .004em; padding: .08em 0 .04em; }
.fx .sn { font-size: max(18px, min(24px, calc((100cqi - 44px) / var(--em-s) / 1.03))); }
.sn.tba { color: var(--t3); }
.ev .t { grid-area: t; align-self: center; display: grid; justify-items: end; padding: 0 16px 2px 12px; text-align: right; white-space: nowrap; }
time.big { display: block; font: 800 30px/.9 var(--f-d); letter-spacing: -.005em; }
time.big.tba { font-size: 17px; line-height: 1.1; color: var(--t2); text-transform: uppercase; letter-spacing: .02em; }
.t .sub { display: grid; justify-items: end; margin-top: 6px; font-size: 13px; line-height: 1.3; color: var(--t2); }
.t .sub .ns { display: none; }
.t .sub .est { color: var(--t1); font-weight: 600; }
.ev .live { font: 800 30px/.9 var(--f-d); }
.ev.is-live time.big { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ev:not(.has-uc) .ch { grid-column: 1 / -1; }
.ev .ch { grid-area: ch; position: relative; z-index: 1; display: flex; align-items: center; min-width: 0; padding-left: 16px; box-shadow: inset 0 1px 0 var(--line); }
.watch { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; font: 500 13px/1 var(--f-t); color: var(--t2); white-space: nowrap; }
.watch b { color: var(--t1); font-weight: 650; }
.watch .wv { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.watch .ic { width: 14px; height: 14px; color: var(--t2); transition: transform 160ms var(--ease); }
.bc { display: inline-flex; align-items: center; min-height: 44px; font: 500 13px/1.2 var(--f-t); color: var(--t2); white-space: nowrap; }
.ev .more { grid-area: foot; position: relative; z-index: 1; display: flex; justify-content: flex-end; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 12px;
  font: 650 13px/1 var(--f-t); color: var(--t2); white-space: nowrap; list-style: none; cursor: pointer; box-shadow: inset 0 1px 0 var(--line); transition: color 160ms var(--ease); }
.more::-webkit-details-marker { display: none; }
.more .ic { width: 14px; height: 14px; transition: transform 240ms var(--ease); }
.ucd[open] > .more .ic { transform: rotate(180deg); }
.more:focus-visible { outline-offset: -2px; border-radius: var(--r); }
.watch:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .ev:hover { background: var(--s2); }
  .watch:hover .ic { transform: translate(1px, -1px); }
  .watch:hover, .more:hover { color: var(--t1); }
}
/* the hero's fight in its table slot: one quiet line, no faces / Watch / card size */
.ev.ptr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "t n go"; align-items: center; column-gap: 14px; padding: 0 0 0 16px; background: none; box-shadow: inset 0 0 0 1px var(--line); }
.ev.ptr .t { grid-area: t; padding: 0; justify-items: start; }
.ev.ptr .t .tm { padding-left: 9px; }
.ev.ptr .t time { font: 600 15px/1.2 var(--f-t); color: var(--t1); }
.ptr-n { grid-area: n; font: 500 15px/1.3 var(--f-t); color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptr-n i { font-style: normal; color: var(--t3); }
.ptr-go { grid-area: go; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 8px; font: 500 13px var(--f-t); color: var(--t2); white-space: nowrap; }
.ptr-go .ic { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .ev.ptr:hover { background: none; } .ptr-go:hover { color: var(--t1); } }
/* faces: a round crop of the stored face, lifted so a dark photo still reads as a face. No photo (or TBA, or a
   file that fails): a quiet tonal disc in the same slot, no outline, no silhouette */
.face, .won-ring { position: relative; display: block; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex: none; background: #26262A; }
.face.none, .face.tba { background: #1F1F22; }
/* a fighter with no photo, or a TBA opponent: the site's own sport silhouette (gloves for boxing, hand wraps for MMA;
   the shapes of static/placeholder-fighter-*.svg without their box) as a light figure on the dark disc, cropped
   head-and-shoulders the way a face photo fills its disc (owner, 2026-10-14) */
.face.none::after, .face.tba::after { content: ""; position: absolute; inset: 0; background: #46464C;
  -webkit-mask: url(../silhouette-mma.svg) 50% 0% / 190% auto no-repeat; mask: url(../silhouette-mma.svg) 50% 0% / 190% auto no-repeat; }
.boxing .face.none::after, .boxing .face.tba::after { -webkit-mask-image: url(../silhouette-boxing.svg); mask-image: url(../silhouette-boxing.svg); }
/* the poster's half with no photo: the same figure, large and faint, standing on the half's bottom edge */
.ph.vacant::before { content: ""; position: absolute; left: 0; right: 0; top: 12%; bottom: 0; background: linear-gradient(#36363C, #1B1B1E 80%);
  -webkit-mask: url(../silhouette-mma.svg) 50% 100% / contain no-repeat; mask: url(../silhouette-mma.svg) 50% 100% / contain no-repeat; }
.boxing .ph.vacant::before { -webkit-mask-image: url(../silhouette-boxing.svg); mask-image: url(../silhouette-boxing.svg); }
.face img, .won-ring img { width: 100%; height: 100%; object-fit: cover; transform-origin: calc(var(--px, .5) * 100%) calc(var(--py, .35) * 100%); transform: translate(calc((.5 - var(--px, .5)) * 100%), calc((.5 - var(--py, .35)) * 100%)) scale(var(--z, 1.3)); filter: grayscale(1) brightness(1.18) contrast(1.18); transition: opacity 200ms var(--ease); }
.face img.lt, .won-ring img.lt { filter: grayscale(1) brightness(.9) contrast(1.15); }
/* results: the winner's face in the green ring, the loser's greyed */
.won-ring { box-shadow: 0 0 0 2px var(--rg, var(--bg)), 0 0 0 4px var(--win); }
.bx { --rg: var(--s1); }
.face.lostf img { filter: grayscale(1) brightness(.72) contrast(1); opacity: .55; }

/* undercard: a native disclosure, closed by default with or without JS */
.ucd { display: contents; }
.ucd::details-content { display: contents; }
.ucd:not([open])::details-content { display: none; }
@supports not selector(::details-content) { .ucd { display: block; grid-column: 1 / -1; } }
.uc { grid-area: uc; position: relative; z-index: 1; }
.uc-in { padding: 0 16px 8px; box-shadow: inset 0 1px 0 var(--line); }
.uc-sub { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 6px; font: 650 13px/1.2 var(--f-t); color: var(--t1); }
.uc-sub .gt { font-weight: 600; color: var(--t2); font-variant-numeric: tabular-nums; }
.uc-g.cont .uc-sub { display: none; }
.bt { padding: 8px 0; font-size: 13px; line-height: 1.35; box-shadow: 0 -1px 0 var(--line); }
.uc-list > .bt:first-child { box-shadow: none; }
.uc-g.cont .uc-list > .bt:first-child { box-shadow: 0 -1px 0 var(--line); }
.bt i { font: 500 12px var(--f-t); font-style: normal; color: var(--t3); }
.bt .tba { color: var(--t3); }

/* the clock change: a dated note of its own ("Sun 25 Oct · 04:00 · Clocks go back an hour · times from here on
   are GMT+2"), between two day sections, or inside the day it happens on */
.clockchg { margin: 12px 2px 2px; padding: 10px 0; font-size: 13px; line-height: 1.4; color: var(--t2); }
.clockchg .cc-d, .clockchg .cc-h { font-weight: 600; color: var(--t1); }
.clockchg .cc-d::after, .clockchg .cc-h::after { content: "\202F·\00A0"; font-weight: 400; color: var(--t2); }
.clockchg .cc-t { font-weight: 600; color: var(--t1); }
.day > .clockchg .cc-d { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- desktop table (>= 1024): the page grid's 12 columns ----------
   >= 1280: Date (col 1) | Time + one note (cols 2-3) | Fight (cols 4-7: names on one line, then "weight/title ·
   place") | Watch (cols 8-10) | "N fights" (cols 11-12, ending on the right edge). A big fight's paired faces open
   the fight cell (col 4) and its names follow them. One line of primary content per row, every row one height. */
@media (min-width: 1024px) {
  .tt { --c-t: 2 / 4; --c-f: 4 / 8; --c-w: 8 / 11; --c-m: 11 / 13; --c-r: 2 / 13; --pw: 80px; }
  .tt .days { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); }
  .tt .day { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; margin: 0; }
  .tt .days > * + .day, .tt .days > .clockchg { box-shadow: inset 0 1px 0 var(--line2); }
  .tt .day-h { grid-column: 1; grid-row: 1 / span 40; align-self: start; position: sticky; top: 8px; z-index: 1;
    display: grid; gap: 3px; margin: 0; padding: 15px 0 12px; }
  .tt .day-h .dfull { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tt .day-h .dshort { display: block; font: 650 14px/1.15 var(--f-t); color: var(--t1); white-space: nowrap; }
  .tt .day-h .drel { margin: 0; font: 500 13px/1.2 var(--f-t); }

  .tt .ev { grid-column: var(--c-r); display: grid; grid-template-columns: subgrid; grid-template-areas: none; grid-template-rows: auto auto auto;
    margin: 0; background: none; border-radius: 0; align-items: start; }
  .tt .day > .ev ~ .ev, .tt .day > .clockchg ~ .ev { box-shadow: inset 0 1px 0 var(--line); }
  .tt .day > .ev:nth-child(2 of .ev) { margin: 0; }
  /* hover: a quiet wash from the date column to the row end (no raised panels) */
  .tt .ev::before { content: ""; position: absolute; z-index: -1; inset: 0 -12px; border-radius: var(--r); background: var(--s1); opacity: 0; transition: opacity 160ms var(--ease); pointer-events: none; }
  /* the subgrid's own columns: the row starts at page column 2, so page column N is local N - 1 */
  .tt .ev .t { grid-column: 1 / 3; grid-row: 1 / span 2; align-self: start; justify-items: start; padding: 14px 0 13px; text-align: left; }
  .tt .t .tm { padding-left: 11px; }
  .tt time.big { font-size: 28px; }
  .tt .ev .live { font-size: 28px; }
  .tt .t .sub { display: block; margin-top: 6px; padding-left: 11px; font-size: 13px; line-height: 1.25; white-space: nowrap; }
  .tt .t .sub .ns { display: inline; color: var(--t3); }
  .tt .ev .pair { grid-column: 3; grid-row: 1 / span 2; align-self: center; display: flex; position: relative; z-index: 1; pointer-events: none; }
  .pair .face { width: 40px; height: 40px; box-shadow: 0 0 0 2px var(--bg); }
  .pair .face.pb { margin-left: -12px; }
  .tt .ev-main { grid-column: 3 / 7; grid-row: 1; align-self: end; padding: 13px 0 0 var(--pw); }

  .tt .ev-main::after { inset: 0 -12px; border-radius: var(--r); }
  .tt .fx { display: flex; align-items: baseline; gap: 0; }
  .tt .fx .f { display: contents; }
  .tt .fx .face { display: none; }
  .tt .fx .vb { display: inline-flex; align-items: baseline; white-space: nowrap; }
  .tt .fx .vs { display: inline; margin: 0; padding: 0 .55em 0 .5em; font-size: 12px; letter-spacing: 0; }
  .tt .sn { font-size: 24px; white-space: nowrap; padding: 0; line-height: 1.05; }
  .tt .sn.tba { font-size: 17px; }
  .tt .ev .top { grid-column: 3 / 7; grid-row: 2; display: block; padding: 4px 0 14px var(--pw); white-space: nowrap; overflow-x: clip; text-overflow: ellipsis; font-size: 13px; color: var(--t2); }
  .tt .ev .top .kick { display: inline; font-size: 12px; overflow: visible; }
  .tt .ev .top .where { display: inline; font-size: 13px; }
  .tt .ev .top .kick:not(.nil) + .where::before { content: "·"; margin: 0 7px; color: var(--t3); }
  .tt .ev .ch { grid-column: 7 / 10; grid-row: 1 / span 2; align-self: center; padding: 0; box-shadow: none; }
  .tt .watch { font-size: 15px; }
  .tt .bc { font-size: 13px; color: var(--t3); }
  .tt .ev .more { grid-column: 10 / 12; grid-row: 1 / span 2; align-self: center; justify-self: end; padding: 0 0 0 12px; margin: 0; box-shadow: none; }
  .tt .uc { grid-column: 3 / -1; grid-row: 3; }
  .tt .uc-in { padding: 0 0 14px; box-shadow: none; }
  .tt .uc-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--cg); align-items: start; box-shadow: inset 0 1px 0 var(--line); }
  .tt .uc-groups.g1 { grid-template-columns: minmax(0, 1fr); }
  .tt .uc-g.cont .uc-sub { display: flex; }
  .tt .uc-g.cont .uc-sub .gn { font-weight: 500; color: var(--t2); }
  .tt .uc-g.cont .uc-list > .bt:first-child { box-shadow: none; }
  .tt .uc-sub { padding-top: 12px; justify-content: flex-start; gap: 10px; }
  /* the pointer line: time (cols 2-3) | names (from col 4) | "Featured above" in the Watch column */
  .tt .ev.ptr { grid-template-areas: none; align-items: center; padding: 0; column-gap: var(--cg); box-shadow: inset 0 1px 0 var(--line); }
  .tt .day > .ev.ptr:first-of-type, .tt .day > .day-h + .ev.ptr { box-shadow: none; }
  .tt .ev.ptr .t { grid-column: 1 / 3; grid-row: 1; padding: 12px 0; align-self: center; }
  .tt .ev.ptr .t .tm { padding-left: 11px; }
  .tt .ev.ptr .ptr-n { grid-column: 3 / 7; grid-row: 1; padding-left: var(--pw); }
  .tt .ev.ptr .ptr-go { grid-column: 7 / 10; grid-row: 1; justify-self: start; padding: 0; }
  /* the clock change: date (col 1, only between two days) | time (cols 2-3) | what (from col 4) */
  .tt .clockchg { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; margin: 0; padding: 12px 0; }
  .tt .day > .clockchg { grid-column: var(--c-r); box-shadow: inset 0 1px 0 var(--line); }
  .tt .clockchg .cc-d { grid-column: 1; }
  .tt .clockchg .cc-h { grid-column: 2 / 4; padding-left: 11px; }
  .tt .day > .clockchg .cc-h { grid-column: 1 / 3; }
  .tt .clockchg .cc-x { grid-column: 4 / -1; }
  .tt .day > .clockchg .cc-x { grid-column: 3 / -1; }
  .tt .clockchg .cc-d::after, .tt .clockchg .cc-h::after { content: none; }
  @media (hover: hover) and (pointer: fine) {
    .tt .ev:hover { background: none; }
    .tt .ev:not(.ptr):hover::before { opacity: 1; }
  }
  .grp-h { margin: 34px 0 0; padding-bottom: 2px; }
  .grp:first-of-type .grp-h { margin-top: 14px; }
  .grp-h + .days > .day:first-child { box-shadow: none; }
  .grp-none { margin: 0; padding: 16px 0; }
}
/* 1024-1279: date (cols 1-2) | time (3-4) | fight (5-8) | Watch (9-11) | N fights (12); the nav starts at col 3 */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .tt { --c-r: 3 / 13; --pw: 76px; }
  .tt .day-h { grid-column: 1 / 3; }
  .tt .ev .t, .tt .ev.ptr .t { grid-column: 1 / 3; }
  .tt .ev .pair { grid-column: 3; }
  .tt .ev-main, .tt .ev .top, .tt .ev.ptr .ptr-n { grid-column: 3 / 7; }
  .tt .ev .ch, .tt .ev.ptr .ptr-go { grid-column: 7 / 10; }
  .tt .ev .more { grid-column: 10 / 11; }
  .tt .uc { grid-column: 3 / -1; }
  .tt .clockchg .cc-d { grid-column: 1 / 3; }
  .tt .clockchg .cc-h { grid-column: 3 / 5; }
  .tt .clockchg .cc-x { grid-column: 5 / -1; }
  .tt .sn { font-size: 22px; }
}
/* real laptop browser heights (1366x657, 1280x665): the cards and the space around them give a little, so both
   cards' time + Watch and the first table row still share the first screen */
@media (min-width: 1024px) and (max-height: 700px) {
  .duo-top { padding: 14px 0 10px; }
  .card { --Hc: clamp(360px, 100vh - 258px, 520px); --mtk: .088; --eyeo: 44px; --cpt: 18px; --cpb: 22px; --dgap: 10px; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .sched > .sec-h { margin-top: 22px; }
  .grp:first-of-type .grp-h { margin-top: 10px; }
}

/* =========================================================
   RESULTS — box scores on the grid, every pending fight in one compact list
   ========================================================= */
.bxs { display: grid; gap: 8px; margin-top: 12px; }
.bx { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k k" "n r" "w w"; column-gap: 12px; padding: 14px 16px 16px; background: var(--s1); border-radius: var(--r2); isolation: isolate; }
.bx-k { grid-area: k; display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.bx-k .tm::before { top: .2em; bottom: .15em; }
.bx-d { font-size: 13px; color: var(--t2); white-space: nowrap; }
.bx-main { grid-area: n; display: block; min-width: 0; container-type: inline-size; }
.bx-main::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.bx-main:focus-visible { outline: 0; }
.bx-main:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
.bx-n { display: grid; gap: 4px; }
.bl { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* a face beside each stacked name: the winner's in the green ring, the loser's greyed */
.bl > .face, .bl > .won-ring { width: 34px; height: 34px; margin: 0 6px 0 2px; }
.bx-n { gap: 8px; }
.bl .sn { font-size: var(--nm, min(26px, calc((100cqi - 34px - 50px) / var(--em-s) / 1.03))); }
.bl.l .sn { color: var(--t3); }
.wtag { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 1px 5px 0; border-radius: 4px; font: 800 13px/1 var(--f-d); letter-spacing: .02em; background: var(--win); color: #04130A; flex: none; }
.bx-r { grid-area: r; align-self: end; text-align: right; }
.bx-r .code { display: block; font: 800 26px/.9 var(--f-d); letter-spacing: .01em; }
.bx-r .dt { display: block; margin-top: 5px; font-size: 13px; color: var(--t2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bx-r.pend .code { font-size: 24px; color: var(--t3); }
.bx-r.pend .dt { color: var(--t1); font-weight: 600; }
.bx-w { grid-area: w; margin-top: 10px; font-size: 13px; color: var(--t2); }
.bx:not(:has(.wtag)) .bl .sn { color: var(--t2); }
.bx.oc-draw .bl .sn, .bx.oc-nc .bl .sn { color: var(--t1); }
.pend-w { margin-top: 24px; }
.pend-h { padding: 0 0 8px; font: 650 12px/1.3 var(--f-t); letter-spacing: .09em; text-transform: uppercase; color: var(--t2); }
.pl-row { position: relative; display: grid; grid-template-columns: 82px 56px minmax(0, 1fr); grid-template-areas: "d p n" "d p k"; column-gap: 10px; align-items: baseline; min-height: 44px; padding: 10px 0; box-shadow: inset 0 1px 0 var(--line); }
.pl-row .pair { grid-area: p; align-self: center; display: flex; }
.pl-row .pair .face { width: 32px; height: 32px; box-shadow: 0 0 0 2px var(--bg); }
.pl-row .pair .face.pb { margin-left: -10px; }
.pl-row .tm { grid-area: d; }
.pl-d { font-size: 13px; color: var(--t2); white-space: nowrap; }
.pl-n { grid-area: n; font: 800 18px/1.1 var(--f-d); text-transform: uppercase; min-width: 0; }
.pl-n i { font: 500 12px var(--f-t); font-style: normal; text-transform: none; color: var(--t3); margin: 0 3px; }
.pl-n::after { content: ""; position: absolute; inset: 0; }
.pl-k { grid-area: k; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--t2); min-width: 0; }
@media (hover: hover) and (pointer: fine) { .bx:hover { background: var(--s2); } }
@media (min-width: 1024px) {
  .bxs { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--cg); margin-top: 14px; box-shadow: inset 0 1px 0 var(--line2); }
  .bx { grid-column: span 3; padding: 18px 0 20px; background: none; border-radius: 0; box-shadow: inset 0 -1px 0 var(--line); --rg: var(--bg); }
  .bx::before { content: ""; position: absolute; inset: 0 -12px; border-radius: var(--r); background: var(--s1); opacity: 0; z-index: -1; transition: opacity 160ms var(--ease); }
  .bx-main::after { inset: 0 -12px; border-radius: var(--r); }
  @media (hover: hover) and (pointer: fine) { .bx:hover { background: none; } .bx:hover::before { opacity: 1; } }
  .pend-list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); }
  .pl-row { grid-column: span 6; grid-template-columns: 91px 54px minmax(0, 1fr) auto; grid-template-areas: "d p n k"; column-gap: var(--cg); align-items: center; }
  .pl-n { white-space: nowrap; }
  .pl-k { white-space: nowrap; overflow-x: clip; text-overflow: ellipsis; text-align: right; }
}
/* the number of box scores sets their span: 4 -> 3 columns each, 3 -> 4, 2 -> 6, 1 -> the full width */
@media (min-width: 1024px) {
  .bxs.n3 .bx { grid-column: span 4; }
  .bxs.n2 .bx { grid-column: span 6; }
  .bxs.n1 .bx { grid-column: 1 / -1; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) { .bxs.n4 .bx { grid-column: span 6; } }

/* ---------- footer: the grid's four quarters (brand | calendar feeds | about | photo credits) ---------- */
.page-foot { margin-top: 80px; padding: 32px 0 44px; box-shadow: inset 0 1px 0 var(--line); font-size: 13px; color: var(--t2); }
.page-foot .cols { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; }
.page-foot .fb { grid-column: 1 / -1; }
.page-foot .fb-m { display: block; margin: 2px 0 10px; color: var(--t1); }
.page-foot .fb p:not(.fb-m) { font-size: 13px; line-height: 1.45; max-width: 34ch; }
.page-foot h2 { font: 600 13px var(--f-t); color: var(--t2); margin-bottom: 4px; }
.page-foot a { display: flex; align-items: center; min-height: 44px; color: var(--t1); font-size: 15px; }
.page-foot .note { margin-top: 12px; color: var(--t2); font-size: 13px; line-height: 1.45; max-width: 40ch; }
@media (hover: hover) and (pointer: fine) { .page-foot a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line2); } }
@media (min-width: 1024px) {
  .page-foot .cols { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); }
  .page-foot .cols > div { grid-column: span 3; }
  .page-foot .cols > div:last-child { justify-self: end; text-align: right; }
  .page-foot .cols > div:last-child .note { margin-left: auto; }
}

/* =========================================================
   MOTION — transform/opacity only, 150-400ms, one easing. Nothing delays a time.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero .ph.l { animation: walk-l 420ms var(--ease) both; }
  html.js .hero .ph.r { animation: walk-r 420ms var(--ease) 40ms both; }
  html.js .hero .lockup .n1 { animation: lift 340ms var(--ease) 60ms backwards; }
  html.js .hero .lockup .n2 { animation: lift 340ms var(--ease) 110ms backwards; }
  @keyframes walk-l { from { opacity: 0; transform: translateX(-18px); } }
  @keyframes walk-r { from { opacity: 0; transform: translateX(18px); } }
  @keyframes lift { from { opacity: 0; transform: translateY(12px); } }
  @keyframes fade { from { opacity: 0; } }
  .ldot { animation: breathe 1.6s ease-in-out infinite; }
  @keyframes breathe { 50% { opacity: .55; } }
  .cd.tick { animation: fade 240ms var(--ease) both; }
  .ucd[open] .uc-list > li { animation: settle 200ms var(--ease) both; animation-delay: calc(min(var(--k, 0), 8) * 22ms); }
  @keyframes settle { from { opacity: 0; transform: translateY(4px); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* =========================================================
   PRODUCTION ADDITIONS — what the static mocks did not need
   ========================================================= */
/* a photo with no metadata yet (photos.photo_meta() -> None): its box is computed from an assumed square, so the file
   is cropped into that box (never stretched), its upper third kept. (Only here: a short file's .bt / .bb rows are
   stretched on purpose.) */
.ph.nometa img { object-fit: cover; object-position: 50% 33%; }
/* the visitor's clock: site.js writes 24-hour times, or the 12-hour time with a small AM/PM where the visitor's
   locale uses it; the suffix sits on the digits' baseline at a third of their size in the display times */
time .ap { margin-left: .28em; }
time.big .ap, .ld-time time .ap, .ev .live + time .ap { margin-left: .1em; font-size: .4em; letter-spacing: .02em; }
/* dates and note times are <time> elements here (site.js shows them in the visitor's zone); their digits follow the
   line around them, as the mock's plain text did */
.ld-date b > time.fdate, .ld-note time, .t .sub time { font-variant-numeric: inherit; }
/* below 1024 px the poster's photos sit above its type block (.hero-in, the containing block of the Fight card link's
   ::after), so the card-wide link reaches up over them to the photos' top edge: the whole card is one link (MISTAKES
   2026-10-14; the mock's phone layout left the photos out). Stage top = -(stage height - .55 x --Mt). */
@media (max-width: 1023.98px) {
  .hero:not(.card) .fc::after { top: calc(-3.95 * var(--Mt) - 30px); }
  .hero:not(.card).n0 .fc::after { top: calc(.55 * var(--Mt) - 36px); }
}
@media (max-width: 699.98px) {
  .hero.c1 .fc::after { top: calc(-3.95 * var(--Mt) - 30px); }
  .hero.c2 .fc::after { top: calc(-3.95 * var(--Mt) - 34px); }
  .hero.c1.n0 .fc::after, .hero.c2.n0 .fc::after { top: calc(.55 * var(--Mt) - 36px); }
}
/* a broadcaster the site has no Watch link for (no affiliate provider): the same words, not a link */
.watch.nolink .ic { display: none; }
.acts .bc b { font-weight: 650; color: var(--t1); }
/* given names in the condensed caps, grey before the white surname (fight cards, box scores, pending rows) */
.sn .fn { color: var(--t2); }
/* faces whose tone class is kept in data-tone (production's result markup is pinned by tests) */
.face img[data-tone="lt"], .won-ring img[data-tone="lt"] { filter: grayscale(1) brightness(.9) contrast(1.15); }
.face img[data-tone="ko"], .won-ring img[data-tone="ko"] { filter: url(#kos) grayscale(1) brightness(var(--b, .92)) contrast(var(--c, 1.12)); }
.face.lostf img[data-tone] { filter: grayscale(1) brightness(.72) contrast(1); }

/* ---------- search: the drawer under the header (#searchBar), results under the field ---------- */
#searchResults:empty { display: none; }
.sr-h { padding: 12px 2px 8px; font: 500 13px/1.3 var(--f-t); color: var(--t2); }
.sr-list { display: grid; border-radius: var(--r2); background: var(--s1); overflow: hidden; }
.sr-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 16px; min-height: 52px; padding: 10px 16px;
  box-shadow: inset 0 -1px 0 var(--line); }
.sr-list a:last-child { box-shadow: none; }
.sr-list .sr-n { font: 650 15px/1.3 var(--f-t); color: var(--t1); min-width: 0; }
.sr-list .sr-n small { display: block; font: 500 13px/1.35 var(--f-t); color: var(--t2); }
.sr-list .sr-t { font: 500 13px/1.3 var(--f-t); color: var(--t2); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .sr-list a:hover { background: var(--s2); } }

/* =========================================================
   SHARED PAGE PARTS (pages/lists/lists.css, approved with the list pages)
   ========================================================= */
/* ---------- results: a row of box scores always fills the grid (design.results_rows: w3 / w4 / w6 / w12 by how
   many share the card's row) ---------- */
@media (min-width: 1024px) {
  .bxs > .bx.w3 { grid-column: span 3; }
  .bxs > .bx.w4 { grid-column: span 4; }
  .bxs > .bx.w6 { grid-column: span 6; }
  .bxs > .bx.w12 { grid-column: 1 / -1; }
  .bxs { align-items: start; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) { .bxs > .bx.w3 { grid-column: span 6; } }
/* a tablet shows box scores two by two (one card would run 770 px wide with its middle empty) */
@media (min-width: 700px) and (max-width: 1023.98px) {
  .bxs { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* ---------- a box score's undercard: "N fights" on the method line, the results under it ---------- */
.bx.has-uc { grid-template-areas: "k k" "n r" "w m" "u u"; }
.bx.has-uc .bx-w { align-self: baseline; }
/* the control sits on the method line's baseline; its 44 px target reaches above and below the line */
.bx .more { grid-area: m; position: relative; z-index: 2; align-self: baseline; display: flex; align-items: baseline; justify-content: flex-end; gap: 6px;
  margin: -6px -8px -16px 0; padding: 16px 8px 16px 12px; font: 650 13px/1 var(--f-t); color: var(--t2); white-space: nowrap;
  list-style: none; cursor: pointer; transition: color 160ms var(--ease); }
.bx .uc { grid-area: u; position: relative; z-index: 2; cursor: auto; }
.bx .uc-in { margin-top: 12px; padding: 0; }
.bx .uc-sub { padding: 12px 0 4px; }
.bx .uc-g + .uc-g .uc-sub { padding-top: 16px; }
@media (hover: hover) and (pointer: fine) { .bx .more:hover { color: var(--t1); } }
.bx .more .ic { align-self: center; }
@media (min-width: 1024px) { .bx .more { margin-right: 0; padding-right: 0; } }
.bt.rb { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rb .bn { min-width: 0; color: var(--t2); }
.rb .bw { color: var(--t1); font-weight: 600; }
.rb .bls, .rb .bp { color: var(--t2); }
.rb .bd { color: var(--t1); }
.rb .br { flex: none; font-size: 12px; color: var(--t2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rb .br b { margin-right: 5px; font: 800 14px/1 var(--f-d); letter-spacing: .02em; color: var(--t1); }
.rb .br.q { color: var(--t3); }
.rb .br b:last-child { margin-right: 0; }

/* ---------- no result on record: one quiet line under its group, opening in place into pending rows ---------- */
.nr { margin-top: 20px; }
.nr-s { display: flex; align-items: center; gap: 8px; min-height: 44px; font: 500 14px/1.3 var(--f-t); color: var(--t2); list-style: none; cursor: pointer;
  box-shadow: inset 0 1px 0 var(--line); transition: color 160ms var(--ease); }
.nr-s::-webkit-details-marker { display: none; }
.nr-s .ic { width: 14px; height: 14px; transition: transform 240ms var(--ease); }
.nr[open] > .nr-s .ic { transform: rotate(180deg); }
.nr-s:focus-visible { outline-offset: -2px; border-radius: var(--r); }
@media (hover: hover) and (pointer: fine) { .nr-s:hover { color: var(--t1); } }
@media (prefers-reduced-motion: no-preference) { .nr[open] .pl-row { animation: settle 200ms var(--ease) both; } }
.pend-w + .nr { margin-top: 24px; }
@media (min-width: 1024px) { .bxs + .nr { margin-top: 18px; } }
.rt > .bxs:first-of-type { margin-top: 14px; }
#results, #sched { scroll-margin-top: 8px; }

/* ---------- the hero's pointer row on a phone: a fighter's name is never cut; "Featured above" goes under it ---------- */
@media (max-width: 1023.98px) {
  .ev.ptr { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "t n" "t go"; row-gap: 0; padding: 10px 0 0 16px; }
  .ev.ptr .ptr-n { white-space: normal; overflow: visible; text-overflow: clip; }
  .ev.ptr .ptr-go { justify-self: start; min-height: 44px; margin: -6px 0 -2px; padding: 0 16px 0 0; }
}

/* ---------- the consent bar (#fs-consent): on the grid ---------- */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.consent-g { width: min(var(--maxw), 100% - 2 * var(--gut)); margin-inline: auto; }
.consent-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 16px 16px 20px;
  background: var(--s2); border-radius: var(--r2); box-shadow: inset 0 0 0 1px var(--line2), 0 18px 48px rgba(0, 0, 0, .55); }
.consent-t { flex: 1 1 300px; font-size: 14px; line-height: 1.45; color: var(--t2); }
.consent-t a { color: var(--t1); text-decoration: underline; text-decoration-color: var(--t3); text-underline-offset: 3px; padding: 12px 0; margin: -12px 0; }
.consent-b { display: flex; gap: 10px; flex: 1 1 auto; justify-content: flex-end; }
.consent-b .btn { flex: 1 1 0; height: 44px; }
@media (min-width: 700px) { .consent-b { flex: 0 0 auto; } .consent-b .btn { flex: none; } }
@media (min-width: 1024px) {
  .consent-g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); }
  .consent-in { grid-column: 4 / 10; }
}
@media (prefers-reduced-motion: no-preference) { .consent:not([hidden]) .consent-in { animation: lift 260ms var(--ease) both; } }

/* ---------- "nothing here": the empty sport page and the 404 share one composition ----------
   both labels on the home's label line (the message's over columns 1-5, the card's over 7-12); the message (the
   heading in the display face, two short paragraphs, at most one action) on columns 1-5 with its last line on the
   card's bottom line; the next big fight as the home's poster card on columns 7-12.
   Phone: the label, the message, then the card as the home's stacked poster (with its own label). */
.mc-k { padding: 14px var(--gut) 0; font: 650 14px/1.35 var(--f-t); color: var(--t1); }
.mc-k .sep { color: var(--t3); }
.mc-msg { padding: 0 var(--gut); }
.mc-h { margin-top: 10px; font: 900 68px/.86 var(--f-d); text-transform: uppercase; letter-spacing: -.004em; color: var(--t1); text-wrap: balance; }
.em .mc-h { font-size: 52px; }
.mc-h:focus { outline: 0; }
.mc-p { margin-top: 14px; max-width: 46ch; font-size: 16px; line-height: 1.55; color: var(--t2); }
.mc-p + .mc-p { margin-top: 10px; }
.mc-acts { margin-top: 20px; }
.mc-acts .btn { width: 100%; }
.mc-acts .ic.cal { width: 18px; height: 18px; color: var(--t2); }
.nf-path { font-weight: 650; color: var(--t1); overflow-wrap: anywhere; }
.mc-lb { display: none; }
.mc .hero.c1 { margin-top: 32px; }
@media (min-width: 700px) {
  .mc-acts .btn { width: auto; }
  .mc-h { font-size: 88px; }
  .em .mc-h { font-size: 64px; }
}
@media (min-width: 700px) and (max-width: 1023.98px) { .mc .hero.c1 { margin-top: 56px; } }
@media (min-width: 1024px) {
  .mc { width: min(var(--maxw), 100% - 2 * var(--gut)); margin-inline: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--cg); grid-template-rows: auto auto; }
  .mc-k, .mc-lb { grid-row: 1; padding: 20px 0 14px; font: 650 14px/1.35 var(--f-t); color: var(--t1); }
  .mc-k { grid-column: 1 / 6; }
  .mc-lb { display: block; grid-column: 7 / 13; }
  .mc-msg { grid-column: 1 / 6; grid-row: 2; align-self: stretch; display: flex; flex-direction: column; padding: 0 0 26px; }
  .mc-msg > .mc-h + .mc-p { margin-top: auto; padding-top: 28px; }
  .mc-h { margin-top: -.035em; font-size: clamp(88px, 8.4vw, 128px); }
  .em .mc-h { font-size: clamp(76px, 6.6vw, 100px); }
  .mc-p { margin-top: 24px; font-size: 17px; }
  .mc-p + .mc-p { margin-top: 12px; }
  .mc-acts { margin-top: 30px; }
  .mc .hero.c1 { grid-column: 7 / 13; grid-row: 2; margin: 0; }
  .mc.solo-msg .mc-msg { grid-column: 1 / 8; display: block; }
  .mc.solo-msg .mc-msg > .mc-h + .mc-p { margin-top: 24px; padding-top: 0; }
  .big-section.none + .mc .mc-k, .big-section.none + .mc .mc-lb { padding-top: 0; }
}
/* the skip link: a full 44 px target when it shows */
.skip { display: inline-flex; align-items: center; min-height: 44px; }


/* =========================================================
   PHONE (< 700): THE TWO POSTER CARDS AS A STORY-STYLE CAROUSEL (owner, 2026-10-14; site.js step 8 adds .car-w,
   .car and the controls; without JavaScript both cards stay stacked). Both cards take card 1's full-bleed anatomy;
   two bars over the photos fill as the timer runs; a round arrow at the photos' edge goes to the other fight.
   ========================================================= */
.car-bars, .car-go { display: none; }
@media (max-width: 699.98px) {
  .car-w { position: relative; }
  .duo.car { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; align-items: flex-start; }
  .duo.car::-webkit-scrollbar { display: none; }
  .duo.car > .hero { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
  /* card 2 = card 1 (undo its smaller boxed variant) */
  .duo.car > .hero.c2 { --Mt: clamp(28px, min(10vw, 4.8svh), 44px); --tsz: clamp(48px, 7svh, 58px); --surf: var(--bg); --cbg: var(--bg);
    margin: 0; border-radius: 0; overflow: visible; background: none; }
  .duo.car > .hero.c2 .stage { height: calc(4.5 * var(--Mt) + 30px); }
  .duo.car > .hero.c2 .stage::after { background: linear-gradient(to bottom, transparent 0, transparent 48%, rgba(11,11,12,.22) 58%, rgba(11,11,12,.55) 70%, rgba(11,11,12,.84) 82%, rgba(11,11,12,.96) 91%, var(--bg) 100%); }
  .duo.car > .hero.c2 .hero-in { padding-bottom: 0; }
  .duo.car > .hero.c2 .lockup { --max: min(104px, 10svh); display: grid; grid-template-columns: none; justify-content: normal;
    font-size: min(var(--max), calc(100cqi / var(--em-stack, 4) / 1.03)); line-height: .86; padding-top: 0; }
  .duo.car > .hero.c2 .lockup .n1 { grid-column: auto; justify-self: start; margin: 0 0 0 calc(var(--lsb, 0) * -1em); }
  .duo.car > .hero.c2 .lockup .vs { grid-column: auto; justify-self: center; margin: .07em 0 .11em; font-size: clamp(14px, .22em, 19px); }
  .duo.car > .hero.c2 .lockup .n2 { grid-column: auto; justify-self: end; text-align: right; margin: 0 calc(var(--rsb, 0) * -1em) 0 0; }
  .duo.car > .hero.c2 .lockup .hy > .ln { display: block; }
  .duo.car > .hero.c2 .info { margin-top: 18px; }
  .duo.car > .hero.c2 .ld-date { margin-top: 10px; }
  .duo.car > .hero.c2 .acts .rc-watch, .duo.car > .hero.c2 .acts .fc.pri { height: 52px; margin-top: 18px; }
  .duo.car > .hero.c2 .fc::after { top: calc(-3.95 * var(--Mt) - 30px); }
  /* the bars: two thin segments across the top of the photos */
  .car-on .car-bars { position: absolute; z-index: 8; top: 0; left: 0; right: 0; display: flex; gap: 6px; padding: 10px var(--gut) 0; pointer-events: none; }
  .car-seg { position: relative; flex: 1; height: 22px; margin: -10px 0 0; padding: 10px 0 9px; pointer-events: auto; cursor: pointer; }
  .car-seg::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 3px; border-radius: 2px; background: rgba(243, 242, 238, .28); }
  .car-seg i { position: absolute; left: 0; right: 0; top: 10px; height: 3px; border-radius: 2px; background: var(--t1); transform: scaleX(0); transform-origin: left center; }
  .car-seg.done i, .manual .car-seg.on i { transform: scaleX(1) !important; transition: none !important; }
  .car-seg:focus-visible { outline-offset: -4px; }
  /* the arrow: a round button on the photos' edge, pointing to the other fight */
  .car-on .car-go { position: absolute; z-index: 8; top: calc(var(--stage-h, 220px) / 2 - 22px); right: max(10px, env(safe-area-inset-right, 0px)); display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 50%; color: var(--t1); background: rgba(11, 11, 12, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform 160ms var(--ease); }
  .car-go svg { width: 20px; height: 20px; transition: transform 200ms var(--ease); }
  .car-go.back { right: auto; left: max(10px, env(safe-area-inset-left, 0px)); }
  .car-go.back svg { transform: rotate(180deg); }
  .car-go:active { transform: scale(.94); }
}
@media (max-width: 699.98px) and (prefers-reduced-motion: reduce) {
  .car-seg.on i { transform: scaleX(1) !important; transition: none !important; }
}

/* ---------- owner, 2026-10-14: no "UFC & boxing schedule" line under the nav ----------
   The h1 stays in the page for search engines and screen readers, visually hidden; the card labels lose their dash. */
.duo-h1, .eyebrow .eb-h { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.duo-lb .dash, .eyebrow .eb-l .dash { display: none; }
@media (max-width: 1023.98px) { .duo-top { padding: 0; } }