/* Subpages: /publications/, articles, /index/, and the private one-off pages.
   Loaded after style.css, so it inherits its tokens, fonts, nav and footer. Same
   language as the landing page — black ground, Red Hat Display at scale, hairline
   rules instead of cards — but built for reading and scanning rather than scrolling
   past. The manifesto has its own stylesheet and does not use this one. */

:root {
    --pad: clamp(1.5rem, 5vw, 3rem);
    /* Data colours. Green and red only ever mean good and bad for the fighter; they are kept
       bright enough for text on black (both clear 4.5:1) and are never the only signal: every
       coloured figure also carries a sign or a glyph. */
    --good: oklch(0.82 0.17 152);
    --bad: oklch(0.70 0.19 25);
}

.sr-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

/* ── PAGE FRAME ── */
.pg-inner { max-width: 1180px; margin: 0 auto; }
.pg-inner--read { max-width: 720px; }

.pg-head { padding: clamp(8.5rem, 15vw, 12rem) var(--pad) clamp(3rem, 6vw, 5rem); }
.pg-title {
    font-size: clamp(2.5rem, 9vw, 8rem);
    line-height: 0.95; letter-spacing: -0.02em;
    margin-bottom: 2rem; overflow-wrap: anywhere;
}
.pg-lede {
    font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 500;
    color: var(--t2); line-height: 1.5; letter-spacing: -0.01em;
    max-width: 44ch; text-wrap: balance;
}
.pg-asof { margin-top: 1.5rem; font-size: 0.8rem; color: var(--t3); }

.pg-body { padding: clamp(3rem, 6vw, 5rem) var(--pad); }
.pg-body--rule { border-top: 1px solid var(--border-n); }
.pg-h2 {
    font-size: clamp(2rem, 5vw, 3.75rem);
    line-height: 1; letter-spacing: -0.02em; margin-bottom: 2.5rem;
}
.pg-h2--small { font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: 1.75rem; }
.pg-empty { color: var(--t3); }
.pg-fine { font-size: 0.85rem; color: var(--t3); line-height: 1.8; max-width: 76ch; }
.pg-fine strong { color: var(--t2); }

/* ── ARCHIVE ROWS (also used for "From the archive" on /index/) ── */
.entries { list-style: none; border-top: 1px solid var(--border-d); }
.entry {
    display: grid; grid-template-columns: 9rem 1fr auto;
    gap: 0.5rem 2rem; align-items: baseline;
    padding: 1.75rem 1rem; margin-inline: -1rem;
    border-bottom: 1px solid var(--border-n);
    text-decoration: none;
    transition: background 0.25s;
}
.entry:hover, .entry:focus-visible { background: var(--night-card); outline: none; }
.entry-date { font-size: 0.8rem; color: var(--t3); font-variant-numeric: tabular-nums; }
.entry-main { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.entry-title {
    font-family: 'Red Hat Display', sans-serif; font-weight: 800;
    font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.15; letter-spacing: -0.01em;
    text-wrap: balance;
}
.entry-sum { color: var(--t2); max-width: 62ch; }
.entry-type {
    font-size: 0.65rem; font-weight: 500; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--t3); white-space: nowrap;
}

/* ── ARTICLE ── */
.art-head { padding: clamp(8.5rem, 14vw, 11rem) var(--pad) 3rem; }
.art-meta { font-size: 0.8rem; color: var(--t3); margin-bottom: 1.75rem; }
.art-meta a { color: var(--t2); text-decoration: none; border-bottom: 1px solid var(--border-d); }
.art-meta a:hover { color: var(--bone); border-color: var(--bone); }
.art-title {
    font-size: clamp(2.1rem, 5.5vw, 4rem); line-height: 1.02; letter-spacing: -0.02em;
    margin-bottom: 1.5rem; overflow-wrap: anywhere;
}
.art-dek { font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 500; color: var(--t2); line-height: 1.55; max-width: 50ch; }

.art > .pg-inner { padding: 0 var(--pad); }
.prose { padding-bottom: 1rem; }
.prose > * + * { margin-top: 1.5rem; }
.prose p, .prose li { font-size: 1.05rem; line-height: 1.85; color: var(--t2); max-width: 68ch; text-wrap: pretty; }
.prose h2 {
    font-size: clamp(1.45rem, 2.6vw, 1.9rem); color: var(--bone);
    margin-top: 3.25rem; line-height: 1.15;
}
.prose h3 { font-size: 1.2rem; color: var(--bone); margin-top: 2.5rem; }
.prose strong { color: var(--bone); font-weight: 500; }
.prose a { color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--border-d); transition: border-color 0.2s; }
.prose a:hover { border-color: var(--bone); }
.prose ul, .prose ol { padding-left: 1.5rem; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 1.5rem; }
.prose ul li::before { content: ''; position: absolute; left: 0; top: 0.95em; width: 0.6rem; height: 1px; background: var(--t3); }
.prose li + li { margin-top: 0.6rem; }
.prose blockquote { border-top: 1px solid var(--border-d); padding-top: 1.25rem; margin-block: 2.5rem; }
.prose blockquote p {
    font-family: 'Red Hat Display', sans-serif; font-weight: 800;
    font-size: clamp(1.3rem, 2.6vw, 1.85rem); line-height: 1.3; color: var(--bone);
}
.prose hr { border: none; border-top: 1px solid var(--border-d); margin-block: 3rem; }
.prose code { font-size: 0.9em; background: var(--night-card); padding: 0.1em 0.35em; }
.prose figure { margin-block: 2.5rem; }
.prose img { display: block; width: 100%; height: auto; }

.art-end {
    display: flex; flex-wrap: wrap; gap: 1rem 2.5rem;
    margin: 4.5rem 0 6rem; padding-top: 2rem; border-top: 1px solid var(--border-d);
}
.art-end a {
    font-family: 'Red Hat Display', sans-serif; font-weight: 800; font-size: 1.05rem;
    color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--border-d);
    padding-bottom: 0.15rem; transition: border-color 0.2s;
}
.art-end a:hover { border-color: var(--bone); }

/* ── INDEX: RANKINGS ── */
.pg-head--rankings { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.subtabs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem clamp(1.25rem, 3vw, 2.75rem); margin-bottom: 1.5rem; }
.subtab {
    font-family: 'Red Hat Display', sans-serif; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance;
    font-size: clamp(2rem, 4.6vw, 3.75rem); line-height: 1; margin: 0; padding-bottom: 0.12em;
    color: rgb(98, 98, 98); text-decoration: none; border-bottom: 3px solid transparent;
    transition: color 0.2s;
}
a.subtab:hover, a.subtab:focus-visible { color: rgb(150, 150, 150); outline: none; }
.subtab.is-on { color: #fff; border-bottom-color: #fff; }
.pg-head--rankings .art-meta { margin-bottom: 1.25rem; }
.pg-head--rankings .art-meta a { font-size: 0.85rem; }
.pg-asof a { color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--border-d); }
.pg-asof a:hover { border-color: var(--bone); }
.pg-body--flush { padding-top: clamp(1rem, 2vw, 1.5rem); }

/* In-page shortcuts to each division, so the far ones are one click away. On a phone the list
   alone can run to two wrapped rows before the rankings even start, so it sits behind a
   "Jump to a division" toggle there; on a wider screen the toggle is hidden and the list is
   simply always open (the [open] rules below are what does the showing/hiding, not the
   browser's own summary/details behaviour, so desktop showing it regardless of that attribute
   is just two ordinary CSS rules, nothing hacky). */
.jump-wrap { margin-top: 1.75rem; }
.jump-summary { display: none; }
.jump { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.jump a { font-size: 0.85rem; color: var(--t2); text-decoration: none; border-bottom: 1px solid var(--border-d); transition: color 0.2s, border-color 0.2s; }
.jump a:hover, .jump a:focus-visible { color: var(--bone); border-color: var(--bone); outline: none; }

.rk-div { scroll-margin-top: 5.5rem; }
.rk-div + .rk-div { margin-top: 2.75rem; }
.rk-div-name { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: 1.25rem; }
.rk { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; }
.rk thead th {
    font-size: 0.65rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--t3); padding: 0 1rem 0.9rem 0; border-bottom: 1px solid var(--border-d);
}
.rk tbody th, .rk tbody td {
    padding: 0.62rem 1rem 0.62rem 0; border-bottom: 1px solid var(--border-n); vertical-align: middle;
    font-weight: 300;
}
.rk-rank, col.c-rank { width: 4.5rem; }
col.c-num { width: 7rem; }
col.c-fli { width: 15rem; }
.rk-n {
    font-family: 'Red Hat Display', sans-serif; font-weight: 800;
    font-size: clamp(1.35rem, 2.3vw, 1.9rem); line-height: 1; font-variant-numeric: tabular-nums;
}
.rk-name {
    font-family: 'Red Hat Display', sans-serif; font-weight: 800;
    font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.2;
}
thead .rk-name { font-family: inherit; font-size: 0.65rem; }
.rk-weight {
    display: inline-block; margin-left: 0.6rem; vertical-align: 0.12em; white-space: nowrap;
    font-family: 'DM Sans', sans-serif; font-weight: 300; font-size: 0.78rem; color: var(--t3);
}
/* Rank movement is a plain fact beside the name: an arrow and a number, no colour. The FLI is the only ticker. */
.rk-move {
    display: inline-block; margin-left: 0.6rem; vertical-align: 0.12em; white-space: nowrap;
    font-family: 'DM Sans', sans-serif; font-weight: 400; font-size: 0.75rem; color: var(--t3);
    font-variant-numeric: tabular-nums;
}
.rk-glyph { margin-right: 0.1em; }
.rk-num { font-variant-numeric: tabular-nums; }
.rk-fli { padding-right: 0; position: relative; }
tbody .rk-fli { padding-right: 0; }
.rk-fli-top { display: flex; align-items: baseline; gap: 0.75rem; }
.rk-fli-n { font-variant-numeric: tabular-nums; color: var(--fli-color, #fff); }
/* Sign picks the hue, size (--m, 0 to 1) picks how far it travels from white. */
.fli-pos { --tone: var(--good); --fli-color: var(--good); }
.fli-neg { --tone: var(--bad); --fli-color: var(--bad); }
.fli-zero { --fli-color: #fff; }
@supports (color: color-mix(in oklch, red, blue)) {
    .fli-pos, .fli-neg { --fli-color: color-mix(in oklch, #fff, var(--tone) calc(var(--m) * 100%)); }
}

/* 30-day ticker beside the FLI, with the sparkline in a popover on hover or focus. Kept at about
   two thirds of the FLI figure: both are signed and coloured by sign, and at similar sizes the
   ticker read as a second FLI rather than a note on the first. */
.rk-tickwrap { position: relative; display: inline-block; }
.rk-tick {
    font: inherit; font-size: 0.68rem; font-variant-numeric: tabular-nums; line-height: 1.4;
    background: none; border: 0; padding: 0.1rem 0; color: var(--t2); white-space: nowrap;
}
button.rk-tick { cursor: default; border-bottom: 1px dotted var(--t3); }
.rk-tick--up { color: var(--good); }
.rk-tick--down { color: var(--bad); }
.rk-tick--flat { color: var(--t3); }
.rk-tickwrap--up { color: var(--good); }
.rk-tickwrap--down { color: var(--bad); }
.rk-tickwrap--flat { color: var(--t2); }
.rk-spark {
    position: absolute; z-index: 5; left: 50%; bottom: calc(100% + 0.6rem);
    transform: translate(-50%, 4px);
    display: flex; flex-direction: column; gap: 0.35rem;
    padding: 0.75rem 0.85rem 0.6rem; background: #000; border: 1px solid var(--border-d);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.15s var(--ease), transform 0.15s var(--ease), visibility 0s linear 0.15s;
}
.rk-tickwrap:hover .rk-spark, .rk-tickwrap:focus-within .rk-spark {
    opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s;
}
.rk-tick:focus-visible { outline: 1px solid var(--bone); outline-offset: 3px; }
.rk-spark-cap { font-size: 0.72rem; color: var(--t2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sp { display: block; overflow: visible; }
.sp-line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.sp-end { fill: currentColor; }
.sp-zero { stroke: var(--t3); stroke-width: 1; stroke-dasharray: 2 3; }
@media (prefers-reduced-motion: reduce) { .rk-spark { transition: none; transform: translate(-50%, 0); } }

/* FLI runs -1..+1, so the bar grows from a centre mark: right for positive, left for negative. */
.rk-bar { position: relative; display: block; height: 2px; background: var(--border-d); margin-top: 0.5rem; }
.rk-bar::after { content: ''; position: absolute; left: 50%; top: -3px; width: 1px; height: 8px; background: var(--t3); }
.rk-bar > span { position: absolute; top: 0; height: 100%; }
.rk-bar > .pos { left: 50%; background: var(--fli-color, #fff); }
.rk-bar > .neg { right: 50%; background: var(--fli-color, var(--t3)); }

/* Ranks beyond the top three are collapsed by default behind a checkbox; its label is the
   button, and it comes after the rows so it is always at the bottom of whatever is showing. */
.rk-div { position: relative; }
.rk-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rk-rest { display: none; }
.rk-toggle:checked ~ .rk-rest { display: block; }
.rk-more {
    display: flex; align-items: center; gap: 0.75rem; cursor: pointer; padding: 1rem 0;
    border-bottom: 1px solid var(--border-n);
    font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t2);
    transition: color 0.2s;
}
.rk-more::before { content: '+'; font-size: 1rem; line-height: 1; width: 1rem; }
.rk-toggle:checked ~ .rk-more::before { content: '−'; }
.rk-more:hover { color: var(--bone); }
.rk-toggle:focus-visible ~ .rk-more { outline: 1px solid var(--bone); outline-offset: 2px; color: var(--bone); }
.rk-more-close, .rk-toggle:checked ~ .rk-more .rk-more-open { display: none; }
.rk-toggle:checked ~ .rk-more .rk-more-close { display: inline; }

/* One-line explanations on the column headers, and the pending flag. */
.hint { position: relative; cursor: help; border-bottom: 1px dotted var(--t3); }
.hint-tip {
    position: absolute; z-index: 6; left: 0; bottom: calc(100% + 0.7rem);
    padding: 0.6rem 0.85rem; background: #000; border: 1px solid var(--border-d);
    font-size: 0.85rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.45;
    text-align: left; color: var(--t2); width: max-content; max-width: min(16rem, 70vw);
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s var(--ease);
}
.hint-tip strong { display: block; color: var(--bone); font-weight: 700; }
.hint-desc { display: block; margin-top: 0.3rem; font-size: 0.6rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t3); }
.hint--right .hint-tip, .rk-flag .hint-tip { left: auto; right: 0; }
.hint:hover .hint-tip { opacity: 1; visibility: visible; }
.rk-flag { font-size: 0.85rem; color: var(--t3); font-style: italic; }
@media (prefers-reduced-motion: reduce) { .hint-tip { transition: none; } }

/* ── INDEX: WHAT FLR AND FLI MEAN ── */
.key { padding: clamp(4rem, 9vw, 8rem) var(--pad); margin-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--border-d); }
.key .pg-inner { display: flex; flex-direction: column; gap: clamp(3.5rem, 7vw, 6rem); }
.key-item { display: grid; grid-template-columns: minmax(9rem, 0.5fr) 1.6fr; gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: start; }
.key-name { font-size: clamp(3.5rem, 9vw, 8rem); line-height: 0.9; letter-spacing: -0.02em; }
.key-text { font-size: clamp(1.16rem, 2.08vw, 1.72rem); font-weight: 500; color: var(--t2); line-height: 1.55; letter-spacing: -0.01em; max-width: 44ch; text-wrap: pretty; }
.key-text strong { display: block; color: var(--bone); font-weight: 700; margin-bottom: 0.4rem; }

/* ── INDEX: WINNERS & LOSERS ── */
.wl { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem 5rem; align-items: start; }
.wl-col .pg-h2 { margin-bottom: 0.6rem; }
.wl-rule { font-size: 0.9rem; color: var(--t3); line-height: 1.5; max-width: 40ch; margin-bottom: 1.5rem; }
.wl-list { list-style: none; border-top: 1px solid var(--border-d); }
.wl-row {
    display: grid; grid-template-columns: 1fr auto; column-gap: 1.5rem; align-items: start;
    padding: 1.35rem 0 1.4rem; border-bottom: 1px solid var(--border-n);
}
.wl-row--none { display: block; color: var(--t3); }
.wl-who { display: flex; flex-direction: column; min-width: 0; gap: 0.1rem; }
.wl-name { font-family: 'Red Hat Display', sans-serif; font-weight: 800; font-size: 1.3rem; line-height: 1.25; }
.wl-line { font-size: 0.9rem; color: var(--t2); }
.wl-line--dim { color: var(--t3); font-size: 0.82rem; }
/* The result and the fame are coloured for the fighter: a red loss beside green fame, or a green
   win beside red fame, is the whole point of the page. */
.wl-res { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.78rem; }
.wl-res--won { color: var(--good); }
.wl-res--lost { color: var(--bad); }
.wl-change {
    text-align: right; white-space: nowrap;
    font-family: 'Red Hat Display', sans-serif; font-weight: 800; font-size: 1.5rem; line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.wl-change--winners { color: var(--good); }
.wl-change--losers { color: var(--bad); }
.wl-glyph { font-size: 0.6em; vertical-align: 0.18em; }
/* What similar-sized fighters gained, under the fighter's own change: the reference that makes a
   loser's small gain (or a winner's loss) legible. */
.wl-fig { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; }
.wl-typical { font-size: 0.8rem; color: var(--t3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── PRIVATE PAGES ── */
.pv-flag {
    font-size: 0.65rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--t3); margin-bottom: 1.5rem;
}
.pg-title--name { font-size: clamp(2.5rem, 8vw, 6.5rem); }
.pv-rows { border-top: 1px solid var(--border-d); margin-top: 2rem; }
.prose + div .pv-rows, .pv-rows:first-child { margin-top: 0; }
.pv-row {
    display: grid; grid-template-columns: 1fr 2fr; gap: 0.5rem 3rem;
    padding: 1.1rem 0; border-bottom: 1px solid var(--border-n); align-items: baseline;
}
.pv-row dt { font-size: 0.85rem; color: var(--t3); }
.pv-row dd { color: var(--bone); margin: 0; }
.pv-row a { text-decoration: none; border-bottom: 1px solid var(--border-d); }
.pv-row a:hover { border-color: var(--bone); }
.pv-files { list-style: none; border-top: 1px solid var(--border-d); }
.pv-file {
    display: flex; align-items: baseline; gap: 0.5rem 1.5rem; flex-wrap: wrap;
    padding: 1.25rem 1rem; margin-inline: -1rem;
    border-bottom: 1px solid var(--border-n); text-decoration: none;
    transition: background 0.25s;
}
.pv-file:hover, .pv-file:focus-visible { background: var(--night-card); outline: none; }
.pv-file-label { font-family: 'Red Hat Display', sans-serif; font-weight: 800; font-size: 1.2rem; }
.pv-file-note { color: var(--t3); font-size: 0.85rem; flex: 1; }
.pv-file::after { content: '→'; margin-left: auto; color: var(--t3); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .wl { grid-template-columns: 1fr; gap: 3.5rem; }
    .key-item { grid-template-columns: 1fr; }
    .entry { grid-template-columns: 1fr auto; }
    .entry-date { grid-column: 1 / -1; }
    .entry-main { grid-column: 1; }
    .entry-type { grid-column: 2; grid-row: 2; }
    .pv-row { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* On a phone the row stays a single line — name, weight, move, FLR, FLI together — rather than
   stacking each stat on its own line under the fighter. It is still a real <table>, just a
   tighter one: smaller type and narrower fixed columns (the <colgroup> widths below override the
   desktop ones, and table-layout: fixed, set unconditionally on .rk, is what makes a column
   width stick instead of growing to fit its content). The header stays visible (unlike before)
   so the per-row "FLR"/"FLI" labels aren't needed and don't have to eat into the row's width;
   the collapsed "ranks 4-15" table's own header keeps hiding itself as it already did (.sr-only,
   set in the markup, not by anything here). */
@media (max-width: 700px) {
    .rk-div-name { font-size: 1.3rem; margin-bottom: 0.9rem; }
    .rk thead th { font-size: 0.56rem; letter-spacing: 0.12em; padding: 0 0.35rem 0.5rem 0; }
    .rk tbody th, .rk tbody td { padding: 0.55rem 0.35rem 0.55rem 0; }
    .rk-rank, col.c-rank { width: 1.7rem; }
    .rk-n { font-size: 1rem; }
    /* "Rank" doesn't fit its own 1.7rem-wide header cell at this size (it ran into "Fighter"
       next to it); "#" says the same thing in the space the number itself gets. Scoped to the
       header only — the font-size: 0/::before swap (see .rk-weight below) would otherwise also
       hit .rk-n, the big rank numeral in the body, but that sets its own font-size, so it isn't
       affected either way; this is just about not repeating the same trick with a second target
       by accident. */
    .rk thead .rk-rank { font-size: 0; }
    .rk thead .rk-rank::before { content: '#'; font-size: 0.7rem; }
    col.c-num { width: 3.1rem; }
    col.c-fli { width: 4.5rem; }

    /* Column headers keep their tooltip hover on desktop; on a phone there's no good hover, so
       the label stays but the interaction cue (and the tooltip content, which would otherwise
       just sit there unreachable) goes. Same for the "Pending" flag's tooltip. */
    .rk .hint { border-bottom: none; cursor: default; }
    .rk .hint-tip { display: none; }

    /* Name, weight and move share the row; the name is the only one allowed to give up space
       (min-width: 0 lets a flex child shrink below its content size, which text-overflow needs
       to ever actually trigger instead of just overflowing the row). The flex lives on the inner
       span, not the <td> itself — a table-cell that's told to be a flex container stops acting
       like a table cell (vertical-align: middle, matching the row's height) and just sizes to
       its own content instead, which is what set this cell adrift from the others' baseline. */
    .rk-name { font-size: 0.82rem; }
    .rk-name-row { display: flex; align-items: baseline; gap: 0.3rem; }
    .rk-name-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .rk-weight, .rk-move { flex: none; }
    /* The abbreviation (data-abbr, e.g. "LHW" for "Light Heavyweight") replaces the full division
       name visually — font-size: 0 hides the original text without display: none, which would
       also remove it from the accessibility tree; a screen reader still gets "Light Heavyweight". */
    .rk-weight { font-size: 0; }
    .rk-weight::before { content: attr(data-abbr); font-size: 0.62rem; letter-spacing: 0.03em; }
    .rk-move { font-size: 0.68rem; }

    .rk-num { font-size: 0.74rem; }
    .rk-fli-top { gap: 0.3rem; }
    .rk-fli-n { font-size: 0.74rem; }
    .rk-tick, button.rk-tick { font-size: 0.56rem; }
    /* The bar and the trend's numeric delta are the two things a full-width desktop cell had
       room for and a 4.5rem one does not; the FLI figure and the trend's direction (the glyph)
       still show, the size of the move is a tap/hover on the figure away via its sparkline. */
    .rk-bar { display: none; }
    .rk-tick-delta { display: none; }
    .rk-spark { left: auto; right: -0.5rem; transform: translate(0, 4px); }
    .rk-tickwrap:hover .rk-spark, .rk-tickwrap:focus-within .rk-spark { transform: none; }
}

/* The division jump list, collapsed behind a toggle only below this width (see the base .jump-*
   rules above for why the same markup stays permanently open above it). */
@media (max-width: 700px) {
    .jump-summary {
        display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; list-style: none;
        font-size: 0.78rem; color: var(--t2); padding: 0.7rem 0; border-bottom: 1px solid var(--border-n);
    }
    .jump-summary::-webkit-details-marker { display: none; }
    .jump-summary::before { content: '+'; font-size: 0.95rem; line-height: 1; width: 0.9rem; color: var(--t3); }
    .jump-wrap[open] .jump-summary::before { content: '−'; }
    .jump-wrap[open] .jump-summary { border-bottom-color: var(--border-d); }
    .jump { display: none; padding: 1rem 0 0.25rem; }
    .jump-wrap[open] .jump { display: flex; }
}

@media (max-width: 640px) {
    .entry-title { font-size: 1.3rem; }
}