/* =====================================================================
   Kungfupunk · r8.css — readability pass (23 Oct 2026, Fable, on the owner's iPhone review). Loaded on every page before motion.css.
     1  one step up for every small text on phones (the body was 17px but a third to a half of each page sat at 11–14px)
        and for the small size on desktop;
     2  provenance leaves the reading flow: badges are gone from sentences, a lone mark in a table cell or an
        unconfirmed fact is a plain muted word (.lvw), and every source sits in one collapsed list at the end (.sources);
     3  a Key points block under the page head (.kp): the first three answers of the page, before anything else;
     4  from 1200px the page head hangs its title left and reads its lede and Key points right (owner, 24 Oct).
   Same tokens, no new colour; the bullet of .kp is the steel of the site's metal fittings.
   ===================================================================== */
:root { --fs-small: 15.5px; }
@media (max-width: 760px) {
  :root { --fs-body: 18px; --lh-body: 1.6; --fs-small: 15px; --fs-table: 16px; --fs-lede: 21px; --lh-lede: 1.42; }
  .crumbs, .byline, .hero__copy .byline { font-size: 14.5px; }
  .eyebrow, .hero__copy .eyebrow { font-size: 13px; }
  thead th, .short thead th, .facts th { font-size: 13px; }
  .data td::before { font-size: 12px; }
  .fr__cap { font-size: 16px; }
  .fr__cr, .r4c-credit, .yt__note, .r4c-how, .r4c-back { font-size: 14px; }
  .n__k { font-size: 12px; }
  .fr__tv, .fr__tc { font-size: 15px; }
  .tells li { font-size: 17px; }
  .tells b, .r4c-kick, .r6-kick, .r4-k, .r6-plate__k, .r4c-sec h2 .r4c-h__tc, .reel__src b, .kp__k, .bx__kick, .dossier__kicker, .bx__capk, .bx--page .bx__capk, .rz__k, .bx--page .rz__k, .nmsec .rz__k { font-size: 12.5px; }
  .r6-plate__s, .unlock__zones li, .home-dial .unlock__zones li, .hz .unlock__zones li, .yt__len, .reel__src small, .reel__legend, .r6-week__legend, .r4-66__legend, .r6-t__r, .hw__n, .tl__when, .rz, .nb__was, .seal-cap, .bx__cap, .bx--trio .bx__cap, .stx__n, .r4-bar__n, .hz__cap, .qr__cap, .cb__caps, .ix__list .ix__c, .tl__cap, .mt__src, .mt__h, .up-legend { font-size: 14.5px; }
  .site-foot, .site-foot .foot-legal, .site-foot .foot-checked, .site-foot .foot-copy, .foot-bosses, .foot-index .foot-bosses a, .foot-tag { font-size: 14.5px; }
  .foot-index a, .rail-box { font-size: 15.5px; }
  .bx__key .src, .bx__d, .bxs__n, .stx, .bx__more > summary, details.more > summary, .ibx__rows dt, .ibx__rows dd, .cred, .ibx__rows dd .cred, table.names td.nm-level, table.names td.nm-src, .hf__l li, .hf__more, .mv__i, .ck__i, .pm li, .wr li, .mv__n, .ck__t, .bx__first, .wf__v, .wf__alt, .tx__ph, .bx__more .phases li, .bx__more .phases b, .qt figcaption, .qt .qt__lead, .soft-line, .toc .sub a { font-size: 15.5px; }
  .countdown small, .home-dial .countdown small, .r4-unlock .countdown small, .hp__unlock .countdown small { font-size: 12px; }
  .unlock__label, .hp__unlock .unlock__label, .intro__k, .r4-axis, .unlit-note, .nav-panel__k, .nav-menu__k, .site-foot .foot-group__k, .toc-title { font-size: 12.5px; }
  .hero__credit, .intro__credit, .pv__cat, .cb__n small, .intro__cell small { font-size: 12px; }
  .nav-menu > summary { font-size: 14px; }
  .tg, .tg span, .tg__our { font-size: 13.5px; }
  .bx__att, .bx--page .bx__att, .bx__att a { font-size: 14px; }
  .nw, .bx__kick, .kc, .bx__new, .cred__k, .wf__k, .bx__capk { font-size: 13.5px; }
  .bx__capv, .bx__cap, figcaption.bx__cap, .rz, .bxs__p, .bx__d, .fb__live, .qr__cap, .cb__caps li, .hw__n, .hw__src, .hz__cap, .plate__credit, .r4-go, .mt__b, .mt__n, .stx__n, .wx__cls, .r4c-how, .fr__cr, .yt__note, .cred__e, .hw__key li, .ix__h { font-size: 15px; }
  .bxs__p { font-size: 16px; }
  .era__n { font-size: 12.5px; }
  /* loop round 1 (24 Oct): the card pages (bosses, weapons, characters) keep their labels at 14, their card text at 15.5 */
  .nw, .bx__kick, .kc, .bx__new, .cred__k, .wf__k, .bx__capk, .bx--page .bx__capk, .tg__at, .tg__our, .bx__att, .bx--page .bx__att, .bx__att a, .rz__k, .bx--page .rz__k, .nmsec .rz__k { font-size: 14px; }
  .bx__d, .bx__cap, figcaption.bx__cap, .bx--trio .bx__cap, .bx__capv, .rz, .nb__was, .stx, .mv__i, .ck__i, .pm li, .wr li, .hf__l li { font-size: 15.5px; }
  .bx__first, .bx__key { font-size: var(--fs-body); }
}
.lvw { color: var(--ink-3); font-size: .9em; letter-spacing: .02em; }
.sources { margin: 44px 0 0; border-top: 1px solid var(--rule); max-width: var(--measure); }
.sources summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 12px 0; font: 600 12.5px/1.4 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.sources summary::-webkit-details-marker { display: none; }
.sources summary::after { content: "+"; margin-left: auto; color: var(--red-text); font-size: 22px; line-height: 1; }
.sources[open] summary::after { content: "−"; }
.sources summary small { color: var(--ink-4); font-size: inherit; letter-spacing: inherit; font-weight: 500; }
.sources ol { margin: 0 0 20px; padding: 0 0 0 1.4em; max-width: none; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); }
.sources li { margin: 0 0 10px; }
.sources li b { display: block; font-weight: 500; font-size: .92em; color: var(--ink-4); }
.sources .lv { margin-right: 4px; }
.sources a { color: var(--ink-3); }
.sources a:hover { color: var(--ink); }
.kp { margin: 0 0 30px; padding: 14px 0 6px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule-soft); max-width: var(--measure); }
.kp__k { margin: 0 0 10px; font: 600 12px/1.4 var(--serif); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.kp ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.kp li { position: relative; margin: 0 0 9px; padding-left: 20px; font-size: var(--fs-body); line-height: 1.5; color: var(--ink); }
.kp__q { display: block; font-weight: 600; color: var(--white); }
.kp li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 2px; background: var(--steel); }
.r4c .page-head > .kp, .page-head > .kp, .page-head + .kp { margin-top: 0; }
.seo .page-head > .kp { margin-top: 26px; } /* .seo .page-head had margin-bottom 26 below the block; now the block is inside, the same 26 (collapsing with the byline's 20 / 30) keeps the phone and tablet spacing */

/* ---------- 4  the page head hangs its title left (24 Oct 2026, owner: "desktop: title left, content right") ----------
   From 1200px, where the sections already hang their H2 in a left column, the page head does the same: kicker, H1 and
   byline float in a left column (--head-hang), the lede, answer lines and Key points read in the right column.
   Floats + clear, not grid, for the reasons given in style.css: two independent columns, and every vertical margin keeps
   collapsing as before. The Key points block (.kp) now sits inside header.page-head (last child) so the header's
   flow-root contains both columns and the right column runs on without a gap under a tall title. The header takes over
   the bottom margin its last child used to give (30 / 16 / 15), so the distance to the next block is unchanged. */
@media (min-width: 1200px) {
  :root { --head-hang: 18rem; --fs-h1-hang: 44px; --fs-lede-hang: 21px; --lede-pad: 16px; }
  .main .page-head:has(> :is(.lede, .sb-answer)) { display: flow-root; margin-bottom: 30px; }
  .main .page-head:has(> :is(.lede, .sb-answer)):has(> .lede-more:last-child) { margin-bottom: 16px; }
  .main .page-head:has(> :is(.lede, .sb-answer)):has(> :is(.lede, .see-also, .sb-answer-src, .r4-after-qa):last-child) { margin-bottom: 15px; }
  .main .page-head:has(> :is(.lede, .sb-answer)) > :is(h1, .byline, .see-also) { float: left; clear: left; width: var(--head-hang); margin-left: 0; margin-right: 0; }
  .main .page-head:has(> :is(.lede, .sb-answer)) > h1 { font-size: var(--fs-h1-hang); line-height: 1.04; max-width: none; margin-top: 0; margin-bottom: 0; }
  .main .page-head:has(> :is(.lede, .sb-answer)) > .byline { margin-top: 18px; margin-bottom: 0; }
  .main .page-head:has(> :is(.lede, .sb-answer)):has(> .kp) > .byline { margin-top: 21px; } /* a float lands after the lede's margin box (604+15), the Key points block after the collapsed margin (604+22) plus 14px padding: 21px puts the byline's line on the KEY POINTS label's line */
  .main .page-head:has(> :is(.lede, .sb-answer)) > .see-also { margin-top: 14px; margin-bottom: 0; }
  .main .page-head:has(> :is(.lede, .sb-answer)):has(> nav.rs) > .byline { float: none; clear: none; width: auto; margin: 0; } /* characters: the byline follows the full-width name index */
  .main .page-head:has(> :is(.lede, .sb-answer)) > :not(h1, .crumbs, .eyebrow, .r4c-kick, .r6-kick, .byline, .see-also, nav.rs) { clear: none; margin-left: calc(var(--head-hang) + 32px); max-width: none; }
  .main .page-head:has(> :is(.lede, .sb-answer)) > nav.rs { clear: left; margin-left: 0; padding-top: 18px; } /* characters: the name index is data, so it takes the full width under both columns (review, 24 Oct) */
  .main .page-head:has(> :is(.lede, .sb-answer)) > :is(.lede, .sb-answer) { margin-top: 0; padding-top: var(--lede-pad); font-size: var(--fs-lede-hang); line-height: 1.4; } /* first baseline on the H1's first baseline (measured) */
  .main .page-head:has(> :is(.lede, .sb-answer)) > .kp { margin-top: 22px; }
  .main .page-head:has(> :is(.lede, .sb-answer)) > :last-child:not(.byline, .see-also) { margin-bottom: 0; }
}
@media (min-width: 1440px) { :root { --head-hang: 20rem; --fs-h1-hang: 48px; --fs-lede-hang: 22px; --lede-pad: 18px; } }
/* a page head that now contains the Key points keeps the spacing it had when the block sat between head and first section (review, 24 Oct): the section's own beat, not the 59px "head meets section" rule */
.page-head:has(> .kp) + section > h2:first-child { margin-top: var(--h2-top); }
@media (min-width: 1200px) { .page-head:has(> .kp) + section:has(> h2:first-child):not(.lg, .hf, .bx, .no-hang) { margin-top: var(--h2-top); } }
.bx__key .lvw { margin-left: .4em; } /* the word unconfirmed no longer touches the full stop */
@media (max-width: 1199px) { .page-head:has(> .kp) > .byline:last-child { margin-bottom: 30px; } } /* bosses, weapons (owner, 24 Oct): Key points moved above the tally and the index, so the byline closes the head with the 30px the block used to give */

/* bosses directory on phones (24 Oct, review): the block seal is drawn 1.48x its layout box (a transform), so at the right edge of a card it ran 20–28px past the screen; it keeps a margin equal to that overhang */
@media (max-width: 760px) {
  .bx__title > .sl--stamp { flex: 0 0 auto; margin-right: 28px; }
  .bx__title > .bx__h { min-width: 0; flex: 1 1 auto; }
}