/* Deep dives · shared styles for every piece (The Little Doctor, I Just Work Here, My Sponsor, Ebby
   and the pieces after them). Each page loads this file first, then its piece's own gallery.css,
   which holds only the blocks that piece alone uses. A block that a second piece needs moves here.
   Section names in the comments below say where a block was first built. */

/* 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:'Limelight';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/limelight-latin-400-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:#F1E6CD; --band:#EADDC1; --card:#F7EFDD; --mat:#FBF6EA; --ph:#D9C7A2; --ph-ink:#4A3726;
  --ink:#2A1D12; --ink-2:#6A5037; --accent:#7A3B22; --gold:#B7822A; --line:#D2BF98; --line-2:#C8B088; --track:#E3D3B0;
  --night:#1B130B; --night-ink:#F2E6CC; --night-2:#BFA980; --night-line:#3A2A1C; --night-btn:#5A4630; --night-edge:transparent;
  --focus:#7A3B22; --art-dim:1; --hl:rgba(201,140,40,.35);
  --serif:'Old Standard TT', Georgia, 'Times New Roman', serif;
  --display:'Limelight', Georgia, 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:#17120C; --band:#1E1710; --card:#231A12; --mat:#2A2117; --ph:#3A2E20; --ph-ink:#E6D6B5;
    --ink:#EFE3CB; --ink-2:#BFA980; --accent:#E3A36E; --gold:#C99A45; --line:#3A2E20; --line-2:#4D3D2A; --track:#3A2E20;
    --night:#0D0905; --night-ink:#F2E6CC; --night-2:#BFA980; --night-line:#33261A; --night-btn:#5A4630; --night-edge:#4D3D2A;
    --focus:#E3A36E; --art-dim:.86; --hl:rgba(214,160,72,.38);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#17120C; --band:#1E1710; --card:#231A12; --mat:#2A2117; --ph:#3A2E20; --ph-ink:#E6D6B5;
  --ink:#EFE3CB; --ink-2:#BFA980; --accent:#E3A36E; --gold:#C99A45; --line:#3A2E20; --line-2:#4D3D2A; --track:#3A2E20;
  --night:#0D0905; --night-ink:#F2E6CC; --night-2:#BFA980; --night-line:#33261A; --night-btn:#5A4630; --night-edge:#4D3D2A;
  --focus:#E3A36E; --art-dim:.86; --hl:rgba(214,160,72,.38);
}
@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(--accent)}
.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}
.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}
@media (min-width:700px){.brand .gal{display:inline}}
@media (min-width:900px){
  .menu-btn{display:none}
  .home-link{display:flex}
  .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 .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:#E6D6B5}
.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}}

/* title */
.room-head{display:flex;flex-direction:column;gap:10px;padding-top:18px}
.room-head h1{margin:0;font:400 clamp(44px,7vw,76px)/1.02 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}
.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:400 clamp(36px,4.4vw,50px)/1.06 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)}
@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 .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}}
.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}