/* =====================================================================
   Kungfupunk · r2.css — round 2 design system (2026-10-14, staging). Loaded after style.css on pages that use it.
   Colour has two meanings and only two (owner, 14 Oct 2026). Every value is a real pixel of an official media-library
   image (tools/r2/palette.json, sampled by tools/r2/sample-palette.py):
     credibility of a source / a name    official  --c-official  jade    #628e8f  screenshots/006.jpg  (1762, 166)  fills, rules
                                                   --c-official-text  #8bb3b5  screenshots/006.jpg  (1801, 136)  small text (same image, lighter pixel)
                                         press     --c-press     ochre   #d0a36a  screenshots/008.jpg  (782, 662)
                                         ours      --c-ours      stone   #a09d94  screenshots/scene_Paifang.jpg (396, 256)
                                         unknown   no colour: the slash-zero Ø of the official site, in --ink-4
     category of an entry                boss      --c-boss      copper  #da774c  screenshots/tga_5.png (1623, 191)
                                         weapon    --c-weapon    steel   #5a8bb6  screenshots/002.jpg  (664, 73)
                                         character --c-character bone    #dbc8b7  screenshots/char_Leidang.jpg (607, 80)
                                         place     --c-place     moss    #838e6c  screenshots/005.jpg  (1088, 107)
   Credibility always comes with a shape (solid square / hollow square / dashed square / Ø) so it never rests on hue
   alone; category is always a small filled square beside the word. Red stays the seals' and the accents' (style.css 1.4).
   No rounded corners; motion is transform / opacity only and stops under reduced motion.
   ===================================================================== */
:root {
  --c-official: #628e8f; --c-official-rgb: 98, 142, 143; --c-official-text: #8bb3b5;
  --c-press: #d0a36a;    --c-press-rgb: 208, 163, 106;
  --c-ours: #a09d94;     --c-ours-rgb: 160, 157, 148;
  --c-boss: #da774c; --c-weapon: #5a8bb6; --c-character: #dbc8b7; --c-place: #838e6c;
  --torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 1L17 7L33 1L50 7L67 1L83 1L100 1L117 1L133 2L150 9L167 0L183 1L200 1L217 2L233 5L250 2L267 1L283 3L300 2L317 1L333 0L350 4L367 0L383 2L400 4L417 2L433 4L450 1L467 2L483 2L500 3L517 1L533 8L550 1L567 5L583 0L600 0L617 1L633 1L650 1L667 0L683 3L700 3L717 1L733 1L750 2L767 5L783 5L800 0L817 2L833 0L850 0L867 6L883 3L900 9L917 3L933 3L950 3L967 5L983 2L993 0L997 12L987 25L998 38L998 50L998 62L994 75L995 88L998 100L1000 112L999 125L986 138L998 150L989 162L992 175L999 188L998 200L998 212L999 225L996 238L992 250L999 262L1000 275L997 288L999 300L1000 312L996 325L991 338L991 350L999 362L1000 375L997 388L994 400L995 412L999 425L998 438L999 450L993 462L999 475L996 488L997 500L998 512L999 525L998 538L999 550L998 562L998 575L997 588L991 600L999 612L996 625L998 638L999 650L997 662L997 675L998 688L997 700L998 712L997 725L998 738L990 750L999 762L993 775L1000 788L999 800L995 812L993 825L998 838L1000 850L997 862L994 875L997 888L996 900L997 912L995 925L999 938L997 950L992 962L991 975L996 988L1000 986L983 981L967 997L950 987L933 998L917 997L900 997L883 986L867 988L850 999L833 994L817 999L800 1000L783 999L767 994L750 999L733 986L717 993L700 980L683 997L667 995L650 995L633 1000L617 996L600 981L583 997L567 987L550 993L533 979L517 994L500 996L483 993L467 995L450 994L433 999L417 998L400 996L383 990L367 986L350 981L333 996L317 999L300 991L283 993L267 997L250 995L233 994L217 999L200 996L183 987L167 991L150 996L133 990L117 994L100 999L83 995L67 996L50 994L33 992L17 999L10 1000L4 988L3 975L9 962L7 950L2 938L1 925L5 912L4 900L5 888L5 875L9 862L1 850L1 838L5 825L5 812L5 800L1 788L2 775L5 762L8 750L3 738L6 725L5 712L4 700L13 688L0 675L5 662L6 650L9 638L0 625L3 612L4 600L0 588L1 575L8 562L0 550L7 538L1 525L0 512L2 500L6 488L4 475L1 462L4 450L11 438L5 425L9 412L2 400L9 388L3 375L4 362L2 350L4 338L1 325L7 312L4 300L0 288L2 275L13 262L1 250L2 238L3 225L2 212L5 200L0 188L0 175L1 162L2 150L9 138L3 125L0 112L6 100L5 88L5 75L12 62L6 50L2 38L9 25L3 12Z'/%3E%3C/svg%3E");
}

/* ---------- fact-source marks (.lv) take the credibility colours ---------- */
.r2 .lv--official, .r2 a.lv.lv--official, .r2 .src a.lv.lv--official { color: var(--bg); background: var(--c-official); border-color: var(--c-official); }
.r2 .lv--press, .r2 a.lv.lv--press, .r2 .src a.lv.lv--press { color: var(--c-press); border-color: rgba(var(--c-press-rgb), .7); background: transparent; }
.r2 .lv--unconf, .r2 a.lv.lv--unconf, .r2 .src a.lv.lv--unconf { color: var(--c-ours); border-color: rgba(var(--c-ours-rgb), .75); border-style: dashed; background: transparent; }

/* ---------- credibility label: shape + colour + plain words + evidence ---------- */
.cred { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.cred__k { position: relative; padding-left: 15px; font: 600 12px/20px var(--serif); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.cred__k::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; box-sizing: border-box; }
.cred--official .cred__k { color: var(--c-official-text); }
.cred--official .cred__k::before { background: var(--c-official); }
.cred--reported .cred__k { color: var(--c-press); }
.cred--reported .cred__k::before { border: 1.5px solid var(--c-press); }
.cred--ours .cred__k { color: var(--c-ours); }
.cred--ours .cred__k::before { border: 1.5px dashed var(--c-ours); }
.cred--unknown .cred__k { color: var(--ink-4); }
.cred--unknown .cred__k::before { content: "Ø"; width: auto; height: auto; top: -1px; left: 0; font: 400 13px/17px var(--serif); letter-spacing: 0; color: var(--ink-4); }
.cred__e a { color: inherit; text-decoration-color: rgba(var(--white-rgb), .25); }
.cred__e a:hover { color: var(--ink); }
.cred--s { font-size: 13px; }

/* ---------- category: a filled square + the word ---------- */
.kc { display: inline-flex; align-items: center; gap: 7px; }
.kc::before { content: ""; width: 7px; height: 7px; background: currentColor; flex: none; }
.kc--boss { color: var(--c-boss); } .kc--weapon { color: var(--c-weapon); } .kc--character { color: var(--c-character); } .kc--place { color: var(--c-place); }
.dot { display: inline-block; width: 7px; height: 7px; box-sizing: border-box; vertical-align: 1px; font-style: normal; }
.dot--official { background: var(--c-official); }
.dot--reported { border: 1.5px solid var(--c-press); }
.dot--ours { border: 1.5px dashed var(--c-ours); }
.dot--unknown { border: 1px solid rgba(var(--white-rgb), .25); }

/* ---------- seals (SVG files from tools/r2/seals.py; the characters are real text, visually hidden beside them) ---------- */
.sl { display: inline-flex; vertical-align: middle; position: relative; line-height: 0; flex: none; }
.sl img { display: block; height: auto; max-width: none; }
.sl--stamp img { transform: rotate(-2deg); }
.sl--in { vertical-align: -5px; margin: 0 2px; }
.sl--h { margin-right: 14px; vertical-align: -4px; }
.zh-q { font-family: var(--kai); font-weight: 500; color: var(--ink); padding: 0 1px; border-bottom: 1px dotted rgba(var(--white-rgb), .3); }

/* ---------- portraits ---------- */
.pt { display: inline-block; flex: none; object-fit: cover; background: var(--bg-2); vertical-align: middle; }
.pt--seal { display: inline-grid; place-items: center; background: rgba(var(--white-rgb), .035); box-shadow: inset 0 0 0 1px var(--rule-soft); }
.pt--seal img { display: block; }
.pt--mono { display: inline-grid; place-items: center; font: 400 15px/1 var(--serif); color: var(--ink-4); background: rgba(var(--white-rgb), .03); }
.pt--in { width: 1.1em; height: 1.1em; margin-right: .3em; vertical-align: -.16em; }
a.xl { white-space: nowrap; }
.toc .pt--toc { margin: -3px 9px -3px 0; }
.toc .sub a { display: flex; align-items: center; }
.toc .sub a:hover .pt, .toc .sub a.is-active .pt { outline: 1px solid var(--red); outline-offset: 1px; }

/* ---------- freshness strip, tally, legend ---------- */
.fresh { display: flex; flex-wrap: wrap; gap: 4px 0; }
.fresh { gap: 6px 22px; }
.fresh > * { position: relative; }
.fresh > * + *::before { content: ""; position: absolute; left: -12px; top: .62em; width: 3px; height: 3px; background: var(--ink-4); }
@media (max-width: 760px) { .fresh { flex-direction: column; gap: 2px; } .fresh > * + *::before { content: none; } }
.r2 .tally .is-off b { color: var(--c-official-text); }
.lg { margin: 4px 0 24px; padding: 18px 0 16px; border-bottom: 1px solid var(--rule-soft); display: grid; gap: 14px 40px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
.r2 .lg .lg__h { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; font: 600 11px/1.4 var(--serif); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.lg__h::before, .lg__h::after { content: none !important; }
.lg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; max-width: none; }
.lg li { margin: 0; }
.lg__cred .cred { font-size: 14.5px; }
.lg__seal li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; font-size: 14.5px; line-height: 1.4; color: var(--ink-3); }
.lg__seal b { display: block; color: var(--ink); font-weight: 500; }
.lg__seal .lg__s { justify-self: center; display: inline-flex; }
.lg__none { justify-self: center; font: 400 26px/1 var(--serif); color: var(--ink-4); }
@media (max-width: 900px) { .lg { grid-template-columns: minmax(0, 1fr); } }

/* ---------- filter bar (exists only with JavaScript: hidden by default, shown by html.js) ---------- */
.fb { display: none; }
.js .fb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin: 0 0 18px; }
.fb__g { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fb__l { width: 100%; font: 600 10.5px/1.5 var(--serif); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4); }
.fb__b { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 11px; margin: 0; border: 1px solid var(--rule); border-radius: 0; background: transparent; color: var(--ink-2); font: 400 14.5px/1 var(--serif); cursor: pointer; }
.fb__b:hover { border-color: rgba(var(--white-rgb), .45); color: var(--ink); }
.fb__b[aria-pressed="true"] { background: rgba(var(--white-rgb), .9); border-color: rgba(var(--white-rgb), .9); color: var(--bg); }
.fb__b[aria-pressed="true"] .dot--unknown { border-color: rgba(var(--bg-rgb), .5); }
.fb__b:focus-visible { outline: 2px solid var(--red-text); outline-offset: 2px; }
.fb__n { font-size: 12px; color: var(--ink-4); font-variant-numeric: lining-nums tabular-nums; }
.fb__b[aria-pressed="true"] .fb__n { color: rgba(var(--bg-rgb), .6); }
.fb__live { margin: 0 0 0 auto; font-size: 14px; color: var(--ink-3); align-self: flex-end; }
@media (max-width: 760px) { .fb__b { min-height: 44px; } .fb__live { margin: 0; width: 100%; } }

/* ---------- year bands (Wang Shu: a course laid across the page, the year cut large and dim) ---------- */
.era { position: relative; }
.era__band { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 22px; margin: var(--h2-top) 0 26px; padding-top: 14px; border-top: 1px solid var(--rule); }
.era__band::before { content: ""; position: absolute; left: 0; top: -1px; width: 64px; height: 1px; background: var(--red); }
.era__yr { grid-row: 1 / span 2; font: 500 112px/0.8 var(--serif); letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px rgba(var(--white-rgb), .26); font-variant-numeric: lining-nums; }
.r2 .era__band h2 { margin: 0; padding: 0; border: 0; font-size: var(--fs-h2); }
.era__band h2::before, .era__band h2::after { content: none !important; }
.era__n { margin: 4px 0 0; font: 600 11px/1.4 var(--serif); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.folds + .era .era__band, .folds ~ .era:first-of-type .era__band { margin-top: 44px; }
@media (max-width: 760px) { .era__yr { font-size: 64px; } .era__band { column-gap: 14px; } }

/* ---------- table view: portraits beside names ---------- */
.roster .name-cell { gap: 6px 10px; }
.pt--tb { width: 40px; height: 40px; }
.roster .row-src { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 6px; }
.roster .cred--en .cred__k::after { content: " · EN"; color: var(--ink-4); }
.roster .cred--cn .cred__k::after { content: " · CN"; color: var(--ink-4); }

/* ---------- preview card (built by r2.js; never in the HTML) ---------- */
.pv { position: absolute; z-index: 40; width: 320px; max-width: calc(100vw - 2 * var(--gutter)); padding: 14px 16px 12px; background: #0d1112; box-shadow: inset 0 0 0 1px rgba(var(--rule-rgb), .45), 0 18px 40px rgba(var(--black-rgb), .55); color: var(--ink-2); font-size: 14px; line-height: 1.45; pointer-events: auto; }
.pv::before, .pv::after { content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none; }
.pv::before { left: -1px; top: -1px; border-left: 1px solid var(--steel); border-top: 1px solid var(--steel); }
.pv::after { right: -1px; bottom: -1px; border-right: 1px solid var(--steel); border-bottom: 1px solid var(--steel); }
.pv[hidden] { display: none; }
.pv__top { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.pv__p { width: 72px; height: 72px; object-fit: cover; background: var(--bg-2); }
.pv__nm { margin: 0; font: 500 18px/1.2 var(--serif); color: var(--ink); }
.pv__cat { display: block; margin-top: 4px; font: 600 10px/1.4 var(--serif); letter-spacing: .16em; text-transform: uppercase; }
.pv__seal img { display: block; height: 40px; width: auto; transform: rotate(-2deg); }
.pv__st { margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid rgba(var(--rule-rgb), .3); display: grid; gap: 4px; }
.pv__st .cred { font-size: 13px; }
.pv__src { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-3); }
.pv__go { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-size: 14px; color: var(--ink); text-decoration-color: var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .pv { animation: r2-in .18s var(--ease-out) both; }
  .bx .ibx__frame img, .bx__heroimg img { transition: transform .6s var(--ease-out); }
  @media (hover: hover) { .bx:hover .ibx__frame img, .bx--lead:hover .bx__heroimg img { transform: scale(1.03); } }
}
@keyframes r2-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media print { .pv, .fb, .rs { display: none !important; } .bx__more > summary { display: none; } }

/* =====================================================================
   round 2b (owner, 14 Oct evening): cleaner. Each fact once; the frame is the hero of an entry; at most three text sizes
   inside an entry (name / body 17.5 / small 14); rhythm varies: lead (wide frame + at-a-glance panel), side (frame beside
   text, sides alternate), pair and trio (frames on top, in a course), quiet (seal as the image). "Full details" is open on
   desktop (no summary shown) and folded on phones (closed before the first paint by the script at the end of <main>).
   ===================================================================== */
.r2 .hero { height: min(36vh, 23vw); min-height: 220px; }
@media (max-width: 760px) { .r2 .hero { height: 30vh; min-height: 180px; max-height: 240px; } }

/* the whole roster in the first screen */
.rs { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 18px 0 14px; }
.rs__yr { display: grid; gap: 6px; }
.rs__y { font: 600 12px/1 var(--serif); letter-spacing: .14em; color: var(--ink-4); font-variant-numeric: lining-nums; }
.rs__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; max-width: none; }
.rs__list li { margin: 0; }
.rs__list li[hidden] { display: none; }
.rs__a { display: grid; gap: 4px; text-decoration: none; }
.pt--rs { width: 44px; height: 44px; border-bottom: 2px solid var(--c-boss); filter: saturate(.85) brightness(.88); }
.rs__a .pt--seal { width: 44px !important; height: 44px !important; border-bottom: 2px solid var(--c-boss); }
.rs__m { display: flex; gap: 4px; align-items: center; justify-content: center; height: 9px; }
.sm { display: inline-block; width: 7px; height: 7px; box-sizing: border-box; font-style: normal; }
.sm--bai { background: var(--red); }
.sm--zhu { border: 1.5px solid var(--red); }
.sm--none { width: auto; height: auto; font: 400 9px/7px var(--serif); color: var(--ink-4); }
.rs__a:hover .pt--rs, .rs__a:focus-visible .pt--rs { filter: none; }
.rs__a:focus-visible { outline: 2px solid var(--red-text); outline-offset: 2px; }
@media (max-width: 760px) {
  .rs { display: grid; gap: 8px; }
  .rs__yr { grid-template-columns: 36px 1fr; align-items: start; }
  .rs__y { padding-top: 16px; }
  .rs__list { flex-wrap: wrap; gap: 6px; }
  .pt--rs, .rs__a .pt--seal { width: 46px !important; height: 46px !important; }
}

/* entries: three type sizes — name, body, small */
.bx { position: relative; scroll-margin-top: 16px; margin: 0 0 56px; }
.bx[hidden], .bx-row[hidden] { display: none; }
.bx__main { min-width: 0; }
.bx__kick { margin: 0 0 6px; font-size: 14px; line-height: 1.4; color: var(--ink-3); }
.bx__kick .kc { font-weight: 600; }
.bx__new { color: var(--c-official-text); }
.bx__title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.bx__h { margin: 0; font-size: 32px; line-height: 1.1; font-weight: 500; color: var(--ink); }
.bx--lead .bx__h { font-size: 40px; }
.bx--trio .bx__h, .bx--quiet .bx__h { font-size: 26px; }
.sl--stamp img { transform: rotate(-2deg); }
.bx__h--zh { display: flex; align-items: center; gap: 18px; }
.sl--zh img { transform: rotate(-2deg); }
.bx__desc { display: block; }
.bx__desc2 { display: block; margin-top: 4px; font-size: 17.5px; line-height: 1.35; color: var(--ink-3); }
.nm2 { display: grid; gap: 2px; margin: 10px 0 0; max-width: none; }
.nm2 > span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sl--lab img { display: block; }
.bx__key { margin: 14px 0 0; font-size: 17.5px; line-height: 1.55; color: var(--ink); max-width: 60ch; }
.bx__key .src { font-size: 14px; }

/* the frame is the hero: ragged ink edges (the official site's torn-paper frames), one caption under it */
.bx__fig { margin: 0; }
.bx__img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-1); -webkit-mask: var(--torn) center / 100% 100% no-repeat; mask: var(--torn) center / 100% 100% no-repeat; }
.bx__img--lead { aspect-ratio: 16 / 9; }
.bx__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bx__cap { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-3); max-width: 72ch; }
.bx__cap .plate__onscreen { color: var(--ink-2); }
.bx__cap .plate__credit { display: inline; margin: 0; }
.bx__cap a { color: inherit; }
.bx__fig--extra { margin: 16px 0 6px; max-width: 520px; }

/* lead: wide frame, then name + facts beside a small at-a-glance panel */
.bx--lead .bx__fig { margin-bottom: 22px; }
.bx__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 40px; }
@media (min-width: 900px) { .bx__grid { grid-template-columns: minmax(0, 1fr) 280px; } .bx__grid .ibx { order: 2; } }
.ibx { position: relative; align-self: start; padding: 4px 18px; box-shadow: inset 0 0 0 1px rgba(var(--rule-rgb), .3); }
.ibx::before, .ibx::after { content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none; }
.ibx::before { left: -1px; top: -1px; border-left: 1px solid var(--steel); border-top: 1px solid var(--steel); }
.ibx::after { right: -1px; bottom: -1px; border-right: 1px solid var(--steel); border-bottom: 1px solid var(--steel); }
.ibx__rows { margin: 0; }
.ibx__rows > div { padding: 11px 0; border-top: 1px solid rgba(var(--rule-rgb), .22); }
.ibx__rows > div:first-child { border-top: 0; }
.ibx__rows dt { font-size: 14px; color: var(--ink-4); margin: 0 0 2px; }
.ibx__rows dd { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ibx__rows dd .cred { font-size: 14px; }

/* side: frame beside the text, sides alternate down the page */
@media (min-width: 900px) {
  .bx--side { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 36px; align-items: start; }
  .bx--side.bx--flip > .bx__fig { order: 2; }
}
.bx--side .bx__fig { margin-bottom: 16px; }
/* pair / trio: frames on top, side by side */
.bx-row { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px; }
@media (min-width: 761px) {
  .bx-row--pair, .bx-row--quiet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bx-row--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  .bx-row--one { grid-template-columns: minmax(0, 1fr); }
}
.bx--pair .bx__fig, .bx--trio .bx__fig { margin-bottom: 14px; }
.bx--trio .bx__cap { font-size: 13.5px; }
/* quiet: the seal is the image */
.bx--quiet { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: start; padding-top: 18px; border-top: 1px solid var(--rule-soft); }
.bx--quiet:not(:has(.bx__tile)) { grid-template-columns: minmax(0, 1fr); }
.bx__tile { padding-top: 26px; }
.bx-row--one .bx--quiet { max-width: 720px; }

/* attacks seen / how to counter: the core of each entry, a designed slot even when empty */
.tx { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 28px; margin: 18px 0 4px; padding: 14px 0 0; border-top: 1px solid rgba(var(--rule-rgb), .3); }
@media (min-width: 900px) { .bx--lead .tx { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tx__h { margin: 0 0 8px; font-size: 17.5px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.mv, .ck { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: none; }
.mv__i, .ck__i { margin: 0; display: grid; gap: 2px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.mv__n { font-size: 17.5px; font-weight: 600; color: var(--ink); }
.mv__f { width: 96px; height: 64px; object-fit: cover; }
.ck__i { grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; }
.ck__i::before { content: ""; width: 10px; height: 10px; margin-top: 5px; box-shadow: inset 0 0 0 1px var(--steel); }
.ck__i > * { grid-column: 2; }
.ck__t { font-size: 17.5px; color: var(--ink); }
.tg { justify-self: start; font-size: 12px; line-height: 18px; letter-spacing: .06em; padding: 0 7px; text-decoration: none; border: 1px solid; }
.tg--official { color: var(--bg); background: var(--c-official); border-color: var(--c-official); }
.tg--press { color: var(--c-press); border-color: rgba(var(--c-press-rgb), .7); }
.tg--creator { color: var(--c-ours); border-color: rgba(var(--c-ours-rgb), .75); border-style: dashed; }
.tx__ph { margin: 0; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; font-size: 14px; line-height: 1.4; color: var(--ink-3);
  background: repeating-linear-gradient(-45deg, rgba(var(--white-rgb), .022) 0 6px, transparent 6px 12px); box-shadow: inset 0 0 0 1px rgba(var(--rule-rgb), .3); }
.tx__phk { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); border-right: 1px solid var(--rule-soft); padding-right: 10px; }

/* full details: open on desktop with no summary; a fold on phones */
.bx__more { margin-top: 12px; }
.bx__more > summary { list-style: none; cursor: pointer; min-height: var(--tap); display: flex; align-items: center; font-size: 14px; color: var(--ink-2); border-top: 1px solid var(--rule-soft); }
.bx__more > summary::-webkit-details-marker { display: none; }
.bx__more > summary::after { content: "+"; content: "+" / ""; margin-left: auto; color: var(--red-text); font-size: 20px; }
.bx__more[open] > summary::after { content: "\2212"; content: "\2212" / ""; }
@media (min-width: 761px) { .bx__more > summary { display: none; } }
.bx__d { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-3); max-width: 70ch; }
.bx__d b { color: var(--ink-2); font-weight: 600; margin-right: 4px; }
.bx__d a { color: var(--ink-2); }
.bx__more .phases { margin: 10px 0 2px; }
.bx__more .phases li { font-size: 14px; color: var(--ink-3); }
.bx__more .phases b { font-size: 14px; }
.bx__src .lv { margin-right: 4px; }
@media (max-width: 760px) {
  .bx { margin-bottom: 44px; }
  .bx__img { margin: 0 calc(-1 * var(--gutter)); }
  .bx--lead .bx__h { font-size: 32px; }
  .bx__h { font-size: 28px; }
  .bx__more-in { padding-bottom: 8px; }
}

/* official quotes: inside an entry when it is the entry's key line, or a section-level break between entries */
.qt { margin: 14px 0 0; padding: 2px 0 2px 20px; border-left: 2px solid var(--c-official); max-width: 40em; }
.qt blockquote { margin: 0; }
.qt p { margin: 0; font: 400 24px/1.32 var(--serif); color: var(--white); } /* no italics on this site (15 Oct) */
.qt .qt__lead { font: 400 14px/1.4 var(--serif); color: var(--ink-3); margin-bottom: 2px; }
.qt figcaption { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.qt figcaption a { color: inherit; }
.qt--break { margin: 8px 0 56px; padding: 18px 0 18px 28px; max-width: none; }
.qt--break p { font-size: 34px; line-height: 1.2; letter-spacing: -.01em; }
@media (max-width: 760px) { .qt p { font-size: 21px; } .qt--break p { font-size: 26px; } }
@media (prefers-reduced-motion: no-preference) {
  .bx__img img { transition: transform .6s var(--ease-out); }
  @media (hover: hover) { .bx:hover .bx__img img { transform: scale(1.03); } }
}

.ibx .cred__e::before { content: none; }
.ibx .cred { display: grid; gap: 0; }
.fresh { display: block; }
.fresh > * + *::before { content: none; }
.rs__list { gap: 5px; }
.pt--rs, .rs__a .pt--seal { width: 40px !important; height: 40px !important; }
@media (max-width: 760px) {
  .tx { gap: 8px; margin-top: 14px; padding-top: 10px; }
  .tx__c { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); align-items: center; column-gap: 10px; }
  .tx__c:has(.mv, .ck) { display: block; }
  .tx__h { margin: 0; font-size: 17.5px; }
  .tx__ph { min-height: 40px; padding: 6px 10px; }
  .tx__phk { display: none; }
  .pt--rs, .rs__a .pt--seal { width: 46px !important; height: 46px !important; }
}

/* =====================================================================
   round 2c (owner, 14 Oct night): useful information first. Per boss, in this order: watch the fight, attacks seen + how to
   counter, then phases and mechanics, where and rewards. Name evidence lives on /names; the bosses page keeps the name, the
   seal and a one-word mark per language. Reserved slots are one compact line.
   ===================================================================== */
.stx { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 8px 0 0; font-size: 14px; color: var(--ink-3); max-width: none; }
.stx__l { margin-right: 6px; color: var(--ink-4); }
.stx .sl { margin-right: 2px; }
.stx__a { color: var(--ink-2); text-decoration-color: rgba(var(--white-rgb), .3); white-space: nowrap; }
.stx__a:hover { text-decoration-color: var(--red); }
.bx__key { margin-top: 12px; }
.bx__key .tg { vertical-align: 2px; }
.bx__first { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.bx__first b { color: var(--ink-2); font-weight: 600; margin-right: 4px; }
/* watch the fight */
.wfx { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 14px 0 0; }
.wf { display: inline-grid; gap: 1px; padding: 8px 14px 8px 38px; min-height: 44px; position: relative; text-decoration: none; color: var(--ink); background: rgba(var(--c-official-rgb), .16); box-shadow: inset 0 0 0 1px rgba(var(--c-official-rgb), .7); }
.wf::before { content: ""; position: absolute; left: 14px; top: 50%; margin-top: -6px; border-left: 11px solid var(--c-official-text); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.wf__k { font: 600 12px/1.3 var(--serif); letter-spacing: .12em; text-transform: uppercase; color: var(--c-official-text); }
.wf__v { font-size: 14px; line-height: 1.35; }
.wf--2 { background: transparent; }
.wf:hover { box-shadow: inset 0 0 0 1px var(--c-official-text); }
.wf:focus-visible { outline: 2px solid var(--red-text); outline-offset: 2px; }
.wf__alt { margin: 0; flex-basis: 100%; font-size: 14px; color: var(--ink-3); }
.wf__alt a { color: var(--ink-3); }
/* blocks: one heading level at body size, items in small text with a tag each */
.bxs { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid rgba(var(--rule-rgb), .3); }
.bxs__h { margin: 0 0 8px; font-size: 17.5px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.bxs__n { font-size: 14px; font-weight: 400; color: var(--ink-4); margin-left: 4px; }
.bxs--tx { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 28px; }
@media (min-width: 900px) { .bx--lead .bxs--tx { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mv, .ck, .pm, .wr { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 70ch; }
.mv__i, .ck__i, .pm li, .wr li { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.mv__n { font-size: 14px; font-weight: 600; color: var(--ink); }
.mv__d { color: var(--ink-2); }
.ck__i { position: relative; padding-left: 20px; display: block; }
.ck__i::before { content: ""; position: absolute; left: 0; top: 5px; width: 10px; height: 10px; margin: 0; box-shadow: inset 0 0 0 1px var(--steel); }
.ck__t { font-size: 14px; color: var(--ink); }
.pm li, .wr li { position: relative; padding-left: 16px; }
.pm li::before, .wr li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--steel); }
.wr b { color: var(--ink); font-weight: 600; margin-right: 4px; }
.tg { display: inline; font-size: 12px; line-height: 1.5; letter-spacing: .03em; padding: 0 6px; margin-left: 2px; white-space: normal; text-decoration: none; border: 1px solid; }
.tg--official { color: var(--bg); background: var(--c-official); border-color: var(--c-official); }
.tg--press { color: var(--c-press); border-color: rgba(var(--c-press-rgb), .6); }
.tg--creator { color: var(--c-ours); border-color: rgba(var(--c-ours-rgb), .7); border-style: dashed; }
a.tg:hover { border-color: var(--red); }
.tg__our { font-size: 12px; color: var(--c-ours); font-style: normal; }
details.more { margin-top: 6px; }
details.more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 36px; font-size: 14px; color: var(--ink-2); text-decoration: underline; text-decoration-color: rgba(var(--white-rgb), .25); text-underline-offset: 3px; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: " +"; color: var(--red-text); margin-left: 4px; text-decoration: none; }
details.more[open] > summary::after { content: " −"; }
details.more > ul { margin-top: 6px; }
/* reserved slot: one compact line */
.rz { margin: 4px 0 0; display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-4); }
.rz__k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 1px 6px; border: 1px dashed rgba(var(--white-rgb), .22); color: var(--ink-4); }
.bxs > .rz + .wr, .bxs > .wr + .rz { margin-top: 6px; }
/* side cards: the frame column carries the fight link and first shown, so it has no empty tail */
.bx__side { min-width: 0; }
.bx--side .bx__side .wfx { margin-top: 12px; }
.bx--pair .bx__side, .bx--trio .bx__side { margin-bottom: 4px; }
@media (min-width: 900px) { .bx--side.bx--flip > .bx__side { order: 2; } .bx--side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* the fold now holds phases / where (phones); tactics stay visible above it */
.bx__more > summary { font-size: 14px; }
.bx__more-in > .bxs:first-child { margin-top: 10px; }
/* how boss fights work: once, near the top */
.hf { margin: 0 0 26px; padding: 14px 18px 12px; box-shadow: inset 0 0 0 1px rgba(var(--rule-rgb), .3); position: relative; }
.hf::before { content: ""; position: absolute; left: -1px; top: -1px; width: 12px; height: 12px; border-left: 1px solid var(--steel); border-top: 1px solid var(--steel); }
.r2 .hf .hf__h { margin: 0 0 8px; padding: 0; border: 0; font-size: 17.5px; line-height: 1.3; font-weight: 600; }
.r2 .hf .hf__h::before, .r2 .hf .hf__h::after { content: none !important; }
.hf__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px 28px; max-width: none; }
@media (min-width: 900px) { .hf__l { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hf__l li { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); padding-left: 16px; position: relative; }
.hf__l li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--steel); }
.hf__more { margin: 10px 0 0; font-size: 14px; }
.hf__more a { color: var(--ink-2); }
/* names page: one block per boss */
.nbs > p { max-width: var(--measure); }
.nb { padding: 18px 0 14px; border-top: 1px solid var(--rule-soft); scroll-margin-top: 16px; }
.nb__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.r2 .nb h3 { margin: 0; font-size: 24px; font-weight: 500; }
.nb h3 a { color: var(--ink); text-decoration-color: rgba(var(--white-rgb), .25); }
.nb__zh { display: flex; align-items: center; gap: 14px; }
.nb__rows { margin: 10px 0 0; display: grid; gap: 4px; }
.nb__rows > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.nb__rows dt { font-size: 14px; color: var(--ink-4); }
.nb__rows dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.nb__plates { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; max-width: 76ch; }
.nb__plates li { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); padding-left: 16px; position: relative; }
.nb__plates li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--steel); }
.nb__plates .plate__credit { display: inline; color: var(--ink-3); }
.nb__plates a { color: inherit; }
.nb__was { display: block; color: var(--ink-4); font-size: 13.5px; }
.nb__d { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 10px 0 0; max-width: 76ch; }
.nb__d b { color: var(--ink); }
.nb__src { margin-top: 8px; }
.nb__src b { margin-right: 6px; color: var(--ink-3); }
@media (max-width: 760px) { .nb__rows > div { grid-template-columns: 1fr; gap: 0; } }

@media (min-width: 761px) { .bx__more > .bx__more-in > .bxs { margin-top: 18px; } }
@media (max-width: 760px) {
  .bx__more { margin-top: 14px; }
  .bx__more > .bx__more-in > .bxs { margin-top: 4px; border-top: 0; padding-top: 0; }
  .bx__more > .bx__more-in > .bxs > .bxs__h { display: none; }
  .bx__more > summary { font-size: 17.5px; font-weight: 600; color: var(--ink); }
}

@media (min-width: 900px) {
  .bx--side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "fig head" "fig rest" "aside rest"; column-gap: 36px; align-items: start; }
  .bx--side.bx--flip { grid-template-areas: "head fig" "rest fig" "rest aside"; }
  .bx--side > .bx__fig { grid-area: fig; margin-bottom: 0; }
  .bx--side > .bx__hd { grid-area: head; }
  .bx--side > .bx__aside { grid-area: aside; }
  .bx--side > .bx__rest { grid-area: rest; }
  .bx--side.bx--flip > .bx__fig { order: 0; }
}
.bx--side > .bx__aside .wfx { margin-top: 12px; }
@media (min-width: 900px) {
  .bx--lead .bx__grid { grid-template-columns: minmax(0, 1fr); }
  .bx--lead .bx__main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .bx--lead .bx__main > * { grid-column: 1 / -1; }
  .bx--lead .bx__main > .wfx, .bx--lead .bx__main > .bx__first { grid-column: 2; grid-row: 2 / span 3; }
  .bx--lead .bx__main > .bx__first { grid-row: auto; }
  .bx--lead .bx__main > .bx__kick, .bx--lead .bx__main > .bx__title, .bx--lead .bx__main > .stx, .bx--lead .bx__main > .bx__key, .bx--lead .bx__main > .qt { grid-column: 1; }
}

/* =====================================================================
   round 2d (owner, 14 Oct night): one column, one visual focus at a time. Nothing sits beside the main column except the
   contents rail. Rhythm comes from scale and air: lead frames run the full column (16:9), mid frames 640 px, minor 480 px,
   no-frame entries lead with their seal. Every block is stacked at full content width.
   ===================================================================== */
.bx { display: block !important; margin: 0 0 88px; padding: 0; border: 0; background: none; }
.bx--lead { margin-bottom: 112px; }
.bx--minor, .bx--none { margin-bottom: 72px; }
.bx__fig { margin: 0 0 22px; }
.bx__fig--mid { max-width: 640px; }
.bx__fig--minor { max-width: 480px; }
.bx__name { margin: 0; }
.bx__title { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; max-width: 760px; }
.bx--lead .bx__h { font-size: 44px; }
.bx--mid .bx__h { font-size: 34px; }
.bx--minor .bx__h, .bx--none .bx__h { font-size: 28px; }
.bx--none { padding-top: 22px; border-top: 1px solid var(--rule-soft); }
.bx__key, .bx__first, .wfx, .bx__more, .bxs, .bx__cap, .qt { max-width: 760px; }
.bxs--tx, .bx--lead .bxs--tx { display: block !important; }
.bxs--tx > .tx__c + .tx__c { margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(var(--rule-rgb), .22); }
.bx__cap { margin: 22px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-4); }
.bx__cap .plate__credit { display: inline; }
.bx__cap a { color: var(--ink-3); }
.bx__capk { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; margin-right: 6px; color: var(--ink-4); }
.lg { grid-template-columns: minmax(0, 1fr) !important; }
.hf__l { grid-template-columns: minmax(0, 1fr) !important; }
.qt--break { max-width: 760px; }
@media (max-width: 760px) {
  .bx { margin-bottom: 64px; }
  .bx__fig--mid, .bx__fig--minor { max-width: none; }
  .bx--lead .bx__h { font-size: 32px; }
  .bx--mid .bx__h { font-size: 28px; }
  .bx--minor .bx__h, .bx--none .bx__h { font-size: 24px; }
}

/* round 2e (review fixes) */
.bx[hidden], .era[hidden] { display: none !important; }
/* tags: the border sits on the inner span; the link itself is padded (inline, so lines do not move) to a 44 px tap height */
.tg { border: 0; padding: 14px 0; margin: 0 0 0 2px; background: none !important; }
.tg > span { padding: 0 6px; border: 1px solid; }
.tg--official > span { color: var(--bg); background: var(--c-official); border-color: var(--c-official); }
.tg--press > span { color: var(--c-press); border-color: rgba(var(--c-press-rgb), .6); }
.tg--creator > span { color: var(--c-ours); border-color: rgba(var(--c-ours-rgb), .7); border-style: dashed; }
.tg--unconf > span { color: var(--c-ours); border-color: rgba(var(--c-ours-rgb), .75); border-style: dashed; }
.tg--unconf, .tg--creator, .tg--press, .tg--official { color: inherit; }
a.tg:hover > span { border-color: var(--red); }
.stx__a { display: inline-block; padding: 11px 0; margin: -11px 0; }
.stx__m { font-style: normal; color: var(--c-ours); }
details.more > summary { min-height: 44px; }
.ctx { color: var(--ink-4); }
.bx__att { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-4); }
.bx__att a { color: var(--ink-3); }
.nb__k { margin: 12px 0 0; font-size: 14px; color: var(--ink-4); }
.nb__k + .nb__plates { margin-top: 4px; }
.mv__i, .ck__i { display: block !important; }
.mv__n { display: block; }
.js .fb .fb__live { flex-basis: 100%; margin: 0; min-height: 2.9em; align-self: auto; }
.stx__n { flex-basis: 100%; font-size: 13.5px; color: var(--ink-3); }