/* Highlands History — shared chapter reading system.
   ===================================================================
   Loaded by every chapter page. Owns the shared reading shell: opening
   composition, section-heading hierarchy, caption treatment, and the
   mobile spacing rhythm. Per-chapter bespoke furniture still lives in
   ch-<slug>.css; nothing chapter-specific belongs here.

   Targets are expressed in rem against the 18px root floor that
   tokens.css pins across 320-767px (`clamp(112.5%, 100% + 0.35vw,
   128%)`), so reader text scaling still works. Do not restate them
   in px.
   =================================================================== */

/* --- section headings ------------------------------------------------
   A prose scene's `label:` is its section title — "The View", "The Old
   Ocean Floor". It was rendering through the small-caps UI label stack
   at 14.6px Inter, centered, which reads as a caption rather than a
   heading and left ten of the fifteen chapters with no visible section
   hierarchy at all.

   The five chapters that also declare `headline:` already get a Fraunces
   display heading from .scene-label--titled in components.css. This
   gives the other ten the same hierarchy from the content that exists,
   without authoring new headline text. --titled is excluded so it keeps
   its own kicker + headline composition.
   -------------------------------------------------------------------- */
.chapter-scenes .scene[data-scene-type="prose"]
  > .scene-label:not(.scene-label--titled) {
  font-family: var(--ff-display);
  font-variant-caps: normal;
  font-variation-settings: normal;
  font-weight: 300;
  font-size: clamp(1.55rem, 7.4vw, 1.67rem);
  line-height: 1.15;
  letter-spacing: -0.018em;
  text-transform: none;
  text-align: left;
  color: var(--c-navy);
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .chapter-scenes .scene[data-scene-type="prose"]
    > .scene-label:not(.scene-label--titled) {
    font-size: clamp(1.67rem, 2.6vw, 2.1rem);
  }
}

/* --- captions and credits -------------------------------------------
   Captions were inheriting the 18px Fraunces prose treatment, so a
   credit line read at the same weight as the narrative it supported.
   Inter at ~14px separates the supporting voice from the story without
   touching the desktop composition.
   -------------------------------------------------------------------- */
@media (max-width: 767px) {
  .chapter-figure figcaption,
  .scene figcaption {
    font-family: var(--ff-ui);
    font-size: 0.78rem;
    line-height: 1.5;
  }
  .chapter-figure figcaption .media-attribution,
  .scene figcaption .media-attribution {
    font-size: 0.72rem;
    line-height: 1.45;
  }
}

/* --- opening composition --------------------------------------------- */
@media (max-width: 900px) {
  /* Was 7rem — 126px of dead cream between a 72px fixed header and the
     trail, then another large margin before the title. The header is
     fixed, so the breadcrumb needs clearance for the header and little
     else. */
  .breadcrumb {
    padding-top: calc(var(--header-h, 72px) + 0.75rem);
    padding-bottom: 0.75rem;
  }
}

@media (max-width: 767px) {
  /* The decorative numeral is a 162px glyph sitting behind the eyebrow
     at 9% opacity. At phone width it crowds the title group and reads as
     a rendering fault rather than ornament. Chapter zero keeps its place
     in the canonical sequence and the eyebrow still names it. */
  .chapter-lede__numeral { display: none; }

  .chapter-lede {
    /* The 108px top / 54px bottom margins are the "6rem above the
       introduction" from the audit. They were tuned for a page whose
       breadcrumb already pushed the title group far down; with a compact
       breadcrumb they strand the title in the middle of the screen. */
    margin-top: 0;
    margin-bottom: 1.75rem;
    padding-top: 1.75rem;
    padding-bottom: 0;
  }
  .chapter-lede .chapter-eyebrow { margin-bottom: 0.5rem; }
  .chapter-lede .chapter-title { margin: 0 0 0.6rem; }
  .chapter-lede .chapter-subtitle { margin: 0 0 0.75rem; }
  .chapter-lede .chapter-dek { margin: 0; }

  /* "Scroll" tells the reader what the scrollbar already tells them, and
     it sits in the gap the title group needs. */
  .chapter-page .scroll-hint { display: none; }
}

/* --- figure variants -------------------------------------------------
   A figure may ship a phone-shaped redraw alongside the original. Both
   are inlined; exactly one is displayed, so the figure keeps a single
   accessible description and the hidden drawing leaves the
   accessibility tree with display:none.
   -------------------------------------------------------------------- */
.chapter-figure__variant--narrow { display: none; }
.chapter-figure__variant--wide { display: block; }

@media (max-width: 767px) {
  .chapter-figure__variant--narrow { display: block; }
  .chapter-figure__variant--wide { display: none; }
}

/* --- scroll sequences on phones --------------------------------------
   The sequence used four viewport-tall steps, so reading it meant
   scrolling through roughly three and a half screens of mostly empty
   space while a sticky graphic changed behind the text. On phones the
   component swaps to direct controls: one figure, one explanation, and
   a button per state.

   Everything here is gated on [data-controls="on"], which only the
   component sets. Without JS the original stacked fallback stands and
   all four explanations stay on the page.
   -------------------------------------------------------------------- */
.scrolly-figure__controls { display: none; }

@media (max-width: 767px) {
  scrolly-figure[data-controls="on"] .scrolly-figure__controls {
    /* Two even columns rather than a flex row: four labels of uneven
       length wrapped 3 + 1 and stretched the last one across a whole
       row of its own. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 1rem auto 0;
    max-width: var(--measure-prose);
    padding-inline: var(--gutter);
  }

  .scrolly-figure__pick {
    min-height: 44px;
    padding: 0 14px;
    font-family: var(--ff-ui);
    font-size: 0.84rem;
    color: var(--c-navy);
    background: transparent;
    border: 1px solid rgba(28, 46, 74, 0.35);
    cursor: pointer;
  }
  .scrolly-figure__pick[aria-pressed="true"] {
    background: var(--c-navy);
    border-color: var(--c-navy);
    color: var(--c-cream);
  }
  .scrolly-figure__pick:focus-visible {
    outline: 2px solid var(--c-rust);
    outline-offset: 2px;
  }

  /* One explanation at a time, and none of them viewport-tall. */
  scrolly-figure[data-controls="on"] .scrolly-figure__step { display: none; }
  scrolly-figure[data-controls="on"] .scrolly-figure__step[data-active] {
    display: block;
    min-height: 0;
    padding: 1rem 0 0;
  }
  /* The sticky layout belongs to the scroll path, which is not running. */
  scrolly-figure[data-controls="on"] .scrolly-figure__sticky {
    position: static;
    height: auto;
  }
}

/* A scrolly scene's label is an absolutely-positioned overlay sitting at
   the top of the graphic. The phone drawing has its own kicker in the
   same place, so the two printed over each other. In flow it reads as
   what it is — the heading for the sequence. */
@media (max-width: 767px) {
  .chapter-scenes .scene[data-scene-type="scrolly"] > .scene-label {
    position: static;
    transform: none;
    text-align: left;
    margin: 0 auto 0.75rem;
    max-width: var(--measure-prose);
    padding-inline: var(--gutter);
    /* Taking it out of absolute positioning drops it into the grid's
       first track — a 16px gutter here — which crushes it to one word
       per line. scenes.css flags this for the prose label; the same
       applies to any label put back in flow. */
    grid-column: prose-start / prose-end;
  }
}

/* --- chapter ending ---------------------------------------------------
   The next-chapter card is a large target already; the all-chapters link
   beside it was a 29px line of text. Both are independent navigation
   actions and both should clear 44px.
   -------------------------------------------------------------------- */
@media (max-width: 767px) {
  .chapter-prevnext .chapter-prevnext__all,
  .chapter-prevnext a:not(.chapter-prevnext__card) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* --- enlarged figure viewer ------------------------------------------- */

/* Stop the article scrolling behind the modal. */

/* --- full-bleed caption and credit ------------------------------------
   The caption overlay and the credit strip were two separately
   positioned layers both pinned to the bottom of the image. A long
   credit — the 1851 Coast Survey sheet names a superintendent, a
   survey, a city, a year and a library division — wrapped to three
   lines on a phone and grew upward into the caption, printing one over
   the other. They are now one bottom-aligned stack, so they cannot
   collide at any credit length.
   -------------------------------------------------------------------- */
.scene-fullbleed__overlay > .scene-fullbleed__meta {
  position: static;
  margin-top: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
  max-width: var(--measure);
  text-align: center;
}

@media (max-width: 767px) {
  .scene-fullbleed__overlay > .scene-fullbleed__meta .media-attribution {
    font-size: 0.72rem;
    line-height: 1.45;
  }
}

/* --- related feature card ---------------------------------------------
   The card carried a kicker, a title, a teaser sentence and then a
   second explanatory line ("A feature within … · deep-dive on …") plus
   the call to action — four text blocks saying overlapping things in a
   phone-width card. The brief asks for a thumbnail, a title, one short
   contextual sentence and a clear link, so the second explanatory line
   stands down on phones. It stays in the markup for wider screens,
   where there is room for it.
   -------------------------------------------------------------------- */
@media (max-width: 767px) {
  .feature-card__why { display: none; }

  /* The link is a grid, not a flex row — sizing the thumb with flex did
     nothing, and the grid stretched it to 96x200, cropping a 4344x2896
     landscape photograph to a narrow vertical slice. Two explicit
     columns and a landscape thumb instead. */
  .feature-card__link {
    grid-template-columns: 104px 1fr;
    align-items: start;
    gap: 14px;
    /* The card already pads 18px; the link added another 25px each side,
       leaving the text column 145px wide and ragging the teaser over
       seven lines. */
    padding-inline: 0;
  }
  .feature-card__thumb {
    width: 104px;
    height: 78px;
    overflow: hidden;
  }
  .feature-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .feature-card__title {
    font-size: 1.17rem;
    line-height: 1.18;
  }
  .feature-card__dek {
    font-size: 0.84rem;
    line-height: 1.45;
  }
  .feature-card__cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    /* Keep the arrow with the words, as in the homepage captions. */
    white-space: nowrap;
  }
}

/* --- in-place source notes -------------------------------------------- */
/* Compact marker, slightly easier to hit. Deliberately not a 44px box:
   these sit inline in running prose, and a target that size would
   overlap the lines above and below and any link next to them. */
.cite a {
  padding: 0.25em 0.3em;
  margin: -0.25em -0.1em;
  border-radius: 2px;
}
.cite a:focus-visible { outline: 2px solid var(--c-rust); outline-offset: 1px; }

.srcsheet {
  width: 100%;
  max-width: 34rem;
  margin: auto auto 0;            /* bottom sheet on phones */
  padding: 0;
  border: 0;
  background: var(--c-cream, #F5EFE4);
  color: var(--c-ink, #1C2E4A);
  max-height: 72dvh;
  display: none;
}
.srcsheet[open] { display: flex; flex-direction: column; }
.srcsheet::backdrop { background: rgba(10, 18, 32, 0.55); }

.srcsheet__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(28, 46, 74, 0.14);
}
.srcsheet__label {
  margin: 0;
  font-family: var(--ff-ui);
  font-size: 0.73rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.srcsheet__close {
  min-height: 44px;
  padding: 0 14px;
  font-family: var(--ff-ui);
  font-size: 0.84rem;
  color: var(--c-navy);
  background: transparent;
  border: 1px solid rgba(28, 46, 74, 0.35);
  cursor: pointer;
}
.srcsheet__close:focus-visible { outline: 2px solid var(--c-rust); outline-offset: 2px; }

/* A long note scrolls inside the sheet rather than growing past it. */
.srcsheet__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  font-family: var(--ff-ui);
  font-size: 0.84rem;
  line-height: 1.5;
}
.srcsheet__body .chapter-source__notes { display: block; margin-top: 0.6rem; }
.srcsheet__body .chapter-source__url { min-height: 44px; display: inline-flex; align-items: center; }

html[data-srcsheet-open] { overflow: hidden; }

@media (min-width: 768px) {
  /* Centred dialog on wider screens rather than a bottom sheet. */
  .srcsheet { margin: auto; max-height: 60dvh; }
}

/* --- contents and anchor offsets --------------------------------------
   The header is fixed, so anything scrolled to by an anchor lands
   underneath it unless the target reserves room. This covers contents
   links, citation targets, endnote backlinks and direct hash links
   alike, and it applies on first load and on browser Back, because it
   is a property of the target rather than something script does on
   click.
   -------------------------------------------------------------------- */
.scene,
.chapter-source,
.cite a,
.chapter-sources,
[id] { scroll-margin-top: calc(var(--header-h, 72px) + 1rem); }

.chapter-toc {
  max-width: var(--measure-prose);
  margin: 0 auto 2rem;
  padding-inline: var(--gutter);
}
.chapter-toc__summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--ff-ui);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  cursor: pointer;
  border-top: 1px solid rgba(28, 46, 74, 0.14);
  border-bottom: 1px solid rgba(28, 46, 74, 0.14);
}
.chapter-toc__summary:focus-visible { outline: 2px solid var(--c-rust); outline-offset: 2px; }
.chapter-toc__list {
  margin: 0.5rem 0 0;
  padding: 0 0 0 1.4rem;
}
.chapter-toc__list li { margin-bottom: 0; }
.chapter-toc__list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--ff-ui);
  font-size: 0.89rem;
  color: var(--c-navy);
  text-decoration: none;
}
.chapter-toc__list a:hover { text-decoration: underline; }
/* Where the reader is now. Set by script; absent without JS, which
   costs nothing — the list still works as a list of links. */
.chapter-toc__list li[data-current] a {
  color: var(--c-rust);
  font-weight: 600;
}

/* Reading progress — a thin line under the fixed header. */
.chapter-progress {
  position: fixed;
  /* At the very top of the viewport, above the header rather than under
     it: a progress line reads as a property of the page, not of the nav. */
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  background: transparent;
  pointer-events: none;
}
.chapter-progress__bar {
  height: 100%;
  width: 0;
  background: var(--c-rust);
  transition: width 120ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .chapter-progress__bar { transition: none; }
}

/* --- viewer: sequence and item metadata -------------------------------
   Used when the archive opens the viewer with a result set. Chapter
   figures pass neither and keep the caption-only presentation.
   -------------------------------------------------------------------- */

/* --- listen to this chapter -------------------------------------------
   Cream panel, navy transport, rust fill — the same vocabulary as the
   rest of the page. The <audio> element stays in the DOM doing the
   actual work; only its default chrome is replaced, and only once the
   script has succeeded.
   -------------------------------------------------------------------- */
.chapter-listen {
  max-width: var(--measure-prose);
  margin: 0 auto 1.75rem;
  padding: 1rem var(--gutter) 1.1rem;
  border-top: 1px solid rgba(28, 46, 74, 0.14);
  border-bottom: 1px solid rgba(28, 46, 74, 0.14);
  --played: 0%;
}
.chapter-listen__label {
  margin: 0 0 0.75rem;
  font-family: var(--ff-ui);
  font-size: 0.73rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
/* No-JS fallback: the browser's own player, full width. */
.chapter-listen__audio { width: 100%; }
.chapter-listen__audio--hidden { display: none; }

.chapter-listen__transport {
  display: flex;
  align-items: center;
  gap: 14px;
}

.chapter-listen__play {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--c-navy);
  border-radius: 50%;
  background: var(--c-navy);
  color: var(--c-cream);
  cursor: pointer;
}
.chapter-listen__play:focus-visible { outline: 2px solid var(--c-rust); outline-offset: 3px; }

/* Triangle at rest, two bars while playing — drawn in CSS so the control
   carries no extra request. */
.chapter-listen__icon {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-left: 13px solid currentColor;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.chapter-listen[data-playing] .chapter-listen__icon {
  width: 11px;
  height: 14px;
  margin-left: 0;
  border: 0;
  border-left: 3.5px solid currentColor;
  border-right: 3.5px solid currentColor;
}

.chapter-listen__seek {
  flex: 1 1 auto;
  -webkit-appearance: none;
  appearance: none;
  height: 44px;              /* full-height target over a 3px rail */
  background: transparent;
  cursor: pointer;
}
.chapter-listen__seek:focus-visible { outline: 2px solid var(--c-rust); outline-offset: 2px; }
.chapter-listen__seek::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(to right,
    var(--c-rust) 0 var(--played), rgba(28, 46, 74, 0.2) var(--played) 100%);
}
.chapter-listen__seek::-moz-range-track {
  height: 3px;
  background: linear-gradient(to right,
    var(--c-rust) 0 var(--played), rgba(28, 46, 74, 0.2) var(--played) 100%);
}
.chapter-listen__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: var(--c-rust);
}
.chapter-listen__seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--c-rust);
}

.chapter-listen__time {
  flex: 0 0 auto;
  font-family: var(--ff-ui);
  font-size: 0.73rem;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-muted);
}
.chapter-listen__sep { opacity: 0.5; padding: 0 0.3em; }