/* =====================================================================
   Chapter 6 · The Twin Lights Century — chapter-scoped furniture.
   Ported from docs/ch6-mockup.html. Loaded only on this chapter, by the
   `ch-<slug>.css` convention in ssg.render._chapter_assets.

   Type and palette are the site's: Fraunces display, Inter body,
   IBM Plex Mono for stamps and captions; navy, deep, cream, rust.
   The local token block mirrors the one in about.css so the slot system
   ports across unchanged.
   ===================================================================== */

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

/* ---------- section heading: small-caps kicker over a display headline --- */

/* Column placement comes from .scene-label in scenes.css; this variant
   only changes the alignment and adds the display headline. */
.chapter-scenes .scene-label--titled {
  display: block;
  text-align: left;
}
.chapter-scenes .scene-label__kicker {
  display: block;
  color: var(--slate);
}
.chapter-scenes .scene-label__headline {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--ff-display);
  font-variant-caps: normal;
  font-weight: 300;
  font-size: clamp(1.9rem, 4.2vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--c-navy);
  text-transform: none;
}

/* A titled section owns its opening line; the drop cap would fight the
   headline directly above it. */
.chapter-scenes .scene:has(.scene-label--titled) > .prose:first-of-type
  > p:first-of-type::first-letter {
  font-family: inherit;
  color: inherit;
  font-weight: inherit;
  initial-letter: 1;
  -webkit-initial-letter: 1;
  float: none;
  font-size: inherit;
  padding: 0;
  margin-right: 0;
}

/* ---------- the beat: one sentence given a room of its own -------------- */

.chapter-scenes .ch-beat {
  margin-block: 2.75rem;
  padding-block: 2.35rem;
  border-top: 1px solid rgba(28, 46, 74, 0.2);
  border-bottom: 1px solid rgba(28, 46, 74, 0.2);
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(1.9rem, 4.4vw, 2.85rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  text-align: center;
  color: var(--c-rust);
}

/* Per-section source notes (.ch-src / .ch-src--warn) moved to
   components.css when Rum Row started using them too. */

/* ---------- image slots (ported from about.css) -------------------------
   Three states, decided at build time by ssg.render.render_slots:
     .is-filled  — the asset exists; image + credit
     .is-broken  — a src is declared but the file isn't there yet
     .is-empty   — no src at all: a standing acquisition request
   The gap states are deliberately visible. Both carry their credit and
   rights line, because an unfilled slot has to say what it is waiting on.
   ----------------------------------------------------------------------- */

.chapter-scenes .slot {
  position: relative;
  display: block;
  width: 100%;
  margin-block: 2.5rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-navy);
}
.chapter-scenes .slot.wide { aspect-ratio: 16 / 9; }

.chapter-scenes .slot .img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.chapter-scenes .slot.is-filled .img { opacity: 1; }
.chapter-scenes .slot.is-filled::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(18, 32, 58, 0.78) 0%,
    rgba(18, 32, 58, 0.12) 42%,
    rgba(18, 32, 58, 0) 70%);
}
.chapter-scenes .slot-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1rem 1.15rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--paper);
}
.chapter-scenes .slot-label b {
  display: block;
  font-weight: 400;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 0.32rem;
}
.chapter-scenes .slot-label .credit {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.59rem;
  letter-spacing: 0.06em;
  color: rgba(245, 239, 228, 0.6);
}

.chapter-scenes .slot.is-empty,
.chapter-scenes .slot.is-broken {
  background: var(--mount);
  border: 1.5px dashed rgba(28, 46, 74, 0.3);
}
.chapter-scenes .slot.is-empty .slot-label,
.chapter-scenes .slot.is-broken .slot-label { color: var(--c-navy); }
.chapter-scenes .slot.is-empty .slot-label b,
.chapter-scenes .slot.is-broken .slot-label b { color: var(--c-rust); }
.chapter-scenes .slot.is-empty .slot-label .credit,
.chapter-scenes .slot.is-broken .slot-label .credit {
  color: rgba(28, 46, 74, 0.6);
}

.chapter-scenes .slot .badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 3;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(193, 77, 46, 0.92);
  padding: 0.32rem 0.56rem;
}

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

/* ---------- the ledger spine -------------------------------------------
   The chapter's argument as an interface element: five firsts, tracked as
   the reader moves through the sections that earn them.

   Fixed rather than sticky. The scenes grid is a five-column documentary
   grid with no rail track in it, and a sticky grid item would unstick at
   the end of its own row — so the ledger is lifted out of flow entirely
   and parked in the left margin the prose measure already leaves empty.
   Below 1200px it becomes a horizontal strip pinned under the site header.
   ----------------------------------------------------------------------- */

/* Default — no JS: the ledger stays in the flow at the top of the chapter
   and reads as a plain list of five anchors. Everything below is scoped to
   .ch-js, the class ch-twin-lights.js sets on <html>, so the fixed rail and
   its fade only exist where they can actually be driven. */
.chapter-scenes .scene#ledger {
  display: block;
}
/* The ledger is chapter furniture, not a narrative section, so it doesn't
   take the rust section ornament that sits between scenes. Left in, the
   dash rendered inside the strip and its 3.3rem margin added ~55px of dead
   height to the mobile bar. */
.chapter-scenes > .scene#ledger::after {
  display: none;
}
.ch-js .chapter-scenes .scene#ledger {
  position: fixed;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--easing), visibility 0.45s var(--easing);
}
/* Revealed once the chapter body is under way, so the ledger never sits
   over the hero. */
.ch-js .chapter-scenes .scene#ledger.is-visible {
  opacity: 1;
  visibility: visible;
}
.chapter-scenes .scene#ledger > .prose {
  grid-column: auto;
  max-width: none;
  padding-inline: 0;
  margin-inline: 0;
}
/* The ledger owns its own type; the chapter's prose rules don't apply. */
.ch-ledger p { margin: 0; }

.ch-ledger__tag,
.ch-led__w,
.ch-ledger__foot,
.ch-beam__tag,
.ch-beam__lb,
.ch-beam__note,
.ch-folk__tag {
  font-family: var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ch-ledger__tag {
  display: block;
  margin-bottom: 1.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--slate);
}

.ch-led {
  display: block;
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 1.5rem;
  text-decoration: none;
  color: inherit;
}
.ch-js .ch-led {
  opacity: 0.42;
  transition: opacity 0.35s var(--easing);
}
.ch-led::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--c-navy);
  background: var(--paper);
  transition: background 0.35s var(--easing),
              border-color 0.35s var(--easing),
              transform 0.35s var(--easing);
}
/* The connecting thread between entries. */
.ch-led::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1.4rem;
  bottom: -1.5rem;
  width: 1px;
  background: rgba(28, 46, 74, 0.24);
}
.ch-led:last-of-type::after { display: none; }

.ch-led__y {
  display: block;
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: 1.44rem;
  line-height: 1;
  letter-spacing: -0.01em;
}
.ch-led__w {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.625rem;
  line-height: 1.5;
  color: var(--slate);
  text-transform: uppercase;
}

/* Lit — the entry's section is the one being read. */
.ch-led.is-on { opacity: 1; }
.ch-led.is-on::before {
  background: var(--c-rust);
  border-color: var(--c-rust);
  transform: scale(1.3);
}
.ch-led.is-on .ch-led__y { color: var(--c-rust); }
.ch-led.is-on .ch-led__w { color: var(--c-navy); }

.ch-ledger__foot {
  margin-top: 2.1rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(28, 46, 74, 0.18);
  font-size: 0.625rem;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--slate);
  text-transform: none;
}

/* Desktop rail — parked in the margin the 680px prose measure leaves.
   Positioned off the prose column's left edge rather than off the wide
   column, so the rail can never encroach on the measure: it ends a clear
   2rem short of where the text begins. 1280px is the narrowest viewport
   where a 14.5rem rail plus that gap still fits beside the measure. */
@media (min-width: 1500px) {
  .ch-js .chapter-scenes .scene#ledger {
    top: 50%;
    transform: translateY(-50%);
    width: 12rem;
    left: max(1rem, calc((100vw - 42.5rem) / 2 - 12rem - 1.5rem));
  }
}

/* Mobile / tablet — a horizontal strip pinned under the fixed site header.
   overflow-y is visible-free and touch-action is left at its default, so a
   vertical swipe that begins on the strip still scrolls the page; only the
   horizontal axis is contained. */
@media (max-width: 1499px) {
  .ch-js .chapter-scenes .scene#ledger {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0.6rem var(--gutter) 0.55rem;
    padding-top: calc(0.6rem + var(--ch-header-h, 2.9rem));
    background: var(--paper);
    border-bottom: 1px solid rgba(28, 46, 74, 0.16);
  }
  .ch-js .ch-ledger {
    display: flex;
    gap: 1.4rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .ch-js .ch-ledger::-webkit-scrollbar { display: none; }
  .ch-js .ch-ledger__tag,
  .ch-js .ch-ledger__foot,
  .ch-js .ch-led__w { display: none; }
  .ch-js .ch-led {
    flex: none;
    padding: 0;
    margin: 0;
    opacity: 0.4;
  }
  .ch-js .ch-led::before { position: static; display: block; margin-bottom: 0.4rem; }
  .ch-js .ch-led::after { display: none; }
  .ch-js .ch-led__y { font-size: 1rem; }
}

/* Jumping from a ledger entry must land the section below the fixed
   chrome, not underneath it: the site header on desktop, header plus the
   pinned strip on mobile. --ch-header-h is measured by ch-twin-lights.js. */
.ch-js .chapter-scenes > .scene {
  scroll-margin-top: calc(var(--ch-header-h, 4rem) + 1.5rem);
}
@media (max-width: 1499px) {
  /* --ch-ledger-h is the strip's measured height (it already includes the
     header offset), published by ch-twin-lights.js. Measured rather than
     assumed, so the bar can change height without stranding the anchors. */
  .ch-js .chapter-scenes > .scene {
    scroll-margin-top: calc(var(--ch-ledger-h, 7rem) + 1rem);
  }
}

/* ---------- the 1893 pledge -------------------------------------------- */

.chapter-scenes .ch-pledge {
  margin-block: 2.4rem;
  padding: 2.25rem 2.1rem;
  background: var(--c-navy);
  color: var(--paper);
}
.chapter-scenes .ch-pledge q {
  display: block;
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(1.3rem, 2.9vw, 1.75rem);
  line-height: 1.4;
  letter-spacing: -0.012em;
  quotes: none;
}
.chapter-scenes .ch-pledge__miss {
  margin-top: 1.6rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(245, 239, 228, 0.2);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  line-height: 2;
  color: var(--slate);
}
/* The two omissions, marked. */
.chapter-scenes .ch-pledge__miss b {
  color: var(--c-rust);
  font-weight: 400;
}

/* ---------- beam range comparison -------------------------------------- */

.chapter-scenes .ch-beam { margin-block: 2.5rem; }
.chapter-scenes .ch-beam__tag {
  display: block;
  margin-bottom: 1.25rem;
  font-size: 0.68rem;
  color: var(--slate);
}
.chapter-scenes .ch-beam__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.chapter-scenes .ch-beam__lb {
  flex: none;
  width: 3.4rem;
  font-size: 0.7rem;
  color: var(--slate);
}
.chapter-scenes .ch-beam__track {
  flex: 1;
  height: 10px;
  background: var(--mount);
  position: relative;
  overflow: hidden;
}
.chapter-scenes .ch-beam__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--c-rust);
  transition: width var(--motion-slow) cubic-bezier(0.2, 0.7, 0.3, 1);
}
.chapter-scenes .ch-beam__row:first-of-type .ch-beam__fill {
  background: rgba(28, 46, 74, 0.55);
}
.chapter-scenes .ch-beam__vl {
  flex: none;
  width: 5rem;
  text-align: right;
  font-family: var(--ff-display);
  font-size: 1.15rem;
  color: var(--c-navy);
}
.chapter-scenes .ch-beam__note {
  margin-top: 0.75rem;
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  color: var(--slate);
  text-transform: none;
}

/* ---------- then / now pair -------------------------------------------- */

.chapter-scenes .ch-thennow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-block: 2.5rem;
}
.chapter-scenes .ch-thennow .slot { margin: 0; }
@media (max-width: 900px) {
  .chapter-scenes .ch-thennow { grid-template-columns: 1fr; }
}

/* ---------- folklore, framed as folklore -------------------------------- */

.chapter-scenes .ch-folk {
  display: block;
  margin-top: 2.5rem;
  padding: 2rem 1.9rem;
  border: 1.5px dashed rgba(28, 46, 74, 0.32);
}
.chapter-scenes .ch-folk__tag {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--c-rust);
}
.chapter-scenes .ch-folk p { font-size: 0.95rem; }
.chapter-scenes .ch-folk p:last-child { margin-bottom: 0; }

/* ---------- motion + focus --------------------------------------------- */

/* Scoped to .ch-js to match — and beat — the specificity of the rules that
   declare these transitions. Without it the ledger keeps its fade under
   reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .ch-js .chapter-scenes .scene#ledger,
  .ch-js .ch-led,
  .ch-js .ch-led::before,
  .ch-js .chapter-scenes .ch-beam__fill,
  .chapter-scenes .ch-beam__fill {
    transition: none;
  }
}

.chapter-scenes .ch-led:focus-visible,
.chapter-scenes .ch-folk a:focus-visible {
  outline: 2px solid var(--c-rust);
  outline-offset: 3px;
}