/* Hallmark · shape: front page (Index-First, swapped from drawn Photographic, no on-subject library photos) · genre: editorial · theme: Newsprint (deal 3/3, seed fighter-top-d009·82e3f0cb·2026-10-30·r0), by request of "newspaper brutal": white and blood colours, a condensed caps display, heavy rules, a blood lead picture · job: listen · draw: ce6aac
 * hero: Index · nav: masthead, a red-top flag (swapped from floating pill) · footer: colophon block · imagery: generated test stills 7, mono, the lead in blood · signature: the fight bill, names at poster size on a blood field above the tale of the tape
 * axes: light/condensed-sans/red · posture: full-palette (paper, blood field, ink) · contrast: pass · fold: pass · v2.0.0
 * hero-review: fix · 5 findings · 5 resolved · finish-review: subagent · 8 findings · 8 resolved · gap: none */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R3 V5 · weakest: R, the blood lead picture and the blood band compete; the band sits a full screen below and the rest of the page stays white with mono pictures */
/* Hallmark · waive 49b · the wrapping links are news headlines in the feed and the rubrics, two or three lines each · a fighter.top headline is a whole sentence and cannot shorten to one line on a phone */
/* Hallmark · waive 75 · the flagged lines are news headlines in the feed set in the display face, two or three lines each, not running text · a looser leading would push fighter.top's five stories and the lead's action below the first screen */
/* Hallmark · waive 2b · the gradient text is the two-letter chrome VS on the fighter.top bill, asked for as a 90s fighting-game title, a graphic mark and not a heading accent · its white and red bands sit on an ink extrude, so it stays legible */
/* Hallmark · waive 59 · front page sections sit 64 to 104px apart with a rule or a tinted band between them, and the bill's blood field parts it from the lead · the owner rejected the larger empty gaps on fighter.top as dead space, and a news front page reads as one continuous sheet */
/* Hallmark · dismissed 23 · Стрічка and Аналітика heads carry the blood as the second press ink, an idea of the page rather than sprawl */
/* Hallmark · waive 72 · a.flag has no left padding inside its own box, the red runs on to the viewport edge through ::before · the fighter.top wordmark must line up with the headline under it */
/* Hallmark · waive 44c · rubrics, articles and pages open with a short head and the list or text straight after it · on fighter.top these are reading templates, the full-screen hero belongs only to the front page */
/* Hallmark · waive 79 · the space under a short rubric head on boks and kalendar is the list that follows, measured empty by the hero rule · these fighter.top templates have no hero to fill */
/* Hallmark · waive 77 · the thin section on a fight page is its side column of upcoming bouts beside the description · fighter.top fight pages are reference cards with a short body, not landing pages */
/* Hallmark · answered F25 · the words a phone does not show at once sit behind the Бокс and ММА switch on fighter.top, one tap away, so nothing is lost */
/* Hallmark · answered F15 · columns parted by a rule on fighter.top take more air than columns without one, so the gap follows the rule */
/* Hallmark · answered F4 · the footer sits on ink, so its button is the inverse of the same control, not a second recipe */

/*
Theme Name: FIGHTER.TOP
Theme URI: https://fighter.top
Description: Новинна й аналітична тема про бокс та ММА. Біла шпальта, кривава друга фарба, афіша бою.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: fighter-top
*/

/* Загальне */
html { scroll-padding-top: calc(var(--header-h) + var(--space-md)); }
body { font-size: var(--text-md); }
h1, h2, h3 { text-wrap: balance; }
h1, h2 { text-transform: uppercase; line-height: 1.08; font-kerning: none; letter-spacing: 0.008em; }
h1 { max-width: none; }
h2 { max-width: none; }
h3 { max-width: none; line-height: 1.08; }
h1 a, h2 a, h3 a { color: inherit; text-decoration: none; }
h1 a:hover, h2 a:hover, h3 a:hover { color: var(--color-accent); }
h1 a:focus-visible, h2 a:focus-visible, h3 a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
ol, ul { margin: 0; padding: 0; list-style: none; }
.lead { color: var(--color-ink-2); }
.agate { font-family: var(--font-outlier); font-weight: 500; font-variant-numeric: tabular-nums; }
.link { white-space: nowrap; color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; font-weight: 500; }
.link:hover { text-decoration-thickness: 2px; }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
::selection { background: var(--color-field); color: var(--color-field-ink); }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

.meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); margin-top: var(--space-xs); font-size: var(--text-sm); font-weight: 500; line-height: 1.4; color: var(--color-muted); }
.meta a { color: var(--color-accent); text-decoration: none; }
.meta a:hover { text-decoration: underline; }
.meta a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: 0; background: var(--color-ink); color: var(--color-paper); font: 800 var(--text-xl)/1 var(--font-display); letter-spacing: 0; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--rule { background: transparent; color: var(--color-field-ink); border-block: 2px solid var(--color-field-ink); }
.btn--rule:hover { background: var(--color-field-ink); color: var(--color-field); }
.btn--rule:focus-visible { outline-color: var(--color-field-ink); }
.btn--paper { background: var(--color-night-ink); color: var(--color-ink); }
.btn--paper:hover { background: var(--color-field); color: var(--color-field-ink); }
.btn--paper:focus-visible { outline-color: var(--color-night-ink); }

/* Шапка: червона плашка таблоїда */
.admin-bar { --bar-h: var(--wp-admin--admin-bar--height, 32px); }
.masthead { position: sticky; top: var(--bar-h, 0px); z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-heavy) solid var(--color-ink); }
.masthead__in { display: flex; align-items: stretch; gap: var(--space-xl); min-height: var(--header-h); }
.flag, .nav__list a, .btn, .bill__when, .colophon__word { font-kerning: none; }
.flag { position: relative; display: flex; align-items: center; padding-inline: 0 var(--space-lg); background: var(--color-field); color: var(--color-field-ink); font: 800 3.5rem/1 var(--font-display); letter-spacing: -0.005em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.flag::before { content: ""; position: absolute; inset-block: 0; right: 100%; width: 50vw; background: var(--color-field); }
.flag:hover { background: var(--color-field-2); }
.flag:hover::before { background: var(--color-field-2); }
.flag:focus-visible { outline: 2px solid var(--color-field-ink); outline-offset: -5px; }
.menu { display: none; }
.nav { display: flex; align-items: center; flex: 1; min-width: 0; }
.nav__list { display: flex; gap: var(--space-lg); }
.nav__list a { display: flex; align-items: center; min-height: 44px; color: var(--color-ink); font: 800 1.625rem/1 var(--font-display); text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.nav__list a:hover { color: var(--color-accent); }
.nav__list a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.nav__list .current-menu-item > a, .nav__list .current-post-ancestor > a, .nav__list .current-menu-parent > a { color: var(--color-accent); }
.masthead__date { align-self: center; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); white-space: nowrap; }
.find { position: relative; align-self: center; }
.find__toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--color-ink); cursor: pointer; list-style: none; }
.find__toggle::-webkit-details-marker { display: none; }
.find__toggle:hover { color: var(--color-accent); }
.find__toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.find__form { position: absolute; top: calc(100% + var(--space-md)); right: 0; display: flex; width: min(26rem, calc(100dvw - 2 * var(--gutter))); gap: var(--space-xs); padding: var(--space-md); background: var(--color-paper); border: 2px solid var(--color-ink); z-index: var(--z-dropdown); }
.find:not([open]) .find__form, .menu:not([open]) .menu__panel { display: none; }
.find__form input, .signup input { flex: 1; min-width: 0; min-height: 48px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: 0; background: var(--color-paper); color: var(--color-ink); outline: 2px solid transparent; outline-offset: -3px; }
.find__form input:focus-visible, .signup input:focus-visible { outline-color: var(--color-focus); }

/* Перша шпальта */
.front__in { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-xl); min-height: min(calc(100dvh - var(--header-h) - var(--rule-heavy) - var(--bill-peek)), 62rem); padding-block: var(--space-lg); }
.lead-story { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }
.lead-story h1 { font-size: var(--text-display); }
.lead-story .plate { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.lead-story .plate__frame { flex: 1; min-height: 200px; }
.lead-story__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); }
.lead-story__foot .lead { max-width: 52ch; }

.plate { margin: 0; }
.plate__hit { position: absolute; inset: 0; z-index: 2; }
.plate__hit:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.plate__frame { aspect-ratio: 3 / 2; }
.plate figcaption { margin-top: var(--space-xs); font-size: var(--text-sm); font-weight: 500; line-height: 1.4; color: var(--color-muted); }
.plate--blood .plate__frame { aspect-ratio: auto; background: var(--color-field); }
.plate--blood .plate__frame > img { object-position: 50% 35%; filter: grayscale(1) contrast(1.35) brightness(1.08); mix-blend-mode: multiply; }
.plate--wide .plate__frame { aspect-ratio: 21 / 9; }

.feed { display: flex; flex-direction: column; min-width: 0; padding-left: var(--space-xl); border-left: 1px solid var(--color-rule); }
.feed__title { font-size: 2.5rem; color: var(--color-accent); }
.feed__list { flex: 1; display: flex; flex-direction: column; justify-content: space-between; margin-top: var(--space-xs); }
.feed__item { padding-block: var(--space-xs); border-top: 1px solid var(--color-rule); }
.feed__item:first-child { border-top: 3px solid var(--color-ink); }
.feed__item h3 { font-size: var(--text-title); text-wrap: pretty; }
/* На комп'ютері стрічка не розтягує перший екран: п'ять новин із мініатюрами вміщуються поруч із головним матеріалом. */
@media (min-width: 60rem) {
  .feed__list .feed__item--photo { grid-template-columns: 72px minmax(0, 1fr); column-gap: var(--space-sm); }
  .feed__list .feed__item--photo .feed__thumb img { width: 72px; height: 72px; }
  .feed__list .feed__item--photo h3 { font-size: clamp(1.1875rem, 0.6vw + 0.8rem, 1.375rem); line-height: 1.15; text-wrap: balance; }
  .feed__list .feed__item--photo .meta { margin-top: var(--space-2xs); }
  .front .front__in .lead-story h1 { font-size: clamp(2.5rem, 4.5vw, 4rem); }
  .lead-story .plate--blood .plate__frame { flex: 1 1 auto; aspect-ratio: 2.4 / 1; }
}
@media (min-width: 60rem) and (min-height: 60rem) {
  .feed__list .feed__item--photo { grid-template-columns: 88px minmax(0, 1fr); }
  .feed__list .feed__item--photo .feed__thumb img { width: 88px; height: 88px; }
  .feed__list .feed__item--photo h3 { font-size: 1.5rem; }
}

/* Афіша */
.bill { background: var(--color-field); color: var(--color-field-ink); }
/* Афіша: смуга з датою, імена на рівних, під кожним його цифри, підписи на центральній осі. Рядки задані тут, бо розмітка однакова для теми й плагіна. */
.bill__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--gap-columns); padding-block: var(--space-xl) var(--space-lg); }
.bill__facts { display: contents; }
.bill__when { grid-row: 1; grid-column: 1; font: 800 clamp(1.75rem, 1.6vw + 1rem, 2.75rem)/1.08 var(--font-display); text-transform: uppercase; overflow-wrap: break-word; }
.bill__stake { display: block; font: 400 var(--text-lead)/1.35 var(--font-body); text-transform: none; }
.bill__when .bill__stake { margin-top: var(--space-xs); }
.bill__facts > .bill__stake { grid-row: 1; grid-column: 2; align-self: end; justify-self: end; max-width: 34ch; text-align: right; }
.bill__names { --vs-size: clamp(7rem, 11vw, 10rem); grid-row: 2; grid-column: 1 / -1; padding-top: var(--space-lg); border-top: var(--rule-heavy) solid var(--color-field-ink); font-size: clamp(4.5rem, 9vw, 7rem); }
.bill__names > a, .bill--page .bill__names { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-sm); align-items: end; }
.bill__names a { color: inherit; }
.bill__names a:hover { color: var(--color-field-ink); }
.bill__names a:hover .bill__name { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 0.08em; }
.bill__names a:focus-visible { outline-color: var(--color-field-ink); }
.bill__names span { display: block; }
.bill__name { position: relative; z-index: 1; letter-spacing: 0.018em; word-spacing: 100em; }
.bill__name--b { text-align: right; }
/* VS як заставка файтингу 90-х: хром із червоним горизонтом, чорний об'єм, промені за літерами. Слово «проти» лишається в розмітці для скринрідерів. */
.bill__vs { position: relative; align-self: center; width: calc(var(--vs-size) * 1.6); height: calc(var(--vs-size) * 1.6); margin: calc(var(--vs-size) * -0.3) calc(var(--vs-size) * -0.2); font-size: 0; background: repeating-conic-gradient(var(--color-ink) 0 7deg, transparent 7deg 22deg); -webkit-mask-image: radial-gradient(closest-side, var(--color-ink) 84%, transparent 100%); mask-image: radial-gradient(closest-side, var(--color-ink) 84%, transparent 100%); }
.bill__vs::before, .bill__vs::after { content: "VS"; content: "VS" / ""; position: absolute; inset: 0; display: grid; place-items: center; font: 800 calc(var(--vs-size) * 0.9)/1 var(--font-display); letter-spacing: -0.01em; text-transform: none; transform: skewX(-12deg) scaleX(1.18); }
.bill__vs::before { color: var(--color-ink); -webkit-text-stroke: 0.1em var(--color-ink); text-shadow: 0.025em 0.025em 0 var(--color-ink), 0.05em 0.05em 0 var(--color-ink), 0.075em 0.075em 0 var(--color-ink), 0.1em 0.1em 0 var(--color-ink), 0.125em 0.125em 0 var(--color-ink); }
.bill__vs::after { color: transparent; background: linear-gradient(180deg, var(--color-field-ink) 22%, var(--color-paper-3) 47%, var(--color-accent) 49%, var(--color-field) 56%, var(--color-field-ink) 76%); -webkit-background-clip: text; background-clip: text; }
.tape { grid-row: 3; grid-column: 1 / -1; width: 100%; table-layout: fixed; border-collapse: collapse; border-bottom: 1px solid var(--color-field-rule); }
.tape thead, .tape thead th, .tape thead td { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tape th, .tape td { padding: var(--space-xs) 0; border-top: 1px solid var(--color-field-rule); text-align: center; font-weight: 500; }
.tape tbody td { font: 800 var(--text-2xl)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.tape td:first-child { text-align: left; }
.tape td:last-child { text-align: right; }
.bill .bill__in .tape tbody th { width: 30%; padding-inline: var(--space-sm); font-size: var(--text-md); white-space: normal; }
/* Єдина дія блоку стоїть на центральній осі під VS і підписами, у ширину колонки підписів. */
.bill .btn { grid-row: 4; grid-column: 1 / -1; justify-self: center; min-width: 30%; min-height: 52px; margin-top: var(--space-xs); background: var(--color-field-ink); color: var(--color-field); border: 0; }
.bill .btn:hover { background: var(--color-ink); color: var(--color-field-ink); }
.bill .bill__choices { grid-row: 5; grid-column: 1 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; margin-top: var(--space-md); border-block: 1px solid var(--color-field-rule); }
.bill .bill__choices a { display: flex; align-items: center; min-height: 48px; padding: var(--space-sm); border: 0; color: inherit; font: 800 1.125rem/1.15 var(--font-display); }
.bill .bill__choices a + a { border-left: 1px solid var(--color-field-rule); }
.bill .bill__choices a:hover { background: var(--color-field-2); }
.bill .bill__choices a[aria-current] { background: var(--color-field-2); box-shadow: inset 0 -4px 0 var(--color-field-ink); text-decoration: none; }
.bill .bill__choices a:focus-visible { outline: 2px solid var(--color-field-ink); outline-offset: 2px; }

/* Бокс і ММА */
.sides { padding-block: var(--section-gap) var(--section-gap-s); }
.sides__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); }
.side { min-width: 0; }
.side + .side { position: relative; }
.side + .side::before { content: ""; position: absolute; inset-block: 0; left: calc(-1 * var(--space-2xl) / 2); border-left: 1px solid var(--color-rule); }
.side h2 { position: relative; padding-bottom: var(--space-md); font-size: var(--text-section); }
.side h2::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--color-ink); transform-origin: left; }
.side__top { margin-top: var(--space-lg); }
.side__top h3 { margin-top: var(--space-md); font-size: var(--text-3xl); }
.side__rows { margin-top: var(--space-lg); }
.side__rows li { padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.side__rows h3 { font-size: var(--text-title); }

/* Аналітика */
.reads { padding-block: var(--section-gap-s) var(--section-gap); }
.reads__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); }
.reads__head .lead { margin-top: var(--space-md); max-width: 30ch; }
.reads__head .plate { margin-top: var(--space-lg); }
.reads__head h2 { font-size: var(--text-section); color: var(--color-accent); }
.reads__list li { padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.reads__list li:first-child { padding-top: 0; border-top: 0; }
.reads__list h3 { font-size: var(--text-2xl); font-size: clamp(2rem, 2vw + 1rem, 3rem); line-height: 1.02; }

/* Кадр тижня */
.frame { padding-bottom: var(--section-gap-l); }
.frame h2 { position: relative; margin-bottom: var(--space-lg); padding-top: var(--space-md); font-size: var(--text-section); }
.frame h2::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--color-ink); transform-origin: left; }
.frame__link { display: block; color: inherit; text-decoration: none; }
.frame__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Рейтинги */
.ranks__head, .dates__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-lg); }
.ranks__head h2 { font-size: var(--text-section); }
.dates__head h2 { font-size: clamp(2rem, 2vw + 1rem, 3rem); color: var(--color-accent); }
.ranks__tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); margin-top: var(--space-xl); }
.ranks__tables figure { margin: 0; }
.ranks__tables .wp-block-table thead, .ranks__tables .wp-block-table tfoot { border: 0; }
.ranks__tables table { width: 100%; border-collapse: collapse; }
.ranks__tables caption { padding-bottom: var(--space-sm); caption-side: top; text-align: left; font: 800 var(--text-title)/1.1 var(--font-display); }
.ranks__tables tr:nth-child(n+6) { display: none; }
.ranks__tables td { padding: var(--space-sm) var(--space-xs) var(--space-sm) 0; border: 0; border-top: 1px solid var(--color-rule); }
.ranks__tables tr:first-child td { border-top: 3px solid var(--color-ink); }
.ranks__tables td:first-child { width: 2.5rem; font: 500 var(--text-md)/1 var(--font-outlier); font-variant-numeric: tabular-nums; color: var(--color-muted); }
.ranks__tables td:nth-child(2) { font: 800 var(--text-title)/1.1 var(--font-display); }
.ranks__tables td:last-child { text-align: right; font: 500 var(--text-md)/1 var(--font-outlier); font-variant-numeric: tabular-nums; }
.ranks__tables tr:first-child td:nth-child(2) { color: var(--color-accent); }

/* Календар */
.dates { padding-block: var(--section-gap) var(--section-gap-l); }
.dates__head { padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
.fights { margin-top: var(--space-xl); }
.fight { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(0, 3fr) minmax(0, 2fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.fight:first-child { border-top: 3px solid var(--color-ink); }
.fight__date { display: flex; align-items: baseline; gap: var(--space-xs); color: var(--color-accent); }
.fight__date b { font: 800 var(--text-section)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.fight__date span { font-size: var(--text-md); font-weight: 500; }
.fight__title { font-size: clamp(2rem, 2vw + 1rem, 3rem); line-height: 1.02; text-transform: none; font-kerning: auto; letter-spacing: var(--tracking-display); }
.fights--page { margin-top: 0; }
.fights--page .fight:first-child { border-top: 0; }
.fight__stake, .fight__where, .fight__weight { font-size: var(--text-md); color: var(--color-ink-2); }
.fight__stake { margin-top: var(--space-2xs); }

/* Футер: чорна частина з навігацією і підпискою, унизу логотип на всю ширину на кривавому полі, як плашка в шапці. */
.colophon { background: var(--color-ink); color: var(--color-night-ink); }
.colophon__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl) var(--gap-columns); padding-block: var(--space-xl) var(--space-lg); }
.colophon__nav { grid-column: 1 / -1; padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-night-rule); }
.colophon__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-lg); }
.colophon__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-night-ink); font: 800 2.75rem/1 var(--font-display); font-kerning: none; text-transform: uppercase; text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.colophon__links a:hover { color: var(--color-night-muted); }
.colophon a:focus-visible { outline: 2px solid var(--color-night-ink); outline-offset: 2px; }
.colophon__about { max-width: 26ch; font-size: clamp(1.5rem, 1vw + 1rem, 2rem); line-height: 1.25; }
.signup label { display: block; margin-bottom: var(--space-xs); font-size: var(--text-md); line-height: 1.3; }
.signup__row { display: flex; gap: var(--space-xs); }
.signup input { border-color: var(--color-night-muted); background: var(--color-ink); color: var(--color-night-ink); caret-color: var(--color-night-ink); }
.signup input:focus-visible { outline-color: var(--color-night-ink); }
.signup input[aria-invalid] { border-color: var(--color-night-ink); }
.signup__help { min-height: 1lh; margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-night-muted); }
.colophon__small { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2xs) var(--space-xl); font-size: var(--text-sm); color: var(--color-night-muted); }
.colophon__mast { overflow: clip; background: var(--color-field); }
.colophon__fit { container-type: inline-size; }
.colophon__word { display: block; color: var(--color-field-ink); font: 800 calc(100cqw / 4.86)/0.92 var(--font-display); text-align: center; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out), transform 900ms var(--ease-out); }
.colophon__word:hover { color: var(--color-paper-3); }
.colophon__word:focus-visible { outline-color: var(--color-field-ink); outline-offset: -4px; }
.js .colophon__mast:not(.is-in) .colophon__word { transform: translateY(62%); }

/* Списки: рубрика, пошук, автор */
.listing { padding-block: var(--space-xl) var(--section-gap); }
.listing__head { padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.listing__head h1 { font-size: var(--text-display); }
.listing__head .lead { margin-top: var(--space-sm); }
/* Шапка зі знаком: велике слово й сталеві рукавички, що стоять на товстій лінії. */
.listing__head--mark { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); padding-bottom: 0; }
.listing__head--mark .listing__title { min-width: 0; padding-bottom: var(--space-md); }
.listing__head--mark h1 { font-size: clamp(4.5rem, 11vw, 10rem); line-height: 1; }
.listing__mark { flex: none; display: block; width: auto; height: clamp(7.5rem, 16vw, 14rem); }
@media (prefers-reduced-motion: no-preference) {
  .listing__mark { animation: mark-punch 460ms var(--ease-in) both; }
}
@keyframes mark-punch { from { opacity: 0; transform: translateX(45%) rotate(5deg); } 40% { opacity: 1; } }
.listing__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl) var(--gap-columns); align-items: start; padding-block: var(--space-xl); }
.listing__top h2 { font-size: clamp(2.5rem, 4vw, 4rem); }
.listing__top .lead { margin-top: var(--space-md); }
.rows__item { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap-columns); padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.rows__item h2 { font-size: clamp(2rem, 2vw + 1rem, 3rem); line-height: 1.02; text-transform: none; font-kerning: auto; letter-spacing: var(--tracking-display); }
.rows__item .lead { margin-top: var(--space-xs); font-size: var(--text-md); }
.rows__item .plate__frame { aspect-ratio: 16 / 9; }
/* Газетна ієрархія на першій сторінці: головний матеріал, два другорядні поруч, далі стрічка з меншими фото. */
@media (min-width: 60rem) {
  .listing > .container:has(> .listing__top) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); }
  .listing > .container:has(> .listing__top) > * { grid-column: 1 / -1; }
  .rows__item { grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); }
  .listing > .container > .listing__top ~ .rows__item:nth-of-type(2):not(:last-of-type), .listing > .container > .listing__top ~ .rows__item:nth-of-type(3) { grid-column: auto; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-md); border-top: 3px solid var(--color-ink); }
  .listing__top ~ .rows__item:nth-of-type(2):not(:last-of-type) .plate, .listing__top ~ .rows__item:nth-of-type(3) .plate { order: -1; }
  .listing__top ~ .rows__item:nth-of-type(2):not(:last-of-type) h2, .listing__top ~ .rows__item:nth-of-type(3) h2 { font-size: clamp(2rem, 1.6vw + 1rem, 2.75rem); }
  .listing__top ~ .rows__item:nth-of-type(4) { margin-top: var(--space-lg); border-top: 3px solid var(--color-ink); }
}
.pager { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 3px solid var(--color-ink); }
.pager .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.pager a, .pager .current { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding-inline: var(--space-sm); font: 800 var(--text-xl)/1 var(--font-display); text-decoration: none; color: var(--color-ink); }
/* WordPress дає посиланню клас next, а .next це секція статті з великим відступом зверху. */
.pager a.next, .pager a.prev { padding-block: 0; }
.pager .current { background: var(--color-ink); color: var(--color-paper); }
.pager a:hover { color: var(--color-accent); }
.pager a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.empty { padding-block: var(--space-2xl); max-width: 60ch; }
.empty .btn { margin-top: var(--space-lg); }
.search-again { display: flex; gap: var(--space-xs); max-width: 36rem; margin-top: var(--space-lg); }
.search-again input { flex: 1; min-width: 0; min-height: 48px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); background: var(--color-paper); color: var(--color-ink); outline: 2px solid transparent; outline-offset: -3px; }
.search-again input:focus-visible { outline-color: var(--color-focus); }

/* Матеріал */
.story { padding-block: var(--space-xl) var(--section-gap); }
.story__head { padding-bottom: var(--space-lg); }
.story__head h1 { font-size: var(--text-story); line-height: 1.12; }
.story__head .lead { margin-top: var(--space-md); max-width: 56ch; font-size: clamp(1.1875rem, 0.4vw + 1rem, 1.375rem); }
.story__head .meta { margin-top: var(--space-md); font-size: var(--text-md); }
.story__lead .plate__frame { aspect-ratio: 16 / 9; }
.story__main { min-width: 0; }
.story__main > .prose { margin-top: var(--space-xl); }
.story__body { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-2xl) var(--space-xl); }
.prose { min-width: 0; font-size: 1.25rem; line-height: 1.65; }
.prose > * + * { margin-top: var(--space-lg); }
.prose--dropcap > p:first-child::first-letter { float: left; padding-right: var(--space-xs); color: var(--color-accent); font: 800 5.2em/0.8 var(--font-display); }
.prose p { max-width: 65ch; }
.prose h2 { margin-top: var(--space-2xl); font-size: var(--text-section); }
.prose h3 { margin-top: var(--space-xl); font-size: var(--text-2xl); }
.prose a { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.prose ul, .prose ol { padding-left: 1.25em; max-width: 65ch; }
.prose ul { list-style: square; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--space-xs); }
.prose ul li::marker, .prose ol li::marker { color: var(--color-accent); }
.prose img { height: auto; }
.prose figure { margin-inline: 0; margin-block: var(--space-xl) 0; }
.prose figcaption, .wp-element-caption { margin-top: var(--space-xs); font-size: var(--text-sm); font-weight: 500; line-height: 1.4; color: var(--color-muted); }
.prose .wp-block-pullquote { padding: var(--space-lg) 0; border-block: var(--rule-heavy) solid var(--color-field); text-align: left; }
.prose .wp-block-pullquote blockquote { margin: 0; }
.prose .wp-block-pullquote p { max-width: none; font: 800 var(--text-section)/1.02 var(--font-display); color: var(--color-accent); }
.prose .wp-block-pullquote cite { display: block; margin-top: var(--space-md); font-size: var(--text-sm); font-style: normal; font-weight: 500; color: var(--color-muted); }
.prose blockquote:not(.wp-block-pullquote blockquote) { margin-inline: 0; padding-left: var(--space-lg); border-left: var(--rule-heavy) solid var(--color-field); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.prose th, .prose td { padding: var(--space-sm) var(--space-xs); border: 0; border-top: 1px solid var(--color-rule); text-align: left; }
.prose .wp-block-table thead { border: 0; }
.prose thead th { border-top: 0; border-bottom: 3px solid var(--color-ink); font: 800 var(--text-title)/1.1 var(--font-display); }
.prose .tape-block td, .prose .tape-block th { text-align: center; }
.prose .tape-block td:first-child, .prose .tape-block th:first-child { text-align: left; font-family: var(--font-outlier); font-weight: 500; font-variant-numeric: tabular-nums; }
.prose .tape-block td:last-child, .prose .tape-block th:last-child { text-align: right; font-family: var(--font-outlier); font-weight: 500; font-variant-numeric: tabular-nums; }
.prose .tape-block thead th, .prose .tape-block thead th:first-child, .prose .tape-block thead th:last-child { font-family: var(--font-display); font-weight: 800; }
.story__rail { min-width: 0; padding-left: var(--space-xl); border-left: 1px solid var(--color-rule); }
.story__sticky { position: sticky; top: calc(var(--header-h) + var(--space-xl) + var(--bar-h, 0px)); }
.story__rail .feed__list { margin-top: var(--space-sm); }
.story__tags { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); font-weight: 500; }
.story__tags a { color: var(--color-accent); }
.story__tags a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.next { padding-block: var(--space-2xl) 0; }
.next h2 { padding-top: var(--space-sm); border-top: var(--rule-heavy) solid var(--color-ink); font-size: var(--text-section); }
.next__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-lg); }
.next__list h3 { margin-top: var(--space-sm); font-size: var(--text-2xl); }

/* Сторінки */
.page-body { padding-block: var(--space-xl) var(--section-gap); }
.page-body__head { padding-bottom: var(--space-lg); margin-bottom: var(--space-xl); border-bottom: var(--rule-heavy) solid var(--color-ink); }
.page-body__head h1 { font-size: var(--text-display); }
/* Редакція: червоне поле з назвою й підводкою, текст колонками, знизу три рубрики зі сталевими знаками. */
.about__band { padding-block: var(--space-2xl) var(--space-xl); background: var(--color-field); color: var(--color-field-ink); }
.about__band h1 { font-size: clamp(4.5rem, 14vw, 13rem); line-height: 0.95; }
.about__lede { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule-heavy) solid var(--color-field-ink); }
.about__lede p { margin: 0; max-width: 36em; font: 400 clamp(1.375rem, 1vw + 1.1rem, 1.953rem)/1.35 var(--font-body); }
.about__lede a { color: inherit; text-decoration: underline; }
.about__lede a:focus-visible { outline: 2px solid var(--color-field-ink); outline-offset: 2px; }
.about__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl); padding-block: var(--space-2xl); font-size: var(--text-md); }
.about__cols > * + * { position: relative; margin-top: 0; }
.about__cols > * + *::before { content: ""; position: absolute; inset-block: 0; left: calc(-1 * var(--space-2xl) / 2); border-left: 1px solid var(--color-rule); }
.about__go { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--space-2xl); border-block: 3px solid var(--color-ink); }
.about__go a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg); color: var(--color-ink); font: 800 3rem/1 var(--font-display); text-transform: uppercase; text-decoration: none; }
.about__go a:first-child { padding-left: 0; }
.about__go a:last-child { padding-right: 0; }
.about__go a + a { border-left: 1px solid var(--color-rule); }
.about__go a:hover { color: var(--color-accent); }
.about__go a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.about__go img { flex: none; width: auto; height: 7.5rem; animation: none; }
.page-ranks .prose { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); font-size: var(--text-md); }
.page-ranks .prose > p { grid-column: 1 / -1; font-size: var(--text-lead); }
.page-ranks .prose > * + * { margin-top: 0; }
.page-ranks .wp-block-table { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.page-ranks .wp-block-table figcaption, .ranks__tables figcaption { margin: 0 0 var(--space-sm); font: 800 var(--text-title)/1.1 var(--font-display); color: var(--color-ink); }
.page-ranks td:first-child { width: 2.5rem; font-family: var(--font-outlier); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--color-muted); }
.page-ranks td:nth-child(2) { font: 800 var(--text-title)/1.1 var(--font-display); }
.page-ranks td:last-child { text-align: right; font-family: var(--font-outlier); font-weight: 500; font-variant-numeric: tabular-nums; }
.page-ranks tr:first-child td { border-top: 3px solid var(--color-ink); }
.ranks__tables figure { display: flex; flex-direction: column-reverse; justify-content: flex-end; overflow: visible; }
.page-ranks .wp-block-table { overflow: visible; }
.ranks__tables figure, .page-ranks .wp-block-table { min-width: 0; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes menu-out { to { opacity: 0; transform: translateY(-16px); } }

/* Календар і бій */
/* Вкладки календаря стоять одразу під заголовком, без лінії між ними: активна залита чорним. */
.post-type-archive-fight .listing__head--mark { border-bottom: 0; }
.listing__bar { margin-top: var(--space-sm); margin-bottom: var(--space-xl); border-bottom: 1px solid var(--color-rule); }
.switch { display: flex; }
.switch a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding-inline: var(--space-lg); font: 800 var(--text-xl)/1 var(--font-display); color: var(--color-ink); text-decoration: none; }
.switch a:hover { color: var(--color-accent); }
.switch a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.switch a[aria-current] { background: var(--color-ink); color: var(--color-paper); }
/* Розділи календаря будуються як «Стрічка» на головній: заголовок другою фарбою, під ним лінія, далі рядки. */
.listing > .container > section + section { margin-top: var(--space-2xl); }
.listing > .container > section > h2 { font-size: clamp(2rem, 2vw + 1rem, 3rem); color: var(--color-accent); }
.listing__bar + .empty { margin-top: 0; padding-top: 0; }
.fights--page { margin-top: var(--space-xs); border-top: 3px solid var(--color-ink); }
.fights--page .fight .meta { display: none; }
@media (min-width: 60rem) {
  .fights--page .fight { grid-template-columns: 7rem minmax(0, 1fr) 13rem 11rem; gap: var(--space-md); padding-block: var(--space-md); }
  .fights--page .fight__date b { font-size: 2.75rem; }
  .fights--page .fight__title { font-size: clamp(1.625rem, 1vw + 1rem, 2.25rem); }
  .fights--page .fight__where, .fights--page .fight__weight { font-size: var(--text-sm); color: var(--color-muted); }
  .fights--page .fight__weight { text-align: right; }
}
.bill--page .bill__in { padding-block: var(--space-3xl); }
.fight-body { padding-block: var(--section-gap-s) var(--section-gap); }
.fight-body__in { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-3xl); }

/* Коментарі */
.comments { margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: var(--rule-heavy) solid var(--color-ink); }
.comments h2 { font-size: var(--text-section); }
.comment-list { margin-top: var(--space-lg); }
.comment-list li { padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.comment-form { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.comment-form label { display: block; margin-bottom: var(--space-2xs); font-weight: 500; }
.comment-form input:not([type="submit"]):not([type="checkbox"]), .comment-form textarea { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-muted); background: var(--color-paper); color: var(--color-ink); outline: 2px solid transparent; outline-offset: -3px; }
.comment-form input:focus-visible, .comment-form textarea:focus-visible { outline-color: var(--color-focus); }
.comment-form [type="submit"] { min-height: 48px; padding: 0 var(--space-lg); border: 0; background: var(--color-ink); color: var(--color-paper); font: 800 var(--text-xl)/1 var(--font-display); cursor: pointer; }
.comment-form [type="submit"]:hover { background: var(--color-accent); }
.comment-form [type="submit"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Перемикач рубрик: лише на вузьких екранах і лише з JavaScript */
.tabs { display: none; }
.tabs__btn { position: relative; flex: 1; min-height: 56px; padding: 0; border: 0; background: none; color: var(--color-muted); font: 800 var(--text-section)/1 var(--font-display); font-kerning: none; text-transform: uppercase; cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.tabs__btn::after { content: ""; position: absolute; inset: auto 0 0; height: var(--rule-heavy); background: var(--color-field); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-short) var(--ease-out); }
.tabs__btn[aria-pressed="true"] { color: var(--color-ink); }
.tabs__btn[aria-pressed="true"]::after { transform: scaleX(1); }
.tabs__btn:hover { color: var(--color-ink); }
.tabs__btn:active { transform: translateY(1px); }
.tabs__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Прогрес читання */
.progress { position: absolute; inset: auto 0 calc(-1 * var(--rule-heavy)); height: var(--rule-heavy); background: var(--color-field); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* Рух. Усе приховане існує лише під .js, тож без скриптів сторінка повна. */
.masthead { transition: transform var(--dur-short) var(--ease-out); }
.masthead.is-hidden { transform: translateY(-100%); }
.js.is-waiting main, .js.is-waiting .masthead, .js.is-waiting .colophon { opacity: 0; }
.flag { transition: transform var(--dur-long) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.js.is-first:not(.is-ready) .flag { transform: translateX(-105%); }
.w { display: inline-block; overflow: clip; padding-block: 0.12em; margin-block: -0.12em; vertical-align: top; }
.w > span { display: inline-block; transition: transform 620ms var(--ease-out); transition-delay: calc(var(--i, 0) * 45ms); }
.js:not(.is-ready) .w > span { transform: translateY(112%); }
[data-slot] > img, .feed__thumb img { transition: filter var(--dur-long) var(--ease-out); }
.plate--blood .plate__frame { transition: clip-path 800ms var(--ease-out) 120ms, background-color var(--dur-long) var(--ease-out); }
.plate--blood .plate__frame > img { transition: transform 1100ms var(--ease-out), filter var(--dur-long) var(--ease-out); }
/* Оригінальний колір під курсором. Множення на білому тлі дає фото без змін, тому червоне тло просто світлішає до білого. */
@media (hover: hover) and (pointer: fine) {
  [data-slot]:hover > img, .feed__thumb:hover img, .plate--blood .plate__frame:hover > img { filter: none; }
  .plate--blood .plate__frame:hover { background-color: var(--color-photo-clear); }
}
.feed__thumb:focus-visible img { filter: none; }
.js:not(.is-ready) .plate--blood .plate__frame { clip-path: inset(0 100% 0 0); }
.js:not(.is-ready) .plate--blood .plate__frame > img { transform: scale(1.1); }
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-wipe] { clip-path: inset(0 100% 0 0); transition: clip-path 700ms var(--ease-out); }
.js [data-wipe].is-in { clip-path: inset(0); }
.js [data-draw]::after, .js [data-draw]::before { transform: scaleX(0); transition: transform 700ms var(--ease-out); }
.js [data-draw].is-in::after, .js [data-draw].is-in::before { transform: scaleX(1); }
.bill__name { transition: transform 420ms var(--ease-in), opacity 160ms linear; }
.bill__vs { transition: transform 300ms cubic-bezier(0.2, 1.7, 0.4, 1) 380ms, opacity 60ms linear 380ms; }
.js .bill:not(.is-in) .bill__name--a { opacity: 0; transform: translateX(-34%); }
.js .bill:not(.is-in) .bill__name--b { opacity: 0; transform: translateX(34%); }
.js .bill:not(.is-in) .bill__vs { opacity: 0; transform: scale(2.6) rotate(-8deg); }
.js .bill.is-in .bill__names { animation: bill-hit 320ms linear 420ms; }
@keyframes bill-hit { 15% { transform: translate(-6px, 4px); } 35% { transform: translate(5px, -3px); } 60% { transform: translate(-3px, 2px); } }
/* Перемикання боїв: старий кард коротко йде, новий сходиться, цифри з'являються рядок за рядком. */
.bill.is-leaving .bill__name, .bill.is-leaving .bill__vs { transition: transform 180ms var(--ease-in), opacity 180ms linear; }
.bill.is-switching .bill__facts > :not(.tape), .bill.is-switching .tape tbody tr { transition: opacity 260ms linear 480ms; transition-delay: calc(480ms + var(--i, 0) * 60ms); }
.js .bill.is-switching:not(.is-in) .bill__facts > :not(.tape), .js .bill.is-switching:not(.is-in) .tape tbody tr { opacity: 0; }
.bill.is-leaving .bill__facts > :not(.tape), .bill.is-leaving .tape tbody tr { transition: opacity 160ms linear; }
@keyframes panel-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .masthead { view-transition-name: masthead; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-short); }
  .find[open] .find__form { animation: drop-in var(--dur-short) var(--ease-out); }
}

/* Вузькі екрани */
@media (max-width: 75rem) {
  .about__go a { font-size: 2.25rem; }
  .about__go img { height: 6rem; }
  .bill .bill__choices { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bill .bill__choices a:nth-child(odd) { border-left: 0; }
  .bill .bill__choices a:nth-child(n + 3) { border-top: 1px solid var(--color-field-rule); }
  .colophon__links a { font-size: 2.25rem; }
  .masthead__date { display: none; }
  .nav__list { gap: var(--space-md); }
}
@media (max-width: 60rem) {
  :root { --header-h: 60px; }
  .masthead__in { position: relative; justify-content: space-between; gap: var(--space-2xs); }
  .flag { font-size: clamp(2.25rem, 9.5vw, 2.75rem); padding-right: var(--space-sm); }
  .nav { display: none; }
  .menu { display: block; align-self: center; }
  .menu__toggle { display: flex; align-items: center; min-height: 44px; padding-inline: var(--space-xs); font: 800 var(--text-xl)/1 var(--font-display); cursor: pointer; list-style: none; }
  .menu__toggle::-webkit-details-marker { display: none; }
  .menu__toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .menu__panel { position: fixed; inset: calc(var(--header-h) + var(--rule-heavy)) 0 0; display: flex; flex-direction: column; justify-content: center; padding: var(--space-lg) var(--gutter) var(--space-2xl); overflow-y: auto; overscroll-behavior: contain; background: var(--color-field); color: var(--color-field-ink); z-index: var(--z-dropdown); animation: menu-in 360ms var(--ease-out); }
  .menu.is-closing .menu__panel { animation: menu-out 200ms var(--ease-in) forwards; }
  .menu__panel .nav__list { gap: var(--space-2xs); }
  .menu__panel .nav__list a { min-height: 0; color: var(--color-field-ink); font-size: clamp(3.25rem, 17vw, 6rem); line-height: 1.04; }
  .menu__panel .nav__list a:focus-visible { outline-color: var(--color-field-ink); }
  .menu__panel .nav__list li { animation: panel-in 440ms var(--ease-out) backwards; }
  .menu__panel .nav__list li:nth-child(2) { animation-delay: 50ms; }
  .menu__panel .nav__list li:nth-child(3) { animation-delay: 100ms; }
  .menu__panel .nav__list li:nth-child(4) { animation-delay: 150ms; }
  .menu__panel .nav__list li:nth-child(5) { animation-delay: 200ms; }
  .menu__panel .nav__list li:nth-child(n+6) { animation-delay: 250ms; }
  .find { position: static; margin-left: auto; }
  .find__form { top: 100%; left: 0; right: 0; width: auto; margin-top: var(--rule-heavy); border: 0; border-bottom: var(--rule-heavy) solid var(--color-ink); padding-inline: var(--gutter); }
  .nav__list { flex-direction: column; gap: 0; width: 100%; }
  .nav__list a { font-size: var(--text-2xl); min-height: 52px; }
  .front__in { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: var(--space-2xl); padding-block: var(--space-md) var(--space-2xl); }
  .lead-story { gap: var(--space-sm); }
  .lead-story h1 { font-size: clamp(3rem, 14.5vw, 6rem); }
  .lead-story .plate figcaption, .plate figcaption { font-size: var(--text-xs); }
  .lead-story__foot .btn { width: 100%; }
  .lead-story__foot { margin-top: var(--space-2xs); }
  main .plate:not(.rows__item .plate):not(.next__list .plate) .plate__frame { margin-inline: calc(-1 * var(--gutter)); }
  .feed__title { font-size: var(--text-section); }
  .feed__item { padding-block: var(--space-sm); }
  .feed__item h3 { font-size: 1.625rem; }
  .bill__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-xl) var(--space-lg); }
  .bill__when { grid-row: 1; }
  .bill__facts > .bill__stake { grid-row: 2; grid-column: 1; justify-self: start; text-align: left; }
  .bill__names { grid-row: 3; font-size: clamp(3.5rem, 18vw, 7rem); padding-top: var(--space-md); }
  .bill__names > a, .bill--page .bill__names { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .bill__names { --vs-size: 6.5rem; }
  .bill__vs { justify-self: center; }
  .tape { grid-row: 4; }
  .tape tbody td { font-size: var(--text-xl); }
  .bill .bill__in .tape tbody th { font-size: var(--text-sm); }
  .bill .btn { grid-row: 5; grid-column: 1; justify-self: stretch; }
  .bill .bill__choices { grid-row: 6; grid-template-columns: minmax(0, 1fr); margin-top: var(--space-xs); }
  .bill .bill__choices a + a { border-left: 0; border-top: 1px solid var(--color-field-rule); }
  .js .tabs { display: flex; gap: var(--space-lg); margin-bottom: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
  .js .sides .side > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; }
  .js [data-panel].is-off { display: none; }
  .js [data-panel].is-shown { animation: panel-in var(--dur-long) var(--ease-out); }
  .sides { padding-block: var(--space-2xl); }
  .side__top { margin-top: 0; }
  .side__top h3 { font-size: clamp(2.25rem, 10vw, 3.25rem); line-height: 1.02; }
  .side__rows { margin-top: var(--space-md); }
  .side__rows h3 { font-size: 1.625rem; }
  .reads { padding-block: var(--space-xl) var(--space-2xl); }
  .reads__head .lead { max-width: none; }
  .reads__list li { padding-block: var(--space-md); }
  .reads__list li:first-child { padding-top: var(--space-md); border-top: var(--rule-heavy) solid var(--color-ink); }
  .reads__list h3 { font-size: 1.875rem; }
  .frame { padding-bottom: var(--space-2xl); }
  .frame h2 { margin-bottom: var(--space-md); }
  .ranks__head { flex-direction: row; align-items: baseline; }
  .js .ranks .tabs { margin-top: var(--space-md); margin-bottom: var(--space-md); }
  .js .ranks__tables figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ranks__tables { margin-top: var(--space-lg); }
  .js .ranks__tables { margin-top: 0; }
  .js .ranks__tables tr:first-child td { border-top: 0; }
  .ranks__tables td { padding-block: var(--space-sm); }
  .dates { padding-block: 0 var(--space-2xl); }
  .dates__head { flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-md); }
  .dates__head h2 { font-size: clamp(2.5rem, 12vw, 3.5rem); white-space: nowrap; }
  .fights { margin-top: var(--space-md); }
  .fight { grid-template-columns: 4.25rem minmax(0, 1fr); gap: var(--space-2xs) var(--space-sm); padding-block: var(--space-md); }
  .fight__date { grid-row: 1 / span 3; flex-direction: column; gap: 0; }
  .fight__date b { font-size: 3.25rem; }
  .fight__date span { font-size: var(--text-xs); line-height: 1.2; }
  .fight__title { font-size: 1.875rem; }
  .fight__who, .fight__where, .fight__weight { grid-column: 2; }
  .fight__stake, .fight__where, .fight__weight { font-size: var(--text-sm); line-height: 1.35; }
  .fight__where { color: var(--color-muted); }
  .fight__weight { display: none; }
  .colophon__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-md); }
  .colophon__links a { font-size: 1.953rem; }
  .colophon__links { justify-content: start; }
  .signup__row { flex-wrap: wrap; }
  .signup input { flex-basis: 100%; }
  .signup .btn { flex: 1; }
  .btn:active { transform: scale(0.98); }
  .story { padding-top: var(--space-md); }
  .story__head h1 { font-size: clamp(2.5rem, 11vw, 4rem); }
  .story__head .lead { margin-top: var(--space-sm); }
  .listing { padding-top: var(--space-md); }
  .listing__head h1, .page-body__head h1 { font-size: clamp(3.5rem, 18vw, 6rem); }
  .about__band { padding-block: var(--space-xl) var(--space-lg); }
  .about__band h1 { font-size: clamp(3.5rem, 18vw, 8rem); }
  .about__cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-xl); }
  .about__cols > * + * { padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
  .about__cols > * + *::before { display: none; }
  .about__go { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-xl); }
  .about__go a, .about__go a:first-child, .about__go a:last-child { padding: var(--space-sm) 0; font-size: 2.25rem; }
  .about__go a + a { border-left: 0; border-top: 1px solid var(--color-rule); }
  .about__go img { height: 5.5rem; }
  .listing__head--mark h1 { font-size: clamp(4rem, 20vw, 7rem); }
  .post-type-archive-fight .listing__head--mark h1 { font-size: clamp(3.5rem, 18vw, 6rem); }
  .switch a { flex: 1; padding-inline: var(--space-sm); }
  .category-analityka .listing__head--mark h1 { font-size: clamp(2.25rem, 12vw, 5rem); }
  .listing__top { padding-block: var(--space-lg); }
  .listing__top > div { order: 2; }
  .rows__item { grid-template-columns: minmax(0, 1fr) 7rem; gap: var(--space-sm); padding-block: var(--space-md); }
  .rows__item h2 { font-size: 1.625rem; }
  .rows__item .lead { display: none; }
  .rows__item .plate__frame { aspect-ratio: 1; }
  .next__list h3 { font-size: 1.625rem; }
  .fights--page .fight__weight { display: block; }
  .lead-story .plate__frame { flex: none; min-height: 0; aspect-ratio: 3 / 2; }
  .lead-story__foot { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .feed { padding-left: 0; border-left: 0; }
  .feed__item h3 { text-wrap: balance; }
  .sides__in, .reads__in, .ranks__tables { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .side + .side::before { display: none; }
  .plate--wide .plate__frame { aspect-ratio: 3 / 2; }
  .listing__top, .story__body, .next__list, .fight-body__in, .page-ranks .prose { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .prose { font-size: 1.125rem; }
  .story__rail { padding-left: 0; border-left: 0; }
  .story__sticky { position: static; }
  .colophon__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-xl) var(--space-lg); }
}
@media (min-width: 40rem) and (max-width: 60rem) {
  .lead-story h1 { font-size: clamp(4rem, 10.5vw, 6rem); }
  .lead-story .plate__frame { aspect-ratio: 16 / 9; }
  .lead-story__foot { flex-direction: row; align-items: center; }
  .lead-story__foot .btn { width: auto; flex: none; }
  .bill__names > a, .bill--page .bill__names { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-xs); }
  .bill .btn { justify-self: center; }
  .feed__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap-columns); }
  .feed__item:nth-child(2) { border-top: 3px solid var(--color-ink); }
}
@media (prefers-reduced-motion: reduce) {
  /* base.css дає всьому 0,01 мс переходу; кегль заголовків має мінятися миттєво, бо скрипт його вимірює. */
  [data-fit], [data-fit] *, .bill__names, .bill__names * { transition-property: transform, opacity !important; }
  .btn { transition: none; }
  .masthead, .flag, .colophon__word, .colophon__links a, .w > span, .plate--blood .plate__frame, .plate--blood .plate__frame > img, .tabs__btn, .tabs__btn::after, .bill__name, .bill__vs, .js [data-reveal], .js [data-wipe], .js [data-draw]::after, .js [data-draw]::before { transition: none; }
  .js .colophon__mast:not(.is-in) .colophon__word, .js [data-reveal], .js .bill:not(.is-in) .bill__name--a, .js .bill:not(.is-in) .bill__name--b, .js .bill:not(.is-in) .bill__vs, .js:not(.is-ready) .w > span, .js:not(.is-ready) .plate--blood .plate__frame > img, .js.is-first:not(.is-ready) .flag { opacity: 1; transform: none; }
  .js [data-wipe], .js:not(.is-ready) .plate--blood .plate__frame { clip-path: none; }
  .js .bill.is-in .bill__names { animation: none; }
  .listing__mark { animation: none; }
  .js [data-draw]::after, .js [data-draw]::before { transform: none; }
  .menu__panel, .menu.is-closing .menu__panel, .menu__panel li, .menu.is-closing .menu__panel li, .js [data-panel].is-shown { animation: none; }
}

/* Ритм головної на комп'ютері: сусідні блоки поділяє лінія і рівний відступ, а не порожнє поле. */
@media (min-width: 60rem) {
  .sides { padding-block: var(--space-2xl) var(--space-xl); }
  .reads { padding-block: 0 var(--space-xl); }
  .reads__in { padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
  .frame { padding-bottom: var(--space-2xl); }
  .dates { padding-block: 0 var(--space-3xl); }
}

/* Невисокі екрани ноутбуків: афіша вміщається під шапкою, кнопка переходить у рядок із перемикачем боїв. */
@media (min-width: 60rem) and (max-height: 56.25rem) {
  .bill__in { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md); padding-block: var(--space-lg) var(--space-md); }
  .bill__when { grid-column: 1 / -1; max-width: 60%; }
  .bill__facts > .bill__stake { grid-column: 1 / -1; max-width: 38%; }
  .bill__names { --vs-size: 8.5rem; padding-top: var(--space-md); font-size: clamp(4.5rem, 9vw, 6rem); }
  .bill .bill__in .tape th, .bill .bill__in .tape td { padding-block: var(--space-2xs); }
  .bill .bill__choices { grid-row: 4; grid-column: 1; margin-top: 0; }
  .bill .bill__choices a { padding-inline: var(--space-xs); font-size: 1rem; }
  .bill .btn { grid-row: 4; grid-column: 2; align-self: stretch; justify-self: end; min-width: 8rem; min-height: 48px; margin-top: 0; }
}

@media (max-width: 600px) {
  .admin-bar { --bar-h: 0px; }
}