/* Facing Stalingrad. Colours and typefaces follow the original site
   (Roboto Slab for text and headings, Roboto for testimony, Roboto Condensed
   for navigation and highlights); sizes are larger and the layout is simpler. */

:root {
  color-scheme: light;
  /* every grey is a warm grey (a touch of red and yellow), never neutral */
  --red: #d52b1e;
  --red-strong: #c4271b;    /* behind white text of 18px or less (menu, current grid name, button hover): Lc 81, where --red gives 77 */
  --red-dark: #a81010;
  --chip-red: #f8dcd9;
  --ink: #3e3b38;           /* body text, and the dark bands, menu and footer */
  --black: #12100e;         /* the darkest tone: headings and testimony */
  --muted: #645f5a;         /* captions on the light bands: 4.5:1 or better on every light band (APCA Lc 71 at 14.4px) */
  --rule: #dcd8d2;          /* hairlines */
  --paper: #faf9f6;
  --band: #efede8;
  --band-dark: #e3e0da;
  --bright: #fffdf9;        /* the lightest tone: active menu item, buttons, headings on dark */
  --on-dark: #f1eee9;       /* body text on the dark grey */
  --on-dark-muted: #dcd8d2; /* captions on the dark grey: APCA Lc 78 at 14.4px */
  --backdrop: #17140f;      /* the deepest tone: mixed into dark strips */
  --tile: #888;             /* behind the grid photographs while they load: the average of their own greys */
  --shade: rgb(23 20 15 / 0.85);        /* the dark overlay behind the menu and the names on the grid */
  --shade-deep: rgb(23 20 15 / 0.95);   /* the menu dropdown */
  --shadow: rgb(23 20 15 / 0.25);       /* drop shadows */
  --wash: #f8dcd9;          /* a pale warm pink, multiplied over the photographs on the interview grid on hover */
  --veil: rgb(255 253 249 / 0.08);      /* a faint light wash behind photographs while they load */
  --dark: #34312e;         /* the dark bands, menu, footer and dark text pages */
  --mid: #5e5a56;           /* the lighter step of the dark grey: hover in the menu and on the grid name bars, and the home page teasers */
  --measure: 64ch;
  --wide: 68rem;
  --gutter: 1.25rem;
  --edge: calc((100% - min(100%, var(--wide) + var(--gutter) * 2)) / 2 + var(--gutter));   /* left or right edge of the wide content, as a margin */
  --edge-out: max(0.75rem, calc(var(--edge) - 6rem));   /* side photos hang this far beyond the wide content, never out to the window edge */
  --slab: "Roboto Slab", Georgia, serif;
  --sans: "Roboto", Arial, sans-serif;
  --condensed: "Roboto Condensed", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { --text-size: clamp(1.2rem, 1.03rem + 0.3vw, 1.25rem); --bar-room: 4rem; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--bar-room); }   /* room kept above an anchor the page scrolls to, for the menu bar */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 300 var(--text-size)/1.65 var(--slab);   /* the reading size: 19.2px on a phone, growing to 20px */
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--red-dark); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
h1, h2, .home-title { margin: 0; color: var(--black); font: 400 clamp(2rem, 1.6rem + 1.6vw, 2.6rem)/1.15 "Ampersand", var(--slab); }
h2 { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.9rem); }   /* below h1 in size as well as in rank */   /* "Ampersand" only supplies the & (an italic serif, as on the original) */
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, .home-title, .pullquote p, .lead, .home-intro p { text-wrap: balance; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; left: var(--gutter); top: 0.5rem; z-index: 30; padding: 0.5rem 1rem; background: var(--bright); color: var(--black); }
.skip-link:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* hidden, not parked off-screen where overscroll can reveal it */

/* Header and navigation */
.topbar { position: sticky; top: 0; z-index: 10; background: var(--shade); backdrop-filter: blur(6px); box-shadow: 0 2px 10px var(--shadow); font: 400 1.125rem/1 var(--condensed); letter-spacing: 0.015em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }   /* light text on dark: grayscale smoothing keeps it from looking bolder, as on the original */
.topbar { transition: transform 0.25s ease; }
.topbar.is-hidden { transform: translateY(-100%); }
.topbar ul { margin: 0; padding: 0; list-style: none; }
.topbar > ul { display: flex; flex-wrap: wrap; justify-content: center; }
.topbar li { position: relative; }
.topbar a { display: block; padding: 0.8rem 1.1rem; color: var(--bright); text-decoration: none; }
.topbar a:hover { background: var(--mid); color: var(--bright); }
.topbar a[aria-current], .topbar a.is-section { background: var(--red-strong); color: var(--bright); }
.topbar a:focus-visible { outline-color: var(--bright); outline-offset: -3px; }
.topbar .has-menu { position: static; }      /* the dropdown is set against the whole bar, centred under it */
.flyout { visibility: hidden; opacity: 0; transition: opacity 0.15s ease-in 0.3s, transform 0.15s ease-in 0.3s, visibility 0s linear 0.45s; position: absolute; left: 50%; top: 100%; transform: translateX(-50%) translateY(-0.5rem); width: min(40rem, 100vw); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0.25rem 0; background: var(--shade-deep); box-shadow: 0 6px 14px var(--shadow); }
.flyout li { display: flex; }   /* a grid row is as tall as its tallest name, so each link fills its cell: no gaps between rows or under a shorter column that a tap or the pointer could fall into */
.flyout li > a { flex: 1; }
@media (min-width: 56rem) { .flyout { width: min(68rem, 100vw); grid-template-columns: repeat(3, minmax(0, 1fr)); } }   /* three columns; the names read across each row, left to right, as the grid on the pages does */
.has-menu:hover > .flyout, .has-menu:has(:focus-visible) > .flyout { visibility: visible; opacity: 1; transform: translateX(-50%); transition: opacity 0.18s ease-out, transform 0.18s ease-out; }   /* drops in from just above at once, and on leaving waits a moment before lifting away, so the pointer can wander back */
.has-menu.is-closed > .flyout, .topbar.is-hidden .has-menu > .flyout { visibility: hidden; opacity: 0; transition: none; }   /* a click, or the bar sliding away, shuts it at once */
.has-menu.is-open > .flyout { visibility: visible; opacity: 1; transform: translateX(-50%); transition: none; }   /* opened by the first tap on a touch screen */
.flyout a { display: flex; align-items: center; gap: 0.85rem; padding: 0.4rem 1.25rem 0.4rem 0.5rem; font-size: 1.125rem; font-weight: 400; line-height: 1.3; }
.flyout img { flex: none; width: 3.75rem; height: 2.7rem; object-fit: cover; background: var(--veil); }
.logo { display: block; width: min(19rem, 70vw); margin: 2.5rem auto 2.75rem; }
.logo img { display: block; width: 100%; }

/* Photographs */
.figure { margin: 0; }
.figure img { display: block; width: 100%; background: var(--band); }
.figure figcaption { margin-top: 0.5rem; color: var(--muted); font: 350 0.9rem/1.4 var(--sans); }
.figure.landscape img, .figure.hero img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 30%; }
.figure.hero img { max-height: 85vh; }

/* Interviews */
.interview-head { max-width: var(--wide); margin: 0 auto; padding: 2.5rem var(--gutter) 3rem; }
.interview-head h1 { margin-bottom: 1.5rem; }
.intro { max-width: var(--measure); }   /* a short introduction is a single column at the reading width */
.intro.in-columns { max-width: none; columns: 2 22rem; column-gap: 3rem; }   /* a long one is set in two */
.intro p { margin-bottom: 1em; }
.transcript { padding-bottom: 3rem; }
.run > * { margin-left: auto; margin-right: auto; }
.narrator { max-width: calc(var(--measure) + var(--gutter) * 2); margin-top: 2rem; margin-bottom: 1.5rem; padding: 0 var(--gutter); }
.turn { max-width: calc(var(--measure) + var(--gutter) * 2); margin-top: 1.5rem; margin-bottom: 1.5rem; padding: 0 var(--gutter); }
.details { max-width: calc(var(--measure) + var(--gutter) * 2); margin: 1.5rem auto; padding: 0 var(--gutter); }
.details summary { cursor: pointer; font: 400 1rem/1.4 var(--condensed); letter-spacing: 0.02em; color: var(--red-dark); }
.details summary small { color: var(--ink); font-size: 0.9em; }
.details .testimony, .is-verse .testimony { padding-left: 1.25rem; border-left: 3px solid var(--band-dark); }   /* a letter or poem read out is set apart by a rule */
.details .testimony { margin-top: 1rem; }
.testimony h2 { margin: 0 0 0.75rem; font: 500 1.2rem/1.3 var(--condensed); color: var(--black); }
.narrator strong { font-weight: 500; color: var(--black); }
.narrator.is-signature { text-align: center; }
.testimony { position: relative; margin: 0; color: var(--black); font: 300 var(--text-size)/1.65 var(--sans); }
.has-mark .testimony::before { content: "\201C"; position: absolute; left: -3rem; top: -0.35rem; color: var(--red); font: 700 4rem/1 var(--slab); }
.testimony p { margin-bottom: 1em; }
.is-verse .testimony { margin-left: 1rem; font-style: italic; }   /* unlike the letter, always open */
@media (min-width: 50.01rem) {   /* beside a left float the quote mark sits at the start of the text, between the photo and the words */
  .run > .figure.side-left + .has-mark .testimony::before, .run > .figure.side-left + .turn:not(.has-mark) + .has-mark .testimony::before { position: relative; top: -0.35rem; float: left; width: 0; height: 0; left: auto; text-indent: -2.2rem; }
  .run > .figure.side-left:has(+ .has-mark), .run > .figure.side-left:has(+ .turn:not(.has-mark) + .has-mark) { margin-right: 3rem; }
}
.speaker { display: inline-block; margin: 0 0 0.75rem; padding: 0.35em 0.7em; border-radius: 0.3rem; background: var(--band-dark); color: var(--dark); font: 400 0.9rem/1 var(--condensed); letter-spacing: 0.04em; }
.voice-1 .speaker { background: var(--chip-red); color: var(--red-dark); }
.pullquote { padding: 2.25rem var(--gutter); background: var(--band); }   /* no margin of its own: the padding is the space around the words, and the text or photo next to it brings its own */
.pullquote > div { max-width: var(--wide); margin: 0 auto; }
.pullquote p { margin: 0; color: var(--red); font: 400 clamp(1.8rem, 1.4rem + 1.6vw, 2.25rem)/1.2 var(--condensed); }
.run > .figure, .prose > .figure { margin-top: 2rem; margin-bottom: 2rem; }
.run > .figure.landscape, .prose > .figure.landscape { max-width: none; padding: 0; }
.run > .figure.landscape.breakout, .prose > .figure.landscape.breakout { max-width: calc(var(--wide) + var(--gutter) * 2); padding: 0 var(--gutter); }   /* content width: the same as the text inside a pullquote */
.figure.landscape figcaption { max-width: calc(var(--wide) + var(--gutter) * 2); margin-left: auto; margin-right: auto; padding: 0 var(--gutter); }
.run > .figure.portrait, .prose > .figure.portrait { max-width: calc(38rem + var(--gutter) * 2); padding: 0 var(--gutter); }
/* Offset: a narrower photo pushed to the left or right edge of the wide content */
.run > .figure.offset { width: min(calc(100% - var(--gutter) * 2), 44rem, 68%); max-width: none; padding: 0; }
.run > .figure.offset-left { margin-left: var(--edge); margin-right: auto; }
.run > .figure.offset-right { margin-left: auto; margin-right: var(--edge); }
.figure.offset figcaption, .run > .figure.side-left figcaption, .run > .figure.side-right figcaption { max-width: none; margin: 0.5rem 0 0; padding: 0; }
@media (max-width: 40rem) {
  .run > .figure.offset { width: calc(100% - var(--gutter) * 2); margin-left: auto; margin-right: auto; }   /* on a phone there is no room to offset */
}
/* The transcript is a stack of runs: light, or tinted. They share one padding, so the space above and below is equal */
.run { display: flow-root; padding: 1rem 0; }
.run.is-tinted { background: var(--band); }
.run.no-pad-top { padding-top: 0; }
.run.no-pad-bottom { padding-bottom: 0; }
.run.is-tinted .pullquote { background: none; }
.run.is-tinted .pullquote.is-inverse { background: var(--paper); }     /* in the middle of a tint, a pullquote is set lighter */
.run > .flush-top { margin-top: 0; }                          /* a pullquote and a full-width photo meet with no gap */
.run > .flush-bottom { margin-bottom: 0; }
.run:not(.is-tinted) > .figure.flush-bottom:has(+ .pullquote) { background: var(--band); }   /* a caption between the photo and a pullquote belongs to the band, not to a light strip of its own */
.run > .figure.landscape:not(.breakout):not(.offset):not(.side-left):not(.side-right):last-child { margin-bottom: 0; }   /* a captioned photo at the end of a run keeps the run's own padding below the caption */

/* Portraits set beside the text: they float to the left or right of the reading column and the text wraps around them */
.run > .figure.side-left, .run > .figure.side-right { width: clamp(12rem, 4rem + 11vw, 17rem); max-width: none; margin-top: 0.4rem; margin-bottom: 1rem; padding: 0; }
.run > .figure.side-left { float: left; margin-left: var(--edge-out); margin-right: 1.75rem; }
.run > .figure.side-right { float: right; margin-right: var(--edge-out); margin-left: 1.75rem; }
.run > .pullquote, .run > .figure.landscape { clear: both; }
.run > .pullquote + .figure.side-left, .run > .pullquote + .figure.side-right { margin-top: 1.5rem; }   /* a photo beside the text keeps clear of the band above it, as the text does */
.run > .figure.side-large { width: clamp(16rem, 6rem + 22vw, 24rem); }
/* Landscape photos beside the text are wider than portraits */
.run > .figure.landscape.side-left, .run > .figure.landscape.side-right { width: clamp(15rem, 3rem + 17vw, 20rem); }
.run > .figure.landscape.side-large { width: clamp(20rem, 2rem + 40vw, 31rem); }
.run > .figure.landscape.side-xlarge { width: clamp(22rem, 2rem + 52vw, 38rem); }
/* A side portrait at the edge of a run keeps clear of it, level with the text beside it */
.run > .figure.side-left:first-child, .run > .figure.side-right:first-child { margin-top: 2rem; }
.run > .figure.side-left:last-child, .run > .figure.side-right:last-child { margin-bottom: 2.5rem; }
@media (max-width: 48rem) {   /* from a tablet down there is no room beside the text: portraits sit centred, landscape photos at content width */
  .run > .figure.side-left, .run > .figure.side-right { float: none; width: min(calc(100% - var(--gutter) * 2), 26rem); max-width: none; margin: 2rem auto; }
  .run > .figure.landscape.side-left, .run > .figure.landscape.side-right, .run > .figure.landscape.side-large, .run > .figure.landscape.side-xlarge { float: none; width: calc(100% - var(--gutter) * 2); margin: 2rem auto; }
}
.to-top { margin: 2rem auto 0; text-align: center; font: 400 1rem/1 var(--condensed); }
.to-top a { display: inline-block; padding: 0.75rem 1rem; text-decoration: none; }   /* a comfortable tap target */

/* Interview grid */
.interview-grid { padding: 3rem var(--gutter) 4rem; background: var(--band); scroll-margin-top: calc(var(--bar-room) * -1); }   /* the Interviews link jumps here, scrolling down, so the menu bar has slid away (site.js hides it on arriving at an anchor): cancel the room reserved for it, or a strip of the page above shows over the band */
.interview-grid h2 { margin-bottom: 1.75rem; text-align: center; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; max-width: 80rem; margin: 0 auto; padding: 0; list-style: none; }
.grid a { position: relative; display: block; aspect-ratio: 570 / 410; overflow: hidden; background: var(--tile); color: var(--bright); text-decoration: none; }
.grid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s; }
.grid a::before { content: ""; position: absolute; inset: 0; background: var(--wash); mix-blend-mode: multiply; opacity: 0; transition: opacity 0.2s; }   /* a warm tint over the black and white photograph */
.grid a:hover::before, .grid a:focus-visible::before { opacity: 1; }
.grid a:focus-visible { outline: 3px solid transparent; outline-offset: -3px; }   /* neighbouring cards would paint over an outside ring; the visible ring is drawn inside, and the transparent outline still shows in forced-colours mode */
.grid a:focus-visible::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--red), inset 0 0 0 6px var(--bright); pointer-events: none; }
.grid .name { position: absolute; inset: auto 0 0; padding: 0.55rem 0.6rem; background: var(--shade); font: 400 1.05rem/1.2 var(--condensed); text-align: center; }
.grid a:hover .name { background: var(--mid); }
.grid a[aria-current] .name { background: var(--red-strong); color: var(--bright); }
@media (max-width: 44.99rem) {   /* two columns: the name moves from over the photograph to below it, so it can be larger, can run to several lines, and does not cover the face */
  .grid li { display: flex; }
  .grid a { flex: 1; display: flex; flex-direction: column; aspect-ratio: auto; }
  .grid img { height: auto; aspect-ratio: 570 / 410; }
  .grid .name { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.6rem 0.5rem; font-size: 1.15rem; line-height: 1.25; }   /* a row is as tall as its longest name; a short one sits in the middle of its bar */
}
@media (min-width: 45rem) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .grid { grid-template-columns: repeat(4, 1fr); } .grid .name { font-size: 1.2rem; } }

/* Home */
.home-intro { width: min(58rem, 100% - var(--gutter) * 2); margin: 0 auto 3rem; padding-top: 2.25rem; border-top: 1px solid var(--rule); text-align: center; }
.home-intro .home-title { margin-bottom: 1.25rem; }
.home-intro p:not(.home-title) { margin: 0; }
.teaser { display: grid; gap: 2rem; align-items: center; padding: 3rem max(var(--gutter), calc((100% - var(--wide)) / 2)); background: var(--mid); color: var(--on-dark); }
.teaser.is-dark { background: var(--dark); }
.teaser h2 { margin-bottom: 1rem; color: var(--bright); }
.teaser a { color: inherit; }
.teaser :focus-visible { outline-color: var(--bright); }
.teaser-image img { display: block; width: 100%; background: var(--veil); }
.button { display: inline-block; margin-top: 0.5rem; padding: 0.6rem 1.3rem; border-radius: 0.3rem; background: var(--bright); color: var(--dark) !important; font: 500 1rem/1 var(--condensed); text-decoration: none; }
.button:hover { background: var(--red-strong); color: var(--bright) !important; }
@media (min-width: 52rem) {
  .teaser { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .teaser.is-dark .teaser-image { order: -1; }
}

/* Essays (About and other text pages) */
.essay-head { padding: 2.5rem var(--gutter) 1.5rem; text-align: center; }
.essay-head h1::after { content: ""; display: block; width: 3rem; margin: 1rem auto 0; border-top: 3px solid var(--red); }
.prose { padding-bottom: 4rem; }
.prose > * { max-width: calc(var(--measure) + var(--gutter) * 2); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.prose > .lead, .home-intro p:not(.home-title) { color: var(--black); font-size: 1.2em; line-height: 1.45; text-align: center; }   /* the home intro reads like the lead paragraph of the text pages */
.prose > .lead { max-width: calc(var(--measure) + var(--gutter) * 2); margin-bottom: 1.5rem; }
.prose > .lead p { margin: 0; }
.prose > .note { color: var(--muted); }   /* sources and other asides to the text; the size is on the paragraph so the column keeps the text width */
.prose > .note p { margin: 0; font-size: 1rem; line-height: 1.5; }
.tone-dark .note { color: var(--on-dark-muted); }
.prose h2 { max-width: 46rem; margin-top: 3.5rem; margin-bottom: 1.5rem; text-align: center; }   /* headings use rem: their own font size would stretch ch */
.prose .pullquote { max-width: none; }
.tone-dark .pullquote { background: color-mix(in srgb, var(--dark), var(--backdrop) 30%); }       /* on a dark page the strip is darker still, with white text */
.tone-dark .pullquote p { color: var(--bright); }
/* a pullquote and a full-width photo meet with no gap, as in the interviews */
.prose > .pullquote + .figure.landscape { margin-top: 0; }
.prose > .figure.landscape:has(+ .pullquote) { margin-bottom: 0; }
.prose .pullquote p { text-align: center; font: 300 clamp(1.6rem, 1.3rem + 1.4vw, 2rem)/1.3 var(--slab); }   /* on the text pages the voice is the narrator's, so serif */

/* Text pages set on the dark grey, as on the live site */
.tone-dark { --ink: var(--on-dark); background: var(--dark); color: var(--ink); }
.tone-dark h1, .tone-dark h2, .tone-dark .prose > .lead { color: var(--bright); }
.tone-dark a:hover { color: var(--bright); }
.tone-dark .figure figcaption { color: var(--on-dark-muted); }
.tone-dark .figure img { background: var(--veil); }

/* Light text on dark looks heavier than it should; greyscale smoothing evens it out (the menu bar has it too) */
.tone-dark, .teaser, .site-footer, .grid .name { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Footer */
.site-footer { padding: 1.75rem var(--gutter); background: var(--dark); color: var(--on-dark); font: 350 0.9rem/1.7 var(--sans); text-align: center; }
.site-footer p { margin: 0.2rem 0; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.5rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--mid); font: 400 1.125rem/1.4 var(--condensed); letter-spacing: 0.015em; }
.footer-nav a { padding: 0.5rem 0.25rem; color: var(--on-dark); text-decoration: none; }   /* tap targets of 44px or so */
.footer-nav a:hover, .footer-nav a[aria-current] { color: var(--bright); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.site-footer strong { font-weight: 500; }
.site-footer a:focus-visible { outline-color: var(--bright); }

@media (max-width: 47.99rem) {
  .flyout { display: none !important; }   /* site.js reads this rule (the flyout's computed display) to decide whether a first tap opens the dropdown */
  .topbar > ul { justify-content: space-between; padding: 0 0.25rem; }   /* the five items share the whole width, close to the screen edges */
  .topbar > ul > li { flex: 1 1 auto; }
  .topbar a { padding: 0.9rem 0.3rem; font-size: 1.05rem; letter-spacing: 0; text-align: center; }
}
@media (max-width: 22.5rem) { .topbar a { font-size: 0.95rem; } }
@media (max-width: 48rem) { .prose > .lead { text-align: left; } }   /* centred lines read badly when they wrap on a phone; headings stay centred */

@media (max-width: 50rem) {   /* the quote mark needs room in the margin; below this it sits inside the text */
  .has-mark .testimony, .in-chunk .testimony { padding-left: 2.25rem; }   /* the turns that follow a quote mark line up with it */
  .has-mark .testimony::before { left: 0; font-size: 3.25rem; }
}

/* Interview pages: until the heading has scrolled into view, the name sits in a thin bar along the bottom of the screen.
   Hidden by default, so without the script it never appears; site.js shows it. Decorative (aria-hidden): the h1 is the real heading. */
.name-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; padding: 0.7rem var(--gutter); background: var(--shade); backdrop-filter: blur(6px); color: var(--bright); font: 400 1.125rem/1.3 var(--condensed); letter-spacing: 0.015em; text-align: center; transform: translateY(100%); visibility: hidden; transition: transform 0.25s ease, visibility 0s linear 0.25s; pointer-events: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.name-bar.is-shown { transform: none; visibility: visible; transition: transform 0.25s ease; }   /* out of sight and out of find-in-page when not shown; visibility flips after the slide */

/* .is-shown has the higher specificity, so it has to be named. The dropdown still fades, but does not move. */
@media (prefers-reduced-motion: reduce) { .topbar, .name-bar, .name-bar.is-shown { transition: none; } .flyout { transform: translateX(-50%); } }

/* Short fade between pages where the browser supports cross-document view transitions; elsewhere pages simply load. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.2s; }
}

@media print {
  .topbar, .name-bar, .footer-nav, .interview-grid, .teaser, .skip-link { display: none; }
  .logo { margin: 0 auto 1rem; }
  body { font-size: 12pt; color: var(--black); }
  .pullquote, .tone-dark .pullquote { background: none; }
  .tone-dark { --ink: var(--dark); background: none; color: var(--dark); }   /* browsers leave backgrounds out of print, so the dark pages and the footer print as dark text on white */
  .tone-dark h1, .tone-dark h2, .tone-dark .prose > .lead, .tone-dark .pullquote p { color: var(--black); }
  .tone-dark .note, .tone-dark .figure figcaption { color: var(--muted); }
  .figure img { background: none !important; }   /* !important: the build sets each photo's loading colour inline */
  .site-footer { background: none; color: var(--dark); border-top: 1px solid var(--rule); }
  .figure.hero img, .figure.landscape img { aspect-ratio: auto; max-height: 12cm; object-fit: contain; }
  .figure, .pullquote { break-inside: avoid; }
  .speaker { break-after: avoid; }
  .testimony p { orphans: 3; widows: 3; }
  .to-top { display: none; }
}