/* =====================================================================
   Shared chapter components.
   Loaded on every chapter and article page. Anything here is meant to be
   used by more than one chapter — if it only ever serves one, it belongs
   in that chapter's ch-<slug>.css instead.

   Type and palette are the site's own: Fraunces display, Inter body,
   IBM Plex Mono for stamps and captions; navy, deep, cream, rust.
   ===================================================================== */

.chapter-scenes {
  --deep: #12203A;
  --paper: #F5EFE4;
  --mount: #E5DBC9;
  --slate: #8A9BB0;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* ---------------------------------------------------------------------
   PROVENANCE — a primary source quoted through a secondary transcription.

   Use it wherever a chapter quotes a document it has not sighted, and the
   transcriber's editorial insertions carry meaning the original may not.
   The component's whole job is to make that seam visible: it shows the
   added words, lets the reader remove them, and says what changed.

   Authoring (raw HTML in the chapter Markdown):

     <figure class="provenance" data-component="provenance">
       <figcaption class="provenance__head">
         <span class="provenance__ttl">…document and date…</span>
         <span class="provenance__chip">Original not sighted</span>
       </figcaption>
       <div class="provenance__head provenance__head--controls">
         <span class="provenance__ttl">Show</span>
         <div class="provenance__seg" role="group" aria-label="…">
           <button type="button" data-mode="source" aria-pressed="true">…</button>
           <button type="button" data-mode="strip"  aria-pressed="false">…</button>
         </div>
       </div>
       <div class="provenance__body">
         <p class="provenance__text">… <span class="gloss" data-by="…">…</span> …</p>
         <p class="provenance__verdict" data-for="source">…</p>
         <p class="provenance__verdict" data-for="strip">…</p>
       </div>
       <p class="provenance__legend">…</p>
     </figure>

   Without JS every gloss stays visible and both verdicts show, so the
   reader still gets both readings — nothing here is load-bearing.
   --------------------------------------------------------------------- */

.chapter-scenes .provenance {
  margin: 0.75rem 0 2.25rem;
  background: #fff;
  border: 1px solid rgba(28, 46, 74, 0.16);
}

.chapter-scenes .provenance__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.4rem;
  border-bottom: 1px solid rgba(28, 46, 74, 0.14);
}
.chapter-scenes .provenance__ttl {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-navy);
}

/* The chip states the problem before the reader reaches the quotation. */
.chapter-scenes .provenance__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.32rem 0.6rem;
  border: 1px solid var(--c-rust);
  color: var(--c-rust-text, var(--c-rust));
}
.chapter-scenes .provenance__chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px dotted var(--c-rust);
  flex: none;
}

/* Real buttons with aria-pressed — the state has to reach assistive tech. */
.chapter-scenes .provenance__seg {
  display: inline-flex;
  border: 1px solid rgba(28, 46, 74, 0.24);
}
.chapter-scenes .provenance__seg button {
  appearance: none;
  background: none;
  border: 0;
  border-right: 1px solid rgba(28, 46, 74, 0.18);
  padding: 0.55rem 0.9rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(28, 46, 74, 0.62);
  cursor: pointer;
  transition: background 0.18s var(--easing), color 0.18s var(--easing);
}
.chapter-scenes .provenance__seg button:last-child { border-right: 0; }
.chapter-scenes .provenance__seg button:hover { background: rgba(28, 46, 74, 0.05); }
.chapter-scenes .provenance__seg button[aria-pressed="true"] {
  background: var(--c-navy);
  color: var(--paper);
}

.chapter-scenes .provenance__body { padding: 1.9rem 1.6rem 1.4rem; }

.chapter-scenes .provenance__text {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(1.05rem, 2.3vw, 1.25rem);
  line-height: 1.62;
  letter-spacing: -0.006em;
  margin: 0;
}
.chapter-scenes .provenance__text + .provenance__text { margin-top: 1.3rem; }
.chapter-scenes .provenance__text .forever {
  color: var(--c-rust-text, var(--c-rust));
  font-style: italic;
}

/* An added word. Parenthesised, rust, dotted — never mistakable for the
   transcription around it. */
.chapter-scenes .gloss {
  color: var(--c-rust-text, var(--c-rust));
  border-bottom: 1px dotted var(--c-rust);
  cursor: help;
}
.chapter-scenes .gloss::before { content: "("; }
.chapter-scenes .gloss::after { content: ")"; }
.chapter-scenes .provenance.is-stripped .gloss { display: none; }

.chapter-scenes .provenance__verdict {
  margin: 1.5rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(28, 46, 74, 0.16);
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.8;
  color: var(--c-rust-text, var(--c-rust));
}
.chapter-scenes .provenance__verdict + .provenance__verdict {
  border-top: 0;
  margin-top: 0.75rem;
  padding-top: 0;
}
.chapter-scenes .provenance__verdict b {
  display: block;
  color: var(--c-navy);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-size: 0.6rem;
  margin-bottom: 0.4rem;
}
/* Once JS is driving, only the active reading's verdict shows. */
.provenance-js .chapter-scenes .provenance__verdict[hidden] { display: none; }

.chapter-scenes .provenance__legend {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0.85rem 1.4rem;
  background: rgba(28, 46, 74, 0.04);
  border-top: 1px solid rgba(28, 46, 74, 0.12);
  font-family: var(--mono);
  font-size: 0.6rem;
  line-height: 1.7;
  color: rgba(28, 46, 74, 0.68);
}
.chapter-scenes .provenance__legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.chapter-scenes .provenance__legend i {
  width: 16px;
  border-bottom: 1px dotted var(--c-rust);
}
.chapter-scenes .provenance__legend i.is-solid {
  border-bottom: 1px solid rgba(28, 46, 74, 0.4);
}

/* ---------------------------------------------------------------------
   TWO READINGS — the pair a provenance seam produces. Neither is chosen.
   --------------------------------------------------------------------- */

.chapter-scenes .readings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 2.25rem 0;
  border: 1px solid rgba(28, 46, 74, 0.16);
}
.chapter-scenes .readings__side {
  padding: 1.4rem 1.3rem;
  background: #fff;
}
.chapter-scenes .readings__side + .readings__side {
  border-left: 1px solid rgba(28, 46, 74, 0.16);
}
.chapter-scenes .readings__side h4 {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-rust-text, var(--c-rust));
  margin: 0 0 0.6rem;
}
.chapter-scenes .readings__side p {
  font-size: 0.9rem;
  margin: 0;
  color: rgba(28, 46, 74, 0.86);
}
.chapter-scenes .readings__note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1rem 1.3rem;
  background: rgba(193, 77, 46, 0.07);
  border-top: 1px solid rgba(28, 46, 74, 0.14);
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1.8;
}

@media (max-width: 860px) {
  .chapter-scenes .readings { grid-template-columns: 1fr; }
  .chapter-scenes .readings__side + .readings__side {
    border-left: 0;
    border-top: 1px solid rgba(28, 46, 74, 0.16);
  }
  .chapter-scenes .provenance__body { padding: 1.4rem 1.1rem 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .chapter-scenes .provenance__seg button { transition: none; }
}

.chapter-scenes .provenance__seg button:focus-visible,
.chapter-scenes .gloss:focus-visible {
  outline: 2px solid var(--c-rust);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   SIGNATORY MARKS — chips for the people who signed a document with a
   mark rather than a signature. Use beneath the plate they signed.
   --------------------------------------------------------------------- */

.chapter-scenes .marks {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}
.chapter-scenes .marks li {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(28, 46, 74, 0.22);
  background: #fff;
  color: rgba(28, 46, 74, 0.8);
}

/* ---------------------------------------------------------------------
   TERMS — the conditions written into an instrument, as cards.
   --------------------------------------------------------------------- */

.chapter-scenes .terms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 2rem 0;
  border: 1px solid rgba(28, 46, 74, 0.2);
}
.chapter-scenes .terms__item {
  padding: 1.4rem 1.2rem;
  border-right: 1px solid rgba(28, 46, 74, 0.16);
  background: #fff;
}
.chapter-scenes .terms__item:last-child { border-right: 0; }
.chapter-scenes .terms__item b {
  display: block;
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--c-rust-text, var(--c-rust));
  margin-bottom: 0.5rem;
}
.chapter-scenes .terms__item span {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(28, 46, 74, 0.62);
  line-height: 1.7;
}

/* ---------------------------------------------------------------------
   QUOTE + CAVEAT — a quotation that must not travel without its frame.
   The caveat is part of the quote, not a decoration around it.
   --------------------------------------------------------------------- */

.chapter-scenes .sourcequote {
  margin: 1.9rem 0 0;
  padding: 1.4rem 1.5rem;
  border-left: 2px solid var(--c-rust);
  background: rgba(28, 46, 74, 0.04);
}
.chapter-scenes .sourcequote q {
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  line-height: 1.42;
  quotes: none;
  color: var(--c-navy);
}
.chapter-scenes .sourcequote__who {
  margin: 0.85rem 0 0;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: rgba(28, 46, 74, 0.62);
}
.chapter-scenes .caveat {
  margin: 0.9rem 0 0;
  padding: 1rem 1.2rem;
  border: 1px dashed rgba(28, 46, 74, 0.42);
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1.8;
  color: rgba(28, 46, 74, 0.8);
}
.chapter-scenes .caveat strong { color: var(--c-navy); font-weight: 500; }

/* ---------------------------------------------------------------------
   HONEST GAP — what the chapter could not establish, and where to look.
   Ends in a way for the reader to close it. Never quietly filled.
   --------------------------------------------------------------------- */

.chapter-scenes .gapblock {
  display: block;
  margin: 2.25rem 0 0;
  padding: 1.8rem 1.7rem;
  border: 1.5px dashed rgba(28, 46, 74, 0.32);
  background: var(--mount);
}
.chapter-scenes .gapblock__tag {
  display: block;
  margin-bottom: 0.85rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-rust-text, var(--c-rust));
}
.chapter-scenes .gapblock h3 {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: 1.35rem;
  line-height: 1.2;
  margin-bottom: 0.9rem;
}
.chapter-scenes .gapblock p { font-size: 0.92rem; }
.chapter-scenes .gapblock p:last-child { margin-bottom: 0; }
.chapter-scenes .gapblock a {
  color: var(--c-rust-text, var(--c-rust));
  border-bottom: 1px solid rgba(193, 77, 46, 0.4);
}

@media (max-width: 860px) {
  .chapter-scenes .terms { grid-template-columns: 1fr; }
  .chapter-scenes .terms__item {
    border-right: 0;
    border-bottom: 1px solid rgba(28, 46, 74, 0.16);
  }
  .chapter-scenes .terms__item:last-child { border-bottom: 0; }
}

/* ---------------------------------------------------------------------
   CANDIDATES — a location or attribution the record argues over, shown as
   the argument rather than as an answer. Every candidate carries the same
   weight: same pin, same type, no highlight, no ordering by likelihood.

   Built for Colman's Point, where the chapter previously ran an
   illustration of a grave whose location it then said nobody can find.
   If a future editor wants to mark a favourite here, the answer is no —
   that is what this component exists to prevent.
   --------------------------------------------------------------------- */

.chapter-scenes .candidates {
  margin: 2rem 0;
  border: 1.5px dashed rgba(28, 46, 74, 0.32);
  background: var(--mount);
}
.chapter-scenes .candidates__head {
  display: flex;
  justify-content: space-between;
  gap: 0.9rem;
  flex-wrap: wrap;
  padding: 0.8rem 1.2rem;
  border-bottom: 1px dashed rgba(28, 46, 74, 0.28);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.chapter-scenes .candidates__head b {
  color: var(--c-rust-text, var(--c-rust));
  font-weight: 500;
}
.chapter-scenes .candidates__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.chapter-scenes .candidates__grid li {
  margin: 0;
  padding: 1.4rem 0.9rem;
  text-align: center;
  border-right: 1px dashed rgba(28, 46, 74, 0.24);
}
.chapter-scenes .candidates__grid li:last-child { border-right: 0; }
.chapter-scenes .candidates__grid li::before {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  border: 1.5px dotted var(--c-rust);
  border-radius: 50%;
  margin: 0 auto 0.75rem;
}
.chapter-scenes .candidates__name {
  font-family: var(--ff-display);
  font-size: 1rem;
  line-height: 1.25;
}
.chapter-scenes .candidates__foot {
  margin: 0;
  padding: 0.8rem 1.2rem;
  border-top: 1px dashed rgba(28, 46, 74, 0.28);
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1.8;
  color: rgba(28, 46, 74, 0.72);
}

@media (max-width: 860px) {
  .chapter-scenes .candidates__grid { grid-template-columns: repeat(2, 1fr); }
  .chapter-scenes .candidates__grid li:nth-child(2n) { border-right: 0; }
  .chapter-scenes .candidates__grid li:nth-child(-n+2) {
    border-bottom: 1px dashed rgba(28, 46, 74, 0.24);
  }
}

/* ---------------------------------------------------------------------
   WITNESS BAR — who is telling you this, and what is wrong with them.

   For chapters built out of named, unreliable sources. Each entry states
   a witness, their date and form, and the specific problem with their
   testimony; the entry lights as its section arrives, so the reader is
   always told whose account they are inside. The problems are the point:
   this component ranks nothing, it only names.

   Authoring (raw HTML in the chapter Markdown), one per chapter:

     <nav class="witnesses" data-component="witnesses" aria-label="…">
       <span class="witnesses__tag">Who is telling you this</span>
       <a class="witness" href="#id" data-for="id">
         <span class="witness__name">…</span>
         <span class="witness__when">…</span>
         <span class="witness__problem">…</span>
       </a>
       …
       <p class="witnesses__foot">…</p>
     </nav>

   Fixed rather than sticky, for the same reason the Twin Lights ledger
   is: the scenes grid has no rail track, and a sticky grid item unsticks
   at the end of its own row. Without JS it stays in the flow as a plain
   list of anchors with every problem legible.
   --------------------------------------------------------------------- */

.chapter-scenes .scene:has(> .prose > .witnesses),
.chapter-scenes .scene:has(> .prose > * > .witnesses) { display: block; }

.chapter-scenes .witnesses { display: block; }
.witness-js .chapter-scenes .scene#witnesses {
  position: fixed;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--easing), visibility 0.45s var(--easing);
}
.witness-js .chapter-scenes .scene#witnesses.is-visible {
  opacity: 1;
  visibility: visible;
}
.chapter-scenes .scene#witnesses > .prose {
  grid-column: auto;
  max-width: none;
  padding-inline: 0;
  margin-inline: 0;
}
/* Chapter furniture takes no section ornament. */
.chapter-scenes > .scene#witnesses::after { display: none; }

.chapter-scenes .witnesses__tag {
  display: block;
  margin-bottom: 1.1rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}

.chapter-scenes .witness {
  display: block;
  padding: 0.85rem 0 0.85rem 1rem;
  border-left: 2px solid rgba(28, 46, 74, 0.18);
  text-decoration: none;
  color: inherit;
}
.witness-js .chapter-scenes .witness {
  opacity: 0.4;
  transition: opacity 0.35s var(--easing), border-color 0.35s var(--easing);
}
.chapter-scenes .witness__name {
  display: block;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.2;
}
.chapter-scenes .witness__when {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--slate);
}
.chapter-scenes .witness__problem {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.76rem;
  line-height: 1.55;
  color: rgba(28, 46, 74, 0.72);
}
.chapter-scenes .witness.is-on { opacity: 1; border-left-color: var(--c-rust); }
.chapter-scenes .witness.is-on .witness__problem {
  color: var(--c-rust-text, var(--c-rust));
}

.chapter-scenes .witnesses__foot {
  margin: 1.5rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(28, 46, 74, 0.18);
  font-family: var(--mono);
  font-size: 0.6rem;
  line-height: 1.8;
  color: var(--slate);
}

/* Desktop rail — off the prose column's left edge, clear of the measure. */
@media (min-width: 1500px) {
  .witness-js .chapter-scenes .scene#witnesses {
    top: 50%;
    transform: translateY(-50%);
    width: 13rem;
    left: max(1rem, calc((100vw - 42.5rem) / 2 - 13rem - 1.5rem));
  }
}

/* Below that, a strip pinned under the fixed site header. overflow-y is
   hidden and touch-action is left at its default, so a vertical swipe
   beginning on the strip still scrolls the page; only the horizontal
   axis is contained. */
@media (max-width: 1499px) {
  .witness-js .chapter-scenes .scene#witnesses {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0.5rem var(--gutter) 0.45rem;
    padding-top: calc(0.5rem + var(--ch-header-h, 2.9rem));
    background: var(--paper);
    border-bottom: 1px solid rgba(28, 46, 74, 0.16);
  }
  .witness-js .chapter-scenes .witnesses {
    display: flex;
    gap: 1.2rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .witness-js .chapter-scenes .witnesses::-webkit-scrollbar { display: none; }
  .witness-js .chapter-scenes .witnesses__tag,
  .witness-js .chapter-scenes .witnesses__foot,
  .witness-js .chapter-scenes .witness__problem { display: none; }
  .witness-js .chapter-scenes .witness {
    flex: none;
    padding: 0 0 0 0.6rem;
  }
  .witness-js .chapter-scenes .witness__name { font-size: 0.85rem; }
  .witness-js .chapter-scenes .witness__when { font-size: 0.55rem; }
  /* Anchored jumps must clear the strip. */
  .witness-js .chapter-scenes > .scene {
    scroll-margin-top: calc(var(--ch-witness-h, 6rem) + 1rem);
  }
}
@media (min-width: 1500px) {
  .witness-js .chapter-scenes > .scene {
    scroll-margin-top: calc(var(--ch-header-h, 4rem) + 1.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .witness-js .chapter-scenes .scene#witnesses,
  .witness-js .chapter-scenes .witness { transition: none; }
}
.chapter-scenes .witness:focus-visible {
  outline: 2px solid var(--c-rust);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   THE LINE — a distance that changed, drawn to scale, with the
   consequences that followed it. Dark band, viewport width.

   Emitted by ssg.render._split_fullbleed from a
   <section class="fullbleed"> block in a prose body.
   --------------------------------------------------------------------- */

.chapter-scenes .scene-fullblock {
  background: var(--deep);
  color: var(--paper);
  padding: 3.5rem 0 3.75rem;
}
.chapter-scenes .scene-fullblock > * {
  max-width: var(--measure-prose);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.chapter-scenes .scene-fullblock .linebox__tag {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-rust);
}
.chapter-scenes .scene-fullblock h3 {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 4.2vw, 2.3rem);
  line-height: 1.08;
  letter-spacing: -0.024em;
  margin-bottom: 0.8rem;
  color: var(--paper);
}
.chapter-scenes .scene-fullblock .linebox__sub {
  color: rgba(245, 239, 228, 0.8);
  margin-bottom: 2.4rem;
}

/* the scale */
.chapter-scenes .scale { position: relative; margin-bottom: 1.6rem; }
.chapter-scenes .scale__beach {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 0.5rem;
}
.chapter-scenes .scale__track {
  position: relative;
  height: 64px;
  border-left: 2px solid var(--paper);
}
.chapter-scenes .scale__band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-right: 1.5px dashed rgba(245, 239, 228, 0.55);
}
/* 3 of 12 miles — the bands are drawn to scale against each other. */
.chapter-scenes .scale__band--old {
  width: 25%;
  background: rgba(193, 77, 46, 0.3);
}
.chapter-scenes .scale__band--new {
  width: 100%;
  background: rgba(245, 239, 228, 0.07);
  border-right: 2px solid var(--c-rust);
}
.chapter-scenes .scale__tick {
  position: absolute;
  top: 70px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  transform: translateX(-50%);
}
.chapter-scenes .scale__tick b {
  display: block;
  font-family: var(--ff-display);
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.2rem;
}
.chapter-scenes .scale__tick--a { left: 25%; color: rgba(245, 239, 228, 0.8); }
.chapter-scenes .scale__tick--b {
  left: 100%;
  transform: translateX(-100%);
  text-align: right;
  color: var(--c-rust);
}
.chapter-scenes .scale__cap {
  margin-top: 4.6rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1.8;
  color: var(--slate);
}

/* what followed from it */
.chapter-scenes .consequences {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 2.6rem;
  border: 1px solid rgba(245, 239, 228, 0.22);
}
.chapter-scenes .consequences__item {
  padding: 1.5rem 1.4rem;
  border-right: 1px solid rgba(245, 239, 228, 0.18);
}
.chapter-scenes .consequences__item:last-child { border-right: 0; }
.chapter-scenes .consequences__item b {
  display: block;
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: 1.15rem;
  line-height: 1.24;
  color: var(--c-rust);
  margin-bottom: 0.55rem;
}
.chapter-scenes .consequences__item p {
  margin: 0;
  font-size: 0.86rem;
  color: rgba(245, 239, 228, 0.82);
}

@media (max-width: 860px) {
  .chapter-scenes .consequences { grid-template-columns: 1fr; }
  .chapter-scenes .consequences__item {
    border-right: 0;
    border-bottom: 1px solid rgba(245, 239, 228, 0.18);
  }
  .chapter-scenes .consequences__item:last-child { border-bottom: 0; }
  .chapter-scenes .scale__tick { font-size: 0.56rem; }
}

/* ---------------------------------------------------------------------
   SOURCE NOTE — what a section rests on, and what is still open about it.
   .ch-src--warn is the rust warn state for an unresolved question or a
   claim travelling through a flagged transcription.
   --------------------------------------------------------------------- */
/* --------- per-section source note ------------------------------------ */

.chapter-scenes .ch-src {
  margin-top: 2rem;
  padding: 1rem 1.15rem;
  background: rgba(28, 46, 74, 0.045);
  border-left: 2px solid rgba(28, 46, 74, 0.22);
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.75;
  color: rgba(28, 46, 74, 0.72);
}
.chapter-scenes .ch-src b {
  color: var(--c-navy);
  font-weight: 500;
}
/* Warn state — an open question the chapter is carrying in the open. */
.chapter-scenes .ch-src--warn {
  border-left-color: var(--c-rust);
  background: rgba(193, 77, 46, 0.06);
}
.chapter-scenes .ch-src--warn b {
  color: var(--c-rust);
}


/* ---------------------------------------------------------------------
   DISPUTED FIGURE — a quantity the sources do not agree on, shown as the
   disagreement. Every figure gets equal weight and its own attribution;
   nothing here averages or picks.
   --------------------------------------------------------------------- */

.chapter-scenes .disputed {
  margin: 2rem 0;
  border: 1.5px solid var(--c-rust);
  background: #fff;
}
.chapter-scenes .disputed__head {
  margin: 0;
  padding: 0.8rem 1.2rem;
  border-bottom: 1px solid rgba(193, 77, 46, 0.3);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-rust-text, var(--c-rust));
}
.chapter-scenes .disputed__row {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 1.1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid rgba(28, 46, 74, 0.1);
  align-items: baseline;
}
.chapter-scenes .disputed__row:last-of-type { border-bottom: 0; }
.chapter-scenes .disputed__n {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-navy);
}
.chapter-scenes .disputed__who {
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1.7;
  color: rgba(28, 46, 74, 0.74);
}

/* ---------------------------------------------------------------------
   BURLOCK — a stacked object described in a source, drawn from the
   description. Six bottles: three, then two, then one.
   --------------------------------------------------------------------- */

.chapter-scenes .burlock {
  margin: 2rem 0;
  padding: 1.5rem 1.4rem;
  background: #fff;
  border: 1px solid rgba(28, 46, 74, 0.16);
}
.chapter-scenes .burlock__tag {
  display: block;
  margin-bottom: 0.9rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}
.chapter-scenes .burlock__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin: 1rem 0 1.1rem;
}
.chapter-scenes .burlock__row { display: flex; gap: 5px; }
.chapter-scenes .burlock__bottle {
  width: 20px;
  height: 26px;
  background: var(--mount);
  border: 1px solid rgba(28, 46, 74, 0.32);
  display: block;
}
.chapter-scenes .burlock p { margin: 0; font-size: 0.86rem; }

/* ---------------------------------------------------------------------
   VOICES CARD — a link to an oral history, in the speaker's own words.
   --------------------------------------------------------------------- */

.chapter-scenes .voicescard {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  margin: 2rem 0;
  padding: 1.4rem;
  background: var(--c-navy);
  color: var(--paper);
  text-decoration: none;
}
.chapter-scenes .voicescard__kicker {
  display: block;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-rust);
}
.chapter-scenes .voicescard__quote {
  margin: 0.5rem 0 0;
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: 1.1rem;
  line-height: 1.34;
  color: var(--paper);
}
.chapter-scenes .voicescard__who {
  margin: 0.6rem 0 0;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--slate);
}
.chapter-scenes .voicescard:hover .voicescard__quote { color: #fff; }
.chapter-scenes .voicescard:focus-visible {
  outline: 2px solid var(--c-rust);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------
   POLICY — a rule this project holds itself to, stated on the page.
   --------------------------------------------------------------------- */

.chapter-scenes .policy {
  display: block;
  margin: 2.25rem 0 0;
  padding: 1.8rem 1.7rem;
  border: 1.5px dashed rgba(28, 46, 74, 0.34);
  background: var(--mount);
}
.chapter-scenes .policy__tag {
  display: block;
  margin-bottom: 0.9rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-rust-text, var(--c-rust));
}
.chapter-scenes .policy p { font-size: 0.92rem; }
.chapter-scenes .policy p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .chapter-scenes .voicescard { flex-direction: column; gap: 0.8rem; }
  .chapter-scenes .disputed__row { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* ---------------------------------------------------------------------
   STATION LINE — a numbered chain along a coast. Named entries carry
   their name; the rest are numbers on the same line, because the point
   is how many there were. Scrolls horizontally without trapping the
   page's vertical scroll.
   --------------------------------------------------------------------- */

.chapter-scenes .stationline { position: relative; padding-top: 1.4rem; }
.chapter-scenes .stationline::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 1.85rem;
  height: 1px;
  background: rgba(245, 239, 228, 0.24);
}
.chapter-scenes .stationline__dots {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0 0 1rem;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.chapter-scenes .stationline__dots::-webkit-scrollbar { height: 3px; }
.chapter-scenes .stationline__dots::-webkit-scrollbar-thumb {
  background: rgba(245, 239, 228, 0.26);
}
.chapter-scenes .stationline__st {
  flex: none;
  width: 3rem;
  margin: 0;
  text-align: center;
  position: relative;
}
.chapter-scenes .stationline__dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--deep);
  border: 1.5px solid rgba(245, 239, 228, 0.42);
  margin: 0.3rem auto 0.9rem;
}
.chapter-scenes .stationline__no {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  color: rgba(245, 239, 228, 0.42);
}
.chapter-scenes .stationline__nm { display: none; }
.chapter-scenes .stationline__st.is-key { width: 7rem; }
.chapter-scenes .stationline__st.is-key .stationline__dot {
  background: var(--c-rust);
  border-color: var(--c-rust);
  width: 11px;
  height: 11px;
  margin-top: 0.15rem;
}
.chapter-scenes .stationline__st.is-key .stationline__no { color: var(--c-rust); }
.chapter-scenes .stationline__st.is-key .stationline__nm {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--ff-display);
  font-size: 0.86rem;
  line-height: 1.3;
  color: var(--paper);
}
.chapter-scenes .stationline__foot {
  margin: 1rem 0 0;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--slate);
}