:root {
      --paper: #f5f1e8;
      --paper-deep: #ebe4d8;
      --scan-paper: #fffefa;
      --ink: #221a14;
      --ink-2: #3f342a;
      --ink-3: #6a5a48;
      --rule: #9c9488;
      --slate: #40505b;
      --serif: "IBM Plex Serif", serif;
      --sans: "IBM Plex Sans", sans-serif;
      --mono: "IBM Plex Mono", monospace;
      --reader-top: 64px;
      --scan-rail-top: 76px;
    }

    * { box-sizing: border-box; }
    /* overflow-x on body makes body a scroll container, which silently
       breaks scrollIntoView and the scan jump on a document this tall.
       Clip on html instead. */
    /* Jumps are instant. A smooth scroll across a 200k px document never
       finished and left the marker mid-flight. */
    html { scroll-behavior: auto; overflow-x: hidden; }
    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--serif);
      font-size: 17px;
      line-height: 1.62;
      text-rendering: optimizeLegibility;
    }
    a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: .14em; }
    a:hover { color: var(--slate); text-decoration-color: var(--slate); }
    a:focus-visible,
    button:focus-visible,
    summary:focus-visible,
    input:focus-visible,
    select:focus-visible {
      outline: 2px solid var(--slate);
      outline-offset: 3px;
    }
    img { display: block; max-width: 100%; height: auto; }
    .skip { position: absolute; left: -9999px; }
    .skip:focus { position: fixed; left: 12px; top: 12px; z-index: 30; padding: 7px 10px; background: var(--ink); color: var(--paper); font-family: var(--sans); }

    .top {
      position: sticky;
      top: 0;
      z-index: 8;
      background: var(--paper-deep);
      border-bottom: 1px solid var(--ink-2);
      font-family: var(--sans);
      font-size: 14px;
      max-width: 100vw;
      /* Sideways only. The contents panel hangs below the bar and must not
         be clipped by the guard that stops the nav widening the page. */
      overflow-x: clip;
      overflow-y: visible;
    }
    .top-in {
      max-width: 100%;
      width: min(1240px, calc(100% - 40px));
      margin: 0 auto;
      padding: 11px 0 10px;
    }
    .top-brand,
    .reader-tools,
    .reader-location,
    .page-controls {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
    }
    .top-brand { gap: 8px 24px; }
    .reader-tools {
      gap: 7px 18px;
      margin-top: 9px;
      padding-top: 8px;
      border-top: 1px solid var(--rule);
      color: var(--ink-3);
      font-size: .78rem;
    }
    .reader-tools button,
    .reader-tools summary {
      display: inline-flex;
      min-height: 34px;
      align-items: center;
    }
    /* More holds Draft translation, Definitions and About, one level down. */
    .sheet-tools { position: relative; }
    .sheet-tools > summary { color: var(--ink-2); cursor: pointer; }
    .sheet-tools-body {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      z-index: 12;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      width: max-content;
      max-width: min(340px, calc(100vw - 28px));
      padding: 10px 14px;
      border: 1px solid var(--rule);
      background: var(--paper-deep);
    }
    .sheet-tools:not([open]) .sheet-tools-body { display: none; }
    .sheet-tools-body button {
      padding: 0;
      border: 0;
      background: none;
      font: inherit;
      color: var(--ink);
      cursor: pointer;
    }
    .sheet-tools-body [aria-pressed="true"] { font-weight: 600; text-decoration: underline; text-underline-offset: .3em; }
    .sheet-tools-body a { display: inline-flex; align-items: center; min-height: 34px; color: var(--ink); }
    .interview-page-head h2 { display: inline; margin: 0; font: inherit; letter-spacing: normal; }
    /* Pages dialog. Every sheet as a picture, grouped by section. */
    .pages-dialog {
      width: min(1100px, calc(100vw - 32px));
      max-width: none;
      max-height: calc(100vh - 32px);
      padding: 0;
      border: 1px solid var(--ink-2);
      background: var(--paper);
      color: var(--ink);
      font-family: var(--sans);
      overscroll-behavior: contain;
    }
    .pages-dialog::backdrop { background: rgb(33 30 26 / .55); }
    .pages-dialog-head {
      position: sticky;
      top: 0;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 16px;
      border-bottom: 1px solid var(--rule);
      background: var(--paper-deep);
    }
    .pages-dialog-head h2 { margin: 0; font-size: 1.05rem; }
    .pages-close {
      min-height: 44px;
      padding: 0 12px;
      border: 1px solid var(--rule);
      background: var(--paper);
      color: var(--ink);
      font: inherit;
      cursor: pointer;
    }
    .pages-group { padding: 0 16px 8px; }
    .pages-group h3 {
      max-width: 44rem;
      margin: 18px 0 10px;
      font-family: var(--serif);
      font-size: .95rem;
      line-height: 1.4;
      letter-spacing: normal;
    }
    .pages-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
      gap: 12px 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .pages-grid a {
      display: block;
      padding: 4px 4px 2px;
      border: 1px solid transparent;
      color: var(--ink-2);
      font-size: .8rem;
      text-align: center;
      text-decoration: none;
    }
    .pages-grid a:hover { border-color: var(--rule); color: var(--ink); }
    .pages-grid img { width: 100%; height: 120px; object-fit: contain; }
    .pages-grid span { display: block; margin-top: 4px; overflow-wrap: anywhere; }
    .pages-grid a[aria-current="page"] { border: 2px solid var(--ink); padding: 3px 3px 1px; color: var(--ink); font-weight: 600; }
    .top b { font-weight: 600; }
    /* The scan-number nav can run to hundreds of links. It scrolls inside its
       own track; min-width:0 stops the flex item from widening the header, and
       the body therefore never scrolls sideways. */
    .top-in nav {
      flex: 1 1 100%;
      min-width: 0;
      max-width: 100%;
      display: flex;
      flex-wrap: nowrap;
      gap: 12px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      font-family: var(--mono);
      font-size: .74rem;
      padding-bottom: 3px;
      scrollbar-width: thin;
    }
    .top-in nav a { flex: 0 0 auto; white-space: nowrap; }
    .top a { text-decoration: none; }
    .reader-location { color: var(--ink); font-family: var(--sans); font-size: .76rem; }
    .reader-progress {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      pointer-events: none;
    }
    .reader-progress > span { display: block; height: 100%; width: 0; background: var(--slate); }
    /* The header gives its buttons a display, which outranks the browser's
       own rule for the hidden attribute. Both new controls start hidden. */
    .reader-tools [hidden] { display: none !important; }
    mark.reader-highlight { background: #ffeb8c; color: inherit; }
    .page-controls { gap: 0 12px; }
    .page-control { white-space: nowrap; }
    .page-control[aria-disabled="true"] { color: var(--ink-3); pointer-events: none; }

    main { width: min(1240px, calc(100% - 40px)); margin: 0 auto; }
    h1, h2, h3 { margin-top: 0; font-weight: 600; line-height: 1.15; letter-spacing: -.018em; }
    h1 { margin-bottom: 14px; max-width: 34ch; font-size: clamp(1.7rem, 3vw, 2.1rem); }
    h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
    h3 { font-size: 1rem; font-family: var(--sans); letter-spacing: 0; }
    h4 { margin: 0; font-weight: 600; }
    p { margin: 0 0 1em; }

    .filehead { max-width: 790px; padding: 52px 0 30px; }
    .filehead dl {
      margin: 0;
      display: grid;
      grid-template-columns: max-content minmax(0, 1fr);
      gap: 4px 18px;
      font-family: var(--sans);
      font-size: .86rem;
      color: var(--ink-2);
    }
    .filehead dt { color: var(--ink-3); }
    .filehead dd {
      margin: 0;
      min-width: 0;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .filehead .provenance {
      max-width: 72ch;
      margin: 24px 0 0;
      padding: 0;
      color: var(--ink-2);
      font-size: 1rem;
    }
    .reader-start {
      margin: 24px 0 0;
      font-family: var(--sans);
      font-size: .86rem;
    }
    .reader-start a {
      display: inline-flex;
      min-height: 44px;
      align-items: center;
      padding: 8px 16px;
      background: var(--ink);
      color: var(--paper);
      text-decoration: none;
    }
    .reader-start a:hover { background: var(--slate); color: var(--paper); }
    .reader-start span { color: var(--ink-3); }

    .cover-main .filehead { max-width: 820px; padding: 40px 0 24px; }
    .cover-main .filehead h1 {
      max-width: 28ch;
      font-size: clamp(2rem, 4vw, 2.7rem);
      line-height: 1.08;
      letter-spacing: -.025em;
    }
    .cover-main .filehead .provenance { max-width: 68ch; font-size: 1rem; }

    .holding { margin: 22px 0 0; font-family: var(--sans); }
    .holding > summary {
      color: var(--ink-3);
      cursor: pointer;
      font-size: .8rem;
      padding: 8px 0;
    }
    .holding dl { margin: 4px 0 12px; }
    .file-index {
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      font-family: var(--sans);
    }
    .file-index > summary {
      padding: 11px 0;
      color: var(--ink-3);
      cursor: pointer;
      font-size: .8rem;
      list-style-position: outside;
    }
    .file-index[open] > summary { border-bottom: 1px solid var(--rule); }
    .file-index-list { font-family: var(--sans); }
    .file-index-list a {
      display: grid;
      grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
      gap: 8px 24px;
      align-items: baseline;
      padding: 12px 0;
      border-bottom: 1px solid var(--rule);
      text-decoration: none;
    }
    .file-index-list a:last-child { border-bottom: 0; }
    .file-index-list a:hover { color: var(--slate); }
    .file-index-note { margin: 14px 0 0; font-family: var(--sans);
      font-size: .9rem; color: var(--ink-2); }
    .file-index .file-name { font-weight: 600; }
    .file-index .file-meta { color: var(--ink-3); font-size: .82rem; }

    .reader-topics {
      border-bottom: 1px solid var(--rule);
      font-family: var(--sans);
    }
    .reader-topics > summary {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 11px 0;
      color: var(--ink-3);
      cursor: pointer;
      font-size: .8rem;
      list-style-position: outside;
    }
    .reader-topics > summary span { font-size: .76rem; }
    .reader-topics[open] > summary { border-bottom: 1px solid var(--rule); }
    .reader-topic-list a {
      display: grid;
      grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
      gap: 8px 24px;
      padding: 10px 0;
      border-bottom: 1px dotted var(--rule);
      color: var(--ink-2);
      text-decoration: none;
    }
    .reader-topic-list a:last-child { border-bottom: 0; }
    .reader-topic-list a:hover { color: var(--slate); }
    .reader-topic-range {
      color: var(--ink-3);
      font-family: var(--sans);
      font-size: .76rem;
    }
    .reader-topic-break {
      margin: 30px 0 8px;
      padding: 10px 0 0;
      border-top: 1px solid var(--ink-2);
      scroll-margin-top: calc(var(--scan-rail-top, 96px) + 12px);
    }
    .reader-topic-break p { margin: 0; }
    .reader-topic-break .reader-topic-range {
      margin-bottom: 5px;
    }
    .reader-topic-text {
      max-width: 76ch;
      color: var(--ink-2);
      font-size: .92rem;
      line-height: 1.55;
    }

    .file-section { scroll-margin-top: calc(var(--scan-rail-top, 96px) + 12px); }
    .file-section-head {
      padding: 40px 0 12px;
      border-bottom: 1px solid var(--rule);
    }
    .file-section-head h2 {
      margin-bottom: 4px;
      color: var(--ink-2);
      font-family: var(--sans);
      font-size: .82rem;
      font-weight: 600;
    }
    .file-section-head p {
      margin: 0;
      color: var(--ink-3);
      font-family: var(--sans);
      font-size: .82rem;
    }

    .scan-index {
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      font-family: var(--sans);
      font-size: .82rem;
    }
    .scan-index summary {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      padding: 11px 0;
      color: var(--ink-2);
      cursor: pointer;
      list-style-position: outside;
    }
    .scan-index summary::marker { color: var(--ink-3); }
    .scan-index summary span { color: var(--ink-3); font-size: .76rem; }
    .scan-index[open] summary { border-bottom: 1px solid var(--rule); }

    .jump {
      padding: 14px 0;
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      font-family: var(--sans);
      font-size: .82rem;
    }
    .jump a { display: inline-block; margin: 0 20px 4px 0; text-decoration: none; }

    /* One row of controls sits above the transcript: the search box and the
       file and scan jump. Everything else moved below the reading surface. */
    .jump-tools {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 28px;
      padding: 12px 0;
      border-bottom: 1px solid var(--rule);
      font-family: var(--sans);
    }
    .jump-tools .search { flex: 1 1 340px; padding: 0; border-bottom: 0; }
    .jump-tools .search label { margin-bottom: 4px; }
    .jump-tools .scan-jump-form { margin: 0; }
    .jump-tools[hidden] { display: none; }
    .scan-jump-form {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 7px;
    }
    .scan-jump-form label,
    .scan-jump-form .jump-total { color: var(--ink-3); font-size: .78rem; }
    .scan-jump-form select,
    .scan-jump-form input,
    .scan-jump-form button {
      min-height: 34px;
      border: 1px solid var(--rule);
      background: var(--paper);
      color: var(--ink);
      font: inherit;
      font-size: .86rem;
    }
    .scan-jump-form select { padding: 5px 8px; }
    .scan-jump-form input { width: 90px; padding: 5px 8px; font-family: var(--mono); }
    .scan-jump-form button { padding: 5px 12px; cursor: pointer; }
    .scan-jump-form button:hover { border-color: var(--slate); color: var(--slate); }
    .scan-jump-form select:focus,
    .scan-jump-form input:focus,
    .scan-jump-form button:focus { outline: 2px solid var(--slate); outline-offset: 1px; }
    .top .scan-jump-form { margin: 0; align-items: center; max-width: 100%; }
    .top .scan-jump-form input { width: 64px; font-family: var(--sans); }
    .top .scan-jump-form .jump-status:empty { display: none; }
    .top .scan-jump-form .jump-status { max-width: 240px; white-space: normal; }
    .jump-status { flex-basis: 100%; margin: 0; color: var(--ink-3); font-size: .76rem; }

    .page {
      padding: 64px 0 74px;
      border-bottom: 1px solid var(--rule);
      scroll-margin-top: calc(var(--scan-rail-top, 96px) + 12px);
    }
    /* An interview page keeps 8px of top padding where the archive page
       keeps 64px, so its own anchor needs the difference back. */
    .interview-page { scroll-margin-top: calc(var(--scan-rail-top, 96px) + 6px); }
    body[data-view="interview"] .interview-page { border-bottom: 0; }
    .page-nav {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      margin-top: 16px;
      font-family: var(--sans);
      font-size: .8rem;
    }
    /* Scrolling already moves between scans, so the per-scan previous and
       next links only interrupt the read. They stay for keyboard and
       deep-link use, and appear when the page is focused or hovered. */
    /* The links keep their box so nothing moves under the cursor; only
       their ink fades. Scrolling is the normal way between scans. */
    /* The sticky bar already has Previous and Next for the scan in view,
       so a second copy between every pair only interrupts the read. */
    body[data-view="interview"] .interview-page > .page-nav { display: none; }
    .page-nav-link { max-width: 48%; text-decoration: none; }
    .page-nav-link:last-child { text-align: right; }
    .page-nav-direction { display: block; color: var(--ink-3); font-size: .72rem; }
    .page-nav-label { display: block; margin-top: 2px; }
    .page-nav-placeholder { max-width: 48%; color: var(--ink-3); font-size: .78rem; }

    .interview-layout {
      display: grid;
      grid-template-columns: minmax(340px, 448px) minmax(0, 760px);
      gap: 32px;
      align-items: start;
      max-width: 1240px;
      margin: 0 auto;
    }
    .interview-reader {
      grid-column: 2;
      grid-row: 1;
      min-width: 0;
    }
    .interview-page {
      padding: 10px 0 4px;
    }
    .interview-page:first-child { padding-top: 30px; }
    /* A scan boundary is a property of the paper, not of the conversation.
       It gets a dotted rule with the label set into it, so the eye can cross
       it without stopping. */
    .interview-page-head {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 5px 14px;
      margin: 0 0 8px;
      padding-top: 10px;
      border-top: 1px dotted var(--rule);
      color: var(--ink-3);
      font-family: var(--sans);
      font-size: .72rem;
    }
    .interview-page:first-child .interview-page-head { border-top: 0; padding-top: 0; }
    .interview-page-head .interview-scan {
      color: var(--ink-2);
      font-family: var(--mono);
      font-weight: 600;
    }
    .interview-page-head .interview-band { color: var(--ink-3); }
    .interview-page-head .interview-image { color: var(--ink-3); }
    .file-about { margin-top: 14px; font-family: var(--sans); font-size: .78rem; color: var(--ink-3); }
    .file-about summary { cursor: pointer; color: var(--ink-2); font-weight: 600; }
    .file-about dl { margin: 8px 0 0; }
    .file-about dt { margin-top: 7px; font-size: .7rem; }
    .file-about dd { margin: 0; color: var(--ink); }
    .file-about p { margin: 9px 0 0; line-height: 1.45; }
    .interview-cover {
      padding: 4px 0;
      color: var(--ink-3);
      font-family: var(--sans);
      font-size: .86rem;
    }
    .interview-cover p { margin: 0; }
    .interview-status {
      margin: 0;
      color: var(--ink-3);
      font-family: var(--sans);
      font-size: .72rem;
    }
    .page-reference {
      margin: 4px 0 18px;
      padding: 10px 0 11px;
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      color: var(--ink-3);
      font-family: var(--sans);
      font-size: .76rem;
    }
    .page-reference h3 {
      margin: 0 0 7px;
      color: var(--ink-2);
      font-family: var(--sans);
      font-size: .76rem;
      font-weight: 600;
    }
    .page-reference h4 {
      margin: 10px 0 4px;
      color: var(--ink-2);
      font-family: var(--sans);
      font-size: .76rem;
      font-weight: 600;
    }
    .page-context-text {
      max-width: 76ch;
      margin: 0 0 7px;
      color: var(--ink-2);
      line-height: 1.55;
    }
    .page-reference dl { margin: 0; }
    .page-reference dl > div {
      display: grid;
      grid-template-columns: minmax(110px, 150px) minmax(0, 1fr);
      gap: 12px;
      padding: 5px 0;
      border-top: 1px dotted var(--rule);
    }
    .page-reference dl > div:first-child { border-top: 0; }
    .page-reference dt,
    .page-reference dd { margin: 0; }
    .page-reference dt { color: var(--ink-2); font-weight: 600; }
    .page-reference dd { line-height: 1.5; }
    .page-reference-more { margin-top: 4px; }
    .page-reference-more summary {
      display: inline-block;
      padding: 4px 0 1px;
      color: var(--ink-2);
      cursor: pointer;
      list-style-position: outside;
    }
    .page-reference-more[open] summary { margin-bottom: 3px; }
    /* One continuous read. Turns are separated by space and by the
       speaker name, not by rules, so the eye runs straight down the page. */
    /* A gap is a fact about the sheet, not emphasis. It stays quiet in the
       line and explains itself on hover. */
    .gap {
      color: var(--ink-3);
      font-family: var(--sans);
      font-size: .82em;
      cursor: help;
      border-bottom: 1px dotted var(--rule);
      white-space: nowrap;
    }
    .gap-mark { opacity: .55; }
    .gap[data-cause="typist"] { font-style: italic; }
    .scan-marker {
      color: inherit;
      text-decoration-line: underline;
      text-decoration-style: solid;
      text-decoration-color: var(--slate);
      text-underline-offset: .14em;
      cursor: help;
    }
    .scan-marker:hover { text-decoration-color: var(--ink); }
    .scan-marker:focus-visible {
      outline: 2px solid var(--slate);
      outline-offset: 2px;
    }
    /* Reading aids are off by default: definition words and person notes
       sit in the text as plain type. The Reading aids control in the sticky
       bar turns the dotted underlines and the mouseovers on. */
    .glossary-trigger,
    .page-help {
      color: inherit;
      font-style: inherit;
      text-decoration: none;
      cursor: inherit;
    }
    body[data-aids="on"] .glossary-trigger,
    body[data-aids="on"] .page-help {
      text-decoration-line: underline;
      text-decoration-style: solid;
      text-decoration-color: var(--slate);
      text-decoration-thickness: 1px;
      text-underline-offset: .14em;
      cursor: help;
    }
    body[data-aids="on"] .glossary-trigger:hover,
    body[data-aids="on"] .page-help:hover { text-decoration-color: var(--ink); }
    body[data-aids="on"] .glossary-trigger[data-entity-key] {
      cursor: pointer;
      text-decoration-style: solid;
    }
    /* This retained German word has an always-visible explanation. */
    body .glossary-trigger[data-glossary-id="versippung"] {
      text-decoration-line: underline;
      text-decoration-style: solid;
      text-decoration-color: var(--slate);
      text-decoration-thickness: 1px;
      text-underline-offset: .14em;
      cursor: help;
    }
    .glossary-trigger[role="button"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; cursor: pointer; display: inline; padding: 0; border: 0; border-radius: 0; background: transparent; font: inherit; text-align: inherit; white-space: normal; }
    .aids-toggle {
      appearance: none;
      min-height: 30px;
      padding: 0 0 1px;
      border: 0;
      border-bottom: 1px solid transparent;
      background: transparent;
      color: var(--ink-2);
      cursor: pointer;
      font: inherit;
    }
    .aids-toggle:hover { border-bottom-color: currentColor; color: var(--ink); }
    .aids-toggle[aria-pressed="true"] {
      border-bottom-color: currentColor;
      color: var(--ink);
      font-weight: 600;
    }
    .aids-toggle:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; }
    .evidence-index-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 6px 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--ink-2);
    }
    .evidence-index-head p {
      margin: 0;
      color: var(--ink-3);
      font-size: .78rem;
      line-height: 1.5;
    }
    .evidence-index-head p { grid-column: 1 / -1; }
    .evidence-close {
      min-width: 40px;
      min-height: 40px;
      padding: 0 8px;
      border: 1px solid var(--rule);
      background: transparent;
      color: var(--ink-2);
      cursor: pointer;
      font: inherit;
    }
    .evidence-close:hover,
    .evidence-close:focus-visible {
      border-color: var(--ink-2);
      color: var(--ink);
    }
    /* The contents panel hangs below the sticky bar. The scan and the
       reading column keep their places and their paper. */
    .top .contents-index {
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      max-height: 70vh;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 12px 20px 18px;
      background: var(--paper);
      border-bottom: 1px solid var(--rule);
      box-shadow: none;
      z-index: 4;
      font-family: var(--sans);
    }
    .contents-index[hidden] { display: none; }
    .top .search-panel {
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      max-height: 70vh;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 12px 20px 18px;
      background: var(--paper);
      border-bottom: 1px solid var(--rule);
      z-index: 4;
      font-family: var(--sans);
    }
    .search-panel[hidden] { display: none; }
    .search-panel h2 { margin: 0 0 6px; color: var(--ink); font-family: var(--serif); font-size: 1.15rem; }
    .search-panel .search { padding: 0; border-bottom: 0; }
    .search-panel .search > label {
      position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap;
    }
    .search-panel .search-results { max-height: none; overflow: visible; }
    /* A long list scrolls under its own title, so Close stays in reach. */
    .contents-index .evidence-index-head,
    .search-panel .evidence-index-head {
      position: sticky;
      top: -12px;
      z-index: 1;
      margin-top: -12px;
      padding-top: 12px;
      background: var(--paper);
    }
    .search-results a { display: block; padding: 2px 0; }
    .search-results a:hover .hit-page { color: var(--slate); text-decoration: underline; }
    .search-results .hit-text { display: block; }
    mark.query-hit { background: #ffeb8c; color: inherit; padding: 0; }
    .people-arrival-passage {
      background: #f3edce;
      box-shadow: none;
    }
    mark.people-arrival-name {
      font-weight: 700;
      box-shadow: inset 0 -2px var(--accent);
    }
    .page-cite {
      padding: 0;
      border: 0;
      background: none;
      color: var(--ink-3);
      font: inherit;
      text-decoration: underline;
      text-decoration-color: var(--rule);
      text-underline-offset: .14em;
      cursor: pointer;
    }
    .page-cite:hover { color: var(--slate); }
    .cite-box { margin: 0 0 14px; font-family: var(--sans); font-size: .8rem; color: var(--ink-2); }
    .cite-box textarea {
      display: block;
      width: 100%;
      min-height: 4.2em;
      padding: 6px 8px;
      border: 1px solid var(--rule);
      background: var(--paper);
      color: var(--ink);
      font: inherit;
      resize: vertical;
    }
    .cite-box p { margin: 4px 0 0; color: var(--ink-3); }
    .tools-about { display: none; }
    .top .reader-tools .scan-toggle { display: none; }
    .visually-hidden {
      position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap;
    }
    .query-miss { margin: 0 0 10px; font-family: var(--sans); font-size: .8rem; color: var(--ink-2); }
    .reader-welcome {
      max-width: 40rem;
      padding: 22px 0 18px;
      border-bottom: 1px solid var(--rule);
      font-family: var(--serif);
    }
    .reader-welcome h1 { margin: 0 0 10px; font-size: 1.5rem; font-weight: 600; }
    .reader-welcome p { margin: 0 0 10px; color: var(--ink-2); line-height: 1.55; }
    .reader-welcome-links {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 22px;
      font-family: var(--sans);
      font-size: .88rem;
    }
    .reader-welcome-links button {
      padding: 0;
      border: 0;
      background: none;
      color: inherit;
      font: inherit;
      text-decoration: underline;
      text-decoration-color: var(--rule);
      text-underline-offset: .14em;
      cursor: pointer;
    }
    .reader-welcome-links a:hover,
    .reader-welcome-links button:hover { color: var(--slate); }
    .contents-index-in { width: min(760px, 100%); margin: 0 auto; }
    .contents-index h2 {
      margin: 0 0 6px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 1.15rem;
    }
    .contents-index .reader-topic-list a { padding-left: 10px; }
    .contents-index .reader-topic-list a[aria-current="true"] {
      color: var(--ink);
      font-weight: 600;
      box-shadow: inset 2px 0 0 var(--slate);
    }
    .editorial-note {
      display: block;
      margin: 8px 0 16px;
      padding: 10px 0 0;
      border-top: 1px solid var(--rule);
      color: var(--ink-2);
      font-family: var(--serif);
    }
    .editorial-note[data-kind="correction"] { color: var(--ink); }
    .editorial-note p { margin: 0 0 7px; }
    .editorial-note .editorial-label,
    .editorial-note .editorial-cite {
      color: var(--slate);
      font-family: var(--sans);
      font-size: .76rem;
    }
    .editorial-note .editorial-title { font-weight: 600; }
    .editorial-note .editorial-cite { margin-bottom: 0; }
    .interview-speech > .editorial-note { margin: 12px 0 0; }
    .editorial-about {
      margin-top: 22px;
      padding-top: 14px;
      border-top: 1px solid var(--rule);
      font-family: var(--serif);
    }
    .editorial-about p { max-width: 72ch; color: var(--ink-2); }
    .page-panel .editorial-about { display: none; margin-top: 14px; }
    body[data-page-panel="about"] .page-panel .editorial-about { display: block; }
    .glossary-trigger:focus-visible,
    .page-help:focus-visible {
      outline: 2px solid var(--slate);
      outline-offset: 2px;
    }
    .person-mention,
    .interview-speaker a {
      color: inherit;
      text-decoration-color: var(--slate);
      text-decoration-thickness: 1px;
      text-underline-offset: .14em;
    }
    .person-mention:hover,
    .interview-speaker a:hover { text-decoration-color: var(--ink); }
    .person-mention:focus-visible,
    .interview-speaker a:focus-visible {
      outline: 2px solid var(--slate);
      outline-offset: 2px;
    }
    .glossary-expansion {
      color: var(--ink-3);
      font-family: var(--sans);
      font-size: .82em;
    }
    .interview-turn { padding: 9px 0 15px; }
    /* A document read aloud at the session is identified by its label and
       quieter type, without a decorative rule beside the words. */
    .interview-reading { margin-block: 8px 14px; }
    .interview-reading .interview-speaker { color: var(--ink-3); }
    .interview-reading .interview-speech { color: var(--ink-2); font-size: .98rem; }
    .interview-turn:first-child { border-top: 0; padding-top: 0; }
    .interview-speaker {
      margin-bottom: 5px;
      color: var(--ink-2);
      font-family: var(--sans);
      font-size: .79rem;
      font-weight: 600;
    }
    .interview-speaker.uncertain { color: var(--slate); }
    .interview-speech {
      min-width: 0;
      font-size: 1.02rem;
      line-height: 1.72;
    }
    .interview-speech p { margin: 0 0 1em; }
    .interview-speech p:last-child { margin-bottom: 0; }
    .interview-speech .turn-basis { margin-top: 11px; }
    .page-attribution {
      margin-top: 3px;
      border-top: 1px solid var(--rule);
      color: var(--ink-3);
      font-family: var(--sans);
      font-size: .76rem;
    }
    .page-attribution summary {
      display: inline-block;
      padding: 9px 0;
      cursor: pointer;
      list-style-position: outside;
    }
    .page-attribution ul { margin: 0 0 13px; padding: 0; list-style: none; }
    .page-attribution li {
      display: grid;
      grid-template-columns: 94px minmax(0, 1fr);
      gap: 12px;
      padding: 7px 0;
      border-top: 1px solid var(--rule);
    }
    .page-attribution li strong { color: var(--ink-2); font-weight: 600; }
    .page-attribution li p { margin: 0; white-space: pre-wrap; line-height: 1.5; }
    .page-attribution .turn-basis { border: 0; color: inherit; font-size: inherit; max-width: none; }
    .reader-notes {
      margin-top: 3px;
      border-top: 1px solid var(--rule);
      color: var(--ink-3);
      font-family: var(--sans);
      font-size: .78rem;
    }
    .reader-notes summary {
      display: inline-block;
      padding: 10px 0;
      cursor: pointer;
      list-style-position: outside;
    }
    .reader-notes ul { margin: 0 0 14px; padding: 0; list-style: none; }
    .reader-notes li {
      padding: 8px 0;
      border-top: 1px solid var(--rule);
      line-height: 1.5;
    }
    .reader-notes strong { color: var(--ink-2); font-weight: 600; }
    .reader-notes .note-text { color: var(--ink-2); }
    .turn-basis {
      border-top: 1px solid var(--rule);
      color: var(--ink-3);
      font-family: var(--sans);
      font-size: .76rem;
    }
    .turn-basis summary {
      display: inline-block;
      padding-top: 7px;
      cursor: pointer;
      list-style-position: outside;
    }
    .turn-basis p { margin: 7px 0 0; font-size: .82rem; line-height: 1.55; }
    .interview-unsettled {
      max-width: 74ch;
      padding: 9px 0 10px;
      font-size: 1.02rem;
      line-height: 1.72;
    }
    .interview-unsettled .interview-status { margin-bottom: 12px; }
    .page-evidence {
      margin-top: 10px;
      font-family: var(--sans);
      font-size: .78rem;
    }
    .page-evidence summary {
      display: inline-block;
      padding: 10px 0;
      color: var(--ink-3);
      cursor: pointer;
      list-style-position: outside;
    }
    .page-evidence[open] summary { color: var(--ink-2); }
    .page-evidence .archive-content { padding-top: 5px; }
    .page-evidence .reading { margin-top: 28px; }
    .page-evidence .source-text { font-size: .92rem; }
    .page-evidence .ed-head { font-size: .74rem; }
    .page-evidence .ed-body { font-size: .82rem; }
    .reader-glossary {
      max-width: 820px;
      margin: 0 auto;
      border-bottom: 1px solid var(--rule);
      font-family: var(--sans);
      font-size: .8rem;
    }
    .reader-glossary > summary {
      display: flex;
      min-height: 44px;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      color: var(--ink-3);
      cursor: pointer;
    }
    .reader-glossary > summary span { font-family: var(--sans); font-size: .72rem; }
    .reader-glossary > p { max-width: 68ch; margin: 4px 0 18px; color: var(--ink-2); }
    .reader-glossary-open {
      display: inline-block;
      margin: 0 0 16px;
      font-weight: 600;
    }
    .reader-glossary-categories {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 18px;
      margin: 0 0 20px;
      padding: 0;
      color: var(--ink-3);
      list-style: none;
    }
    .reader-glossary dl {
      display: grid;
      grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
      margin: 0 0 22px;
      border-top: 1px solid var(--rule);
    }
    .reader-glossary dt,
    .reader-glossary dd {
      margin: 0;
      padding: 8px 0;
      border-bottom: 1px solid var(--rule);
      line-height: 1.5;
    }
    .reader-glossary dt { padding-right: 18px; color: var(--ink); font-weight: 600; }
    .reader-glossary dt span { display: block; color: var(--ink-3); font-weight: 400; }
    .reader-glossary dd { color: var(--ink-2); }
    .glossary-tooltip {
      position: fixed;
      z-index: 12;
      width: max-content;
      max-width: min(340px, calc(100vw - 28px));
      padding: 10px 12px;
      border: 1px solid var(--ink-2);
      background: var(--paper);
      color: var(--ink-2);
      font: .8rem/1.45 var(--sans);
    }
    .glossary-tooltip[hidden] { display: none; }
    .glossary-tooltip strong { display: block; margin-bottom: 3px; color: var(--ink); }
    .glossary-tooltip span { display: block; }
    .glossary-tooltip a {
      display: inline-block;
      margin-top: 6px;
      color: var(--slate);
      font-size: .74rem;
    }
    .glossary-tooltip a[hidden] { display: none; }

    /* The English turns are their own nodes, so the German and
       literal choices hide them. Listing them beside the blocks below would
       show the English above the German instead. */
    body[data-view="interview"][data-transcript="german"] .interview-content,
    body[data-view="interview"][data-transcript="literal"] .interview-content {
      display: none;
    }
    /* The German and literal layers already live in each page's archive
       detail. Reuse those nodes in the reading column instead of cloning a
       second 714-page transcript. */
    body[data-view="interview"][data-transcript="german"] .page-attribution,
    body[data-view="interview"][data-transcript="literal"] .page-attribution,
    body[data-view="interview"][data-transcript="german"] .reader-notes,
    body[data-view="interview"][data-transcript="literal"] .reader-notes,
    body[data-view="interview"][data-transcript="german"] .page-evidence,
    body[data-view="interview"][data-transcript="literal"] .page-evidence {
      display: block;
      margin-top: 0;
      font-family: var(--serif);
      font-size: 1rem;
    }
    body[data-view="interview"][data-transcript="german"] .page-evidence > summary,
    body[data-view="interview"][data-transcript="literal"] .page-evidence > summary,
    body[data-view="interview"][data-transcript="german"] .page-evidence .archive-content > figure,
    body[data-view="interview"][data-transcript="literal"] .page-evidence .archive-content > figure {
      display: none;
    }
    body[data-view="interview"][data-transcript="german"] .page-evidence .archive-content,
    body[data-view="interview"][data-transcript="literal"] .page-evidence .archive-content {
      padding-top: 0;
    }
    body[data-view="interview"][data-transcript="german"] .page-evidence .reading,
    body[data-view="interview"][data-transcript="literal"] .page-evidence .reading {
      display: block;
      margin-top: 0;
    }
    body[data-view="interview"][data-transcript="german"] .page-evidence .source-text,
    body[data-view="interview"][data-transcript="literal"] .page-evidence .source-text {
      color: var(--ink);
      font-size: 1.02rem;
      line-height: 1.72;
    }
    body[data-view="interview"][data-transcript="german"] .page-evidence .reading h3,
    body[data-view="interview"][data-transcript="literal"] .page-evidence .reading h3 {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    body[data-view="interview"][data-transcript="german"] .page-evidence .text-en,
    body[data-view="interview"][data-transcript="literal"] .page-evidence .text-de,
    body[data-view="interview"][data-transcript="german"] .raw-note,
    body[data-view="interview"][data-transcript="literal"] .raw-note {
      display: none;
    }
    .raw-notes { margin-top: 22px; border-top: 1px solid var(--rule, #d8d2c6); padding-top: 10px; }
    .raw-notes > summary { cursor: pointer; font-family: var(--sans); font-size: .82rem; }
    .raw-note-flag { font-family: var(--sans); font-size: .8rem; color: var(--ink-3); line-height: 1.5; }
    .page-control { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
    .page-control:disabled { opacity: .45; cursor: default; }
    .scan-panel-missing { font-family: var(--sans); font-size: .8rem; color: var(--ink-3); }
    .page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 8px; }
    .page-head h2 { margin: 0; }
    .scan-id { color: var(--ink-3); font-family: var(--mono); font-size: .76rem; word-break: break-all; }
    .status {
      display: inline-block;
      margin-bottom: 22px;
      padding: 3px 9px;
      border: 1px solid var(--rule);
      background: var(--paper-deep);
      color: var(--ink-2);
      font-family: var(--sans);
      font-size: .72rem;
      letter-spacing: .01em;
    }
    .status.flag { border-color: var(--slate); color: var(--slate); }

    figure { margin: 0; min-width: 0; max-width: 100%; }
    .scan {
      padding: clamp(10px, 2vw, 20px);
      border: 1px solid var(--rule);
      background: var(--paper-deep);
    }
    /* Dark backdrop for the source pages; original scan pixels are unchanged. */
    .scan { background: #000; border-color: #514c46; }
    .scan-panel { --paper-deep: #000; --ink-2: #cbc3b6; --ink-3: #bdb7aa; --rule: #514c46; }
    .scan a { display: block; }
    .scan img { width: min(100%, 920px); max-height: 1180px; margin: 0 auto; object-fit: contain; background: #000; }
    .no-scan {
      padding: 34px clamp(12px, 3vw, 26px);
      border: 1px dashed var(--slate);
      background: var(--paper-deep);
      color: var(--slate);
      font-family: var(--sans);
      font-size: .86rem;
    }
    figcaption { margin-top: 9px; color: var(--ink-3); font-family: var(--sans); font-size: .76rem; }

    .reading {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 48px;
      margin-top: 36px;
    }
    .reading > section { min-width: 0; }
    .reading h3 { padding-bottom: 9px; border-bottom: 1px solid var(--rule); }
    .source-text {
      color: var(--ink-2);
      font-size: .95rem;
      line-height: 1.62;
      white-space: pre-wrap;
      overflow-wrap: break-word;
      word-break: break-word;
    }
    .source-text strong { color: var(--ink); }
    .ed-head {
      margin: 26px 0 8px;
      padding-top: 14px;
      border-top: 1px solid var(--rule);
      color: var(--ink-3);
      font-family: var(--sans);
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .02em;
    }
    .ed-body {
      color: var(--ink-3);
      font-size: .88rem;
      line-height: 1.58;
      white-space: pre-wrap;
      overflow-wrap: break-word;
      word-break: break-word;
    }

    .turns { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--rule); }
    .turns h3 { padding-bottom: 9px; }
    .turns-note { margin: 0 0 14px; color: var(--ink-3); font-family: var(--sans); font-size: .78rem; max-width: 74ch; }
    .turn { padding: 12px 0; border-bottom: 1px solid var(--rule); }
    .turn:last-child { border-bottom: 0; }
    .turn-who {
      margin: 0 0 4px;
      font-family: var(--sans);
      font-size: .78rem;
      font-weight: 600;
      color: var(--ink-2);
    }
    .turn-who.uncertain { color: var(--slate); }
    .turn-text { margin: 0; color: var(--ink-2); font-size: .93rem; }
    .turn-basis { margin: 6px 0 0; color: var(--ink-3); font-size: .82rem; max-width: 78ch; }
    .turns.no-turns .turns-note { margin-bottom: 0; }

    .search { padding: 18px 0; border-bottom: 1px solid var(--rule); font-family: var(--sans); }
    .search label { display: block; margin-bottom: 6px; font-size: .8rem; color: var(--ink-3); }
    .search-help {
      max-width: 62ch;
      margin: -2px 0 8px;
      color: var(--ink-3);
      font-size: .76rem;
      line-height: 1.45;
    }
    .search input {
      width: min(100%, 460px);
      padding: 8px 10px;
      border: 1px solid var(--rule);
      background: var(--paper);
      color: var(--ink);
      font-family: var(--sans);
      font-size: .92rem;
    }
    .search input:focus { outline: 2px solid var(--slate); outline-offset: 1px; }
    .search-status { margin: 8px 0 0; font-size: .8rem; color: var(--ink-3); }
    .search-results { margin: 14px 0 0; padding: 0; list-style: none; max-height: 420px; overflow-y: auto; }
    .search-results li { padding: 9px 0; border-top: 1px solid var(--rule); }
    .search-results a { font-family: var(--sans); font-size: .84rem; text-decoration: none; }
    .search-results .hit-where { color: var(--ink-3); font-family: var(--mono); font-size: .72rem; }
    .search-results .hit-text { margin: 3px 0 0; color: var(--ink-2); font-size: .86rem; }
    .search-results mark { background: #e4dcc6; color: var(--ink); }

    footer { padding: 26px 0 54px; border-top: 1px solid var(--rule); color: var(--ink-3); font-family: var(--sans); font-size: .76rem; }
    /* Corpus paths in the footer are single long tokens; without a break
       opportunity they widen the page at phone widths. */
    footer p { max-width: 76ch; overflow-wrap: anywhere; }

    .readers { padding: 8px 0 20px; }
    .reader-card { padding: 34px 0; border-bottom: 1px solid var(--rule); max-width: 860px; }
    .reader-card h2 { margin-bottom: 6px; }
    .reader-card .sig { color: var(--ink-3); font-family: var(--mono); font-size: .78rem; }
    .reader-card p { max-width: 72ch; color: var(--ink-2); font-size: .96rem; }
    .reader-card .counts {
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 6px 22px;
      font-family: var(--sans);
      font-size: .8rem;
      color: var(--ink-3);
    }
    .pending {
      max-width: 72ch;
      margin: 34px 0 0;
      padding: 13px 0;
      color: var(--ink-2);
      font-size: .92rem;
    }

    @media (max-width: 980px) {
      .interview-layout { display: block; max-width: 760px; }
      .interview-reader { max-width: 760px; margin-inline: auto; }
    }

    @media (max-width: 760px) {
      body { font-size: 16px; }
      .top-in, main { width: min(100% - 28px, 1240px); }
      .top-in { padding: 7px 0 6px; }
      .top-brand,
      .reader-tools {
        max-width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
      }
      .top-brand { gap: 12px; padding-bottom: 2px; }
      .top-brand { align-items: center; }
      .top-brand a {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
      }
      .top-brand > *,
      .reader-tools > * { flex: 0 0 auto; white-space: nowrap; }
      .reader-tools { gap: 6px 12px; margin-top: 5px; padding-top: 5px; }
      .jump-tools { flex-direction: column; align-items: stretch; }
      .jump-tools .search { flex: 0 0 auto; }
      .top-in nav { width: 100%; margin-left: 0; }
      .filehead { padding-top: 34px; }
      .cover-main .filehead { padding-top: 38px; }
      .cover-main .filehead h1 { font-size: clamp(2.25rem, 12vw, 3.2rem); }
      .filehead dl { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
      .filehead dt { margin-top: 8px; }
      .reader-topic-list a { grid-template-columns: 1fr; gap: 2px; }
      .reader-topic-break { margin-top: 24px; }
      .page { padding: 44px 0 54px; }
      .reading { grid-template-columns: 1fr; gap: 32px; }
      /* Full-bleed scan panel. The negative inline margin is matched by the
         same positive width reduction, so the figure never widens the body. */
      .scan {
        margin-inline: -14px;
        width: calc(100% + 28px);
        border-left: 0;
        border-right: 0;
        padding: 8px;
      }
      .source-text { font-size: .98rem; }
      .page-nav { gap: 12px; }
      .interview-reader { width: min(100%, 640px); }
      .interview-speech,
      .interview-unsettled { font-size: 1rem; }
      .page-reference dl > div { grid-template-columns: 1fr; gap: 1px; }
      .page-attribution li { grid-template-columns: 82px minmax(0, 1fr); gap: 10px; }
      .reader-glossary dl { display: block; }
      .reader-glossary dt { padding-bottom: 2px; border-bottom: 0; }
      .reader-glossary dd { padding-top: 0; }
      .top-brand .top-search-link { display: none; }
    }

    @media (max-width: 360px) {
      .top-brand { gap: 10px; font-size: .82rem; }
      .top .text-layer-links { gap: 4px 8px; }
    }

    /* The interview stays one continuous column. The scan sits beside the
       current page, never between its turns. */
    .scan-toggle {
      display: none;
      position: sticky;
      top: var(--reader-top, 0);
      z-index: 6;
      width: 100%;
      max-width: 760px;
      min-height: 40px;
      margin: 0 auto;
      padding: 9px 0 8px;
      border: 0;
      border-top: 1px solid var(--ink-2);
      border-bottom: 1px solid var(--rule);
      background: var(--paper);
      color: var(--ink-2);
      cursor: pointer;
      font-family: var(--sans);
      font-size: .78rem;
      text-align: left;
    }
    .scan-toggle:hover { color: var(--ink); }
    .reader-appendix {
      max-width: 820px;
      margin: 0 auto;
      padding-top: 30px;
      border-top: 1px solid var(--ink-2);
      scroll-margin-top: calc(var(--scan-rail-top, 96px) + 12px);
    }
    .source-note {
      margin-top: 18px;
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
    }
    .source-note > summary {
      min-height: 44px;
      padding: 10px 0;
      color: var(--ink-2);
      cursor: pointer;
      font-family: var(--sans);
      font-size: .82rem;
    }
    .source-note .editorial-about { margin: 0; padding: 14px 0 8px; }
    .source-note-link {
      margin: 18px 0 0;
      color: var(--ink-2);
      font-family: var(--sans);
      font-size: .8rem;
    }
    .interview-layout {
      display: block;
      max-width: 1180px;

    }
    .interview-reader {
      width: min(100%, 760px);
      max-width: 760px;
      margin-inline: auto;
    }
    .file-section-head,
    .scan-index,
    .reader-topic-break { display: none; }
    /* The scan panel already carries the photographed page, so the evidence
       block stays closed while the reading text is English. The German and
       Literal English layers live inside it, so those two must show it. */
    body[data-transcript="readable"] .interview-page > .page-evidence,
    .interview-page > .page-nav { display: none !important; }
    /* The context material is about the reading text, not the source
       layers, so its controls leave the bar when the reader picks German or
       Literal English. */
    body[data-view="interview"][data-transcript="german"] .page-panel-button,
    body[data-view="interview"][data-transcript="literal"] .page-panel-button,
    body[data-view="interview"][data-transcript="german"] .page-panel,
    body[data-view="interview"][data-transcript="literal"] .page-panel {
      display: none;
    }
    body[data-view="interview"][data-transcript="german"] .aids-toggle,
    body[data-view="interview"][data-transcript="literal"] .aids-toggle,
    body[data-view="interview"][data-transcript="german"] .editorial-toggle,
    body[data-view="interview"][data-transcript="literal"] .editorial-toggle {
      display: none !important;
    }
    /* Nothing sits between two pages but the sheet rule. About and Notes
       load into the side panel only when the reader asks for them. */
    .page-panel-button {
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--slate);
      cursor: pointer;
      font-family: var(--sans);
      font-size: inherit;
      white-space: nowrap;
    }
    .page-panel-button:hover { color: var(--ink); }
    .page-panel-button[aria-expanded="true"] { color: var(--ink); }
    .page-panel-button:focus-visible {
      outline: 2px solid var(--slate);
      outline-offset: 3px;
    }
    .page-panel {
      margin-bottom: 14px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--rule);
      font-family: var(--sans);
      font-size: .78rem;
    }
    .page-panel[hidden] { display: none; }
    .page-panel-title {
      margin: 0 0 8px;
      color: var(--ink-3);
      font-family: var(--sans);
      font-size: .74rem;
      font-weight: 400;
    }
    .page-panel .page-overview { margin-bottom: 10px; }
    .page-panel .page-terms > h3 {
      margin: 0 0 4px;
      color: var(--ink-3);
      font-family: var(--sans);
      font-size: .78rem;
      font-weight: 400;
    }
    .page-panel .page-terms > .page-reference { margin-top: 4px; }
    .page-panel .reader-notes,
    .page-panel .page-attribution { display: block; margin-top: 0; }
    .page-panel .reader-notes > summary,
    .page-panel .page-attribution > summary { display: none; }
    /* The notes list is markup, not preformatted text. Keeping pre-wrap
       here would render the builder's own indentation as blank lines. */
    .page-panel .ed-body { margin: 0; padding: 0; white-space: normal; }
    .page-panel .page-attribution > ul { margin: 0; padding: 0; }
    .page-panel .reader-notes ul,
    .page-panel .page-attribution ul { margin: 0; padding: 0; list-style: none; }
    .page-panel .reader-notes li,
    .page-panel .page-attribution li {
      margin: 0;
      padding: 7px 0;
      border-top: 1px solid var(--rule);
    }
    .page-panel .reader-notes li:first-child,
    .page-panel .page-attribution li:first-child { border-top: 0; padding-top: 0; }
    .page-panel .page-attribution .turn-basis { margin: 2px 0 0; }
    .page-panel-empty { margin: 0; color: var(--ink-3); }
    .interview-page { padding: 8px 0 3px; }
    .interview-page:first-child { padding-top: 30px; }
    .interview-page-head { margin-bottom: 9px; }
    .page-scan-button {
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--ink-2);
      cursor: pointer;
      font: inherit;
      font-family: var(--sans);
      font-weight: 600;
    }
    .page-scan-button:hover { color: var(--slate); }
    .page-scan-button:focus-visible {
      outline: 2px solid var(--slate);
      outline-offset: 3px;
    }
    /* Definition words keep their dotted underline in the reading text so a
       reader can see where a mouseover is. Scan markers stay plain. */
    .interview-speech .scan-marker { text-decoration: none; }
    .reader-side-panel {
      display: none;
      min-width: 0;

      color: var(--ink-2);
      font-family: var(--sans);
      font-size: .8rem;
    }
    body[data-reader-mode="scan"] .interview-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 36px;
      align-items: start;
    }
    body[data-reader-mode="scan"] .interview-reader {
      grid-column: 2;
      grid-row: 1;
      width: 100%;
    }
    body[data-reader-mode="scan"] .scan-panel {

      display: block;
      position: sticky;
      top: var(--scan-rail-top, 96px);
      grid-column: 1;
      grid-row: 1;
      max-height: calc(100vh - var(--scan-rail-top, 96px) - 18px);
      overflow-y: auto;
      overscroll-behavior: contain;
      border-top: 1px solid var(--ink-2);
      border-bottom: 1px solid var(--rule);
      background: var(--paper-deep);
    }
    /* The three text choices belong with the text, so they sit in the
       sticky location bar and change the reading column only. */
    .text-layer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 14px;
      align-items: baseline;
    }
    .text-layer-links button {
      appearance: none;
      min-height: 30px;
      padding: 0 0 1px;
      border: 0;
      border-bottom: 1px solid transparent;
      background: transparent;
      color: var(--ink-2);
      cursor: pointer;
      font: inherit;
    }
    .text-layer-links button:hover { border-bottom-color: currentColor; color: var(--ink); }
    .text-layer-links button[aria-pressed="true"] {
      border-bottom-color: currentColor;
      color: var(--ink);
      font-weight: 600;
    }
    .text-layer-links button:focus-visible {
      outline: 2px solid var(--slate);
      outline-offset: 2px;
    }
    .side-panel-body { padding: 14px 0 18px; }
    .side-panel-body h3,
    .side-panel-body h4 {
      margin: 18px 0 7px;
      color: var(--ink-2);
      font-family: var(--sans);
      font-size: .78rem;
      font-weight: 600;
    }
    .side-panel-body h3:first-child { margin-top: 0; }
    .side-panel-body p { margin: 0 0 10px; line-height: 1.55; }
    .side-panel-body ul { margin: 0; padding: 0; list-style: none; }
    .side-panel-body li {
      padding: 9px 0;
      border-top: 1px solid var(--rule);
      line-height: 1.5;
    }
    .side-panel-body li strong {
      display: block;
      margin-bottom: 2px;
      color: var(--ink-2);
      font-weight: 600;
    }
    .side-panel-body .page-reference {
      display: block;
      margin: 18px 0 0;
      padding: 0;
      border: 0;
    }
    .side-panel-body .page-reference dl > div {
      display: block;
      padding: 8px 0;
    }
    .side-panel-body .page-reference dt { margin-bottom: 2px; }
    .scan-panel .archive-content { padding: 0; }
    .scan-panel [hidden] { display: none !important; }
    .scan-panel figure { margin: 0; }
    #scan-panel-body { padding: 0; }
    #scan-panel-caption { text-align: center; padding: 10px 12px; margin: 0; }
    .scan-panel .scan { padding: 0; border: 0; overflow: hidden; background: #000; }
    #scan-panel-link { display: block; overflow: hidden; }
    #scan-panel-image { max-width: none; height: auto; }
    .scan-panel .scan img { width: 100%; max-height: none; }
    .scan-panel .reading { display: block; margin-top: 0; }
    .scan-panel .reading > section + section { margin-top: 24px; }
    .scan-panel .source-text { font-size: .86rem; line-height: 1.55; }
    .scan-panel .raw-note { margin-top: 22px; }

    @media (max-width: 980px) {
      /* On a phone the scan scrolls with its own page instead of pinning a
         sheet over the text. One control opens and closes it. */
      .top { overflow: visible; }
      .scan-toggle { display: block; }
      /* The tools row is a horizontal scroller at this width, which would
         park the third text choice out of sight. Give the three choices
         their own wrapping row instead. */
      .top .reader-tools {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        flex-wrap: wrap;
        overflow-x: visible;
      }
      .top .reader-tools > * {
        min-width: 0;
        flex: 0 1 auto;
        white-space: normal;
      }
      .top .reader-tools .text-layer-links {
        flex: 1 1 100%;
        max-width: 100%;
      }
      .top .reader-location,
      .top .scan-jump-form { grid-column: 1; grid-row: 1; }
      .top .page-controls {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        gap: 4px;
      }
      .top .page-control {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
      }
      .top .text-layer-links { grid-column: 1; grid-row: 2; }
      .top .sheet-tools {
        grid-column: 2;
        grid-row: 2;
        position: relative;
      }
      .top .reader-tools .sheet-tools { display: block; min-width: max-content; }
      .top .sheet-tools > summary {
        display: flex;
        align-items: center;
        min-height: 44px;
        color: var(--ink-2);
        cursor: pointer;
      }
      .top .sheet-tools-body {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        z-index: 12;
        display: flex;
        width: min(340px, calc(100vw - 28px));
        max-height: calc(100vh - var(--reader-top, 150px) - 18px);
        overflow-y: auto;
        flex-wrap: wrap;
        gap: 4px 14px;
        padding: 12px 14px;
        border: 1px solid var(--rule);
        background: var(--paper-deep);
      }
      .top .sheet-tools:not([open]) .sheet-tools-body { display: none; }
      .top .reader-tools button { white-space: nowrap; }
      .top .reader-tools button,
      .scan-toggle,
      .scan-jump-form select,
      .scan-jump-form input,
      .scan-jump-form button { min-height: 44px; }
      /* Two rows on a phone. Row one moves through the pages; row two
         chooses the text and finds things in it. */
      .top .reader-tools {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 10px;
      }
      .top .reader-tools::after { content: ''; order: 4; flex-basis: 100%; height: 0; }
      .top .reader-tools .scan-jump-form { order: 1; grid-column: auto; grid-row: auto; flex-wrap: nowrap; }
      .top .scan-jump-form > label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
      }
      .top .scan-jump-form .jump-status:empty { display: none; }
      .top .page-controls { display: contents; }
      .top #pages-toggle,
      .top #search-toggle,
      .top #return-page { order: 2; }
      .top .reader-tools .sheet-tools { order: 6; grid-column: auto; grid-row: auto; }
      .top .reader-tools .text-layer-links { order: 5; flex: 0 1 auto; grid-column: auto; grid-row: auto; }
      .top .reader-tools .scan-toggle {
        order: 3;
        margin-left: auto !important;
        display: inline-flex;
        align-items: center;
        position: static;
        width: auto;
        max-width: none;
        min-height: 44px;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        font-size: inherit;
      }
      .top .jump-total { display: none; }
      .top .reader-tools .scan-toggle { min-width: 44px; justify-content: center; }
      .top .reader-tools .scan-toggle[aria-expanded="true"] {
        color: var(--ink);
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: .3em;
      }
      .top-in { padding-bottom: 3px; }
      .top .reader-tools { padding-top: 3px; }
      @media (max-width: 360px) {
        .top .reader-tools { gap: 0 6px; }
        .top .scan-jump-form input { width: 52px; min-width: 0; padding-left: 5px; padding-right: 3px; }
      }
      .page-scan-button {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
      }
      /* The reader is one long column, so a static scan block would land
         after every page. Sticky keeps the current scan beside the text it
         belongs to and it still scrolls out of the way. */
      body[data-reader-mode="scan"] .interview-layout {
        display: flex;
        flex-direction: column;
        max-width: 760px;
      }
      body[data-reader-mode="scan"] .scan-panel {

        order: 0;
        position: sticky;
        top: var(--scan-rail-top, 96px);
        grid-column: auto;
        width: 100%;
        max-width: 760px;
        max-height: min(44vh, calc(100vh - var(--scan-rail-top, 96px) - 18px));
        margin: 0 auto 14px;
      }
      body[data-reader-mode="scan"] .interview-reader { order: 1; }
      body[data-scan-open="closed"] .scan-panel { display: none !important; }
      /* An open About or Notes panel stacks under the sticky bar
         the way the scan does, whether or not the scan itself is open. */
      body[data-page-panel] .scan-panel { display: block !important; }
      /* This panel is taller than a pinned box can hold, so pinning it made
         it paint over the reading text. It takes its own room at the top of
         the column instead, and the text starts below it. */
      body[data-page-panel][data-scan-open="closed"] .scan-panel {
        order: 0;
        position: static;
        width: 100%;
        max-width: 760px;
        max-height: none;
        overflow-y: visible;
        border-bottom: 1px solid var(--rule);
        background: var(--paper);
        margin: 0 auto 14px;
      }
      body[data-page-panel][data-scan-open="closed"] .side-panel-body {
        display: none;
      }
      .top .contents-index,
      .top .search-panel { max-height: 60vh; padding: 12px 16px 16px; }
      .top .sheet-tools-body .tools-about { display: inline-flex; align-items: center; min-height: 44px; }
      .contents-index-in { width: 100%; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
    }

    @media print {
      body { background: #fff; }
      .top,
    .jump,
    .scan-index,
    .jump-tools,
    .reader-topics,
    .skip,
    .scan-toggle,
    .reader-side-panel,
    .reader-appendix,
    .reader-glossary,
    .glossary-tooltip { display: none !important; }
      main { width: 100%; }
      .interview-layout { display: block; max-width: none; }
      .page { break-before: page; }
      .reading { gap: 28px; }
      body[data-view="interview"] .interview-content { display: block !important; }
      body[data-view="interview"] .page-evidence { display: none !important; }
      .glossary-trigger, .page-help { color: inherit; text-decoration: none; outline: 0; }
    }