/* ==========================================================================
   Just the Way It Was: White Southerners Remember Jim Crow
   Implementation of the "Just the Way It Was" design canvas.
   ========================================================================== */

:root {
  /* Paper & ink
     The page runs on one rule: the substrate is warm, the marks on it are cool.
     Paper, bands, rules, photographic plates and their shadows are one warm
     family; ink and accent are indigo. On the dark grounds the two roles simply
     swap — paper-coloured type on an ink-coloured field. */
  --bg:          #efe8db;
  --bg-band:     #e5dccb;
  --paper:       #fdfbf6;
  --paper-warm:  #faf5ec;

  /* Blue-black printing ink: near-black, with only enough blue in it to belong
     to the accent. Each step keeps the luminance of the warm ink it replaces
     (--ink 0.011, --ink-6 0.095, --muted-3 0.280), so the tonal hierarchy and
     every contrast ratio in the page are unchanged — only hue moves. */
  --ink:         #1a1a25;
  --ink-2:       #2d2d3e;
  --ink-3:       #363749;
  --ink-4:       #414256;
  --ink-5:       #4a4a61;
  --ink-6:       #55556d;

  --muted:       #626277;
  --muted-2:     #717188;
  --muted-3:     #8f8fa0;
  --muted-4:     #9797a4;

  /* Rules are part of the paper, not the ink, so they stay warm. */
  --rule:        #d3c9b6;
  --rule-2:      #cfc4b0;
  --rule-3:      #ddd2bd;
  --rule-4:      #cbbfa9;
  --rule-5:      #b9ad98;

  /* Accent: indigo. Chosen at the luminance of the oxblood it replaces
     (7.06:1 on the paper, against 7.05:1 before), so it carries exactly the
     same weight in the composition. --indigo-light is the accent on the dark
     grounds, where it clears 5:1. */
  --indigo:        #453da4;
  --indigo-deep:   #362d81;
  --indigo-light:  #8884d4;

  /* Dark ground (Reading Room, footer): the same blue-black as the ink. It is
     held well below the accent's chroma so the indigo still reads as an accent
     on it rather than dissolving into the field. */
  --dark:        #1a1a25;
  --dark-rule:   #363748;
  --dark-text:   #efe8db;
  --dark-body:   #cfc5b3;
  --dark-muted:  #8f8677;
  --dark-muted-2:#b5aa99;

  /* Type */
  --display: 'Sorts Mill Goudy', Georgia, 'Times New Roman', serif;
  --body:    'EB Garamond', Georgia, 'Times New Roman', serif;
  --mono:    'Courier Prime', ui-monospace, 'Courier New', monospace;

  /* Layout */
  --measure:  1180px;
  --gutter:   28px;
  --nav-h:    52px;
  --banner-h: 38px;   /* the under construction strip above the nav, wrapping included */

  /* The photographic plate fill used wherever a real photograph goes */
  --plate-fill: repeating-linear-gradient(128deg, #ddd2bd 0 5px, #e7dfd0 5px 10px);
  --plate-fill-warm: repeating-linear-gradient(128deg, #d8ccb6 0 5px, #e4dbc9 5px 10px);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--indigo);
  text-decoration: none;
  border-bottom: 1px solid rgba(69, 61, 164, .35);
}
a:hover { color: var(--indigo-deep); border-bottom-color: rgba(69, 61, 164, .8); }

::selection { background: rgba(69, 61, 164, .18); }

img { max-width: 100%; display: block; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------------------
   Shared primitives
   -------------------------------------------------------------------------- */

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 12px 18px;
  border: 0;
}
.skip-link:focus { left: 12px; top: 12px; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 22px;
}

.rule-top { border-top: 1px solid var(--rule-2); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Buttons ------------------------------------------------------------------ */

.btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 14px 22px;
  cursor: pointer;
  border: 0;
  display: inline-block;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--solid  { background: var(--ink); color: #f3ece0; }
.btn--solid:hover  { background: var(--indigo); }
.btn--ghost  { background: transparent; color: var(--ink-4); border: 1px solid var(--rule-5); }
.btn--ghost:hover  { border-color: var(--ink); color: var(--ink); }
.btn--indigo   { background: var(--indigo); color: #f7f2e8; padding: 16px 26px; border: 0; }
.btn--indigo:hover   { background: var(--indigo-deep); color: #f7f2e8; }
.btn--outline{ background: transparent; color: var(--ink-4); padding: 16px 26px; border: 1px solid var(--rule-5); }
.btn--outline:hover{ border-color: var(--ink); color: var(--ink); }
a.btn { border-bottom-width: 1px; }
a.btn--indigo, a.btn--outline { border-bottom-style: solid; }

/* Photographic plates ------------------------------------------------------ */

.plate {
  background: var(--paper);
  padding: 8px 8px 30px;
  box-shadow: 0 10px 22px -10px rgba(52, 38, 18, .4),
              0 1px 0 rgba(255, 255, 255, .7) inset;
  position: relative;
}
.plate__frame {
  aspect-ratio: 4 / 5;
  background: var(--plate-fill);
  display: flex;
  align-items: flex-end;
  padding: 8px;
  overflow: hidden;
}
.plate__frame img { width: 100%; height: 100%; object-fit: cover; }
.plate__caption {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #64647b;
}
.plate__num {
  position: absolute;
  bottom: 9px;
  left: 10px;
  font-family: var(--mono);
  font-size: 9px;
  color: #808093;
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: rgba(239, 232, 219, .92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}
/* The under construction strip. It rides inside the fixed masthead rather than
   above it, so it cannot be scrolled away from and no page has to know it is
   there. Every visitor meets it on every page, which is the point. */
.site-banner {
  background: var(--indigo-deep);
  border-bottom: 1px solid var(--indigo);
  padding: 10px var(--gutter);
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .08em;
}
.site-banner__flag {
  text-transform: uppercase;
  letter-spacing: .18em;
  color: #cfcaf0;
  margin-right: 10px;
  white-space: nowrap;
}
.site-banner__text { color: #ece9fb; }

/* The strip wraps as the page narrows, and the masthead's own nav wraps with
   it, so the space reserved at the top of a page has to grow at the same
   breakpoints rather than being one number. */
@media (max-width: 900px) { :root { --banner-h: 64px; } }

@media (max-width: 640px) {
  :root { --banner-h: 92px; }
  .site-banner { font-size: 10.5px; letter-spacing: .06em; padding: 9px 16px; }
  .site-banner__flag { display: block; margin: 0 0 3px; }
}

.masthead__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
}
.masthead__brand {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: .01em;
  color: var(--ink);
  border: 0;
}
.masthead__brand:hover { color: var(--indigo); }
.masthead__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.masthead__nav a { color: var(--ink-6); border: 0; }
.masthead__nav a:hover { color: var(--indigo); }
.masthead__nav a.is-accent { color: var(--indigo); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { padding-block: calc(132px + var(--banner-h)) 24px; }

.hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: min(calc((100vw - 62px) / 8.6), 124px);
  line-height: 1;
  letter-spacing: -.015em;
  margin: 0 0 18px;
  white-space: nowrap;
}
.hero__subtitle {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 30px);
  color: var(--ink-4);
  margin: 0 0 40px;
}
.hero__lede {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 36px 56px;
  align-items: start;
  border-top: 1px solid var(--rule);
  padding-top: 34px;
}
.hero__lede-main { font-size: 22px; line-height: 1.5; margin: 0; text-wrap: pretty; }
.hero__lede-note { font-size: 17px; line-height: 1.65; color: var(--ink-5); margin: 0; text-wrap: pretty; }

/* Portrait gallery / roster ------------------------------------------------ */

.eight { padding-block: 44px 96px; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(22%, 140px), 1fr));
  gap: 38px 26px;
}
.gallery__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  animation: fadeUp .6s ease both;
}
.gallery__item .plate { transition: transform .25s ease, box-shadow .25s ease; }
.gallery__item:hover .plate {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -12px rgba(52, 38, 18, .45),
              0 1px 0 rgba(255, 255, 255, .7) inset;
}
.gallery__name {
  display: block;
  font-family: var(--display);
  font-size: 19px;
  line-height: 1.15;
}
.gallery__item:hover .gallery__name { color: var(--indigo); }
.gallery__dates {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--muted-2);
  margin-top: 4px;
}

.roster-list { border-top: 1px solid var(--rule); }
.roster-list__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
  width: 100%;
  padding: 18px 4px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  text-align: left;
  cursor: pointer;
}
.roster-list__item:hover { background: rgba(211, 201, 182, .35); }
.roster-list__num  { font-family: var(--mono); font-size: 11px; color: var(--indigo); }
.roster-list__name { font-family: var(--display); font-size: 26px; }
.roster-list__dates{ font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--muted-2); }
.roster-list__place{ font-size: 16px; color: var(--ink-5); }

/* Layout switch driven by CONFIG.heroLayout in app.js */
[data-hero-layout="gallery"] .roster-list { display: none; }
[data-hero-layout="roster"]  .gallery     { display: none; }

/* --------------------------------------------------------------------------
   Band sections (origin story, author)
   -------------------------------------------------------------------------- */

.band {
  background: var(--bg-band);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.origin {
  padding-block: 96px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 56px 64px;
  align-items: start;
}
.origin__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
  margin: 0 0 26px;
}
.origin p { font-size: 18px; line-height: 1.62; color: var(--ink-3); margin: 0 0 16px; text-wrap: pretty; }
.origin p:last-child { margin-bottom: 0; }

.origin__pull { border-left: 2px solid var(--indigo); padding: 6px 0 6px 34px; }
.origin__pull blockquote {
  font-family: var(--display);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.32;
  margin: 0 0 20px;
  text-wrap: pretty;
}
.origin__source {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
}
.origin__coda { font-size: 17px; line-height: 1.6; color: var(--ink-4); margin: 34px 0 0; text-wrap: pretty; }

/* --------------------------------------------------------------------------
   The Eight Voices
   -------------------------------------------------------------------------- */

.voices { padding-block: 104px 40px; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 38px;
}
.section-head h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1;
  margin: 0;
}
.section-head__hint {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0;
}

.voices__list { border-top: 1px solid var(--rule-2); }
.voice { border-bottom: 1px solid var(--rule-2); }

.voice__header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 26px;
  gap: 8px 16px;
  align-items: center;
  width: 100%;
  padding: 26px 4px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.voice__header:hover .voice__name { color: var(--indigo); }
.voice__num  { font-family: var(--mono); font-size: 12px; color: var(--indigo); }
.voice__name {
  font-family: var(--display);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.1;
  display: block;
  transition: color .2s ease;
}
.voice__role { font-size: 16.5px; color: var(--ink-6); display: block; margin-top: 5px; }
.voice__dates{ font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--muted-2); }
.voice__sign { font-family: var(--mono); font-size: 18px; color: var(--indigo); text-align: right; }

.voice__panel {
  display: flex;
  flex-wrap: wrap;
  gap: 34px 44px;
  padding: 6px 4px 52px;
  animation: fadeIn .35s ease both;
}
.voice__panel[hidden] { display: none; }

.voice__aside { flex: 0 1 220px; }
.voice__aside .plate { padding: 9px 9px 34px; box-shadow: 0 12px 26px -12px rgba(52, 38, 18, .45); }
.voice__aside .plate__frame { padding: 9px; }

.voice__meta {
  margin: 24px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.9;
  color: var(--muted);
}
.voice__meta > div { display: flex; gap: 8px; }
.voice__meta dt { min-width: 62px; color: var(--muted-3); }
.voice__meta dd { margin: 0; color: var(--ink-3); }

.voice__body { flex: 1 1 380px; }
.voice__blurb {
  font-size: 19px;
  line-height: 1.6;
  margin: 0 0 30px;
  max-width: 56ch;
  color: var(--ink-2);
  text-wrap: pretty;
}

.excerpt {
  background: var(--bg-band);
  padding: 30px 34px;
  border-left: 2px solid var(--indigo);
  max-width: 62ch;
  transition: background-color .4s ease;
  scroll-margin-top: 96px;
}
.excerpt.is-flagged { background: #dbcdb2; }
.excerpt__label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--indigo);
  margin-bottom: 14px;
}
.excerpt__text {
  font-family: var(--display);
  font-size: 21px;
  line-height: 1.48;
  margin: 0;
  text-wrap: pretty;
}
.excerpt__cite {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--muted);
  margin-top: 16px;
}

.voice__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

/* --------------------------------------------------------------------------
   The Reading Room
   -------------------------------------------------------------------------- */

.reading-room {
  background: var(--dark);
  color: var(--dark-text);
  margin-top: 64px;
  padding-block: 104px 110px;
}
.reading-room .eyebrow { color: var(--indigo-light); }

.rr__head { margin-bottom: 52px; }
.rr__head-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 30px 64px;
  align-items: start;
}
.rr__head h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.04;
  margin: 0;
}
.rr__head p { font-size: 19px; line-height: 1.6; color: var(--dark-body); margin: 0; text-wrap: pretty; }

.rr__layout { display: flex; flex-wrap: wrap; gap: 34px 44px; align-items: start; }

.rr__roster { flex: 1 1 210px; border-top: 1px solid var(--dark-rule); }
.rr__roster-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 15px 8px;
  border: 0;
  border-bottom: 1px solid var(--dark-rule);
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease;
}
.rr__roster-item:hover { background: rgba(255, 255, 255, .04); }
.rr__roster-num { font-family: var(--mono); font-size: 10.5px; color: var(--dark-muted); min-width: 20px; }
.rr__roster-body { flex: 1; }
.rr__roster-name { font-family: var(--display); font-size: 19px; display: block; }
.rr__roster-dates { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--dark-muted); }
.rr__roster-dot { color: var(--indigo-light); font-family: var(--mono); font-size: 13px; }
.rr__roster-item[aria-current="true"] .rr__roster-name { color: var(--indigo-light); }

/* Panel */
.rr__panel {
  flex: 5 1 420px;
  background: var(--paper-warm);
  color: var(--ink);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
  display: flex;
  flex-direction: column;
  min-height: 640px;
  scroll-margin-top: 96px;
}

.rr__panel-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 28px;
  border-bottom: 1px solid var(--rule-3);
}
.rr__avatar {
  width: 46px; height: 56px;
  background: var(--paper);
  padding: 4px;
  box-shadow: 0 4px 10px -4px rgba(52, 38, 18, .5);
  flex: none;
}
.rr__avatar-fill {
  height: 100%;
  background: repeating-linear-gradient(128deg, #ddd2bd 0 4px, #e7dfd0 4px 8px);
  overflow: hidden;
}
.rr__avatar-fill img { width: 100%; height: 100%; object-fit: cover; }
.rr__panel-id { flex: 1; }
.rr__name { font-family: var(--display); font-size: 22px; line-height: 1.1; }
.rr__meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; color: var(--muted-2); margin-top: 3px; }

/* Standing disclosure. Sits beside the narrator's name in the panel header, so
   it stays in view however far the conversation scrolls. */
.rr__badge {
  display: inline-block;
  margin-left: 10px;
  transform: translateY(-2px);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  color: var(--indigo);
  border: 1px solid rgba(69, 61, 164, .4);
  border-radius: 2px;
  padding: 2px 6px;
  vertical-align: middle;
  cursor: help;
}

.rr__clear {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--rule-4);
  color: var(--muted);
  padding: 9px 14px;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.rr__clear:hover { border-color: var(--indigo); color: var(--indigo); }

/* Transcript */
/* The message column. This lived in a style attribute on #rr-messages until
   the site took a Content-Security-Policy without 'unsafe-inline'; it is the
   same three declarations, moved where they belonged anyway. */
/* A machine-readable date on the page itself. Search engines and AI systems
   both read freshness off the document, and the copyright line alone does not
   say when the site was last touched. */
.site-footer__updated { color: var(--dark-muted); }

.rr__messages { display: flex; flex-direction: column; gap: 22px; }

.rr__log {
  flex: 1;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow-y: auto;
}

.rr__disclaimer {
  background: var(--bg);
  border: 1px solid var(--rule-3);
  padding: 20px 22px;
  max-width: 62ch;
  flex: none;
}
.rr__disclaimer-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--indigo);
  margin-bottom: 10px;
}
.rr__disclaimer p { font-size: 16.5px; line-height: 1.55; margin: 0; color: var(--ink-3); text-wrap: pretty; }
.rr__disclaimer p + p { margin-top: 12px; }

/* The content warning. It is not decoration: a reader who meets a slur in an
   answer should have met this sentence first. */
.rr__disclaimer-warn {
  border-left: 2px solid #8a3c2c;
  padding-left: 12px;
  color: var(--ink-4) !important;
}

/* Where the question goes, and what that costs the reader. Smaller than the
   two notices above it, because it is the answer to a question rather than a
   warning, but in the same box and before the first message either way. */
.rr__disclaimer-fine {
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  color: var(--muted) !important;
  padding-top: 12px;
  border-top: 1px solid var(--rule-3);
}
.rr__disclaimer-fine a { color: var(--indigo); }

/* The same statement one level up, where a reader decides whether to sit down
   at all. On the dark ground of the Reading Room head. */
.rr__head-note {
  margin-top: 14px;
  font-size: 16px;
  color: var(--dark-muted-2);
}
.rr__head-note a { color: var(--indigo-light); }

/* A reader in trouble, answered by safety.mjs rather than by a chapter. It is
   deliberately the loudest thing the room can put on the page. */
.msg--safety {
  max-width: 60ch;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-left: 3px solid #8a3c2c;
  padding: 20px 22px;
  animation: fadeUp .3s ease both;
}
.msg--safety p { font-size: 17px; line-height: 1.55; margin: 0 0 14px; color: var(--ink-2); text-wrap: pretty; }
.msg--safety p:last-child { margin-bottom: 0; }
.msg--safety ul { margin: 0 0 14px; padding-left: 20px; }
.msg--safety li { font-size: 16.5px; line-height: 1.5; margin-bottom: 7px; color: var(--ink-2); }
.msg--safety a { color: var(--indigo); }
.msg--safety strong { font-weight: 600; }

/* The standing reminder, dropped into a long conversation. Quiet on purpose:
   it is a label, not an interruption. */
.msg--reminder {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dark-muted);
  border-top: 1px solid var(--dark-rule);
  border-bottom: 1px solid var(--dark-rule);
  padding: 12px 0;
  max-width: 60ch;
}

/* The legal row in the site footer, on both the home page and the legal
   pages. */
.site-footer__legal { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-footer__legal a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dark-muted-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.site-footer__legal a:hover { color: var(--dark-text); border-bottom-color: var(--dark-muted); }

.msg--visitor { display: flex; justify-content: flex-end; }
.msg--visitor > span {
  background: var(--ink);
  color: #f3ece0;
  padding: 14px 20px;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.5;
  animation: fadeUp .3s ease both;
}
.msg--narrator { max-width: 60ch; animation: fadeUp .4s ease both; }
.msg--narrator p {
  font-family: var(--display);
  font-size: 20px;
  line-height: 1.5;
  margin: 0;
  text-wrap: pretty;
}
.msg__cite {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--indigo);
  margin-top: 10px;
  border-top: 1px solid #e0d5c0;
  padding-top: 8px;
  display: inline-block;
}
.msg--thinking {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-3);
  animation: fadeIn .3s ease both;
}

/* Composer */
.rr__foot { padding: 0 28px 28px; }

.suggested { margin-bottom: 18px; }
.suggested[hidden] { display: none; }
.suggested__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-3);
  margin-bottom: 12px;
}
.suggested__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-family: var(--body);
  font-size: 16px;
  background: transparent;
  border: 1px solid var(--rule-4);
  color: var(--ink-4);
  padding: 10px 16px;
  cursor: pointer;
  text-align: left;
  transition: border-color .2s ease, color .2s ease;
}
.chip:hover { border-color: var(--indigo); color: var(--indigo); }

.composer { display: flex; border-top: 1px solid var(--ink); }
.composer__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--body);
  font-size: 18px;
  padding: 16px 4px;
  outline: none;
  color: var(--ink);
}
.composer__input::placeholder { color: var(--muted-3); }
.composer__send {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  color: var(--indigo);
  padding: 16px 6px;
  cursor: pointer;
}
.composer__send:hover { color: var(--indigo-deep); }

.rr__footnote {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  margin-top: 12px;
  color: var(--muted-4);
}

/* --------------------------------------------------------------------------
   The Method
   -------------------------------------------------------------------------- */

.method { padding-block: 104px; }
.method__grid { display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: start; }
.method__intro { flex: 3 1 320px; }
.method__intro h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.06;
  margin: 0 0 24px;
}
.method__intro p { font-size: 18px; line-height: 1.62; color: var(--ink-3); margin: 0 0 26px; text-wrap: pretty; }
.method__language {
  font-size: 16px !important;
  line-height: 1.6;
  color: var(--muted) !important;
  margin: 0 !important;
  padding-top: 22px;
  border-top: 1px solid var(--rule-2);
}

.method__list { flex: 4 1 380px; border-top: 1px solid var(--rule-2); }
.method__item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 26px;
  padding: 24px 4px;
  border-bottom: 1px solid var(--rule-2);
  align-items: baseline;
}
.method__year { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--indigo); }
.method__text { font-size: 17.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

/* --------------------------------------------------------------------------
   The Author
   -------------------------------------------------------------------------- */

.author { padding-block: 96px; display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: start; }
.author__aside { flex: 0 1 300px; }
.author__aside .plate { padding: 10px 10px 40px; box-shadow: 0 14px 30px -14px rgba(52, 38, 18, .5); }
.author__aside .plate__frame { background: var(--plate-fill-warm); padding: 10px; }
.author__aside .plate__caption { font-size: 9.5px; }

.author__body { flex: 1 1 420px; }
.author__body h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.08;
  margin: 0 0 26px;
}
.author__body p {
  font-size: 18.5px;
  line-height: 1.62;
  color: var(--ink-2);
  margin: 0 0 18px;
  max-width: 52ch;
  text-wrap: pretty;
}
.author__body p + p { margin-bottom: 30px; }
.author__quote {
  font-family: var(--display);
  font-style: italic;
  font-size: 23px;
  line-height: 1.45;
  margin: 0;
  padding-left: 26px;
  border-left: 2px solid var(--indigo);
  max-width: 44ch;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   The Book
   -------------------------------------------------------------------------- */

.book { padding-block: 104px; display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: end; }
.book__body { flex: 1 1 420px; }
.book__body h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1;
  margin: 0 0 22px;
}
.book__body > p { font-size: 19px; line-height: 1.6; color: var(--ink-3); margin: 0 0 34px; max-width: 46ch; text-wrap: pretty; }
.book__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }

/* Where the book can actually be got. It sits under the buttons rather than in
   them, because the honest answer is a sentence and not a label. */
.book .book__availability {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-5);
  max-width: 46ch;
  margin: 0 0 30px;
}

.book__isbn {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 2;
  color: var(--muted-2);
  margin: 0;
  border-top: 1px solid var(--rule-2);
  padding-top: 18px;
  max-width: 46ch;
}
.book__isbn > div { display: flex; gap: 14px; }
.book__isbn dt { min-width: 110px; color: var(--muted-3); }
.book__isbn dd { margin: 0; color: var(--ink-3); }

.book__cover {
  flex: 0 1 300px;
  background: var(--paper);
  padding: 10px;
  box-shadow: 0 18px 40px -18px rgba(52, 38, 18, .55);
}
.book__cover-frame {
  aspect-ratio: 2 / 3;
  background: var(--plate-fill-warm);
  display: flex;
  align-items: flex-end;
  padding: 12px;
  overflow: hidden;
}
.book__cover-frame img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--dark); color: var(--dark-muted); }
.site-footer__inner {
  padding-block: 64px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 36px 56px;
  align-items: start;
}
.site-footer__brand {
  font-family: var(--display);
  font-size: 26px;
  color: var(--dark-text);
  margin-bottom: 14px;
}
.site-footer__fine { font-family: var(--mono); font-size: 11px; line-height: 2; margin: 0; }
.site-footer__note { font-size: 16px; line-height: 1.6; margin: 0 0 16px; color: var(--dark-muted-2); text-wrap: pretty; }
.site-footer a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--indigo-light);
  border-bottom-color: rgba(136, 132, 212, .35);
}
.site-footer a:hover { color: #a9a5e4; border-bottom-color: rgba(136, 132, 212, .8); }

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .hero { padding-top: calc(150px + var(--banner-h)); }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }

  .hero { padding-top: calc(158px + var(--banner-h)); }
  .hero__lede-main { font-size: 20px; }

  .origin, .author, .book { padding-block: 72px; }
  .voices { padding-top: 76px; }
  .reading-room { padding-block: 76px 84px; }
  .method { padding-block: 76px; }

  .voice__header {
    grid-template-columns: 32px minmax(0, 1fr) 20px;
    gap: 6px 12px;
    padding: 22px 2px;
  }
  .voice__dates { grid-column: 2; grid-row: 2; }
  .voice__sign  { grid-column: 3; grid-row: 1; }

  .roster-list__item {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 4px 12px;
  }
  .roster-list__dates, .roster-list__place { grid-column: 2; }

  .method__item { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; }

  .rr__log { padding: 24px 20px; }
  .rr__panel-head, .rr__foot { padding-inline: 20px; }
  .rr__panel { min-height: 560px; }
}

/* --------------------------------------------------------------------------
   Reading Room: citations and notices
   -------------------------------------------------------------------------- */

/* Citations stay out of the way. The answer reads clean; one small line below
   it opens the passages for a reader who wants to check the book. */

.sources { margin-top: 10px; }

.sources__toggle {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  background: transparent;
  border: 0;
  color: var(--muted-3);
  padding: 2px 0;
  cursor: pointer;
  text-align: left;
  opacity: .75;
  transition: color .2s ease, opacity .2s ease;
}
.sources__toggle:hover,
.sources__toggle:focus-visible { color: var(--indigo); opacity: 1; }
.sources__toggle::after { content: ' +'; }
.sources__toggle[aria-expanded="true"]::after { content: ' –'; }

/* `display: flex` outranks the UA rule for [hidden], so say it explicitly;
   without this the passages sit open, which is the opposite of the intent. */
.sources__list[hidden] { display: none; }

.sources__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 16px;
  animation: fadeIn .25s ease both;
}

.source {
  margin: 0;
  border-left: 2px solid var(--rule-4);
  padding: 0 0 0 16px;
}
.source__quote {
  margin: 0 0 6px;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-4);
  text-wrap: pretty;
}
.source__cite {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--muted-2);
}

.msg--notice {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--rule-3);
  padding: 16px 18px;
  max-width: 58ch;
  text-wrap: pretty;
}

.composer__input:disabled { color: var(--muted-3); }
.composer__send:disabled { color: var(--muted-3); cursor: default; }