:root{
  --bg:#f6f2ea; --bg2:#efe8dc; --card:#fffdf8; --ink:#1d1a17; --ink2:#4a443d; --mute:#7b7368; --rule:#d9d0c1;
  --liver:#7d2430; --liver2:#a8434f; --panc:#b7791f; --robot:#1f6f6b; --open:#8a8178;
  --good:#1f7a6b; --same:#8b8378; --bad:#b8322a; --hl:#fff1c9;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#13110f; --bg2:#1b1815; --card:#1f1b18; --ink:#efe8de; --ink2:#c9c0b4; --mute:#968c80; --rule:#3a332d;
  --liver:#d26a72; --liver2:#e3898f; --panc:#e0a64a; --robot:#5cc2b8; --open:#a59c90;
  --good:#5cc2a8; --same:#a59c90; --bad:#ee6b5f; --hl:#3d3420; color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#13110f; --bg2:#1b1815; --card:#1f1b18; --ink:#efe8de; --ink2:#c9c0b4; --mute:#968c80; --rule:#3a332d;
  --liver:#d26a72; --liver2:#e3898f; --panc:#e0a64a; --robot:#5cc2b8; --open:#a59c90;
  --good:#5cc2a8; --same:#a59c90; --bad:#ee6b5f; --hl:#3d3420; color-scheme:dark;}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.62 var(--serif);font-feature-settings:"onum" 0,"lnum" 1;}
a{color:inherit}
.btn{font:600 12.5px/1 var(--sans);border:1px solid var(--rule);background:var(--card);color:var(--ink);border-radius:999px;padding:7px 12px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--ink2)}
.btn.icon{padding:7px 9px}
main{padding:0 16px}
.wrap{max-width:700px;margin:0 auto}
.wide{max-width:1060px;margin:0 auto}
header.hero{padding:56px 0 18px}
.kick{font:600 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--liver)}
h1{font:400 clamp(34px,6.4vw,64px)/1.04 var(--serif);letter-spacing:-.015em;margin:14px 0 18px}
h1 em{font-style:italic;color:var(--liver)}
.dek{font-size:clamp(18px,2.3vw,21px);line-height:1.5;color:var(--ink2);margin:0 0 18px}
.how{font:14px/1.5 var(--sans);color:var(--mute);border-left:3px solid var(--panc);padding:2px 0 2px 12px;margin:20px 0 0}
.how .demo{border-bottom:1.5px dotted var(--liver);color:var(--ink)}
section.ch{padding:34px 0 10px;border-top:1px solid var(--rule);margin-top:34px}
.chn{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:flex;gap:10px;align-items:center}
.chn i{font-style:normal;display:inline-block;width:9px;height:9px;border-radius:50%}
h2{font:400 clamp(27px,4.2vw,40px)/1.12 var(--serif);margin:10px 0 14px;letter-spacing:-.01em}
h3{font:600 15px/1.3 var(--sans);margin:28px 0 6px;color:var(--ink)}
p{margin:0 0 14px}
.lede{font-size:19px;color:var(--ink2)}
.key{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:22px 0 24px}
.key>div{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:14px 16px}
.key .big{font:400 clamp(30px,4.6vw,42px)/1 var(--serif);letter-spacing:-.02em;display:block;margin-bottom:6px}
.key .cap{font:13.5px/1.42 var(--sans);color:var(--ink2)}
.key .big.l{color:var(--liver)} .key .big.p{color:var(--panc)} .key .big.r{color:var(--robot)} .key .big.b{color:var(--bad)}
a.c{display:inline-block;min-width:1.5em;text-align:center;font:700 10.5px/1.5 var(--sans);vertical-align:.45em;margin-left:2px;padding:0 4px;border-radius:5px;background:var(--bg2);border:1px solid var(--rule);color:var(--ink2);text-decoration:none;cursor:pointer}
a.c:hover,a.c.on{background:var(--liver);color:#fff;border-color:var(--liver)}
.nn{font:inherit}
blockquote.v{margin:18px 0;padding:14px 16px;background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--liver);border-radius:0 10px 10px 0;font-size:16px;color:var(--ink2)}
blockquote.v .en{font-style:italic}
blockquote.v .who{display:block;margin-top:6px;font:12.5px/1.4 var(--sans);color:var(--mute)}
figure{margin:26px 0;}
figure.fig{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:16px 16px 12px}
figcaption{font:13px/1.45 var(--sans);color:var(--mute);margin-top:8px}
figcaption b{color:var(--ink2)}
.figt{font:600 15px/1.3 var(--sans);margin:0 0 2px}
.figs{font:13px/1.4 var(--sans);color:var(--mute);margin:0 0 10px}
svg{display:block;max-width:100%;height:auto}
svg text{font-family:var(--sans)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font:12.5px/1.3 var(--sans);color:var(--ink2);margin:6px 0 4px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:11px;height:11px;border-radius:50%;display:inline-block}
/* evidence map */
#map .bub{cursor:pointer;transition:opacity .2s}
#map .bub:focus{outline:none}
#map .bub:focus-visible circle,#map .bub.sel circle{stroke:var(--ink);stroke-width:2.5}
#map.dim .bub:not(.sel){opacity:.35}
.mapwrap{position:relative}
.card{position:absolute;z-index:20;width:min(340px,calc(100% - 16px));background:var(--card);border:1px solid var(--ink2);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.22);padding:14px 16px 12px;font:14px/1.45 var(--sans);color:var(--ink)}
.card h4{margin:0 22px 2px 0;font:700 15px/1.25 var(--sans)}
.card .meta{color:var(--mute);font-size:12.5px;margin-bottom:8px}
.card .res{margin:6px 0}
.card .v{display:inline-block;font:700 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:4px 7px;border-radius:5px;color:#fff;margin:2px 0 6px}
.card .x{position:absolute;right:8px;top:6px;border:0;background:none;font:20px/1 var(--sans);color:var(--mute);cursor:pointer;padding:4px}
.card .src{font-size:12.5px;color:var(--mute);border-top:1px solid var(--rule);padding-top:7px;margin-top:8px}
.card .src em{color:var(--ink2)}
/* citation popover */
#pop{position:fixed;z-index:60;max-width:420px;width:calc(100% - 24px);background:var(--card);border:1px solid var(--ink2);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.28);padding:14px 16px 12px;font:14px/1.5 var(--sans);display:none}
#pop .lab{font:700 12px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--liver);margin-bottom:6px}
#pop q{display:block;font:italic 15px/1.5 var(--serif);color:var(--ink);quotes:none;background:var(--hl);padding:6px 8px;border-radius:6px;margin:6px 0}
#pop .ref{color:var(--ink2);font-size:12.5px;margin-top:8px}
#pop .links{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
#pop .links a{font:700 12px/1 var(--sans);padding:7px 10px;border-radius:999px;border:1px solid var(--rule);text-decoration:none;background:var(--bg2)}
#pop .x{position:absolute;right:8px;top:6px;border:0;background:none;font:20px/1 var(--sans);color:var(--mute);cursor:pointer;padding:4px}
@media (max-width:640px){#pop{left:12px!important;right:12px;bottom:12px;top:auto!important;width:auto;max-height:60vh;overflow:auto}}
/* tables */
.tbl{width:100%;border-collapse:collapse;font:14px/1.4 var(--sans);margin:8px 0}
.tbl th,.tbl td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl th{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:600}
.tag{display:inline-block;font:700 10.5px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;padding:4px 6px;border-radius:4px;color:#fff;white-space:nowrap}
.tag.g{background:var(--good)} .tag.s{background:var(--same)} .tag.b{background:var(--bad)} .tag.o{background:var(--panc)}
/* tool */
.tool{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:720px){.tool{grid-template-columns:1fr}}
.q{margin:0 0 12px}
.q .ql{font:600 13.5px/1.35 var(--sans);margin-bottom:6px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{font:600 12.5px/1 var(--sans);padding:8px 10px;border-radius:8px;border:1px solid var(--rule);background:var(--bg);color:var(--ink);cursor:pointer}
.seg button[aria-checked="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.out{border-radius:12px;padding:16px;background:var(--bg2);font:14px/1.5 var(--sans)}
.out .grade{font:400 34px/1.05 var(--serif);margin:2px 0 8px}
.meter{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--good) 0 10%,#c9b458 10% 30%,var(--panc) 30% 70%,var(--bad) 70% 100%);position:relative;margin:12px 0 4px}
.meter b{position:absolute;top:-5px;width:4px;height:22px;background:var(--ink);border-radius:2px;transform:translateX(-2px);transition:left .25s}
.ticks{display:flex;justify-content:space-between;font:11px/1 var(--sans);color:var(--mute)}
/* home papers */
.home{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:18px 0}
.home article{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:14px 16px;font:14px/1.5 var(--sans)}
.home article h4{font:600 16px/1.3 var(--serif);margin:0 0 4px}
.home .j{font-size:12px;color:var(--mute);margin-bottom:8px}
.cta{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:14px 16px;margin:18px 0;font:14px/1.45 var(--sans);text-decoration:none}
.cta b{font:600 16px/1.3 var(--serif);display:block}
.cta span.arr{font-size:22px;color:var(--liver)}
/* bibliography */
ol.bib{font:13.5px/1.5 var(--sans);color:var(--ink2);padding-left:2.2em}
ol.bib li{margin:0 0 9px;scroll-margin-top:70px}
ol.bib li:target{background:var(--hl);border-radius:6px}
ol.bib a{font-weight:600;text-decoration:none;border-bottom:1px solid var(--rule)}
ol.bib .lb{font-weight:700;color:var(--ink)}
footer{border-top:1px solid var(--rule);margin-top:40px;padding:22px 0 60px;font:13px/1.5 var(--sans);color:var(--mute)}
.toc{display:flex;flex-wrap:wrap;gap:6px;margin:22px 0 0}
.toc a{font:600 12.5px/1 var(--sans);text-decoration:none;padding:8px 11px;border-radius:999px;border:1px solid var(--rule);background:var(--card)}
.toc a:hover{border-color:var(--ink2)}
/* couinaud */
#cou .s{cursor:pointer;transition:fill .2s}
#cou .s:hover{filter:brightness(1.07)}
#cou .s.on{stroke:var(--ink);stroke-width:2.2}
#cou text{pointer-events:none}
.coux{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:start}
@media (max-width:720px){.coux{grid-template-columns:1fr}}
.couinfo{font:14px/1.5 var(--sans);background:var(--bg2);border-radius:12px;padding:14px 16px;min-height:150px}
.couinfo h4{margin:0 0 4px;font:600 17px/1.25 var(--serif)}
/* presentation mode */
body.present body.present main>.wrap>*:not(header):not(section), body.present footer, body.present #bibsec{display:none!important}
body.present section.ch, body.present header.hero{display:none;border:0;margin:0;padding:6vh 0 4vh;min-height:calc(100vh - 50px)}
body.present .slide-on{display:block!important}
body.present section.ch>*:not(.chn):not(h2):not(.key):not(figure.pres){display:none}
body.present header.hero .how, body.present header.hero .toc{display:none}
body.present h2{font-size:clamp(32px,4.6vw,54px)}
body.present .key{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
body.present .key .big{font-size:clamp(40px,5.4vw,64px)}
body.present .key .cap{font-size:15.5px}
body.present .wrap{max-width:1060px}
#pnav{display:none;position:fixed;right:16px;bottom:16px;z-index:40;gap:8px;align-items:center;font:600 12.5px/1 var(--sans);color:var(--mute)}
body.present #pnav{display:flex}
@media print{.topbar,.rail,.share,#pop,#pnav{display:none!important} section.ch{break-inside:avoid-page}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

@media (min-width:900px){figure.wide{--fw:min(1040px,calc(100vw - 64px));width:var(--fw);margin-left:calc((100% - var(--fw))/2)}}
@media (max-width:640px){.tbl thead{display:none}.tbl tr{display:block;border-bottom:1px solid var(--rule);padding:10px 0}.tbl td{display:block;border:0;padding:3px 0}}
.mapwrap svg,#dumb,#slope{width:100%;height:auto}

/* ---- critic pass 1 ---- */
.key>div{display:flex;flex-direction:column;padding:16px 18px 14px}
.key .big{white-space:nowrap;font-size:clamp(27px,3.3vw,36px);margin-bottom:8px}
.key .cap{display:block;font:13.5px/1.42 var(--sans)}
a.c{background:none;border:0;padding:0 1px;min-width:0;margin-left:1px;font:700 10.5px/1 var(--sans);color:var(--liver);vertical-align:.55em;border-radius:3px}
a.c:hover,a.c.on{background:var(--liver);color:#fff}
a.c::before{content:"["}a.c::after{content:"]"}
h3{font:600 20px/1.3 var(--serif);margin:34px 0 8px;letter-spacing:-.005em}
.figt{font:600 17px/1.3 var(--serif)}
input[type=range]{accent-color:var(--liver)}
.seg button[aria-checked="true"]{background:color-mix(in srgb,var(--liver) 14%,var(--card));color:var(--ink);border-color:var(--liver);box-shadow:inset 0 0 0 1px var(--liver)}
.chn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chn i{flex:none}
body.present section.ch.slide-on,body.present header.hero.slide-on{display:flex!important;flex-direction:column;justify-content:center}
body.present figure.pres{max-height:62vh;overflow:auto}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg2:#221e1a;--card:#1c1916}}
:root[data-theme="dark"]{--bg2:#221e1a;--card:#1c1916}

header.hero{padding:34px 0 0}
h1{font-size:clamp(32px,5.2vw,56px);margin:12px 0 14px}
.dek{font-size:clamp(17px,2vw,19.5px);margin-bottom:10px}
.how{margin-top:12px}
section.ch.first{border-top:0;margin-top:6px;padding-top:12px}
section.ch.first h2{font-size:clamp(22px,2.8vw,28px);margin:6px 0 6px}
section.ch.first .lede{font-size:16px}

/* critic pass 2 */
.key{gap:0 22px;margin:18px 0 26px}
.key>div{background:none;border:0;border-top:2px solid var(--rule);border-radius:0;padding:12px 0 4px}
.key>div:first-child{border-top-color:currentColor}
.key .big{white-space:normal;font-size:clamp(26px,3vw,34px);line-height:1.05}
.out{align-self:start}
.coux{grid-template-columns:1.7fr 1fr}
.couinfo{min-height:0}

/* ---- site shell ---- */
:root{--line:var(--rule);--mut:var(--mute);--acc:var(--liver);--fg:var(--ink);--to-top-bg:var(--bg);--to-top-fg:var(--ink)}
html{scroll-padding-top:56px}
section.ch,header.hero{scroll-margin-top:56px}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--card);color:var(--ink);padding:8px 12px;border-radius:8px;border:1px solid var(--ink2)}
.skip-link:focus{left:12px}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;height:calc(48px + var(--browser-safe-top,env(safe-area-inset-top)));padding:var(--browser-safe-top,env(safe-area-inset-top)) 16px 0;background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom:1px solid var(--rule);font:500 13px/1.2 var(--sans)}
.topbar .home{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink);font-weight:600;white-space:nowrap}
.topnav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0}
.topnav::-webkit-scrollbar{display:none}
.topnav a{text-decoration:none;color:var(--ink2);padding:6px 8px;border-radius:6px;white-space:nowrap}
.topnav a:hover{color:var(--ink);background:var(--bg2)}
.spacer{flex:1}
.chip{font:700 12px/1 var(--sans);text-decoration:none;color:var(--ink);border:1px solid var(--rule);border-radius:999px;padding:7px 10px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--rule);background:var(--card);color:var(--ink);cursor:pointer}
#prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--liver);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
@media (max-width:640px){.topbar .home span{display:none}.topnav a{padding:6px 6px}#present{display:none}}
.share{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:6px 0 16px;font:13px/1.3 var(--sans);color:var(--mute)}
.share-label{margin-right:4px}
.sbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--rule);background:transparent;color:var(--ink);cursor:pointer;text-decoration:none}
.sbtn svg{width:18px;height:18px}
.sbtn:hover,.sbtn:focus-visible{color:var(--liver);border-color:var(--liver)}
@media (pointer:coarse){.sbtn{width:44px;height:44px}}
.share-status{margin-left:6px}
.dedic{margin:46px auto 8px;max-width:560px;text-align:center}
.dedic p{font:italic 19px/1.55 var(--serif);color:var(--ink2);margin:0}
.dedic::before{content:"";display:block;width:44px;height:1px;background:var(--liver);margin:0 auto 16px}
.note{font:13px/1.5 var(--sans);color:var(--mute);margin:26px 0 0}
.site-footer{max-width:700px;margin:40px auto 0;padding:22px 16px 70px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:8px 18px;font:13px/1.5 var(--sans);color:var(--mute)}
.site-footer a{color:var(--ink2)}
body.present .rail,body.present .share,body.present .topnav,body.present .note,body.present .dedic{display:none!important}

/* reading-rail v2: dots in the gutter beside the column, labels never over the text.
   1040px = the WIDEST content column on the page (charts, tables, maps, .wide sections), not the text measure,
   and raise the min-width below to the width where that gutter exists (1040px + ~6rem). rail-check.py fails
   if a dot covers any content at 1100-1920 px (FM-1018). */
.rail{display:none}
@media(min-width:1180px){
.rail{--col:1040px;--gut:1.25rem;display:flex;flex-direction:column;position:fixed;top:50%;left:calc(50% + var(--col)/2 + var(--gut));transform:translateY(-50%);z-index:40;margin:0;padding:.4rem 0;max-height:calc(100vh - 7rem)}
.rail::before{content:"";position:absolute;left:calc(.875rem - .5px);top:1.1rem;bottom:1.1rem;width:1px;background:var(--line)}
.rail-dot{position:relative;display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;text-decoration:none;border-radius:50%}
.rail-dot .dot{width:7px;height:7px;border-radius:50%;background:var(--mut);box-shadow:0 0 0 3px var(--bg);transition:transform .2s,background .2s,box-shadow .2s;flex:none}
.rail-dot:hover .dot,.rail-dot:focus-visible .dot{background:var(--acc);transform:scale(1.25)}
.rail-dot[aria-current=true] .dot{background:var(--acc);transform:scale(1.45);box-shadow:0 0 0 3px var(--bg),0 0 0 4.5px color-mix(in srgb,var(--acc) 38%,transparent)}
.rail-dot:focus-visible{outline:2px solid var(--acc);outline-offset:-1px}
/* narrow gutter: a label is a hover/focus tooltip only, never left on over the text */
.rail-label{position:absolute;right:calc(100% + .3rem);top:50%;transform:translate(6px,-50%);padding:.22rem .65rem;border:1px solid var(--line);border-radius:.5rem;background:var(--bg);color:var(--fg);box-shadow:0 6px 20px rgba(0,0,0,.14);font-size:.82rem;font-weight:600;line-height:1.3;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.rail-dot:hover .rail-label,.rail-dot:focus-visible .rail-label{opacity:1;transform:translate(0,-50%)}
}
/* wide gutter: labels sit outside the column and still appear only on hover or focus */
@media(min-width:1400px){
.rail-label{right:auto;left:calc(100% + .15rem);max-width:calc(50vw - var(--col)/2 - var(--gut) - 3.25rem);overflow:hidden;text-overflow:ellipsis;padding:.1rem .2rem;border-color:transparent;background:transparent;box-shadow:none;color:var(--mut);transform:translate(-4px,-50%)}
.rail-dot:hover .rail-label,.rail-dot:focus-visible .rail-label{color:var(--acc)}
}
@media(prefers-reduced-motion:reduce){.rail .dot,.rail-label{transition:none}}
@media(forced-colors:active){.rail::before{background:CanvasText}.rail-dot .dot{background:CanvasText;box-shadow:none}.rail-dot[aria-current=true] .dot{background:Highlight}.rail-label{border-color:CanvasText}}

[hidden]{display:none!important}