/* ── Lean reading style ─────────────────────────────────────────────────────
   A content-first layer over blog.css, switched on by class="lean" on <html>.
   One column, white page, no chrome around the text. Every choice is a data
   attribute or a custom property set by lean.js, so the style panel and the
   final baked-in default are the same mechanism.                           */

html.lean{
  --lean-body:"CMU Serif",Georgia,serif;
  --lean-ui:"CMU Sans Serif","IBM Plex Sans",system-ui,sans-serif;
  --measure:680px;
  --fs:19px;
  --math:1.1;
  --math-display:1.1;
  --bleed:0px;
  --serif:var(--lean-body);
  --sans:var(--lean-ui);
}
/* white: a true white page, near-black ink, rules barely there */
html.lean[data-theme="light"]{
  --paper:#FFFFFF;--surface:#F6F6F4;--surface-2:#F3F3F0;
  --ink:#111214;--body:#1C1D20;--muted:#5C6068;--faint:#868B93;
  --rule:#E8E8E4;--rule-hard:#D4D4CE;
}

/* ── the page: no bar, no rail, one column ──────────────────────────────── */
html.lean body{font-size:var(--fs);line-height:1.62}
html.lean .bar{
  position:static;height:auto;background:none;backdrop-filter:none;border:0;
  max-width:calc(var(--measure) + 56px);margin:0 auto;padding:22px 28px 0;gap:22px;
}
html.lean .bar .t,html.lean .bar .tbtn,html.lean .bar .navtoggle,html.lean .bar a.cta.alt{display:none}
html.lean .bar a.cta{background:none;color:var(--muted);padding:0;font-size:13px;font-weight:400;border-radius:0}
html.lean .bar a.cta:hover{color:var(--ink);opacity:1}

html.lean .shell{display:block;max-width:calc(var(--measure) + 56px);padding:0 28px}
html.lean nav.side{display:none}
html.lean main{max-width:var(--measure);margin:0 auto;padding:30px 0 120px}
html.lean[data-toc="sidebar"] .shell{display:flex;max-width:calc(var(--measure) + var(--nav-w) + 100px)}
html.lean[data-toc="sidebar"] nav.side{display:block;top:0;max-height:100vh}
html.lean .map,html.lean .byline{display:none}
@media (max-width:880px){
  html.lean body{font-size:min(var(--fs),18px)}
  html.lean .shell{padding:0 20px}
  html.lean[data-toc="sidebar"] .shell{display:block}
  html.lean[data-toc="sidebar"] nav.side{display:none}
}

/* ── type ───────────────────────────────────────────────────────────────── */
html.lean main p,html.lean main li{text-align:left}
html.lean[data-align="justify"] main p,html.lean[data-align="justify"] main li{text-align:justify}
html.lean .kicker{font-family:var(--lean-ui);font-size:12px;letter-spacing:.12em;margin-bottom:12px}
html.lean h1{font:700 2.05em/1.12 var(--serif);letter-spacing:-.01em;margin:0 0 .5em}
html.lean .head{border:0;padding-bottom:0;margin-bottom:10px}
html.lean .head > p:first-of-type{font-size:1.06em;line-height:1.5;color:var(--body)}
html.lean h2{
  font:700 1.42em/1.25 var(--serif);letter-spacing:-.005em;text-transform:none;color:var(--ink);
  border:0;padding:0;margin:2.1em 0 .55em;
}
html.lean h3{font:700 1.1em/1.3 var(--serif);letter-spacing:0;margin:1.7em 0 .45em}
html.lean strong{font-weight:700}
html.lean blockquote,html.lean .note{font-size:.95em}

/* section numbers: 1, 1.1, … (Further reading stays unnumbered) */
html.lean[data-num="on"] #doc{counter-reset:sec}
html.lean[data-num="on"] #doc h2:not(#further-reading){counter-increment:sec;counter-reset:sub}
html.lean[data-num="on"] #doc h2:not(#further-reading)::before{content:counter(sec) "\2002";color:var(--faint);font-weight:400}
html.lean[data-num="on"] #doc h3{counter-increment:sub}
html.lean[data-num="on"] #doc h3::before{content:counter(sec) "." counter(sub) "\2002";color:var(--faint);font-weight:400}

/* ── maths: KaTeX is Computer Modern, so 1.0 matches CMU text exactly ──── */
html.lean .katex{font-size:calc(var(--math) * 1em)}
html.lean .katex-display > .katex{font-size:calc(var(--math-display) * 1em)}
html.lean .cap .katex,html.lean figcaption .katex{font-size:1em}
html.lean .eq{margin:1.1em 0}
/* wide display maths: centred on the column, spilling into both margins (lean.js tags it) */
html.lean .eq.eq--wide{width:auto;max-width:none;padding-right:0}
html.lean .eq.lean-wide{
  width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;
  position:relative;left:50%;transform:translateX(-50%);
}
/* phones: display maths never grows past text size, so long equations still fit */
@media (max-width:620px){html.lean .katex-display > .katex{font-size:calc(min(var(--math-display), 1) * 1em)}}

/* ── figures and captions ───────────────────────────────────────────────── */
html.lean figure.mfig{margin:2em 0}
/* CMU Sans has a small x-height: one point more keeps figure labels at the prose's visual size */
html.lean[data-ui="cmu-sans"] .mfig .mm-lab{font-size:12.5px}
html.lean[data-ui="cmu-sans"] .mfig .mm-tick{font-size:12px}
html.lean[data-ui="cmu-sans"] .mfig .mm-read{font-size:13px}
html.lean .mfig figcaption{font-family:var(--serif);font-size:.84em;line-height:1.5;color:var(--muted)}
@media (min-width:980px){
  html.lean[data-fig="wide"]{--bleed:70px}
  html.lean figure.mfig{margin-left:calc(-1 * var(--bleed));margin-right:calc(-1 * var(--bleed))}
  html.lean figure.mfig figcaption{padding:0 var(--bleed)}
}

/* tables and the code deck keep their structure, in the lean palette */
html.lean table{font-family:var(--lean-ui);font-size:.74em}
html.lean th{letter-spacing:.06em}

/* ── inline contents (data-toc="inline") ────────────────────────────────── */
.lean-toc{margin:22px 0 8px;padding:14px 0 0;border-top:1px solid var(--rule);font-size:.92em}
.lean-toc ol{margin:0;padding-left:1.4em}
.lean-toc li{margin:0 0 3px}
html.lean[data-num="on"] .lean-toc ol{list-style:decimal}
html.lean[data-num="off"] .lean-toc ol{list-style:none;padding-left:0}
.lean-toc a[href]{color:var(--body);border-bottom:0}
.lean-toc a[href]:hover{color:var(--accent)}

/* ── the style panel ─────────────────────────────────────────────────────── */
.lean-btn{
  position:fixed;right:18px;bottom:18px;z-index:80;
  font:500 12.5px/1 "IBM Plex Sans",system-ui,sans-serif;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule-hard);border-radius:999px;
  padding:9px 15px;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.08);
}
.lean-panel{
  position:fixed;right:18px;bottom:62px;z-index:80;width:380px;max-height:calc(100vh - 90px);overflow-y:auto;
  font:12.5px/1.4 "IBM Plex Sans",system-ui,sans-serif;color:var(--body);
  background:var(--paper);border:1px solid var(--rule-hard);border-radius:8px;
  box-shadow:0 12px 40px rgba(0,0,0,.14);padding:14px 16px 12px;
}
.lean-panel[hidden]{display:none}
.lean-panel h4{margin:0 0 10px;font:600 12px/1.2 "IBM Plex Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lean-row{display:grid;grid-template-columns:96px 1fr;gap:8px;align-items:center;margin:0 0 8px}
.lean-row > span{color:var(--muted)}
.lean-seg{display:flex;flex-wrap:wrap;gap:4px}
.lean-seg button{
  font:inherit;font-size:12px;color:var(--body);background:var(--surface);
  border:1px solid var(--rule);border-radius:4px;padding:4px 8px;cursor:pointer;
}
.lean-seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.lean-foot{display:flex;gap:8px;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--rule)}
.lean-foot button{font:inherit;font-size:12px;background:none;border:1px solid var(--rule-hard);border-radius:4px;padding:5px 10px;cursor:pointer;color:var(--ink)}
.lean-panel > code{display:block;margin-top:8px;font-size:10.5px;white-space:normal;word-break:break-word;background:none;border:0;padding:0;color:var(--muted)}
@media (max-width:620px){
  .lean-panel{left:10px;right:10px;width:auto;bottom:58px;max-height:62vh}
  .lean-btn{right:12px;bottom:12px}
}
@media print{.lean-btn,.lean-panel{display:none}}

/* ── lists: numbers and bullets sit on the text edge, wrapped lines hang ─── */
html.lean main ol,html.lean main ul{padding-left:0;list-style:none}
html.lean main ol{counter-reset:li}
html.lean main ol > li,html.lean main ul > li{position:relative;padding-left:1.45em}
html.lean main ol > li{counter-increment:li}
html.lean main ol > li::before{content:counter(li) ".";position:absolute;left:0;color:var(--faint);font-variant-numeric:tabular-nums}
html.lean main ul > li::before{content:"\2013";position:absolute;left:0;color:var(--faint)}
html.lean[data-num="off"] .lean-toc ol > li::before{content:none}
html.lean[data-num="off"] .lean-toc ol > li{padding-left:0}

/* ── centred headings (data-head="center") ─────────────────────────────── */
html.lean[data-head="center"] main .kicker,html.lean[data-head="center"] main h1,
html.lean[data-head="center"] main h2{text-align:center}

/* ── collapsible side calculations (<details class="more">) ──────────────── */
main details.more{margin:-6px 0 22px;border-left:2px solid var(--rule-hard);padding:2px 0 2px 14px}
main details.more > summary{cursor:pointer;list-style:none;font-family:var(--sans);font-size:12.5px;color:var(--muted);padding:2px 0}
main details.more > summary::-webkit-details-marker{display:none}
main details.more > summary::before{content:"\25B8";display:inline-block;width:1.1em;color:var(--faint);transition:transform .15s}
main details.more[open] > summary::before{transform:rotate(90deg)}
main details.more > summary:hover{color:var(--ink)}
main details.more[open]{padding-bottom:6px}
main details.more[open] > summary{margin-bottom:8px}
main details.more > :last-child{margin-bottom:0}
main details.more p{font-size:.95em}