/* Append after shared and page-family CSS. Source wording and whitespace are
   unchanged; all three transcript layers use the same reading scale. */
:root {
  --sassen-reader-size: 1.0625rem;
  --sassen-support-size: calc(var(--sassen-reader-size) * .875);
  --sassen-label-size: calc(var(--sassen-reader-size) * .8125);
  --sassen-leading-prose: 1.62;
  --sassen-leading-support: 1.5;
  --sassen-paragraph-gap: .75em;
}
.interview-speech,
.interview-speech .turn-text,
.turn-text,
.interview-unsettled,
.interview-reading .interview-speech,
.source-text,
.page-evidence .source-text,
.scan-panel .source-text,
body[data-view="interview"][data-transcript="german"] .page-evidence .source-text,
body[data-view="interview"][data-transcript="literal"] .page-evidence .source-text,
.glossary-passage-quote {
  font-size: var(--sassen-reader-size);
  line-height: var(--sassen-leading-prose);
  overflow-wrap: anywhere;
}
.interview-speech p { margin-bottom: var(--sassen-paragraph-gap); }
.interview-speech p:last-child { margin-bottom: 0; }
/* Preserve read-aloud labels, uncertain attribution and documentary markers.
   Size alone shouldn't imply a different reliability or author. */
.interview-speaker,
.turn-who,
.editorial-note .editorial-label,
.editorial-note .editorial-cite,
.ed-head,
.page-evidence .ed-head,
.page-panel-title,
.raw-notes > summary,
.glossary-passage-head,
.glossary-entry-expansion {
  font-size: var(--sassen-label-size);
  line-height: var(--sassen-leading-support);
}
.editorial-note,
.ed-body,
.page-evidence .ed-body,
.reader-notes,
.page-attribution,
.turn-basis,
.turn-basis p,
.raw-note-flag,
.glossary-entry-brief,
.glossary-entry-facts,
.person-facts,
.glossary-tooltip {
  font-size: var(--sassen-support-size);
  line-height: var(--sassen-leading-support);
}
.editorial-note p { margin-bottom: .5em; }
.editorial-note p:last-child { margin-bottom: 0; }
.page-attribution li p,
.reader-notes li,
.turn-basis p,
.side-panel-body p,
.page-panel .ed-body {
  line-height: var(--sassen-leading-support);
}
/* Compact supporting prose keeps one rhythm in the main page and its panel. */
.page-panel .reader-notes,
.page-panel .page-attribution,
.page-panel .ed-body { font-size: var(--sassen-support-size); }
.person-reading,
.glossary-entry-reading,
.backstory { line-height: var(--sassen-leading-prose); }
.person-reading p,
.glossary-entry-reading p,
.backstory > p { margin-bottom: var(--sassen-paragraph-gap); }
.person-reading,
.glossary-entry-reading { overflow-wrap: anywhere; }
/* Layer-switch layout rules mustn't promote supporting notes to prose size. */
body[data-view="interview"]:is([data-transcript="german"], [data-transcript="literal"]) :is(.reader-notes, .page-attribution) {
  font-size: var(--sassen-support-size);
  line-height: var(--sassen-leading-support);
}
/* Supporting notes keep their typeface when the source layer changes. */
body[data-view="interview"]:is([data-transcript="german"], [data-transcript="literal"]) :is(.reader-notes, .page-attribution) {
  font-family: var(--sans);
}
.side-panel-body :is(h3, h4),
.glossary-tooltip a {
  font-size: var(--sassen-label-size);
  line-height: var(--sassen-leading-support);
}

/* Source-preserving Sassen figure/navigation consistency. Append after shared
   and page-family CSS. Type tokens come from annotation-quotes.css. */
figcaption {
  font-size: var(--sassen-support-size, .9296875rem);
  line-height: var(--sassen-leading-support, 1.5);
  margin-top: .5rem;
  overflow-wrap: anywhere;
}
.person-portrait figcaption,
.backstory-figure figcaption {
  font-size: var(--sassen-support-size, .9296875rem);
  line-height: var(--sassen-leading-support, 1.5);
  margin-top: .5rem;
}
/* Archival scan references are metadata; substantive photo captions above
   retain support size. Neither rule changes the scanned image or its crop. */
#scan-panel-caption,
.scan > figcaption {
  font-size: var(--sassen-label-size, .86328125rem);
  line-height: var(--sassen-leading-support, 1.5);
}
.person-portrait,
.backstory-figure { min-width: 0; }
.person-portrait img,
.backstory-figure img { height: auto; object-fit: contain; }
/* The play/pause control is injected after the transcript toolbar. Give it
   a predictable place after the text/search actions rather than before them. */
@media (max-width: 980px) {
  .top .reader-tools .audio-transport { order: 7; }
  .top #previous-page,
  .top #next-page { min-width: 44px; }
  .top-in nav a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Audio context uses the same supporting-text role. */
body .documentary-audio, body .audio-continuation, body .audio-gap-note {
  font-size: var(--sassen-support-size);
  line-height: var(--sassen-leading-support);
}

    /* Unified chrome, September 27, 2026. One layer, appended last, so the
       header, controls, More menu, Pages dialog, page heads and scan panel read
       as one design. Tokens are the house set from irvingwebsite reader.css.
       Spacing uses only 4, 8, 16 and 24 px. The bar is 48 px at desktop width
       with 32 px controls; below 980 px it is two rows of 44 px controls. */
    :root {
      --ink: #221a14;
      --rule: #d8cdba;
      --accent: #3d4a57;
      --slate: var(--accent);
      --alarm: #6b1f2e;
      --ui-size: .875rem;
      --bar-h: 48px;
      --ctl-h: 32px;
    }
    .top {
      background: var(--paper);
      border-bottom: 1px solid var(--rule);
      font-family: var(--sans);
      font-size: var(--ui-size);
    }
    .top .top-in {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 0 16px;
      /* Same box as the reading layout, so the title lines up with the scan
         and More lines up with the text column's right edge. */
      width: min(1180px, calc(100% - 48px));
      min-height: var(--bar-h);
      padding: 0;
    }
    .top .top-brand {
      display: flex;
      flex: 1 1 auto;
      flex-wrap: nowrap;
      align-items: center;
      gap: 0 16px;
      min-width: 0;
      margin: 0;
      padding: 0;
      overflow: visible;
    }
    .top .top-brand > b {
      margin-right: auto;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 1rem;
      font-weight: 600;
      white-space: nowrap;
    }
    .top .reader-tools {
      display: flex;
      flex: 0 0 auto;
      flex-wrap: nowrap;
      align-items: center;
      gap: 0 16px;
      margin: 0;
      padding: 0;
      border: 0;
      color: var(--ink);
      font-size: var(--ui-size);
    }
    .top .page-controls,
    .top .text-layer-links {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 0 16px;
    }
    /* One control style. Text buttons in ink, one height, one hover, one
       focus ring, one active mark: an ink underline under the word. */
    .top .top-brand a,
    .top .reader-tools button,
    .top .sheet-tools > summary,
    .top .sheet-tools-body a,
    .top .sheet-tools-body button,
    .top .scan-jump-form button,
    .pages-dialog .pages-close {
      appearance: none;
      display: inline-flex;
      align-items: center;
      min-height: var(--ctl-h);
      height: auto;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: none;
      color: var(--ink);
      font-family: var(--sans);
      font-size: var(--ui-size);
      font-weight: 400;
      line-height: 1.25;
      letter-spacing: normal;
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
    }
    .top .sheet-tools > summary { list-style: none; }
    .top .sheet-tools > summary::-webkit-details-marker { display: none; }
    .top .top-brand a:hover,
    .top .reader-tools button:hover,
    .top .sheet-tools > summary:hover,
    .top .sheet-tools-body a:hover,
    .top .sheet-tools-body button:hover,
    .top .scan-jump-form button:hover,
    .pages-dialog .pages-close:hover { color: var(--accent); }
    .top .top-brand a:focus-visible,
    .top .reader-tools button:focus-visible,
    .top .sheet-tools > summary:focus-visible,
    .top .sheet-tools-body a:focus-visible,
    .top .sheet-tools-body button:focus-visible,
    .top .scan-jump-form button:focus-visible,
    .top .scan-jump-form input:focus-visible,
    .pages-dialog .pages-close:focus-visible,
    .pages-grid a:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
    .top .reader-tools button[aria-pressed="true"],
    .top .reader-tools button[aria-expanded="true"],
    .top .sheet-tools[open] > summary,
    .top .sheet-tools-body button[aria-pressed="true"] {
      color: var(--ink);
      font-weight: 400;
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 6px;
    }
    body[data-pages-open] #pages-toggle { color: var(--ink); }
    body[data-pages-open] #pages-toggle {
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 6px;
    }
    /* The page box. A small plain field and a Go that matches the buttons. */
    .top .scan-jump-form {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 0 8px;
      margin: 0;
      color: var(--ink);
      font-size: var(--ui-size);
    }
    .top .scan-jump-form > label,
    .top .scan-jump-form .jump-total {
      color: var(--ink);
      font-size: var(--ui-size);
    }
    .top .scan-jump-form input {
      width: 56px;
      height: var(--ctl-h);
      min-height: 0;
      padding: 0 4px;
      border: 1px solid var(--ink-3);
      border-radius: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--sans);
      font-size: var(--ui-size);
      -moz-appearance: textfield;
    }
    .top .scan-jump-form input::-webkit-inner-spin-button,
    .top .scan-jump-form input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
    .top .scan-jump-form .jump-status { font-size: .8125rem; color: var(--ink-2); }
    /* More. A flat paper menu with a hairline edge, anchored to its right. */
    .top .sheet-tools { position: relative; }
    .top .sheet-tools-body {
      top: calc(100% + 8px);
      right: 0;
      left: auto;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: stretch;
      gap: 0;
      width: max-content;
      min-width: 200px;
      max-width: min(340px, calc(100vw - 32px));
      padding: 8px 16px;
      border: 1px solid var(--rule);
      background: var(--paper);
    }
    .top .sheet-tools-body .tools-about { display: inline-flex; }
    .top .sheet-tools-body .cite-box { width: 300px; max-width: 100%; margin: 4px 0 8px; }
    .top .sheet-tools-body .cite-box textarea { border-color: var(--ink-3); }
    .top .reader-progress > span { background: var(--ink); }
    /* Page head. The sheet's own label on one dotted line. */
    .interview-page-head {
      display: block;
      margin: 0 0 4px;
      padding-top: 4px;
      border-top: 1px dotted var(--rule);
      border-bottom: 0;
      color: var(--ink-3);
      font-family: var(--sans);
      font-size: .8125rem;
    }
    .interview-page:first-child .interview-page-head { border-top: 0; padding-top: 0; }
    .interview-page-head .interview-scan {
      color: var(--ink-3);
      font-family: var(--sans);
      font-size: .8125rem;
      font-weight: 400;
    }
    /* Scan panel. The scan sits on the paper; one quiet line names the file. */
    .scan-panel {
      --paper-deep: var(--paper);
      --ink-2: #3f342a;
      --ink-3: #6a5a48;
      --rule: #d8cdba;
      background: var(--paper);
      border-top: 0;
      border-bottom: 0;
    }
    #scan-panel { border-top: 0; border-bottom: 0; background: var(--paper); }
    .interview-page-head + .editorial-note { border-top: 0; }
    .scan-panel .scan,
    .scan-panel .scan img,
    .scan-panel #scan-panel-link { background: transparent; border: 0; }
    #scan-panel-caption {
      margin: 0;
      padding: 8px 0 0;
      text-align: left;
      color: var(--ink-3);
      font-family: var(--sans);
      font-size: .8125rem;
    }
    /* Gap marks. A bracketed ellipsis in the interface grey; the cause is
       spoken by screen readers and shown in the pointer title. */
    .gap {
      border: 0;
      color: var(--ink-3);
      font-family: var(--sans);
      font-size: .875em;
      font-style: normal;
      white-space: nowrap;
      cursor: default;
    }
    .gap[data-cause="typist"] { font-style: normal; }
    /* About this file, in the appendix. */
    .reader-appendix .file-about { margin: 24px 0 0; font-size: .8125rem; }
    .reader-appendix .file-about h2 {
      margin: 0 0 8px;
      color: var(--ink);
      font-family: var(--sans);
      font-size: .875rem;
      font-weight: 600;
    }
    .reader-appendix .file-about p { line-height: 1.5; }
    /* Pages dialog. The same bar, the same controls; the current sheet has
       one ink rule under its picture and a bold number. */
    .pages-dialog { border: 1px solid var(--ink-3); border-radius: 0; }
    .pages-dialog-head {
      min-height: var(--bar-h);
      padding: 0 16px;
      gap: 16px;
      border-bottom: 1px solid var(--rule);
      background: var(--paper);
    }
    .pages-dialog-head h2 {
      margin: 0;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 1rem;
      font-weight: 600;
    }
    .pages-group { padding: 0 16px 8px; }
    .pages-group h3 { margin: 24px 0 8px; color: var(--ink); }
    .pages-grid { gap: 16px 8px; }
    .pages-grid a,
    .pages-grid a[aria-current="page"] {
      padding: 4px;
      border: 0;
      color: var(--ink-2);
      font-weight: 400;
    }
    .pages-grid a:hover { border: 0; color: var(--accent); }
    .pages-grid span { margin-top: 4px; padding-top: 4px; border-top: 2px solid transparent; }
    .pages-grid a[aria-current="page"] { color: var(--ink); font-weight: 600; }
    .pages-grid a[aria-current="page"] span { border-top-color: var(--ink); }
    @media (max-width: 980px) {
      :root { --ctl-h: 44px; }
      .top { top: 0 !important; overflow: visible; }
      .top .top-in {
        flex-wrap: wrap;
        width: calc(100% - 28px);
        padding: 0;
        column-gap: 16px;
      }
      .top .reader-tools::after { content: none; }
      /* Two rows. Row one is the title and the text choice; row two moves
         through the pages and finds things. */
      .top .top-brand { order: 0; flex: 1 1 auto; }
      .top .reader-tools { display: contents; }
      .top .reader-tools .text-layer-links { order: 1; flex: 0 0 auto; }
      .top .reader-tools .sheet-tools { order: 2; }
      .top .top-in::after { content: ''; order: 3; flex-basis: 100%; height: 0; }
      .top .reader-tools .scan-jump-form { order: 4; }
      .top .page-controls { display: contents; }
      .top #pages-toggle,
      .top #search-toggle,
      .top #return-page { order: 5; }
      .top .reader-tools .scan-toggle {
        order: 6;
        margin-left: auto !important;
        min-width: 44px;
        justify-content: flex-end;
      }
      .top .reader-tools .scan-toggle[aria-expanded="true"] { font-weight: 400; }
      .top .jump-total { display: inline; }
      .top .scan-jump-form > label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
      .top .scan-jump-form input { height: 36px; }
      .top .sheet-tools-body { max-height: calc(100vh - var(--reader-top, 96px) - 16px); overflow-y: auto; }
    }
    @media (max-width: 560px) {
      .top .top-in { flex-wrap: wrap; }
      .top .scan-jump-form > label,
      .top .jump-total {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
      }
      .top .top-brand > b { font-size: .9375rem; }
    }

    /* Fix pass, September 27, 2026. Appended after UNIFY_CSS.
       One token set (house ink, ink-2, ink-3), one type scale (13, 14, 16
       and 17 px; weights 400 and 600), a phone header of two 44 px rows with
       More as a full-width panel under the bar, and the scan top aligned
       with the first rule of the text column. */
    :root {
      --ink: #221a14;
      --ink-2: #3f342a;
      --ink-3: #6a5a48;
      --sassen-reader-size: 17px;
      --sassen-support-size: 14px;
      --sassen-label-size: 14px;
      --ui-size: 14px;
    }
    b, strong, h1, h2, h3, h4, h5, h6,
    .glossary-head h1,
    .backstory h1 { font-weight: 600; }
    /* Reading text in house ink; speaker labels and secondary text in ink-2. */
    .turn-text,
    .interview-speech,
    .interview-reading .interview-speech,
    .interview-unsettled,
    .source-text,
    .page-evidence .source-text { color: var(--ink); }
    .interview-reading .interview-speaker { color: var(--ink-2); }
    /* Gap marks: a plain word in the reading font, size and ink-3. */
    .gap,
    .gap-reading {
      color: var(--ink-3);
      font-family: inherit;
      font-size: 1em;
      font-style: normal;
    }
    .gap .gap-mark { opacity: 1; }
    /* 13 px: small labels. */
    .reader-appendix summary,
    .reader-appendix summary span,
    .reader-glossary > p,
    .reader-glossary-open,
    .reader-topic-range,
    .pages-grid span,
    .evidence-index-head p,
    .jump-status,
    .top .scan-jump-form .jump-status,
    .search label,
    .search-status,
    .search-results .hit-where,
    .cite-box,
    .cite-box p,
    .glossary-alphabet a,
    .glossary-related a,
    .glossary-person-link a,
    .glossary-tools label,
    .glossary-tools select,
    .glossary-tools option,
    .glossary-status,
    .person-breadcrumb,
    .person-breadcrumb a,
    .person-breadcrumb span,
    .page-nav-direction,
    .page-nav-label,
    .page-nav-placeholder { font-size: 13px; }
    /* 15 px, AI trim of October 1, 2026 (D20): captions, archive details,
       editorial notes, glossary definitions, page buttons and other
       sentences a reader reads. */
    figcaption,
    #scan-panel-caption,
    .reader-glossary-categories li,
    .reader-glossary-categories span,
    .file-about,
    .file-about dt,
    .reader-appendix .file-about,
    footer,
    footer p,
    footer a,
    footer li,
    .glossary-section-head p,
    .glossary-reading-links a,
    .person-scan-list a,
    .editorial-note p,
    .editorial-note p a,
    .editorial-note p span,
    .glossary-expansion,
    .glossary-entry-brief,
    .glossary-entry-expansion,
    .glossary-entry-facts dt,
    .glossary-entry-facts dd,
    .glossary-passage-context,
    .glossary-tooltip,
    .glossary-tooltip a { font-size: 15px; }
    /* 14 px: controls, speaker labels and notes. */
    .interview-speaker,
    .interview-speaker a,
    .interview-speaker span,
    .interview-cover p,
    .interview-content.interview-cover p,
    .reader-welcome-links a,
    .reader-welcome-links button,
    .evidence-close,
    .search-results a,
    .search-results .hit-text,
    .glossary-tool-buttons button,
    .glossary-entry-reading h3,
    .glossary-passage-head a { font-size: 14px; }
    /* 16 px: title and dialog headings. */
    .pages-group h3,
    .evidence-index-head h2,
    .search-panel h2,
    .people-index .person-row p { font-size: 16px; }
    /* 17 px: reading text. */
    .backstory .standfirst,
    .person-deck,
    .people-index .person-row h3,
    .people-index .person-row h3 a { font-size: 17px; }
    @media (max-width: 760px) {
      body { font-size: 17px; }
    }
    /* The bar holds no progress strip. */
    .reader-progress { display: none; }
    /* Top alignment at two-column width. The page's head rule sits at the
       page top, and the page lands on the scan's sticky top, so the scan
       and the text column's first rule share one y. */
    @media (min-width: 981px) {
      body[data-view="interview"] .interview-page { padding-top: 0; }
      .interview-page { scroll-margin-top: var(--scan-rail-top, 96px); }
    }
    /* Language copies live in More for phones. */
    .top .sheet-tools-body .more-narrow { display: none; }
    /* Secondary pages: the title on its own row, links on the next. */
    @media (max-width: 599px) {
      .top .top-brand { flex-wrap: wrap; row-gap: 0; }
      .top .top-brand > b {
        display: flex;
        align-items: center;
        flex: 1 0 100%;
        min-height: 44px;
        margin-right: 0;
        font-size: 16px;
        line-height: 1.25;
        white-space: normal;
      }
      .top .top-brand a { min-height: 44px; }
    }
    /* Phone header: row one the title (and Page image); row two the page
       box, Go, All pages, Search and More. English and German move into
       More. */
    @media (max-width: 599px) {
      .top .reader-tools .text-layer-links { display: none; }
      .top .top-brand:has(+ .reader-tools) { flex: 1 1 0; min-width: 0; }
      .top .reader-tools .scan-toggle { order: 1; }
      .top .reader-tools .sheet-tools { order: 6; }
      .top .scan-jump-form > label,
      .top .jump-total {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
      }
      /* More opens as a full-width panel directly under the bar. */
      .top .sheet-tools,
      .top .reader-tools .sheet-tools { position: static; min-width: 0; }
      .top .sheet-tools-body {
        position: absolute;
        top: calc(100% + 1px);
        left: 0;
        right: 0;
        width: auto;
        min-width: 0;
        max-width: none;
        max-height: calc(100vh - var(--reader-top, 96px) - 8px);
        overflow-y: auto;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0;
        padding: 4px 14px 8px;
        border: 0;
        border-bottom: 1px solid var(--rule);
        background: var(--paper);
      }
      .top .sheet-tools-body .more-narrow { display: inline-flex; }
      .top .sheet-tools-body > button,
      .top .sheet-tools-body > a {
        position: relative;
        min-height: 44px;
        padding-left: 24px;
      }
      .top .sheet-tools-body .cite-box { width: auto; margin: 4px 0 8px 24px; }
      /* The current language is a checked choice. */
      .top .sheet-tools-body [data-text-layer][aria-pressed="true"] { text-decoration: none; }
      .top .sheet-tools-body [data-text-layer][aria-pressed="true"]::before {
        content: "";
        position: absolute;
        left: 5px;
        top: 50%;
        width: 5px;
        height: 10px;
        border: solid var(--ink);
        border-width: 0 2px 2px 0;
        transform: translateY(-65%) rotate(45deg);
      }
    }

    /* Motion pass, September 27, 2026. Opacity only; nothing moves. */
    #scan-panel-link { position: relative; }
    @media (prefers-reduced-motion: no-preference) {
      @view-transition { navigation: auto; }
    }
    .top { view-transition-name: reader-top; }
    ::view-transition-old(root),
    ::view-transition-new(root) { animation-duration: 180ms; }
    ::view-transition-group(reader-top),
    ::view-transition-new(reader-top) { animation: none; }
    ::view-transition-old(reader-top) { display: none; }

    /* Resize pass, September 27, 2026. Where both columns show, interview
       pages use the window up to 1,600 px, and the bar spans the same box.
       By default the scan column is as wide as a portrait sheet of the file
       fitted to the panel height (--split-aspect, the median fitted aspect),
       and the text takes the rest, but the default never gives the text
       less than its full 42 em measure. A saved split (html.split-set) sets
       --text-em, the text column in reading ems, never under 30, and never
       so wide that the scan drops under 280 px; the scan takes the rest. The text measure follows the column up to 42 em
       and centres, so extra width becomes margin. The sheet is sized so
       the whole of it fits the panel height. */
    .split-divider { display: none; color: var(--rule); }
    @media (min-width: 981px) {
      .top .reader-tools { padding-left: var(--tools-inset, 0px); }
      body[data-reader-mode="scan"] main,
      body[data-reader-mode="scan"] .top .top-in { width: min(1600px, calc(100% - 48px)); }
      body[data-reader-mode="scan"] .interview-layout {
        max-width: none;
        margin: 0;
        column-gap: 0;
        grid-template-columns:
          minmax(0, 1fr)
          36px
          clamp(280px,
            calc((100vh - var(--scan-rail-top, 96px) - 18px - 34px) / var(--split-aspect, 1.3)),
            calc(100% - 36px - 42 * var(--sassen-reader-size)));
      }
      /* A saved split sets the text column in reading ems instead. */
      html.split-set body[data-reader-mode="scan"] .interview-layout {
        grid-template-columns:
          clamp(calc(30 * var(--sassen-reader-size)),
            calc(var(--text-em, 35) * var(--sassen-reader-size)),
            calc(100% - 316px))
          36px
          minmax(280px, 1fr);
      }
      body[data-reader-mode="scan"] .interview-reader {
        grid-column: 1;
        max-width: calc(42 * var(--sassen-reader-size));
        justify-self: center;
      }
      body[data-reader-mode="scan"] #scan-panel-figure {
        max-width: calc((100vh - var(--scan-rail-top, 96px) - 18px - 34px) / var(--sheet-aspect, 1.3));
        margin-inline: 0 auto;
      }
      /* Mirror pass: text left, divider, scan right; the sheet sits
         against the divider. */
      body[data-reader-mode="scan"] .scan-panel { grid-column: 3; }
      body[data-reader-mode="scan"] .split-divider {
        display: block;
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        align-self: start;
        position: sticky;
        top: var(--scan-rail-top, 96px);
        width: 24px;
        height: calc(100vh - var(--scan-rail-top, 96px) - 18px);
        cursor: col-resize;
        touch-action: none;
      }
    }
    .split-divider::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 11.5px;
      width: 1px;
      background: currentColor;
    }
    .split-divider-grip {
      position: absolute;
      top: 50%;
      left: 6px;
      width: 12px;
      height: 32px;
      margin-top: -16px;
      box-sizing: border-box;
      border: 1px solid currentColor;
      border-radius: 2px;
      background: var(--paper);
    }
    .split-divider-grip::before,
    .split-divider-grip::after {
      content: "";
      position: absolute;
      top: 8px;
      width: 2px;
      height: 14px;
      background: var(--ink-3);
    }
    .split-divider-grip::before { left: 2px; }
    .split-divider-grip::after { right: 2px; }
    .split-divider:hover,
    .split-divider:focus-visible,
    html.split-drag .split-divider { color: var(--ink-2); }
    .split-divider:hover .split-divider-grip::before,
    .split-divider:hover .split-divider-grip::after,
    .split-divider:focus-visible .split-divider-grip::before,
    .split-divider:focus-visible .split-divider-grip::after,
    html.split-drag .split-divider-grip::before,
    html.split-drag .split-divider-grip::after { background: var(--ink-2); }
    .split-divider:focus { outline: none; }
    .split-divider:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 0; }
    html.split-drag,
    html.split-drag body { overflow-anchor: none; }
    html.split-drag,
    html.split-drag * { user-select: none; -webkit-user-select: none; cursor: col-resize !important; }
    @media print { .split-divider { display: none !important; } }
    /* Home link, September 27, 2026. The header title links to the edition's
       main page and keeps the title's look. */
    .top .top-brand .top-home {
      display: inline;
      min-height: 0;
      color: inherit;
      font: inherit;
      line-height: inherit;
      white-space: inherit;
      text-decoration: none;
    }
    .top .top-brand .top-home:hover {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: .14em;
    }

/* Toolbar, October 1, 2026: unboxed text controls on one baseline, a hairline
   under the page field, and an underline for the chosen language. Enter
   submits the page field, so its Go button stays for screen readers but is
   not drawn. */
@media (min-width: 981px) {
  .top .reader-tools { gap: 28px !important; align-items: center; }
  .top .reader-tools > :is(.scan-jump-form, .page-controls, .text-layer-links, .sheet-tools) {
    display: flex; align-items: center; gap: 22px !important; height: 36px;
    margin: 0 !important; padding: 0 !important;
    border: 0 !important; background: none !important; box-shadow: none !important;
  }
  .top .reader-tools > .scan-jump-form { gap: 8px !important; }
  .top .reader-tools > .scan-jump-form > :is(label, .jump-total),
  .top .reader-tools > .page-controls > button,
  .top .reader-tools > .text-layer-links > button,
  .top .reader-tools > .sheet-tools > summary {
    display: inline-flex !important; align-items: center;
    height: 36px !important; line-height: 36px !important; padding: 0 !important;
    border: 0 !important; background: none !important; box-shadow: none !important;
    border-radius: 0 !important; color: var(--ink-3) !important; font-size: 15px !important;
  }
  .top .reader-tools > .page-controls > button:hover,
  .top .reader-tools > .text-layer-links > button:hover,
  .top .reader-tools > .sheet-tools > summary:hover {
    color: var(--ink) !important;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px;
  }
  .top .reader-tools > .text-layer-links > button[aria-pressed="true"] {
    color: var(--ink) !important;
    text-decoration: underline; text-decoration-thickness: 2px;
    text-decoration-color: var(--accent); text-underline-offset: 7px;
  }
  .top .reader-tools > .scan-jump-form > input {
    align-self: center !important; margin: 0 !important;
    width: 2.6em !important; height: 26px !important; line-height: 26px !important; padding: 0 !important;
    border: 0 !important; background: none !important; border-radius: 0 !important;
    box-shadow: inset 0 -1px 0 var(--ink-3) !important;
    text-align: center; font-size: 15px !important; color: var(--ink) !important;
    font-variant-numeric: tabular-nums;
  }
  .top .reader-tools > .scan-jump-form > button[type="submit"] {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .top .reader-tools :is(button, summary, input):focus-visible {
    outline: 2px solid var(--accent) !important; outline-offset: 3px;
  }
}

    /* Header control system, September 28, 2026. Appended last so it wins
       over every earlier pass. Every control in the bar is a real,
       delineated button: a hairline box, one hover fill, one focus ring.
       The page box and Go share one outline; English|German share another
       with the selected segment filled solid. Heights follow --ctl-h, which
       is already 32px at desktop and 44px at phone widths (<=980px). */
    .top .page-controls,
    .top .reader-tools { gap: 8px; }
    .top .text-layer-links,
    .top .scan-jump-form { gap: 0; }
    .top #pages-toggle,
    .top #search-toggle,
    .top .page-control,
    .top .scan-jump-form,
    .top .text-layer-links,
    .top .sheet-tools > summary {
      box-sizing: border-box;
      min-height: var(--ctl-h);
      border: 1px solid var(--ink-3);
      border-radius: 0;
      background: var(--paper);
    }
    .top #pages-toggle,
    .top #search-toggle,
    .top .page-control,
    .top .sheet-tools > summary {
      display: inline-flex;
      align-items: center;
      line-height: 1;
      padding: 0 12px;
    }
    .top #pages-toggle:hover,
    .top #search-toggle:hover,
    .top .page-control:hover,
    .top .sheet-tools > summary:hover { background: #ebe4d8; color: var(--ink); }
    .top #pages-toggle:focus-visible,
    .top #search-toggle:focus-visible,
    .top .page-control:focus-visible,
    .top .sheet-tools > summary:focus-visible,
    .top .text-layer-links button:focus-visible,
    .top .scan-jump-form input:focus-visible,
    .top .scan-jump-form button:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 2px;
    }
    .top .sheet-tools[open] > summary { background: #ebe4d8; }
    .top .sheet-tools > summary svg { flex: 0 0 auto; margin-left: 6px; }
    /* The page box: Page, the field, of N and Go inside one shared outline. */
    .top .scan-jump-form {
      display: inline-flex;
      align-items: stretch;
      padding: 0;
    }
    .top .scan-jump-form > label,
    .top .scan-jump-form .jump-total {
      display: inline-flex;
      align-items: center;
      padding: 0 8px;
      color: var(--ink);
      line-height: 1;
    }
    .top .scan-jump-form input {
      width: 3.5em;
      min-width: 0;
      height: auto;
      align-self: stretch;
      margin: 0;
      border: 0;
      border-radius: 0;
      box-shadow: inset 1px 0 0 var(--rule), inset -1px 0 0 var(--rule);
      padding: 0 6px;
      text-align: center;
    }
    .top .scan-jump-form button {
      display: inline-flex;
      align-items: center;
      height: auto;
      align-self: stretch;
      margin: 0;
      border: 0;
      border-radius: 0;
      padding: 0 12px;
      line-height: 1;
    }
    .top .scan-jump-form button:hover { background: #ebe4d8; color: var(--ink); }
    .top .scan-jump-form .jump-status { flex-basis: 100%; }
    /* English | German: one outline, the current layer filled solid. */
    .top .text-layer-links {
      display: inline-flex;
      align-items: stretch;
      padding: 0;
    }
    .top .text-layer-links button {
      display: inline-flex;
      align-items: center;
      height: auto;
      align-self: stretch;
      margin: 0;
      border: 0;
      border-radius: 0;
      padding: 0 12px;
      line-height: 1;
    }
    .top .text-layer-links button + button { box-shadow: inset 1px 0 0 var(--rule); }
    .top .text-layer-links button:hover { background: #ebe4d8; color: var(--ink); }
    .top .text-layer-links button[aria-pressed="true"],
    .top .text-layer-links button[aria-pressed="true"]:hover {
      background: var(--ink);
      color: var(--paper);
      text-decoration: none;
      font-weight: 400;
    }
    /* Keep "of N" visible at phone widths; only the word Page may drop, and
       stays as the field's accessible label rather than disappearing. */
    @media (max-width: 599px) {
      .top .jump-total {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        display: inline-flex;
        align-items: center;
      }
    }
    /* Page image. Moved into the title row (September 28, 2026) so the
       phone header is two rows, not three: row one is the title and this
       button, row two is every other control. Hidden above 980px, where
       the scan panel is always shown. */
    .top .top-brand .scan-toggle {
      display: none;
      position: static;
      flex: 0 0 auto;
      width: auto;
      max-width: none;
      min-height: var(--ctl-h);
      margin: 0;
      padding: 0 12px;
      border: 1px solid var(--ink-3);
      border-radius: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--sans);
      font-size: var(--ui-size);
      text-align: left;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
    }
    .top .top-brand .scan-toggle:hover { background: #ebe4d8; color: var(--ink); }
    .top .top-brand .scan-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
    .top .top-brand .scan-toggle[aria-expanded="true"] { background: #ebe4d8; }
    .top .top-brand .scan-toggle .ctrl-short { display: none; }
    @media (max-width: 980px) {
      .top .top-brand .scan-toggle { display: inline-flex; align-items: center; }
      .top .top-brand {
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        min-height: 44px;
      }
      .top .top-brand > b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    }
    @media (max-width: 599px) {
      .top .top-in { padding-top: 8px; }
      .top .top-brand > b {
        font-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    @media (max-width: 359px) {
      .top .top-brand .scan-toggle .ctrl-full { display: none; }
      .top .top-brand .scan-toggle .ctrl-short { display: inline; }
    }
    /* Row two, under 600px: the page unit, All pages, Search and More, left
       aligned in that order, all on one line. Smaller padding and gaps buy
       back the room a 44px touch target needs; nothing here drops below
       that height. */
    @media (max-width: 599px) {
      .top .reader-tools {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start;
        width: 100%;
        gap: 6px;
      }
      .top .reader-tools::after { content: none !important; }
      .top .reader-tools .text-layer-links { display: none !important; }
      .top .page-controls { display: flex; gap: 6px; }
      .top .reader-tools .scan-jump-form { order: 1; margin-left: 0; }
      .top .page-controls { order: 2; }
      .top .reader-tools .sheet-tools { order: 3; margin-left: 0; }
      .top .scan-jump-form,
      .top #pages-toggle,
      .top #search-toggle,
      .top .sheet-tools > summary { min-height: 44px; }
      .top .scan-jump-form > label,
      .top .scan-jump-form .jump-total { padding: 0 6px; }
      .top .scan-jump-form input { padding: 0 4px; }
      .top .scan-jump-form button,
      .top #pages-toggle,
      .top #search-toggle,
      .top .sheet-tools > summary { padding: 0 8px; }
    }
    .top #pages-toggle .ctrl-short { display: none; }
    @media (max-width: 359px) {
      .top #pages-toggle .ctrl-full { display: none; }
      .top #pages-toggle .ctrl-short { display: inline; }
      /* A narrow phone (320px) has 9-24px less room than the fit above
         assumes. Tighter gaps and padding buy it back; 44px height and
         every control stay put. */
      .top .reader-tools { gap: 2px; }
      .top #pages-toggle,
      .top #search-toggle,
      .top .sheet-tools > summary { padding: 0 3px; }
      .top .scan-jump-form > label,
      .top .scan-jump-form .jump-total { padding: 0 3px; }
      .top .scan-jump-form input { padding: 0 2px; }
      .top .scan-jump-form button { padding: 0 5px; }
      .top .sheet-tools > summary svg { margin-left: 4px; }
    }

    :root { --sassen-support-size: max(15px, calc(var(--sassen-reader-size) * .875)); }
    .arrival-photo figcaption,
    .arrival-sheet figcaption,
    .reader-appendix .file-about :is(dd, p),
    .editorial-note .editorial-cite,
    .person-row p { font-size: 15px; }

    .top .reader-site-nav {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 16px;
      white-space: nowrap;
      font: 400 14px/1.4 var(--sans);
    }
    .top .reader-site-nav a { min-height: 36px; }
    @media (min-width: 981px) and (max-width: 1200px) {
      .top .top-in { flex-wrap: wrap; padding: 4px 0; }
      .top .top-brand { flex: 1 1 100%; min-height: 36px; }
      .top .reader-tools { width: 100%; min-height: 36px; }
    }
    @media (max-width: 980px) {
      .top .top-brand { flex-wrap: wrap !important; }
      .top .top-brand > b { flex: 1 1 auto; }
      .top .reader-site-nav {
        flex: 1 0 100%;
        order: 3;
        min-height: 44px;
        border-top: 1px solid var(--rule);
      }
      .top .reader-site-nav a { min-height: 44px; }
    }

    /* All pages as a contents list: topic and range, then page numbers. */
    .pages-dialog .pages-group {
      display: grid; grid-template-columns: minmax(12rem, 18rem) 1fr; gap: 8px 24px;
      padding: 16px; border-top: 1px solid var(--rule); align-items: start;
    }
    .pages-dialog .pages-group:first-of-type { border-top: 0; }
    .pages-topic h3 { margin: 0; font: 600 1rem/1.35 var(--serif); color: var(--ink); }
    .pages-topic p { margin: 4px 0 0; font: .875rem/1.4 var(--sans); color: var(--ink-3); }
    .pages-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
    .pages-list a {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 2.75rem; min-height: 2.25rem; padding: 0 8px;
      border: 1px solid var(--rule); background: var(--paper);
      color: var(--ink-2); font: .9rem/1 var(--sans); text-decoration: none;
    }
    .pages-list a:hover { border-color: var(--ink-3); color: var(--ink); }
    .pages-list a:focus-visible { outline: 3px solid var(--slate, #40505b); outline-offset: 2px; }
    .pages-list a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 600; }
    @media (max-width: 700px) {
      .pages-dialog .pages-group { grid-template-columns: 1fr; }
    }

    /* Found words get a hand-drawn pen squiggle instead of a yellow box.
       Two waves of different lengths keep the line from looking machine-made. */
    mark.query-hit {
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='6' viewBox='0 0 14 6'%3E%3Cpath d='M0 3.6 C2.4 0.9 4.6 0.8 7 3.1 S11.6 5.6 14 2.6' fill='none' stroke='%233d4a57' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 100% / 14px 6px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='6' viewBox='0 0 23 6'%3E%3Cpath d='M0 2.8 C4 5.4 7.5 5.2 11.5 2.9 S19 0.7 23 3.2' fill='none' stroke='%233d4a57' stroke-width='1' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") repeat-x 3px 100% / 23px 6px;
      color: inherit; padding: 0 0 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
    }
    mark.people-arrival-name { font-weight: 700; box-shadow: none; }
    @media print { mark.query-hit { background: none; text-decoration: underline wavy #3d4a57; } }
    /* A passage read aloud from a book or document sits indented, like a
       block quotation, so it doesnt read as the questioners own claim. */
    .interview-reading .interview-speech { padding-left: 1.5rem; }
    /* Site mark: a typed sheet with two punched holes, like the scans. */
    .top-home::before {
      content: ""; display: inline-block; width: 1.05em; height: 1.05em; margin-right: .45em;
      vertical-align: -.16em; background: url("icon.svg") center / contain no-repeat;
    }
    /* The first mention of each person on a page links to their People card. */
    .interview-speech a.person-link {
      color: inherit; cursor: pointer; text-decoration-line: underline; text-decoration-style: solid;
      text-decoration-color: var(--rule); text-decoration-thickness: 1px; text-underline-offset: .14em;
    }
    .interview-speech a.person-link:hover { text-decoration-color: var(--ink); }
    .interview-speech a.person-link:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; }
    @media (max-width: 600px) { .interview-reading .interview-speech { padding-left: 1rem; } }

/* Checked settings, October 13, 2026. The mark follows the accessible state. */
.top .reader-tools :is(.sheet-tools-body, .text-layer-links) button[aria-pressed] {
  position: relative;
  padding-left: 22px !important;
}
.top .reader-tools :is(.sheet-tools-body, .text-layer-links) button[aria-pressed]::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  width: 5px;
  height: 10px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: translateY(-65%) rotate(45deg);
  visibility: hidden;
}
.top .reader-tools :is(.sheet-tools-body, .text-layer-links) button[aria-pressed="true"]::before {
  visibility: visible;
}

/* Compact search panel, October 13, 2026. */
.top .search-panel { padding: 16px 24px; }
.top .search-panel .contents-index-in {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: start; gap: 0 12px; max-width: 900px; margin: 0 auto;
}
.top .search-panel .evidence-index-head,
.top .search-panel .search { display: contents; }
.top .search-panel h2 {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.top .search-panel input[type="search"] {
  grid-column: 1; grid-row: 1; box-sizing: border-box;
  width: 100%; max-width: none; min-width: 0; height: 44px;
  margin: 0; padding: 10px 12px; border: 1px solid var(--rule);
  border-radius: 0; background: var(--paper); color: var(--ink);
  font: 16px/22px var(--sans);
}
.top .search-panel input[type="search"]:focus {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.top .search-panel .evidence-close {
  grid-column: 2; grid-row: 1; min-height: 44px;
  padding: 0 8px; border: 0; font: 16px/44px var(--sans);
}
.top .search-panel .evidence-close:hover { text-decoration: underline; }
.top .search-panel .evidence-close:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.top .search-panel .search-status,
.top .search-panel .search-results { grid-column: 1 / -1; }
.top .search-panel .search-status { margin: 12px 0 0; }
.top .search-panel .search-results { margin: 8px 0 0; padding: 0; }
.top .search-panel .search-status:empty,
.top .search-panel .search-results:empty { display: none; }
@media (max-width: 600px) {
  .top .search-panel { padding: 12px 16px; }
  .top .search-panel .contents-index-in { gap: 0 8px; }
}

/* Search results stay compact; only the result list scrolls. */
.top .search-panel { max-height: calc(100dvh - var(--reader-top, 96px) - 12px); overflow: hidden; }
.top .search-panel .search-results {
  max-height: min(42vh, 360px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-gutter: stable; margin-top: 8px;
}
.top .search-panel .search-results li { padding: 0; }
.top .search-panel .search-results a {
  display: grid; grid-template-columns: 110px minmax(0, 1fr);
  gap: 2px 16px; padding: 12px 8px 12px 0; font: 16px/1.5 var(--sans);
}
.top .search-panel .hit-page { grid-column: 1; grid-row: 1; color: var(--accent); }
.top .search-panel .hit-where { grid-column: 1; grid-row: 2; font: 14px/1.4 var(--sans); }
.top .search-panel .hit-text { grid-column: 2; grid-row: 1 / 3; margin: 0; font: 16px/1.5 var(--sans); }
.top .search-panel .search-results a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 600px) {
  .top .search-panel .search-results { max-height: min(42vh, 320px); }
  .top .search-panel .search-results a { display: block; padding: 10px 8px 10px 0; }
  .top .search-panel .hit-where { margin-left: 8px; }
  .top .search-panel .hit-text { margin-top: 3px; }
}