/* THE PAGE'S LAYOUT — "One Continuous Day": the whole day (03 The Day,
   04 The Timings, 05 The Moment, Glasses Off) lives inside ONE sticky
   chapter; five background photographs cross-fade behind the content beats.
   Loaded after density.css and scenes.css (scenes.css owns all pacing).
   History: merged from variant-h.css + variant-i.css when the layout
   explorations were retired (2026-08-06); rules that only served retired
   layouts were dropped. */

/* ---- The Position: vertically centered composition, map earns its half.
   The Shadow Clock pins this section, so the whole screen holds while the
   umbra sweeps. */
@media (min-width: 1200px) {
  #position {
    display: flex; align-items: center;
    min-height: 100svh; padding: clamp(48px, 7vh, 96px) 0;
  }
  #position .container {
    width: 100%; max-width: min(1520px, 94vw);
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(48px, 4.5vw, 96px); align-items: start;
  }
  #position .container > * { grid-column: 1; }
  #position .container > .kicker,
  #position .container > .statement { grid-column: 1 / -1; }
  #position .container > .map-wrap {
    grid-column: 2; grid-row: 3 / span 3; margin-top: 0; align-self: center;
  }
  #position .statement { font-size: clamp(44px, 4.4vw, 84px); }
  #position .statrow { margin-top: clamp(24px, 3.5vh, 44px); }
  #position .map-svg { width: 100%; height: auto; max-height: 70vh; }
  /* stat figures never wrap into their labels */
  #position .statrow .n { font-size: clamp(24px, 1.85vw, 40px); white-space: nowrap; }
  #position .statrow > div { padding-top: 22px; padding-bottom: 22px; }
}

/* no floating divider rules anywhere — the kicker stands on its own */
.kicker.ruled { border-top: 0; padding-top: 0; }

/* the crescent-light caption folds beneath the Moment content */
.foot-cap {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; line-height: 2;
  color: rgba(255,253,245,0.62); text-shadow: 0 1px 10px rgba(0,0,0,0.8);
  max-width: 640px; margin: clamp(28px, 4.5vh, 52px) auto 0; text-align: center;
}
@media (min-width: 1200px) {
  .beat-inner.duo .foot-cap { grid-column: 1 / -1; }
}

/* ---- The Moment: statement and the sensation rows share one screen. */
@media (min-width: 1200px) {
  .beat-inner.duo {
    max-width: min(1180px, 90vw); width: 90vw;
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(48px, 5vw, 104px); align-items: center; text-align: left;
  }
  .beat-inner.duo .statement { margin-left: 0; margin-right: 0; max-width: 12ch; }
  .beat-inner.duo .support { margin-left: 0; }
  .beat-inner.duo .beat-rows { margin: 0; max-width: none; }
}

/* ═══ The timings DOCUMENT beat (04) — its layout inside the chapter ═══ */

.beat.doc { min-height: 100svh; }
.beat-inner.doc-inner {
  max-width: min(1160px, 92vw); width: 92vw; text-align: left;
}
.doc-inner .chart-wrap { max-width: 860px; margin: 12px auto 0; }
.doc-inner .doc-cap {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase; text-align: center;
  color: rgba(255,253,245,0.72); text-shadow: 0 1px 10px rgba(0,0,0,0.8);
  margin-top: clamp(24px, 4vh, 44px);
}

@media (min-width: 1200px) {
  .doc-inner .seq.cols2 {
    display: grid; grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, auto); grid-auto-flow: column;
    column-gap: 48px; margin-top: clamp(24px, 4vh, 44px); border-top: 0;
  }
  .doc-inner .seq.cols2 .row:nth-child(1),
  .doc-inner .seq.cols2 .row:nth-child(5) { border-top: 1px solid rgba(255,255,255,0.14); }
  .doc-inner .row .t { font-size: clamp(17px, 1.35vw, 21px); }
  .doc-inner .row h3 { font-size: clamp(19px, 1.55vw, 23px); }
  .doc-inner .row p { font-size: 14.5px; }
}
/* short laptops: the document must fit its held screen */
@media (min-width: 1200px) and (max-height: 920px) {
  .doc-inner .chart-wrap { max-width: 680px; }
  .doc-inner .seq.cols2 { margin-top: 18px; }
  .doc-inner .seq.cols2 .row { padding: 8px 0; }
}

/* the document rides a deeper dim so the data reads over the vessel */
.chapter.docdim .chapter-dim { opacity: var(--darken-under-document); }

/* the document CASCADES: kicker, chart intro, chart, timeline, caption
   arrive in sequence once the page settles (the wordless entry shows the
   crescent-lit vessel alone) */
.beat.staged.doc .beat-inner > * {
  opacity: 0; transform: translateY(var(--rise-document));
  transition: opacity var(--fade-document) var(--chapter-ease), transform var(--fade-document) var(--chapter-ease);
}
.beat.staged.doc.full .beat-inner > * { opacity: 1; transform: none; }
/* each line waits --doc-line staggers; the indices are set inline where the
   document is assembled (build_site.py), so the delay follows the element,
   not its position — inserting a line cannot reorder the rest */
.beat.staged.doc.full .beat-inner > * { transition-delay: calc(var(--stagger-document-line) * var(--doc-line, 0)); }
@media (prefers-reduced-motion: reduce) {
  .beat.staged.doc .beat-inner > * { opacity: 1; transform: none; transition: none; }
}

/* rows inside the document protect themselves lightly */
.doc-inner .row h3, .doc-inner .row p, .doc-inner .row .t { text-shadow: 0 1px 8px rgba(0,0,0,0.7); }

/* the crescent-light caption arrives AFTER the rows have landed,
   tunable as --wait-caption in scenes.css */
.beat.staged.full .foot-cap { transition-delay: var(--wait-caption); }