/* =====================================================================
   Unsettled — News21 housing project · v2 (high-design pass)
   --unit grid · nodal map · restrained monochrome + category accents

   THE DOCTRINE — every page links this file; don't re-derive these:
   · Tokens are law. --un-text/--un-background/--un-grey for ink/paper/
     secondary; --hairline for structural rules; --cardline (stronger)
     for card edges; --surface for raised panels; --un-black is constant
     ink pigment (never flips); accents only via --c-* / --chip / --cc.
   · Rules appear ONLY at real section boundaries. Repeated list rows
     are separated by whitespace, never stacked hairlines. One rule per
     boundary — two bordered elements must not stack into a 2px line.
   · Markers carry color: 8px squares. Small text stays ink/grey.
   · Type tiers: UI labels 14px/500-600 · captions & metadata 13px
     (floor — nothing below 13px) · body serif clamp(16px,1.25vw,19px).
     Sentence case in all UI labels. tabular-nums on timers/counts.
   · Containers: the footer content edge is the reference edge —
     1200px max-width, 28px side padding (20px ≤820px). End matter
     aligns to it exactly (see .related's max() formula).
   · Margins flow one direction: margin:0 0 Xem. No margin-tops.
   · Focus: every control keeps a visible :focus-visible ring —
     2px solid, offset 2-4px. Accent (--cui) inside stories; ink on
     utility pages; --news21-yellow only in the dark site chrome.
     Never outline:none without a replacement.
   · Both themes are first-class. Thin accent marks darken in light
     mode via --cui/--dcui (color-mix 58% accent / #262420). Site
     chrome (topbar, footer) stays dark in both.
   · Icons are drawn in CSS (borders/squares), not font glyphs.
     Accepted exceptions: ▾/▴ in disclosure-button text, → in links.
   · Escape everything interpolated into innerHTML (esc), and gate
     editor-supplied URLs through safeURL (see story.js).
   ===================================================================== */

/* ── Tokens (CSS reference §2) ───────────────────────────────────── */
:root {
  --un-black:#0c0c0c; --un-green:#70cc8d; --un-teal:#70ccbe; --un-lavender:#7081cc;
  --un-pink:#de7cce; --un-coral:#e56791; --un-chili:#e54545; --un-umber:#e57850;
  --un-yellow:#f2bc30; --un-yuzu:#c8d93c; --un-palm:#a7d962; --news21-yellow:#f5a623;
  --un-75:#636363; --un-50:#808080; --un-25:#bfbfbf; --un-10:#e5e5e5;

  /* one line per token — static light values; the dark blocks below
     mirror them. (No light-dark(): it needs Safari 17.5+, and inside a
     custom property it can't fall back — the whole palette would die
     on older Safari.) Change a color? Change it in all three places. */
  --un-grey:var(--un-75);
  --un-text:#0c0c0c;
  --un-background:#f4f4f2;   /* warm paper */
  --surface:#ffffff;         /* raised cards */
  --hairline:#00000014;      /* structural rules */
  --cardline:#00000029;      /* card edges — stronger */
  --grid-line:#0000000d;     /* hero lattice guides */
  --dot:#0c0c0c;             /* map node ink */
  --panel:#fffffff7;         /* translucent overlay cards */
  color-scheme:light;

  --c-people:var(--un-yellow); --c-rules:var(--un-lavender); --c-disaster:var(--un-chili);
  --c-equity:var(--un-coral); --c-confinement:var(--un-teal); --c-solutions:var(--un-palm);

  --f-head:"ff-real-headline-pro", system-ui, "Helvetica Neue", Arial, sans-serif;
  --f-ui:"ff-real-text-pro", system-ui, "Helvetica Neue", Arial, sans-serif;
  --f-body:freight-text-pro, Georgia, "Times New Roman", serif;
  --f-disp:"freight-display-compressed-pro", "freight-big-pro", Georgia, serif;

  --cols:24; --unit:56px;
  --gutter:calc(var(--unit) * 2);            /* page side margin */
  --inset-lg:calc(var(--unit)/3);
  --inset-md:calc(var(--unit)/4);
  --inset-sm:calc(var(--unit)/6);
}
/* dark theme — the OS preference (unless overridden by the toggle) or
   the manual toggle. These two blocks are intentionally identical:
   media query for the OS default, attribute for the explicit choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark;
    --un-grey:var(--un-25); --un-text:#f4f4f2; --un-background:#0c0c0c;
    --surface:#161616; --hairline:#ffffff1a; --cardline:#ffffff33;
    --grid-line:#ffffff10; --dot:#f4f4f2; --panel:#0c0c0cf7;
  }
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --un-grey:var(--un-25); --un-text:#f4f4f2; --un-background:#0c0c0c;
  --surface:#161616; --hairline:#ffffff1a; --cardline:#ffffff33;
  --grid-line:#ffffff10; --dot:#f4f4f2; --panel:#0c0c0cf7;
}

/* ── Base ────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--un-background);color:var(--un-text);
  font-family:var(--f-body);line-height:1.55;overflow-x:clip;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit}
:target{scroll-margin-top:calc(var(--unit) * 2)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:#000;color:#fff;padding:.6rem 1rem;font-family:var(--f-ui)}
.skip-link:focus{left:0}
.tk{font-style:italic;color:var(--un-grey)}
/* headlines the copy desk hasn't signed off: real language so the design
   is tested honestly, set in italic so nobody mistakes one for final.
   Set status:final in stories.csv to clear it; --strict blocks launch. */
.hed-working{font-style:italic}
/* until-found stays findable — display:none would break find-in-page reveal */
[hidden]:not([hidden="until-found"]){display:none!important}


/* ── Category chips (article eyebrow) ────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--f-ui);font-size:14px;font-weight:500;
  color:var(--un-grey);
}
.chip::before{content:"";width:8px;height:8px;background:var(--chip)}

/* ── Article page ────────────────────────────────────────────────── */
.article{
  /* --c-src is set inline by story.js; --cui is the same accent nudged
     darker in light mode so thin marks (fills, outlines) keep contrast */
  --c:var(--c-src,var(--c-people));
  --cui:var(--c);
  padding:calc(var(--unit) * 1.8) var(--gutter) calc(var(--unit) * 1.2);
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:0 calc(var(--unit) * .9);
}
.article > *{grid-column:3/11;min-width:0}
.article-eyebrow{display:flex;gap:1.4rem;margin:0 0 var(--inset-lg)}
.article-eyebrow .chip{text-decoration:none}
.article-eyebrow .chip:hover,.article-eyebrow .chip:focus-visible{color:var(--un-text)}
.article-eyebrow .chip:focus-visible{outline:2px solid var(--cui,var(--c));outline-offset:2px}
.article-hed{
  margin:0 0 .35em;font-family:var(--f-disp);font-weight:600;
  font-size:clamp(34px,4.6vw,68px);line-height:1.02;text-wrap:balance;
  text-box:trim-both cap alphabetic;
}
.article-dek{
  margin:0 0 calc(var(--unit) * .7);font-family:var(--f-body);
  font-size:clamp(17px,1.5vw,22px);line-height:1.5;color:var(--un-grey);max-width:52ch;
  text-wrap:pretty;
}
.article-meta{
  margin:0 0 var(--unit);padding-top:var(--inset-md);border-top:1px solid var(--hairline);
  font-family:var(--f-ui);font-weight:400;font-size:13px;color:var(--un-grey);
}

.article-metabar{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem 1.5rem;flex-wrap:wrap;
  margin:0 0 calc(var(--unit) * .7);padding-top:var(--inset-md);
  border-top:1px solid var(--hairline);
}
.article-metabar .article-meta{margin:0;padding:0;border:0}
/* byline names link to bio pages */
.meta-by{color:inherit;text-decoration:none}
.meta-by:hover,.meta-by:focus-visible{color:var(--un-text);
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.meta-by:focus-visible{outline:2px solid var(--cui,var(--c));outline-offset:2px}

/* byline-row actions: Republish · Copy link · Share (native sheet, phones) */
.meta-actions{display:flex;align-items:center;gap:.9rem}
.meta-sep{font-family:var(--f-ui);color:var(--un-grey)}
.meta-rep,.meta-copy,.meta-share{display:flex;align-items:center;gap:7px;
  font-family:var(--f-ui);font-size:14px;font-weight:600;color:var(--un-grey);
  background:none;border:0;cursor:pointer;
  text-decoration:none;padding:10px 0;margin:-4px 0}
/* hover only where hover exists — touch taps otherwise leave the
   underline stuck on whichever action was pressed last */
@media (hover:hover){
  .meta-rep:hover,.meta-copy:hover,.meta-share:hover{color:var(--un-text);
    text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
}
.meta-rep:focus-visible,.meta-copy:focus-visible,
.meta-share:focus-visible{color:var(--un-text);
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.meta-rep:focus-visible,.meta-copy:focus-visible,.meta-share:focus-visible{
  outline:2px solid var(--cui,var(--c));outline-offset:2px}
.meta-copy.is-done{color:var(--cui,var(--c))}
.meta-share svg{width:15px;height:15px}

.article-media{grid-column:2/12;margin:0 0 var(--unit)}
.am-img{width:auto;max-width:100%;height:auto;max-height:80vh;display:block}
.article-media figcaption{display:block}

/* video hero: 16:9 frame + explainer text */
/* real film leads: a horizontal Vimeo embed fills the media slot at 16:9;
   a vertical film we host stands phone-shaped on the page background */
.video-embed{position:relative;aspect-ratio:16/9;background:#0c0c0c}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vert-stage{display:grid;justify-items:center;padding:0}
.vert-player{width:min(420px,100%);aspect-ratio:9/16;background:#0c0c0c;display:block}
/* two verticals side by side; they stack on narrow screens */
.vert-pair{display:flex;flex-wrap:wrap;gap:22px;justify-content:center}
.vert-pair .vert-stage{width:min(340px,100%)}
.vert-pair .vert-player{width:100%}
.vclip-frame.vclip-frame--vert{aspect-ratio:9/16}
.article-media--vert .video-explainer{text-align:center;max-width:52ch;margin-inline:auto}
.vert-tr-row{justify-content:center;margin-top:2px}
.article-media--vert .clip-transcript{max-width:52ch;margin-inline:auto}

.video-frame{
  position:relative;aspect-ratio:16/9;
  background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;
}
.video-frame::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.38)}
.video-play{
  position:relative;width:84px;height:84px;border-radius:50%;
  border:2px solid #fff;background:rgba(12,12,12,.55);color:#fff;
  font-size:24px;padding-left:6px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,color .15s ease;
}
.video-play:hover,.video-play:focus-visible{background:#fff;color:#0c0c0c;outline:none}
.video-badge{position:absolute;left:16px;bottom:14px;
  font-family:var(--f-ui);font-size:13px;color:#fff;opacity:.85;font-variant-numeric:tabular-nums}
.video-explainer{
  margin:20px auto 0;max-width:62ch;padding:0 16px;
  font-family:var(--f-body);font-size:clamp(16px,1.4vw,20px);line-height:1.55;color:var(--un-grey);
}
.article-media--video{background:none}

/* photo essay format */
.essay-figure{grid-column:2/12;margin:calc(var(--unit) * .35) 0 calc(var(--unit) * 1.1)}
/* interactive embeds sit in the reading column, not the wide media column,
   and keep the paragraph rhythm so the space above and below matches */
/* photo gallery — click the frame to advance; square markers below use the
   same grammar as the audio dock's clip markers */
.gallery{margin:calc(var(--unit) * .35) 0 calc(var(--unit) * 1.35)}
.gal-frame{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
.gal-frame:focus-visible{outline:2px solid var(--cui,var(--c));outline-offset:3px}
/* .essay-figure img sets display:block — these need to outrank it */
.gallery .gal-img{display:none;width:100%;height:auto;max-height:none;
  aspect-ratio:3/2;object-fit:cover}
.gallery .gal-img.is-on{display:block}
.gal-bar{display:flex;align-items:center;gap:1rem;margin-top:10px}
/* gallery captions change length per slide — a credit that hops between
   inline and wrapped reads jumpy, so it always takes its own line */
.gallery .gal-cred{display:block;margin-left:0;margin-top:2px}
/* drawn triangles, same construction as the audio player's glyphs —
   the squares alone read as position, not as something you can press */
.gal-nav{display:flex;gap:4px;flex:none;margin-left:-10px}
.gal-btn{width:38px;height:34px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;min-height:44px}
.gal-btn::after{content:"";width:0;height:0;border-style:solid;
  transition:border-color .15s ease}
.gal-btn--prev::after{border-width:7px 10px 7px 0;
  border-color:transparent var(--un-text) transparent transparent}
.gal-btn--next::after{border-width:7px 0 7px 10px;
  border-color:transparent transparent transparent var(--un-text)}
.gal-btn:hover.gal-btn--prev::after{border-right-color:var(--cui,var(--c))}
.gal-btn:hover.gal-btn--next::after{border-left-color:var(--cui,var(--c))}
.gal-btn:focus-visible{outline:2px solid var(--cui,var(--c));outline-offset:2px}
.gal-dots{display:flex;gap:7px;flex:1}
/* the drawn dot stays 8px; the padded button is an invisible tap halo */
.gal-dot{position:relative;width:8px;height:8px;flex:none;padding:14px;cursor:pointer;
  background:none;border:0;box-sizing:content-box}
.gal-dot::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:8px;height:8px;border:1px solid var(--cardline)}
.gal-dot.is-on::before{background:var(--cui,var(--c));border-color:var(--cui,var(--c))}
.gal-dot:focus-visible{outline:2px solid var(--cui,var(--c));outline-offset:2px}

/* ── Voices: hand sketch + spoken, transcribed quotes ─────────────────
   One person on stage per deck. Sketch holds the left and stays put
   (sticky) while the three category quotes stack down the right rail.
   Sketches are ink drawings — multiply hides scan paper in light mode,
   invert+screen re-inks them for dark. Text is always readable; play
   dims it and the audio re-reveals it line by line. */
.article .voices{grid-column:2/12;margin:0 0 calc(var(--unit)*1.2)}
.voices-bar{margin-top:10px}
.article .voice,.voices .voice{display:grid;grid-template-columns:minmax(240px,5fr) 6fr;
  gap:0 calc(var(--unit)*1.2);align-items:start;margin:0 0 calc(var(--unit)*.4)}
.voice-side{position:sticky;top:calc(72px + 28px)}
.voice-sketch{width:100%;max-width:420px;height:auto;display:block;mix-blend-mode:multiply}
:root[data-theme="dark"] .voice-sketch{filter:invert(1) hue-rotate(180deg);mix-blend-mode:screen}
.voice-name{display:block;margin-top:14px;font-family:var(--f-disp);font-weight:600;
  font-size:clamp(24px,2.3vw,36px);line-height:1.05;color:var(--un-text)}
.voice-meta{display:block;margin-top:4px;font-family:var(--f-ui);font-size:14px;color:var(--un-grey)}
/* profile feature photo + thumbnail rail — every frame shown once,
   big, uncropped; uniform thumbs carry the browse affordance */
/* the gallery is its own room: a full-bleed surface band with hairline
   thresholds — entering it reads as a mode change without a label */
.pflow{grid-column:1/-1;margin:calc(var(--unit) * .8) calc(-1 * var(--gutter)) 0;
  background:var(--surface);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  display:grid;grid-template-columns:minmax(400px,54%) minmax(0,1fr);
  gap:0 64px;align-items:start;
  padding:calc(var(--unit) * .8) max(var(--gutter), calc((100vw - 1320px) / 2)) calc(var(--unit) * .9)}
.pflow-left{position:sticky;top:84px}
/* constant-height stage: the photo centers inside it, so the rail and
   arrows below never jump when aspect ratios change */
.pfeat{position:relative;height:min(660px,74vh);touch-action:pan-y;outline-offset:4px}
.pfeat:focus-visible{outline:2px solid var(--un-text)}
.pfeat-img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;
  opacity:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  transition:opacity .35s ease;user-select:none;-webkit-user-drag:none;pointer-events:none}
.pfeat-img.is-on{opacity:1;pointer-events:auto}
.pthumb-bar{display:flex;align-items:center;gap:10px;margin:16px 0 0}
.pthumbs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 6px}
.pthumbs::-webkit-scrollbar{display:none}
.pthumb{flex:0 0 auto;width:56px;height:70px;padding:0;border:0;background:none;cursor:pointer;
  opacity:.45;transition:opacity .25s ease;border-bottom:3px solid transparent}
.pthumb img{width:100%;height:100%;object-fit:cover;display:block}
.pthumb.is-on{opacity:1;border-bottom-color:var(--pc)}
.pthumb:hover,.pthumb:focus-visible{opacity:.85}
.pthumb:focus-visible{outline:2px solid var(--un-text);outline-offset:2px}
/* short profiles must still hold the full stage — otherwise whatever
   follows the section crowds up under the thumbnail rail */
.pflow-bodies{max-width:660px;margin:0;min-height:calc(min(660px, 74vh) + 120px)}
.pflow-story{animation:pfade .35s ease}
@keyframes pfade{from{opacity:0;transform:translateY(6px)}}
.pflow-mark{display:block;width:96px;height:5px;background:var(--pc);margin:0 0 14px}
/* one quiet credit for the whole section */
.pflow-credit{grid-column:2;margin:26px 0 0;font-family:var(--f-ui);font-size:13px;color:var(--un-grey)}
/* phones lose the always-visible rail — the end-of-profile link replaces it */
.pflow-next{display:none;margin:22px 0 4px;padding:0;border:0;background:none;cursor:pointer;
  font-family:var(--f-ui);font-size:15px;font-weight:600;color:var(--un-text);
  text-decoration:underline;text-underline-offset:3px}
.pflow-next:focus-visible{outline:2px solid var(--un-text);outline-offset:2px}
.pflow-hed{margin:0 0 16px;
  font-family:var(--f-head);font-weight:800;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.01em}
@media (max-width:900px){
  .pflow{display:block;padding-left:var(--gutter);padding-right:var(--gutter)}
  .pflow-left{position:static}
  .pfeat{height:56vh}
  .pthumb-bar{margin:12px 0 28px}
  .pflow-bodies{max-width:none;margin:0 auto;padding:0 calc(var(--gutter) * .5);min-height:0}
  .pflow-next{display:inline-block}
  .pflow-credit{margin:22px auto 0;padding:0 calc(var(--gutter) * .5)}
}
@media (prefers-reduced-motion:reduce){
  .pflow-story{animation:none}
  .pfeat-img{transition:none}
}
@media (forced-colors:active){
  .pthumb.is-on{border-bottom-color:Highlight}
  .pflow-mark{background:CanvasText}
}

/* profile carousel: the voices deck grammar carrying a photo + prose */
.profile-photo{width:100%;max-width:420px;aspect-ratio:4/5;object-fit:cover;display:block}
.voices--profiles{margin-top:calc(var(--unit) * .55)}
.voices--profiles .voices-bar{margin:0 0 24px}
.profile-cred{display:block;margin-top:6px;font-family:var(--f-ui);font-size:13px;color:var(--un-grey)}
.profile-graf{margin:0 0 1.4em;font-family:var(--f-body);font-size:17px;line-height:1.7}
.profile-graf:last-child{margin-bottom:0}
.voice-bio{margin:0 0 2em;font-family:var(--f-body);font-size:15px;line-height:1.6;
  color:var(--un-grey);max-width:52ch}
.voice-group{margin:0 0 2.4em}
.voice-group:last-child{margin-bottom:0}
.voice-cat{display:flex;align-items:center;gap:.6em;margin:0 0 .8em;
  font-family:var(--f-ui);font-size:14px;font-weight:600;color:var(--un-text)}
.voice-cat i{width:8px;height:8px;flex:none;background:var(--cui,var(--c))}
.voice-qrow{display:flex;gap:16px;align-items:flex-start}
.voice-quote{margin:0;min-width:0;flex:1;font-family:var(--f-body);font-size:clamp(19px,1.6vw,24px);
  line-height:1.5;color:var(--un-text);hanging-punctuation:first;text-wrap:pretty}
.voice-quote::before{content:"\201C"}
.voice-quote::after{content:"\201D"}
.vq-line{transition:opacity .5s}
.vq-line:not(.is-on){opacity:.13}
@media (prefers-reduced-motion:reduce){
  .vq-line{transition:none}
  .vq-line:not(.is-on){opacity:1}
}
/* the play affordance is a quiet drawn triangle at the quote's shoulder;
   a hairline + timecode close each quote below */
.voice-play{flex:none;width:26px;height:30px;margin-top:.3em;display:flex;align-items:center;
  padding:0;background:none;border:0;cursor:pointer}
.voice-play i{width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent var(--un-text)}
.voice-play:hover i{border-left-color:var(--cui,var(--c))}
.voice-group.is-playing .voice-play i{width:11px;height:15px;border:0;
  border-left:3.5px solid var(--un-text);border-right:3.5px solid var(--un-text)}
.voice-group.is-playing .voice-play:hover i{border-left-color:var(--cui,var(--c));border-right-color:var(--cui,var(--c))}
.voice-play:focus-visible{outline:2px solid var(--cui,var(--c));outline-offset:3px}
.voice-under{margin:1em 0 0 42px;padding-top:7px;border-top:1px solid var(--hairline);min-height:22px}
.voice-time{font-family:var(--f-ui);font-size:13px;color:var(--un-grey);font-variant-numeric:tabular-nums}
@media (max-width:820px){
  .article .voice,.voices .voice{grid-template-columns:1fr}
  .voice-side{position:static;order:-1;margin-bottom:20px}
  .voice-sketch{max-width:240px}
  .voice-name{margin-top:10px}
  .voice-under{margin-left:0}
}

/* embedded charts breathe: the graf gap alone reads too tight above the
   chart hed, and the old 2.2em bottom (plus the frame's own caption
   padding) left a hole after — balance the two */
.viz-embed{grid-column:4/10;margin:2.1em 0 2.5em;
  /* very large displays: the grid tracks keep growing but a chart
     shouldn't — cap and centre within the track */
  max-width:800px;width:100%;justify-self:center}
/* charts that need room (long ranked lists, time series) take the media
   column photographs use, instead of the narrower reading column */
.viz-embed--wide{grid-column:2/12;max-width:1200px}
/* edge-to-edge embeds (maps): the frame spans the viewport; the piece
   inside governs its own internal max width */
.viz-embed--bleed{grid-column:1/-1;margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));max-width:none;width:auto;justify-self:stretch}
/* scrolly chart embeds: the figure is a tall track, the frame pins to the
   viewport while the reader scrolls through the steps */
.viz-scrolly-track{position:relative}
.viz-scrolly iframe.viz-frame{position:sticky;top:72px;display:block;width:100%;height:calc(100svh - 72px)}
.viz-frame{display:block;width:100%;border:0}
/* the box hugs the visible image (no contain letterboxing) so the
   caption below sits flush with the photo's actual left edge */
.essay-figure img{width:auto;max-width:100%;height:auto;max-height:82vh;display:block}
.essay-figure figcaption{margin-top:6px;font-family:var(--f-body);font-size:15px;line-height:1.5}
/* height-capped photos can render narrower than their grid area; the
   whole box (photo + caption) shrink-wraps and centres so the photo,
   not its left edge, sits on the page axis. Galleries, viz embeds and
   the fixed-width variants keep their own sizing. */
.article-media:not(.article-media--video):not(.article-media--cycle),
.essay-figure:not(.gallery):not(.gallery-row):not(.viz-embed):not(.collage):not(.essay-figure--portrait){display:table;justify-self:center;max-width:100%}
.article-media:not(.article-media--video):not(.article-media--cycle)>figcaption,
.essay-figure:not(.gallery):not(.gallery-row):not(.viz-embed):not(.collage):not(.essay-figure--portrait)>figcaption{display:table-caption;caption-side:bottom}
/* no left margin: a credit that wraps to its own line sits flush with
   the caption edge (the inline word space is separation enough) */
.essay-figure .cred,.essay-bleed .cred,.essay-figure--right .cred,.essay-figure--left .cred{font-family:var(--f-ui);font-size:13px;color:var(--un-grey);white-space:nowrap}
.essay-figure--inset{grid-column:4/10}
/* vertical photos in text-heavy flows: centered at phone width, like the
   portrait video player — floats starve when grafs run short */
.essay-figure--portrait{grid-column:4/10;width:min(100%,420px);justify-self:center}
/* content advisory: same quiet meta voice as Nina's journey */
.article-note{grid-column:4/10;margin:.5em calc(var(--unit)*-.55) 2em;
  font-family:var(--f-ui);font-size:13px;color:var(--un-grey)}
.essay-subhed{grid-column:4/10;margin:.5em calc(var(--unit)*-.55) .8em;font-family:var(--f-head);font-weight:700;
  font-size:clamp(20px,1.8vw,26px);letter-spacing:-.01em}
/* reading measure widened + rhythm tightened site-wide (blessed on the
   Scottie story, 2026-07-28): text elements extend .55 units past the
   reading column each side; grafs close at 1.55em */
.essay-graf{grid-column:4/10;margin:0 0 1.55em calc(var(--unit)*-.55);margin-right:calc(var(--unit)*-.55);font-family:var(--f-body);font-size:clamp(16px,1.25vw,19px);line-height:1.75;text-wrap:pretty}
/* video clips: square tile, drawn triangle, transcript accordion.
   Placeholder until edited mp4s arrive; scroll-autoplay wiring rides the
   audio opt-in pattern once real files exist */
.vclip{grid-column:4/10;margin:0 0 2.2em}
.vclip--wide{grid-column:2/12}
/* vertical short-form clips: phone aspect, small, text wraps around them */
.vclip--portrait{width:min(100%,400px);margin-left:auto;margin-right:auto}
.vclip--portrait .vclip-frame{aspect-ratio:9/16}
.essay-wrap .vclip--portrait{float:none;width:min(100%,400px);margin:1.6em auto 2em}
@media (max-width:860px){
}
.vclip-frame{position:relative;aspect-ratio:16/9;background:var(--surface);
  border:1px solid var(--cardline);display:flex;align-items:center;justify-content:center}
.vclip-btn{width:64px;height:64px;border:1px solid var(--cardline);display:flex;
  align-items:center;justify-content:center;background:var(--un-background)}
.vclip-btn i{width:0;height:0;border-style:solid;border-width:11px 0 11px 17px;
  border-color:transparent transparent transparent var(--un-text);margin-left:4px}
.vclip-badge{position:absolute;right:12px;bottom:10px;font-family:var(--f-ui);
  font-size:13px;color:var(--un-grey);font-variant-numeric:tabular-nums}
.vclip-media{width:100%;display:block}
.vclip-cap{margin-top:8px;font-family:var(--f-ui);font-size:13px;color:var(--un-grey)}
.vclip-tr{margin-top:6px}

/* cycling hero: stacked frames crossfade on a slow clock */
.article-media--cycle{display:block;grid-column:1/-1;width:auto;max-width:none;
  margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));justify-self:stretch}
.article-media--cycle figcaption{margin-inline:var(--gutter)}
.hero-cycle{position:relative;width:100%;aspect-ratio:2/1;max-height:78vh;overflow:hidden}
.hero-cycle .am-img{object-position:50% 18%}
.article-media--cycle{position:relative}
.cycle-pause{position:absolute;top:14px;right:14px;z-index:3;padding:5px 10px;
  border:1px solid rgba(255,255,255,.55);background:rgba(10,10,10,.55);color:#fff;
  font-family:var(--f-ui);font-size:13px;font-weight:600;cursor:pointer}
.cycle-pause:hover,.cycle-pause:focus-visible{background:rgba(10,10,10,.8)}
@media (max-width:860px){.cycle-pause{right:12px;top:12px}}
@media (max-width:860px){.hero-cycle{aspect-ratio:4/3}}
.hero-cycle .am-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1200ms ease}
.hero-cycle .am-img.is-on{opacity:1}

/* body links: 1px underline at offset, ink on hover — house link grammar */
.body-link{color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--un-grey)}
.body-link:hover,.body-link:focus-visible{text-decoration-color:var(--un-text)}
.body-link:focus-visible{outline:2px solid var(--cui,var(--c));outline-offset:2px}
/* breakout box: a bordered card in the reading column */
.essay-box{grid-column:4/10;margin:0 calc(var(--unit)*-.55) 1.55em;padding:22px 26px;border:1px solid var(--cardline);background:var(--surface)}
.essay-box__label{margin:0 0 .9em;font-family:var(--f-ui);font-size:16px;font-weight:600;color:var(--un-text)}
.essay-box p{margin:0 0 1.3em;font-family:var(--f-body);font-size:clamp(16px,1.25vw,19px);line-height:1.7;color:var(--un-text);text-wrap:pretty}
.essay-box p:last-child{margin-bottom:0}

/* ── the story within the story ({expand}) ──
   Option 2 (default): marquee card — 4px accent rule, display-serif title.
   Option 3: add .expand-box--photo for the photo-teaser band. */
.expand-box{grid-column:4/10;margin:0 calc(var(--unit)*-.55) 1.55em;
  background:var(--surface);border:1px solid var(--cardline)}
/* monochrome card: ink and hairlines only — the notebook boxes carry
   no accent (Allie call, Aug 6) */
.expand-box__h{margin:0;font-size:inherit;font-weight:inherit}
.expand-box__t{width:100%;text-align:left;display:flex;align-items:center;gap:18px;
  background:none;border:0;cursor:pointer;padding:20px 24px;color:var(--un-text)}
.expand-box__head{display:flex;flex-direction:column;gap:2px;min-width:0}
.expand-box__k{font-family:var(--f-ui);font-size:13px;font-weight:500;color:var(--un-grey)}
.expand-box__title{font-family:var(--f-disp);font-weight:600;
  font-size:clamp(24px,2.4vw,32px);line-height:1.08}
.expand-box__caret{margin-left:auto;color:var(--un-grey);font-size:15px}
.expand-box__t[aria-expanded="true"] .expand-box__caret{transform:rotate(180deg)}
.expand-box__t:hover .expand-box__k{color:var(--un-text)}
.expand-box__t:focus-visible{outline:2px solid var(--un-text);outline-offset:-2px}
.expand-box__teaser{display:none}
.expand-box__body{padding:2px 24px 24px}
/* until-found hiding keeps the element's box — drop the padding so the
   closed card hugs its header and the accent runs its full edge */
.expand-box__body[hidden]{padding:0}
.expand-box__body p{margin:0 0 1.5em;font-family:var(--f-body);
  font-size:clamp(16px,1.25vw,19px);line-height:1.75}
.expand-box__body .essay-figure,.expand-box__body .essay-bleed{
  display:block;margin:0 0 1.3em;max-width:none}
.expand-box__body .essay-bleed img{height:auto}
.expand-box__body img{width:100%;height:auto;display:block}
.expand-box__body figcaption{display:block;margin-top:8px;
  font-family:var(--f-body);font-size:15px;line-height:1.5}
.expand-box__body .promo{margin:0 0 .4em}

/* option 3: the collapsed face is a band of the lead photo */
.expand-box--photo{border-left-width:1px;background:none}
.expand-box--photo .expand-box__t{position:relative;display:block;padding:0;min-height:120px}
.expand-box--photo .expand-box__teaser{display:block;position:absolute;inset:0;
  background-size:cover;background-position:center 30%}
.expand-box--photo .expand-box__head{position:absolute;left:16px;bottom:14px;
  background:var(--panel);border:1px solid var(--cardline);padding:10px 16px}
.expand-box--photo .expand-box__caret{position:absolute;right:16px;bottom:18px;
  background:var(--panel);border:1px solid var(--cardline);padding:4px 9px;margin:0}
.expand-box--photo .expand-box__title{font-size:clamp(21px,2vw,26px)}
.expand-box--photo[data-open] .expand-box__teaser,
.expand-box--photo .expand-box__t[aria-expanded="true"] ~ * {}
.expand-box--photo .expand-box__t[aria-expanded="true"]{min-height:66px}
.expand-box--photo .expand-box__t[aria-expanded="true"] .expand-box__teaser{display:none}
.expand-box--photo .expand-box__t[aria-expanded="true"] .expand-box__head{position:static;
  background:none;border:0;padding:18px 24px 0}
.expand-box--photo .expand-box__t[aria-expanded="true"] .expand-box__caret{bottom:auto;top:22px}

@media (max-width:700px){
  .expand-box__t{padding:16px 18px}
  .expand-box__body{padding:14px 18px 18px}
  .expand-box__title{font-size:22px}
}


/* a right-wrapped figure: text flows around it on desktop, stacks on phones */
.essay-wrap{grid-column:4/10;margin:0 calc(var(--unit)*-.55) 1.55em}
.essay-wrap::after{content:"";display:block;clear:both}
.essay-wrap p{margin:0 0 1.55em;font-family:var(--f-body);font-size:clamp(16px,1.25vw,19px);line-height:1.75;text-wrap:pretty}
.essay-wrap p:last-child{margin-bottom:0}
.essay-figure--right{float:right;width:min(48%,400px);margin:.35em 0 18px 32px}
.essay-figure--left{float:left;width:min(48%,400px);margin:.35em 32px 18px 0}
/* the wrap slot is a portrait: any image crops to 3:4 so the text gets a
   tall edge to flow against (and a landscape placeholder can't shrink it) */
.essay-figure--right img,.essay-figure--left img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
/* a landscape photo in a wrap frame keeps its own shape instead of a 3:4 crop */
.essay-figure--right img.img--landscape,.essay-figure--left img.img--landscape{aspect-ratio:auto;object-fit:unset;height:auto}
.essay-figure--right figcaption,.essay-figure--left figcaption{margin-top:6px;font-family:var(--f-body);font-size:15px;line-height:1.5}
@media (max-width:820px){
  .essay-figure--right,.essay-figure--left{float:none;width:100%;margin:0 0 14px}
}

/* essay: full-bleed moment */
.essay-bleed{grid-column:1/-1;margin:calc(var(--unit) * .35) calc(-1 * var(--gutter)) calc(var(--unit) * 1.1)}
.essay-bleed img{width:100%;height:min(92vh,860px);object-fit:cover;display:block}
/* phones: the tall cover band would upscale-and-crop a landscape frame
   (see .ps-media) — bleeds run edge-to-edge at natural aspect instead */
@media (max-width:820px){
  .essay-bleed img{height:auto}
}
/* fit: full — the whole frame shows, natural aspect, no crop */
.essay-bleed--tall img{height:auto}
/* ambient loop rides the bleed geometry at its native aspect —
   the full frame shows, nothing cropped */
.essay-bleed video{width:100%;height:auto;display:block;background:#000}
.essay-bleed figcaption{margin:6px var(--gutter) 0;font-family:var(--f-body);font-size:15px;line-height:1.5}

/* essay: diptych */
.essay-pair{grid-column:2/12;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 calc(var(--unit) * 1.1)}
/* two-up at reading-column width, for pairs that shouldn't dominate */
.essay-pair--inset{grid-column:4/10}
.essay-pair img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
/* same-ratio pairs align without the 3:4 crop — show them whole */
.essay-pair--natural img{aspect-ratio:auto;object-fit:unset;height:auto}
.essay-pair figcaption{grid-column:1/-1;margin-top:6px;font-family:var(--f-body);font-size:15px;line-height:1.5}

/* essay: pull quote — purely typographic, no rules */
.essay-quote{margin:0 0 2.2em}
.essay-quote blockquote{
  hanging-punctuation:first;
  margin:0;padding:var(--inset-sm) 0;text-align:left;color:var(--un-text);
  font-family:var(--f-disp);font-weight:600;font-size:clamp(23px,2.3vw,34px);line-height:1.22;
}
.essay-quote cite{display:block;margin-top:1em;font-style:normal;
  font-family:var(--f-ui);font-size:14px;color:var(--un-grey)}



@media (max-width:1023.98px){
  .essay-pair{grid-template-columns:1fr 1fr}
  .essay-bleed{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter))}
}
/* phones: pairs stack — and stacked frames show their natural aspect
   rather than the side-by-side 3:4 crop */
@media (max-width:700px){
  .essay-pair{grid-template-columns:1fr}
  .essay-pair img{aspect-ratio:auto;object-fit:unset;height:auto}
}

/* audio clips inside the story body */
/* inline promo — points to a related story or tool */
.promo{grid-column:4/10;margin:0 0 2.2em}
.promo--about{margin:1.6em 0 0;max-width:560px}
.promo a{display:block;text-decoration:none;
  border:1px solid var(--cardline);border-left:3px solid var(--pc,var(--c));
  padding:18px 22px;transition:border-color .15s ease}
.promo a:hover,.promo a:focus-visible{border-color:var(--pc,var(--c));outline:none}
.promo__hed{display:block;font-family:var(--f-body);font-weight:600;font-size:clamp(18px,1.6vw,22px);line-height:1.25;color:var(--un-text)}
.promo a:hover .promo__hed{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.promo__note{display:block;margin-top:.4em;font-family:var(--f-body);font-size:15px;line-height:1.5;color:var(--un-grey)}

/* audio-led stories: the opt-in under the byline summons the dock */
.audio-optin{grid-column:4/10;margin:0 0 2.2em}
.audio-optin__btn{display:grid;grid-template-columns:64px 1fr;
  column-gap:18px;align-items:center;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--cardline);
  padding:0 18px 0 0;min-height:66px;cursor:pointer;transition:border-color .15s ease}
/* the tile bleeds to the card's own edges */
.audio-optin__btn i{position:relative;align-self:stretch;width:64px;
  background:var(--c);transition:filter .15s ease}
/* drawn play triangle — crisp everywhere, no emoji risk, optically centered */
.audio-optin__btn i::after{content:"";position:absolute;inset:0;margin:auto;
  width:0;height:0;border-style:solid;border-width:9px 0 9px 14px;
  border-color:transparent transparent transparent var(--un-black);transform:translateX(2px)}
.audio-optin__btn[aria-pressed="true"] i::after{width:14px;height:14px;background:var(--un-black);
  border:0;transform:none}
.audio-optin__btn b{font-family:var(--f-ui);font-size:15px;font-weight:600;color:var(--un-text)}
.audio-optin__btn:hover i{filter:brightness(.92)}
.audio-optin__btn:focus-visible{outline:2px solid var(--cui,var(--c));outline-offset:2px}

/* the listen bar — exists only once summoned, bows out at the footer */
body.has-dock{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.audio-dock{--dc:var(--dc-src,var(--c-people));--dcui:var(--dc);
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  display:flex;align-items:center;gap:20px;
  height:calc(64px + env(safe-area-inset-bottom,0px));
  padding:0 28px env(safe-area-inset-bottom,0px) 0;
  background:var(--un-background);border-top:1px solid var(--cardline);
  font-family:var(--f-ui);visibility:visible;
  transition:box-shadow .25s ease,border-color .25s ease,transform .3s ease,visibility 0s linear 0s}
.audio-dock.is-away{transform:translateY(120%);visibility:hidden;
  transition:box-shadow .25s ease,border-color .25s ease,transform .3s ease,visibility 0s linear .3s}
@media (prefers-reduced-motion:reduce){.audio-dock{transition:none}}
.audio-dock.is-live{background:var(--surface)}
.dock-btn{width:64px;align-self:stretch;flex:none;position:relative;
  /* the tile owns its full corner, including the safe-area strip */
  margin-bottom:calc(-1 * env(safe-area-inset-bottom,0px));
  border:0;background:var(--dc);padding:0;cursor:pointer;transition:filter .15s ease}
.dock-btn:hover{filter:brightness(.92)}
.dock-btn:focus-visible{outline:2px solid var(--dcui,var(--dc));outline-offset:2px}
/* drawn glyphs, same construction as the listen card */
.dock-btn i{position:absolute;inset:0;margin:auto;width:0;height:0;
  border-style:solid;border-width:7px 0 7px 11px;
  border-color:transparent transparent transparent var(--un-black);transform:translateX(2px)}
.audio-dock.is-live .dock-btn i{width:11px;height:13px;border-width:0 4px;
  border-color:var(--un-black);border-style:solid;transform:none;background:none}
.dock-info{min-width:0;flex:0 1 auto;max-width:44%}
.dock-label{display:block;font-size:14px;font-weight:600;line-height:1.3;color:var(--un-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-sub{display:block;margin-top:3px;font-size:13px;line-height:1.3;color:var(--un-grey);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-sub:empty{display:none}
.dock-label:empty{display:none}
.dock-track{position:relative;flex:1;height:2px;background:var(--cardline)}
.dock-fill{position:absolute;left:0;top:0;bottom:0;background:var(--dcui,var(--dc));width:0}
.dock-dot{position:absolute;top:50%;width:8px;height:8px;transform:translate(-50%,-50%);
  background:var(--un-background);border:1px solid var(--un-grey)}
.dock-dot.is-active{background:var(--dcui,var(--dc));border-color:var(--dcui,var(--dc))}
.dock-dot.is-done{background:var(--un-grey)}
@media (max-width:700px){
  .audio-dock{gap:16px;padding:0 20px env(safe-area-inset-bottom,0px) 0}
  .dock-btn{width:56px}
  .dock-info{max-width:58%}
}

.article > .audio-clip{grid-column:4/10}
.audio-clip{margin:0 0 2.2em;padding:2px 0}
.clip-row{display:flex;align-items:center;gap:12px}
/* the marker row is a real button — tap to play or pause the clip */
.clip-main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;
  background:none;border:0;padding:6px 0;margin:-6px 0;text-align:left;
  font:inherit;color:inherit;cursor:pointer}
.clip-main:focus-visible{outline:2px solid var(--cui,var(--c));outline-offset:4px}
.clip-main:disabled{cursor:default}
.clip-ind{flex:none;width:8px;height:8px;background:var(--c);transition:transform .15s ease}
.audio-clip.is-playing .clip-ind{transform:rotate(45deg)}
.audio-clip.is-unavailable .clip-ind{background:var(--un-grey)}
.clip-cap{flex:1;min-width:0;font-family:var(--f-ui);font-size:14px;font-weight:500;color:var(--un-grey)}
.clip-name{color:var(--un-text);font-weight:600}
.clip-main:hover .clip-cap{color:var(--un-text)}
.clip-main:disabled .clip-cap{color:var(--un-grey)}
.clip-time{font-variant-numeric:tabular-nums}
.audio-clip.is-playing .clip-cap{color:var(--un-text)}
.clip-tr{flex:none;background:none;border:0;padding:6px 0 6px 10px;cursor:pointer;
  font-family:var(--f-ui);font-size:14px;font-weight:500;color:var(--un-grey)}
.clip-tr::after{content:" ▾"}
.clip-tr[aria-expanded="true"]::after{content:" ▴"}
.clip-tr:hover,.clip-tr:focus-visible{color:var(--un-text)}
/* phones: a wrapping caption vs a centered button misaligns — the
   transcript control drops to its own line, indented to the caption text
   (8px marker + 12px gap) */
@media (max-width:700px){
  .clip-row{flex-wrap:wrap}
  .clip-main{flex:1 1 100%}
  .clip-tr{padding:2px 0 6px 20px}
}
.clip-tr:focus-visible{outline:2px solid var(--cui,var(--c));outline-offset:2px}
.clip-transcript{margin-top:6px;padding-bottom:4px}
.clip-transcript p{margin:0 0 .7em;font-family:var(--f-body);font-size:16px;line-height:1.65;color:var(--un-grey)}
.clip-transcript p:last-child{margin-bottom:0}
.audio-clip audio{display:none}
/* the hero's caption runs the full width of the lead photo (her call,
   2026-07-28); body-figure captions keep the 64ch measure */
.article-media figcaption{margin-top:8px;
  font-family:var(--f-body);font-size:15px;line-height:1.5}
.article-media .cred{font-family:var(--f-ui);font-size:13px;color:var(--un-grey);white-space:nowrap}
.article-body{grid-column:4/10}
.article .madebox{grid-column:4/10}
/* a made-note directly after a clip reads as its footnote — close the gap */
.audio-clip:has(+ .madebox){margin-bottom:.5em}
.article-body p{
  margin:0 0 1.5em;font-family:var(--f-body);
  font-size:clamp(16px,1.25vw,19px);line-height:1.75;
}
/* ── photoscroll: interstitial photo essay ──
   Each frame pins full-viewport; the grafs ride over it as panel cards.
   The card surface is the same --panel token the scrolly maps use. */
.ps-scene{grid-column:1/-1;position:relative;margin:0 calc(-1 * var(--gutter))}
.ps-media{position:sticky;top:0;height:100svh;overflow:hidden;margin:0}
.ps-media img{width:100%;height:100%;object-fit:cover;display:block}
/* phones: a landscape frame cover-filling a tall screen means a heavy
   upscale (blur) and a brutal crop. A 78vw-tall frame is the middle
   setting: ~15% zoom past natural, sharp, only the edges trimmed. */
@media (max-width:820px){
  .ps-scene{--psm:min(78vw,58svh)}
  .ps-media{height:var(--psm);background:var(--un-background)}
  .ps-scene .ps-cards{margin-top:calc(-1 * var(--psm));
    padding:calc(var(--psm) + 5svh) var(--gutter) 18svh;gap:34svh}
}
/* caption chip rides the pinned frame's lower-left corner */
.ps-cap{position:absolute;left:18px;bottom:18px;max-width:min(58ch,72vw);
  background:var(--panel);padding:8px 12px;
  font-family:var(--f-body);font-size:14px;line-height:1.5}
.ps-cap .cred{font-family:var(--f-ui);font-size:12px;color:var(--un-grey);white-space:nowrap}
.ps-cards{position:relative;z-index:1;margin-top:-100svh;
  padding:78svh var(--gutter) 48svh;
  display:flex;flex-direction:column;align-items:center;gap:58svh}
.ps-card{max-width:min(36em,88vw);background:var(--panel);
  border:1px solid var(--cardline);padding:22px 26px}
.ps-card p{margin:0;font-family:var(--f-body);
  font-size:clamp(16px,1.25vw,19px);line-height:1.75}
@media (max-width:640px){.ps-card{padding:16px 18px}}
@media (forced-colors:active){.ps-card{border-color:CanvasText}}
/* the essay credit line rides below the final frame, back in the column */
.ps-credit{grid-column:4/10;margin:1.4em 0 0;
  font-family:var(--f-body);font-size:clamp(16px,1.25vw,19px);line-height:1.75}

/* ── featured listen: the story's marquee element ── */
.audio-clip--feature{border:1px solid var(--cardline);border-left:4px solid var(--c);
  background:var(--surface);padding:20px 24px 18px;margin:0 0 2.6em}
.audio-clip--feature .clip-ind{width:14px;height:14px}
.audio-clip--feature .clip-cap{font-size:15px}
.audio-clip--feature .clip-name{display:block;font-family:var(--f-disp);font-weight:600;
  font-size:clamp(26px,2.8vw,36px);line-height:1.05;margin-bottom:4px;color:var(--un-text)}
.audio-clip--feature .clip-bar{margin-top:16px;height:4px;background:var(--hairline);
  cursor:pointer;position:relative}
.audio-clip--feature .clip-bar::before{content:"";position:absolute;inset:-8px 0}
.audio-clip--feature .clip-fill{position:absolute;top:0;bottom:0;left:0;width:0;background:var(--c)}
@media (forced-colors:active){
  .audio-clip--feature{border-color:CanvasText}
  .audio-clip--feature .clip-fill{background:Highlight;forced-color-adjust:none}
}

/* end matter leaves the reading column and joins the footer's container,
   so the thread and the footer share left/right edges instead of fighting */
.related{grid-column:1/-1;
  /* escape the article gutter to full body width, then pad back to the
     footer's exact content edges: max(28px, centered-1200px column) */
  margin:calc(var(--unit) * 1.4) calc(-1 * var(--gutter)) 0;
  padding:0 max(28px, calc((100% - 1200px)/2 + var(--gutter) + 28px))}
@media (max-width:820px){
  .related{padding:0 max(20px, calc((100% - 1200px)/2 + var(--gutter) + 20px))}
}
.related-item{
  display:flex;gap:2rem;align-items:baseline;text-decoration:none;color:inherit;
  padding:.55em 0;
}
.related-city{flex:0 0 10.5rem;min-width:0;display:flex;align-items:center;gap:10px;
  font-family:var(--f-ui);font-size:14px;font-weight:500;color:var(--un-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.related-city::before{content:"";flex:none;width:8px;height:8px;background:var(--chip)}
.related-hed{font-family:var(--f-disp);font-weight:600;font-size:clamp(18px,1.6vw,24px);line-height:1.1}
.related-item:hover .related-hed,.related-item:focus-visible .related-hed{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.related-item:focus-visible{outline:2px solid var(--cui,var(--c));outline-offset:2px}
@media (max-width:639.98px){
  /* narrow screens: state above the hed instead of a squeezed column */
  .related-item{flex-direction:column;align-items:flex-start;gap:.3rem;padding:.8em 0}
  .related-city{flex:none;white-space:normal}
}

@media (max-width:1023.98px){
  /* block flow on small screens — no grid for any engine to misread */
  .article{display:block}
  .article > *{max-width:none}
  .article-media:not(.article-media--cycle){margin-left:0;margin-right:0}
}

/* ── Reusable disclosure box — "How we made this" ────────────────── */
/* an aside, not a box: the accent rule carries the weight
   (Allie call, Aug 5 — no card) */
.madebox{margin:0 0 2.2em;padding:2px 0 2px 20px;border-left:3px solid var(--cui,var(--c));max-width:64ch}
/* voices page: the profile flow is a bordered container — don't let the
   made box ride its hairline */
.pflow+.madebox{margin-top:2.4em}
.madebox__t{background:none;border:0;padding:10px 0;cursor:pointer;
  font-family:var(--f-ui);font-size:15px;font-weight:600;color:var(--un-text)}
.madebox__t::after{content:" ▾"}
.madebox__t[aria-expanded="true"]::after{content:" ▴"}
.madebox__t:hover,.madebox__t:focus-visible{color:var(--un-text)}
.madebox__t:focus-visible{outline:2px solid var(--cui,var(--c));outline-offset:2px}
.madebox__body{padding-top:10px}
.madebox__body p{color:var(--un-text);margin:0 0 1em;font-family:var(--f-body);font-size:16px;line-height:1.65}
.madebox__body p:last-child{margin-bottom:0}


/* ── Breakpoints ─────────────────────────────────────────────────── */
@media (max-width:1023.98px){
  :root{--gutter:calc(var(--unit) * 1.5)}
}
@media (max-width:639.98px){
  :root{--gutter:var(--unit)}
  .article{grid-template-columns:1fr;gap:0}
}

/* ── Light-mode accent contrast ──────────────────────────────────
   Chapter hues are tuned for dark ground; thin marks (progress fill,
   active squares, focus rings) get nudged toward ink on paper.
   Browsers without color-mix() fall back to the pure hue. */
:root[data-theme="light"] .article{--cui:color-mix(in srgb,var(--c) 58%,#262420)}
:root[data-theme="light"] .audio-dock{--dcui:color-mix(in srgb,var(--dc) 58%,#262420)}

/* screen-reader-only live region */
.sr-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* cross-page navigations cross-fade where the platform supports it */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ── Immersive story format (format: immersive) ─────────────────────
   Both themes are first-class (no theme forcing); films, stills and
   their gradients stay cinematic dark in either theme, like the site
   chrome. Rides the SAME 12-column article grid
   as every story page: text in 4/10, figures in 2/12, films and stills
   full-bleed via the .essay-bleed negative-gutter technique. */
/* the immersive page opens like every story: eyebrow, hed, dek, metabar
   in the article grid; the cover is a full-viewport still after them */
.imm-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* windows shorter than 16:9 (most laptops) crop the film top AND bottom —
   anchoring the crop to the frame's bottom keeps the baked captions on
   screen; only sky comes off the top. Taller viewports crop sides only. */
@media (min-aspect-ratio: 16/9){
  .imm-film video{object-position:50% 100%}
}
/* caption for a full-bleed still sits snug under the photo at the page
   edge, mirroring .essay-bleed captions; the still ahead of it drops its
   bottom margin so the caption, not dead air, closes the image */
.imm-fig.imm-covercap{grid-column:1/-1;margin:0 0 calc(var(--unit) * 1.1)}
.imm-still:has(+ .imm-fig.imm-covercap){margin-bottom:0}
.imm-covercap figcaption{font-family:var(--f-body);font-size:15px;line-height:1.5}
.imm-covercap .cred{font-family:var(--f-ui);font-size:13px;color:var(--un-grey);white-space:nowrap}
/* hangs off the body-copy left edge (same .55-unit outdent as grafs) —
   nothing else on the site centres, so neither does this */
.imm-optin{grid-column:4/10;display:flex;justify-content:flex-start;margin:0 calc(var(--unit)*-.55);padding:clamp(1rem,2.5vh,1.75rem) 0}
/* the flex wrapper shrink-wraps the card into a squat box — stretch it
   so the button is the same long bar as the audio-story opt-in */
.imm-optin .audio-optin{flex:1;margin:0}
/* text passes: the site's reading column, with a vertical beat per pass */
.imm-pass{grid-column:4/10}
/* short bridge text between films: centred in a taller beat so the pause
   reads as intentional; margins stay symmetric around the centred block */
.imm-pass--beat{min-height:44svh;display:grid;align-content:center;padding:calc(var(--unit)*.5) 0}
.imm-pass--beat .imm-card:last-child{margin-bottom:0}
.imm-card{margin:0 calc(var(--unit)*-.55) 1.55em;font-family:var(--f-body);
  font-size:clamp(16px,1.25vw,19px);line-height:1.75;color:var(--un-text);text-wrap:pretty}
.imm-subhed{font-family:var(--f-head);font-weight:700;font-size:clamp(20px,1.8vw,26px);
  letter-spacing:-.01em;margin:.5em calc(var(--unit)*-.55) .8em}
/* figures use the story figure columns */
.imm-fig{grid-column:2/12;margin:calc(var(--unit) * .35) 0 calc(var(--unit) * 1.1)}
.imm-fig img{width:100%;height:auto;display:block}
.imm-fig figcaption{margin-top:6px;font-family:var(--f-body);font-size:15px;line-height:1.5}
.imm-fig .cred{font-family:var(--f-ui);font-size:13px;color:var(--un-grey);white-space:nowrap}
.imm-fig--sm{grid-column:4/10}
/* toggle shares the body copy's left edge (same outdent as .imm-card);
   the button's row-context left padding is dropped here */
.imm-tr{grid-column:4/10;margin:0 calc(var(--unit) * -.55);padding:.5rem 0 calc(var(--unit) * .85)}
.imm-tr .clip-tr{padding-left:0}
/* full-bleed media moments */
.imm-duo{grid-column:1/-1;margin:calc(var(--unit) * .35) calc(-1 * var(--gutter)) calc(var(--unit) * .85);
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:100svh auto}
.imm-duo .imm-still,.imm-duo .imm-film{grid-column:auto;height:100%;min-height:0;margin:0}
/* caption and transcript share one row under the media —
   caption left under the still, transcript right under the film */
.imm-duo .imm-covercap{grid-column:1;grid-row:2;margin:12px 0 0 var(--gutter)}
.imm-duo .imm-tr{grid-column:2;grid-row:2;justify-self:start;margin:0;padding:12px 0 0 var(--gutter)}
@media (max-width:900px){
  .imm-duo{grid-template-columns:1fr;grid-template-rows:62svh 62svh auto auto}
  .imm-duo .imm-covercap{grid-column:1;grid-row:3;margin:12px var(--gutter) 0}
  .imm-duo .imm-tr{grid-column:1;grid-row:4;justify-self:start;padding:8px var(--gutter) 0}
}
.imm-still{grid-column:1/-1;margin:calc(var(--unit) * .35) calc(-1 * var(--gutter)) calc(var(--unit) * 1.1);
  /* .imm-coverstill keeps this geometry — it IS an imm-still */
  position:relative;height:100svh;overflow:hidden}
.imm-still img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.imm-film{grid-column:1/-1;margin:calc(var(--unit) * .35) calc(-1 * var(--gutter)) 0;position:relative;
  height:100svh;overflow:hidden;background:#000}
.imm-film .fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.imm-film.is-dead video{display:none}
.imm-film.is-dead .fallback{display:block}
.imm-film-cred{font-family:var(--f-ui);font-size:13px;color:var(--un-grey);
  padding-left:14px;white-space:nowrap}
.imm-tr .clip-tr + .imm-film-cred{border-left:1px solid var(--hairline)}
/* stacked films touch, like the duo panes */
.imm-film + .imm-film{margin-top:0}
.imm-film .vclip-badge{position:absolute;z-index:2;right:14px;bottom:12px}
/* no native chrome on films — quiet corner pill for sound, and a paused
   chip when the reader taps the film. Both ride the cinematic dark
   regardless of theme, like the film gradients. */
/* the active film's control is FIXED to the viewport — per-film pills
   get buried when sheets slide over the footage */
.imm-dock{position:fixed;right:16px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:60;
  display:none;padding:8px 14px;cursor:pointer;
  font-family:var(--f-ui);font-size:13px;font-weight:600;color:#fff;
  background:rgba(0,0,0,.62);border:0}
.imm-dock.is-on{display:block}
.imm-dock:hover{background:rgba(0,0,0,.8)}
.imm-dock:focus-visible{outline:2px solid #fff;outline-offset:3px}
.imm-film video:focus-visible{outline:2px solid #fff;outline-offset:3px}
.imm-paused,.imm-replay,.imm-idle{position:absolute;z-index:3;left:16px;bottom:14px;display:none;padding:7px 12px;
  font-family:var(--f-ui);font-size:13px;font-weight:500;color:#fff;
  background:rgba(0,0,0,.55);border:0}
.imm-film.is-usrpaused .imm-paused{display:block}
.imm-flash{position:absolute;z-index:3;left:16px;bottom:14px;display:none;padding:7px 12px;
  font-family:var(--f-ui);font-size:13px;font-weight:500;color:#fff;background:rgba(0,0,0,.55)}
.imm-flash.is-on{display:block}
.imm-film.is-usrpaused .imm-flash{display:none}
.imm-film.is-ended:not(.is-usrpaused) .imm-replay{display:block}
.imm-film.is-idle:not(.is-ended):not(.is-usrpaused) .imm-idle{display:block}
.imm-film.is-dead .imm-paused,.imm-film.is-dead .imm-replay,
.imm-film.is-dead .imm-idle{display:none}
.imm-wrap{grid-column:4/10}

/* ── row gallery ({gallery … | style: row}) — related frames side by side,
   equal height, natural aspect, one shared caption ── */
.gallery-row{grid-column:2/12}
.gallery-row .row-strip{display:flex;gap:10px}
.gallery-row .row-strip img{display:block;min-width:0;width:0;height:auto}
@media (max-width:700px){
  .gallery-row .row-strip{display:block}
  .gallery-row .row-strip img{width:100%;margin:0 0 8px}
}

/* ── collage gallery ({gallery … | style: collage}) — magazine boards
   as click-through slides: anchor photo, overlapping snapshot, tilted
   framed print. Flatters courtesy scans by treating them as artifacts,
   not art. Rides the standard gallery chrome. ─────────────────────── */
.collage{grid-column:2/12;max-width:1100px;width:100%;justify-self:center}
.gallery .gal-img.collage-board{aspect-ratio:9/5;object-fit:unset;height:auto}
.collage-board{position:relative;margin:0}
.collage-board .cg{position:absolute;object-fit:cover;box-shadow:0 14px 34px #00000024}
.collage-board .cg-a{left:6%;top:9%;width:50%;height:auto;max-height:none;aspect-ratio:4/3;z-index:1}
.collage-board .cg-b{left:47%;top:30%;width:25%;height:auto;max-height:none;aspect-ratio:3/4;z-index:3}
.collage-board .cg-c{right:5%;top:3%;width:27%;height:auto;max-height:none;aspect-ratio:4/5;transform:rotate(5deg);z-index:2;
  border:9px solid var(--surface);box-shadow:0 18px 40px #00000030}
@media (max-width:700px){
  .gallery .gal-img.collage-board{aspect-ratio:auto}
  .collage-board .cg{position:static;display:block;width:100%;margin:0 0 10px;transform:none;aspect-ratio:auto}
}
@media (forced-colors:active){ .collage-board .cg-c{border-color:CanvasText} }

/* ── scrolly scenes (Snow Fall pattern, blessed 2026-07-30) ─────────
   A scene spans the full bleed; its film/still pins at the top of the
   viewport while the following sheet of text slides up over it. Each
   scene isolates its stacking, so the NEXT scene's media rides over
   the previous sheet as it arrives. Duos flow (imm-scene--flow). */
.imm-scene{grid-column:1/-1;margin:0 calc(-1 * var(--gutter));position:relative;isolation:isolate}
.imm-scene > .imm-film,.imm-scene > .imm-still{position:sticky;top:0;margin:0;z-index:1}
.imm-scene > .imm-film + .imm-film{margin-top:0}
.imm-scene > .imm-duo{margin:0}
/* the sheet re-declares the article's 12-column grid so every child
   keeps its established column (passes 4/10, figures 2/12, …) */
.imm-sheet{position:relative;z-index:2;background:var(--un-background);
  display:grid;grid-template-columns:repeat(12,1fr);gap:0 calc(var(--unit) * .9);
  padding:calc(var(--unit) * .85) var(--gutter) calc(var(--unit) * .35)}
.imm-sheet > *{min-width:0}
.imm-sheet > .essay-wrap,.imm-sheet > .imm-wrap{grid-column:4/10}
/* lead sheet (before the first scene) is itself a full-bleed grid item */
.article > .imm-sheet--lead,.imm-sheet--lead{grid-column:1/-1;margin:0 calc(-1 * var(--gutter))}
/* small screens: sheets collapse with the article — block flow, no
   columns, no reading-column outdents (must follow the base rules) */
@media (max-width:1023.98px){
  .imm-sheet{display:block;padding:calc(var(--unit) * .5) var(--gutter) calc(var(--unit) * .25)}
  .imm-card,.imm-subhed{margin-left:0;margin-right:0}
  .imm-pass--beat{display:block;min-height:0;padding:calc(var(--unit) * .35) 0}
  .imm-tr{margin:0}
}