/* Interactive explainers: a Distill-style three-column grid, restyled for paper and ink.
   Section fragments and figure modules were written against --ink2/--ink3/--bg, so those names alias the site tokens. */
:root{--ink2:var(--ink-2);--ink3:var(--ink-3);--bg:var(--paper)}
body.explainer{font-size:17px;line-height:1.68}
.grid{display:grid;grid-template-columns:[screen-start] minmax(16px,1fr) [page-start] minmax(0,200px)
  [body-start] minmax(0,var(--col)) [body-end] minmax(0,200px) [page-end] minmax(16px,1fr) [screen-end];column-gap:0}
.grid>*{grid-column:body}
.l-page{grid-column:page}.l-screen{grid-column:screen;padding:0 24px}.l-body{grid-column:body}
.ex-head{grid-column:page;display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:36px 0 0}
header.hero{padding:88px 0 8px}
header.hero .kicker{margin-bottom:18px}
header.hero h1{font:600 clamp(36px,5.6vw,56px)/1.06 var(--display);letter-spacing:-.035em;margin:0 0 22px;text-wrap:balance}
header.hero .dek{font:400 19px/1.55 var(--body);color:var(--ink-2);text-align:left!important}
.byline{grid-column:page;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 28px;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);padding:16px 0;margin:40px 0 18px;font:14px/1.45 var(--ui);color:var(--ink)}
.byline b{display:block;font:400 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.banner{grid-column:page;font:400 12px/1.4 var(--mono);color:var(--accent-ink);margin:0 0 44px;letter-spacing:.02em}
.explainer h2{font:600 28px/1.2 var(--display);letter-spacing:-.028em;margin:88px 0 18px;scroll-margin-top:24px;text-wrap:balance}
.explainer h2 .sn{display:block;font:400 12px/1 var(--mono);letter-spacing:.08em;color:var(--accent-ink);margin-bottom:14px}
.explainer h3{font:600 20px/1.32 var(--ui);margin:40px 0 10px;letter-spacing:-.005em}
.explainer p,.explainer li{text-align:left;hyphens:manual;-webkit-hyphens:manual;text-wrap:pretty}
.explainer p{margin:0 0 1em}.explainer ol,.explainer ul{padding-left:1.3em}
.explainer main a{text-decoration-color:var(--rule-2)}
.explainer code{font:400 .78em/1.4 var(--mono);background:var(--paper-2);padding:.06em .3em;border-radius:3px}
.explainer pre{font:400 13.5px/1.6 var(--mono);background:var(--paper-2);border:1px solid var(--rule);padding:14px 16px;overflow-x:auto}
.explainer pre code{background:none;padding:0}
figure{margin:32px 0 40px}
figure .fig-mount{min-height:120px}
figcaption{font:400 13.5px/1.55 var(--ui);color:var(--ink-2);margin-top:12px;max-width:760px;text-align:left}
figcaption b{color:var(--ink);font-weight:600}
figcaption b:first-child{font:500 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);margin-right:4px}
.fig-error{font:13px var(--mono);color:var(--accent-ink);border:1px dashed var(--accent);padding:16px}
aside.note{grid-column:body;font:14px/1.5 var(--ui);color:var(--ink-2);border-left:2px solid var(--rule-2);padding-left:12px;margin:0 0 1em}
@media(min-width:1400px){aside.note{grid-column:body-end/page-end;margin-left:28px;border:0;padding:0;align-self:start}}
sup.fnref,a.citeref{font:500 .62em var(--mono);vertical-align:super;line-height:0;text-decoration:none;color:var(--accent-ink)}
.tbl{grid-column:page;margin:28px 0 36px;overflow-x:auto}
.tbl .tcap{font:14px/1.5 var(--ui);color:var(--ink-2);margin-bottom:8px;text-align:left}
.explainer table{border-collapse:collapse;width:100%;font:14px/1.45 var(--ui);font-variant-numeric:tabular-nums}
.explainer thead th{border-top:1.5px solid var(--ink);border-bottom:1px solid var(--ink);text-align:left;padding:7px 10px;font-weight:600}
.explainer tbody td{padding:6px 10px;border-bottom:1px solid var(--rule);vertical-align:top}
.explainer tbody tr:last-child td{border-bottom:1.5px solid var(--ink)}
td.num,th.num{text-align:right;white-space:nowrap}

/* contents: fixed in the left gutter on wide screens, a drawer below that */
nav.toc{position:fixed;top:96px;left:28px;width:188px;font:12.5px/1.45 var(--ui);max-height:calc(100vh - 160px);overflow:auto;z-index:20;transition:opacity .15s ease}
nav.toc.away{opacity:0;pointer-events:none}
html.toc-off nav.toc{display:none}
nav.toc b{display:block;font:400 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
nav.toc a{display:block;color:var(--ink-2);padding:3px 0 3px 10px;border-left:1px solid var(--rule);text-decoration:none}
nav.toc a:hover{color:var(--ink)}
nav.toc a.on{color:var(--ink);border-left:2px solid var(--accent);padding-left:9px}
button.toc-toggle{position:fixed;bottom:18px;left:18px;z-index:45;font:400 12px/1 var(--mono);color:var(--ink-2);background:var(--raised);
  border:1px solid var(--rule-2);border-radius:0;padding:9px 12px;cursor:pointer;box-shadow:0 6px 20px -12px rgba(22,20,15,.4)}
button.toc-toggle:hover{color:var(--ink);border-color:var(--ink)}
.fig-mount :focus:not(:focus-visible),figure :focus:not(:focus-visible){outline:none!important}
@media(max-width:1559px){nav.toc{display:none}
  html.toc-open nav.toc{display:block;top:16px;left:16px;width:290px;max-height:calc(100vh - 80px);background:var(--raised);border:1px solid var(--rule-2);
    padding:14px 16px;box-shadow:0 18px 40px -20px rgba(22,20,15,.45);z-index:40}}
section.refs{font:14px/1.5 var(--ui);color:var(--ink-2)}
section.refs li{text-align:left;margin-bottom:5px;overflow-wrap:anywhere}
ol.notes{font:14px/1.55 var(--ui);color:var(--ink-2)}ol.notes li{text-align:left;margin-bottom:6px}
.tooltip{position:fixed;pointer-events:none;z-index:50;background:var(--raised);border:1px solid var(--rule-2);border-radius:0;
  box-shadow:0 10px 28px -14px rgba(22,20,15,.4);padding:8px 10px;font:13px/1.45 var(--ui);color:var(--ink);max-width:320px;display:none}
details.table-view{font:12.5px var(--mono);margin-top:10px}
details.table-view summary{cursor:pointer;color:var(--ink-3)}
details.table-view table{font:12.5px/1.45 var(--ui)}
.ex-end{grid-column:body;margin-top:72px;padding-top:24px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font:400 12.5px/1.6 var(--mono);color:var(--ink-3)}
.ex-end a{color:var(--ink-2);text-decoration:none}
.ex-end a:hover{color:var(--ink)}
/* the footer spans the same page column as the header and byline */
body.explainer .site-foot{width:calc(100% - 32px);max-width:calc(var(--col) + 400px)}
@media(max-width:760px){header.hero{padding-top:56px}header.hero .dek{font-size:17px}.explainer h2{font-size:23px;margin-top:64px}body.explainer{font-size:16px}
  .ex-head{flex-direction:column;gap:14px;padding-top:24px}
  .byline{margin-top:32px}}
/* a 358px measure cannot justify without rivers: set it ragged-right */
@media(max-width:600px){.explainer p,.explainer li{text-align:left}}
@media print{nav.toc,.tooltip,button.toc-toggle,.ex-head .site-nav,.ex-end,details.table-view{display:none!important}
  body.explainer{font-size:10.5pt}.grid{display:block}header.hero{padding-top:0}.explainer h2{margin-top:12mm}
  figure,.tbl,.keyideas,aside.note{break-inside:avoid}h2,h3{break-after:avoid}
  .explainer p,.explainer li{text-align:left}}

.explainer .fig-mount input[type=range]{accent-color:var(--ink)}
.explainer code,.explainer pre{font-variant-ligatures:none}
.fig-mount details.table-view{max-width:100%;overflow-x:auto}