/* Kungfupunk · style.css — 2026-10-14 redesign in the game's own art language.
   Source of the language: the official site pbz.s-game.com (read 14 Oct 2026): near-black #07090a, white type
   layered by opacity (.92 / .88 / .64), grey-green hairlines rgba(120,136,135,.4), dark red #c23a3a, a calligraphic
   book serif (Maiola) and Kai for Chinese. Ours: Alegreya (OFL) for the serif, LXGW WenKai (OFL) for Chinese,
   both self-hosted subsets in /assets/fonts. One theme only (dark).
   One idea carries the whole site: solidity = certainty. A solid red seal / a solid white level mark is the
   firmest kind of fact; an outlined one is weaker; a dashed one is the weakest. Red is only for seals and accents.
   Component classes are the ones of the 2026-10-14 template rebuild (see tools/TEMPLATE.md); only the look changed. */

@font-face {
  font-family: "Alegreya";
  src: url("/assets/fonts/alegreya-latin-wght.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: optional; /* preloaded; if it misses the first ~100 ms the page keeps the matched stand-in for that view (no swap, no shift) and has it from cache on the next page */
}
@font-face {
  font-family: "LXGW WenKai";
  src: url("/assets/fonts/wenkai-site-medium.37f0f80e.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+00B7, U+2014, U+2018-201D, U+2026, U+3000-303F, U+3400-9FFF, U+FF00-FFEF;
}
/* Metric-matched stand-ins (2026-10-14e), so nothing moves when the real fonts arrive late.
   "Alegreya Fallback" is Times New Roman (Liberation Serif / Tinos on Linux and Android) scaled to Alegreya's widths,
   measured per class of glyph from the font files: lower case and punctuation 101.5 % (regular) / 96.1 % (bold),
   capitals 92.8 %, figures 89.6 %; vertical metrics overridden to Alegreya's (ascent 1016, descent 345, gap 0 per 1000),
   divided by each face's size-adjust so every face ends with the same line box.
   "WenKai Fallback" is the system Kai or Chinese sans with LXGW WenKai's vertical metrics (928 / 256, gap 0);
   Chinese characters are one em wide in both, so nothing changes width. */
@font-face { font-family: "Alegreya Fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Tinos"); font-weight: 400 599; size-adjust: 101.5%; ascent-override: 100.1%; descent-override: 34.0%; line-gap-override: 0%; }
@font-face { font-family: "Alegreya Fallback"; src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Liberation Serif Bold"), local("Tinos Bold"); font-weight: 600 900; size-adjust: 96.1%; ascent-override: 105.7%; descent-override: 35.9%; line-gap-override: 0%; }
@font-face { font-family: "Alegreya Fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Tinos"); font-weight: 400 599; unicode-range: U+0041-005A; size-adjust: 92.8%; ascent-override: 109.5%; descent-override: 37.2%; line-gap-override: 0%; }
@font-face { font-family: "Alegreya Fallback"; src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Liberation Serif Bold"), local("Tinos Bold"); font-weight: 600 900; unicode-range: U+0041-005A; size-adjust: 92.8%; ascent-override: 109.5%; descent-override: 37.2%; line-gap-override: 0%; }
@font-face { font-family: "Alegreya Fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Tinos"); font-weight: 400 599; unicode-range: U+0030-0039; size-adjust: 89.6%; ascent-override: 113.4%; descent-override: 38.5%; line-gap-override: 0%; }
@font-face { font-family: "Alegreya Fallback"; src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Liberation Serif Bold"), local("Tinos Bold"); font-weight: 600 900; unicode-range: U+0030-0039; size-adjust: 89.6%; ascent-override: 113.4%; descent-override: 38.5%; line-gap-override: 0%; }
@font-face {
  font-family: "WenKai Fallback";
  src: local("Kaiti SC"), local("STKaiti"), local("KaiTi"), local("PingFang SC"), local("PingFangSC-Regular"), local("Hiragino Sans GB"), local("Noto Serif CJK SC"), local("Noto Sans CJK SC"), local("Microsoft YaHei");
  unicode-range: U+00B7, U+2014, U+2018-201D, U+2026, U+3000-303F, U+3400-9FFF, U+FF00-FFEF;
  size-adjust: 100%; ascent-override: 92.8%; descent-override: 25.6%; line-gap-override: 0%;
}

:root {
  /* colour channels (r, g, b) so every translucent value is a variable too (2026-10-14e; values unchanged) */
  --bg-rgb: 7, 9, 10;            /* page ground */
  --stage-rgb: 5, 6, 7;          /* the opening card's ground, one step darker */
  --white-rgb: 255, 255, 255;
  --black-rgb: 0, 0, 0;
  --rule-rgb: 120, 136, 135;     /* grey-green hairline */
  --red-rgb: 194, 58, 58;        /* the seal red */
  --steel-rgb: 176, 128, 98;     /* weathered steel: rule end-caps, corner brackets */
  --seal-ink-rgb: 247, 239, 230; /* ivory on a solid seal */
  --light-rgb: 240, 230, 214;    /* the overhead light in the opening card */
  --light-2-rgb: 236, 226, 210;  /* the faint light at the top of every page */
  --sheen-rgb: 255, 244, 228;    /* the band of light that crosses the figure */
  --flash-blue-rgb: 111, 155, 216;
  --bg: #07090a;
  --bg-1: #0b0e0f;
  --bg-2: #101415;
  --stage: #050607;
  --white: #fff;
  --black: #000;
  --flash-blue: #6f9bd8;
  --plate: #f4efe8;        /* the site mark's paper plate; lives in the mark SVGs, listed here so it has a name */
  --ink: rgba(var(--white-rgb), .92);    /* headings, values */
  --ink-2: rgba(var(--white-rgb), .80);  /* body */
  --ink-3: rgba(var(--white-rgb), .64);  /* labels, dates, sources */
  --ink-4: rgba(var(--white-rgb), .42);  /* faint marks */
  --rule: rgba(var(--rule-rgb), .4);
  --rule-soft: rgba(var(--rule-rgb), .2);
  --red: #c23a3a;           /* seals, accents (3.8:1 on --bg: graphics and large text only) */
  --red-text: #e5675c;      /* red for small text, 6.1:1 */
  --seal-ink: #f7efe6;      /* text on a solid seal, 4.7:1 */
  --link: rgba(var(--white-rgb), .92);
  --link-line: rgba(var(--white-rgb), .32);

  --serif: "Alegreya", "Alegreya Fallback", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --kai: "LXGW WenKai", "WenKai Fallback", "Kaiti SC", "STKaiti", "KaiTi", "BiauKai", "Songti SC", serif;

  --fs-body: 18.5px; --lh-body: 1.6;
  --fs-lede: 22px;   --lh-lede: 1.45;
  --fs-h1: 48px;     --lh-h1: 1.06;
  --fs-h2: 31px;     --lh-h2: 1.15;
  --fs-h3: 22px;     --lh-h3: 1.25;
  --fs-table: 16.5px; --lh-table: 1.45;
  --fs-small: 15px;  --lh-small: 1.45;
  --fs-big: 92px;

  --gutter: 40px;
  --wrap: 1240px;
  --rail: 236px;
  --measure: 66ch;
  --tap: 44px;
  --h2-top: 72px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-film: cubic-bezier(.16, 1, .3, 1);
  --steel: rgba(var(--steel-rgb), .62);   /* weathered steel: rule end-caps and corner brackets only (2026-10-14d) */
  --steel-2: rgba(var(--steel-rgb), .3);
  color-scheme: dark;
}
@media (max-width: 760px) {
  :root {
    --fs-body: 17px; --lh-body: 1.58;
    --fs-lede: 19px;
    --fs-h1: 33px;
    --fs-h2: 25px;
    --fs-h3: 19.5px;
    --fs-table: 15.5px;
    --fs-small: 14px;
    --fs-big: 54px;
    --gutter: 16px;
    --h2-top: 52px;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink-2);
  font: 400 var(--fs-body)/var(--lh-body) var(--serif);
  font-feature-settings: "kern", "liga"; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
[lang="zh-Hans"] { font-family: var(--kai); font-synthesis: none; }
h1, h2, h3 { color: var(--ink); margin: 0; font-weight: 500; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -0.003em; margin: var(--h2-top) 0 18px; padding-top: 22px; border-top: 1px solid var(--rule); scroll-margin-top: 16px; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; margin: 32px 0 8px; scroll-margin-top: 16px; }
p { margin: 0 0 16px; max-width: var(--measure); }
ul, ol { padding-left: 1.25em; margin: 0 0 16px; max-width: var(--measure); }
li { margin: 5px 0; }
a { color: var(--link); text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--red); }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--red-text); outline-offset: 3px; }
strong, b { color: var(--ink); font-weight: 700; }
small { font-size: var(--fs-small); }
.num, table, .count, .countdown, .unlock__time, .tally, .cat__n, time { font-variant-numeric: lining-nums tabular-nums; }
.cjk { font-family: var(--kai); font-weight: 500; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: var(--bg-2); color: var(--ink); padding: 10px 14px; z-index: 20; }
.visually-hidden, .seal__cap { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* small caps label: the official site's tracked serif capitals (RELEASE DATE, SCROLL) */
.eyebrow, .toc-title, .unlock__label, thead th, .dossier__kicker, .fix__label, .countdown small, .cat__n small, .tally span, .data td::before, .hint, .hero__credit, .foot-legal__k {
  font-family: var(--serif); text-transform: uppercase; letter-spacing: .18em; font-weight: 500;
}

/* ---------- site head ---------- */
.site-head { position: relative; z-index: 5; border-bottom: 1px solid var(--rule-soft); background: var(--bg); }
.site-head .wrap { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; font-weight: 500; letter-spacing: .34em; font-size: 14px; min-height: var(--tap); white-space: nowrap; }
.brand__mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 2px; background: var(--red); color: var(--seal-ink); font: 500 19px/1 var(--kai); letter-spacing: 0; box-shadow: inset 0 0 0 2px var(--red), inset 0 0 0 3px rgba(var(--seal-ink-rgb), .38); transform: rotate(-2deg); }
.nav { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { position: relative; display: inline-flex; align-items: baseline; gap: 7px; min-height: var(--tap); padding: 12px 12px 0; color: var(--ink-3); text-decoration: none; font-size: 16px; white-space: nowrap; }
.nav a:hover { color: var(--ink); }
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav .count { font-size: 12.5px; color: var(--ink-4); }
@media (max-width: 760px) {
  .site-head .wrap { gap: 6px; min-height: 52px; padding-left: 12px; padding-right: 0; }
  .brand { gap: 0; font-size: 0; letter-spacing: 0; }
  .brand__mark { width: 30px; height: 30px; font-size: 19px; }
  .nav { margin-left: 4px; -webkit-mask-image: linear-gradient(to right, var(--black) calc(100% - 28px), transparent); mask-image: linear-gradient(to right, var(--black) calc(100% - 28px), transparent); padding-right: 24px; }
  .nav a { padding: 12px 8px 0; font-size: 15.5px; gap: 5px; }
  .nav a::after { left: 8px; right: 8px; }
  .nav .count { font-size: 12px; }
}
/* home: the header floats over the poster */
.site-head--over { position: absolute; left: 0; right: 0; top: 0; background: linear-gradient(to bottom, rgba(var(--bg-rgb), .78), rgba(var(--bg-rgb), 0)); border-bottom: 0; }
.site-head--over .nav a { color: rgba(var(--white-rgb), .74); }
.site-head--over .nav a[aria-current="page"], .site-head--over .nav a:hover { color: var(--white); }

/* ---------- page head ---------- */
.crumbs { font-size: var(--fs-small); color: var(--ink-3); margin: 36px 0 18px; }
.crumbs a { color: var(--ink-3); text-decoration-color: transparent; }
.crumbs a:hover { color: var(--ink); text-decoration-color: var(--red); }
.crumbs span[aria-hidden] { margin: 0 8px; color: var(--ink-4); }
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 40px 0 16px; font-size: 13px; color: var(--ink-3); }
.page-head h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -0.01em; max-width: 24ch; text-wrap: balance; }
.page-head h1 .cjk { letter-spacing: .02em; }
.lede { font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--ink); margin: 20px 0 14px; max-width: 54ch; }
.byline { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); margin: 0 0 30px; }
.byline b { color: var(--ink-2); font-weight: 500; }
@media (max-width: 760px) {
  .crumbs { margin: 18px 0 10px; }
  .eyebrow { margin: 20px 0 8px; font-size: 12px; }
  .eyebrow--hub { display: none; }
  .page-head h1 { margin-top: 18px; }
  .crumbs + .eyebrow, .crumbs + h1 { margin-top: 0; }
  .lede { margin: 12px 0 10px; }
  .byline { margin-bottom: 20px; gap: 2px 16px; }
}

/* ---------- layout: main + floating contents rail (≥1200) ---------- */
.layout { display: block; }
.main { min-width: 0; max-width: 840px; }
.rail { display: none; }
@media (min-width: 1200px) {
  .layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); gap: 72px; align-items: start; }
  .main { max-width: none; }
  .rail { display: block; position: sticky; top: 28px; max-height: calc(100vh - 56px); overflow: auto; padding: 36px 0 20px; }
}
.toc-title { font-size: 12px; color: var(--ink-3); margin: 0 0 14px; display: flex; justify-content: space-between; }
.toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--rule); }
.toc li { margin: 0; }
.toc a { position: relative; display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 1px solid transparent; color: var(--ink-3); text-decoration: none; font-size: 15px; line-height: 1.3; }
.toc a:hover { color: var(--ink); }
.toc a.is-active { color: var(--ink); border-left-color: var(--red); }
.toc .sub a { padding-left: 28px; font-size: 14px; }
.rail-box { border-top: 1px solid var(--rule-soft); margin-top: 22px; padding-top: 16px; font-size: 14.5px; line-height: 1.35; color: var(--ink-3); }
.rail-box a { display: block; padding: 5px 0; color: var(--ink-2); text-decoration-color: transparent; }
.rail-box a:hover { color: var(--ink); text-decoration-color: var(--red); }
.progress { height: 1px; background: var(--rule-soft); margin: 0 0 14px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(0); }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) { .progress i { animation: grow linear both; animation-timeline: scroll(root); } }
}
@supports not (animation-timeline: scroll()) { .progress { display: none; } }
@keyframes grow { to { transform: scaleX(1); } }

/* contents bar on phones and tablets */
.toc-bar { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 26px 0 10px; }
.toc-bar summary { list-style: none; cursor: pointer; min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 2px; color: var(--ink); font-size: 16px; }
.toc-bar summary::-webkit-details-marker { display: none; }
.toc-bar summary::after { content: "+"; color: var(--red-text); font-size: 22px; line-height: 1; }
.toc-bar[open] summary::after { content: "−"; }
.toc-bar summary small { color: var(--ink-3); margin-left: auto; margin-right: 14px; font-size: 14px; }
.toc-bar ol { margin: 0; padding: 0 2px 12px 26px; max-width: none; }
.toc-bar li { margin: 0; }
.toc-bar a { display: block; min-height: 44px; padding: 12px 0; text-decoration: none; color: var(--ink-2); font-size: 16px; line-height: 20px; }
@media (min-width: 1200px) { .toc-bar { display: none; } }
/* 2026-10-15: below 1200px the bar is closed by script; until that script has run (a slow connection can paint the page
   before it), its list stays hidden so closing it moves nothing. Without JavaScript (no .js class) it stays open. */
@media (max-width: 1199px) { .js .toc-bar:not(.is-set) > :not(summary) { display: none; } .js .toc-bar:not(.is-set) summary::after { content: "+"; } }

/* ---------- level marks: solidity = certainty ---------- */
.lv { position: relative; display: inline-block; font: 600 11px/17px var(--serif); letter-spacing: .14em; text-transform: uppercase; padding: 0 6px 0 7px; border-radius: 1px; vertical-align: 2px; white-space: nowrap; border: 1px solid currentColor; text-decoration: none; }
.lv--official, a.lv.lv--official, .src a.lv.lv--official { color: var(--bg); background: rgba(var(--white-rgb), .9); border-color: rgba(var(--white-rgb), .9); }
.lv--store, a.lv.lv--store, .src a.lv.lv--store { color: var(--ink); border-color: rgba(var(--white-rgb), .62); background: transparent; }
.lv--press, a.lv.lv--press, .src a.lv.lv--press { color: var(--ink-2); border-color: var(--rule); background: rgba(var(--rule-rgb), .16); }
.lv--unconf, a.lv.lv--unconf, .src a.lv.lv--unconf { color: var(--ink-3); border-color: rgba(var(--white-rgb), .34); border-style: dashed; background: transparent; }
.lv--ours { color: var(--ink-3); border-style: dotted; }
a.lv:hover { border-color: var(--red); }
a.lv::after { content: ""; position: absolute; left: -4px; right: -4px; top: -14px; bottom: -14px; }
.src { font-size: var(--fs-small); line-height: 1; color: var(--ink-3); white-space: normal; }
.src a { color: var(--ink-3); text-decoration-color: rgba(var(--white-rgb), .22); }
.src a:hover { color: var(--ink); }
.src .lv { margin-right: 4px; }
.lede .src, p .src { white-space: normal; }

/* ---------- red seals: the three Chinese-name states ---------- */
.seal { display: inline-flex; align-items: center; justify-content: center; font: 500 17px/1 var(--kai); padding: 6px 8px 5px; border-radius: 2px; letter-spacing: .08em; white-space: nowrap; vertical-align: middle; }
.seal--solid { background: var(--red); color: var(--seal-ink); box-shadow: inset 0 0 0 2px var(--red), inset 0 0 0 3px rgba(var(--seal-ink-rgb), .4); }
.seal--likely { color: var(--red-text); border: 1.5px dashed var(--red); padding: 5px 7px 4px; background: rgba(var(--red-rgb), .08); }
.seal--pending { color: var(--ink-3); border: 1.5px dashed rgba(var(--white-rgb), .3); padding: 5px 7px 4px; }
.seal-cap { display: inline-block; font-size: 13.5px; line-height: 18px; color: var(--red-text); margin-left: 6px; vertical-align: middle; }
.seal-cap--solid, .seal-cap--pending { color: var(--ink-3); }
.seal--mini { font-size: 12px; padding: 3px 4px 2px; vertical-align: 1px; }
.seal--likely.seal--mini, .seal--pending.seal--mini { padding: 2px 3px 1px; }
.name-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.name-cell b { font-size: 17px; }
.seal-legend { display: grid; gap: 10px; padding: 16px 0; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); font-size: var(--fs-small); line-height: var(--lh-small); margin: 18px 0; max-width: var(--measure); }
.seal-legend div { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; }

/* ---------- unlock card (home panel 2 and release-time) ---------- */
.unlock { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 22px 0 22px; margin: 6px 0 22px; position: relative; }
.unlock::before { content: ""; position: absolute; left: 0; top: -1px; width: 56px; height: 1px; background: var(--red); }
.unlock__label { font-size: 12.5px; color: var(--ink-3); margin: 0 0 10px; }
.unlock__time { display: block; margin: 0; }
.unlock__time b { display: block; font-size: var(--fs-big); line-height: 1; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
.unlock__time span { display: block; margin-top: 10px; font-size: 21px; line-height: 1.3; color: var(--ink-2); }
.unlock__zones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule-soft); margin: 18px 0 0; padding: 0; list-style: none; max-width: none; }
.unlock__zones li { margin: 0; padding: 9px 12px 9px 0; font-size: 14px; line-height: 1.3; color: var(--ink-3); border-bottom: 1px solid var(--rule-soft); }
.unlock__zones b { display: block; color: var(--ink); font-size: 17px; font-weight: 500; }
.unlock__mine { margin: 14px 0 0; font-size: 16px; color: var(--ink-2); }
.unlock__note { margin: 10px 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); max-width: none; }
.countdown { display: none; gap: 0; margin: 18px 0 0; }
.js .countdown { display: flex; visibility: hidden; } /* room is kept, digits stay hidden until the page script has written them */
.js .countdown.is-live { visibility: visible; }
/* if the page script never arrives, the empty room folds away after 1.2 s, leaving the same text-only card as without JavaScript */
.js .countdown:not(.is-live) { animation: kfp-cd-fold 0s linear 1.2s forwards; }
@keyframes kfp-cd-fold { to { display: none; height: 0; margin: 0; } }
.countdown div { min-width: 92px; padding: 0 22px 0 0; margin-right: 22px; border-right: 1px solid var(--rule-soft); }
.countdown div:last-child { border-right: 0; }
.countdown b { display: block; font-size: 44px; line-height: 1; font-weight: 500; color: var(--ink); }
.countdown small { display: block; margin-top: 6px; color: var(--ink-3); font-size: 11.5px; }
.countdown[data-done] div { opacity: .5; }
@media (max-width: 760px) {
  .unlock { padding: 16px 0 16px; margin-bottom: 16px; }
  .unlock__time span { font-size: 17px; margin-top: 6px; }
  .unlock__zones { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
  .unlock__zones li { padding: 7px 8px 7px 0; font-size: 13px; }
  .unlock__zones b { font-size: 15.5px; }
  .unlock__zones li:nth-child(n+4) { display: none; }
  .countdown { margin-top: 12px; }
  .countdown div { min-width: 0; flex: 1; padding: 0 10px 0 0; margin-right: 12px; display: flex; align-items: baseline; gap: 6px; }
  .countdown b { font-size: 28px; }
  .countdown small { margin: 0; font-size: 10.5px; }
  .unlock__mine { margin-top: 10px; font-size: 14.5px; }
  .unlock__label { letter-spacing: .12em; font-size: 11.5px; }
}
.unlock__notes { margin: -4px 0 22px; padding: 2px 0 2px 16px; border-left: 1px solid var(--rule); max-width: var(--measure); }
.unlock__notes .unlock__note:first-child { margin-top: 0; }

/* count strip on list pages */
.tally { display: flex; flex-wrap: wrap; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 6px 0 20px; }
.tally div { flex: 1 1 0; min-width: 0; padding: 14px 16px 12px 0; margin-right: 16px; border-right: 1px solid var(--rule-soft); }
.tally div:last-child { border-right: 0; margin-right: 0; }
.tally b { display: block; font-size: 40px; line-height: 1; font-weight: 500; color: var(--ink); }
.tally span { display: block; margin-top: 6px; font-size: 11px; line-height: 1.35; color: var(--ink-3); letter-spacing: .12em; }
.tally .is-seal b { color: var(--red-text); }
@media (max-width: 760px) {
  .tally div { padding: 10px 8px 8px 0; margin-right: 8px; }
  .tally b { font-size: 27px; }
  .tally span { font-size: 9.5px; letter-spacing: .08em; }
}

/* ---------- tables ---------- */
.table-wrap { margin: 14px 0 10px; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-table); line-height: var(--lh-table); }
caption { text-align: left; font-size: var(--fs-small); color: var(--ink-3); padding: 0 0 10px; caption-side: top; }
th, td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule-soft); }
thead th { font-size: 11.5px; color: var(--ink-3); background: transparent; border-bottom: 1px solid var(--rule); padding-top: 4px; padding-bottom: 10px; }
tbody tr:hover { background: rgba(var(--white-rgb), .025); }
td { color: var(--ink); }
td .src { line-height: 1.45; }
table:not(.data):not(.names) { border-top: 1px solid var(--rule); }
.facts th { width: 30%; color: var(--ink-3); font-weight: 400; font-size: 15.5px; background: transparent; text-transform: none; letter-spacing: 0; }
.facts td { color: var(--ink); }
.facts--hook th, .facts--hook td { padding-top: 11px; padding-bottom: 11px; }
@media (max-width: 760px) {
  .facts th { width: 33%; padding: 10px 10px 10px 0; font-size: 14px; }
  .facts td { padding: 10px 0; }
}
.short td, .short th { white-space: normal; }
@media (max-width: 760px) {
  .short th, .short td { padding: 9px 8px 9px 0; }
  .short thead th { font-size: 10.5px; letter-spacing: .1em; }
}
.data { border-top: 1px solid var(--rule); }
.data td.ns, .ns { color: var(--ink-3); }
.ns-chip { display: inline-block; font-size: 12.5px; line-height: 19px; padding: 0 7px; border: 1px dashed rgba(var(--white-rgb), .3); border-radius: 1px; color: var(--ink-3); font-style: normal; white-space: nowrap; letter-spacing: .04em; }
@media (max-width: 760px) {
  .data, .data tbody, .data tr, .data td { display: block; width: 100%; }
  .data { border-top: 0; }
  .data caption { display: block; padding-bottom: 12px; }
  .data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data tr { border-top: 1px solid var(--rule); padding: 12px 0 8px; margin: 0; }
  .data tbody tr:hover { background: transparent; }
  .data td { border: 0; padding: 3px 0 3px 104px; position: relative; min-height: 27px; }
  .data td::before { content: attr(data-label); position: absolute; left: 0; top: 6px; width: 94px; font-size: 10.5px; line-height: 17px; letter-spacing: .1em; color: var(--ink-3); font-style: normal; }
  .data td.cell-name { display: block; padding: 0 0 8px; margin-bottom: 4px; min-height: 0; font-size: 18px; }
  .data td.cell-name::before { content: none; }
  .data td:not(.cell-name) { display: flow-root; }
  .data td:not(.cell-name)::before { position: static; float: left; margin-left: -104px; }
}

/* names tables */
table.names { border-top: 1px solid var(--rule); }
table.names td.nm-zh { min-width: 5.5em; font-family: var(--kai); font-weight: 500; font-size: 18px; }
table.names td.nm-en { font-weight: 600; }
table.names td.nm-level, table.names td.nm-src { font-size: 15px; color: var(--ink-2); }
@media (max-width: 760px) {
  table.names, table.names tbody, table.names tr { display: block; width: 100%; }
  table.names { border-top: 0; }
  table.names caption { display: block; padding-bottom: 12px; }
  table.names thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.names tr { display: flex; flex-wrap: wrap; gap: 3px 12px; border-top: 1px solid var(--rule); margin: 0; padding: 12px 0 10px; }
  table.names tbody tr:hover { background: transparent; }
  table.names td { display: block; border: 0; padding: 0; }
  table.names td.nm-en, table.names td.nm-zh { order: 1; }
  table.names td.nm-where, table.names td.nm-what, table.names td.nm-tag { order: 2; width: 100%; font-size: 15.5px; }
  table.names td.nm-level, table.names td.nm-src { order: 3; font-size: 14px; line-height: 1.4; color: var(--ink-3); }
  table.names td.nm-level { width: 100%; }
  table.names td.nm-tag { color: var(--ink-3); }
}

/* ---------- dossiers, phases ---------- */
.dossier { border-top: 1px solid var(--rule); background: linear-gradient(to bottom, rgba(var(--white-rgb), .03), rgba(var(--white-rgb), 0) 140px); margin: 28px 0; scroll-margin-top: 16px; position: relative; }
.dossier::before { content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 1px; background: var(--red); }
.dossier__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 18px 0 14px; }
.dossier__head h3 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 500; }
.dossier__kicker { width: 100%; font-size: 11.5px; color: var(--ink-3); }
.dossier .facts { border-top: 1px solid var(--rule-soft); }
.dossier .facts th { width: 26%; }
.dossier__foot { padding: 10px 0 12px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); }
.dossier__foot .lv { margin-right: 4px; }
.dossier__head .seal-cap { margin-left: 0; }
.dossier__head .seal-cap[lang] { font-family: var(--kai); color: var(--ink-3); font-style: normal; }
.dossier--group { margin-top: 36px; }
.soft-line { margin: 0; width: 100%; font-size: 14px; color: var(--ink-3); }
.phases { list-style: none; padding: 0; margin: 14px 0 18px; max-width: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 24px; }
.phases li { margin: 0; position: relative; border-top: 1px solid var(--rule-soft); padding: 12px 0 12px 46px; font-size: 16px; line-height: 1.45; }
.phases li::before { content: attr(data-n); position: absolute; left: 0; top: 12px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--red); color: var(--red-text); font-size: 15px; font-variant-numeric: lining-nums; }
.phases li.is-unknown { color: var(--ink-3); }
.phases li.is-unknown::before { border: 1px dashed rgba(var(--white-rgb), .3); color: var(--ink-3); }
.phases b { display: block; color: var(--ink); margin-bottom: 2px; font-weight: 600; }
.dossier .phases { margin: 0 0 6px; }
.flash { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.flash--blue { background: var(--flash-blue); box-shadow: 0 0 0 3px rgba(var(--flash-blue-rgb), .22); }
.flash--red { background: var(--red); box-shadow: 0 0 0 3px rgba(var(--red-rgb), .25); }

/* ---------- correction box, unknowns, notes ---------- */
.fix { border-left: 1px solid var(--red); padding: 4px 0 4px 18px; margin: 22px 0; max-width: var(--measure); }
.fix__label { font-size: 12px; color: var(--red-text); margin: 0 0 8px; }
.fix p { margin: 0 0 8px; }
.fix p:last-child { margin-bottom: 0; }
.fix s { color: var(--ink-3); text-decoration-color: var(--red); text-decoration-thickness: 1.5px; }
.unknowns { list-style: none; padding: 0; margin: 14px 0 18px; max-width: var(--measure); border-top: 1px dashed var(--rule); }
.unknowns li { margin: 0; padding: 12px 0; border-bottom: 1px dashed var(--rule); display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 4px 18px; font-size: 16.5px; line-height: 1.45; }
.unknowns b { color: var(--ink); font-weight: 600; }
.unknowns span { color: var(--ink-3); }
@media (max-width: 760px) { .unknowns li { grid-template-columns: 1fr; } }
.note { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); max-width: var(--measure); }
.lede-more { font-size: var(--fs-body); color: var(--ink-2); margin: 6px 0 16px; max-width: var(--measure); }

/* ---------- hub: categories, updates, teaser ---------- */
.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 32px; margin: 16px 0; }
.cat { position: relative; display: block; border-top: 1px solid var(--rule); padding: 16px 0 18px; color: var(--ink-2); text-decoration: none; min-height: var(--tap); }
a.cat:hover { border-top-color: var(--red); }
.cat__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cat__top b { font-size: 20px; font-weight: 500; }
.cat__n { font-size: 34px; font-weight: 500; color: var(--ink); line-height: 1; }
.cat__n small { font-size: 10.5px; color: var(--ink-3); margin-left: 5px; letter-spacing: .14em; }
.cat p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--ink-3); }
.cat__go { display: inline-block; margin-top: 10px; color: var(--ink-2); font-size: 14px; pointer-events: none; }
.cat--group { grid-column: 1 / -1; }
.cat__list { list-style: none; padding: 0; margin: 10px 0 0; max-width: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0 32px; }
.cat__list li { margin: 0; padding: 10px 0; border-top: 1px solid var(--rule-soft); }
.cat__list a { position: relative; font-weight: 600; display: inline-block; min-height: 24px; }
.cat__list a::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
.cat__list span { display: block; font-size: 15px; line-height: 1.45; color: var(--ink-3); }
.updates { list-style: none; padding: 0; margin: 14px 0; max-width: var(--measure); border-top: 1px solid var(--rule); }
.updates li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); font-size: 16.5px; line-height: 1.45; }
.updates time { color: var(--ink-3); font-size: 15px; }
.teaser { list-style: none; padding: 0; margin: 14px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0 32px; max-width: none; }
.teaser li { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; border-top: 1px solid var(--rule); padding: 16px 0; }
.teaser a { font-weight: 600; font-size: 18px; }
.teaser__meta { display: block; font-size: 15px; line-height: 1.45; color: var(--ink-3); margin-top: 3px; }

/* ---------- FAQ ---------- */
.faq { margin: 14px 0; max-width: var(--measure); border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule-soft); }
.faq summary { list-style: none; cursor: pointer; min-height: var(--tap); padding: 14px 44px 12px 0; position: relative; color: var(--ink); line-height: 1.35; font-size: 19px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 22px; color: var(--red-text); }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 0 14px; color: var(--ink-2); }
.faq details > div p { margin-bottom: 8px; }

/* ---------- sources, related, foot ---------- */
.sources { font-size: 15px; line-height: 1.5; color: var(--ink-3); max-width: var(--measure); padding-left: 1.4em; }
.sources li { margin: 6px 0; }
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 28px; margin: 14px 0 0; }
.related a { display: block; border-top: 1px solid var(--rule); padding: 14px 0 16px; text-decoration: none; color: var(--ink); font-size: 18px; min-height: var(--tap); }
.related a:hover { border-top-color: var(--red); }
.related a span { display: block; color: var(--ink-3); font-size: 15px; line-height: 1.45; margin-top: 4px; }
.prose h2 { font-size: 24px; margin-top: 44px; }
section > h2:first-child { margin-top: var(--h2-top); }
.page-head + section > h2:first-child { margin-top: 44px; }
.keep { white-space: nowrap; }
.short td[lang="zh-Hans"] { white-space: nowrap; font-weight: 500; }
.row-src { display: block; margin-top: 6px; line-height: 1.4; }

.site-foot { border-top: 1px solid var(--rule); margin-top: 96px; padding: 40px 0 56px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); }
.site-foot p { max-width: 82ch; }
.foot-sig { display: flex; align-items: center; gap: 14px; margin: 0 0 28px; color: var(--ink); letter-spacing: .34em; font-size: 14px; }
.foot-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 24px; list-style: none; padding: 0; margin: 0 0 28px; max-width: none; }
.foot-index li { margin: 0; }
.foot-index a { display: block; min-height: 44px; padding: 12px 0; color: var(--ink-2); text-decoration: none; font-size: 15px; line-height: 20px; border-top: 1px solid var(--rule-soft); }
.foot-index a:hover { color: var(--ink); }
.foot-index a[aria-current="page"] { color: var(--red-text); }
.foot-legal { border-top: 1px solid var(--rule-soft); padding-top: 18px; margin-top: 8px; }
.foot-legal__k { display: block; font-size: 11.5px; color: var(--ink-2); margin-bottom: 6px; }
.site-foot a { color: var(--ink-2); }

/* ---------- touch targets ≥44px without changing the look ---------- */
.toc a::after { content: ""; position: absolute; left: 0; right: 0; top: -7px; bottom: -7px; }
.crumbs a { position: relative; }
.crumbs a::after { content: ""; position: absolute; left: -4px; right: -4px; top: -15px; bottom: -15px; }

/* ---------- hover feedback ---------- */
@media (prefers-reduced-motion: no-preference) {
  a, .nav a, .toc a, .cat, .related a { transition: color .2s ease, border-color .25s ease, text-decoration-color .2s ease, background-color .2s ease; }
  .nav a::after { transition: transform .32s var(--ease-out); }
}

/* =====================================================================
   2026-10-14d — three architects, one layer each (additive; nothing above is resized or recoloured)
   Neri&Hu, light: the page is a dark shed; only the figure and the blade are lit (opening card, title band).
   Carlo Scarpa, metal parts: a few precise fittings on the black — the red seal, the countdown digits,
     corner brackets, and a stepped end-cap on the rules (the Scarpa step).
   Wang Shu, structure: an unrolled scroll; blocks laid like courses, offset, with asymmetric voids.
   ===================================================================== */
body { background: radial-gradient(64% 460px at 28% 0, rgba(var(--light-2-rgb), .04), rgba(var(--light-2-rgb), 0)) no-repeat, var(--bg); }
h2 { position: relative; }
h2::before, .unlock::after {
  content: ""; position: absolute; top: -1px; width: 15px; height: 5px; pointer-events: none;
  background: linear-gradient(var(--steel), var(--steel)) 0 0 / 15px 2px no-repeat, linear-gradient(var(--steel), var(--steel)) 0 3px / 7px 2px no-repeat;
}
h2::before { left: 0; }
.unlock::after { right: 0; transform: scaleX(-1); }

/* header nav on phones: a visible cue that the list goes on */
@media (max-width: 760px) {
  .site-head .wrap { position: relative; }
  .site-head .wrap::after {
    content: "more \203A"; position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: center;
    padding: 2px 12px 0 30px; pointer-events: none; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2);
    background: linear-gradient(to right, rgba(var(--bg-rgb), 0), var(--bg) 22px);
  }
  .site-head--over .wrap::after { bottom: 4px; top: 4px; background: linear-gradient(to right, rgba(var(--bg-rgb), 0), rgba(var(--bg-rgb), .96) 22px); }
  .site-head.nav-at-end .wrap::after { opacity: 0; }
  .nav { padding-right: 64px; }
}

/* ---------- home: the title band (static poster frame, at most 55% of the viewport) ---------- */
.home-main { display: block; }
.band { position: relative; min-height: 55vh; min-height: 55svh; display: flex; align-items: flex-end; background: var(--bg); isolation: isolate; }
.band__art { position: absolute; left: 0; right: 0; top: 0; height: 55vh; height: 55svh; z-index: -2; overflow: hidden; }
.band__art img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 38%; display: block; }
.band__veil { position: absolute; left: 0; right: 0; top: 0; height: 55vh; height: 55svh; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(var(--bg-rgb), .9) 18%, rgba(var(--bg-rgb), .45) 46%, rgba(var(--bg-rgb), 0) 72%),
    linear-gradient(to right, rgba(var(--bg-rgb), .86) 0%, rgba(var(--bg-rgb), .5) 34%, rgba(var(--bg-rgb), 0) 62%); }
.band__in { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 96px var(--gutter) 26px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 40px; }
.hero__copy { max-width: 860px; }
.hero__copy .eyebrow { display: flex; margin: 0 0 14px; color: rgba(var(--white-rgb), .7); font-size: 12.5px; letter-spacing: .3em; }
.hero__copy h1 { font-size: clamp(38px, 4.4vw, 66px); line-height: 1; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; max-width: none; color: var(--white); text-shadow: 0 2px 30px rgba(var(--black-rgb), .45); }
.hero__copy h1 .h1-main { display: inline; }
.hero__copy h1 .h1-sub { display: block; margin-top: 12px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.25; letter-spacing: .01em; text-transform: none; color: rgba(var(--white-rgb), .8); }
.chop { display: inline-block; width: .74em; height: .74em; margin-left: .32em; vertical-align: -.02em; transform: rotate(-3deg); }
.hero__copy .lede { color: rgba(var(--white-rgb), .88); font-size: clamp(18px, 1.4vw, 21px); max-width: 52ch; margin: 16px 0 10px; }
.hero__copy .byline { margin: 0; color: rgba(var(--white-rgb), .6); }
.hero__copy .byline b { color: rgba(var(--white-rgb), .82); }
.hero__credit { margin: 0; max-width: 40ch; text-align: right; font-size: 10.5px; line-height: 1.6; letter-spacing: .14em; color: rgba(var(--white-rgb), .46); font-family: var(--serif); text-transform: uppercase; }
.band__replay {
  position: absolute; right: var(--gutter); top: 78px; z-index: 2; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 2px;
  background: none; border: 0; color: rgba(var(--white-rgb), .8); cursor: pointer; font: 500 11.5px/1 var(--serif); letter-spacing: .24em; text-transform: uppercase;
}
.band__replay span { position: relative; width: 30px; height: 30px; border: 1px solid rgba(var(--white-rgb), .42); }
.band__replay span::before { content: ""; position: absolute; left: 11px; top: 9px; border-style: solid; border-width: 5.5px 0 5.5px 9px; border-color: transparent transparent transparent var(--white); }
.band__replay span::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 7px; height: 7px; border-right: 1px solid var(--red); border-bottom: 1px solid var(--red); }
.band__replay:hover { color: var(--white); }
.band__replay:hover span { border-color: rgba(var(--white-rgb), .9); }
@media (max-width: 1440px) and (min-width: 761px) { .band__replay { right: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); } }

/* ---------- home: the countdown block, laid in two offset courses ---------- */
.home-dial { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 0 76px; align-items: start; padding-top: 30px; }
.home-dial .unlock { margin: 0; padding: 22px 0 22px; }
.home-dial .countdown { margin: 4px 0 0; }
.home-dial .countdown div { min-width: 0; padding: 0 30px 0 0; margin-right: 30px; }
.home-dial .countdown b { font-size: clamp(76px, 8.2vw, 124px); letter-spacing: -.01em; }
.home-dial .countdown small { margin-top: 10px; font-size: 12px; }
.home-dial .unlock__time { max-width: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--rule-soft); }
.home-dial .unlock__time b { display: inline; font-size: 30px; }
.home-dial .unlock__time span { display: inline; margin: 0; font-size: 19px; }
.home-dial .unlock__zones li:nth-child(n+4) { display: block; }
/* offset course */ .home-dial .quick { margin-top: 64px; border-top: 1px solid var(--rule); position: relative; }
.home-dial .quick::before { content: ""; position: absolute; left: 0; top: -1px; width: 15px; height: 5px; background: linear-gradient(var(--steel), var(--steel)) 0 0 / 15px 2px no-repeat, linear-gradient(var(--steel), var(--steel)) 0 3px / 7px 2px no-repeat; }
.quick__k { margin: 14px 0 6px; font-size: 12px; color: var(--ink-3); letter-spacing: .2em; text-transform: uppercase; }
.quick ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.quick li { margin: 0; }
.quick a { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 58px; padding: 14px 0 10px; border-bottom: 1px solid var(--rule-soft); text-decoration: none; color: var(--ink); font-size: 23px; }
.quick a b { font-weight: 500; font-size: 34px; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.quick a small { color: var(--ink-3); font-size: 10.5px; letter-spacing: .16em; margin-left: 6px; text-transform: uppercase; }
.quick a::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; }
.quick a:hover::after, .quick a:focus-visible::after { transform: scaleX(1); }
.quick__name { display: inline-block; }
@media (max-width: 1000px) {
  .home-dial { grid-template-columns: 1fr; }
  .home-dial .quick { margin-top: 26px; }
  .band__in { grid-template-columns: 1fr; }
  .hero__credit { text-align: left; max-width: none; }
}
@media (max-width: 760px) {
  .band__in { padding: 84px var(--gutter) 16px; gap: 10px; }
  .band__art img { object-position: 50% 30%; }
  .band__veil { background: linear-gradient(to top, var(--bg) 0%, rgba(var(--bg-rgb), .92) 26%, rgba(var(--bg-rgb), .5) 52%, rgba(var(--bg-rgb), .1) 80%); }
  .hero__copy .eyebrow { display: none; }
  .hero__copy h1 { font-size: 31px; letter-spacing: .05em; line-height: 1.02; }
  .hero__copy h1 .h1-sub { font-size: 17px; margin-top: 8px; }
  .hero__copy .lede { font-size: 16.5px; margin: 10px 0 8px; }
  .hero__copy .byline { font-size: 13px; }
  .hero__credit { font-size: 9px; letter-spacing: .1em; }
  .band__replay { top: 58px; right: 16px; font-size: 10.5px; letter-spacing: .18em; gap: 10px; }
  .band__replay span { width: 26px; height: 26px; }
  .band__replay span::before { left: 9px; top: 7px; }
  .home-dial { padding-top: 14px; }
  .home-dial .unlock { padding: 14px 0 16px; }
  .home-dial .countdown div { padding: 0 12px 0 0; margin-right: 14px; display: block; }
  .home-dial .countdown b { font-size: 58px; }
  .home-dial .countdown small { margin-top: 6px; font-size: 10.5px; }
  .home-dial .unlock__time { margin-top: 14px; padding-top: 12px; gap: 2px 12px; }
  .home-dial .unlock__time b { font-size: 22px; }
  .home-dial .unlock__time span { font-size: 15.5px; }
  .home-dial .unlock__zones { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; margin-top: 10px; }
  .home-dial .unlock__zones li, .home-dial .unlock__zones li:nth-child(n+4) { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; font-size: 13px; }
  .home-dial .unlock__zones b { display: inline; font-size: 14.5px; }
  .quick__k { display: none; }
  .quick ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .quick a { min-height: 48px; font-size: 17px; padding: 12px 0 8px; }
  .quick a b { font-size: 22px; }
  .quick a small { display: none; }
}

/* =====================================================================
   OPENING CARD (home, laid over the finished page by the script; never in the HTML)
   Film timing, CSS only, transform + opacity only. t = 0 is when the portrait has loaded (1.5 s at most):
     0.00–0.35  black
     0.35  light pool over the stage rises, opacity 0 → 1          2.2 s  cubic-bezier(.4, 0, .2, 1)
     0.35  portrait comes up from the dark, opacity 0 → 1           1.9 s  cubic-bezier(.4, 0, .2, 1)
     0.35  …and settles from scale 1.07 / 1.2% higher to rest       2.6 s  cubic-bezier(.16, 1, .3, 1)
     0.95  one band of light passes over the figure, left to right  1.5 s  cubic-bezier(.45, 0, .2, 1)
           (a skewed strip moved by translateX inside a box masked by the portrait's own alpha)
     1.75  game wordmark rises 14 px and fades in                   1.1 s  cubic-bezier(.22, 1, .36, 1)
     2.20  "Unlocks in"                                             0.6 s  ease-out
     2.35 / 2.50 / 2.65  days / hours / min slide up into their slots (104% → 0, the cell clips them)
                                                                    0.8 s  cubic-bezier(.2, .9, .25, 1)
     2.60 / 2.75 / 2.90  the unit labels under them                 0.5 s  ease-out
     2.95 / 3.10  the date line, then "Your time"                   0.7 s  cubic-bezier(.22, 1, .36, 1)
     3.30  close button, our small mark, the credit, corner brackets 0.6 s ease-out
   Closing: the whole card fades out (0.32 s, cubic-bezier(.4, 0, 1, 1)) while the portrait grows 2%.
   prefers-reduced-motion: no animation at all, every element in its final state; closing is instant.
   ===================================================================== */
html.intro-open, html.intro-open body { overflow: hidden; }
/* the black frame before the card is built; if the page script never arrives it lifts by itself after 1 s */
html.intro-wait body::after { content: ""; position: fixed; inset: 0; z-index: 99; background: var(--stage); pointer-events: none; animation: kfp-wait-off .01s linear 1s forwards; }
@keyframes kfp-wait-off { to { opacity: 0; visibility: hidden; } }

.intro { position: fixed; inset: 0; z-index: 100; overflow: hidden; background: var(--stage); color: var(--ink); outline: none; }
.intro__light { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(38% 62% at 50% 0%, rgba(var(--light-rgb), .17), rgba(var(--light-rgb), .06) 52%, rgba(var(--light-rgb), 0) 78%),
    radial-gradient(120% 100% at 50% 38%, rgba(var(--black-rgb), 0) 52%, rgba(var(--black-rgb), .55) 100%); }
.intro__fig { position: absolute; left: 50%; top: 1.5vh; height: 97vh; aspect-ratio: 1170 / 1212; transform: translateX(-55.6%); }
.intro__art { display: block; width: 100%; height: 100%; }
/* a single band of light passes over the figure once (masked by the portrait's own outline) */
.intro__sheen { display: none; }
.intro__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 64%; pointer-events: none;
  background:
    radial-gradient(34% 46% at 50% 58%, rgba(var(--stage-rgb), .9), rgba(var(--stage-rgb), .62) 58%, rgba(var(--stage-rgb), 0) 100%),
    linear-gradient(to top, var(--stage) 0%, rgba(var(--stage-rgb), .85) 14%, rgba(var(--stage-rgb), 0) 40%); }
.intro__card { position: absolute; left: 0; right: 0; bottom: 8.5vh; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px; }
.intro__logo { margin: 0; max-width: none; line-height: 0; }
.intro__logo img { width: min(620px, 78vw); height: auto; }
.intro__k { margin: 26px 0 8px; max-width: none; font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-3); }
.intro__cd { position: relative; display: flex; justify-content: center; padding: 14px 0 12px; }
.intro__cd::before, .intro__cd::after { content: ""; position: absolute; width: 16px; height: 16px; border-color: var(--steel); border-style: solid; }
.intro__cd::before { left: -22px; top: 0; border-width: 1px 0 0 1px; }
.intro__cd::after { right: -22px; bottom: 0; border-width: 0 1px 1px 0; }
.intro__cell { position: relative; padding: 0 clamp(20px, 2.6vw, 40px); }
.intro__cell + .intro__cell::before { content: ""; position: absolute; left: 0; top: 8%; bottom: 22%; width: 1px; background: var(--rule); }
.intro__cell + .intro__cell::after { content: ""; position: absolute; left: -2px; top: 8%; width: 5px; height: 5px; margin-top: -2px; background: var(--red); }
.intro__slot { display: block; overflow: hidden; font-size: clamp(76px, 12.2vh, 136px); line-height: 1.02; height: 1.02em; }
.intro__slot b { display: block; font-weight: 500; color: var(--white); letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; }
.intro__cell small { display: block; margin-top: 10px; font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-3); }
.intro__when { margin: 20px 0 0; max-width: none; font-size: 16.5px; letter-spacing: .03em; color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; }
.intro__mine { margin: 6px 0 0; max-width: none; font-size: 14.5px; color: var(--ink-3); font-variant-numeric: lining-nums tabular-nums; }
.intro__brand { position: absolute; left: 44px; top: 34px; margin: 0; display: flex; align-items: center; gap: 12px; font-size: 11.5px; letter-spacing: .34em; color: var(--ink-2); }
.intro__brand .brand__mark { width: 24px; height: 24px; font-size: 15px; }
.intro__x { position: absolute; right: 18px; top: 16px; width: 52px; height: 52px; padding: 0; border: 1px solid rgba(var(--white-rgb), .34); background: rgba(var(--stage-rgb), .4); cursor: pointer; }
.intro__x span::before, .intro__x span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 1.5px; margin: -.75px 0 0 -11px; background: var(--white); transform: rotate(45deg); }
.intro__x span::after { transform: rotate(-45deg); }
.intro__x:hover, .intro__x:focus-visible { border-color: var(--red); }
.intro__credit { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0 auto; padding: 0 16px; max-width: none; text-align: center; font-size: 10px; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); }
.intro__corner { position: absolute; width: 22px; height: 22px; border: 0 solid var(--steel); pointer-events: none; }
.intro__corner--tl { left: 12px; top: 12px; border-width: 1px 0 0 1px; }
.intro__corner--br { right: 12px; bottom: 12px; border-width: 0 1px 1px 0; }
@media (max-width: 767px) {
  .intro__fig { top: 50px; height: auto; width: 132vw; }
  .intro__floor { height: 58%; }
  .intro__card { bottom: max(48px, 6vh); }
  .intro__logo img { width: 84vw; }
  .intro__k { margin: 16px 0 4px; font-size: 10.5px; }
  .intro__cd { padding: 10px 0 8px; }
  .intro__cd::before { left: -10px; } .intro__cd::after { right: -10px; }
  .intro__cell { padding: 0 18px; }
  .intro__slot { font-size: 60px; }
  .intro__cell small { margin-top: 6px; font-size: 10px; letter-spacing: .24em; }
  .intro__when { margin-top: 12px; font-size: 13.5px; }
  .intro__mine { font-size: 12.5px; }
  .intro__brand { left: 22px; top: 22px; font-size: 0; letter-spacing: 0; }
  .intro__x { right: 10px; top: 10px; width: 48px; height: 48px; }
  .intro__credit { bottom: 12px; padding: 0 40px; font-size: 8.5px; letter-spacing: .1em; text-wrap: balance; }
  .intro__corner--tl { left: 8px; top: 8px; }
  .intro__corner--br { right: 8px; bottom: 8px; }
}
@media (max-width: 767px) and (max-height: 700px) {
  .intro__fig { width: 112vw; top: 46px; }
  .intro__slot { font-size: 54px; }
}

@media (prefers-reduced-motion: no-preference) {
  .intro:not(.is-on) *, .intro:not(.is-on) *::before, .intro:not(.is-on) *::after { animation-play-state: paused !important; }
  .intro__light { animation: kfp-fade 2.2s cubic-bezier(.4, 0, .2, 1) .35s both; }
  .intro__art { animation: kfp-fade 1.9s cubic-bezier(.4, 0, .2, 1) .35s both; }
  .intro__fig { animation: kfp-portrait 2.6s cubic-bezier(.16, 1, .3, 1) .35s both; }
  .intro__sheen { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none;
    -webkit-mask: url("/assets/img/intro-hun-1170.webp") center / 100% 100% no-repeat; mask: url("/assets/img/intro-hun-1170.webp") center / 100% 100% no-repeat; }
  .intro__sheen i { position: absolute; top: -10%; bottom: -10%; left: 0; width: 46%; transform: translateX(-120%) skewX(-14deg);
    background: linear-gradient(90deg, rgba(var(--sheen-rgb), 0), rgba(var(--sheen-rgb), .26) 50%, rgba(var(--sheen-rgb), 0));
    animation: kfp-sheen 1.5s cubic-bezier(.45, 0, .2, 1) .95s both; }
  .intro__logo { animation: kfp-rise 1.1s cubic-bezier(.22, 1, .36, 1) 1.75s both; }
  .intro__k { animation: kfp-fade .6s ease-out 2.2s both; }
  .intro__slot b { animation: kfp-slot .8s cubic-bezier(.2, .9, .25, 1) 2.35s both; }
  .intro__cell--2 .intro__slot b { animation-delay: 2.5s; }
  .intro__cell--3 .intro__slot b { animation-delay: 2.65s; }
  .intro__cell small, .intro__cell::before, .intro__cell::after { animation: kfp-fade .5s ease-out 2.6s both; }
  .intro__cell--2 small, .intro__cell--2::before, .intro__cell--2::after { animation-delay: 2.75s; }
  .intro__cell--3 small, .intro__cell--3::before, .intro__cell--3::after { animation-delay: 2.9s; }
  .intro__cd::before, .intro__cd::after { animation: kfp-fade .6s ease-out 2.35s both; }
  .intro__when { animation: kfp-rise .7s cubic-bezier(.22, 1, .36, 1) 2.95s both; }
  .intro__mine { animation: kfp-rise .7s cubic-bezier(.22, 1, .36, 1) 3.1s both; }
  .intro__x, .intro__brand, .intro__credit, .intro__corner { animation: kfp-fade .6s ease-out 3.3s both; }
  .intro.is-leaving { animation: kfp-out .32s cubic-bezier(.4, 0, 1, 1) both; }
  .intro.is-leaving .intro__art { animation: kfp-grow .32s cubic-bezier(.4, 0, 1, 1) both; }
  .band__replay span { transition: border-color .25s ease; }
  .quick a::after { transition: transform .45s var(--ease-out); }
  .quick__name { transition: transform .3s var(--ease-out); }
  .quick a:hover .quick__name { transform: translateX(6px); }
  .site-head .wrap::after { transition: opacity .25s ease; }
}
@keyframes kfp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kfp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes kfp-portrait { from { transform: translateX(-55.6%) translateY(-1.2%) scale(1.07); } to { transform: translateX(-55.6%); } }
@keyframes kfp-slot { from { transform: translateY(104%); } to { transform: none; } }
@keyframes kfp-sheen { from { transform: translateX(-120%) skewX(-14deg); } to { transform: translateX(260%) skewX(-14deg); } }
@keyframes kfp-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes kfp-grow { from { transform: none; } to { transform: scale(1.02); } }

@media print { .site-head, .rail, .toc-bar, .band__replay, .intro { display: none; } }

/* ---------- site mark "二 · 刃" (2026-10-14d): an iron plate with a K cut out of it; the old 影 seal is no longer the site mark ---------- */
.brand { gap: 0; }
.brand img { display: block; height: 30px; width: auto; }
.brand__k { display: none !important; }
.foot-sig img { display: block; height: 30px; width: auto; }
.intro__brand img { display: block; height: 24px; width: auto; }
.intro__brand .intro__k-mark { display: none; }
@media (max-width: 760px) {
  .brand__lockup { display: none !important; }
  .brand__k { display: block !important; width: 30px; }
}
@media (max-width: 767px) {
  .intro__brand .intro__lockup { display: none; }
  .intro__brand .intro__k-mark { display: block; height: 28px; }
}
main[tabindex="-1"]:focus { outline: none; }

/* ---------- codex pages (2026-10-14f, fix pass 1b): bosses / weapons / characters ----------
   Page hero (one official media-library screenshot, full bleed) → title → count strip → per section: a lead frame across
   the main column, the other framed cards in two aligned columns (an odd last one goes wide), then the entries no official
   frame names as a typographic name wall. A card is the dossier itself: frame → name + seal → sources → caption and
   attribution → "Known details" fold. No boxes, no radius; hairline top + the 40px red tick as before. Red stays on the
   seals, the tick and the fold's + / − (the same fold component as the contents bar and the FAQ). */
.nw { white-space: nowrap; }

.hero { position: relative; margin: 0; height: min(50vh, 31.25vw); min-height: 260px; overflow: hidden; background: var(--bg-1); }
.hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, var(--bg) 0, rgba(var(--bg-rgb), .72) 14%, rgba(var(--bg-rgb), 0) 46%),
              linear-gradient(to bottom, rgba(var(--bg-rgb), .45), rgba(var(--bg-rgb), 0) 22%); }
.hero__credit { position: absolute; z-index: 1; right: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); bottom: 14px; max-width: calc(100% - 2 * var(--gutter));
  font-size: 10.5px; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); text-align: right; }
.hero__credit a { color: var(--ink-3); text-decoration-color: rgba(var(--white-rgb), .25); }
.hero + .layout .page-head { position: relative; z-index: 1; margin-top: -34px; }
@media (max-width: 760px) {
  .hero { height: 40vh; min-height: 230px; max-height: 320px; }
  .hero__credit { left: var(--gutter); right: var(--gutter); bottom: 10px; font-size: 9px; letter-spacing: .1em; text-align: left; }
  .hero + .layout .page-head { margin-top: -10px; }
}

/* Table view (closed) and the contents bar share one row under the count strip */
.folds { display: flex; flex-wrap: wrap; margin: -20px 0 0; border-bottom: 1px solid var(--rule); }
.folds > details { flex: 1 1 auto; min-width: 0; margin: 0; border: 0; }
.folds > .roster-fold { flex: 0 1 auto; padding-right: 18px; border-right: 1px solid var(--rule-soft); }
.folds > .roster-fold > summary { min-height: 48px; }
.folds > .toc-bar { padding-left: 16px; }
.folds > details[open] { flex-basis: 100%; padding: 0; border-right: 0; }
.folds > details[open] + details { border-top: 1px solid var(--rule-soft); padding-left: 0; }
@media (min-width: 1200px) { .folds > .roster-fold { flex: 1 1 auto; border-right: 0; padding-right: 0; } }
.folds + section > h2 { margin-top: 40px; }
.roster-fold > summary, .dossier__more > summary { list-style: none; cursor: pointer; min-height: var(--tap); display: flex; align-items: center; gap: 12px; padding: 0 2px; color: var(--ink); font-size: 16px; }
.roster-fold > summary::-webkit-details-marker, .dossier__more > summary::-webkit-details-marker { display: none; }
.roster-fold > summary::after, .dossier__more > summary::after { content: "+"; content: "+" / ""; margin-left: auto; color: var(--red-text); font-size: 22px; line-height: 1; }
.roster-fold[open] > summary::after, .dossier__more[open] > summary::after { content: "\2212"; content: "\2212" / ""; }
.roster-fold .table-wrap { margin: 2px 0 16px; }

.cards { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 40px; align-items: start; margin: 6px 0 0; }
@media (min-width: 761px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dossier--card { margin: 0 0 44px; background: none; position: relative; }
.dossier--lead, .dossier--wide { grid-column: 1 / -1; }
.dossier--card .dossier__head { padding: 16px 0 6px; }
.dossier--card .dossier__foot { padding: 0 0 8px; }
.plate__frame { position: relative; overflow: hidden; aspect-ratio: 3 / 2; margin-top: 12px; background: var(--bg-1); }
.dossier--lead > .plate__frame { aspect-ratio: 16 / 9; }
.plate__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the frame sits in the warehouse dark: edges and foot fall away, the lit figure or blade stays */
.plate__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(125% 105% at 50% 40%, rgba(var(--bg-rgb), 0) 54%, rgba(var(--bg-rgb), .6) 100%), linear-gradient(to top, rgba(var(--bg-rgb), .5), rgba(var(--bg-rgb), 0) 24%); }
.plate__cap, .plate figcaption { margin: 0 0 12px; max-width: none; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); }
.plate__onscreen { color: var(--ink-2); }
.plate__credit { display: block; margin-top: 4px; }
.plate__credit a { color: inherit; }
.plate { margin: 0; }
.plate--extra { margin-top: 22px; }
.plate--extra figcaption { margin-top: 10px; }
.dossier__more { border-top: 1px solid var(--rule-soft); }
.dossier__more > summary { font-size: 15.5px; }
.dossier__more > summary small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.dossier__more-in { padding: 2px 0 14px; }
.dossier__more-in .phases { margin-top: 6px; }
.dossier--card .facts th { width: 34%; }
/* a closed framed card opens from its frame too (the summary's hit area is laid over the frame only; names and captions stay selectable) */
.dossier--card:not(.dossier--unlit) > .dossier__more:not([open]) > summary::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; aspect-ratio: 3 / 2; }
.dossier--lead > .dossier__more:not([open]) > summary::before { aspect-ratio: 16 / 9; }

@media (min-width: 761px) {
  /* lead: frame across the column, name and sources left, caption right */
  .dossier--lead { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 40px; }
  .dossier--lead > .plate__frame, .dossier--lead > .dossier__more { grid-column: 1 / -1; }
  .dossier--lead > .dossier__head { grid-column: 1; grid-row: 2; padding-top: 20px; }
  .dossier--lead > .dossier__head h3 { font-size: 30px; }
  .dossier--lead > .dossier__foot { grid-column: 1; grid-row: 3; }
  .dossier--lead > .plate__cap { grid-column: 2; grid-row: 2 / span 2; padding-top: 22px; }
  /* wide card, and any framed card once opened: frame left, everything else right */
  .dossier--wide, .cards > .dossier--card:not(.dossier--lead):has(> .dossier__more[open]) {
    grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 32px; align-content: start; }
  .dossier--wide > *, .cards > .dossier--card:not(.dossier--lead):has(> .dossier__more[open]) > * { grid-column: 2; }
  .dossier--wide > .plate__frame, .cards > .dossier--card:not(.dossier--lead):has(> .dossier__more[open]) > .plate__frame { grid-column: 1; grid-row: 1 / span 5; align-self: start; }
  .cards > .dossier--card:not(.dossier--lead):has(> .dossier__more[open]) > .plate__frame { position: sticky; top: 24px; } /* the frame stays beside the facts while they are read */
  .dossier--wide > .dossier__head, .cards > .dossier--card:has(> .dossier__more[open]) > .dossier__head { padding-top: 12px; }
  .dossier--wide > .dossier__more:not([open]) > summary::before { right: auto; width: calc((100% - 32px) * 1.1 / 2.1); }
}

/* entries no official frame names yet: a typographic name wall */
.wall { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px; margin: 0 0 12px; }
@media (min-width: 761px) { .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dossier--unlit { display: flex; flex-direction: column; margin-bottom: 30px;
  background: radial-gradient(100% 150px at 0 0, rgba(var(--light-2-rgb), .045), rgba(var(--light-2-rgb), 0)); }
.dossier--unlit .dossier__head { padding: 20px 0 4px; gap: 8px 12px; }
.dossier--unlit .dossier__head h3 { font-size: 30px; line-height: 1.12; }
.dossier--unlit .dossier__head h3[lang] { font-size: 40px; line-height: 1.1; letter-spacing: .04em; }
.unlit-note { margin: 4px 0 12px; font-size: 10.5px; line-height: 1.6; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.dossier--unlit > .dossier__more { margin-top: auto; }
.wall > .dossier--unlit:has(> .dossier__more[open]) { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .dossier--card { margin-bottom: 36px; }
  .dossier--lead .dossier__head h3 { font-size: 26px; }
  .dossier--unlit { margin-bottom: 22px; }
  .dossier--unlit .dossier__head h3 { font-size: 26px; }
  .dossier--unlit .dossier__head h3[lang] { font-size: 34px; }
}

/* hover (any motion setting): the frame's dark veil lifts and the name brightens; transitions only when motion is welcome */
.dossier--card:not(.dossier--unlit):hover > .plate__frame::after { opacity: .4; }
.dossier--card:hover > .dossier__head h3 { color: var(--white); }
@media (prefers-reduced-motion: no-preference) {
  .plate__frame::after { transition: opacity .5s ease; }
  .dossier--card .dossier__head h3 { transition: color .3s ease; }
  .plate__frame img { transition: scale .6s var(--ease-out); }
  @media (hover: hover) { .dossier--card:hover > .plate__frame img { scale: 1.035; } }
  .dossier__more[open] > .dossier__more-in { animation: kfp-rise .45s var(--ease-out) both; }
  .hero img { animation: kfp-settle 2.6s var(--ease-film) both; }
  /* as a frame scrolls in it settles, the same 1.08 -> 1 move as the opening portrait */
  @supports (animation-timeline: view()) {
    .plate__frame img { animation: kfp-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
}
@keyframes kfp-settle { from { transform: scale(1.08); } to { transform: none; } }

/* ---------- gallery (/gallery, 2026-10-14 round 2) ----------
   Plain layout from existing parts: the round-1 .cards grid (two columns from 761px) of figure.plate, each frame
   shown whole at its own proportions (no crop, no dark veil, so the caption describes exactly what is shown);
   wide concept sheets span the column. Each frame is a link to its large file; app.js 4c opens it in a viewer. */
.gl-grid { row-gap: 0; }
.gl { margin: 0 0 34px; }
.gl--whole { grid-column: 1 / -1; }
.gl__a { display: block; }
.gl .plate__frame::after { display: none; }
.gl .plate__cap { margin-top: 10px; }
h2 .gl-n { margin-left: 8px; font-size: var(--fs-small); font-weight: 400; letter-spacing: .02em; color: var(--ink-3); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) { .gl__a:hover img { scale: 1.02; } }

/* viewer: a native modal dialog over a stage-dark ground; white text, focus ring is the site's --red-text outline */
.viewer { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--stage); color: var(--ink-2); touch-action: pan-y pinch-zoom;
  display: none; grid-template-rows: auto minmax(0, 1fr) auto; }
.viewer[open] { display: grid; }
.viewer::backdrop { background: rgba(var(--stage-rgb), .9); }
.viewer__bar, .viewer__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px var(--gutter); }
.viewer__n { margin: 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-variant-numeric: lining-nums tabular-nums; }
.viewer__btn { min-height: var(--tap); min-width: var(--tap); padding: 0 14px; background: none; border: 1px solid var(--rule); color: var(--ink); font: 500 13px/1 var(--serif); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.viewer__btn:hover { border-color: rgba(var(--white-rgb), .6); color: var(--white); }
.viewer__fig { margin: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 var(--gutter); }
.viewer__img { display: block; max-width: 100%; max-height: calc(100vh - 250px); max-height: calc(100dvh - 250px); width: auto; height: auto; object-fit: contain; }
.viewer__cap { max-width: 72ch; margin: 12px 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); text-align: center; }
.viewer__cap .plate__credit { display: block; margin-top: 4px; }
.viewer__cap a { color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) { .viewer[open] { animation: kfp-fade .25s ease both; } }
html:has(dialog.viewer[open]) { overflow: hidden; } /* the page behind the open viewer does not scroll */