/* Chrome on macOS matches the family "Iowan Old Style" but does not map its
   italic and bold faces, so font-style:italic silently rendered roman there
   (Safari was fine). Binding each face by its PostScript name through
   local() is the standard fix; the stack below then uses this family first
   and falls through to Palatino/Georgia exactly as before on systems
   without Iowan. */
@font-face{font-family:Iowan;src:local("IowanOldStyle-Roman"),local("Iowan Old Style")}
@font-face{font-family:Iowan;font-style:italic;src:local("IowanOldStyle-Italic")}
@font-face{font-family:Iowan;font-weight:700;src:local("IowanOldStyle-Bold")}
@font-face{font-family:Iowan;font-weight:700;font-style:italic;src:local("IowanOldStyle-BoldItalic")}
:root{--bg:#faf8f5;--ink:#1c1a17;--mute:#6b6560;--rule:#e0dad2;--accent:#8a6a4b;--mark:#f0e4cf}
@media(prefers-color-scheme:dark){:root{--bg:#14120f;--ink:#e8e3dc;--mute:#8f867d;--rule:#2b2723;--accent:#c9a87c;--mark:#3a3020}}
:root[data-theme=dark]{--bg:#14120f;--ink:#e8e3dc;--mute:#8f867d;--rule:#2b2723;--accent:#c9a87c;--mark:#3a3020}
:root[data-theme=light]{--bg:#faf8f5;--ink:#1c1a17;--mute:#6b6560;--rule:#e0dad2;--accent:#8a6a4b;--mark:#f0e4cf}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
 font:400 19px/1.75 Iowan,Iowan Old Style,Palatino,Palatino Linotype,Georgia,serif;
 -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:34rem;margin:0 auto;padding:4rem 1.5rem 8rem}
a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
a:hover{border-color:var(--accent)}
h1{font-size:1.7rem;line-height:1.3;font-weight:400;margin:0 0 .4rem;letter-spacing:-.01em}
h2{font-size:1.05rem;font-weight:400;margin:3rem 0 .8rem;color:var(--mute);
 text-transform:uppercase;letter-spacing:.1em}
.sub{color:var(--mute);font-size:1.06em;font-style:italic;margin:0 0 1.6rem;
 line-height:1.5}
.meta{color:var(--mute);font-size:.86rem;line-height:1.6;margin:0 0 2.5rem}
.meta a{border:0;color:var(--accent)}
nav.top{font-size:.8rem;color:var(--mute);margin:0 0 2.5rem;letter-spacing:.04em}
nav.top a{border:0}nav.top a:hover{color:var(--accent)}
p{margin:0 0 1.4rem}
.body p{text-align:left;hyphens:auto}
.speaker{color:var(--mute);font-style:italic}
.note{border-left:2px solid var(--rule);padding:.1rem 0 .1rem 1rem;margin:0 0 2.5rem;
 color:var(--mute);font-size:.82rem;line-height:1.6}
.note code{font-size:.95em;opacity:.8}
ol.toc{list-style:none;padding:0;margin:0}
ol.toc li{padding:.85rem 0;border-bottom:1px solid var(--rule)}
/* The row dividers already separate these entries, so underlining each title
   states the same thing twice. Keep the rule reserved but transparent, so it
   appears on hover without shifting the line. Links in running prose keep
   their underline — there they are the only affordance. */
ol.toc a{border-bottom-color:transparent}
ol.toc a:hover{border-bottom-color:var(--accent)}
ol.toc .n{color:var(--mute);font-size:.75rem;letter-spacing:.1em;display:block;margin-bottom:.15rem}
ol.toc .d{color:var(--mute);font-size:.8rem}
.chips{margin:2.2rem 0 0;font-size:.78rem;line-height:2.1}
.chips a{border:0;color:var(--mute)}
.chips a:hover{color:var(--accent)}
:target,mark.loc{background:var(--mark);border-radius:2px}
mark.loc{padding:.1em 0}
.body.passages blockquote{margin:0 0 1.6rem;padding:0 0 0 1rem;
 border-left:2px solid var(--rule);font-size:1.02rem}
.ctx{color:var(--mute);font-size:.78rem;text-transform:uppercase;
 letter-spacing:.08em;margin:0 0 .35rem}
p.ednote{border-left:2px solid var(--rule);padding:.1rem 0 .1rem 1rem;
 color:var(--mute);font-size:.9rem;margin:0 0 1.4rem}
p.ednote .lbl{text-transform:uppercase;letter-spacing:.09em;font-size:.68rem;
 display:block;margin-bottom:.3rem}
/* The source line tucks under the meta line where there is one. It must not
   use a blanket negative margin: talks whose date is only approximate show no
   meta line at all, and the line rode up into the title. */
p.src{font-size:.72rem;color:var(--mute);margin:.9rem 0 2.6rem;line-height:1.7;
 letter-spacing:.02em}
/* /life — the timeline. Events hang off a hairline so that a decade with two
   entries visibly differs from one with forty: the density of the rule IS the
   density of the record, which is the point of the page. */
h2.dec{margin:3.2rem 0 .2rem;font-size:1.02rem}
h2.dec .cnt{display:block;font-weight:400;font-size:.72rem;color:var(--mute);
 letter-spacing:.06em;text-transform:uppercase;margin-top:.35rem}
.ev{border-left:1px solid var(--rule);padding:.9rem 0 .9rem 1.15rem;margin:0}
.ev:target{background:var(--mark);border-radius:2px}
.evd{display:block;font-size:.72rem;letter-spacing:.09em;color:var(--mute);
 text-transform:uppercase;margin-bottom:.2rem}
.evt{font-size:1rem;line-height:1.45}
.evx{margin:.35rem 0 0;font-size:.9rem;color:var(--ink);line-height:1.6}
.evm{margin:.3rem 0 0;font-size:.78rem;color:var(--mute);line-height:1.6}
.evs{margin:.3rem 0 0;font-size:.72rem;line-height:1.7}
.evs a{border:0;color:var(--mute)}
.evs a:hover{color:var(--accent)}
/* An unsourced claim should look like one. Not alarming, just visibly lighter
   than the rows that can show their working. */
.evs.nosrc{color:var(--rule);font-style:italic}
.unsure{color:var(--accent)}
/* The written life. Evidence sits in a closed disclosure under each section:
   available to anyone who wants it, silent for anyone who does not. */
details.ev-src{margin:-.4rem 0 2.6rem;font-size:.74rem;color:var(--mute)}
details.ev-src summary{cursor:pointer;list-style:none;letter-spacing:.04em;
 border-bottom:1px solid var(--rule);display:inline-block;padding-bottom:.1rem}
details.ev-src summary::-webkit-details-marker{display:none}
details.ev-src summary:hover{color:var(--accent);border-color:var(--accent)}
details.ev-src p{margin:.7rem 0 0}
/* Recurring boilerplate inside a talk — the podcast announcement that opens and
   closes every Hakubai recording. Kept, because it is what was on the tape, but
   closed, because it is not what anyone came to read. */
details.boiler{margin:0 0 1.6rem}
details.boiler summary{cursor:pointer;list-style:none;font-size:.72rem;
 color:var(--mute);letter-spacing:.05em;text-transform:uppercase;
 padding:.4rem 0;border-bottom:1px solid var(--rule);display:inline-block}
details.boiler summary::-webkit-details-marker{display:none}
details.boiler summary:hover{color:var(--accent);border-color:var(--accent)}
details.boiler p{font-size:.86rem;color:var(--mute);margin:.9rem 0 0}
/* The method note at the foot, set apart from the talk it follows. */
details.note.boiler.after{margin:3rem 0 0;border-top:1px solid var(--rule);
 padding-top:1.4rem}
/* The routine entries, folded per decade. Closed they are one quiet line;
   open they keep the hairline the rest of the timeline hangs off, so the
   texture reads as part of the same column rather than a separate list. */
details.more-ev{margin:.2rem 0 1.4rem}
details.more-ev.svc>summary{color:var(--rule)}
.dec-body .fold{display:none}
.dec-body.show2 .fold.t2{display:block}
.dec-body.show3 .fold.t3{display:block}
.more-row{margin:.2rem 0 1.4rem}
.more-btn{background:none;border:0;padding:0;margin-right:1.2rem;cursor:pointer;color:var(--mute);font:inherit;font-size:.85em}
.more-btn.svc{color:var(--rule)}
.more-btn.on{color:var(--accent)}
details.more-ev summary{cursor:pointer;list-style:none;font-size:.74rem;
 color:var(--mute);letter-spacing:.03em;padding:.55rem 0 .55rem 1.15rem;
 border-left:1px dashed var(--rule)}
details.more-ev summary::-webkit-details-marker{display:none}
details.more-ev summary:hover{color:var(--accent)}
details.more-ev[open] summary{border-left-style:solid;margin-bottom:.2rem}
details.ev-src .evm{color:var(--rule)}
.meta + p.src{margin-top:-1.6rem}
p.src a{border-bottom:1px solid var(--rule)}
p.src a:hover{border-color:var(--accent)}
ul.links{list-style:none;padding:0;margin:1.8rem 0 0;font-size:.85rem}
ul.links li{margin:0 0 .45rem;padding-left:1.1rem;position:relative}
ul.links li:before{content:"→";position:absolute;left:0;color:var(--mute)}
ul.links li.download:before{content:"↓"}
ul.links li.purchase:before{content:"◇"}
ul.links a{border-bottom:1px solid var(--rule)}
/* Set in em so it tracks the 19px body rather than the 16px root — in rem it
   was rendering smaller than the text it headed. The extra step compensates for
   this face's italic, whose x-height sits below the roman's at the same size. */
.body h3.sec,.body h4.sec{font-size:1.16em;font-weight:400;color:var(--ink);
 font-style:italic;letter-spacing:0;text-transform:none;margin:3rem 0 1.2rem;
 line-height:1.35}
/* The opening quote carries no rule and no attribution line — it sits in the
   prose as a change of voice, and the arrow is the only thing asking to be
   clicked. Italic needs the size bump for the same reason the section headings
   do: this face sets its italic a touch smaller than the roman beside it. */
p.open{font-style:italic;font-size:1.08em;line-height:1.6;margin:2.4rem 0 3rem;
 color:var(--ink)}
a.more{border:0;color:var(--mute);font-style:normal;white-space:nowrap;
 margin-left:.15em}
a.more:hover{color:var(--accent)}
blockquote.close{margin:4rem 0 0;padding:0 0 0 1.2rem;
 border-left:2px solid var(--rule);font-size:.95em;line-height:1.7;
 color:var(--mute)}
blockquote .attr{display:block;margin-top:.7rem;font-size:.75rem;
 letter-spacing:.05em;color:var(--mute)}
hr.brk{border:0;height:1px;background:var(--rule);width:4rem;margin:2.5rem auto}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;
 background:var(--mark);padding:.05em .3em;border-radius:2px}
sup.fn{font-size:.65em;line-height:0;vertical-align:super}
sup.fn a{border:0;color:var(--accent)}
ol.notes{list-style:none;padding:0;margin:3.5rem 0 0;font-size:.83rem;
 line-height:1.65;color:var(--mute)}
ol.notes li{margin:0 0 .7rem;padding-left:1.4rem;text-indent:-1.4rem}
ol.notes li>a{border:0;color:var(--accent);margin-right:.4rem}
footer{margin-top:5rem;padding-top:1.5rem;border-top:1px solid var(--rule);
 color:var(--mute);font-size:.78rem}
.pager{display:flex;justify-content:space-between;gap:1rem;margin-top:3.5rem;
 padding-top:1.5rem;border-top:1px solid var(--rule);font-size:.85rem}
.pager a{border:0}.pager span{color:var(--mute)}