/* From Dust to Glory · shared styles for every page. Ported from One Drunk to Another's
   shared/deep-dive.css (October 2026), with the Dust and Glory palette: pale stone dust, gold kept for
   arriving (progress, you are here, the key takeaway), lapis for links. Section names in the comments
   below are where a block was first built on ODTA. */

/* fonts: the copies in /fonts, the same files the home page uses */
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/courier-prime-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/courier-prime-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Courier Prime';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/courier-prime-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/hanken-grotesk-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/hanken-grotesk-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/hanken-grotesk-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/hanken-grotesk-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Old Standard TT';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/old-standard-tt-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Old Standard TT';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/old-standard-tt-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Old Standard TT';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/old-standard-tt-latin-400-italic.woff2) format('woff2')}

:root{
  color-scheme:light;
  --paper:#F2F0EA; --band:#E8E4DA; --card:#F9F7F2; --mat:#FBFAF7; --ph:#D3CDBF; --ph-ink:#3E3F3B;
  --ink:#2E2F2C; --ink-2:#5D5B54; --accent:#2F4A7A; --gold:#B8902F; --gold-ink:#7A5B14; --line:#D3CDBF; --line-2:#C3BCAD; --track:#E2DED3;
  --night:#26201A; --night-ink:#EDE8DE; --night-2:#B8AD9B; --night-line:#3A3129; --night-btn:#54483C; --night-edge:transparent;
  --focus:#2F4A7A; --art-dim:1; --hl:rgba(184,144,47,.30);
  --map-water:#DCD8CD; --map-land:#F9F7F2; --map-other:#EFECE4; --map-coast:#9E978A; --map-line:#C3BCAD;
  --serif:'Old Standard TT', Georgia, 'Times New Roman', serif;
  --display:'Old Standard TT', Georgia, 'Times New Roman', serif;
  --mono:'Courier Prime', 'Courier New', ui-monospace, monospace;
  --sans:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter:20px; --bar-h:60px; --stick:84px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#221C17; --band:#2A231D; --card:#2E2620; --mat:#332A22; --ph:#43392F; --ph-ink:#E6DED0;
    --ink:#EDE8DE; --ink-2:#B8AD9B; --accent:#9DB8E8; --gold:#D9AE4A; --gold-ink:#E2BC62; --line:#43392F; --line-2:#54483C; --track:#3A3129;
    --night:#17120E; --night-ink:#EDE8DE; --night-2:#B8AD9B; --night-line:#33291F; --night-btn:#54483C; --night-edge:#54483C;
    --focus:#9DB8E8; --art-dim:.88; --hl:rgba(217,174,74,.30);
    --map-water:#1A1511; --map-land:#2E2620; --map-other:#2A231D; --map-coast:#6E6253; --map-line:#54483C;
}
}
:root[data-theme="dark"]{
  color-scheme:dark;
    --paper:#221C17; --band:#2A231D; --card:#2E2620; --mat:#332A22; --ph:#43392F; --ph-ink:#E6DED0;
    --ink:#EDE8DE; --ink-2:#B8AD9B; --accent:#9DB8E8; --gold:#D9AE4A; --gold-ink:#E2BC62; --line:#43392F; --line-2:#54483C; --track:#3A3129;
    --night:#17120E; --night-ink:#EDE8DE; --night-2:#B8AD9B; --night-line:#33291F; --night-btn:#54483C; --night-edge:#54483C;
    --focus:#9DB8E8; --art-dim:.88; --hl:rgba(217,174,74,.30);
    --map-water:#1A1511; --map-land:#2E2620; --map-other:#2A231D; --map-coast:#6E6253; --map-line:#54483C;
}
@media (min-width:700px){:root{--gutter:40px}}
@media (min-width:900px){:root{--stick:124px}}
@media (min-width:1100px){:root{--gutter:80px}}

*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.62;overflow-x:hidden}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
[hidden]{display:none!important}
[id]{scroll-margin-top:var(--stick)}
img{max-width:100%}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-80px;z-index:50;padding:10px 14px;border-radius:8px;background:var(--ink);color:var(--paper);font:600 14px var(--sans)}
.skip:focus{top:12px}
.wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font:400 13px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.label{margin:0;font:700 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.icon{flex-shrink:0}

/* header and contents */
.top{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.bar{height:var(--bar-h);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:baseline;gap:14px;min-width:0}
.brand a{font:600 14px/1.2 var(--sans);letter-spacing:.02em;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand .gal{display:none;font:400 12px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;text-decoration:none}
.brand a.gal:hover{color:var(--accent)}
.menu-btn{min-height:44px;display:flex;align-items:center;gap:8px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);color:var(--ink);font:500 13px var(--sans);cursor:pointer}
.home-link{display:none;min-height:44px;align-items:center;gap:8px;padding:0 16px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);color:var(--ink);font:500 14px var(--sans);text-decoration:none}
/* Search (search/): a button in every page's header, beside Watch The Kitchen Table and Contents.
   A magnifying glass on phones, with its word from 900px. deep-dive.js adds it on the deep dives;
   the plain pages have it written into their headers. */
.search-link{margin-left:auto;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);color:var(--ink);font:500 14px var(--sans);text-decoration:none;flex-shrink:0}
.search-link:hover{border-color:var(--accent);color:var(--accent)}
.search-link .sl-text{display:none}
/* below 900px the header's buttons sit closer together, so the site's name, the page's name, Search
   and Contents or Watch The Kitchen Table all fit; under 360px Contents shows only its icon */
@media (max-width:899px){.top .bar{gap:10px}}
@media (max-width:359px){.menu-btn{padding:0 12px}.menu-btn .mb-text{display:none}}
.contents{display:none;border-top:1px solid var(--line);max-height:calc(100vh - var(--bar-h));max-height:calc(100dvh - var(--bar-h));overflow-y:auto}
.top.open .contents{display:block}
.contents ol{list-style:none;margin:0;padding:6px 0}
.contents li{border-bottom:1px solid var(--line)}
.contents li:last-child{border-bottom:0}
.contents a,.contents .soon{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;font:500 15px var(--sans);text-decoration:none}
.contents a{color:var(--ink)}
.contents a[aria-current="page"]{color:var(--accent);font-weight:700}
.contents .soon{color:var(--ink-2)}
.tag{font:600 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--line-2);border-radius:999px;color:var(--ink-2)}
.contents .home-row{padding:10px 0 16px}
.contents .home-row a{justify-content:flex-start;color:var(--accent);min-height:44px}
/* reading progress (deep-dive.js): a tick on the parts this browser has read */
.rd-tick{display:inline-flex;flex:none;color:var(--accent)}
.rd-tick svg{display:block}
@media (min-width:700px){.brand .gal{display:inline}}
@media (min-width:900px){
  .menu-btn{display:none}
  .home-link{display:flex}
  .search-link{padding:0 16px}
  .search-link .sl-text{display:inline}
  .contents{display:block;max-height:none;overflow:visible;background:var(--band)}
  .contents ol{display:flex;flex-wrap:wrap;gap:0 4px;padding:0}
  .contents li{border:0}
  .contents a,.contents .soon{min-height:48px;padding:0 10px;font-size:13px;font-weight:500}
  .contents a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--accent);color:var(--ink)}
  .contents a{position:relative}
  /* a read part's tick sits small in the link's own right padding, so the bar never gets wider and
     wraps onto a second row when a tick appears */
  .contents .rd-tick{position:absolute;top:9px;right:0}
  .contents .rd-tick svg{width:10px;height:10px}
  .contents .tag{display:none}
  .contents .home-row{display:none}
}

/* hero */
.hero{margin:0}
.art{height:clamp(240px,40vw,540px);max-width:1440px;margin-inline:auto;overflow:hidden;background:#8E8C86}
.art svg{display:block;width:100%;height:100%;filter:brightness(var(--art-dim))}
.hero figcaption{padding-block:8px;font:400 12px/1.4 var(--mono);letter-spacing:.04em;color:var(--ink-2)}
@media (min-width:900px){.hero figcaption{font-size:13px}}
/* rising wisps, a hero's one movement for smoke or steam (first An Illness of This Sort 4 · A major
   medical problem, the cigarette; then Keep Coming Back 2 · The Preamble, the coffee urn): three wisps
   with class rise (and r2, r3) drift up a little and fade, one after another, so there's always some in
   the air. Without this stylesheet they hang still, as drawn. */
@keyframes rise-wisp{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-34px);opacity:0}}
.hero .rise{animation:rise-wisp 4.5s ease-out infinite}
.hero .rise.r2{animation-delay:-1.5s}
.hero .rise.r3{animation-delay:-3s}
@media (prefers-reduced-motion:reduce){.hero .rise{animation:none}}

/* title */
.room-head{display:flex;flex-direction:column;gap:10px;padding-top:18px}
.room-head h1{margin:0;font:700 clamp(40px,6.4vw,68px)/1.06 var(--display)}
.dek{font-size:clamp(22px,2.6vw,30px);line-height:1.32;max-width:34ch}
@media (min-width:900px){.room-head{padding-top:32px;gap:14px}}

/* story */
.story{display:flex;flex-direction:column;gap:28px;padding-block:28px 56px}
.col{display:contents}
.quote{order:1}.audio{order:2}.panel{order:3}.explore{order:4}
@media (min-width:900px){
  .story{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:72px;align-items:start;padding-block:44px 72px}
  .col{display:flex;flex-direction:column;gap:32px}
}
.quote{margin:0;padding-top:20px;border-top:3px solid var(--gold);display:flex;flex-direction:column;gap:12px}
.quote p{font-style:italic;font-size:clamp(21px,2.2vw,27px);line-height:1.44}
.quote footer{font:400 13px/1.5 var(--sans);color:var(--ink-2)}
@media (min-width:900px){.quote footer{font-size:14px}}
.panel{display:flex;flex-direction:column;gap:14px}
.panel p{font-size:clamp(18px,1.6vw,20px)}

/* audio */
.audio{background:var(--night);color:var(--night-ink);border:1px solid var(--night-edge);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px}
.audio :focus-visible{outline-color:var(--night-ink)}
.audio-row{display:flex;align-items:center;gap:14px}
.play{width:52px;height:52px;flex-shrink:0;border-radius:50%;border:0;background:var(--night-ink);color:var(--night);display:grid;place-items:center;cursor:pointer;padding:0}
.play:disabled{opacity:.4;cursor:not-allowed}
.audio-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.kicker{font:600 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--night-2)}
.audio-title{font-size:18px;line-height:1.3}
.audio-time{font:400 13px/1.3 var(--sans);color:var(--night-2);font-variant-numeric:tabular-nums}
.ai-voice{display:inline-block;white-space:nowrap;margin-left:.5em;padding:0 .55em;border:1px solid currentColor;border-radius:999px;font-size:10px;line-height:1.5;letter-spacing:.1em;vertical-align:1px}
.tx-btn{min-height:44px;padding:0 14px;border:1px solid var(--night-btn);border-radius:999px;background:transparent;color:var(--night-ink);font:500 13px var(--sans);cursor:pointer;white-space:nowrap}
.tx-btn:hover{border-color:var(--night-2)}
.progress{position:relative;height:22px;cursor:pointer;touch-action:none}
.progress::before{content:"";position:absolute;left:0;right:0;top:9px;height:4px;border-radius:2px;background:var(--night-line)}
.progress .fill{position:absolute;left:0;top:9px;height:4px;width:0;border-radius:2px;background:var(--gold)}
.audio.unavailable .progress{display:none}
.transcript{border-top:1px solid var(--night-line);padding-top:12px;display:flex;flex-direction:column;gap:10px}
.transcript p{font:400 15px/1.6 var(--mono)}
@media (min-width:900px){.audio{padding:22px}.play{width:56px;height:56px}.audio-title{font-size:20px}}

/* keep exploring */
.explore{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.explore .label{margin:16px 0 4px}
.explore a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:68px;padding:10px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.explore a:hover .t{color:var(--accent)}
.explore .t{display:block;font-size:19px;line-height:1.3}
.explore .s{display:block;font:400 13px/1.4 var(--sans);color:var(--ink-2);margin-top:3px}
@media (min-width:900px){.explore{border-top:0}.explore .label{margin-top:0}}

/* section heads */
.sec-head{display:flex;flex-direction:column;gap:16px}
.sec-head .lead{display:flex;flex-direction:column;gap:10px;max-width:640px}
.sec-title{margin:0;font:700 clamp(32px,4vw,46px)/1.1 var(--display)}
.intro{font-size:clamp(18px,1.6vw,20px);line-height:1.55}
.note{font:400 13px/1.5 var(--sans);color:var(--ink-2);max-width:300px}
@media (min-width:900px){.sec-head{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:48px}}

/* feature band and cards */
.band{background:var(--band);border-block:1px solid var(--line);padding-block:48px}
@media (min-width:900px){.band{padding-block:72px}}
.years{display:flex;gap:8px;margin-top:24px}
.years a{flex:1;min-height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-2);border-radius:999px;font:700 15px var(--mono);color:var(--ink);text-decoration:none}
.years a:hover{border-color:var(--accent)}
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:24px}
@media (min-width:700px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.years{display:none}.cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:36px}}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 18px 20px;display:flex;flex-direction:column;gap:12px}
.card-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.year{margin:0;font:700 28px/1 var(--mono)}
.year{white-space:nowrap}
.year .circa{font-size:.55em;margin-right:.25em}
.who{font:600 12px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);text-align:right}
.words{display:flex;align-items:center;gap:10px}
.words .track{flex:1;height:6px;border-radius:3px;background:var(--track);overflow:hidden}
.words .len{display:block;height:100%;border-radius:3px;background:var(--accent)}
.words .count{font:400 12px var(--sans);color:var(--ink-2);white-space:nowrap}
.say{flex-grow:1;font-style:italic;font-size:21px;line-height:1.45}
.alt{padding-top:12px;border-top:1px dashed var(--line-2);font-size:16px;line-height:1.5}
.cite{font:400 13px/1.5 var(--sans);color:var(--ink-2)}
@media (min-width:1100px){.card{padding:22px}.year{font-size:34px}.say{font-size:20px}}
.takeaway{margin-top:24px;background:var(--night);color:var(--night-ink);border:1px solid var(--night-edge);border-radius:12px;padding:20px;display:grid;gap:10px}
.takeaway p:last-child{font-size:clamp(19px,1.9vw,23px);line-height:1.45}
@media (min-width:900px){.takeaway{grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:32px;padding:28px 32px;align-items:baseline;margin-top:32px}}

/* timeline cards (four stays) */
.stay .when{margin:0;font:700 15px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.stay h3{margin:0;font:400 26px/1.15 var(--display)}
.stay .what{flex-grow:1;font-size:18px;line-height:1.55}
.stay .go{display:flex;align-items:center;gap:8px;min-height:44px;font:600 14px var(--sans);text-decoration:none}
.stay.last{background:var(--night);color:var(--night-ink);border-color:var(--night-edge)}
.stay.last .when,.stay.last .go{color:var(--gold)}
.stay.last .cite{color:var(--night-2)}
.stay.last .go:hover{color:var(--night-ink)}
.stay.last :focus-visible{outline-color:var(--night-ink)}

/* go deeper */
.deeper{padding-block:48px}
@media (min-width:900px){.deeper{padding-block:72px}}
.dd{margin-top:24px;border-top:1px solid var(--line)}
.dd details{border-bottom:1px solid var(--line)}
.dd summary{min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:21px;line-height:1.3;cursor:pointer;list-style:none}
.dd summary::-webkit-details-marker{display:none}
.dd summary:hover{color:var(--accent)}
.dd .chev{transition:transform .2s ease}
.dd details[open] .chev{transform:rotate(180deg)}
.dd .body{padding:4px 0 24px;display:flex;flex-direction:column;gap:16px}
.dd .body p{font-size:18px}
.typeset{display:none}
.src-list{margin:0;padding:4px 0 24px 18px;display:flex;flex-direction:column;gap:8px;font:400 14px/1.5 var(--sans)}
/* under the Sources: a line to The Bookshelf, added by deep-dive.js */
.shelf-link{margin:-8px 0 24px;font:400 14px/1.5 var(--sans);color:var(--ink-2)}
.shelf-link a{color:var(--accent);font-weight:600;text-underline-offset:3px}
@media (min-width:900px){
  .dd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px;align-items:start;border-top:0;margin-top:40px}
  .dd.wide details{border-bottom:0}
  .dd.wide summary{min-height:0;padding-top:4px;font-size:26px;cursor:default}
  .dd.wide summary:hover{color:inherit}
  .dd.wide .chev{display:none}
  .dd.wide .body{padding-top:16px}
  .dd .sources{grid-column:1/-1;margin-top:44px;padding-top:28px;border-top:1px solid var(--line)!important}
  .dd.wide .sources summary{font:700 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
  .dd .src-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;row-gap:8px}
  .typeset{display:flex;flex-direction:column;justify-content:center;gap:12px;min-height:220px;padding:24px 0;border-top:3px solid var(--gold);border-bottom:1px solid var(--line)}
  .dd .typeset .big{font:400 40px/1.1 var(--display)}
  .dd .typeset .cite{font:400 13px/1.5 var(--sans)}
}

/* framed prints */
.print{margin:0;display:flex;flex-direction:column;gap:8px}
.mat{background:var(--mat);padding:10px;border:1px solid var(--line)}
.mat img{display:block;width:100%;height:auto}
.ph{min-height:210px;background:var(--ph);color:var(--ph-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:16px 24px;font:400 13px/1.4 var(--sans)}
.ph .k{font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.mat.has-img .ph{display:none}
.print figcaption{font-size:15px;line-height:1.5}
.credit{display:block;margin-top:4px;font:400 12px/1.5 var(--sans);color:var(--ink-2)}
.credit a{color:var(--ink-2)}

/* lobby */
.meet{display:grid;gap:28px;padding-block:28px 48px}
@media (min-width:900px){.meet{grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:72px;align-items:start;padding-block:44px 72px}}
.portrait .mat{max-width:420px}
.portrait .ph{min-height:320px}
.meet .panel{gap:16px}
.bill-says{margin:0;padding:20px 0 0;border-top:3px solid var(--gold);display:flex;flex-direction:column;gap:10px}
.bill-says p{font-style:italic;font-size:clamp(20px,2vw,24px);line-height:1.45}
.bill-says footer{font:400 13px/1.5 var(--sans);color:var(--ink-2)}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border-radius:999px;background:var(--ink);color:var(--paper);font:600 15px var(--sans);text-decoration:none;align-self:flex-start}
.btn:hover{background:var(--accent);color:var(--paper)}
.life{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line)}
.life li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.5}
.life .y{font:700 15px/1.6 var(--mono);color:var(--accent)}
@media (min-width:900px){.life{display:block;column-count:2;column-gap:48px;margin-top:36px}.life li{break-inside:avoid}}
.toc{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:700px){.toc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.toc{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:36px}}
.toc li{display:flex}
.toc a,.toc .soon-card{flex:1;display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:12px;text-decoration:none}
.toc a{background:var(--card);border:1px solid var(--line);color:var(--ink)}
.toc a:hover{border-color:var(--accent)}
.toc a:hover .tt{color:var(--accent)}
.toc .soon-card{border:1px dashed var(--line-2);color:var(--ink-2)}
.toc .n{font:700 13px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.toc .n .lc{text-transform:none}
.toc .rd-mark{display:inline-flex;align-items:center;gap:3px;margin-left:10px;padding:1px 7px 1px 5px;border:1px solid var(--line-2);border-radius:999px;font-size:11px;letter-spacing:.1em;vertical-align:1px;white-space:nowrap}
.toc .rd-mark svg{width:12px;height:12px}
.toc .soon-card .n{color:var(--ink-2)}
.toc .tt{font-size:21px;line-height:1.25}
.toc .yy{font:400 13px/1.4 var(--sans);color:var(--ink-2)}
.toc .ds{font-size:16px;line-height:1.5}
.film-note{margin-top:28px;padding:20px;border-radius:12px;background:var(--night);color:var(--night-ink);border:1px solid var(--night-edge);display:flex;flex-direction:column;gap:12px}
.film-note a{color:var(--gold);font:600 15px var(--sans);min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.film-note a:hover{color:var(--night-ink)}
.film-note :focus-visible{outline-color:var(--night-ink)}
@media (min-width:900px){.film-note{flex-direction:row;align-items:center;justify-content:space-between;padding:24px 32px}}

/* pager and footer */
.pager{display:grid;gap:10px;padding-block:32px;border-top:1px solid var(--line)}
@media (min-width:700px){.pager{grid-template-columns:1fr 1fr;gap:24px}}
.pg{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px dashed var(--line-2);border-radius:12px;color:var(--ink-2);text-decoration:none}
.pg.live{border-style:solid;border-color:var(--line-2);background:var(--card);color:var(--ink)}
.pg.live:hover{border-color:var(--accent)}
.pg.live:hover .t{color:var(--accent)}
.pg.next{align-items:flex-end;text-align:right}
.pg .k{font:400 12px/1.4 var(--sans);color:var(--ink-2)}
.pg .t{font-size:19px;line-height:1.35}
@media (min-width:900px){.pg{padding:20px 24px}.pg .t{font-size:24px}}
/* "Something wrong here?" (added by deep-dive.js above the pager, linking to the Contact page) */
.report{padding-block:24px 0;border-top:1px solid var(--line);font:400 15px/1.5 var(--sans);color:var(--ink-2)}
.report a{font-weight:600;white-space:nowrap}
.report + .pager{border-top:0;padding-top:20px}
.foot{padding-block:4px 56px;display:flex;flex-direction:column;gap:10px;font:400 13px/1.6 var(--sans);color:var(--ink-2)}
.foot p{max-width:70ch}

/* two-card comparisons (4 · before and after, 6 · 1937 and 1939) */
@media (min-width:1100px){.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* stay results and paired quotes */
.stay .result{padding-top:12px;border-top:1px dashed var(--line-2);font:600 15px/1.45 var(--sans)}
.stay.last .result{border-top-color:var(--night-btn)}
.pair{margin:0;flex-grow:1;display:flex;flex-direction:column;gap:6px}
.pair dt{margin-top:6px;font:700 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.pair dd{margin:0;font-style:italic;font-size:20px;line-height:1.45}
.pair dd .by{display:block;margin-top:4px;font:400 13px/1.5 var(--sans);font-style:normal;color:var(--ink-2)}

/* phrase cards (Legacy) */
.phrase h3{margin:0;font:italic 400 25px/1.3 var(--serif)}
.phrase .what{flex-grow:1;font-size:17px;line-height:1.55}
@media (min-width:1100px){.phrase h3{font-size:24px}}
.takeaway a{color:var(--gold)}
.takeaway a:hover{color:var(--night-ink)}
.takeaway :focus-visible{outline-color:var(--night-ink)}

/* timeline (I Just Work Here, 4 · The gate lodge; also My Sponsor, Ebby): when each account was set down, with the founders' deaths
   for context. Phones: a vertical line, spaced to scale. From 700px: a horizontal line, accounts below,
   context marks above. Each point sits on the line at --p (share of 1935-1981). */
.timeline{position:relative;height:440px;margin:36px 0 0 12px}
.timeline::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--line-2)}
.tl-pt{position:absolute;left:0;top:var(--p);width:0;height:0;text-decoration:none}
.tl-pt::before{content:"";position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;box-sizing:border-box;background:var(--accent);border:3px solid var(--band)}
.tl-pt.ctx::before{left:-5px;top:-5px;width:10px;height:10px;border:0;border-radius:1px;transform:rotate(45deg);background:var(--ink-2)}
.tl-pt.start::before{background:var(--band);border:2px solid var(--ink)}
.tl-lab{position:absolute;left:20px;top:0;transform:translateY(-50%);display:flex;align-items:baseline;gap:8px;white-space:nowrap;padding:4px 6px;border-radius:6px}
.tl-y{font:700 15px/1.2 var(--mono);color:var(--ink)}
.tl-w{font:400 14px/1.2 var(--sans);color:var(--ink-2)}
.tl-pt.acct .tl-y{color:var(--accent)}
.tl-pt.acct .tl-w{color:var(--ink)}
.tl-pt.ctx .tl-y,.tl-pt.ctx .tl-w{font-style:italic;color:var(--ink-2)}
a.tl-pt:hover .tl-lab{background:var(--card)}
a.tl-pt:focus-visible{outline:none}
a.tl-pt:focus-visible .tl-lab{outline:2px solid var(--focus);outline-offset:1px}
.after{font:400 12px/1.4 var(--sans);color:var(--ink-2)}
@media (min-width:700px){
  .timeline{height:150px;margin:40px 0 0}
  .timeline::before{left:0;right:0;top:75px;bottom:auto;width:auto;height:2px}
  .tl-pt{left:var(--p);top:75px}
  .tl-lab{flex-direction:column;align-items:center;gap:3px;top:14px;left:0;transform:translateX(-50%);text-align:center}
  .tl-pt.ctx .tl-lab,.tl-pt.start .tl-lab{top:auto;bottom:14px}
  .tl-lab.l{left:-12px;transform:none;align-items:flex-start;text-align:left}
  .tl-lab.r{left:auto;right:-12px;transform:none;align-items:flex-end;text-align:right}
}
@media (min-width:1100px){.timeline{margin-top:48px}}

/* three cards in a row (I Just Work Here, 5 · The last drink; also Number One Man, 2 · The Bronx cocktail):
   one column below 900px, three from 900px */
@media (min-width:700px){.cards.three{grid-template-columns:minmax(0,1fr)}}
@media (min-width:900px){.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* names in place of years on card tops (I Just Work Here, 7 · The flower room; also My Sponsor, Ebby) */
.card-top .year.name{font:400 30px/1.15 var(--display);white-space:normal}

/* five cards (The Little Doctor, 3 · The Bedside; also My Sponsor, Ebby, Legacy): the longest card,
   .wide, takes the leftover space so no row has an orphan */
@media (min-width:700px){.cards.five .card.wide{grid-column:1/-1}}
@media (min-width:1100px){.cards.five{grid-template-columns:repeat(3,minmax(0,1fr))}.cards.five .card.wide{grid-column:span 2}}

/* then-and-now rows (The Little Doctor, 5 · The papers; also My Sponsor, Ebby, 4 · Ten cents) */
.compare{margin-top:28px;border-top:2px solid var(--ink)}
.cmp-head{display:none}
.cmp-row{display:grid;gap:12px;padding:20px 0 22px;border-bottom:1px solid var(--line-2)}
.cmp-topic{margin:0;font:400 24px/1.2 var(--display)}
.cmp-cell{display:flex;flex-direction:column;gap:6px}
.cmp-k{font:700 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.cmp-now .cmp-k{color:var(--ink-2)}
.cmp-cell .q{font-style:italic;font-size:19px;line-height:1.5}
.cmp-cell .p{font-size:18px;line-height:1.55}
@media (min-width:900px){
  .cmp-head,.cmp-row{grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,5fr);column-gap:40px}
  .cmp-head{display:grid;padding:12px 0;border-bottom:1px solid var(--line-2);font:700 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}
  .cmp-head span:nth-child(2){color:var(--accent)}
  .cmp-head span:nth-child(3){color:var(--ink-2)}
  .cmp-row{padding:26px 0}
  .cmp-k{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* diagram with numbered pins beside a numbered list (I Just Work Here, 2 · The hiding places; also
   My Sponsor, Ebby, 5 · The merry-go-round, and Number One Man, 5 · About fifty homes). Phones: the diagram above the list. From 900px: side by side.
   Each piece keeps its drawing's own classes in its gallery.css. */
.hideout{display:grid;gap:24px;margin-top:28px}
@media (min-width:900px){.hideout{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start;margin-top:40px}}
.house{margin:0;background:var(--mat);border:1px solid var(--line);border-radius:12px;padding:12px}
.house svg{display:block;width:100%;height:auto}
.house figcaption{margin-top:8px;font:400 12px/1.5 var(--sans);color:var(--ink-2)}
.hs-pin circle{fill:var(--accent);stroke:var(--card);stroke-width:3}
.hs-pin text{font:700 17px var(--sans);fill:var(--card);text-anchor:middle}
.hides{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.hides li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start;padding:11px 0;border-bottom:1px solid var(--line-2)}
.hides .pin{width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--card);font:700 13px/28px var(--sans);text-align:center}
.hides .t{font-size:18px;line-height:1.35}
.hides .d{margin-top:2px;font:400 14px/1.5 var(--sans);color:var(--ink-2)}

/* calendar: a month as a table, with a key beside or below it (I Just Work Here, 5 · The last drink;
   also Number One Man, Legacy). Phones: day numbers only. From 700px: short labels in the cells.
   Each piece marks its own days (td classes and .sw variants) in its gallery.css. */
.cal{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:4px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px}
.cal caption{caption-side:top;text-align:left;padding:0 0 10px;font:400 26px/1.15 var(--display)}
.cal th{padding:4px 0;font:700 11px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);text-align:center}
.cal th abbr{text-decoration:none}
.cal td{position:relative;height:46px;padding:5px 2px;vertical-align:top;text-align:center;border-radius:6px}
.cal .d{display:inline-block;min-width:26px;height:26px;border-radius:50%;text-align:center;font:700 15px/26px var(--mono);color:var(--ink)}
.cal .t{display:none}
@media (min-width:700px){
  .cal{border-spacing:6px;padding:14px}
  .cal td{height:66px;padding:6px 6px;text-align:left}
  .cal .t{display:block;margin-top:4px;font:600 11px/1.25 var(--sans);color:var(--ink-2)}
}
.cal-key{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.cal-key li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;padding:11px 0;border-bottom:1px solid var(--line-2)}
.cal-key .t{font-size:18px;line-height:1.35}
.cal-key .d2{margin-top:2px;font:400 14px/1.5 var(--sans);color:var(--ink-2)}
.sw{position:relative;display:block;width:24px;height:24px;margin-top:2px;border-radius:5px;box-sizing:border-box}

/* How we know (Number One Man, 7 · Mr. Anonymous; also People Like You, 5 · Women aren't alcoholics
   and 7 · Built-in forgetters): one card per claim, in the shared .cards.two grid, with a label
   for where the evidence comes from. A card for claims with no source has a dashed edge. */
.hw h3{margin:0;font:400 24px/1.2 var(--display)}
.hw-lab{align-self:flex-start;margin:0;padding:5px 10px;border-radius:999px;font:700 11px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.hw-lab.own{background:var(--accent);color:var(--card)}
.hw-lab.docs{background:var(--ink-2);color:var(--card)}
.hw-lab.bio{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent)}
.hw-lab.none{border:1.5px dashed var(--ink-2);color:var(--ink-2)}
.hw.none{border-style:dashed;border-color:var(--line-2);background:transparent}
@media (min-width:700px){.hw.none{grid-column:1 / -1}}
.hw-dl{margin:0;flex-grow:1;display:flex;flex-direction:column;gap:4px}
.hw-dl dt{margin-top:8px;font:700 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.hw-dl dd{margin:0;font-size:17px;line-height:1.55}

/* Where they differ (Call Me Anne, 5 · Tuna fish sandwiches; also Some Bum from St. Louis, 3 · Come and
   get it): under the account cards, a ruled list of where the tellings differ. One row per detail
   (.dif-row) with its label (.dif-k) and the tellings' answers in the same order as the cards
   (.dif-vals), each with its year (.dif-y). An answer a telling doesn't give is .none. From 700px
   four answers sit side by side; a piece with more tellings sets its own columns. */
.differ{margin-top:32px}
.differ-h{margin:0 0 6px;font:700 13px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.dif-row{padding:14px 0 16px;border-top:1px solid var(--line-2)}
.dif-row:last-child{border-bottom:1px solid var(--line-2)}
.dif-k{margin:0 0 10px;font:600 15px/1.3 var(--sans);letter-spacing:.04em;color:var(--accent)}
.dif-vals{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dif-vals li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:baseline;font-size:17px;line-height:1.4}
.dif-y{font:700 14px/1.4 var(--mono);font-style:normal;color:var(--ink-2)}
.dif-vals .none{font-style:italic;color:var(--ink-2)}
@media (min-width:700px){
  .dif-vals{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
  .dif-vals li{grid-template-columns:none;gap:2px;align-content:start}
}
@media (min-width:1100px){.dif-vals{gap:24px}}
@media print{.dif-row{break-inside:avoid}}

/* Meters (The Little Doctor, 7 · Duffy’s Tavern; also People Like You, Legacy): one ratio each, out of 100 */
/* emphasis form: the figure the section is about in the accent (.lead), the others in a muted gray
   (.base). Checked with the dataviz palette validator on the band surface, light and dark. */
:root{--m-base:#8F816A;--m-base-track:#D8CDB7;--m-lead:#A8431F;--m-lead-track:#E6C5AF}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--m-base:#766E60;--m-base-track:#36312A;--m-lead:#D27B40;--m-lead-track:#4A2D1C}}
:root[data-theme="dark"]{--m-base:#766E60;--m-base-track:#36312A;--m-lead:#D27B40;--m-lead-track:#4A2D1C}
.meters{margin-top:28px;display:grid;gap:26px;max-width:880px}
.meter{display:grid;gap:10px}
.meter-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.meter-label{font:600 16px/1.35 var(--sans)}
.meter-label .sub{display:block;margin-top:2px;font-weight:400;font-size:13px;color:var(--ink-2)}
.meter-val{font:600 clamp(30px,3.4vw,42px)/1 var(--sans);white-space:nowrap}
.meter-bar{position:relative;height:18px;border-radius:4px;background:var(--m-track)}
.meter-fill{position:absolute;left:0;top:0;bottom:0;width:var(--v);min-width:4px;border-radius:0 4px 4px 0;background:var(--m-fill)}
.meter.base{--m-fill:var(--m-base);--m-track:var(--m-base-track)}
.meter.lead{--m-fill:var(--m-lead);--m-track:var(--m-lead-track)}
.meter-scale{position:relative;height:16px;font:400 12px/1.3 var(--sans);color:var(--ink-2)}
.meter-scale span{position:absolute;top:0;white-space:nowrap}
.meter-scale span:nth-child(1){left:0}
.meter-scale span:nth-child(2){left:50%;transform:translateX(-50%)}
.meter-scale span:nth-child(3){right:0}
@media (min-width:900px){.meters{margin-top:40px;gap:32px}.meter-bar{height:22px}}

/* at a meeting today (Keep Coming Back, 1 · The Serenity Prayer; also Rule 62, as "The Traditions
   today"): every section of those pieces ends its story with one plain line on where the thing the
   section is about turns up today. The label and text sizes are set here because .panel p would
   otherwise enlarge the label. */
.today{margin-top:8px;padding:14px 18px 16px;border-left:3px solid var(--accent);border-radius:0 10px 10px 0;background:var(--card);display:flex;flex-direction:column;gap:6px}
.today .label{font-size:12px;color:var(--accent)}
.today .say-today{font-size:18px;line-height:1.5}

/* If you need someone now: the night card listing where to turn right away (a meeting, an AA
   office, SAMHSA's helpline, 988). On the Contact page and under the Questions page's introduction;
   each page places it in its own stylesheet. Same look as the Questions page's short version. */
.help-now{background:var(--night);color:var(--night-ink);border:1px solid var(--night-edge);border-radius:12px;padding:20px 22px 22px;display:flex;flex-direction:column;gap:14px}
.help-now .label{color:var(--night-2)}
.help-now ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.help-now li{display:flex;flex-direction:column;gap:2px;font-size:17px;line-height:1.5}
.help-now .k{font:700 12px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.help-now a{color:var(--gold)}
.help-now a[href^="tel:"]{white-space:nowrap}
.help-now a:hover{color:var(--night-ink)}
.help-now :focus-visible{outline-color:var(--night-ink)}
.help-now .us{font:400 13px/1.5 var(--sans);color:var(--night-2)}
@media (min-width:900px){.help-now{padding:26px 28px 28px}}

/* Jump links on a plain page: rounded links to its groups, then its buttons (Open all, Print).
   Built for Questions; the Who page uses them too. */
.q-jump{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-block:0 32px}
.q-jump .label{width:100%;margin-bottom:4px}
.q-jump a,.q-jump button{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);color:var(--ink);font:500 14px var(--sans);text-decoration:none;cursor:pointer}
.q-jump a:hover,.q-jump button:hover{border-color:var(--accent);color:var(--accent)}
.q-jump button{background:transparent;color:var(--ink-2)}
@media (min-width:900px){.q-jump .label{width:auto;margin:0 8px 0 0}}

/* The Print button (deep-dive.js): in Keep exploring on a section, under the Start button on the
   entrance. It opens a small choice, this page or the whole piece; the whole piece is laid out in
   #printPiece, which shows only on paper. */
.explore .ex-print{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;min-height:68px;padding:10px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.explore .ex-print:hover .t{color:var(--accent)}
.print-link{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:44px;padding:0;border:0;background:none;color:var(--accent);font:600 14px var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.print-link:hover{color:var(--ink)}
.print-dlg{width:min(440px,calc(100vw - 32px));padding:20px 22px 18px;border:1px solid var(--line-2);border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.print-dlg::backdrop{background:rgba(20,14,8,.55)}
.print-dlg .label{margin-bottom:10px}
.pd-choose{display:flex;flex-direction:column;gap:10px}
.pd-choose[hidden]{display:none}
.pd-opt{display:flex;flex-direction:column;gap:3px;width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.pd-opt:hover{border-color:var(--accent)}
.pd-opt .t{font-size:19px;line-height:1.3}
.pd-opt .s{font:400 13px/1.4 var(--sans);color:var(--ink-2)}
.pd-status{margin-top:4px;font-size:16px;line-height:1.5}
.pd-status:empty{display:none}
.pd-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px}
.pd-cancel{min-height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;background:none;color:var(--ink-2);font:500 14px var(--sans);cursor:pointer}
.pd-cancel:hover{color:var(--ink);border-color:var(--ink-2)}
.print-piece{display:none}
@media print{
  .ex-print,.print-link,.print-dlg{display:none!important}
  .rd-tick,.rd-mark{display:none!important}
  html.printing-piece body>*:not(#printPiece){display:none!important}
  html.printing-piece .print-piece{display:block}
  .pp-part+.pp-part,.pp-sources{break-before:page}
  .pp-n{margin:0 0 6pt;font:700 9pt/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#444}
  .pp-part>*+*{margin-top:14pt}
  .pp-sources .src-list{margin-top:8pt;padding-left:1.2em}
  .print-piece>p:last-child{margin-top:8pt;font:9.5pt/1.45 var(--sans);color:#444}
}

/* Names and dates (deep-dive.js; docs/build_hub.py marks them): a person's first mention on a page,
   with a dotted underline, opens a small card about them, and so does a part's date. On a phone the card rises from the bottom over a
   dimmed page (.sheet); wider, it opens just under or over the name. Built for Number One Man. */
a.person{color:inherit;text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:4px;cursor:pointer}
/* a date: the date in a part's place-and-date line, opening the timeline around it */
a.datelink{color:inherit;text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:currentColor;text-decoration-thickness:1.5px;text-underline-offset:4px;cursor:pointer}
a.datelink:hover,a.datelink[aria-expanded="true"]{color:var(--ink)}
a.person:hover,a.person[aria-expanded="true"]{color:var(--accent)}
/* on the dark boxes (the takeaway, the last stay card, the film note), gold, as their other links are */
.takeaway a.person,.stay.last a.person,.film-note a.person{text-decoration-color:var(--gold)}
.takeaway a.person:hover,.stay.last a.person:hover,.film-note a.person:hover,
.takeaway a.person[aria-expanded="true"],.stay.last a.person[aria-expanded="true"],.film-note a.person[aria-expanded="true"]{color:var(--gold)}
.pcard{position:absolute;z-index:60;width:min(380px,calc(100vw - 24px));max-height:min(72vh,560px);overflow:auto;overscroll-behavior:contain;padding:16px 18px 18px;border:1px solid var(--line-2);border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:0 18px 50px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:12px}
.pcard:focus{outline:none}
.pcard:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.pcard.sheet{position:fixed;left:0;right:0;bottom:0;width:auto;max-height:78vh;padding:18px var(--gutter) calc(22px + env(safe-area-inset-bottom));border-width:1px 0 0;border-radius:16px 16px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.3)}
.pc-scrim{position:fixed;inset:0;z-index:59;background:rgba(20,14,8,.45)}
.pc-top{display:flex;align-items:flex-start;gap:12px}
.pc-pic{flex-shrink:0;width:56px;height:56px;border-radius:8px;object-fit:cover;background:var(--ph)}
.pc-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-top:2px}
.pc-name{font-size:22px;line-height:1.25}
.pc-role{font:400 14px/1.4 var(--sans);color:var(--ink-2)}
.pc-role .yrs{white-space:nowrap}
.pc-x{flex-shrink:0;width:44px;height:44px;margin:-10px -12px -6px 0;display:grid;place-items:center;border:0;border-radius:999px;background:none;color:var(--ink-2);cursor:pointer}
.pc-x:hover{color:var(--ink)}
.pc-about{font-size:17px;line-height:1.55}
.pc-own{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--card);color:var(--ink);text-decoration:none}
.pc-own:hover{border-color:var(--accent)}
.pc-own .t{font-size:18px;line-height:1.3}
.pc-own .s{font:400 13px/1.4 var(--sans);color:var(--ink-2)}
.pc-k{margin-top:2px;font:700 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.pc-list{list-style:none;margin:-6px 0 0;padding:0;display:flex;flex-direction:column;font:400 15px/1.4 var(--sans)}
.pc-list li{min-height:34px;display:flex;align-items:center;flex-wrap:wrap;gap:0 4px}
.pc-n{color:var(--ink-2)}
.pc-all{align-self:flex-start;min-height:34px;display:inline-flex;align-items:center;font:600 14px/1.4 var(--sans)}
/* a date's card: a short timeline, this part's own moments with a filled dot */
.pc-tl{list-style:none;margin:2px 0 0 6px;padding:0 0 0 18px;border-left:2px solid var(--line-2);display:flex;flex-direction:column;gap:14px}
.pc-tl li{position:relative;display:flex;flex-direction:column;gap:2px}
.pc-tl li::before{content:"";position:absolute;left:-26px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--line-2);box-sizing:border-box}
.pc-tl li.mine::before{background:var(--accent);border-color:var(--accent)}
.pc-tl .y{font:700 12px/1.3 var(--mono);letter-spacing:.06em;color:var(--accent)}
.pc-tl .t{font-size:16px;line-height:1.45}
.pc-tl li:not(.mine) .t{color:var(--ink-2)}
.pc-tl .by{font:400 13px/1.4 var(--sans);color:var(--ink-2)}
@media print{
  a.person,a.person[aria-expanded],a.datelink,a.datelink[aria-expanded]{text-decoration:none;color:inherit}
  .pcard,.pc-scrim{display:none!important}
}

/* a place: a place in a part's place-and-date line, opening what happened there */
a.placelink{color:inherit;text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:currentColor;text-decoration-thickness:1.5px;text-underline-offset:4px;cursor:pointer}
a.placelink:hover,a.placelink[aria-expanded="true"]{color:var(--ink)}

/* Words and quotations (built for What's what and Trusted Servants). A word's first mention on a
   page (docs/build_hub.py marks it) has a dotted underline in a quieter color than a name's, and
   opens what it means. The book mark after a quotation (docs/mark_quotes.py) opens where the quote
   comes from: a small raised icon, like a footnote, with a hit area bigger than it looks and
   negative margins so it doesn't open up the line. */
a.term{color:inherit;text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:var(--ink-2);text-decoration-thickness:1.5px;text-underline-offset:4px;cursor:pointer}
a.term:hover,a.term[aria-expanded="true"]{color:var(--accent);text-decoration-color:var(--accent)}
/* a place in the running text (From Dust to Glory): opens its card from Where */
a.place{color:inherit;text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:var(--gold-ink);text-decoration-thickness:1.5px;text-underline-offset:4px;cursor:pointer}
a.place:hover,a.place[aria-expanded="true"]{color:var(--accent);text-decoration-color:var(--accent)}
.takeaway a.term,.stay.last a.term,.film-note a.term{text-decoration-color:currentColor}
.takeaway a.term:hover,.stay.last a.term:hover,.film-note a.term:hover,
.takeaway a.term[aria-expanded="true"],.stay.last a.term[aria-expanded="true"],.film-note a.term[aria-expanded="true"]{color:var(--gold);text-decoration-color:var(--gold)}
/* The mark is an empty inline box painted with a masked book icon, not an image or an inline-block:
   a browser may wrap before an image, which left the mark alone at the start of a line. */
a.qsrc{display:inline;padding:6px 10px;margin:0 -5px 0 -2px;font-size:13px;line-height:1;vertical-align:.35em;background-color:var(--accent);opacity:.75;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5C6.5 4.2 9.5 4.2 12 6c2.5-1.8 5.5-1.8 8-.5V19c-2.5-1.3-5.5-1.3-8 .5-2.5-1.8-5.5-1.8-8-.5z'/%3E%3Cpath d='M12 6v13.5'/%3E%3C/svg%3E") center/13px 13px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5C6.5 4.2 9.5 4.2 12 6c2.5-1.8 5.5-1.8 8-.5V19c-2.5-1.3-5.5-1.3-8 .5-2.5-1.8-5.5-1.8-8-.5z'/%3E%3Cpath d='M12 6v13.5'/%3E%3C/svg%3E") center/13px 13px no-repeat;text-decoration:none;cursor:pointer}
a.qsrc:hover,a.qsrc[aria-expanded="true"]{opacity:1}
a.qsrc:focus-visible{opacity:1;outline:2px solid var(--focus);outline-offset:1px}
.takeaway a.qsrc,.stay.last a.qsrc,.film-note a.qsrc{background-color:var(--gold)}
@media (forced-colors:active){a.qsrc{forced-color-adjust:none;background-color:LinkText}}
.pc-src{font:400 15px/1.45 var(--sans);color:var(--ink-2)}
.pc-src.cited{color:var(--ink)}
.pc-check{display:flex;align-items:flex-start;gap:8px;padding-top:10px;border-top:1px solid var(--line-2);font:600 14px/1.4 var(--sans);color:var(--ink-2)}
.pc-check svg{flex-shrink:0;margin-top:1px}
.pc-check.m svg,.pc-check.v svg,.pc-check.c svg{color:var(--accent)}
.pc-here{font:400 14px/1.4 var(--sans);color:var(--ink-2)}
@media print{
  a.term,a.term[aria-expanded]{text-decoration:none;color:inherit}
  a.qsrc{display:none!important}
}

/* Maps (the Where page, and the small map on a place's card): an old paper map, its colors tokens
   so it follows the theme. Pins and names are links (a.placelink, a.m-box). Built for Where. */
.m-water{fill:var(--map-water)}
.m-land{fill:var(--map-land);stroke:var(--map-coast);stroke-width:.8;stroke-linejoin:round}
.m-other{fill:var(--map-other);stroke:var(--map-line);stroke-width:.7;stroke-linejoin:round}
.m-lake{fill:var(--map-water);stroke:var(--map-coast);stroke-width:.7}
.m-river{fill:none;stroke:var(--map-water);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.m-border{fill:none;stroke:var(--map-line);stroke-width:1;stroke-dasharray:5 4}
.m-region{fill:var(--accent);fill-opacity:.35;stroke:var(--accent);stroke-width:1.2}
.m-sea{font-family:var(--serif);font-style:italic;fill:var(--ink-2);opacity:.85}
.m-country{font-family:var(--sans);font-weight:600;letter-spacing:.3em;fill:var(--ink-2);opacity:.6}
.m-dot{fill:var(--accent);stroke:var(--map-land);stroke-width:2}
.m-halo{fill:var(--accent);fill-opacity:.2}
svg a{text-decoration:none}
.m-pin text{font-family:var(--mono);fill:var(--ink);paint-order:stroke;stroke:var(--map-land);stroke-width:4px;stroke-linejoin:round}
.m-pin:hover text,.m-pin[aria-expanded="true"] text{fill:var(--accent)}
.m-pin:hover .m-dot,.m-pin[aria-expanded="true"] .m-dot{stroke:var(--ink)}
.m-area text{font-family:var(--sans);font-weight:700;letter-spacing:.24em;fill:var(--ink-2)}
.m-box rect{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:4 3}
.m-box text{font-family:var(--sans);font-weight:600;font-size:.9em;fill:var(--accent);paint-order:stroke;stroke:var(--map-land);stroke-width:4px}
.m-box:hover text{fill:var(--ink)}
.pc-map{display:block;width:100%;height:auto;border:1px solid var(--line-2);border-radius:8px}
.map-city .m-river,.pc-map .m-river{stroke-width:3}
@media print{
  a.placelink,a.placelink[aria-expanded]{text-decoration:none;color:inherit}
  .m-pin text{stroke:#fff}
}

/* Lists of cards (Who's who, Where): an intro, then groups with their heading above on phones and
   beside from 900px, each a list of cards that open and close without a script. The cards are
   written by docs/build_hub.py. Built for Who's who. */
.hub-intro{display:flex;flex-direction:column;gap:12px;max-width:62ch;padding-block:24px 28px}
.hub-intro p{font-size:clamp(18px,1.6vw,20px)}
@media (min-width:900px){.hub-intro{padding-block:36px 36px}}
.hub-groups{padding-block:4px 32px}
.hub-group{display:grid;gap:12px;padding-block:28px 32px;border-top:1px solid var(--line-2)}
.hub-group h2{margin:0;font:400 clamp(30px,3.6vw,42px)/1.08 var(--display)}
.hub-group .g-note{margin-top:8px;font:400 14px/1.5 var(--sans);color:var(--ink-2);max-width:34ch}
@media (min-width:900px){
  .hub-groups{padding-block:12px 48px}
  .hub-group{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:72px;align-items:start;padding-block:44px 48px}
  .hg-head{position:sticky;top:calc(var(--bar-h) + 24px)}
}
.hub-list{border-top:1px solid var(--line)}
.hub-card{border-bottom:1px solid var(--line)}
.hub-card summary{min-height:64px;padding-block:12px;display:flex;align-items:center;gap:14px;cursor:pointer;list-style:none}
.hub-card summary::-webkit-details-marker{display:none}
.hub-card summary:hover .n{color:var(--accent)}
.hc-pic{flex-shrink:0;width:56px;height:56px;border-radius:8px;overflow:hidden;background:var(--ph)}
.hc-pic img{display:block;width:100%;height:100%;object-fit:cover}
.hc-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hc-name .n{font-size:21px;line-height:1.25}
.hc-name .r{font:400 14px/1.4 var(--sans);color:var(--ink-2)}
.hc-name .yrs{white-space:nowrap}
.hub-card .chev{flex-shrink:0;color:var(--ink-2);transition:transform .2s ease}
.hub-card[open] .chev{transform:rotate(180deg)}
.hc-body{padding:2px 0 26px;display:flex;flex-direction:column;gap:14px;max-width:64ch}
.hc-body>p{font-size:18px}
.hc-own{display:flex;flex-direction:column;gap:2px;align-self:flex-start;padding:10px 16px;border:1px solid var(--line-2);border-radius:10px;background:var(--card);color:var(--ink);text-decoration:none}
.hc-own:hover{border-color:var(--accent)}
.hc-own .t{font-size:19px;line-height:1.3}
.hc-own .s{font:400 13px/1.4 var(--sans);color:var(--ink-2)}
.hc-k{margin:4px 0 0;font:700 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.hc-where{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.hc-where li{display:flex;flex-direction:column;gap:2px}
.hc-piece{font:600 15px/1.4 var(--sans)}
.hc-secs{font:400 15px/1.55 var(--sans);color:var(--ink-2)}
.hc-secs a{text-decoration-thickness:1px}
@media (min-width:900px){.hc-name .n{font-size:22px}}
@media (prefers-reduced-motion:reduce){.hub-card .chev{transition:none}}
@media print{
  .hg-head{position:static}
  .hub-group{display:block;break-inside:auto}
  .hub-card summary{break-after:avoid}
  .hub-card .chev{display:none}
  .hc-pic{width:40px;height:40px}
  .hc-own{border:0;padding:0}
}

/* Found words (shared/find.js): a Search result's words marked on the page it opens, with a ring
   around the one it scrolled to. Built for the Search page, whose snippets use the same mark. */
mark.find-hit{background:var(--hl);color:inherit;border-radius:3px;padding:0 .08em;margin:0 -.08em}
mark.find-hit.here{box-shadow:0 0 0 2px var(--gold)}
@media print{mark.find-hit{background:none;box-shadow:none;padding:0;margin:0}}

/* Printing, for a group's history night or a newcomers' table. Paper and ink whatever the screen's
   theme, so the dark cards print as outlined boxes; no illustration, menu, audio card, buttons or
   previous/next. Before printing, the page's script opens every Go deeper topic (and, on Questions,
   every answer). The sources show their addresses, and the page's own address prints at the end
   (.print-from: added by deep-dive.js on the deep dives, written into the plain pages). */
.print-from{display:none}
@media print{
  :root,:root:not([data-theme="light"]),:root[data-theme="dark"]{
    color-scheme:light;
    --paper:#fff; --band:#fff; --card:#fff; --mat:#fff; --ph:#EEE; --ph-ink:#333;
    --ink:#111; --ink-2:#444; --accent:#5A2A15; --gold:#6B4A12; --line:#BBB; --line-2:#AAA; --track:#DDD;
    --night:#fff; --night-ink:#111; --night-2:#444; --night-line:#BBB; --night-btn:#DDD; --night-edge:#999;
    --hl:rgba(201,140,40,.25); --art-dim:1;
    --map-water:#E4E4E4; --map-land:#fff; --map-other:#F3F3F3; --map-coast:#888; --map-line:#BBB;
  }
  @page{margin:16mm 15mm}
  html,body{background:#fff;color:#111;font-size:11.5pt}
  .skip,.top,.contents,figure.hero,.audio,.explore,.report,.pager,.btn,.typeset,.shelf-link,.foot p+p{display:none!important}
  .wrap{max-width:none;padding-inline:0}
  a{color:inherit}
  details::details-content{content-visibility:visible}
  .src-list a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;word-break:break-all;color:#444}
  h1,h2,h3,.label,.eyebrow,.sec-head{break-after:avoid}
  blockquote,figure,.card,.takeaway,.help-now,.short,li{break-inside:avoid}
  figure.print img{max-height:9cm;width:auto}
  .print-from{display:block;margin-top:18pt;padding-top:8pt;border-top:1px solid #BBB;font:10pt/1.4 var(--sans);color:#444}
}