/* The Boxing Streets 2.0 (development version). Loaded after theme.css.
   Order: basics · ticker and menu · homepage · story cards · story page · lists and hubs · fights and results ·
   fighters · Tale of the Tape · fan scorecard · guides and history · instant search · small screens · print */

:root {
	--blue-text: #9DB8FF;
	--red-deep: #B0101F;
	--ok: #1F7A3D;
	--wait: #F2C230;
}

/* ---------- Basics ---------- */
/* Our own show/hide switches. Scoped to this theme's parts, so a plugin's markup keeps its own rules. */
.cmd[hidden], .gloss-find[hidden], #gloss > [hidden], [data-filter-list] > [hidden], .share-row [hidden], .tape-page [hidden], .sc [hidden], .radio-zone [hidden] { display: none !important; }
/* Group labels in the story sidebar and the footer are real headings, so a screen reader can jump between them */
h2.side-h, h2.foot-h { margin: 0; font-weight: 700; line-height: 1.5; text-wrap: wrap; }
h2.foot-h { margin-bottom: 10px; }
.side-note { margin: 0; font-family: var(--sans); font-size: 12px; line-height: 1.45; color: var(--muted); }
html { scroll-padding-bottom: 96px; }
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.calendar a:focus-visible, .calendar button:focus-visible { outline-color: var(--paper-ink); }
.calendar a:hover { color: var(--red-deep); }
.calendar .more { color: var(--red-deep); }
.muted { color: var(--muted); }
.promo-strip-what { opacity: 1; }
/* A button inside story text keeps its own colours (story links are red, which vanished on a red button) */
.story-text a.btn { text-decoration: none; }
.story-text a.btn-red, .story-text a.btn-red:hover { color: #FFFFFF; }
.story-text a.btn-ghost { color: var(--bone); }
.story-text a.btn-ghost:hover { color: var(--ink); }
/* Comfortable tap sizes for the small stand-alone links */
.more { display: inline-block; padding: 7px 0; }
.by-name, .by-src, .guide-table a, .hub-link { display: inline-block; padding-top: 4px; padding-bottom: 4px; }
.gate-check input { width: 24px; height: 24px; }
time.when { white-space: nowrap; }

.field, .tape-pick select, .cmp-form select, .fs-setup select, .fs-setup input, .gloss-find input {
	min-height: 48px; width: 100%; padding: 0 12px; background: var(--ink); color: var(--bone);
	border: 2px solid var(--line-2); border-radius: 2px; font: 600 16px var(--sans);
}
.tape-pick select, .cmp-form select, .fs-setup select {
	-webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23F2EDE4' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center;
}
.tape-pick select:hover, .cmp-form select:hover, .fs-setup select:hover { border-color: var(--muted); }

.badge { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; line-height: 1.2; padding: 3px 7px; border-radius: 2px; vertical-align: middle; white-space: nowrap; }
.badge.ok { background: var(--ok); color: #FFFFFF; }
.badge.wait { background: var(--wait); color: var(--paper-ink); }
.badge.none { border: 1px solid var(--muted); color: var(--soft); }
.badge.win { background: var(--red); color: #FFFFFF; margin-left: 10px; font-size: 12px; }

/* ---------- Ticker and menu ---------- */
.ticker-pause { display: none; flex: none; width: 44px; align-items: center; justify-content: center; background: var(--ink); color: #FFFFFF; border: 0; border-left: 1px solid var(--line-2); cursor: pointer; font-size: 11px; line-height: 1; }
.js .ticker-pause { display: flex; }
.ticker-pause:hover { color: var(--red-text); }
.ticker.paused .ticker-track { animation-play-state: paused; }
.ticker-track strong { font-weight: 600; }
/* Without scripts there is no pause button, so the headlines do not move: they can be scrolled sideways instead */
html:not(.js) .ticker-track { animation: none; }
html:not(.js) .ticker-track a[aria-hidden] { display: none; }
html:not(.js) .ticker-window { overflow-x: auto; scrollbar-width: none; }
html:not(.js) .ticker-window::-webkit-scrollbar { display: none; }
/* The music player and the weight-class buttons only work with scripts, so without them they are not shown */
html:not(.js) .radio-zone { display: none; }

.nav-label { display: none; }
.nav-col { display: contents; }
.nav-more { position: relative; }
.nav-more-btn { display: inline-flex; align-items: center; padding: 10px 2px; background: none; border: 0; cursor: pointer; color: var(--bone); font-family: var(--sans); font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.nav-more-btn:hover, .nav-more.open .nav-more-btn { color: var(--red-text); }
.nav-more-list { list-style: none; margin: 0; padding: 8px 0; position: absolute; right: 0; top: 100%; min-width: 230px; background: var(--panel); border: 1px solid var(--line-2); border-top: 3px solid var(--red); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); z-index: 30; display: none; }
.nav-more.open .nav-more-list, html:not(.js) .nav-more:hover .nav-more-list, html:not(.js) .nav-more:focus-within .nav-more-list { display: block; }
.nav-more-list a { display: block; padding: 11px 16px; color: var(--bone); text-decoration: none; font-family: var(--sans); font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.nav-more-list a:hover, .nav-more-list a:focus-visible { background: var(--red); color: #FFFFFF; }
@media (min-width: 901px) {
	.site-nav { display: flex; flex-wrap: nowrap; align-items: center; gap: 0 20px; }
	.nav-list { gap: 0 18px; }
	.nav-list a, .nav-more-btn { font-size: 13px; letter-spacing: .05em; white-space: nowrap; }
	.nav-more { flex: none; }
}
/* On small-laptop screens the sections keep to one line with slightly tighter type. Narrower than that they sit on two tidy rows, as on the live site today. */
@media (min-width: 1130px) and (max-width: 1259px) {
	.site-nav { gap: 0 14px; }
	.nav-list { gap: 0 12px; }
	.nav-list a, .nav-more-btn { font-size: 12px; letter-spacing: .03em; }
}

/* ---------- Homepage ---------- */
.main-event { min-height: 0; }
/* The shade is strong enough under every line of text that it passes contrast rules even over a white photograph */
.me-shade { background: linear-gradient(90deg, var(--ink) 0%, rgba(14, 13, 12, .93) 46%, rgba(14, 13, 12, .55) 76%, rgba(215, 25, 42, .35) 100%); }
.main-event .tag-plain { background: rgba(14, 13, 12, .84); color: var(--bone); }
.me-grid { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 48px; align-items: end; padding-top: 72px; padding-bottom: 64px; }
.me-grid .me-body { width: auto; padding: 0; gap: 18px; }
.main-event h1 { font-size: clamp(38px, 4.6vw, 70px); max-width: 24ch; }
.me-dek { font-size: 19px; max-width: 54ch; }
.me-src { color: var(--soft); }
.me-credit { right: auto; left: var(--gutter); bottom: 14px; }
.me-latest { background: rgba(14, 13, 12, .9); border-top: 4px solid var(--red); padding: 16px 20px 6px; }
.ml-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 6px; }
.ml-head h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: 32px; line-height: 1; text-transform: uppercase; }
.ml-head a { padding: 8px 0; font-family: var(--sans); font-weight: 700; font-size: 13px; color: var(--red-text); text-decoration: none; white-space: nowrap; }
.ml-head a:hover { color: var(--bone); }
.me-latest ol { list-style: none; margin: 0; padding: 0; }
.me-latest li + li { border-top: 1px solid var(--line-2); }
.me-latest li a { display: grid; gap: 3px; padding: 11px 0; text-decoration: none; color: var(--bone); }
.ml-time { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--red-text); font-weight: 600; }
.ml-title { font-family: var(--sans); font-weight: 700; font-size: 16px; line-height: 1.28; }
.ml-kick { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--muted); }
.me-latest li a:hover .ml-title { color: var(--red-text); text-decoration: underline; text-underline-offset: 3px; }

.calendar { padding: 56px 0; }
.cal-meta { font-size: 12px; line-height: 1.6; }
.cal-meta a { color: var(--paper-ink); font-weight: 600; text-underline-offset: 3px; }
.res-strip { margin-top: 28px; border-top: 2px solid var(--paper-ink); padding-top: 16px; display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 8px 24px; align-items: start; }
.res-strip h3 { margin: 4px 0 0; font-size: 12px; letter-spacing: .14em; font-weight: 600; color: var(--paper-ink); }
.res-strip ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 4px 28px; font-family: var(--sans); font-size: 15px; line-height: 1.4; }
.res-strip li a { display: block; padding: 5px 0; color: var(--paper-ink); text-decoration: none; }
.res-strip li a:hover strong { text-decoration: underline; }
.res-strip li .mono { font-size: 11px; color: var(--paper-muted); margin-right: 6px; }
.res-strip li .res-how { background: var(--paper-ink); color: var(--bone); padding: 1px 6px; margin: 0 0 0 4px; white-space: nowrap; }
.res-strip .more { margin-top: 4px; white-space: nowrap; }

.split { padding-top: 64px; }
.rt-band { background: var(--panel); border-block: 1px solid var(--line); padding: 56px 0; margin-top: 16px; }
.rt-red { color: var(--red-text); }
.rt-band .sec-head .mono, .tools .sec-head .mono { color: var(--muted); font-size: 12px; }
.rt-band .sec-head a { color: var(--soft); }
.rt-take { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; background: var(--ink); border-top: 4px solid var(--red); text-decoration: none; color: var(--bone); }
.rt-take:hover { color: var(--bone); }
.rt-take .rt-quote { font-size: 19px; }
.rt-on { font-family: var(--sans); font-weight: 700; font-size: 15px; line-height: 1.3; }
.rt-take:hover .rt-on { color: var(--red-text); text-decoration: underline; text-underline-offset: 3px; }

.tools { padding-top: 56px; padding-bottom: 8px; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tool { display: flex; flex-direction: column; gap: 8px; min-height: 116px; padding: 18px; border: 1px solid var(--line-2); border-left: 4px solid var(--red); text-decoration: none; color: var(--bone); }
.tool:nth-child(even) { border-left-color: var(--blue); }
.tool:hover { background: var(--panel); color: var(--bone); }
.tool-name { font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1; text-transform: uppercase; }
.tool:hover .tool-name { color: var(--red-text); }
.tool-text { font-family: var(--sans); font-size: 14px; line-height: 1.4; color: var(--soft); }
.list-body .tool-grid + .list-sub { margin-top: 48px; }

.learn { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; padding-top: 24px; padding-bottom: 56px; }
.otd { display: flex; flex-direction: column; gap: 8px; padding: 26px; background: var(--bone); color: var(--paper-ink); text-decoration: none; }
.otd:hover { color: var(--paper-ink); }
.otd .kicker { color: var(--red-deep); }
.otd .otd-date { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; color: var(--paper-muted); }
.otd-title { font-family: var(--display); font-weight: 900; font-size: 36px; line-height: .98; text-transform: uppercase; }
.otd:hover .otd-title { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.otd-text { font-size: 17px; line-height: 1.5; }
.otd.b101 { background: var(--panel); color: var(--bone); border: 1px solid var(--line-2); border-top: 4px solid var(--blue); }
.otd.b101:hover { color: var(--bone); }
.otd.b101 .kicker { color: var(--red-text); }
.otd.b101 .otd-text { color: var(--soft); }

/* ---------- Story cards ---------- */
.card-tile { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 34px 20px 30px; container-type: inline-size; overflow: hidden;
	background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 16px), linear-gradient(135deg, #24211E 0%, #0E0D0C 70%); }
.card-tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, var(--red) 50%, var(--blue) 50%); }
.ct-top { position: absolute; left: 20px; top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; font-weight: 600; color: var(--red-text); }
.ct-a, .ct-b { font-family: var(--display); font-weight: 900; font-size: 44px; font-size: clamp(30px, 15cqi, 68px); line-height: .88; text-transform: uppercase; overflow-wrap: anywhere; color: var(--bone); }
.ct-b { color: var(--soft); }
.card-tile.plain .ct-a { font-size: 36px; font-size: clamp(26px, 12cqi, 52px); }
.ct-brand { position: absolute; left: 20px; bottom: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--muted); }

.credit-line { display: none; font-size: 10px; line-height: 1.35; letter-spacing: .02em; color: var(--muted); }

/* ---------- Story page ---------- */
.crumbs { font-size: 12px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; line-height: 1.8; }
.crumbs a { display: inline-block; padding: 2px 0; color: var(--soft); text-decoration: none; } /* a full 24 px tall, so links stay easy to tap when the trail wraps onto two lines */
.crumbs a:hover { color: var(--red-text); text-decoration: underline; }
.by-mono { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 2px solid var(--red); font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: .02em; color: var(--bone); }
.by-pic { width: 46px; height: 46px; object-fit: cover; }
.by-name { color: var(--bone); text-decoration: none; }
.by-name:hover { text-decoration: underline; }
.by-when, .by-upd { font-size: 12px; }
.by-upd { color: var(--bone); border: 1px solid var(--line-2); padding: 3px 8px; }
.by-src { text-underline-offset: 3px; }
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.share-row > .mono { font-size: 11px; letter-spacing: .14em; color: var(--muted); margin-right: 2px; }
.share-row a, .share-copy { display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 2px; background: transparent; color: var(--bone); font: 700 13px var(--sans); text-decoration: none; cursor: pointer; }
.share-row a:hover, .share-copy:hover { border-color: var(--red); color: var(--red-text); }
.share-done { font-size: 11px; color: var(--red-text); }
.tape-share { margin: 22px 0 0; }

.live-note { max-width: 920px; margin: 28px 0 0; padding: 20px 22px; background: var(--panel); border: 2px solid var(--red); font-family: var(--sans); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.live-note > strong { font-size: 12px; letter-spacing: .14em; color: var(--red-text); }
.live-note p { margin: 0; font-size: 16px; line-height: 1.5; }
.live-note .ln-result { font-weight: 800; font-size: 21px; line-height: 1.3; }
.live-note .ln-src { font-size: 13px; color: var(--muted); }
.live-note .ln-src a { color: var(--soft); }
.live-note ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.live-note li a { font-weight: 700; }
.live-note li .mono { color: var(--muted); font-size: 11px; margin-left: 6px; }

.correction { max-width: 920px; margin: 28px 0 0; padding: 16px 20px; background: var(--panel); border-left: 4px solid var(--wait); font-family: var(--sans); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.correction > strong { font-size: 12px; letter-spacing: .14em; color: var(--wait); }
.correction p { margin: 0; font-size: 16px; line-height: 1.5; }
.correction a { font-size: 14px; color: var(--soft); text-underline-offset: 3px; }
.corr-log { margin-top: 44px; padding-top: 8px; border-top: 2px solid var(--bone); font-family: var(--sans); }
.story-text .corr-log h2 { margin-top: 20px; }
.corr-log p { font-size: 17px; color: var(--soft); }
.corr-list { list-style: none; margin: 0; padding: 0; }
.story-text .corr-list { padding-left: 0; }
.corr-list li { padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; font-size: 16px; line-height: 1.45; }
.corr-list .mono { font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.corr-list a { font-weight: 700; }
.corr-text { color: var(--soft); }
.story-pic figcaption { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.cap-text { font-family: var(--sans); font-size: 14px; color: var(--soft); line-height: 1.4; }
.cap-credit { font-size: 12px; color: var(--muted); }
.card-pic .credit { font-size: 11px; }
.story-text a.in-link { color: inherit; text-decoration-color: var(--red-text); text-decoration-thickness: 2px; }
.story-text a.in-link:hover { color: var(--red-text); }

.more-on { margin: 40px 0 28px; padding: 22px 24px; background: var(--panel); border-top: 4px solid var(--red); font-family: var(--sans); }
.more-on h2 { margin: 0 0 6px; font-family: var(--display); font-weight: 800; font-size: 32px; line-height: 1; text-transform: uppercase; }
.more-on ul { list-style: none; margin: 0 0 14px; padding: 0; }
.more-on li { padding: 12px 0; border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 4px; }
.more-on li a { font-weight: 700; font-size: 18px; line-height: 1.3; text-decoration: none; }
.more-on li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.more-on li .mono { font-size: 11px; color: var(--muted); }

.side-fighter { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px; background: var(--panel); border-left: 4px solid var(--red); text-decoration: none; color: var(--bone); }
.side-fighter + .side-fighter { border-left-color: var(--blue); }
.sf-name { font-family: var(--display); font-weight: 800; font-size: 27px; line-height: 1; text-transform: uppercase; }
.side-fighter .mono { font-size: 11px; color: var(--muted); }
.side-fighter:hover .sf-name { color: var(--red-text); }
.sofar { list-style: none; margin: 4px 0 0 5px; padding: 0; border-left: 2px solid var(--line-2); }
.sofar li { position: relative; padding: 0 0 16px 18px; display: flex; flex-direction: column; gap: 3px; font-family: var(--sans); font-size: 15px; line-height: 1.3; }
.sofar li:last-child { padding-bottom: 0; }
.sofar li::before { content: ""; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.sofar li .mono { font-size: 11px; color: var(--muted); }
.sofar a { font-weight: 700; text-decoration: none; }
.sofar a:hover { text-decoration: underline; }
.sofar li.now::before { background: var(--red); box-shadow: 0 0 0 4px rgba(215, 25, 42, .3); }
.sofar li.now span:last-child { font-weight: 800; color: var(--red-text); }
.story-side { top: 104px; }

/* ---------- Lists and hubs ---------- */
.list-sub { margin: 48px 0 20px; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1; text-transform: uppercase; }
.list-body > .list-sub:first-child, section:first-child > .list-sub { margin-top: 0; padding-top: 0; border-top: 0; }
.list-note { margin: 28px 0 0; max-width: 72ch; font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--muted); }
.list-note a { color: var(--soft); }
.list-note.res-key { margin: -14px 0 24px; }
.list-foot { margin: 24px 0 0; }
.hub-link { align-self: flex-start; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 14px; border: 1px solid var(--line-2); border-left: 4px solid var(--red); text-decoration: none; font-family: var(--sans); font-weight: 700; font-size: 15px; }
.hub-link .mono { font-size: 11px; color: var(--red-text); }
.hub-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.hub-nav a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 11px; border: 1px solid var(--line-2); color: var(--soft); text-decoration: none; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.hub-nav a:hover { border-color: var(--red); color: var(--bone); }
.hub-nav a[aria-current] { background: var(--red); border-color: var(--red); color: #FFFFFF; }
.otd-page .hub-nav { margin: 0 0 32px; }
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 26px; }
.filter button { min-height: 40px; padding: 0 12px; border: 1px solid var(--line-2); background: transparent; color: var(--soft); cursor: pointer; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.filter button:hover { border-color: var(--red); color: var(--bone); }
.filter button.on { background: var(--bone); border-color: var(--bone); color: var(--ink); font-weight: 600; }
.filter-count { font-size: 12px; color: var(--muted); margin-left: 6px; }
html:not(.js) .filter { display: none; }

/* ---------- Fights and results ---------- */
.frows { border-top: 2px solid var(--bone); }
.frow { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.frow:target { background: var(--panel); box-shadow: -12px 0 0 var(--panel), 12px 0 0 var(--panel), -16px 0 0 var(--red); }
.frow-date { display: flex; flex-direction: column; gap: 4px; }
.frow-day { font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; text-transform: uppercase; }
.frow-date .mono { font-size: 12px; color: var(--muted); }
.frow-names { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3.4vw, 40px); line-height: 1; text-transform: uppercase; }
.frow-names > .red::before, .frow-names > .blue::before { content: ""; display: inline-block; width: 10px; height: .68em; margin-right: 8px; background: var(--red); }
.frow-names > .blue::before { background: var(--blue); }
.frow-names a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.frow-names a:hover { color: var(--red-text); text-decoration-color: var(--red-text); }
.frow-names .vs { font-size: .5em; padding: 0; color: var(--muted); align-self: center; }
.frow.result .frow-names > .red:not(.won), .frow.result .frow-names > .blue:not(.won) { color: var(--muted); }
.frow-meta { margin: 9px 0 0; font-size: 12px; letter-spacing: .08em; line-height: 1.5; color: var(--muted); }
.frow-result { margin: 12px 0 0; font-family: var(--sans); font-size: 17px; line-height: 1.45; }
.frow-result strong { font-family: var(--mono); font-size: 13px; background: var(--bone); color: var(--ink); padding: 2px 8px; margin-right: 8px; white-space: nowrap; }
.frow-basis { margin: 9px 0 0; font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--muted); }
.frow-basis a, .basis a, .tape-basis a { color: var(--soft); }
.frow-note { margin: 10px 0 0; max-width: 72ch; font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--soft); }
.frow-acts { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.frow-acts a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 2px; color: var(--bone); text-decoration: none; font: 700 13px var(--sans); }
.frow-acts a:hover { border-color: var(--red); color: var(--red-text); }
.legend { margin: 0 0 28px; padding: 16px 18px; background: var(--panel); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 28px; font-family: var(--sans); font-size: 14px; }
.legend div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.legend dt, .legend dd { margin: 0; }
.legend dd { color: var(--soft); line-height: 1.45; }

/* ---------- Fighters ---------- */
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 12px; }
.fgrid > div { display: flex; }
.fgrid > div > .fcard { flex: 1; }
.fcard { display: flex; flex-direction: column; gap: 5px; min-height: 148px; padding: 16px; background: var(--panel); border-top: 4px solid var(--red); text-decoration: none; color: var(--bone); container-type: inline-size; }
.fgrid > :nth-child(even) .fcard, .fgrid > .fcard:nth-child(even) { border-top-color: var(--blue); }
.fcard:hover { background: #24211E; color: var(--bone); }
.fcard-top { font-size: 10px; letter-spacing: .14em; color: var(--muted); }
.fcard-name { font-family: var(--display); font-weight: 800; font-size: 30px; font-size: clamp(24px, 15cqi, 34px); line-height: .95; text-transform: uppercase; overflow-wrap: anywhere; }
.fcard-first { display: block; margin-bottom: 3px; font-family: var(--sans); font-weight: 700; font-size: 14px; line-height: 1.2; text-transform: none; color: var(--soft); }
.fcard:hover .fcard-name { color: var(--red-text); }
.fcard-rec { font-size: 13px; }
.fcard-n { margin-top: auto; padding-top: 6px; font-family: var(--sans); font-size: 13px; color: var(--muted); }

.fighter { padding-top: 44px; padding-bottom: 56px; }
.fighter-head { display: flex; flex-direction: column; gap: 14px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.fighter-head h1 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(52px, 8.4vw, 128px); line-height: .86; text-transform: uppercase; overflow-wrap: break-word; }
.fighter-head .tag-plain { text-decoration: none; }
.fighter-nick { margin: 0; font-style: italic; font-size: 22px; color: var(--soft); }
.fighter-rec { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.fr-num { font-family: var(--display); font-weight: 900; font-size: clamp(44px, 6vw, 76px); line-height: 1; color: var(--red-text); }
.fighter-rec .mono { font-size: 12px; color: var(--muted); }
.fighter-cols { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; margin-top: 36px; }
.fighter-main { flex: 999 1 560px; min-width: 0; }
.fighter-side { flex: 1 1 280px; min-width: 0; position: sticky; top: 104px; }
.stats { margin: 0; padding: 0 1px 1px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.stats div { margin: 0 -1px -1px 0; border: 1px solid var(--line); padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; }
.stats dt { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.stats dd { margin: 0; font-family: var(--sans); font-weight: 700; font-size: 19px; line-height: 1.3; }
.basis { margin: 12px 0 0; font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--muted); }
.fighter-bio { margin-top: 32px; max-width: 740px; }
.cmp-form { padding: 20px; background: var(--panel); border-top: 4px solid var(--red); }
.cmp-form label { font-family: var(--sans); font-size: 14px; color: var(--soft); }

/* ---------- Rankings ---------- */
.rank-about { margin: 0 0 28px; padding: 16px 18px; max-width: 860px; background: var(--panel); border-left: 4px solid var(--blue); font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--soft); }
.rank-about strong { color: var(--bone); }
.rank-about a { color: var(--bone); }
.rank-page .hub-nav { margin: 0 0 12px; }
.rank { padding: 26px 0 30px; border-top: 2px solid var(--bone); scroll-margin-top: 110px; }
.rank-page .rank:first-of-type { margin-top: 20px; }
.rank-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.rank-head h2, .rank-head h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 36px; line-height: 1; text-transform: uppercase; }
.rank-head .mono { font-size: 12px; color: var(--muted); }
.rank-champs { list-style: none; margin: 0 0 6px; padding: 0; font-family: var(--sans); }
.rank-champs li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.rank-champs .badge { margin: 0; }
.rank-champs .mono { font-size: 12px; color: var(--soft); }
.rank-list { list-style: none; margin: 0; padding: 0; max-width: 860px; font-family: var(--sans); }
.rank-list li { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rank-n { font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; color: var(--red-text); }
.rank-name { font-weight: 700; font-size: 18px; line-height: 1.3; }
.rank-name a { text-underline-offset: 3px; }
.rank-rec { font-size: 12px; color: var(--muted); }
.rank-note { grid-column: 2 / -1; font-size: 14px; line-height: 1.45; color: var(--soft); }
.rank-changed { margin: 16px 0 0; max-width: 72ch; font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--soft); }
.rank-small { margin: 12px 0 0; max-width: 72ch; font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--muted); }
.fighter-rank { margin: 0; font-size: 12px; letter-spacing: .08em; }
.fighter-rank a { color: var(--bone); text-underline-offset: 3px; }

/* ---------- Tale of the Tape ---------- */
.tape-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-bottom: 28px; }
/* Each part has its own column, so the two lists stay equally wide whether or not the swap button (scripts on) or the Compare button (scripts off) is there */
.tape-pick .tp.red { grid-column: 1; grid-row: 1; }
.tape-pick .tp-swap { grid-column: 2; grid-row: 1; }
.tape-pick .tp.blue { grid-column: 3; grid-row: 1; }
.tape-pick .tp-go { grid-column: 4; grid-row: 1; }
.tp label { display: block; margin-bottom: 6px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.tp.red label { color: var(--red-text); }
.tp.blue label { color: var(--blue-text); }
.tp.red select { border-left: 6px solid var(--red); }
.tp.blue select { border-left: 6px solid var(--blue); }
.tp-swap { width: 48px; height: 48px; border: 1px solid var(--line-2); border-radius: 2px; background: transparent; color: var(--bone); font-size: 20px; cursor: pointer; }
.tp-swap:hover { border-color: var(--red); color: var(--red-text); }
.tape-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-family: var(--sans); }
.tape-table thead th { padding: 18px 12px 20px; vertical-align: bottom; font-family: var(--display); font-weight: 900; font-size: clamp(24px, 4.6vw, 56px); line-height: .92; text-transform: uppercase; overflow-wrap: anywhere; }
.tape-table .tt-a { text-align: left; }
.tape-table .tt-b { text-align: right; }
.tape-table thead .tt-a { border-top: 6px solid var(--red); }
.tape-table thead .tt-b { border-top: 6px solid var(--blue); }
.tape-table .tt-mid { width: 150px; text-align: center; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; color: var(--muted); }
.tape-table thead .tt-mid span[aria-hidden] { font-family: var(--display); font-weight: 900; font-size: 26px; }
.tape-table thead .cl { display: block; margin-bottom: 8px; font-size: 10px; letter-spacing: .14em; }
.tape-table .tt-a .cl { color: var(--red-text); }
.tape-table .tt-b .cl { color: var(--blue-text); }
.tape-table thead a { color: var(--bone); text-decoration: none; }
.tape-table thead a:hover { color: var(--red-text); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.tt-nick { display: block; margin-top: 8px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 16px; line-height: 1.3; text-transform: none; color: var(--soft); }
.tape-table tbody td, .tape-table tbody th { padding: 15px 12px; border-top: 1px solid var(--line); }
.tape-table tbody td { font-weight: 700; font-size: clamp(15px, 1.9vw, 20px); line-height: 1.3; }
.tape-table td.tt-a.edge { background: linear-gradient(90deg, rgba(215, 25, 42, .34), rgba(215, 25, 42, 0) 85%); color: #FFFFFF; }
.tape-table td.tt-b.edge { background: linear-gradient(270deg, rgba(28, 63, 148, .62), rgba(28, 63, 148, 0) 85%); color: #FFFFFF; }
.edge-tag { display: inline-block; margin: 0 0 0 10px; padding: 2px 5px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; vertical-align: middle; background: var(--bone); color: var(--ink); }
.tt-b .edge-tag { margin: 0 0 0 10px; }
.tape-basis { margin-top: 20px; font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--muted); }
.tape-basis p { margin: 0 0 8px; }
.tape-basis strong { color: var(--soft); }

/* ---------- Fan scorecard ---------- */
.sc { display: flex; flex-direction: column; gap: 22px; }
.fs-setup { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 760px; }
.fs-setup label { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fs-custom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.fs-gone { margin: 0; padding: 14px 16px; border: 2px solid var(--wait); font-family: var(--sans); font-size: 15px; font-weight: 700; line-height: 1.45; }
.fs-shared { margin: 0; padding: 14px 16px; border: 2px solid var(--bone); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-family: var(--sans); font-size: 15px; font-weight: 700; }
.fs-shared .btn { min-height: 40px; }
.fs-main { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.fs-panel { padding: 22px; background: var(--panel); border-top: 4px solid var(--red); display: flex; flex-direction: column; gap: 16px; }
.fs-rd { margin: 0; display: flex; align-items: baseline; gap: 10px; font-family: var(--display); font-weight: 900; font-size: 46px; line-height: .9; text-transform: uppercase; }
.fs-rd small { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .08em; color: var(--muted); }
.fs-q { margin: 0; font-family: var(--sans); font-weight: 700; font-size: 15px; color: var(--soft); }
.fs-win { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
.fs-b { min-height: 80px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 2px solid var(--line-2); border-radius: 2px; background: var(--ink); color: var(--bone); cursor: pointer; font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; text-align: center; }
.fs-b small { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .14em; color: var(--muted); }
.fs-b.red { border-top: 6px solid var(--red); }
.fs-b.blue { border-top: 6px solid var(--blue); }
.fs-b.even { min-width: 76px; font-size: 17px; }
.fs-b:hover { border-color: var(--muted); }
.fs-b.red:hover { border-top-color: var(--red); }
.fs-b.blue:hover { border-top-color: var(--blue); }
.fs-b[aria-pressed="true"] { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.fs-b.red[aria-pressed="true"] { border-top-color: var(--red); }
.fs-b.blue[aria-pressed="true"] { border-top-color: var(--blue); }
.fs-b[aria-pressed="true"] small { color: var(--paper-muted); }
.fs-margin { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fs-m { min-height: 58px; padding: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--line-2); border-radius: 2px; background: transparent; color: var(--bone); cursor: pointer; font-family: var(--mono); font-weight: 600; font-size: 15px; }
.fs-m small { font-family: var(--sans); font-weight: 500; font-size: 11px; line-height: 1.2; text-align: center; color: var(--muted); }
.fs-m[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #FFFFFF; }
.fs-m[aria-pressed="true"] small { color: #FFFFFF; }
.fs-m:disabled, .fs-d:disabled { opacity: .45; cursor: not-allowed; }
.fs-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--sans); font-size: 13px; color: var(--soft); }
.fs-line > span { flex: 1 1 100%; }
.fs-d { min-height: 44px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 2px; background: transparent; color: var(--bone); cursor: pointer; font: 700 13px var(--sans); }
.fs-d:hover { border-color: var(--muted); }
.fs-d[aria-pressed="true"] { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.fs-nav { display: flex; justify-content: space-between; gap: 10px; }
.fs-nav .btn { min-height: 48px; padding: 0 16px; }
.fs-nav .btn:disabled { opacity: .4; cursor: not-allowed; }
.fs-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-family: var(--sans); }
.fs-table th, .fs-table td { padding: 5px 8px; text-align: center; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 700; }
.fs-table thead th { padding: 10px 6px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; overflow-wrap: anywhere; color: var(--bone); }
.fs-table thead th:first-child { width: 64px; color: var(--muted); }
.fs-table thead th.red { border-top: 4px solid var(--red); }
.fs-table thead th.blue { border-top: 4px solid var(--blue); }
.fs-table tbody th { padding: 3px; }
.fs-table tbody th button { width: 46px; height: 38px; border: 1px solid var(--line-2); border-radius: 2px; background: transparent; color: var(--bone); cursor: pointer; font-family: var(--mono); font-weight: 600; font-size: 13px; }
.fs-table tbody th button:hover { border-color: var(--red); }
.fs-table tr.cur th button { background: var(--red); border-color: var(--red); color: #FFFFFF; }
.fs-table td.lost { color: var(--muted); }
.fs-table td.blank, .fs-table tr.off td { color: var(--muted); font-weight: 500; }
.fs-table td.ended { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; }
.fs-table td small { display: block; font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: .06em; color: var(--muted); }
.fs-table tfoot th, .fs-table tfoot td { padding-top: 12px; border-top: 2px solid var(--bone); border-bottom: 0; font-family: var(--display); font-weight: 900; font-size: 32px; line-height: 1; }
.fs-table tfoot th { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--muted); }
.fs-verdict { margin: 16px 0 0; font-family: var(--sans); font-weight: 800; font-size: 18px; line-height: 1.4; }
.fs-official { margin: 14px 0 0; padding: 14px 16px; background: var(--panel); border-left: 4px solid var(--blue); font-family: var(--sans); font-size: 15px; line-height: 1.5; }
.fs-official p { margin: 0 0 6px; }
.fs-official p:last-child { margin: 0; }
.fs-official strong { font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.fs-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.fs-actions .btn { min-height: 44px; padding: 0 14px; font-size: 13px; }
.fs-saved { margin: 12px 0 0; font-size: 11px; color: var(--muted); }

/* ---------- Guides and history ---------- */
.guide .story-text { max-width: 740px; font-size: 19px; }
.guide .story-text h2:first-child { margin-top: 0; }
.tablewrap { overflow-x: auto; margin: 0 0 32px; }
.guide-table { width: 100%; max-width: 940px; border-collapse: collapse; font-family: var(--sans); font-size: 16px; line-height: 1.45; }
.guide-table th, .guide-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.guide-table thead th { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--bone); }
.guide-table tbody th { font-weight: 800; }
.guide-table td { color: var(--soft); }
.guide-table a { color: var(--red-text); text-underline-offset: 3px; }
.guide-note { font-family: var(--sans); font-size: 14px; color: var(--muted); }
.gloss-find { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 26px; }
.gloss-find label { font-family: var(--sans); font-weight: 700; font-size: 15px; }
.gloss-find input { max-width: 360px; }
.gloss { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 36px; }
.gloss > div { padding: 15px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.gloss dt { font-family: var(--sans); font-weight: 800; font-size: 18px; line-height: 1.3; }
.gloss dd { margin: 4px 0 0; font-size: 16px; line-height: 1.5; color: var(--soft); }
.gloss > div:target { background: var(--panel); box-shadow: -12px 0 0 var(--panel), 12px 0 0 var(--panel), -16px 0 0 var(--red); }

.otd-list { list-style: none; margin: 0; padding: 0; }
.otd-list li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.otd-list .otd-date { display: flex; flex-direction: column; gap: 5px; font-family: var(--display); font-weight: 900; font-size: 28px; line-height: 1; text-transform: uppercase; }
.otd-list .otd-date .mono { font-size: 13px; color: var(--red-text); }
.otd-list h3 { margin: 0 0 6px; font-family: var(--sans); font-weight: 800; font-size: 20px; line-height: 1.25; }
.otd-list p { margin: 0; max-width: 70ch; font-size: 17px; line-height: 1.55; color: var(--soft); }
.otd-list .otd-ref { margin-top: 8px; font-size: 11px; color: var(--muted); }
.otd-list .otd-ref a { color: var(--soft); }
.otd-list .otd-date .otd-now { margin: 2px 0 0; align-self: flex-start; }
.otd-list li.today, .otd-list li:target { background: var(--panel); box-shadow: -12px 0 0 var(--panel), 12px 0 0 var(--panel), -16px 0 0 var(--red); }

.foot-brand .foot-tag { margin: 12px 0 0; font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; color: var(--bone); }
.shop-body { font-family: var(--sans); }

/* ---------- Instant search ---------- */
.cmd { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; background: rgba(8, 7, 6, .88); }
.cmd-box { width: min(700px, 100%); max-height: 82vh; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-2); border-top: 4px solid var(--red); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.cmd-top { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); }
#cmd-q { flex: 1; min-width: 0; min-height: 52px; padding: 0 14px; background: var(--ink); color: var(--bone); border: 2px solid var(--line-2); border-radius: 2px; font: 600 18px var(--sans); }
#cmd-q::placeholder { color: var(--muted); opacity: 1; }
.cmd-close { flex: none; width: 52px; height: 52px; border: 1px solid var(--line-2); border-radius: 2px; background: transparent; color: var(--bone); font-size: 26px; line-height: 1; cursor: pointer; }
.cmd-close:hover { border-color: var(--red); color: var(--red-text); }
.cmd-list { overflow-y: auto; padding: 4px 0 8px; overscroll-behavior: contain; }
.cmd-group { margin: 0; padding: 14px 16px 6px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--muted); }
.cmd-opt { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 16px; color: var(--bone); text-decoration: none; font-family: var(--sans); font-weight: 700; font-size: 16px; line-height: 1.3; }
.cmd-opt small { flex: none; max-width: 46%; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .04em; color: var(--muted); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-opt[aria-selected="true"], .cmd-opt:hover { background: var(--red); color: #FFFFFF; }
.cmd-opt[aria-selected="true"] small, .cmd-opt:hover small { color: #FFFFFF; }
.cmd-empty { margin: 0; padding: 18px 16px; font-family: var(--sans); font-size: 15px; color: var(--soft); }
.cmd-foot { margin: 0; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
body.cmd-open { overflow: hidden; }

/* ---------- Small screens ---------- */
@media (max-width: 1040px) {
	/* One column of text across the whole picture: the shade stays dark enough to the right edge for small text to pass contrast (5 to 1 or better over a white photo), however long the line runs */
	.me-shade { background: linear-gradient(90deg, var(--ink) 0%, rgba(14, 13, 12, .92) 66%, rgba(14, 13, 12, .76) 100%); }
	.me-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 64px; padding-bottom: 32px; }
	.me-latest ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
	.me-latest li:nth-child(2) { border-top: 0; }
	.me-credit { position: absolute; display: block; top: 10px; right: 10px; left: auto; bottom: auto; margin: 0; max-width: 72%; text-align: right; }
	.res-strip { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
	.site-nav.open { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; align-items: start; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); overflow-y: auto; overscroll-behavior: contain; margin-top: 6px; border-top: 1px solid var(--line); }
	.nav-col { display: block; }
	.nav-label { display: block; padding: 16px 0 2px; font-size: 11px; letter-spacing: .14em; color: var(--muted); }
	.nav-list { padding: 0 0 10px; }
	.nav-more-btn { display: none; }
	.nav-more-list, html:not(.js) .nav-more .nav-more-list { display: block; position: static; min-width: 0; padding: 0 0 10px; background: none; border: 0; box-shadow: none; }
	.nav-more-list a { padding: 12px 0; letter-spacing: .06em; }
	.nav-more-list a:hover, .nav-more-list a:focus-visible { background: none; color: var(--red-text); }
	.fighter-side { position: static; }
	.share-row { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 820px) {
	.fs-main { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.tape-pick { grid-template-columns: minmax(0, 1fr) auto; }
	.tape-pick .tp.red { grid-column: 1; grid-row: 1; }
	.tape-pick .tp.blue { grid-column: 1; grid-row: 2; }
	.tape-pick .tp-swap { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
	.tape-pick .tp-go { grid-column: 1 / -1; grid-row: 3; }
	html:not(.js) .tape-pick .tp { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
	.promo-strip-row { gap: 8px; }
	.promo-strip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
	.me-pic { height: 330px; bottom: auto; }
	.me-shade { height: 332px; bottom: auto; background: linear-gradient(0deg, var(--ink) 6%, rgba(14, 13, 12, .84) 50%, rgba(14, 13, 12, .34) 100%); }
	.me-grid { padding-top: 112px; padding-bottom: 20px; gap: 20px; }
	.me-grid .me-body { gap: 13px; }
	.main-event h1 { font-size: clamp(30px, 8.7vw, 42px); max-width: none; }
	.me-dek { font-size: 17px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
	.me-src, .me-grid .btn-row { display: none; }
	.me-credit { top: 6px; right: 6px; max-width: 62%; padding: 3px 6px; font-size: 9px; background: rgba(14, 13, 12, .62); }
	.me-latest { margin-inline: calc(-1 * var(--gutter)); padding: 14px var(--gutter) 4px; background: var(--ink); }
	.me-latest ol { display: block; }
	.me-latest li:nth-child(2) { border-top: 1px solid var(--line-2); }
	/* Story lists on a phone: the first story stays large, the rest become compact rows (twice as many per screen) */
	.grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.grid > .card { padding: 16px 0; border-bottom: 1px solid var(--line); }
	.grid > .card:first-child { padding-top: 0; }
	.grid > .card:not(.vid):not(:first-child) { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; row-gap: 5px; align-content: start; }
	.grid > .card:not(.vid):not(:first-child) .card-pic { grid-column: 1; grid-row: 1 / span 4; aspect-ratio: 1; }
	.grid > .card:not(.vid):not(:first-child) > :not(.card-pic) { grid-column: 2; }
	.grid > .card:not(.vid):not(:first-child) h3 { font-size: 17px; line-height: 1.25; }
	.grid > .card:not(.vid):not(:first-child) .card-pic .credit { display: none; }
	.grid > .card:not(.vid):not(:first-child) .credit-line { display: block; }
	.grid > .card:not(.vid):not(:first-child) .card-tile { padding: 8px; justify-content: center; }
	.grid > .card:not(.vid):not(:first-child) .ct-top, .grid > .card:not(.vid):not(:first-child) .ct-brand { display: none; }
	.grid > .card:not(.vid):not(:first-child) .ct-a, .grid > .card:not(.vid):not(:first-child) .ct-b { font-size: 14px; line-height: 1; letter-spacing: .01em; }
	.list-head { padding: 30px 0 22px; }
	.list-head h1 { font-size: clamp(36px, 11vw, 48px); }
	.list-body { padding-top: 26px; }
	.calendar { padding: 40px 0; }
	.calendar .fight-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 10px; scroll-padding-inline: var(--gutter); -webkit-overflow-scrolling: touch; }
	.calendar .fight-grid .fight { flex: 0 0 84%; scroll-snap-align: start; }
	.calendar .sec-head { margin-bottom: 18px; }
	.split { padding-top: 44px; gap: 36px; }
	.rt-band { padding: 40px 0; }
	.tools { padding-top: 40px; }
	.tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.tool { min-height: 0; padding: 14px; }
	.tool-name { font-size: 22px; }
	.tool-text { font-size: 13px; }
	.class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	/* Weight-class tiles on a phone: the limit above the name, and a name that shrinks to fit so no word is ever split */
	.wc { min-height: 0; padding: 11px 12px; flex-direction: column; align-items: flex-start; gap: 3px; container-type: inline-size; }
	.wc .mono { font-size: 10px; white-space: nowrap; }
	.wc-name { font-size: 18px; font-size: clamp(15px, 13.5cqi, 20px); overflow-wrap: break-word; }
	.fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.fcard { min-height: 128px; padding: 14px 12px; }
	.frow { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 0; }
	.frow-date { flex-direction: row; align-items: baseline; gap: 10px; }
	.frow-day { font-size: 24px; }
	.frow-acts a, .share-row a, .share-copy, .hub-nav a, .filter button { min-height: 44px; }
	.share-row.native a { display: none; }
	.otd-list li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.otd-list .otd-date { flex-direction: row; align-items: baseline; gap: 10px; font-size: 24px; }
	.otd { padding: 20px; }
	.otd-title { font-size: 30px; }
	.list-sub { font-size: 28px; margin-top: 36px; }
	.tape-table .tt-mid { width: 84px; font-size: 10px; }
	.tape-table thead th { padding: 14px 6px 16px; }
	.tape-table tbody td, .tape-table tbody th { padding: 13px 6px; }
	.edge-tag { display: block; width: max-content; margin: 5px 0 0; }
	.tt-b .edge-tag { margin: 5px 0 0 auto; }
	.tt-nick { font-size: 14px; }
	.fs-panel { padding: 16px; }
	.fs-rd { font-size: 38px; }
	.fs-custom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.fs-b { min-height: 72px; font-size: 19px; }
	.gloss { grid-template-columns: minmax(0, 1fr); }
	.guide-table th, .guide-table td { padding: 10px 8px; font-size: 15px; }
	.cmd { padding: 0; }
	.cmd-box { width: 100%; max-height: 100vh; max-height: 100dvh; height: 100%; border: 0; border-top: 4px solid var(--red); }
	.cmd-foot { display: none; }
	.radio-show { padding: 10px 14px; }
}
/* Short phones: the first screen still has to show a second story */
@media (max-width: 700px) and (max-height: 700px) {
	.me-grid { padding-top: 84px; }
	.me-dek { display: none; }
}
@media (max-width: 400px) {
	.promo-strip-new { display: none; }
	.promo-strip-row { font-size: 12px; }
	.head-row { gap: 10px 12px; }
	.fs-win { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.fs-b.even { grid-column: 1 / -1; grid-row: 2; min-height: 48px; }
}

@media (hover: none) {
	.ticker:hover .ticker-track { animation-play-state: running; }
	.ticker.paused .ticker-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.ticker-window { overflow-x: auto; scrollbar-width: none; }
	.ticker-window::-webkit-scrollbar { display: none; }
	.ticker-track a[aria-hidden] { display: none; }
	.js .ticker-pause { display: none; }
}

/* ---------- Print: the story or the scorecard, without the site furniture ---------- */
/* Without scripts the "Menu" button cannot open anything. On small screens the menu is then simply shown in full, and the header scrolls away with the page instead of staying stuck to the top. */
@media (max-width: 900px) {
	html:not(.js) .menu-btn { display: none; }
	html:not(.js) .site-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; align-items: start; margin-top: 6px; border-top: 1px solid var(--line); }
	html:not(.js) .site-head { position: static; }
}

@media print {
	/* On screen this is a dark site with light text. On paper everything is dark text on white: no badge, quote, table cell or headline is left light. */
	*, *::before, *::after { color: #000000 !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; }
	.ticker, .site-head, .promo-strip, .radio, .radio-show, .site-foot, .cmd, .share-row, .story-side, .comments, .fs-panel, .fs-setup, .fs-actions, .filter, .hub-nav, .skip, .frow-acts, .more-on .more, .me-pic, .me-shade, .rd-cells, .play, .fs-saved, .fs-shared .btn, .tape-pick, .gloss-find, .pagination, .bell, .gate, .cmp-form { display: none !important; }
	.main-event { min-height: 0; }
	.badge, .edge-tag, .tag-red, .res-how, .tape-table td.edge { border: 1px solid #000000; }
	.tape-table td.edge { font-weight: 700; }
	.fcard, .otd, .correction, .tool, .wc, .fight { border: 1px solid #000000; }
	body { background: #FFFFFF !important; color: #000000; padding: 0 !important; }
	a { color: #000000; }
	.story-head h1, .list-head h1, .fighter-head h1 { color: #000000; }
	.list-head { background: none; border: 0; padding: 0 0 12px; }
	.dek, .story-text, .frow-result, .frow-meta, .frow-basis, .stats dd, .stats dt, .guide-table td, .gloss dd, .fs-table th, .fs-table td, .fs-verdict, .list-desc, .mono { color: #000000 !important; }
	.real-talk, .talk, .more-on, .tape, .live-note, .fs-official, .legend { background: none; border: 1px solid #000000; }
	.story-text .real-talk h2 { color: #000000; }
	.fs-main { grid-template-columns: minmax(0, 1fr); }
	.fs-table tbody th button { border: 0; background: none !important; color: #000000 !important; }
	.fs-table th, .fs-table td, .stats div, .guide-table th, .guide-table td { border-color: #999999; }
}