:root{--ink:#1F2429;--soft:#3B4148;--grey:#50565C;--rule:#D3D6D4;--paper:#F7F7F5;--card:#EEEFEC;--accent:#7A2E2A;--sec:#7A2E2A}
@media (prefers-color-scheme:dark){:root{--ink:#ECEBE6;--soft:#C9C7C0;--grey:#A3A39C;--rule:#3A3F44;--paper:#16191C;--card:#202428;--accent:#D88A7E}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Newsreader',Georgia,serif;font-size:19px;line-height:1.62;-webkit-text-size-adjust:100%}
a{color:inherit}img{max-width:100%;display:block}
.wrap{max-width:680px;margin:0 auto;padding:0 22px}
h1,h2,h3,h4{font-family:'Instrument Serif',Georgia,serif;font-weight:400;line-height:1.08;margin:0}
.label,.kind,.dl,.hint,.byline,.credit,.shows,.deck span,.bridge span,.fvq span,.dyk h4,.readnext h4,.topbar{font-family:'Instrument Sans',system-ui,sans-serif}
.label{font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin:0 0 .5rem}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px 18px calc(10px);background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:.8rem;border-bottom:1px solid var(--rule)}
.tb-home{font-family:'Instrument Serif',serif;font-size:1.15rem;text-decoration:none}#now{flex:1;color:var(--grey);font-weight:600;letter-spacing:.04em}
.tb-sub{background:var(--ink);color:var(--paper);padding:6px 12px;border-radius:99px;text-decoration:none;font-weight:600}
#bar{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--accent);transition:width .1s linear}
.hero,.home-hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden;color:#fff}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:drift 22s ease-out forwards}
@keyframes drift{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero-over,.ch-over{position:relative;padding:28px 22px 40px;width:100%;background:linear-gradient(transparent,rgba(10,12,14,.82) 45%)}
.hero h1{font-size:3.2rem;font-size:clamp(2.6rem,9vw,4.6rem);max-width:12ch}.hero .label,.ch-over .label{color:#F2D6CF}
.sub{font-size:1.05rem;max-width:34ch;opacity:.92}.scroll{display:inline-block;margin-top:14px;font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:.85rem;text-decoration:none;border-bottom:1px solid}
.home-hero{min-height:52vh;background:var(--ink);color:var(--paper);padding:0 22px 36px}.home-hero h1{font-size:3.6rem;font-size:clamp(3rem,13vw,6rem)}
.lede{font-size:1.2rem;margin:2.2rem 0 1.4rem;color:var(--soft)}
.toc{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 3rem}
.tc{position:relative;display:block;aspect-ratio:3/4;border-radius:10px;overflow:hidden;text-decoration:none;color:#fff}
.tc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}.tc:hover img{transform:scale(1.05)}
.tc span,.tc b{position:relative;display:block;padding:0 12px}.tc span{margin-top:auto;padding-top:60%;font:600 .7rem 'Instrument Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase}
.tc b{font:400 1.15rem/1.15 'Instrument Serif',serif;padding-bottom:12px}.tc::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(0,0,0,.75));z-index:0}.tc span,.tc b{z-index:1}
.chapter{border-top:1px solid var(--rule)}.ch-hero{position:relative;min-height:78vh;display:flex;align-items:flex-end;overflow:hidden;color:#fff}
.ch-over h2{font-size:2.8rem;font-size:clamp(2.2rem,8vw,3.8rem);max-width:14ch}.ch-over .argcap{color:#F4F1EA}
.intro{font-size:1.15rem;margin:2rem 0 1rem}.wits{list-style:none;padding:0;margin:0 0 2rem;display:flex;flex-wrap:wrap;gap:8px}
.wits a{display:inline-block;font:600 .8rem 'Instrument Sans',sans-serif;padding:7px 12px;border:1px solid var(--rule);border-radius:99px;text-decoration:none}
.argcap{font-family:'Instrument Serif',serif;font-style:italic;font-size:1.3rem;line-height:1.25;margin:.6rem 0}
figure{margin:2.6rem -22px 1.2rem}figure img{width:100%;cursor:zoom-in}figure .argcap,figure details{padding:0 22px}
details{margin:.4rem 0}summary{cursor:pointer;font:600 .8rem 'Instrument Sans',sans-serif;color:var(--grey);letter-spacing:.04em}
details p{font-size:.95rem;color:var(--soft)}.credit{font-size:.75rem;color:var(--grey)}
.piece{padding-bottom:1.5rem;border-bottom:1px solid var(--rule)}.piece h2{font-size:2.3rem;font-size:clamp(2rem,7vw,2.8rem);margin:.2rem 0 .4rem}
.byline{font-size:.85rem;color:var(--grey);margin:0 0 1.2rem}
.deck{border-left:3px solid var(--sec);padding:.2rem 0 .2rem 1rem;margin:1.2rem 0;font-size:1.1rem}.deck span{display:block;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.pq{font-family:'Instrument Serif',serif;font-style:italic;font-size:1.7rem;line-height:1.2;margin:2rem 0;padding:0}
.essay p{margin:0 0 1.05em}.orn{text-align:center;color:var(--grey)}
.dyk{background:var(--card);border-radius:10px;padding:16px 18px;margin:1.6rem 0}.dyk h4{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}.dyk p{margin:.5rem 0 0;font-size:1rem}
.readnext{font-size:.92rem;color:var(--soft)}.readnext h4{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:1.4rem 0 .4rem}.rn{margin:.4rem 0}.rn-n{color:var(--grey);font-size:.85rem}
.fvq{margin:1.5rem 0;padding:1rem 1.1rem;background:var(--card);border-radius:10px;font-size:1rem}.fvq span{display:block;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.4rem}
.out{display:block;margin-top:.6rem;font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:.85rem}
.fg{margin:3rem 0}.fg h3{font-size:2.2rem}.hint{font-size:.75rem;color:var(--grey);margin:.2rem 0 .8rem}
.cards{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 22px 12px;margin:0 -22px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.card{flex:0 0 82%;scroll-snap-align:center;background:var(--card);border-radius:12px;padding:14px;font-size:.95rem}
.card img{width:100%;height:180px;object-fit:cover;border-radius:8px}.glyph{height:180px;display:grid;place-items:center;font:5rem 'Instrument Serif',serif;color:var(--accent);background:color-mix(in srgb,var(--card) 60%,var(--paper));border-radius:8px}
.card h4{font-size:1.5rem;margin:.2rem 0 .3rem}.kind{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin:.8rem 0 0}.bio{color:var(--soft);font-size:.88rem}.shows{font-size:.8rem;font-weight:600;color:var(--accent)}
.land h3,.debates h3,.numbers h3,.open h3{font-size:2.3rem;font-size:clamp(2rem,7vw,2.8rem);margin:3rem 0 1rem}
.takes{list-style:none;padding:0}.takes li{padding:.7rem 0;border-top:1px solid var(--rule)}.takes i{display:block;font-family:'Instrument Serif',serif;font-size:1.15rem}
.bridge{margin:2rem 0 3rem;padding:1.4rem 0 0;border-top:2px solid var(--ink)}.bridge span{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.bridge p{font-family:'Instrument Serif',serif;font-style:italic;font-size:1.6rem;line-height:1.25;margin:.4rem 0 1rem}
.next{display:inline-block;background:var(--sec);color:#fff;padding:12px 20px;border-radius:99px;text-decoration:none;font:600 .9rem 'Instrument Sans',sans-serif}
.debate{background:var(--card);border-radius:12px;padding:18px;margin:1rem 0}.debate h4{font-size:1.45rem}.dl{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin:1rem 0 .2rem}.debate p{margin:.2rem 0;font-size:1rem}.now{font-family:'Instrument Serif',serif;font-style:italic;font-size:1.2rem!important}
.nb{padding:1.2rem 0;border-top:1px solid var(--rule)}.big{font-family:'Instrument Serif',serif;font-size:clamp(3rem,13vw,4.6rem);line-height:1;color:var(--accent);margin:0}.nb p{margin:.3rem 0 0}
.op{padding:1rem 0;border-top:1px solid var(--rule)}.op h4{font-size:1.4rem}.op p{font-style:italic;color:var(--soft)}
.subscribe{margin:3rem 0;padding:24px;border-radius:14px;background:var(--ink);color:var(--paper);text-align:center}.subscribe h3{font-size:2rem}.subscribe p{opacity:.85}
.btn{display:inline-block;margin-top:.6rem;background:var(--accent);color:#fff;padding:13px 22px;border-radius:99px;text-decoration:none;font:600 .95rem 'Instrument Sans',sans-serif}
.sources{font-size:.85rem}.sources li{margin:.4rem 0}.sources h4{font-size:1.2rem;margin:1rem 0 .3rem}
.colophon{font-size:.85rem;color:var(--grey);padding:2rem 0 4rem;border-top:1px solid var(--rule)}
.edition{display:block;margin:2.4rem 0;border-radius:14px;overflow:hidden;background:var(--card);text-decoration:none}.edition img{width:100%;height:240px;object-fit:cover}.edition div{padding:18px}.edition h2{font-size:2rem}.edition ul{padding-left:1.1rem;color:var(--soft)}.go{font:600 .9rem 'Instrument Sans',sans-serif;color:var(--accent)}.soon{color:var(--grey);text-align:center}
#lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh}#lb::backdrop{background:rgba(0,0,0,.92)}#lb img{max-width:96vw;max-height:92vh;object-fit:contain}
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.hero-img{animation:none}.js .reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
@media (min-width:900px){.card{flex-basis:46%}figure{margin-left:0;margin-right:0}figure .argcap,figure details{padding:0}}
/* ---------- device pass: iPhone, iPad, desktop ---------- */
html{-webkit-tap-highlight-color:transparent}
body{overflow-x:hidden;overflow-x:clip}
img{height:auto}
.hero-img,.tc img,.card img,.edition img{height:100%}
.card img{height:180px}.edition img{height:240px}
.topbar{background:rgba(247,247,245,.92);padding-top:max(10px,env(safe-area-inset-top));padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
@supports (background:color-mix(in srgb,red 50%,blue)){.topbar{background:color-mix(in srgb,var(--paper) 86%,transparent)}}
@media (prefers-color-scheme:dark){.topbar{background:rgba(22,25,28,.92)}}
#now{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-home,.tb-sub{flex:none}
.hero{min-height:88vh;min-height:88svh}.ch-hero{min-height:78vh;min-height:78svh}
.hero-over,.ch-over{padding-left:max(22px,env(safe-area-inset-left),calc((100% - 680px)/2 + 22px));padding-right:max(22px,env(safe-area-inset-right))}
.hero-over>*,.ch-over>*{max-width:640px}
.colophon{padding-bottom:max(4rem,calc(2rem + env(safe-area-inset-bottom)))}
a:focus-visible,summary:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.cards{scroll-padding:0 22px}
@media (max-width:380px){body{font-size:18px}.tb-home{font-size:1rem}.tb-sub{padding:5px 10px}}
@media (min-width:600px) and (max-width:899px){.card{flex-basis:58%}figure{margin-left:0;margin-right:0}figure .argcap,figure details{padding:0}.toc{grid-template-columns:repeat(4,1fr)}.tc{aspect-ratio:2/3}}
@media (min-width:900px){body{font-size:20px}.toc{grid-template-columns:repeat(4,1fr)}.tc{aspect-ratio:2/3}.card{flex-basis:44%}.cards{margin:0;padding:0 0 12px}
 .hero h1{font-size:4.8rem}.ch-over h2{font-size:4rem}.ch-hero{min-height:82vh}}
@media (hover:hover){.tc:hover img{transform:scale(1.05)}.btn:hover,.next:hover,.tb-sub:hover{filter:brightness(1.08)}}
@media (hover:none){.tc:hover img{transform:none}}
.home-hero{flex-direction:column;justify-content:flex-end;align-items:flex-start}
.home-hero>*{max-width:640px}
/* ---------- reading pass: type, navigation, sharing, art notes, charts ---------- */
:root{--mark:#8A3530}
@media (prefers-color-scheme:dark){:root{--mark:#D0705F}}
/* Type: hyphenated, evenly wrapped text; balanced headlines; opening quotes hung in the margin (Safari) */
.essay p,.intro,.lede,.deck,.dyk p,.debate p,.nb p,.card p,.bio,details p,.fvq,.readnext{-webkit-hyphens:auto;hyphens:auto;text-wrap:pretty}
h1,h2,h3,h4,.sub,.argcap,.pq,.bridge p{text-wrap:balance}
.pq,.fvq,.bridge p,.op p,.now{hanging-punctuation:first allow-end}
/* Progress bar: scaled, not resized; driven by scroll position in CSS where supported */
#bar{width:100%;transform:scaleX(0);transform-origin:0 50%;transition:none}
@supports (animation-timeline:scroll()){#bar{animation:progress linear both;animation-timeline:scroll(root)}}
@keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Chapter menu: the label in the top bar opens a sheet from the bottom */
#now[role=button]{display:flex;align-items:center;gap:7px;min-height:32px;cursor:pointer}
#now .now-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
#now[role=button]::after{content:'';flex:none;width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg)}
html:has(dialog[open]){overflow:hidden}
dialog:focus{outline:none}
.sheet{position:fixed;inset:auto 0 0;width:100%;max-width:560px;max-height:85vh;max-height:85svh;margin:0 auto;padding:0;border:0;border-radius:18px 18px 0 0;background:var(--paper);color:var(--ink);box-shadow:0 -12px 40px rgba(0,0,0,.25);overflow:auto;overscroll-behavior:contain}
.sheet::backdrop{background:rgba(10,12,14,.45)}
.sheet[open]{animation:sheet-up .34s cubic-bezier(.2,.8,.2,1)}
@keyframes sheet-up{from{transform:translateY(100%)}}
.sh-in{padding:10px 20px max(20px,env(safe-area-inset-bottom))}
.sh-grab{width:36px;height:5px;margin:0 auto 14px;border-radius:3px;background:var(--rule)}
.sh-head{display:flex;justify-content:space-between;margin:0 0 6px;font:600 .72rem 'Instrument Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--grey)}
.sheet ol{list-style:none;margin:0;padding:0}
.sheet li a{display:grid;grid-template-columns:1fr auto;gap:2px 14px;padding:14px 0;border-top:1px solid var(--rule);text-decoration:none}
.sh-label{font:600 .7rem 'Instrument Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.sh-label:empty{display:none}
.sheet b{grid-column:1;font:400 1.25rem/1.15 'Instrument Serif',serif}
.sh-time{grid-row:1/3;grid-column:2;align-self:center;font:600 .78rem 'Instrument Sans',sans-serif;color:var(--grey);white-space:nowrap}
.sheet a[aria-current] .sh-time{color:var(--accent)}
/* Pick up where you left off */
.resume{position:fixed;z-index:30;left:50%;bottom:max(16px,env(safe-area-inset-bottom));display:flex;align-items:center;max-width:calc(100% - 32px);padding:2px 2px 2px 18px;border-radius:99px;background:var(--ink);color:var(--paper);font:600 .85rem 'Instrument Sans',sans-serif;box-shadow:0 8px 28px rgba(0,0,0,.28);transform:translateX(-50%);animation:rise .45s cubic-bezier(.2,.8,.2,1)}
.resume a{min-width:0;padding:12px 4px 12px 0;overflow:hidden;color:inherit;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}
.resume button{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:none;color:inherit;font:400 1.3rem/1 'Instrument Sans',sans-serif;cursor:pointer}
@keyframes rise{from{opacity:0;transform:translate(-50%,24px)}}
/* Share a passage */
.share{display:inline-flex;align-items:center;gap:7px;margin:-1.1rem 0 2rem;padding:8px 13px;border:1px solid var(--rule);border-radius:99px;background:none;color:var(--grey);font:600 .78rem 'Instrument Sans',sans-serif;cursor:pointer}
.share svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.toast{position:fixed;z-index:40;left:50%;bottom:max(24px,env(safe-area-inset-bottom));padding:10px 16px;border-radius:99px;background:var(--ink);color:var(--paper);font:600 .85rem 'Instrument Sans',sans-serif;transform:translateX(-50%);animation:rise .3s ease}
/* Image viewer: close button, numbered details, notes */
#lb{overflow:visible}
.lb-frame{position:relative;display:inline-block;vertical-align:middle}
#lb.has-notes{margin-top:max(64px,calc(env(safe-area-inset-top) + 56px))}#lb.has-notes img{max-height:calc(100vh - 300px);max-height:calc(100svh - 300px)}
.lb-close{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font:400 1.6rem/1 'Instrument Sans',sans-serif;cursor:pointer}
.spot{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;padding:0;border:2px solid #fff;border-radius:50%;background:rgba(122,46,42,.94);color:#fff;font:600 .8rem/1 'Instrument Sans',sans-serif;cursor:pointer;animation:pulse 2.6s ease-out infinite}
.spot::before{content:'';position:absolute;inset:-9px}
.spot[aria-pressed=true]{width:46px;height:46px;margin:-23px 0 0 -23px;background:none;color:transparent;box-shadow:0 0 0 2px rgba(0,0,0,.35),inset 0 0 0 2px rgba(0,0,0,.35);animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%,100%{box-shadow:0 0 0 13px rgba(255,255,255,0)}}
.lb-note{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));width:min(560px,calc(100% - 32px));margin:0;padding:14px 16px;border-radius:14px;background:rgba(22,25,28,.94);color:#F4F1EA;font-size:1rem;line-height:1.45;text-align:left;transform:translateX(-50%)}
.lb-note[hidden]{display:none}
.lb-note b{display:block;margin-bottom:4px;font:600 .7rem 'Instrument Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#F2D6CF}
.lb-note button{display:block;margin:10px 0 0 auto;padding:6px 0;border:0;background:none;color:#fff;font:600 .82rem 'Instrument Sans',sans-serif;cursor:pointer}
.art{position:relative;display:block}
.chip,.explore{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.65);border-radius:99px;background:rgba(10,12,14,.45);color:#fff;font:600 .78rem 'Instrument Sans',sans-serif;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.chip{position:absolute;top:10px;right:10px;padding:7px 11px}
.explore{margin-top:14px;padding:10px 15px;font-size:.84rem}
.chip::before,.explore::before{content:'';width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.25)}
/* Chapter openers settle into place as they scroll in */
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
 .ch-hero .hero-img{animation:settle linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
 .ch-over>*{animation:lift linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
}}
@keyframes settle{from{transform:scale(1.18)}to{transform:scale(1)}}
@keyframes lift{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
/* View transitions: the issue cover morphs between pages; images grow into the viewer */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
::view-transition-group(*){animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-old(issue-1),::view-transition-new(issue-1),::view-transition-old(lb-img),::view-transition-new(lb-img){height:100%;object-fit:cover}
/* Did you know: folded on phones, a sticky margin note on wide screens */
.dyk-more{display:inline-flex;margin-top:6px;padding:8px 0 2px;border:0;background:none;color:var(--accent);font:600 .78rem 'Instrument Sans',sans-serif;cursor:pointer}
.dyk.fold:not(.open) p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.dyk.fold:not(.open) p~p{display:none}
@media (min-width:1240px){
 .js .piece:has(>.dyk){display:grid;grid-template-columns:100% 240px;column-gap:44px;align-items:start}
 .js .piece:has(>.dyk)>*{grid-column:1}
 .js .piece>.dyk{grid-column:2;grid-row:var(--row,auto)/span 3;position:sticky;top:calc(var(--tb,50px) + 28px);margin:0;padding:2px 0 2px 16px;border-left:2px solid var(--rule);border-radius:0;background:none}
 .dyk.fold p{display:block!important;overflow:visible}
 .dyk-more{display:none}
}
/* Scroll-driven chart: pinned under the top bar while the essay scrolls past */
.sb{display:none}
.js .sb{display:block;position:sticky;top:var(--tb,50px);z-index:2;margin:0 -22px 1.4rem;padding:12px 22px 8px;background:var(--paper);border-bottom:1px solid var(--rule)}
.sb figcaption{font:600 .72rem 'Instrument Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.sb figcaption b{display:block;font:400 1.15rem/1.2 'Instrument Serif',serif;letter-spacing:0;text-transform:none;color:var(--ink)}
.sb-plot{position:relative;margin-top:6px;touch-action:pan-y}
.sb-plot svg{display:block;width:100%;overflow:visible;font:500 11px 'Instrument Sans',sans-serif}
.sb-src{margin:4px 0 0;font:.68rem 'Instrument Sans',sans-serif;color:var(--grey)}
.sb .grid line{stroke:var(--rule);stroke-width:1}
.sb .axis text{fill:var(--grey);font-variant-numeric:tabular-nums}
.sb .span{fill:var(--mark);fill-opacity:.1}
.sb .line{fill:none;stroke:var(--mark);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sb .dot{fill:var(--mark);stroke:var(--paper);stroke-width:2}
.sb .approx{fill:var(--paper);stroke:var(--mark);stroke-width:1.5}
.sb .ev line{stroke:var(--grey);stroke-width:1}
.sb .ev-dot{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
.sb .lbl{fill:var(--ink);font-weight:600}
.sb .sb-sub{fill:var(--grey);font-weight:500}
.sb .lbl,.sb .sb-sub{paint-order:stroke;stroke:var(--paper);stroke-width:4px;stroke-linejoin:round}
.sb .late{transition:opacity .4s}
.sb .fade{opacity:0;transition:opacity .5s}
.sb .fade.on{opacity:1}
.sb[data-step="4"] .late{opacity:.3}
.sb .hover line{stroke:var(--ink);stroke-width:1}
.sb-tip{position:absolute;top:0;padding:6px 9px;border-radius:8px;background:var(--ink);color:var(--paper);font:600 .8rem/1.25 'Instrument Sans',sans-serif;white-space:nowrap;pointer-events:none;transform:translateX(-50%)}
.sb-tip span{display:block;font-weight:500;font-size:.72rem;opacity:.8}
.sb-data{margin:-.6rem 0 1.4rem}
.sb-data table{width:100%;border-collapse:collapse;font:.85rem 'Instrument Sans',sans-serif;font-variant-numeric:tabular-nums}
.sb-data th,.sb-data td{padding:5px 0;border-bottom:1px solid var(--rule);text-align:left}
.sb-data th:nth-child(2),.sb-data td:nth-child(2){padding-right:12px;text-align:right;white-space:nowrap}
.sb-data td:nth-child(3){color:var(--grey);font-size:.78rem}
@media (min-width:900px){.js .sb{margin-left:0;margin-right:0;padding-left:0;padding-right:0}}
/* Unit charts in By the numbers */
.units{margin:.9rem 0 .2rem}
.units canvas{display:block;width:100%}
.figs{display:flex;flex-wrap:wrap;gap:7px 6px}
.figs svg{width:13px;height:28px}
.figs path{fill:var(--rule);transition:fill .3s}
.figs.on path{fill:var(--mark)}
.units-key{margin:.4rem 0 0;font:.75rem 'Instrument Sans',sans-serif;color:var(--grey)}
@media (prefers-reduced-motion:reduce){.sheet[open],.resume,.toast{animation:none}.spot{animation:none}.figs path,.sb .fade{transition:none}}
/* ---------- subscribing: asks at the end of the feature and the issue, and one nudge per reader ---------- */
.ask{margin:1.6rem 0 0;padding:16px 18px 18px;border-radius:12px;background:var(--card)}
.ask p{margin:0 0 .4rem;font-size:1rem}
.sub-form{display:block;width:100%;height:320px;margin:1.1rem 0 .7rem;border:0;border-radius:10px;background:#fff}
.sub-alt{font:600 .85rem 'Instrument Sans',sans-serif;color:inherit;opacity:.85}
.nudge{position:fixed;z-index:30;left:50%;bottom:max(16px,env(safe-area-inset-bottom));width:min(420px,calc(100% - 32px));padding:16px 18px;border-radius:16px;background:var(--ink);color:var(--paper);box-shadow:0 10px 32px rgba(0,0,0,.3);transform:translateX(-50%);animation:rise .45s cubic-bezier(.2,.8,.2,1)}
.nudge .label{color:inherit;opacity:.7}
.nudge p:not(.label){margin:0;padding-right:28px;font-size:1rem;line-height:1.45}
.nudge-later{margin-left:8px;padding:12px 8px;border:0;background:none;color:inherit;font:600 .9rem 'Instrument Sans',sans-serif;opacity:.8;cursor:pointer}
.nudge-x{position:absolute;top:4px;right:4px;width:44px;height:44px;border:0;background:none;color:inherit;font:400 1.3rem/1 'Instrument Sans',sans-serif;opacity:.7;cursor:pointer}
@media (prefers-reduced-motion:reduce){.nudge{animation:none}}
/* ---------- layout pass: masthead, wider visuals on tablets and desktop, drop caps ---------- */
:root{--wide:min(1040px,calc(100vw - 44px));--fig:min(920px,calc(100vw - 44px))}
/* Homepage masthead: wordmark between rules, on paper */
.masthead{width:var(--wide);margin:0 auto;padding-top:max(26px,env(safe-area-inset-top));text-align:center}
.mh-meta{display:flex;justify-content:space-between;gap:12px;padding:9px 0 8px;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);font:600 .68rem 'Instrument Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.masthead h1{padding:.12em 0 .08em;border-bottom:3px double var(--ink);font-size:clamp(3.6rem,17.5vw,9.75rem);line-height:1;letter-spacing:-.005em}
.mh-sub{max-width:34ch;margin:0 auto;padding:18px 0 4px;font-size:1.12rem;font-style:italic;color:var(--soft);text-wrap:balance}
/* Drop cap on each essay's opening paragraph */
.essay>p:first-child::first-letter{-webkit-initial-letter:3;initial-letter:3;margin-right:.1em;font-family:'Instrument Serif',serif;font-weight:400;color:var(--accent)}
@supports not ((initial-letter:3) or (-webkit-initial-letter:3)){.essay>p:first-child::first-letter{float:left;margin:.06em .08em 0 0;font-size:3.6em;line-height:.82}}
/* Openers keep the painting's proportions on tablets instead of cropping it to a tall slice */
@media (min-width:600px){
 .hero{min-height:min(88vh,80vw);min-height:min(88svh,80vw)}
 .ch-hero{min-height:min(78vh,64vw);min-height:min(78svh,64vw)}
}
/* Tablets and up: the cover, contents, and numbers widen past the text column */
@media (min-width:760px){
 .edition{display:grid;grid-template-columns:1.25fr 1fr;width:var(--wide);margin:2.6rem 0 2.6rem calc((100% - var(--wide))/2)}
 .edition img{height:100%;min-height:440px}
 .edition div{align-self:center;padding:36px 34px}
 .edition h2{font-size:2.5rem}
 .mh-sub{max-width:44ch;padding-top:22px;font-size:1.3rem}
 .toc{width:var(--wide);margin-left:calc((100% - var(--wide))/2);gap:16px}
 .tc span,.tc b{padding-left:16px;padding-right:16px}
 .tc b{padding-bottom:16px;font-size:1.4rem}
 .numbers{width:var(--wide);margin-left:calc((100% - var(--wide))/2);columns:2;column-gap:56px}
 .numbers>h3{column-span:all}
 .nb{break-inside:avoid}
}
/* Desktop: wide figures, the field guide as a grid, and no hyphenation at full measure */
@media (min-width:900px){
 .ch-hero{min-height:min(82vh,64vw);min-height:min(82svh,64vw)}
 .piece>figure,.land>figure{width:var(--fig);margin-left:calc((100% - var(--fig))/2)}
 .piece>figure img,.land>figure img{width:auto;max-width:100%;max-height:min(80vh,760px);margin:0 auto}
 .piece>figure .art,.land>figure .art{width:fit-content;margin:0 auto}
 .piece>figure .argcap,.piece>figure details,.land>figure .argcap,.land>figure details{max-width:636px;margin-left:auto;margin-right:auto}
 .fg{width:var(--wide);margin-left:calc((100% - var(--wide))/2)}
 .fg .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:0;padding:0;overflow:visible}
 .fg .cards:has(>.card:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
 .fg .hint{display:none}
 .fg .card img,.fg .glyph{height:220px}
 .essay p,.intro,.lede,.deck,.dyk p,.debate p,.nb p,.card p,.bio,details p,.fvq,.readnext{-webkit-hyphens:manual;hyphens:manual}
}
/* ---------- the editor's letter ---------- */
.letter{margin:2.2rem 0 2.8rem;padding-top:1.8rem;border-top:1px solid var(--rule)}
.letter h2{margin:.1rem 0 1.1rem;font-size:2.4rem;font-size:clamp(2.2rem,8vw,3rem)}
.letter p:not(.label){margin:0 0 1.05em}
.letter h2+p::first-letter{-webkit-initial-letter:3;initial-letter:3;margin-right:.1em;font-family:'Instrument Serif',serif;color:var(--accent)}
@supports not ((initial-letter:3) or (-webkit-initial-letter:3)){.letter h2+p::first-letter{float:left;margin:.06em .08em 0 0;font-size:3.6em;line-height:.82}}
.letter p:not(.label):not(.sign){-webkit-hyphens:auto;hyphens:auto;text-wrap:pretty}
.letter .sign{margin:1.4rem 0 0;font:italic 400 2.1rem/1 'Instrument Serif',serif}
@media (min-width:900px){.letter p:not(.label):not(.sign){-webkit-hyphens:manual;hyphens:manual}}