/* ID-PreFeR — project page
   Design system adapted from petal-pku.pages.dev: Peking-University red as the primary,
   Inter / JetBrains Mono / Newsreader as the three voices, cream ground, hairline rules.
   Page-specific grammar: one accent (red = ID-PreFeR, and the identity signal it protects),
   a glyph taxonomy for what each method asks of you, and a single recurring datum —
   the 0.613 that the ruined input already scores. */

:root{
  /* primary — 北大红 */
  --blue:#94070A; --blue-600:#7A0608; --blue-50:#FAEEED; --blue-100:#EDD3D1;
  /* regime accents, taken from the paper's own figure headers */
  --teal:#00337F; --teal-600:#002A66; --teal-50:#EAEEF5; --teal-100:#C6D2E6;
  --rf:#B2582A;
  /* neutrals */
  --gold:#8A7449; --gold-2:#A68C56; --gold-50:#F3EEE2;
  --silver:#9A9DA0; --silver-100:#DCDDDE; --silver-50:#F0F1F1;
  --ink:#1A1410; --ink-2:#413A33; --muted:#73736A;
  --line:#E6E2D9; --bg:#FBFAF7; --bg-soft:#F4F2EC; --card:#FFFFFF;
  /* svg roles carried over from the poster's diagrams */
  --id:var(--blue); --train:var(--blue); --frozen:var(--silver); --bar:var(--silver-100);
  --cell:var(--bg-soft); --rule:var(--line); --paper:var(--card);
  --ink2:var(--ink-2); --ink3:var(--muted);
  --radius:13px;
  --shadow:0 1px 2px rgba(26,20,16,.05), 0 14px 34px -20px rgba(26,20,16,.28);
  --shadow-lg:0 30px 70px -32px rgba(148,7,10,.26);
  --maxw:1120px;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --eq:'Newsreader',Georgia,'Times New Roman',serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:74px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  font-feature-settings:"cv05" 1,"ss03" 1; -webkit-font-smoothing:antialiased;
}
/* height:auto defeats the width/height attributes' presentational hints, which
   otherwise pin an <img> to its intrinsic pixel height once CSS sets the width */
img{max-width:100%; height:auto; display:block}
/* table captions carry the accessible name; the visible <div class="th"> carries the design */
.visually-hidden{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
a{color:var(--blue-600); text-decoration-thickness:1px; text-underline-offset:2.5px}
a:hover{color:var(--blue)}
:focus-visible{outline:2.5px solid var(--blue); outline-offset:3px; border-radius:4px}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.mono{font-family:var(--mono)}
.serif{font-family:var(--sans); font-weight:800; letter-spacing:-.03em}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:10px; z-index:99; background:var(--card); padding:9px 14px;
  border:1px solid var(--line); border-radius:8px}

/* ── section rhythm ──────────────────────────────────────────────── */
section{padding:76px 0; border-top:1px solid var(--line)}
.kicker{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono);
  font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); margin:0 0 14px}
.kicker::before{content:""; width:7px; height:7px; background:var(--blue); border-radius:1px;
  box-shadow:11px 0 0 var(--teal), 22px 0 0 var(--gold-2); margin-right:20px}
.h2{font-size:clamp(28px,4.1vw,41px); line-height:1.12; margin:0 0 18px; max-width:22ch}
.h2.wide{max-width:30ch}
.lede{font-size:18.5px; color:var(--ink-2); max-width:70ch; margin:0 0 26px}
.lede b{font-weight:650; color:var(--ink)}
.note{font-size:14px; color:var(--muted); max-width:74ch; margin:16px 0 0}
h3{font-size:19px; letter-spacing:-.015em; margin:34px 0 12px}

/* ── top nav ─────────────────────────────────────────────────────── */
.topnav{position:sticky; top:0; z-index:40; background:rgba(251,250,247,.9);
  backdrop-filter:blur(11px) saturate(1.4); border-bottom:1px solid var(--line)}
.tn-in{max-width:var(--maxw); margin:0 auto; padding:0 24px; height:56px;
  display:flex; align-items:center; gap:20px}
.tn-brand{flex:0 0 auto; font-family:var(--mono); font-size:13px; font-weight:600;
  letter-spacing:-.02em; color:var(--ink); text-decoration:none}
.tn-brand span{color:var(--blue)}
.tn-links{flex:1 1 auto; display:flex; gap:3px; overflow-x:auto; scrollbar-width:none;
  -ms-overflow-style:none}
.tn-links::-webkit-scrollbar{display:none}
.tn-links a{flex:0 0 auto; font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.02em; color:var(--muted); text-decoration:none; padding:7px 9px; border-radius:7px}
.tn-links a:hover{color:var(--ink); background:var(--bg-soft)}
.tn-links a[aria-current="true"]{color:var(--blue); background:var(--blue-50)}
.tn-pdf{flex:0 0 auto; font-family:var(--mono); font-size:11.5px; font-weight:600;
  color:var(--card); background:var(--blue); padding:7px 13px; border-radius:8px; text-decoration:none}
.tn-pdf:hover{background:var(--blue-600); color:var(--card)}
.read{position:absolute; left:0; bottom:-1px; height:2px; background:var(--blue); width:0}
/* the fade only earns its keep once the rail actually scrolls */
@media(max-width:920px){
  .tn-links{mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent)}
}
@media(max-width:760px){ .tn-brand{font-size:12px} .tn-pdf{display:none} }

/* ── hero ────────────────────────────────────────────────────────── */
.hero{padding:52px 0 20px; background:
  radial-gradient(1100px 420px at 12% -8%, var(--blue-50) 0, transparent 62%),
  radial-gradient(900px 380px at 96% 4%, var(--teal-50) 0, transparent 60%);
  border-bottom:1px solid var(--line)}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono);
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-600); background:var(--card); border:1px solid var(--blue-100);
  padding:5px 11px; border-radius:999px; margin:0 0 20px}
.eyebrow i{width:5px; height:5px; border-radius:50%; background:var(--blue); font-style:normal}
h1{font-size:clamp(42px,7.4vw,78px); line-height:.98; letter-spacing:-.045em;
  font-weight:900; margin:0 0 6px}
h1 .pre{color:var(--blue)}
.subtitle{font-size:clamp(19px,2.6vw,26px); line-height:1.28; letter-spacing:-.025em;
  font-weight:600; color:var(--ink-2); margin:0 0 22px; max-width:30ch}
.thesis{font-size:19.5px; line-height:1.58; color:var(--ink); max-width:56ch; margin:0 0 26px}
.thesis b{font-weight:680}
.byline{font-size:14.5px; line-height:1.75; color:var(--ink-2); max-width:78ch; margin:0 0 6px}
.byline sup{color:var(--blue-600); font-weight:700; font-size:10.5px}
.affil{font-family:var(--mono); font-size:11.5px; line-height:1.9; color:var(--muted);
  max-width:78ch; margin:0 0 22px}
.affil sup{color:var(--blue-600); font-weight:700}

.pills{display:flex; flex-wrap:wrap; gap:9px; margin:0; padding:0; list-style:none}
.pill{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono);
  font-size:12px; font-weight:600; letter-spacing:.01em; text-decoration:none;
  color:var(--card); background:var(--ink); border:1px solid var(--ink);
  padding:8px 14px; border-radius:9px}
.pill:hover{background:var(--blue); border-color:var(--blue); color:var(--card)}
.pill.ghost{background:var(--card); border-color:var(--line); color:var(--ink-2)}
.pill.ghost:hover{border-color:var(--blue); color:var(--blue); background:var(--card)}
.pill.soon{background:var(--bg-soft); border-color:var(--line); color:var(--muted);
  cursor:default; border-style:dashed}
.pill.soon:hover{background:var(--bg-soft); border-color:var(--line); color:var(--muted)}
.pill svg{width:13px; height:13px; flex:none}

.hero-top{display:grid; grid-template-columns:1.04fr .96fr; gap:44px; align-items:start;
  padding:0 0 34px}
@media(max-width:920px){ .hero-top{grid-template-columns:1fr; gap:34px} }

/* Two real columns, bottoms flush: the teaser stretches to the height of the
   title-and-links column, and the comparison pane absorbs whatever is left over
   after the filmstrip and its caption. The pane already crops to fill, so the
   column's height only decides how much of the frame you see. Below the
   single-column breakpoint the pane goes back to its own square proportion. */
@media(min-width:921px){
  .hero-top{align-items:stretch}
  .artcard{display:flex; flex-direction:column}
  .artcard .cmp{flex:1 1 auto; aspect-ratio:auto; max-height:none; min-height:270px}
}

/* ── cards ───────────────────────────────────────────────────────── */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:30px 0 0}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; box-shadow:inset 3px 0 0 var(--blue)}
.card:nth-child(2){box-shadow:inset 3px 0 0 var(--teal)}
.card:nth-child(3){box-shadow:inset 3px 0 0 var(--gold-2)}
.card h4{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.04em;
  color:var(--muted); margin:0 0 9px}
.card p{margin:0; font-size:15.5px; line-height:1.62; color:var(--ink-2)}
.card p b{color:var(--ink); font-weight:650}
@media(max-width:860px){ .cards{grid-template-columns:1fr} }

/* ── figures ─────────────────────────────────────────────────────── */
.figure{margin:32px 0 0; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}
.figure > img{width:100%; border-radius:7px}
.figure .scrollx{overflow-x:auto; border-radius:7px}
.figure .scrollx img{border-radius:7px; min-width:720px}
.figcap{margin:14px 4px 2px; font-size:13.5px; line-height:1.62; color:var(--muted)}
.figcap > b:first-child{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2); margin-right:8px}
.figeq{margin:18px 0 0; padding:15px 18px; background:var(--bg-soft);
  border:1px solid var(--line); border-radius:9px; font-family:var(--eq);
  font-style:italic; font-size:16.5px; line-height:1.9; color:var(--ink); overflow-x:auto}
.figeq .v{font-family:var(--eq); font-style:italic}
/* norms and brackets are operators; italicising them reads as a variable */
.figeq .op{font-family:var(--sans); font-style:normal; font-weight:400; padding:0 .14em}
.figeq sub,.figeq sup{font-family:var(--mono); font-style:normal; font-size:9.5px;
  letter-spacing:0; color:var(--ink-2)}
.figeq em{color:var(--blue); font-style:italic}
.figeq .gl{display:block; margin-top:9px; font-family:var(--sans); font-style:normal;
  font-size:13px; line-height:1.6; color:var(--muted)}

/* ── the method glyph taxonomy: what a method asks you to supply ─── */
.rg{font-family:var(--mono); font-size:9px; font-weight:700; line-height:1;
  display:inline-block; width:1em; text-align:center; vertical-align:.08em; margin-right:.5em}
.rg-none{color:var(--rf)}      /* ◆  no reference photos           */
.rg-hq{color:var(--teal)}      /* ●  sharp reference photos only  */
.rg-mix{color:var(--blue)}     /* ■  mixed-quality references     */
tbody td .rg{font-size:13px; margin-right:0}
.legend{display:flex; flex-wrap:wrap; gap:6px 20px; margin:22px 0 0; padding:13px 16px;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:9px}
.legend span{font-family:var(--mono); font-size:11.5px; color:var(--ink-2); white-space:nowrap}

/* ── stage boxes ─────────────────────────────────────────────────── */
.stagebox{margin:22px 0 0; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.stagehead{display:flex; align-items:baseline; gap:14px; padding:17px 22px;
  border-bottom:1px solid var(--line); background:var(--bg-soft)}
.stagenum{flex:0 0 auto; font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.04em; color:var(--card); background:var(--blue);
  padding:4px 9px; border-radius:6px; white-space:nowrap}
.stagenum.samp{background:var(--teal)}
.stagehead h3{margin:0; font-size:21px; letter-spacing:-.022em; line-height:1.28}
.stagebody{display:grid; grid-template-columns:1fr .92fr; gap:26px; padding:22px}
.stagebody p{margin:0 0 14px; font-size:15.8px; line-height:1.68; color:var(--ink-2)}
.stagebody p:last-of-type{margin-bottom:0}
.stagebody b{color:var(--ink); font-weight:650}
.stagebody .figeq{margin-top:16px}
.stagefig{margin:0; align-self:start}
.stagefig svg{width:100%; height:auto; display:block}
.stagefig figcaption{margin-top:11px; font-size:13px; line-height:1.58; color:var(--muted)}
.stagetags{display:flex; flex-wrap:wrap; gap:7px; margin:16px 0 0}
.tag{font-family:var(--mono); font-size:11.5px; font-weight:500; color:var(--ink-2);
  background:var(--bg-soft); border:1px solid var(--line); padding:4px 10px; border-radius:6px}
.tag.on{color:var(--blue-600); background:var(--blue-50); border-color:var(--blue-100)}
@media(max-width:860px){ .stagebody{grid-template-columns:1fr; gap:18px} }

/* ── comparison stage (drag slider + method rail) ────────────────── */
.stage{--cmp-maxh:560px; --ar:1; display:grid; grid-template-columns:1fr 232px; gap:16px;
  margin:28px 0 0; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}
.cmpwrap{min-width:0}
.cmp{position:relative; aspect-ratio:var(--ar); max-height:var(--cmp-maxh);
  margin:0 auto; overflow:hidden; border-radius:9px; background:var(--bg-soft);
  touch-action:pan-y; cursor:ew-resize; user-select:none; width:100%}
.cmp img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cmp .after{clip-path:inset(0 0 0 var(--pos,50%))}
.handle{position:absolute; top:0; bottom:0; left:var(--pos,50%); width:2px;
  background:var(--card); box-shadow:0 0 0 1px rgba(26,20,16,.28); transform:translateX(-1px)}
.handle::after{content:""; position:absolute; top:50%; left:50%; width:36px; height:36px;
  transform:translate(-50%,-50%); border-radius:50%; background:var(--card);
  box-shadow:0 2px 10px rgba(26,20,16,.3)}
.handle::before{content:"‹ ›"; white-space:nowrap; position:absolute; top:50%; left:50%; z-index:2;
  transform:translate(-50%,-50%); font-family:var(--mono); font-size:14px; font-weight:700;
  letter-spacing:-1px; color:var(--ink)}
.lbl{position:absolute; top:10px; font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.02em; color:var(--card);
  background:rgba(26,20,16,.68); padding:4px 9px; border-radius:6px; pointer-events:none}
.lbl.l{left:10px} .lbl.r{right:10px; background:var(--blue)}
.cmp input[type=range]{position:absolute; inset:0; width:100%; height:100%; opacity:0;
  margin:0; cursor:ew-resize; pointer-events:none}
.cmp input[type=range]:focus-visible + .handle{box-shadow:0 0 0 3px var(--blue)}

.side{display:flex; flex-direction:column; gap:12px; min-width:0}
.ref{margin:0}
.ref .lb{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.04em;
  color:var(--muted); display:block; margin:0 0 6px}
.ref img{width:100%; border-radius:7px; background:var(--bg-soft)}
.ref p{margin:7px 0 0; font-size:12px; line-height:1.55; color:var(--muted)}
.methodbar{display:flex; flex-direction:column; gap:6px; margin:26px 0 0}
.methodline{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.methodline > .lb{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.04em;
  color:var(--muted); margin-right:6px}
.mbtn{flex:0 0 auto; font-family:var(--mono); font-size:11.5px; font-weight:500;
  color:var(--ink-2); background:var(--bg); border:1px solid var(--line);
  padding:6px 11px; border-radius:7px; cursor:pointer; white-space:nowrap}
.mbtn:hover{border-color:var(--blue-100); color:var(--ink)}
.mbtn[aria-pressed="true"]{color:var(--card); background:var(--ink); border-color:var(--ink)}
.mbtn.ours[aria-pressed="true"]{background:var(--blue); border-color:var(--blue)}
.mbtn .rg{margin-right:.45em}
.mbtn[aria-pressed="true"] .rg{color:var(--card); opacity:.75}
@media(max-width:860px){ .stage{grid-template-columns:1fr} .side{flex-direction:row} .ref{flex:1} }

/* ── #HQ toggle strip ────────────────────────────────────────────── */
.hqrow{display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin:26px 0 0}
.hqrow figure{margin:0; min-width:0}
.hqrow img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; background:var(--bg-soft)}
.hqrow figcaption{margin:8px 1px 0; font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.02em; color:var(--ink-2); line-height:1.4}
.hqrow figcaption small{display:block; font-weight:400; color:var(--muted); letter-spacing:0}
.hqrow .is-ours figcaption{color:var(--blue-600)}
.hqrow .is-ours img{outline:2px solid var(--blue); outline-offset:-2px}
@media(max-width:900px){ .hqrow{grid-template-columns:repeat(3,1fr)} }
@media(max-width:520px){ .hqrow{grid-template-columns:repeat(2,1fr)} }
.switch{display:inline-flex; gap:3px; padding:3px; background:var(--bg-soft);
  border:1px solid var(--line); border-radius:9px; margin:0 0 4px}
.switch button{font-family:var(--mono); font-size:12px; font-weight:600; color:var(--ink-2);
  background:none; border:0; padding:7px 15px; border-radius:7px; cursor:pointer}
.switch button[aria-pressed="true"]{color:var(--card); background:var(--blue)}
.switchrow{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:28px 0 0}
.switchrow p{margin:0; font-size:14px; color:var(--muted); max-width:52ch}

/* ── ablation triptych ───────────────────────────────────────────── */
.trip{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:22px 0 0}
.trip figure{margin:0; min-width:0}
.trip img{width:100%; border-radius:8px; background:var(--bg-soft)}
.trip figcaption{margin:9px 1px 0; font-family:var(--mono); font-size:13px; font-weight:600;
  color:var(--ink-2); line-height:1.45}
/* ablation panels: the complete model is marked by its caption colour only */
.trip .is-ours figcaption{color:var(--blue-600)}
.trip .is-out figcaption{color:var(--rf)}
@media(max-width:640px){ .trip{grid-template-columns:repeat(2,1fr)} }
.ablbox{margin:30px 0 0; padding:22px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow)}
.ablbox > h3{margin:0 0 6px; font-size:19.5px; letter-spacing:-.02em}
.ablbox > p{margin:0; font-size:15.5px; line-height:1.65; color:var(--ink-2); max-width:80ch}
.ablbox > p b{color:var(--ink); font-weight:650}

/* ── tables ──────────────────────────────────────────────────────── */
.tablecard{margin:28px 0 0; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.th{display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; padding:16px 20px;
  border-bottom:1px solid var(--line); background:var(--bg-soft)}
.th h3{margin:0; font-size:17px; letter-spacing:-.02em}
.th span{font-family:var(--mono); font-size:11.5px; color:var(--muted)}
.scroll{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:14px; min-width:660px}
thead th{position:sticky; top:0; z-index:1; background:var(--card);
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.02em;
  color:var(--muted); text-align:right; white-space:nowrap;
  padding:11px 12px; border-bottom:1px solid var(--line)}
thead th:first-child{text-align:left}
tbody td{padding:9px 12px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums}
tbody td:first-child{text-align:left; font-family:var(--sans); font-size:14.5px; color:var(--ink)}
tbody tr:last-child td{border-bottom:0}
tbody tr.ours{background:var(--blue-50)}
tbody tr.ours td{color:var(--ink); font-weight:600}
tbody tr.ours td:first-child{font-weight:700; color:var(--blue-600)}
tbody tr.edge td{color:var(--muted); background:var(--bg-soft)}
tbody tr.edge td:first-child{color:var(--muted)}
.b1{color:var(--blue-600) !important; font-weight:700}
.b2{color:var(--teal) !important; font-weight:600}
tbody td.sub{color:var(--muted); font-family:var(--mono); font-size:11px}
tbody tr.under td:first-child::after{content:"At or below the input"; display:block;
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.02em;
  color:var(--rf); margin-top:1px}
.tfoot{padding:14px 20px; border-top:1px solid var(--line); background:var(--bg-soft);
  font-size:13px; line-height:1.6; color:var(--muted)}
.tfoot .b1,.tfoot .b2{font-family:var(--mono); font-size:12px}

/* ── charts (inline svg, styled with the page tokens) ────────────── */
.chart{margin:28px 0 0; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow)}
.chart svg{width:100%; height:auto; display:block; overflow:visible}
.chart .figcap{margin:16px 2px 0}
/* Fig. 2 sits beside its paragraph on wide screens; the chart is drawn
   near-square so it fits the column without panning. */
.figsplit{display:grid; grid-template-columns:.92fr 1.08fr; gap:28px; align-items:center}
.figsplit .lede{margin:0}
.figsplit .chart{margin:0}
@media(max-width:860px){ .figsplit{grid-template-columns:1fr} .figsplit .lede{margin:0 0 22px} }
.panhint{display:none; margin:0 2px 9px; text-align:right; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.04em; color:var(--muted)}
svg .m{font-family:var(--mono); font-weight:700; letter-spacing:-.02em}
svg .lb{font-weight:700; letter-spacing:.9px; font-family:var(--mono)}
svg .fi{fill:var(--ink)} svg .fi2{fill:var(--ink-2)} svg .fi3{fill:var(--muted)}
svg .fid{fill:var(--id)} svg .ftr{fill:var(--train)} svg .ffr{fill:var(--frozen)}
svg .fw{fill:var(--card)} svg .fcard{fill:var(--card)} svg .fpaper{fill:var(--card)}
svg .fcell{fill:var(--cell)}
svg .si{stroke:var(--ink)} svg .sid{stroke:var(--id)} svg .str{stroke:var(--train)}
svg .sfr{stroke:var(--frozen)} svg .sr{stroke:var(--line)} svg .sbar{stroke:var(--bar)}
svg .nf{fill:none}
svg .box{fill:var(--card); stroke-width:1.7}
svg .dash{stroke-dasharray:7 5}
svg .hatch{fill:url(#hx)} svg .hatcht{fill:url(#hxt)}

/* ── the recurring datum: 0.613 ──────────────────────────────────── */
.rail{margin:30px 0 0; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 24px 18px; box-shadow:var(--shadow)}
.rail svg{width:100%; height:auto; display:block}
.railcap{margin:16px 2px 0; font-size:13.5px; line-height:1.62; color:var(--muted)}
.railcap b{color:var(--ink-2); font-weight:650}
.pullquote{margin:34px 0 0; padding:22px 26px; background:var(--blue-50);
  border:1px solid var(--blue-100); border-radius:var(--radius)}
.pullquote p{margin:0; font-size:22px; line-height:1.4; letter-spacing:-.022em;
  font-weight:600; color:var(--blue-600); max-width:34ch}
.pullquote small{display:block; margin-top:11px; font-family:var(--mono); font-size:11px;
  font-weight:500; letter-spacing:.02em; color:var(--ink-2)}

/* ── numbers strip ───────────────────────────────────────────────── */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:30px 0 0;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden}
.stat{background:var(--card); padding:20px 22px}
.stat .n{font-size:clamp(26px,3.4vw,34px); font-weight:800; letter-spacing:-.04em;
  line-height:1; color:var(--blue); font-variant-numeric:tabular-nums}
.stat .n small{font-size:.5em; font-weight:700; letter-spacing:-.01em; color:var(--ink-2)}
.stat .k{font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.03em;
  color:var(--muted); margin-top:9px}
.stat p{margin:7px 0 0; font-size:13.5px; line-height:1.55; color:var(--ink-2)}
@media(max-width:860px){ .stats{grid-template-columns:repeat(2,1fr)} }

/* ── references ──────────────────────────────────────────────────── */
.refmark{font-family:var(--mono); font-size:9.5px; font-weight:700; vertical-align:.42em;
  line-height:0; color:var(--blue-600); text-decoration:none; padding:0 1px}
.refmark:hover{text-decoration:underline}
.refblock{margin:26px 0 0; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card); overflow:hidden}
.refblock > summary{list-style:none; cursor:pointer; padding:15px 20px;
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.02em;
  color:var(--ink-2); background:var(--bg-soft);
  display:flex; justify-content:space-between; align-items:center; gap:10px}
.refblock > summary::-webkit-details-marker{display:none}
.refblock > summary::after{content:"+"; font-size:15px; color:var(--muted)}
.refblock[open] > summary::after{content:"–"}
/* one collapsed bar does not need a full section band of air around it */
#refs{padding:34px 0}
#refs .refblock{margin:0}
.reflist{margin:0; padding:16px 20px 20px 44px; columns:2; column-gap:34px}
.reflist li{font-size:13px; line-height:1.6; color:var(--ink-2); margin:0 0 9px;
  break-inside:avoid; padding-left:2px}
.reflist li:target{background:var(--blue-50); border-radius:4px}
@media(max-width:820px){ .reflist{columns:1} }

/* ── narrow widths ───────────────────────────────────────────────── */
/* An SVG label shrinks with its box: a 15px label in a 1000-unit viewBox
   renders at 6px once the box is 400px wide. Below 820px the wide charts
   stop scaling and start panning, so the numbers stay readable. */
@media(max-width:820px){
  .pan{overflow-x:auto}
  .pan svg{min-width:700px}
  /* app.js sets data-pan on whatever actually overflows */
  .pan[data-pan],.figure .scrollx[data-pan]{
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 44px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 44px),transparent 100%)}
  .panhint[data-pan]{display:block}
  /* the tables keep their digits crisp, so they say it in words instead */
  .tablecard[data-pan] .th::after{content:"scroll \2192"; font-family:var(--mono);
    font-size:11.5px; color:var(--muted); margin-left:auto}
}
@media(max-width:560px){
  .stagehead{flex-direction:column; align-items:flex-start; gap:9px}
}

/* ── bibtex + footer ─────────────────────────────────────────────── */
.bib{margin:24px 0 0; position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden}
.bib pre{margin:0; padding:20px 22px; overflow-x:auto; font-family:var(--mono);
  font-size:12.5px; line-height:1.75; color:var(--ink-2); background:none}
.copy{position:absolute; top:12px; right:12px; font-family:var(--mono); font-size:11px;
  font-weight:600; color:var(--ink-2); background:var(--bg-soft); border:1px solid var(--line);
  padding:6px 11px; border-radius:7px; cursor:pointer}
.copy:hover{border-color:var(--blue-100); color:var(--blue-600)}
footer{border-top:1px solid var(--line); background:var(--bg-soft); padding:36px 0 46px}
footer .fin{display:flex; flex-wrap:wrap; gap:18px 40px; justify-content:space-between;
  align-items:flex-start}
footer p{margin:0; font-size:13.5px; line-height:1.7; color:var(--muted); max-width:62ch}
footer .mono{font-size:11.5px; letter-spacing:.02em}

/* ── hero artwork card + reference filmstrip ─────────────────────── */
.artcard{margin:0; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px; box-shadow:var(--shadow-lg)}
.film{display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin:12px 0 0}
.film figure{margin:0; position:relative; min-width:0}
.film img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px;
  background:var(--bg-soft)}
.film figcaption{position:absolute; left:4px; bottom:4px; font-family:var(--mono);
  font-size:8.5px; font-weight:600; letter-spacing:.05em; color:var(--card);
  background:rgba(26,20,16,.62); padding:1px 4px; border-radius:4px}
.film .is-hq img{outline:2.5px solid var(--blue); outline-offset:-2.5px}
.film .is-hq figcaption{background:var(--blue)}
.artcap{margin:13px 3px 2px; font-size:12.5px; line-height:1.6; color:var(--muted)}
.artcap b{color:var(--ink-2); font-weight:650}
.qlink{font-family:var(--mono); font-size:.92em; font-weight:500}