/* Call Me Anne (Anne S.) · blocks that only this piece uses. Everything else comes from
   /shared/deep-dive.css, which every page loads first. */

/* Built for 1 · On a scholarship (feature, Seventeen years): the courtship as two lanes running
   down the page, Anne's on the left and Bob's on the right, one grid row for each year from 1898
   to 1915, so a long stretch takes more room than a short one. One ordered list holds every
   stretch in date order, so it reads in sequence; each item (.ln) is placed with an inline
   grid-row. Row 1 is the dance and the last row the wedding (.ln-both, across both lanes). .ln-a
   sits in Anne's lane and .ln-b in Bob's; .ln-quiet is a stretch the books say almost nothing
   about. Each item carries its own dates (.ln-when) and lane (.ln-who, hidden on screen, where the
   lane heads above say it). The year ticks (.ln-tick) are decoration. */
.ln-heads,.lanes{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1fr);column-gap:8px;max-width:860px}
.ln-heads{margin-top:28px;padding-bottom:8px;border-bottom:2px solid var(--ink);font:700 calc(12px*var(--ts,1))/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.ln-heads span:nth-child(2){grid-column:2;color:var(--accent)}
.ln-heads span:nth-child(3){grid-column:3;color:var(--ink-2)}
.lanes{list-style:none;margin:0;padding:0;grid-auto-rows:minmax(24px,auto)}
.ln{position:relative;margin:0 0 6px;padding:8px 10px 9px;background:var(--card);font-size:calc(15px*var(--ts,1));line-height:1.42;align-self:stretch}
.ln p{margin:0}
.ln-a{grid-column:2;border-left:3px solid var(--accent)}
.ln-b{grid-column:3;border-left:3px solid var(--ink-2)}
.ln-both{grid-column:2 / 4;margin:10px 0 12px;padding:10px 12px 11px;background:none;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);font-size:calc(16px*var(--ts,1));text-align:center}
.ln-quiet{background:none;border-left-style:dashed;color:var(--ink-2);font-style:italic}
.ln-when{display:block;margin-bottom:2px;font:700 calc(13px*var(--ts,1))/1.3 var(--mono);font-style:normal;color:var(--ink-2)}
.ln-a .ln-when{color:var(--accent)}
.ln-who{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ln-tick{grid-column:1;padding-top:8px;font:700 calc(13px*var(--ts,1))/1.3 var(--mono);color:var(--ink-2);border-top:1px solid var(--line-2)}
@media (min-width:700px){
  .ln-heads,.lanes{grid-template-columns:64px minmax(0,1fr) minmax(0,1fr);column-gap:16px}
  .ln{font-size:calc(16px*var(--ts,1));padding:10px 14px 11px}
  .ln-both{font-size:calc(17px*var(--ts,1))}
}
@media print{.ln{break-inside:avoid;background:none}}

/* Built for 6 · Every single morning (feature, In her words): message slips, one per
   remembered thing Anne said, with who heard it, when, where, and the source. */
.slips{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:16px}
.slip{display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--line-2);border-top:4px solid var(--accent);border-radius:4px;padding:16px 18px 14px}
.slip-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--line-2)}
.slip-to{margin:0;font:600 calc(15px*var(--ts,1))/1.3 var(--sans);color:var(--ink)}
.slip-k{font:700 calc(11px*var(--ts,1))/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-right:6px}
.slip-when{margin:0;font:700 calc(13px*var(--ts,1))/1.3 var(--mono);color:var(--accent);text-align:right}
.slip-msg{flex-grow:1;margin:0;font-style:italic;font-size:calc(21px*var(--ts,1));line-height:1.45}
.slip-where{margin:0;font-size:calc(16px*var(--ts,1));line-height:1.5}
.slip-src{margin:0;padding-top:10px;border-top:1px dashed var(--line-2);font:400 calc(13px*var(--ts,1))/1.5 var(--sans);color:var(--ink-2)}
@media (min-width:700px){.slips{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.slips{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media print{.slip{break-inside:avoid}}

/* Built for Legacy (feature, What they called her): the names she went by, one ruled row
   each, with who used the name and what it said about her. */
.names{list-style:none;margin:28px 0 0;padding:0;border-top:2px solid var(--ink)}
.nm{display:grid;gap:6px;padding:18px 0 20px;border-bottom:1px solid var(--line-2)}
.nm-name{margin:0;font:400 calc(28px*(1 + (var(--ts,1) - 1)*0.6))/1.15 var(--display)}
.nm-who{margin:0;font:700 calc(12px*var(--ts,1))/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.nm-about{margin:0;font-size:calc(18px*var(--ts,1));line-height:1.55}
@media (min-width:700px){.nm{grid-template-columns:minmax(0,2fr) minmax(0,3fr);column-gap:32px;align-items:baseline}.nm-name{grid-row:1 / 3}}
@media print{.nm{break-inside:avoid}}