/* ─────────────────────────────────────────────────────────────
   Nazis in Jakarta — built on the hd design system
   (tokens copied from hd Design System/tokens/*.css; ink theme = dark mode)
   ───────────────────────────────────────────────────────────── */
:root{
  --ink:#111114;--paper:#FAFAF8;--signal:#FFDD00;--brick:#9C3542;--graphite:#55555E;--fog:#E9E9EC;
  --ink-a-08:rgba(17,17,20,.08);--ink-a-16:rgba(17,17,20,.16);--ink-a-60:rgba(17,17,20,.6);--ink-a-88:rgba(17,17,20,.88);
  --paper-a-12:rgba(250,250,248,.12);--paper-a-64:rgba(250,250,248,.64);
  --surface-page:var(--paper);--surface-raised:var(--paper);--surface-sunken:var(--fog);--surface-card:var(--paper);
  --surface-inverse:var(--ink);--surface-muted:var(--fog);
  --text-primary:var(--ink);--text-secondary:var(--graphite);--text-inverse:var(--paper);--text-accent:var(--brick);
  --text-link:var(--ink);--text-link-hover:var(--brick);
  --line-hairline:var(--ink-a-16);--line-rule:var(--ink);--line-soft:var(--fog);
  --action-fill:var(--ink);--action-fill-hover:var(--graphite);--action-text:var(--paper);--focus-ring:var(--brick);
  --stage:#111114;
  --font-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --font-ui:"Schibsted Grotesk","Inter",Arial,sans-serif;
  --size-3xs:11px;--size-2xs:12px;--size-xs:13px;--size-sm:15px;--size-md:17px;--size-lg:20px;--size-xl:26px;--size-2xl:34px;--size-3xl:46px;--size-4xl:62px;--size-5xl:84px;--size-6xl:112px;
  --track-tightest:-0.035em;--track-tight:-0.02em;--track-wide:0.06em;--track-widest:0.14em;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
  --radius-xs:2px;--radius-md:4px;
  --measure-body:66ch;--container-md:840px;--container-lg:1120px;--container-xl:1440px;
  --shadow-card:0 2px 4px rgba(17,17,20,.06),0 8px 24px rgba(17,17,20,.06);
  --shadow-pop:0 12px 40px rgba(17,17,20,.16);
  --scrim-bottom:linear-gradient(to top,rgba(17,17,20,.88) 0%,rgba(17,17,20,.55) 38%,rgba(17,17,20,0) 100%);
  --blur-glass:saturate(140%) blur(14px);
  --dur-fast:140ms;--dur-base:220ms;--dur-slow:420ms;--dur-cinematic:900ms;
  --ease-out:cubic-bezier(.2,.8,.2,1);--ease-entrance:cubic-bezier(.16,1,.3,1);
  --press-scale:.985;--hover-lift:-2px;--media-zoom:1.04;
  --col:40rem;--margin:17.5rem;--gap:2.75rem;--rail:12rem;--bar-h:68px;
  color-scheme:light;
}
@media (prefers-reduced-motion:reduce){:root{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms;--dur-cinematic:0ms;--press-scale:1;--hover-lift:0;--media-zoom:1}}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --surface-page:var(--ink);--surface-raised:#1C1C21;--surface-sunken:#18181C;--surface-card:#1C1C21;--surface-inverse:var(--paper);--surface-muted:#2A2A30;
    --text-primary:var(--paper);--text-secondary:#BDBDC4;--text-inverse:var(--ink);--text-accent:var(--signal);--text-link:var(--paper);--text-link-hover:var(--signal);
    --line-hairline:rgba(250,250,248,.14);--line-rule:var(--paper);--line-soft:#2A2A30;
    --action-fill:var(--paper);--action-text:var(--ink);--action-fill-hover:var(--fog);--focus-ring:var(--signal);--stage:#0A0A0C;
    --shadow-card:0 2px 4px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);--shadow-pop:0 12px 40px rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
:root[data-theme="dark"],:root[data-theme="ink"]{
  --surface-page:var(--ink);--surface-raised:#1C1C21;--surface-sunken:#18181C;--surface-card:#1C1C21;--surface-inverse:var(--paper);--surface-muted:#2A2A30;
  --text-primary:var(--paper);--text-secondary:#BDBDC4;--text-inverse:var(--ink);--text-accent:var(--signal);--text-link:var(--paper);--text-link-hover:var(--signal);
  --line-hairline:rgba(250,250,248,.14);--line-rule:var(--paper);--line-soft:#2A2A30;
  --action-fill:var(--paper);--action-text:var(--ink);--action-fill-hover:var(--fog);--focus-ring:var(--signal);--stage:#0A0A0C;
  --shadow-card:0 2px 4px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);--shadow-pop:0 12px 40px rgba(0,0,0,.55);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scrollbar-gutter:stable}
.intro,.bar.over,.v-stage,.player{--focus-ring:var(--signal)}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar-h) + 20px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font:400 var(--size-md)/1.55 var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--text-link);text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--signal);color:var(--ink)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-64px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;font:700 var(--size-2xs)/1 var(--font-ui);letter-spacing:var(--track-widest);text-transform:uppercase;text-decoration:none}
.skip:focus{top:16px}
.ico{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ── system pieces ───────────────────────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);font:700 var(--size-2xs)/1.2 var(--font-ui);letter-spacing:var(--track-widest);text-transform:uppercase;color:var(--text-secondary)}
.eyebrow.accent{color:var(--text-accent)}
.rule-l{display:flex;align-items:center;gap:var(--space-4);margin:0}
.rule-l > span{font:700 var(--size-2xs)/1.2 var(--font-ui);letter-spacing:var(--track-widest);text-transform:uppercase;color:var(--text-primary);white-space:nowrap}
.rule-l > span b{color:var(--text-accent);font-weight:700}
.rule-l::after{content:"";flex:1;border-top:2px solid var(--line-rule)}
.rule-l.heavy::after{border-top-width:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font:500 var(--size-2xs)/1.3 var(--font-ui);letter-spacing:var(--track-wide);text-transform:uppercase;
  border:1px solid transparent;border-radius:var(--radius-xs);padding:11px 18px;white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.btn:active{transform:scale(var(--press-scale))}
.btn .ico{font-size:15px}
.btn-primary{background:var(--action-fill);color:var(--action-text);border-color:var(--action-fill)}
.btn-primary:hover{background:var(--action-fill-hover);border-color:var(--action-fill-hover);color:var(--action-text)}
.btn-accent{background:var(--signal);color:var(--ink);border-color:var(--signal)}
.btn-accent:hover{background:var(--ink);color:var(--signal);border-color:var(--ink)}
.btn-outline{background:transparent;color:var(--text-primary);border-color:var(--line-rule)}
.btn-outline:hover{background:var(--text-primary);color:var(--surface-page)}
.btn-sm{padding:7px 12px;font-size:var(--size-3xs)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;font:700 var(--size-3xs)/1.2 var(--font-ui);letter-spacing:var(--track-widest);text-transform:uppercase;border-radius:var(--radius-xs);white-space:nowrap}
.badge.brick{background:var(--brick);color:var(--paper)}
.badge.quiet{background:var(--surface-muted);color:var(--text-secondary)}
.badge.inverse{background:var(--ink);color:var(--paper)}
.tag{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;font:700 var(--size-3xs)/1.2 var(--font-ui);letter-spacing:var(--track-wide);text-transform:uppercase;
  border:1px solid var(--line-hairline);border-radius:999px;color:var(--text-secondary);background:transparent;white-space:nowrap;transition:all var(--dur-fast) var(--ease-out)}
.tag:hover{border-color:var(--text-primary);color:var(--text-primary)}
.tag[aria-pressed="true"]{background:var(--text-primary);border-color:var(--text-primary);color:var(--surface-page)}
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.35'/></svg>")}
.treat{filter:saturate(.92) contrast(1.04)}
.th{display:block;background-repeat:no-repeat;background-color:var(--surface-muted)}

/* ── header ──────────────────────────────────────────── */
.bar{position:fixed;top:0;left:0;right:0;z-index:40;height:calc(var(--bar-h) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);background:var(--surface-page);border-bottom:1px solid var(--line-hairline);transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.bar.scrolled{background:color-mix(in srgb,var(--surface-page) 86%,transparent);-webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass)}
.bar-in{height:100%;max-width:var(--container-xl);margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px));display:flex;align-items:center;gap:var(--space-6)}
.bar-logo{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:var(--text-primary)}
.bar-logo svg{width:30px;height:30px;fill:currentColor}
.bar-logo span{font:700 var(--size-3xs)/1.2 var(--font-ui);letter-spacing:var(--track-widest);text-transform:uppercase;border-left:1px solid var(--line-hairline);padding-left:var(--space-3);white-space:nowrap}
.bar-nav{display:flex;gap:var(--space-5);flex:1;min-width:0}
.bar-nav a{font:700 var(--size-2xs)/1 var(--font-ui);letter-spacing:var(--track-widest);text-transform:uppercase;color:var(--text-secondary);text-decoration:none;padding:6px 0 4px;border-bottom:2px solid transparent;white-space:nowrap}
.bar-nav a:hover{color:var(--text-primary)}
.bar-nav a.on{color:var(--text-primary);border-bottom-color:var(--signal)}
.bar-nav .count{color:var(--text-secondary);font-weight:500;margin-left:1px}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--text-primary);transform-origin:0 50%;transform:scaleX(0)}

.lead-fig{margin:var(--space-7) 0 0}
.lead-img{position:relative;display:block;width:100%;aspect-ratio:21/9;overflow:hidden;border-radius:var(--radius-xs);background:var(--surface-muted)}
.lead-img img{width:100%;height:100%;object-fit:cover;object-position:50% 72%;transition:transform var(--dur-slow) var(--ease-entrance)}
.lead-img:hover img{transform:scale(var(--media-zoom))}
.lead-img .hl{position:absolute;mix-blend-mode:multiply;background:var(--signal);opacity:.85;border-radius:1px;transform:skewX(-6deg) rotate(-1.2deg);transform-origin:0 50%}
@media (prefers-reduced-motion:no-preference){.lead-img .hl{animation:mark var(--dur-cinematic) .5s var(--ease-entrance) both}}
@keyframes mark{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.lead-img .open{position:absolute;right:var(--space-3);bottom:var(--space-3);background:var(--ink-a-88);color:var(--paper);font:700 var(--size-3xs)/1 var(--font-ui);letter-spacing:var(--track-widest);text-transform:uppercase;padding:7px 10px;display:inline-flex;gap:6px;align-items:center}
.caption{font:400 var(--size-xs)/1.45 var(--font-ui);color:var(--text-secondary);margin:var(--space-3) 0 0;max-width:var(--measure-body)}
.caption b{color:var(--text-primary);font-weight:600}


.byline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);font:400 var(--size-xs)/1.4 var(--font-ui);color:var(--text-secondary)}
.byline b{color:var(--text-primary);font-weight:600}
.byline i{width:3px;height:3px;border-radius:50%;background:currentColor;display:inline-block}
/* ── share and follow ─────────────────────────────── */
.bar-in{position:relative}
.bar-btn{display:inline-flex;align-items:center;gap:6px;flex:none;padding:6px 0 4px;border:0;background:none;cursor:pointer;font:700 var(--size-2xs)/1 var(--font-ui);letter-spacing:var(--track-widest);text-transform:uppercase;color:var(--text-secondary);transition:color var(--dur-fast) var(--ease-out)}
.bar-btn .ico{width:15px;height:15px}
.bar-btn:hover,.bar-btn[aria-expanded="true"]{color:var(--text-primary)}
.bar-follow{margin-left:auto}
.bar.over .bar-btn{color:rgba(250,250,248,.74)}
.bar.over .bar-btn:hover,.bar.over .bar-btn[aria-expanded="true"]{color:var(--paper)}
.bar-menu{position:absolute;top:calc(100% + 1px);right:max(16px,env(safe-area-inset-right,0px));width:264px;max-width:calc(100vw - 32px);padding:var(--space-4) var(--space-5);background:var(--surface-raised);border:1px solid var(--line-hairline);border-radius:var(--radius-xs);box-shadow:var(--shadow-pop)}
.bar-menu > p{margin:0 0 var(--space-2);font:700 var(--size-3xs)/1.2 var(--font-ui);letter-spacing:var(--track-widest);text-transform:uppercase;color:var(--text-secondary)}
.bar-menu .share-links,.bar-menu .follow-list{display:grid;gap:0}
.bar-menu .share-links a,.bar-menu .share-links button,.bar-menu .follow-list a{justify-self:start;padding:8px 0 6px;font-size:var(--size-sm);color:var(--text-primary)}
.bar-menu .follow-list .handle{padding:4px 0 6px}
.share-links,.follow-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-5)}
.share-links a,.share-links button,.follow-links a,.follow-list a,.foot-follow a{padding:2px 0 1px;border:0;border-bottom:1px solid transparent;background:none;cursor:pointer;font:500 var(--size-xs)/1.4 var(--font-ui);color:var(--text-secondary);text-decoration:none;transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.share-links a:hover,.share-links button:hover,.follow-links a:hover,.follow-list a:hover,.foot-follow a:hover{color:var(--text-primary);border-bottom-color:currentColor}
.handle{font:700 var(--size-xs)/1.4 var(--font-ui);letter-spacing:var(--track-wide);color:var(--text-primary);text-transform:none}
.handle b{color:var(--text-accent);font-weight:700}
.endbox{margin:var(--space-8) 0 0;padding-top:var(--space-5);border-top:1px solid var(--line-hairline);display:grid;gap:var(--space-3)}
.endrow{display:flex;align-items:baseline;gap:var(--space-4)}
.endrow > .eyebrow{flex:none;width:4.75rem}
.foot-follow{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4);margin:var(--space-4) 0 0!important}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:95;max-width:min(92vw,440px);padding:10px 16px;border-radius:var(--radius-xs);background:var(--surface-inverse);color:var(--text-inverse);font:500 var(--size-xs)/1.45 var(--font-ui);opacity:0;transform:translate(-50%,8px);pointer-events:none;transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);overflow-wrap:anywhere}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
@media (max-width:640px){.bar-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.bar-btn{padding:12px 8px}.bar-share{margin-right:-8px}.endrow{display:grid;gap:var(--space-2)}}
@media (max-width:420px){.bar-in{gap:12px!important}.bar-nav{gap:12px!important}.bar-nav .count{display:none}}
@media (max-width:370px){.bar-in{gap:10px!important}.bar-nav{gap:10px!important}.bar-btn{padding:12px 7px}.bar-share{margin-right:-7px}}
.strip-out .tag{flex:0 0 auto;max-width:100%;white-space:normal;text-align:left}
@media (max-width:340px){.bar-nav a[href="#story"]{display:none}}

/* ── opening: three stacked scenes ───────────────────── */
.bar.over{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.bar.over .bar-logo{color:var(--paper)}
.bar.over .bar-logo span{border-left-color:rgba(250,250,248,.3)}
.bar.over .bar-nav a{color:rgba(250,250,248,.74)}
.bar.over .bar-nav .count{color:rgba(250,250,248,.6)}
.bar.over .bar-nav a:hover,.bar.over .bar-nav a.on{color:var(--paper)}
.bar.over .progress{opacity:0}
.intro{position:relative;background:var(--ink);color:var(--paper)}
.scene{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;background:var(--ink)}
.scene-bg{position:absolute;inset:-2px;transform:scale(calc(1 + var(--cover,0) * .08));transform-origin:50% 55%}
.scene-bg img,.scene-bg video{width:100%;height:100%;object-fit:cover;display:block}
.s1 .scene-bg img{object-position:52% 36%}
.s2 .scene-bg img{object-position:46% 36%}
.scene-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(17,17,20,.55) 0,rgba(17,17,20,0) 150px),linear-gradient(to top,rgba(17,17,20,.92) 0%,rgba(17,17,20,.52) 42%,rgba(17,17,20,.16) 100%)}
.scene-shade.strong{background:linear-gradient(to bottom,rgba(17,17,20,.5) 0,rgba(17,17,20,0) 150px),linear-gradient(to top,rgba(17,17,20,.95) 0%,rgba(17,17,20,.72) 50%,rgba(17,17,20,.42) 100%)}
.scene-shade::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:calc(var(--cover,0) * .6)}
.scene-in{position:absolute;left:0;right:0;bottom:0;z-index:2;max-width:var(--container-lg);margin:0 auto;padding:0 16px clamp(76px,13svh,150px);
  opacity:calc(1 - var(--cover,0) * 1.4);transform:translateY(calc(var(--cover,0) * -48px))}
.s1 .eyebrow{color:var(--signal)}
.s1 h1{font:700 clamp(40px,6.6vw,104px)/1.02 var(--font-display);letter-spacing:var(--track-tight);max-width:15ch;margin:20px 0 28px;color:var(--paper);text-wrap:balance}
.s1 .byline{color:#D8D8DE}
.s1 .byline b{color:var(--paper)}
.scene-sub,.scene-dek{--t:clamp(0,(var(--enter,1) - .45) * 2.4,1);opacity:var(--t);transform:translateY(calc((1 - var(--t)) * 36px))}
.scene-sub{font:700 clamp(40px,6.6vw,104px)/1.02 var(--font-display);letter-spacing:var(--track-tight);max-width:15ch;margin:0;color:var(--paper);text-wrap:balance}
.scene-sub.scene-name{font:800 clamp(64px,12vw,176px)/.9 var(--font-display);letter-spacing:var(--track-tightest);max-width:none}
.scene-dek{font:500 clamp(20px,2.2vw,30px)/1.45 var(--font-sans);max-width:38ch;margin:0 0 32px;color:var(--paper);text-wrap:pretty}
.scene-pause{position:absolute;left:max(8px,env(safe-area-inset-left,0px));bottom:4px;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:8px;border:0;background:none;cursor:pointer;font:500 10px/1 var(--font-ui);letter-spacing:var(--track-wide);text-transform:uppercase;color:rgba(250,250,248,.62);transition:color var(--dur-fast) var(--ease-out)}
.scene-pause .ico{width:14px;height:14px}
.scene-pause:hover,.scene-pause:focus-visible{color:var(--paper)}
.scene-credit{position:absolute;right:16px;bottom:14px;z-index:2;font:500 10px/1 var(--font-ui);letter-spacing:var(--track-wide);text-transform:uppercase;color:rgba(250,250,248,.55)}
.scroll-cue{position:absolute;left:50%;bottom:18px;z-index:2;transform:translateX(-50%);display:grid;justify-items:center;gap:8px;color:var(--paper);text-decoration:none;
  font:700 10px/1 var(--font-ui);letter-spacing:var(--track-widest);text-transform:uppercase;opacity:calc(1 - var(--cover,0) * 3)}
.scroll-cue:hover{color:var(--signal)}
.scroll-cue i{display:block;width:1px;height:44px;background:linear-gradient(currentColor,transparent);transform-origin:top;animation:cue 2s var(--ease-out) infinite}
@keyframes cue{0%{transform:scaleY(0)}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.scene-gap{height:60vh;height:60svh}
.scene-gap.last{height:45vh;height:45svh}
@media (prefers-reduced-motion:reduce){
  .scene-bg,.scene-in,.scene-sub,.scene-dek{transform:none!important}
  .scene-in,.scene-sub,.scene-dek{opacity:1!important}
  .scene-shade::after{opacity:0}
  .scroll-cue i{animation:none}
}
.article > .lead-fig{max-width:none;clear:both;margin:var(--space-5) 0 var(--space-7)}
@media (min-width:1100px){.article > .lead-fig{width:calc(var(--col) + var(--gap) + var(--margin))}}
@media (max-width:640px){.s1 .byline{font-size:12px;row-gap:6px}.s1 .byline b{flex-basis:100%}.s1 .byline b + i{display:none}.scene-credit{bottom:auto;top:calc(var(--bar-h) + 8px)}}

/* ── story layout: rail · column · margin ────────────── */
.story{display:grid;grid-template-columns:minmax(0,calc(var(--col) + var(--gap) + var(--margin)));justify-content:center;padding:0 16px var(--space-8)}
.toc{display:none}
.article{min-width:0;padding-top:var(--space-8)}
.article > *{max-width:var(--col)}
.pb{position:relative}
.pb > p,.pb > .lp{font:400 var(--size-md)/1.62 var(--font-sans);margin:0 0 var(--space-5);text-wrap:pretty}
.pb.first > p::first-letter{float:left;font:700 76px/.8 var(--font-display);padding:8px 10px 0 0;color:var(--text-primary)}
.pb.flash > p,.pb.flash > figure{animation:flash 2.2s var(--ease-out)}
@keyframes flash{0%,35%{background:color-mix(in srgb,var(--signal) 40%,transparent)}100%{background:transparent}}
.nref{font:600 11px/0 var(--font-ui);vertical-align:.6em;text-decoration:none;color:var(--text-accent);padding:3px 2px;margin-left:1px;border-radius:var(--radius-xs);white-space:nowrap;letter-spacing:.02em}
.nref:hover,.nref[aria-expanded="true"]{background:var(--text-primary);color:var(--surface-page)}
.nref .ico{font-size:9px;vertical-align:-1px;margin-right:1px}
.bio{font:400 var(--size-sm)/1.5 var(--font-ui);color:var(--text-secondary);border-top:1px solid var(--line-hairline);padding-top:var(--space-4);margin-top:var(--space-6)}

/* chapter heads */
.ch{max-width:var(--col);margin:var(--space-9) 0 var(--space-5)}
.ch h2{font:700 clamp(32px,4vw,var(--size-3xl))/1.1 var(--font-display);letter-spacing:var(--track-tight);margin:var(--space-5) 0 0;text-wrap:balance}

/* excerpts (pull quotes from the files) */
.excerpt{margin:var(--space-6) 0 var(--space-7);padding-top:var(--space-5);border-top:4px solid var(--line-rule)}
.excerpt blockquote{margin:0;font:700 clamp(21px,2vw,var(--size-xl))/1.3 var(--font-display);letter-spacing:-.01em;text-wrap:pretty}
.excerpt figcaption{margin-top:var(--space-4);display:grid;gap:var(--space-2)}
.excerpt .de{font:400 var(--size-xs)/1.45 var(--font-ui);color:var(--text-secondary)}
.excerpt .de b{font:700 var(--size-3xs)/1 var(--font-ui);letter-spacing:var(--track-widest);text-transform:uppercase;margin-right:6px;color:var(--text-primary)}
.excerpt .src{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin-top:var(--space-1)}

/* margin: the evidence beside the text */
.mnote{display:none}
.mcard{display:grid;grid-template-columns:52px minmax(0,1fr);gap:var(--space-3);align-items:start;width:100%;text-align:left;text-decoration:none;color:var(--text-primary);
  padding:var(--space-3);border:1px solid var(--line-hairline);border-radius:var(--radius-xs);background:var(--surface-card);
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.mcard:hover{transform:translateY(var(--hover-lift));box-shadow:var(--shadow-card);color:var(--text-primary)}
.mcard .th{width:52px;height:69px;border-radius:1px}
.mc-body{display:grid;gap:3px;min-width:0}
.mc-id{font:700 var(--size-3xs)/1.2 var(--font-ui);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-accent)}
.mc-id span{color:var(--text-secondary);font-weight:500}
.mc-title{font:600 var(--size-xs)/1.3 var(--font-sans);color:var(--text-primary)}
.mc-ref{font:400 var(--size-3xs)/1.35 var(--font-ui);color:var(--text-secondary)}
.mchip{display:inline-flex;align-items:center;gap:6px;font:700 var(--size-3xs)/1.2 var(--font-ui);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-secondary);text-decoration:none;
  padding:5px 10px;border-radius:999px;border:1px solid var(--line-hairline)}
.mchip b{color:var(--text-accent)}
.mchip:hover{border-color:var(--text-primary);color:var(--text-primary)}
.mvid{display:grid;grid-template-columns:92px minmax(0,1fr);gap:var(--space-3);align-items:center;width:100%;text-align:left;padding:var(--space-2);border:1px solid var(--line-hairline);border-radius:var(--radius-xs);background:var(--surface-card);transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.mvid:hover{transform:translateY(var(--hover-lift));box-shadow:var(--shadow-card)}
.mvid .pv{display:block;position:relative;width:92px;aspect-ratio:16/9;overflow:hidden;border-radius:1px;background:var(--surface-muted)}
.mvid .pv img{width:100%;height:100%;object-fit:cover}
.mvid .pv i{position:absolute;inset:0;display:grid;place-items:center;color:var(--paper)}
.mvid .pv i .ico{font-size:18px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));fill:currentColor}
.mvid:hover .pv i{color:var(--signal)}

/* interludes */
.interlude{max-width:none!important;clear:both;margin:var(--space-8) 0}
.il-title{font:700 clamp(26px,2.8vw,var(--size-2xl))/1.15 var(--font-display);letter-spacing:var(--track-tight);margin:var(--space-5) 0 var(--space-2);text-wrap:balance}
.il-sub{font:400 var(--size-sm)/1.5 var(--font-sans);color:var(--text-secondary);margin:0 0 var(--space-6);max-width:var(--measure-body)}
.il-src{font:400 var(--size-3xs)/1.5 var(--font-ui);color:var(--text-secondary);margin:var(--space-5) 0 0;padding-top:var(--space-3);border-top:1px solid var(--line-hairline)}
.il-src a,.il-src button{color:var(--text-primary);text-decoration:underline;text-underline-offset:3px;font:inherit}
.il-src a:hover,.il-src button:hover{color:var(--text-link-hover)}

/* bar charts */
.hbars{display:grid;gap:2px}
.hb-axis,.hb-row,.hb-total{display:grid;grid-template-columns:var(--lab,12rem) minmax(0,1fr) var(--val,9.5rem);column-gap:var(--space-4);align-items:center}
.hb-axis{font:400 var(--size-3xs)/1 var(--font-ui);color:var(--text-secondary);margin-bottom:var(--space-2)}
.hb-axis .ticks{position:relative;height:14px}
.hb-axis .ticks span{position:absolute;transform:translateX(-50%);font-variant-numeric:tabular-nums;white-space:nowrap}
.hb-axis .ticks span:first-child{transform:none}
.hb-axis .ticks span:last-child{transform:translateX(-100%)}
.hb-axis .ticks b{font-weight:400}
.hb-axis .ticks i{display:none;font-style:normal}
.hb-row{width:100%;text-align:left;padding:var(--space-2) 0;border-top:1px solid var(--line-hairline);text-decoration:none;color:var(--text-primary)}
button.hb-row:hover,a.hb-row:hover,.hb-row:focus-visible{background:color-mix(in srgb,var(--surface-muted) 70%,transparent)}
.hb-lab{font:600 var(--size-sm)/1.3 var(--font-sans);min-width:0}
.hb-lab small{display:block;font:400 var(--size-xs)/1.35 var(--font-ui);color:var(--text-secondary);margin-top:2px}
.hb-date{display:block;font:700 var(--size-3xs)/1.2 var(--font-ui);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-secondary);margin-bottom:3px}
.hb-track{position:relative;height:22px;border-left:1px solid var(--line-rule);
  background:linear-gradient(to right,var(--line-hairline) 1px,transparent 1px) 0 0/calc(100% / var(--nt,5)) 100% repeat-x}
.hb-bar{position:absolute;left:0;top:50%;height:14px;transform:translateY(-50%);background:var(--text-primary);border-radius:0 2px 2px 0;min-width:3px}
.hb-bar.muted{background:var(--text-secondary);opacity:.45}
.hb-val{font:700 var(--size-sm)/1.2 var(--font-ui);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.hb-total{border-top:2px solid var(--line-rule);margin-top:var(--space-1);padding-top:var(--space-3)}
.hb-total .hb-val{font-size:var(--size-lg)}
.hb-none{font:600 var(--size-sm)/1.3 var(--font-display);padding-left:var(--space-3);color:var(--text-primary)}

/* ledger */
.ledger-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--space-6);align-items:end;margin-bottom:var(--space-6)}
.clip{margin:0}
.clip button{display:block;width:100%;border-radius:var(--radius-xs);overflow:hidden;border:1px solid var(--line-hairline);transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.clip button:hover{transform:translateY(var(--hover-lift));box-shadow:var(--shadow-card)}
.ledger-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ledger{width:100%;border-collapse:collapse;min-width:720px;font:400 var(--size-sm)/1.4 var(--font-sans)}
.ledger th{font:700 var(--size-3xs)/1.2 var(--font-ui);letter-spacing:var(--track-widest);text-transform:uppercase;color:var(--text-secondary);text-align:left;padding:var(--space-2) var(--space-3);border-bottom:2px solid var(--line-rule)}
.ledger td{padding:var(--space-3);border-bottom:1px solid var(--line-hairline);vertical-align:top}
.ledger tr.pre td{color:var(--text-secondary)}
.ledger .d{font:700 var(--size-3xs)/1.5 var(--font-ui);letter-spacing:var(--track-wide);text-transform:uppercase;white-space:nowrap;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.ledger .what{font-weight:600}
.ledger .q{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700}
.ledger .says{color:var(--text-secondary)}
.ledger .says .badge{margin-top:var(--space-2)}
.ledger .src{white-space:nowrap}
.ledger .src button,.ledger .src a{font:700 var(--size-3xs)/1 var(--font-ui);letter-spacing:var(--track-wide);color:var(--text-primary);text-decoration:underline;text-underline-offset:3px;margin-right:6px}
.ledger .src a{color:var(--text-secondary)}
.ledger tr.coup td{padding:var(--space-3);border-bottom:2px solid var(--line-rule);border-top:2px solid var(--line-rule)}
.ledger tr.coup .eyebrow{color:var(--text-accent)}
.totals{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:var(--space-4) var(--space-5);margin:var(--space-6) 0 0;padding-top:var(--space-5);border-top:4px solid var(--line-rule)}
.totals div{font:400 var(--size-xs)/1.4 var(--font-ui);color:var(--text-secondary)}
.totals b{display:block;font:800 var(--size-xl)/1.1 var(--font-display);color:var(--text-primary);letter-spacing:var(--track-tight);margin-bottom:4px}

/* ambassadors */
.amb{--labw:14rem;--g:16px}
.amb-axis,.amb-row{display:grid;grid-template-columns:var(--labw) minmax(0,1fr);column-gap:var(--g);align-items:center}
.amb-axis .ticks{position:relative;height:16px;font:400 var(--size-3xs)/1 var(--font-ui);color:var(--text-secondary)}
.amb-axis .ticks span{position:absolute;transform:translateX(-50%);font-variant-numeric:tabular-nums}
.amb-axis .ticks span:first-child{transform:none}
.amb-axis .ticks span:last-child{transform:translateX(-100%)}
.amb-plot{position:relative}
.amb-row{padding:var(--space-2) 0;border-top:1px solid var(--line-hairline);position:relative;z-index:1}
.amb-name{font:600 var(--size-sm)/1.25 var(--font-sans)}
.amb-name em{font:700 var(--size-3xs)/1 var(--font-ui);letter-spacing:var(--track-wide);font-style:normal;color:var(--text-secondary);margin-left:6px}
.amb-name small{display:block;font:400 var(--size-xs)/1.35 var(--font-ui);color:var(--text-secondary);margin-top:2px}
.amb-track{position:relative;height:24px}
.amb-bar{position:absolute;top:50%;height:14px;transform:translateY(-50%);background:var(--text-primary);border-radius:2px}
.amb-bar.no{background:transparent;border:1.5px solid var(--text-secondary)}
.amb-bar.open{-webkit-mask:linear-gradient(to right,#000 55%,transparent);mask:linear-gradient(to right,#000 55%,transparent)}
.amb-killing{position:absolute;top:0;bottom:0;left:calc(var(--labw) + var(--g) + (100% - var(--labw) - var(--g)) * var(--f));right:0;background:var(--surface-muted);border-left:2px solid var(--brick);z-index:0}
.amb-killing span{position:absolute;top:4px;left:8px;font:700 var(--size-3xs)/1.2 var(--font-ui);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-accent);white-space:nowrap}
.amb-killing b{font-weight:inherit}
.amb-legend{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin-top:var(--space-4);font:400 var(--size-xs)/1.3 var(--font-ui);color:var(--text-secondary)}
.amb-legend i{display:inline-block;width:18px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.amb-legend .k1{background:var(--text-primary)}.amb-legend .k2{border:1.5px solid var(--text-secondary)}.amb-legend .k3{background:var(--surface-muted);border-left:2px solid var(--brick)}

/* stills */
.still{max-width:none!important;clear:both;margin:var(--space-8) 0}
.still .frame{position:relative;aspect-ratio:21/9;overflow:hidden;border-radius:var(--radius-xs);background:var(--surface-muted)}
.still .frame img{width:100%;height:100%;object-fit:cover}

/* testimonies */
.testimonies{max-width:none!important;clear:both;margin:var(--space-7) 0 var(--space-8)}
.t-note{display:flex;gap:var(--space-3);align-items:flex-start;font:400 var(--size-xs)/1.45 var(--font-ui);color:var(--text-secondary);margin:var(--space-4) 0 var(--space-6);max-width:var(--measure-body)}
.t-note .badge{flex:none;margin-top:1px}
.t-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:var(--space-6) var(--space-5);align-items:start}
.vcard{display:flex;flex-direction:column;justify-content:flex-start;width:100%;text-align:left;color:var(--text-primary);text-decoration:none}
.vcard .frame{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-xs);background:var(--surface-muted)}
.vcard .frame img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-entrance)}
.vcard:hover .frame img{transform:scale(var(--media-zoom))}
.vcard .scrim{position:absolute;inset:0;background:var(--scrim-bottom);opacity:.65;pointer-events:none}
.vcard .dur{position:absolute;right:var(--space-3);bottom:var(--space-3);font:700 var(--size-3xs)/1 var(--font-ui);letter-spacing:var(--track-wide);color:var(--paper);background:var(--ink-a-88);padding:4px 7px;z-index:2}
.vcard .play{position:absolute;inset:0;display:grid;place-items:center;z-index:2}
.vcard .play span{width:54px;height:54px;display:grid;place-items:center;background:var(--paper-a-64);-webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);color:var(--ink);transition:background var(--dur-fast) var(--ease-out)}
.vcard:hover .play span,.vcard:focus-visible .play span{background:var(--signal)}
.vcard .play .ico{font-size:20px;fill:currentColor}
.vcard .who{display:block;padding-top:var(--space-3)}
.vcard .who .eyebrow{margin-bottom:6px}
.vcard .who strong{display:block;font:700 var(--size-md)/1.25 var(--font-sans);letter-spacing:var(--track-tight)}
.vcard:hover .who strong{text-decoration:underline;text-underline-offset:4px}
.vcard .who em{display:block;font:400 var(--size-xs)/1.45 var(--font-ui);font-style:normal;color:var(--text-secondary);margin-top:4px}

/* ── the files ───────────────────────────────────────── */
.files{background:var(--surface-sunken);padding:var(--space-9) 16px}
.files-in,.sources-in{max-width:var(--container-lg);margin:0 auto}
.sec-title{font:800 clamp(44px,6vw,var(--size-4xl))/.98 var(--font-display);letter-spacing:var(--track-tightest);margin:var(--space-5) 0 var(--space-4);text-wrap:balance}
.sec-lede{font:400 var(--size-lg)/1.5 var(--font-sans);color:var(--text-secondary);max-width:58ch;margin:0 0 var(--space-7)}
.strip{margin:0 0 var(--space-6);padding:var(--space-5);background:var(--surface-card);border:1px solid var(--line-hairline);border-radius:var(--radius-xs)}
.strip-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-2) var(--space-4);font:400 var(--size-xs)/1.3 var(--font-ui);color:var(--text-secondary);margin-bottom:var(--space-3)}
.strip-head b{color:var(--text-primary);font-weight:600}
.strip-out{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;min-width:0;max-width:100%}
.strip-plot{position:relative;height:var(--h,10rem);margin:0 4px}
.strip-base{position:absolute;left:0;right:0;bottom:22px;border-top:1px solid var(--line-rule)}
.strip-dot{position:absolute;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--text-primary);box-shadow:0 0 0 2px var(--surface-card);transition:transform var(--dur-fast) var(--ease-out),opacity var(--dur-base) var(--ease-out)}
.strip-dot::after{content:"";position:absolute;inset:-6px}
.strip-dot:hover,.strip-dot:focus-visible{transform:scale(1.45);z-index:2;background:var(--text-accent)}
.strip-dot.dim{opacity:.15}
.strip-year{position:absolute;bottom:0;transform:translateX(-50%);font:400 var(--size-3xs)/1 var(--font-ui);color:var(--text-secondary);font-variant-numeric:tabular-nums}
.strip-yt{position:absolute;bottom:22px;width:1px;height:6px;background:var(--line-rule)}
.strip-coup{position:absolute;top:0;bottom:22px;border-left:2px solid var(--brick)}
.strip-coup span{position:absolute;top:0;right:8px;font:700 var(--size-3xs)/1.3 var(--font-ui);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-accent);white-space:nowrap;text-align:right}
.tip{position:fixed;z-index:70;pointer-events:none;max-width:18rem;background:var(--surface-inverse);color:var(--text-inverse);border-radius:var(--radius-xs);padding:10px 12px;font:400 var(--size-xs)/1.35 var(--font-ui);box-shadow:var(--shadow-pop);opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}
.tip.on{opacity:1}
.tip b{display:block;font:600 var(--size-sm)/1.3 var(--font-sans);margin-bottom:3px}
.tip span{opacity:.8}

.fbar{display:grid;gap:var(--space-3);margin:0 0 var(--space-5)}
.frow{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.field{position:relative;flex:1 1 18rem;max-width:26rem}
.field input{width:100%;font:400 var(--size-sm)/1.2 var(--font-sans);color:var(--text-primary);background:var(--surface-card);border:1px solid var(--line-hairline);border-radius:var(--radius-xs);padding:11px 12px 11px 38px}
.field input:focus{border-color:var(--text-primary);outline:none;box-shadow:0 0 0 2px var(--focus-ring)}
.field .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:17px;color:var(--text-secondary)}
.chips{display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.chips .tag:focus-visible,.fthumb:focus-visible{outline-offset:-2px}
.fcount{font:700 var(--size-3xs)/1 var(--font-ui);letter-spacing:var(--track-widest);text-transform:uppercase;color:var(--text-secondary);margin-left:auto}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:var(--space-5)}
.fcard{display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--line-hairline);border-radius:var(--radius-xs);overflow:hidden;
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.fcard:hover{transform:translateY(var(--hover-lift));box-shadow:var(--shadow-card)}
.fthumb{display:block;position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--stage)}
.fthumb .fth{position:absolute;inset:0;background-repeat:no-repeat;transition:transform var(--dur-slow) var(--ease-entrance)}
.fcard:hover .fth{transform:scale(var(--media-zoom))}
.fthumb .pg{position:absolute;right:var(--space-2);bottom:var(--space-2);font:700 var(--size-3xs)/1 var(--font-ui);letter-spacing:var(--track-wide);background:var(--ink-a-88);color:var(--paper);padding:4px 7px}
.fbody{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);flex:1}
.fmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--space-3);font:700 var(--size-3xs)/1.2 var(--font-ui);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-secondary);margin:0}
.fmeta .id{color:var(--text-accent)}
.fcard h3{font:600 var(--size-sm)/1.3 var(--font-sans);margin:0;letter-spacing:0}
.fcard h3 button{text-align:left}
.fcard h3 button:hover{text-decoration:underline;text-underline-offset:3px}
.fref{font:400 var(--size-3xs)/1.45 var(--font-ui);color:var(--text-secondary);margin:auto 0 0}
.fcite{font:400 var(--size-xs)/1.4 var(--font-ui);color:var(--text-secondary);margin:0;padding-top:var(--space-2);border-top:1px solid var(--line-hairline)}
.fcite a{color:var(--text-primary)}
.fempty{grid-column:1/-1;font:400 var(--size-md)/1.5 var(--font-sans);color:var(--text-secondary);padding:var(--space-7) 0}

/* ── sources ─────────────────────────────────────────── */
.sources{padding:var(--space-9) 16px var(--space-7)}
.notes{list-style:none;margin:var(--space-6) 0 0;padding:0;columns:2 30rem;column-gap:var(--space-7)}
.notes li{break-inside:avoid;display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:4px;padding:var(--space-3) 0;border-top:1px solid var(--line-hairline);font:400 var(--size-xs)/1.55 var(--font-sans);color:var(--text-secondary)}
.notes li:target{background:color-mix(in srgb,var(--signal) 22%,transparent)}
.notes .n{font:700 var(--size-xs)/1.55 var(--font-ui);color:var(--text-primary)}
.notes .n a{text-decoration:none;color:inherit}
.notes .nd{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--space-2)}
.notes .back{display:inline-flex;align-items:center;gap:3px;font:700 var(--size-3xs)/1 var(--font-ui);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-secondary);text-decoration:none;margin-left:6px;white-space:nowrap}
.notes .back:hover{color:var(--text-link-hover)}
mark.tbd{background:color-mix(in srgb,var(--signal) 45%,transparent);color:inherit;padding:0 .15em}

/* ── footer ──────────────────────────────────────────── */
.foot{border-top:2px solid var(--line-rule);padding:var(--space-8) 16px var(--space-6)}
.foot-in{max-width:var(--container-lg);margin:0 auto}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--space-6)}
.foot-grid svg{width:40px;height:40px;fill:currentColor;color:var(--text-primary)}
.foot-grid p{font:400 var(--size-sm)/1.5 var(--font-sans);color:var(--text-secondary);margin:var(--space-4) 0 0;max-width:34ch}
.foot-grid h3{font:700 var(--size-2xs)/1.2 var(--font-ui);letter-spacing:var(--track-widest);text-transform:uppercase;color:var(--text-secondary);margin:0 0 var(--space-4)}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2);font:400 var(--size-sm)/1.45 var(--font-sans)}
.foot-grid li{color:var(--text-secondary)}
.foot-grid a{text-decoration:none}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3);border-top:1px solid var(--line-hairline);margin-top:var(--space-7);padding-top:var(--space-4);font:400 var(--size-xs)/1.4 var(--font-ui);color:var(--text-secondary)}

/* ── note popover ────────────────────────────────────── */
.pop{position:absolute;z-index:60;width:min(28rem,calc(100vw - 32px));background:var(--surface-card);color:var(--text-primary);border:1px solid var(--line-hairline);border-top:4px solid var(--line-rule);border-radius:var(--radius-xs);box-shadow:var(--shadow-pop)}
.pop-in{max-height:min(32rem,70vh);overflow:auto;padding:var(--space-4) var(--space-5) var(--space-5);overscroll-behavior:contain}
.pop-head{display:flex;justify-content:space-between;align-items:center;margin:0 0 var(--space-3)}
.pop-head b{font:700 var(--size-2xs)/1 var(--font-ui);letter-spacing:var(--track-widest);text-transform:uppercase;color:var(--text-accent)}
.iconbtn{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--radius-xs);color:var(--text-secondary);transition:all var(--dur-fast) var(--ease-out)}
.iconbtn:hover{background:var(--surface-muted);color:var(--text-primary)}
.iconbtn .ico{font-size:17px}
.pop-note{font:400 var(--size-xs)/1.55 var(--font-sans);color:var(--text-secondary);margin:0}
.pop-docs{display:grid;gap:var(--space-2);margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--line-hairline)}
.sheet-scrim{position:fixed;inset:0;z-index:55;background:var(--ink-a-60);opacity:0;transition:opacity var(--dur-base) var(--ease-out)}
.sheet-scrim.on{opacity:1}

/* ── document viewer ─────────────────────────────────── */
.viewer{position:fixed;inset:0;z-index:80;display:grid;grid-template-columns:minmax(0,1fr) 26rem;background:var(--stage);color:var(--paper)}
.v-stage{position:relative;min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto}
.v-canvas{position:relative;overflow:hidden;touch-action:pan-x pan-y pinch-zoom;cursor:zoom-in}
.v-canvas:not(.zoom){touch-action:pan-y pinch-zoom}
.v-canvas img{position:absolute;inset:0;margin:auto;max-width:calc(100% - 112px);max-height:calc(100% - 28px);width:auto;height:auto;box-shadow:0 10px 40px rgba(0,0,0,.5);user-select:none;-webkit-user-drag:none;background:#222}
.v-canvas.zoom{overflow:auto;cursor:grab}
.v-canvas.zoom.drag{cursor:grabbing}
.v-canvas.zoom img{position:static;display:block;max-width:none;max-height:none;margin:24px auto;box-shadow:none}
.v-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;border-radius:var(--radius-xs);background:rgba(250,250,248,.08);color:var(--paper);z-index:2;transition:background var(--dur-fast) var(--ease-out)}
.v-arrow:hover{background:rgba(250,250,248,.18)}
.v-arrow[disabled]{opacity:.25;cursor:default}
.v-arrow .ico{font-size:20px}
.v-prev{left:10px}.v-next{right:10px}
.v-foot{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4) var(--space-4);min-width:0}
.v-pages{display:flex;gap:6px;overflow-x:auto;flex:1;min-width:0;padding:3px}
.v-pages button{flex:none;width:40px;height:53px;border-radius:1px;overflow:hidden;opacity:.5;transition:opacity var(--dur-fast) var(--ease-out)}
.v-pages button .th{width:100%;height:100%}
.v-pages button[aria-current="true"]{opacity:1;box-shadow:0 0 0 2px var(--signal)}
.v-pages button:hover{opacity:.9}
.v-plabel{font:400 var(--size-xs)/1.3 var(--font-ui);color:#BDBDC4;white-space:nowrap;text-align:right}
.v-plabel b{display:block;color:var(--paper);font-weight:600}
.v-zoom{display:inline-flex;align-items:center;gap:6px;font:500 var(--size-3xs)/1 var(--font-ui);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--paper);border:1px solid rgba(250,250,248,.35);border-radius:var(--radius-xs);padding:8px 10px;white-space:nowrap}
.v-zoom:hover{background:var(--paper);color:var(--ink)}
.v-info{background:var(--surface-page);color:var(--text-primary);overflow:auto;padding:var(--space-4) var(--space-5) var(--space-7);border-left:1px solid var(--line-hairline);overscroll-behavior:contain}
.v-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:2px solid var(--line-rule)}
.v-id{font:700 var(--size-2xs)/1 var(--font-ui);letter-spacing:var(--track-widest);text-transform:uppercase;color:var(--text-accent)}
.v-info h2{font:700 var(--size-xl)/1.18 var(--font-display);letter-spacing:var(--track-tight);margin:0 0 var(--space-4);text-wrap:balance}
.v-dl{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:6px var(--space-3);margin:0 0 var(--space-5);font:400 var(--size-sm)/1.4 var(--font-sans)}
.v-dl dt{font:700 var(--size-3xs)/1.8 var(--font-ui);letter-spacing:var(--track-widest);text-transform:uppercase;color:var(--text-secondary)}
.v-dl dd{margin:0}
.label{margin:0 0 var(--space-5);padding:var(--space-3) var(--space-4);background:var(--surface-card);border:1px solid var(--line-hairline);border-radius:var(--radius-xs);font:400 var(--size-xs)/1.45 var(--font-ui)}
.label .lh{display:block;font:700 var(--size-3xs)/1.3 var(--font-ui);letter-spacing:var(--track-wide);text-transform:uppercase;margin-bottom:var(--space-2);padding-bottom:var(--space-2);border-bottom:1px solid var(--line-hairline)}
.label .lr{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:var(--space-2);padding:2px 0}
.label .lr b{font-weight:600;color:var(--text-secondary)}
.label .lr span{font-variant-numeric:tabular-nums}
.v-h3{margin:var(--space-6) 0 var(--space-3)}
.v-ctx{display:grid;gap:var(--space-3);margin:0;padding:0;list-style:none}
.v-ctx li{font:400 var(--size-sm)/1.55 var(--font-sans);padding-left:var(--space-3);border-left:2px solid var(--line-rule)}
.v-ctx a{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font:700 var(--size-3xs)/1 var(--font-ui);letter-spacing:var(--track-wide);text-transform:uppercase;text-decoration:none}
.v-notes{display:grid;gap:var(--space-3)}
.v-notes p{font:400 var(--size-xs)/1.55 var(--font-sans);color:var(--text-secondary);margin:0}
.v-notes p b{font:700 var(--size-3xs)/1 var(--font-ui);color:var(--text-primary);margin-right:6px}
.v-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-5)}
.v-nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--line-hairline)}
.v-nav button{text-align:left;padding:var(--space-3);border:1px solid var(--line-hairline);border-radius:var(--radius-xs);font:700 var(--size-3xs)/1.3 var(--font-ui);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-secondary);transition:border-color var(--dur-fast) var(--ease-out)}
.v-nav button b{display:block;font:600 var(--size-xs)/1.3 var(--font-sans);letter-spacing:0;text-transform:none;color:var(--text-primary);margin-top:4px}
.v-nav button:last-child{text-align:right}
.v-nav button:hover{border-color:var(--text-primary)}
.v-nav button[disabled]{visibility:hidden}

/* ── video player ────────────────────────────────────── */
.player{position:fixed;inset:0;z-index:85;background:rgba(10,10,12,.94);display:flex;overflow:auto;padding:24px}
.pl-box{width:min(1080px,100%,calc((100vh - 200px) * 16 / 9));width:min(1080px,100%,calc((100svh - 200px) * 16 / 9));min-width:min(100%,320px);margin:auto;display:grid;gap:var(--space-4);color:var(--paper)}
.pl-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4)}
.pl-top .eyebrow{color:#BDBDC4}
.pl-top h2{font:700 clamp(22px,2.6vw,var(--size-2xl))/1.15 var(--font-display);letter-spacing:var(--track-tight);margin:6px 0 0}
.pl-top .iconbtn{color:var(--paper)}
.pl-top .iconbtn:hover{background:rgba(250,250,248,.12)}
.pl-video{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--radius-xs);overflow:hidden}
.pl-video video{width:100%;height:100%;display:block;background:#000}
.pl-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-4);align-items:start}
.pl-meta details{font:400 var(--size-sm)/1.55 var(--font-sans);color:#D8D8DE}
.pl-meta summary{cursor:pointer;font:700 var(--size-3xs)/1 var(--font-ui);letter-spacing:var(--track-widest);text-transform:uppercase;color:var(--paper);list-style:none;display:inline-flex;align-items:center;gap:6px;padding:6px 0}
.pl-meta summary::-webkit-details-marker{display:none}
.pl-meta details p{margin:var(--space-2) 0 0;max-width:70ch}
.pl-src{font:400 var(--size-xs)/1.4 var(--font-ui);color:#BDBDC4;text-align:right}
.pl-src a{color:var(--paper)}

/* ── contents for narrower screens ───────────────────── */
.toc-m{max-width:var(--col);margin:0 0 var(--space-7);border-top:2px solid var(--line-rule);border-bottom:1px solid var(--line-hairline)}
.toc-m summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) 0;font:700 var(--size-2xs)/1 var(--font-ui);letter-spacing:var(--track-widest);text-transform:uppercase}
.toc-m summary::-webkit-details-marker{display:none}
.toc-m summary .ico{font-size:16px;transition:transform var(--dur-fast) var(--ease-out)}
.toc-m[open] summary .ico{transform:rotate(45deg)}
.toc-m ol{list-style:none;margin:0 0 var(--space-4);padding:0;display:grid}
.toc-m a{display:grid;grid-template-columns:2.2rem minmax(0,1fr);padding:7px 0;font:500 var(--size-sm)/1.3 var(--font-sans);text-decoration:none;border-top:1px solid var(--line-hairline)}
.toc-m a span{font:700 var(--size-3xs)/1.9 var(--font-ui);letter-spacing:var(--track-wide);color:var(--text-accent)}
@media (min-width:1360px){.toc-m{display:none}}

/* ── breakpoints ─────────────────────────────────────── */
@media (min-width:1100px){
  .mnote{float:right;clear:right;width:var(--margin);margin:4px calc(-1 * (var(--margin) + var(--gap))) var(--space-4) 0;display:grid;gap:var(--space-2)}
  .article > .pb,.article > .ch,.article > .toc-m{max-width:var(--col)}
  .interlude,.still,.testimonies{width:calc(var(--col) + var(--gap) + var(--margin))}
}
@media (min-width:1360px){
  .story{grid-template-columns:var(--rail) minmax(0,calc(var(--col) + var(--gap) + var(--margin)));column-gap:var(--space-8)}
  .toc{display:block;position:sticky;top:calc(var(--bar-h) + 40px);align-self:start;padding-top:var(--space-8);max-height:calc(100vh - var(--bar-h) - 48px);overflow:auto}
  .toc > span{display:block;margin-bottom:var(--space-3)}
  .toc ol{list-style:none;margin:0;padding:0;display:grid}
  .toc a{display:grid;grid-template-columns:1.9rem minmax(0,1fr);padding:6px 0 6px 10px;border-left:2px solid var(--line-hairline);font:500 var(--size-xs)/1.3 var(--font-ui);color:var(--text-secondary);text-decoration:none;transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
  .toc a span{font:700 var(--size-3xs)/1.6 var(--font-ui);letter-spacing:var(--track-wide)}
  .toc a:hover{color:var(--text-primary)}
  .toc a.on{color:var(--text-primary);border-left-color:var(--text-primary)}
  .toc a.on span{color:var(--text-accent)}
  .toc .sep{margin-top:var(--space-3)}
}
@media (max-width:1099px){
  .pb{display:flex;flex-direction:column}
  .pb > .mnote{order:2;display:flex;flex-wrap:wrap;gap:var(--space-2);margin:-8px 0 var(--space-5)}
  .pb > .mnote .mcard{grid-template-columns:34px minmax(0,1fr);gap:var(--space-2);padding:6px 10px 6px 6px;width:auto;max-width:100%}
  .pb > .mnote .mcard .th{width:34px;height:45px}
  .pb > .mnote .mc-ref{display:none}
  .pb > .mnote .mvid{width:auto;grid-template-columns:72px minmax(0,1fr)}
  .pb > .mnote .mvid .pv{width:72px}
  .ledger-head{grid-template-columns:1fr}
  .bar-logo span{display:none}
}
@media (max-width:900px){
  .viewer{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .v-info{max-height:44svh;border-left:0;border-top:1px solid var(--line-hairline);padding:var(--space-4) 16px var(--space-6)}
  .v-canvas img{max-width:calc(100% - 88px);max-height:calc(100% - 16px)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .pl-meta{grid-template-columns:1fr}
  .pl-src{text-align:left}
}
@media (max-width:640px){
  :root{--bar-h:58px}
  .bar-in{gap:var(--space-4)}
  .bar-nav{gap:var(--space-4)}
  .bar-nav .hide-s{display:none}
  .hb-axis,.hb-row,.hb-total{grid-template-columns:minmax(0,1fr) 5.6rem;row-gap:6px}
  .hb-axis > :first-child,.hb-total > :nth-child(2){display:none}
  .hb-row .hb-lab{grid-column:1/-1}
  .hb-axis .ticks b{display:none}
  .hb-axis .ticks i{display:inline}
  .hb-val{white-space:normal;line-height:1.15}
  .amb{--labw:0rem;--g:0px}
  .amb-killing span{left:6px;letter-spacing:.03em}
  .amb-killing span b{display:block}
  .amb-axis,.amb-row{grid-template-columns:minmax(0,1fr)}
  .amb-axis > :first-child{display:none}
  .amb-row{row-gap:6px}
  .still .frame{aspect-ratio:3/2}
  .pop.sheet{position:fixed;left:0!important;right:0;bottom:0;top:auto!important;width:100%;border-radius:0;padding-bottom:env(safe-area-inset-bottom,0px);animation:up var(--dur-base) var(--ease-entrance)}
  .pop.sheet .pop-in{max-height:72svh}
  .notes{columns:1}
  .foot-grid{grid-template-columns:1fr}
  .player{padding:12px}
}
@keyframes up{from{transform:translateY(24px);opacity:.4}}
@media print{.bar,.toc,.mnote,.fbar,.strip,.viewer,.pop,.player{display:none!important}}
.th{background-size:2000% 1100%}.sp .th{background-image:url(img/sprite-pages.webp)}.fth{background-size:800% 900%}.sp .fth{background-image:url(img/sprite-cards.webp)}
.foot-legal{display:flex;flex-wrap:wrap;gap:var(--space-4)}.foot-legal:empty{display:none}.foot-legal a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}.foot-legal a:hover{border-bottom-color:currentColor}
.bar-logo a{display:flex;align-items:center;color:inherit;text-decoration:none}@media (max-width:1099px){.bar-top{display:none}}.foot-home a{color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--line-hairline);transition:border-color var(--dur-fast) var(--ease-out)}.foot-home a:hover{border-bottom-color:currentColor}