/* fightschedule.live — the FIGHT PAGE (/event/<slug>, /boxing-event/<slug>): page CSS only, on top of site.css
   (tokens, fonts, header, footer, buttons, the split-poster engine .stage/.ph, the phone stacked poster, faces, box
   scores, Result pending rows, section heads, motion). Ported from the approved mock (landing/pages/fight/fight.css,
   2026-10-14); markup: templates/_fight.html, view: site_pages.fight_view(). Nothing here re-defines a token or a shared
   component's look.

   >= 1024, the page's 12 columns: the poster card (1-8, the home page's single-fight card) | WHEN + WHERE TO WATCH
   (9-12; its content pins at 24 px while the main column scrolls) / the main column (1-8): tape, fight card, AI
   summary / the end line (crumbs, photo credit). A past fight: the poster | label, date, result at the card's top
   edge and the compact tale of the tape down to its bottom edge / the results across the page.
   700-1023: the home page's tablet anatomy, an inset card on the gutter, then the when block on two columns.
   < 700: the home page's stacked poster, then one column in the same order. */

/* ---------- the h1: the label stays in it for search and screen readers; it is shown beside the poster ---------- */
.hh .kick { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.hh .big { display: contents; }
.lockup .lost { color: var(--t3); }
/* the winner's W (the box score's tag), sized with the name, on its cap line; generated content with empty alt text,
   so it is neither in the h1's text nor read out (the column beside the poster says who won) */
.lockup .won::after { content: "W"; content: "W" / ""; display: inline-grid; place-items: center; vertical-align: top; position: relative; top: .15em;
  min-width: 1.15em; height: 1.15em; margin-left: .3em; padding: .08em .2em 0; border-radius: 4px; background: var(--win); color: #04130A;
  font: 800 max(13px, .2em)/1 var(--f-d); letter-spacing: .02em; }
/* the loser's half of the poster dimmed, as production's hero does it today (img.lost: brightness .55) */
.ph.lost { opacity: .55; }

/* ---------- every head inside its poster: the crown (--cy, per photo) at least --hr below the top edge ----------
   A photo that covers its half keeps covering (its top never comes below the half's top); the face moves down from
   its target height just enough. A cut-out (no surroundings) simply moves down. */
.fh { --hr: 12px; }
.fh .ph:not(.vacant) { --T: clamp(min(0px, 100cqh - var(--Hi)), max(var(--Tt), var(--hr) - var(--cy, 0) * var(--Hi)), var(--sh) * max(0px, 100cqh - var(--Hi))); }
.fh .ph.cut { --T: max(var(--Tt), var(--hr) - var(--cy, 0) * var(--Hi)); }
/* a file too short for the poster (sh; site.css): the gap under it is taller here than on the home card, so its lower
   edge falls off over up to 96 px into its own stretched bottom rows, not in a 36 px band */
.fh .ph.sh:not(.vacant) { --Fb: clamp(0px, (100cqh - var(--T) - var(--Hi)) * 8, 96px); }
/* a close-up sized by its face (build.py FACE_SIZED): no wider than covering the card's height, so its face is not
   blown up to cover the half's width (Prat: 89 px eye-to-mouth at 520, as on the approved home page, against 123 px
   in round 1); never shorter than the card (no floating patch with soft edges all round), flush with the card's outer
   edge (a tenth of its width cropped there, so his face stays clear of the inner fade), its inner edge falling off
   into the card in an eased fade, as a one-photo poster does (no blurred backfill: beside a light wall it read as a
   grey slab) */
.fh .ph.fs { --F: 112px; --Wi: min(var(--sw) * 1.25px, max(var(--fk, 1) * var(--Mtc, var(--Mt)) * var(--ar) / var(--em), 100cqh * var(--ar))); }
.fh .ph.l.fs { --L: calc(var(--Wi) * -.1); }
.fh .ph.r.fs { --L: calc(var(--HW) - var(--Wi) * .9); }
.fh .ph.l.fs img.pi {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--Fr)), rgba(0,0,0,.93) calc(100% - var(--Fr) * .86), rgba(0,0,0,.78) calc(100% - var(--Fr) * .72), rgba(0,0,0,.55) calc(100% - var(--Fr) * .57), rgba(0,0,0,.3) calc(100% - var(--Fr) * .42), rgba(0,0,0,.12) calc(100% - var(--Fr) * .28), rgba(0,0,0,.03) calc(100% - var(--Fr) * .14), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--Ft), #000 calc(100% - var(--Fb)), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--Fr)), rgba(0,0,0,.93) calc(100% - var(--Fr) * .86), rgba(0,0,0,.78) calc(100% - var(--Fr) * .72), rgba(0,0,0,.55) calc(100% - var(--Fr) * .57), rgba(0,0,0,.3) calc(100% - var(--Fr) * .42), rgba(0,0,0,.12) calc(100% - var(--Fr) * .28), rgba(0,0,0,.03) calc(100% - var(--Fr) * .14), 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; }
.fh .ph.r.fs img.pi {
  -webkit-mask-image: linear-gradient(to left, #000 0, #000 calc(100% - var(--Fl)), rgba(0,0,0,.93) calc(100% - var(--Fl) * .86), rgba(0,0,0,.78) calc(100% - var(--Fl) * .72), rgba(0,0,0,.55) calc(100% - var(--Fl) * .57), rgba(0,0,0,.3) calc(100% - var(--Fl) * .42), rgba(0,0,0,.12) calc(100% - var(--Fl) * .28), rgba(0,0,0,.03) calc(100% - var(--Fl) * .14), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--Ft), #000 calc(100% - var(--Fb)), transparent 100%);
  mask-image: linear-gradient(to left, #000 0, #000 calc(100% - var(--Fl)), rgba(0,0,0,.93) calc(100% - var(--Fl) * .86), rgba(0,0,0,.78) calc(100% - var(--Fl) * .72), rgba(0,0,0,.55) calc(100% - var(--Fl) * .57), rgba(0,0,0,.3) calc(100% - var(--Fl) * .42), rgba(0,0,0,.12) calc(100% - var(--Fl) * .28), rgba(0,0,0,.03) calc(100% - var(--Fl) * .14), 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; }
/* one photo on the poster (the other half empty: missing, TBA, failed): no blurred copy beside it. A photo that cannot
   cover its half (a curated edge, a 400 px file on a 478 px half: Shea) ends in its own straight fade into the card,
   as a one-photo poster does; the blurred copy of a light backdrop read as a grey slab there. A file too short for
   the card keeps its stretched top and bottom rows (.bt, .bb). */
.fh .stage:has(> .ph.vacant) > .ph img.bf:not(.bt):not(.bb) { display: none; }
/* a curated inner edge beside an empty half (Garcia: a bystander's fist beyond 54 %): the photo ends AT the curated
   edge in a short eased fade, so no straight line and no part of the hand shows */
.fh .stage:has(> .ph.r.vacant) > .ph.l.cr { --Bc: 72px;
  -webkit-mask-image: linear-gradient(to left, transparent 0, transparent var(--cut, 0px), rgba(0,0,0,.03) calc(var(--cut, 0px) + var(--Bc) * .14), rgba(0,0,0,.12) calc(var(--cut, 0px) + var(--Bc) * .28), rgba(0,0,0,.3) calc(var(--cut, 0px) + var(--Bc) * .42), rgba(0,0,0,.55) calc(var(--cut, 0px) + var(--Bc) * .57), rgba(0,0,0,.78) calc(var(--cut, 0px) + var(--Bc) * .72), rgba(0,0,0,.93) calc(var(--cut, 0px) + var(--Bc) * .86), #000 calc(var(--cut, 0px) + var(--Bc)));
  mask-image: linear-gradient(to left, transparent 0, transparent var(--cut, 0px), rgba(0,0,0,.03) calc(var(--cut, 0px) + var(--Bc) * .14), rgba(0,0,0,.12) calc(var(--cut, 0px) + var(--Bc) * .28), rgba(0,0,0,.3) calc(var(--cut, 0px) + var(--Bc) * .42), rgba(0,0,0,.55) calc(var(--cut, 0px) + var(--Bc) * .57), rgba(0,0,0,.78) calc(var(--cut, 0px) + var(--Bc) * .72), rgba(0,0,0,.93) calc(var(--cut, 0px) + var(--Bc) * .86), #000 calc(var(--cut, 0px) + var(--Bc))); }

/* ---------- when + where to watch: shared pieces ---------- */
.when .ld-what, .when .ld-date { display: block; }
.when .ld-date b::after { content: "\00A0·\00A0"; font-weight: 400; color: var(--t2); }
.when .ld-time .code { display: block; font: 800 var(--tsz, 64px)/.8 var(--f-d); letter-spacing: .005em; }
.when .ld-time .code.pend { font-size: calc(var(--tsz, 64px) * .5); line-height: .9; text-transform: uppercase; }
.when .res-n { white-space: normal; line-height: 1.4; }
.when .res-n b { font-weight: 650; color: var(--t1); }
.when .ld-note.solo-n { white-space: normal; line-height: 1.4; }
/* the column's date and note times keep the times' tabular digits, as the approved fight page has them (site.css
   gives the home poster's the surrounding text's) */
.when .ld-date b > time.fdate, .when .ld-note time { font-variant-numeric: tabular-nums; }
.when .tz-copy { margin-top: 6px; }
.watch-panel h2 { font: 600 13px/1.3 var(--f-t); color: var(--t2); margin: 0 0 10px; }
.watch-panel .rows { display: grid; gap: 8px; }
.wrow { justify-content: space-between; gap: 12px; height: auto; min-height: 52px; padding: 8px 16px 8px 18px; text-align: left; white-space: normal; }
.wrow .wtext { display: grid; gap: 1px; min-width: 0; }
.wrow .wtext b { font: 650 15px/1.25 var(--f-t); }
.wrow .wtext small { font: 500 13px/1.3 var(--f-t); color: #4E4D48; }
.wrow.sec .wtext small { color: var(--t2); }
.aff-note { margin-top: 10px; font: 500 13px/1.4 var(--f-t); color: var(--t2); }
.aff-note a, .src-line a, .photo-credit a { text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; }
.watch-panel.none .bc { min-height: 0; font: 500 15px/1.4 var(--f-t); color: var(--t2); white-space: normal; }
.cal-links { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; margin-top: 14px; }
.cal-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 14px var(--f-t); color: var(--t1); }
.cal-links .ic { width: 16px; height: 16px; color: var(--t2); }
.cal-links .btn { height: 44px; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (hover: hover) and (pointer: fine) {
  .cal-links a:hover, .aff-note a:hover, .src-line a:hover, .photo-credit a:hover, .crumbs a:hover { color: var(--t1); text-decoration: underline; text-decoration-color: var(--t2); text-underline-offset: 3px; }
  .wrow.pri:hover { background: #FFFFFF; }
}

/* ---------- the main column's sections ---------- */
.fp-main .sec-h h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.ai-tag { font: 600 12px/1.2 var(--f-t); letter-spacing: .05em; text-transform: uppercase; color: var(--t2); }

/* tale of the tape: one table, the labels in the centre column, each fighter's numbers on his own side. Names in
   the page's one name style: the first name in grey condensed caps before the white surname (card rows, box scores) */
.tt-tape { width: 100%; margin-top: 14px; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.tt-tape col.ca, .tt-tape col.cb { width: 38%; }
.tt-tape col.cl { width: 24%; }
.tt-tape .ta { text-align: right; }
.tt-tape .tb { text-align: left; }
.tt-tape .tl { text-align: center; }
.tt-tape thead th, .tt-tape thead td { padding: 4px 0 12px; vertical-align: bottom; font-weight: inherit; }
.tt-tape .tn { display: block; font: 800 20px/1.05 var(--f-d); text-transform: uppercase; letter-spacing: .004em; color: var(--t1); overflow-wrap: anywhere; }
.tt-tape .tn .fn { color: var(--t2); }
.tt-tape tbody td, .tt-tape tbody th { padding: 11px 0; border-top: 1px solid var(--line); vertical-align: baseline; }
.tt-tape tbody td { font: 500 15px/1.35 var(--f-t); color: var(--t1); }
.tt-tape tbody th { padding-inline: 6px; font: 600 11px/1.3 var(--f-t); letter-spacing: .05em; text-transform: uppercase; color: var(--t2); }
.src-line { margin-top: 12px; font: 500 13px/1.45 var(--f-t); color: var(--t2); }
.src-line a { white-space: nowrap; }

/* the fight card: groups (Main card 21:00 / Prelims 19:00), each bout the table row anatomy */
.fc-sub { display: flex; align-items: center; gap: 14px; margin: 24px 0 0; font: 650 12px/1.2 var(--f-t); letter-spacing: .09em; text-transform: uppercase; color: var(--t2); }
.fc-sub::after { content: ""; flex: 1; height: 1px; background: var(--line2); }
.fc-sub .tm { padding-left: 9px; letter-spacing: 0; }
.fc-sub .tm::before { top: .02em; bottom: .02em; }
.fc-sub time { font: 650 14px/1.2 var(--f-t); color: var(--t1); letter-spacing: 0; text-transform: none; }
.fc-g:first-of-type .fc-sub { margin-top: 14px; }
.fc-list { margin-top: 6px; }
.fc-note { margin-top: 10px; font: 500 15px/1.4 var(--f-t); color: var(--t2); }
.bout:not(.bx):not(.ptr):not(.pl-row) { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n rt" "k k"; column-gap: 12px; align-items: center;
  padding: 12px 0; box-shadow: inset 0 1px 0 var(--line); }
.fc-list > .bout:first-child { box-shadow: none; }
.bout .pair { display: none; }
.bout .bn { grid-area: n; display: grid; gap: 6px; min-width: 0; container-type: inline-size; }
.bout .bn .f { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; align-items: center; min-width: 0; }
.bout .bn .vs { display: block; margin: -3px 0 -3px 44px; font: 600 11px/1 var(--f-t); font-style: normal; letter-spacing: .02em; color: var(--t3); }
.bout .sn { display: block; min-width: 0; font: 800 22px/1.02 var(--f-d); text-transform: uppercase; letter-spacing: .004em; padding: .06em 0 .02em; }
.bout .bn .sn { font-size: max(17px, min(22px, calc((100cqi - 44px) / var(--em-s) / 1.03))); }
.bout .sn .fn, .bx .sn .fn, .pl-n .sn .fn { color: var(--t2); }
.bout .sn.tba { color: var(--t3); }
.bout .bk { grid-area: k; margin: 6px 0 0 44px; }
.bout .bk .kick { display: inline; }
.bout .rt { grid-area: rt; align-self: start; padding-top: 4px; font: 500 13px/1.3 var(--f-t); color: var(--t2); white-space: nowrap; }
/* the main event's slot: the home page's one-line pointer (the poster and the column above carry the fight) */
.bout.ptr { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 2px 0; box-shadow: inset 0 1px 0 var(--line); }
.bout.ptr .ptr-n { min-width: 0; }
.bout.ptr .ptr-go { padding: 0; }
.fc-list.ptrs { margin-top: 4px; }
.fc-list.ptrs > .bout.ptr { box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .bout.ptr .ptr-go:hover { color: var(--t1); } }
/* results: the home page's box scores; a bout is not a page of its own, so no hover wash and no link */
.fcard .bx { align-content: start; }
.fcard .bx-k { margin-bottom: 10px; }
.fcard .bx-k .kick { overflow: visible; }
.fcard .bx:hover { background: var(--s1); }
.fcard .bx-main::after { content: none; }
.fcard .bxs { margin-top: 8px; }
/* undecided bouts: the home page's Result pending rows (no date column: one night), the weight on the right */
.fcard .pend-w { margin-top: 18px; }
.fcard .pend-h { font-size: 12px; }
.fcard .pend-list { margin-top: 0; }
.fcard .pl-row { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "p n" "p k"; }
.fcard .pl-row .pair { display: flex; }
.fcard .pend-list > .pl-row:first-child { box-shadow: inset 0 1px 0 var(--line); }
.fcard .pl-n { font: 800 18px/1.1 var(--f-d); text-transform: uppercase; }
.fcard .pl-n .sn { display: inline; font: inherit; padding: 0; }
.fcard .pl-n::after { content: none; }

/* AI summary */
.pv .panel { margin-top: 14px; }
.pv .ctx { font: 500 19px/1.45 var(--f-t); color: var(--t1); max-width: 44ch; text-wrap: pretty; }
.pv .edges { display: grid; gap: 22px; margin-top: 22px; }
.pv h3 { margin: 0 0 6px; font: 650 15px/1.3 var(--f-t); color: var(--t1); }
.pv ul li { padding: 9px 0; box-shadow: inset 0 1px 0 var(--line); font: 400 15px/1.45 var(--f-t); color: var(--t1); }
.pv .wtw { margin-top: 26px; }
.pv .wtw p { max-width: 66ch; font: 400 15px/1.6 var(--f-t); color: var(--t1); text-wrap: pretty; }
.pv .src-line { margin-top: 16px; }

/* the end of the page: where it sits (crumbs), who took the photos */
.fp-end { display: grid; gap: 6px; margin-top: 44px; padding-top: 14px; font: 500 13px/1.45 var(--f-t); color: var(--t2); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--t2); }
.crumbs [aria-current] { color: var(--t1); }
.crumbs .cs { color: var(--t3); }
.photo-credit { color: var(--t2); }
.fight + .page-foot, main + .page-foot { margin-top: 56px; }

/* =========================================================
   PHONE + TABLET (< 1024): one column: the poster, then the time block, Watch, calendar, and the sections.
   ========================================================= */
@media (max-width: 1023.98px) {
  .fp { padding-bottom: 8px; }
  .fp-main .sec-h, .fp > .tape .sec-h { margin-top: 44px; }
  .tt-tape .tn { font-size: 18px; }
  .tt-tape col.ca, .tt-tape col.cb { width: 35%; }
  .tt-tape col.cl { width: 30%; }
  .pv .ctx { font-size: 17px; }
  .bout.ptr .ptr-n { font-size: 15px; }
}
/* phone (< 700): the home page's stacked poster (hybrid.css .hero:not(.card)), full bleed; the when block in one
   column: time, note, date, label and place, Watch */
@media (max-width: 699.98px) {
  .fh { display: flex; flex-direction: column; margin-inline: calc(-1 * var(--gut)); }
  .fh .stage { order: -1; }
  .fh .fh-in { position: relative; z-index: 5; margin-top: calc(-.55 * var(--Mt)); padding-inline: var(--gut); container-type: inline-size; }
  .when { margin-top: 18px; }
  .when-in { display: flex; flex-direction: column; }
  .when .wh-res { order: 1; }
  .when .wh-when { order: 2; display: flex; flex-direction: column; }
  .when .ld-what { order: 3; margin-top: 2px; font: 500 15px/1.35 var(--f-t); color: var(--t2); }
  .when .ld-what b { font-weight: 500; color: var(--t2); }
  .when .ld-what b::after { content: "\00A0·\00A0"; }
  .when .tz-copy { order: 4; }
  .when .wh-go { order: 5; }
  .when.past .ld-date { margin-top: 12px; }
  .when .ld-time { order: 1; --tsz: clamp(48px, 7svh, 58px); }
  .when .ld-note { order: 2; margin-top: 8px; }
  .when .res-n { order: 2; }
  .when .ld-date { order: 3; margin-top: 10px; font: 500 15px/1.35 var(--f-t); color: var(--t2); }
  .when .ld-date b { font-weight: 650; color: var(--t1); }
  .watch-panel { margin-top: 20px; }
  .wrow { min-height: 52px; }
}

/* =========================================================
   >= 700: the poster is a card (the home page's tablet card and desktop single-fight card): rounded, on the grid,
   a fixed height, the photos from its top edge with headroom, the names on its lower edge over the one gradient.
   ========================================================= */
@media (min-width: 700px) {
  .fp .fh.hero { position: relative; display: block; height: var(--Hc); margin: 0; border-radius: var(--r2); overflow: hidden;
    background: var(--cbg); --surf: var(--cbg); --B: 56px; --F: 96px; --fyt: .34; }
  .fp .fh .stage { position: absolute; inset: 0; z-index: 0; height: auto; background: none; --Mt: calc(100cqh * var(--mtk)); --Mtc: calc(100cqh * .11); }
  .fp .fh .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); }
  .fp .fh .fh-in { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; margin: 0; padding: 0; pointer-events: none;
    --IW: calc(100cqw - 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), 50cqw, 100cqw - var(--cpad) - var(--w2) - var(--gv)); }
  .fp .fh .lockup { display: grid; grid-template-columns: calc(var(--xs) - var(--gv) - var(--cpad)) calc(2 * var(--gv)) minmax(0, 1fr); align-items: center; justify-content: stretch;
    margin: 0; padding: .06em var(--cpad) var(--cpb); font-size: var(--s); line-height: .8; }
  .fp .fh .lockup .n1 { grid-column: 1; justify-self: end; margin: 0 calc(var(--rsb, 0) * -1em) 0 0; }
  .fp .fh .lockup .vs { grid-column: 2; justify-self: center; font-size: .26em; line-height: 1; margin: .05em 0 0; letter-spacing: .01em; }
  .fp .fh .lockup .n2 { grid-column: 3; justify-self: start; text-align: left; margin: 0 0 0 calc(var(--lsb, 0) * -1em); }
  .fp .fh .lockup .tba { align-self: center; }
  .fp .fh .lockup .hy > .ln { display: inline; }
  /* no photos at all: the names stacked and large carry the card (the home page's .card.n0), first name from the
     top-left, second to the bottom-right */
  .fp .fh.n0 .fh-in { --s: min(150px, var(--IW) / var(--est) / 1.03, (var(--Hc) - var(--cpad) - var(--cpb)) / (var(--nl) * .86 + .3)); }
  .fp .fh.n0 .lockup { grid-template-columns: minmax(0, 1fr); line-height: .86; }
  .fp .fh.n0 .lockup .n1 { grid-column: 1; justify-self: start; margin: 0 0 0 calc(var(--lsb, 0) * -1em); }
  .fp .fh.n0 .lockup .vs { grid-column: 1; justify-self: center; font-size: .22em; margin: .07em 0 .11em; }
  .fp .fh.n0 .lockup .n2 { grid-column: 1; justify-self: end; text-align: right; margin: 0 calc(var(--rsb, 0) * -1em) 0 0; }
  .fp .fh.n0 .lockup .hy > .ln { display: block; line-height: 1.02; }
}

/* =========================================================
   TABLET (700-1023): the inset card on the gutter (the home page's tablet card height and type), then the when
   block on two columns: label, date, the time and its note on the left; Watch and the calendar on the right.
   ========================================================= */
@media (min-width: 700px) and (max-width: 1023.98px) {
  .fp { padding-top: 20px; --Hc: clamp(400px, 52vw, 460px); --cpad: 24px; --cpb: 24px; --cap1: 96px; --mtk: .09; --tsz: 54px; --cbg: #141415; }
  .when { margin-top: 24px; }
  .when-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--cg); align-items: start; }
  .when .ld-what { grid-column: 1; grid-row: 1; margin: 0; font: 500 15px/1.4 var(--f-t); color: var(--t2); }
  .when .ld-what b { display: block; font-weight: 650; color: var(--t1); }
  .when .wh-when { grid-column: 1; grid-row: 2; margin-top: 14px; }
  .when .ld-date { margin: 0; font: 500 15px/1.35 var(--f-t); color: var(--t2); }
  .when .ld-date b { font-weight: 650; color: var(--t1); }
  .when .ld-time { margin-top: 12px; }
  .when .ld-note { margin-top: 8px; }
  .when .tz-copy { grid-column: 1; grid-row: 3; margin-top: 10px; }
  .when .wh-go { grid-column: 2; grid-row: 1 / span 3; }
  .watch-panel { margin-top: 0; }
  /* past: the result on the left (where the time is), the label and date on the right */
  .when.past .wh-res { grid-column: 1; grid-row: 1 / span 2; }
  .when.past .ld-what { grid-column: 2; grid-row: 1; }
  .when.past .wh-when { grid-column: 2; grid-row: 2; margin-top: 10px; }
  .when.past .ld-time { margin-top: 0; }
  .when.past .res-n { margin-top: 10px; }
  /* the card rows on one line, as on the desktop (the pair of faces opens the row) */
  .bout:not(.bx):not(.ptr):not(.pl-row) { grid-template-columns: 80px minmax(0, 1fr) auto; grid-template-areas: "p n rt" "p k rt"; column-gap: 0; min-height: 64px; }
  .bout:not(.bx):not(.ptr):not(.pl-row) .pair { grid-area: p; display: flex; align-self: center; }
  .bout:not(.bx) .bn { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; container-type: normal; }
  .bout:not(.bx) .bn .f { display: contents; }
  .bout:not(.bx) .bn .face { display: none; }
  .bout:not(.bx) .bn .vs { display: inline; margin: 0; padding: 0 .6em 0 .55em; font-size: 12px; }
  .bout:not(.bx) .bn .sn { font-size: 21px; white-space: nowrap; }
  .bout:not(.bx) .bk { margin: 3px 0 0; }
  .bout:not(.bx) .rt { align-self: center; padding: 0 0 0 12px; }
  .bout.ptr .ptr-n { padding-left: 80px; }
  /* box scores two to a row */
  .fcard .bxs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv .edges { grid-template-columns: 1fr 1fr; column-gap: var(--cg); }
}

/* =========================================================
   DESKTOP (>= 1024): the page grid
   ========================================================= */
@media (min-width: 1024px) {
  .fp { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); align-items: start; padding-top: 24px;
    --Hc: clamp(420px, 100vh - 236px, 520px); --cpad: 28px; --cpb: 26px; --cap1: 112px; --mtk: .092; --tsz: 64px; --cbg: #141415; }
  /* the poster card: the home page's single-fight card (hybrid.css .solo), on columns 1-8 */
  .fp .fh.hero { grid-column: 1 / 9; grid-row: 1; }

  /* columns 9-12, upcoming: one stack, bottom-aligned on the card (the home page's single-fight column): the label
     and place, the date, the big time, the note, Watch, calendar; the last line on the names' line. The column runs
     down beside the main column, and only the stack pins (top 24 px) while the page scrolls. */
  .when { grid-column: 9 / 13; grid-row: 1 / span 2; align-self: stretch; display: grid; grid-template-rows: minmax(var(--Hc), auto) 1fr; min-width: 0; }
  .fp.nomain .when { grid-row: 1; }
  .when-in { grid-row: 1; align-self: end; position: sticky; top: 24px; display: flex; flex-direction: column; padding-bottom: calc(var(--cpb) - 2px); }
  .when .ld-what { margin: 0; font: 500 15px/1.4 var(--f-t); color: var(--t2); }
  .when .wh-when { margin-top: 16px; }
  .when .wh-go { padding-top: 26px; }
  .when .ld-what b { display: block; font-weight: 650; color: var(--t1); }
  .when .ld-date { margin: 0; font: 500 15px/1.35 var(--f-t); color: var(--t2); }
  .when .ld-date b { font-weight: 650; color: var(--t1); }
  .when .ld-time { margin-top: 12px; }
  .when .ld-note { margin-top: 10px; }
  .when .tz-copy { display: none; }

  /* the main column: a subgrid of columns 1-8, so the tape's centre and the AI summary's two sides sit on the
     poster's seam and halves */
  .fp-main { grid-column: 1 / 9; grid-row: 2; display: grid; grid-template-columns: subgrid; align-content: start; }
  .fp-main > .sec { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-content: start; }
  .fp-main > .sec > * { grid-column: 1 / -1; }
  .fp-main > .sec:first-child .sec-h { margin-top: 48px; }
  .fp-main .sec-h { margin-top: 64px; }
  /* the tape under the poster: left numbers end on column 3's right edge, right numbers start on column 6's left
     edge (symmetric about the poster's centre line), the labels in columns 4-5; the head row (the names) is for
     screen readers: the poster's names stand directly above each side */
  /* (a column width mixing % and px is ignored by Chromium's table layout: 3/8 + 2/8 + 3/8 of the width, and the
     5/8-gutter difference to the column lines as padding) */
  .fp-main .tt-tape col.ca, .fp-main .tt-tape col.cb { width: 37.5%; }
  .fp-main .tt-tape col.cl { width: 25%; }
  .fp-main .tt-tape .ta { padding-right: calc(var(--cg) * 5 / 8); }
  .fp-main .tt-tape .tb { padding-left: calc(var(--cg) * 5 / 8); }
  .fp-main .tape thead th, .fp-main .tape thead td { padding: 0; }
  .fp-main .tape thead .tn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fp-main .tape tbody tr:first-child > * { border-top: 0; }
  .fp-main .tape .tt-tape { margin-top: 8px; }
  .tt-tape tbody td { font-size: 17px; padding: 12px 0; }
  .tt-tape tbody th { font-size: 12px; }

  /* the fight card, upcoming: date-less table rows: the pair of faces (col 1), the names from col 1 + 80 px, the
     weight or title under them */
  .fc-g, .fc-list { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
  .fc-g > * { grid-column: 1 / -1; }
  .bout:not(.bx):not(.ptr):not(.pl-row) { grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-areas: none; grid-template-rows: auto auto; column-gap: var(--cg); min-height: 66px; padding: 12px 0; }
  .bout:not(.bx):not(.ptr):not(.pl-row) .pair { grid-column: 1; grid-row: 1 / span 2; align-self: center; display: flex; }
  .bout:not(.bx) .bn { grid-column: 1 / 7; grid-row: 1; align-self: end; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 0; padding-left: 80px; container-type: normal; }
  .bout:not(.bx) .bn .f { display: contents; }
  .bout:not(.bx) .bn .face { display: none; }
  .bout:not(.bx) .bn .vs { display: inline; margin: 0; padding: 0 .6em 0 .55em; font-size: 12px; }
  .bout:not(.bx) .bn .sn { font-size: 22px; white-space: nowrap; }
  .bout:not(.bx) .bk { grid-column: 1 / 7; grid-row: 2; margin: 3px 0 0; padding-left: 80px; }
  .bout:not(.bx):not(:has(.bk)) .bn { grid-row: 1 / span 2; align-self: center; }
  .bout:not(.bx) .rt { grid-column: 7 / 9; grid-row: 1 / span 2; align-self: center; justify-self: end; padding: 0; }
  /* the pointer: the names where the rows' names start, the link on the right edge */
  .bout.ptr { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; min-height: 48px; }
  .bout.ptr .ptr-n { grid-column: 1 / 7; padding-left: 80px; }
  .bout.ptr .ptr-go { grid-column: 7 / -1; justify-self: end; }

  /* a past fight: the poster on two rows; beside it, the label, date and result from the card's top edge, the
     compact tale of the tape down to its bottom edge; the results across the page (the home page's Latest results
     grid: box scores four to a row, then the Result pending rows two to a row) */
  .fp.past .fh.hero { grid-row: 1 / span 2; align-self: start; }
  .fp.past .when { grid-row: 1; align-self: start; display: block; }
  .fp.past .when-in { position: static; padding: 0; }
  .fp.past .when .wh-when { margin-top: 14px; }
  .fp.past .when .wh-res { margin-top: 20px; }
  .fp.past .when .ld-time { margin-top: 0; }
  .fp.past > .tape.side { grid-column: 9 / 13; grid-row: 2; align-self: end; display: block; padding: 24px 0 calc(var(--cpb) - 6px); }
  .fp.past.noside .fh.hero { grid-row: 1; }
  .fp.past .fp-main { grid-column: 1 / -1; grid-row: 3; }
  .fp.past .fp-main > .sec:first-child .sec-h { margin-top: 40px; }
  .fp.past .fp-main > .fcard { grid-column: 1 / -1; }
  .fp.past .fp-end { grid-row: 4; }
  .fp.past .fcard .bout.ptr .ptr-n { padding-left: 0; }

  /* the compact tape beside the poster (6-7 rows of ~32 px) */
  .tape.side .sec-h { margin: 0; }
  .tape.side .sec-h h2 { font: 600 13px/1.3 var(--f-t); color: var(--t2); letter-spacing: 0; }
  .tape.side .tt-tape { margin-top: 8px; }
  .tape.side col.ca, .tape.side col.cb { width: 36%; }
  .tape.side col.cl { width: 28%; }
  .tape.side thead th, .tape.side thead td { padding: 0 0 8px; }
  .tape.side .tn { font-size: 16px; line-height: 1.05; }
  .tape.side tbody td { font-size: 15px; padding: 6px 0; }
  .tape.side tbody th { font-size: 11px; padding: 6px 4px; }
  .tape.side .src-line { margin-top: 8px; font-size: 12px; }

  .fcard .bxs { margin-top: 10px; box-shadow: none; }
  .fcard .bx { padding: 16px 0 18px; }
  .fcard .bx::before { content: none; }
  .fcard .bx:hover { background: none; }
  .fcard .pend-w { margin-top: 22px; display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
  .fcard .pend-w > * { grid-column: 1 / -1; }
  .fcard .pl-row { grid-template-columns: 54px minmax(0, 1fr) auto; grid-template-areas: "p n k"; }
  .fcard .pend-list > .pl-row:nth-child(2) { box-shadow: inset 0 1px 0 var(--line); }
  .fcard .pl-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* AI summary: each fighter's edge under his half of the poster */
  .pv .panel { display: grid; grid-template-columns: subgrid; }
  .pv .panel > * { grid-column: 1 / -1; }
  .pv .edges { display: grid; grid-template-columns: subgrid; column-gap: var(--cg); }
  .pv .edge.a { grid-column: 1 / 5; }
  .pv .edge.b { grid-column: 5 / 9; }
  .pv .edge.b:only-child { grid-column: 1 / 5; }
  .pv .ctx { font-size: 20px; }

  /* the end line, across the page: crumbs on the left edge, the credit on the right edge */
  .fp-end { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 24px; margin-top: 64px; padding-top: 6px; }
  .fp-end .photo-credit { text-align: right; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .fp { --cpad: 24px; --tsz: 56px; }
}
@media (min-width: 1600px) and (min-height: 821px) { .fp { --tsz: 72px; } }
/* short laptop screens: a little less space in the column so it still matches the card */
@media (min-width: 1024px) and (max-height: 800px) {
  .fp { --tsz: 56px; }
  .when .wh-when { margin-top: 12px; }
  .when .wh-go { padding-top: 20px; }
  .wrow { min-height: 48px; padding-block: 6px; }
}
/* very short windows: the column scrolls with the page instead of pinning (it would not fit) */
@media (min-width: 1024px) and (max-height: 600px) { .when-in { position: static; } }

/* short or narrow desktops: the compact tape gives a little so the column still ends on the card's bottom edge */
@media (min-width: 1024px) and (max-width: 1279.98px), (min-width: 1024px) and (max-height: 800px) {
  .fp.past > .tape.side { padding-top: 14px; }
  .fp.past .when .wh-res { margin-top: 14px; }
  .tape.side tbody td { padding: 4px 0; font-size: 14px; }
  .tape.side tbody th { padding: 4px; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .tape.side col.ca, .tape.side col.cb { width: 34%; }
  .tape.side col.cl { width: 32%; }
  .tape.side tbody th { white-space: nowrap; letter-spacing: .03em; }
}

/* =========================================================
   THE FIGHT CARD WITHOUT FACES (owner, 2026-10-14: undercard fighters need no pictures; the main event has the
   poster). The rows, box scores and Result pending rows drop the face slots; names start on the column edge.
   ========================================================= */
.bout .bn .f { grid-template-columns: minmax(0, 1fr); }
.bout .bn .vs { margin-left: 0; }
.bout .bn .sn { font-size: max(17px, min(22px, calc(100cqi / var(--em-s) / 1.03))); }
.bout .bk { margin-left: 0; }
.fcard .pl-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "n" "k"; }
.fcard .bx .bx-n { gap: 6px; }
@media (min-width: 700px) {
  .bout:not(.bx):not(.ptr):not(.pl-row) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n rt" "k rt"; }
  .bout.ptr .ptr-n { padding-left: 0; }
}
@media (min-width: 1024px) {
  .bout:not(.bx):not(.ptr):not(.pl-row) { grid-template-columns: subgrid; grid-template-areas: none; }
  .bout:not(.bx) .bn, .bout:not(.bx) .bk, .bout.ptr .ptr-n { padding-left: 0; }
  .fcard .pl-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n k"; }
}