/* ==========================================================================
   FRONTLINE21 — EDITORIAL SEQUENCE
   Two reusable elements of the printed plate's architecture.

   1. The light header band. A warm white strip above a dark editorial surface,
      with a straight edge and disciplined alignment: it isolates a small,
      exactly set line and gives it authority over the material beneath. Used
      to title a film, a photographic sequence and the Field Manual artifact,
      and nowhere in the Wall of Truth.

   2. The red line. Where a paragraph leaves the headline's column because its
      position tells the story, the headline arrives first, holds long enough
      to read, and then a Frontline red rule travels from the headline to the
      paragraph, which completes the thought as the line reaches it. The
      geometry is drawn between real layout anchors by redline.js; the
      stylesheet reserves the paragraph's room, so nothing jumps, and keeps
      everything visible with scripts off or motion reduced.
   ========================================================================== */

/* --- The band ----------------------------------------------------------------- */

:root {
  --band-paper: #f5f2ea;
  --band-ink: #1a1e21;
  --band-ink-dim: #4b5153;
}

.band {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px clamp(18px, 3vw, 40px);
  padding: 13px clamp(14px, 2vw, 24px) 12px;
  background: var(--band-paper);
  color: var(--band-ink);
  border-bottom: 1px solid rgba(26, 30, 33, 0.18);
  position: relative;
}

/* The faintest paper grain. The lettering, the edge and the alignment do the
   work; the grain only keeps the strip from reading as a flat interface bar. */
.band::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url('../images/texture/grain-256.png') 0 0 / 256px 256px repeat;
  opacity: 0.035;
  mix-blend-mode: multiply;
}

.band__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(14px, 1.1vw, 16px);
  letter-spacing: var(--track-label, 0.025em);
  line-height: var(--lead-label, 1.2);
  text-transform: uppercase;
  color: var(--band-ink);
}

.band__note {
  flex: 1 1 auto;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: clamp(13px, 1vw, 14px);
  line-height: 1.35;
  color: var(--band-ink-dim);
  text-wrap: pretty;
}

.band__note b {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--band-ink);
}

/* A band that carries a control, such as the reader's Expand. The control
   takes dark ink on the paper. */
.band .btn {
  --btn-fg: var(--band-ink);
  --btn-bg: transparent;
  --btn-bd: rgba(26, 30, 33, 0.42);
  align-self: center;
}

.band .btn:hover,
.band .btn:focus-visible {
  --btn-bd: var(--f21-red);
}

.band .btn:focus-visible {
  box-shadow: 0 0 0 5px var(--band-paper);
}

/* Bands above media frames sit flush on the frame, sharing its width; their
   note sits at the far edge, opposite the label. */
.band--stage {
  border-top: 1px solid rgba(26, 30, 33, 0.18);
}

.band--stage .band__note {
  text-align: right;
}

/* --- The red line ---------------------------------------------------------------- */

[data-redline] {
  position: relative;
}

.redline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

.redline path {
  fill: none;
  stroke: var(--f21-red);
  stroke-width: 2;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}

/* 8 September, evening. The paragraph used to be hidden here and faded in
   behind the line. The brief for this pass rejects that: "a paragraph sliding
   upward as one rectangle is insufficient" — the letters are supposed to
   populate. So this stylesheet no longer hides anything at all. The line
   draws, adds is-read, and copy-reveal.js populates the copy from that cue.

   That also removes a whole class of risk: there is now exactly one place on
   the site that can hold text back, and it is the module with the sweeps,
   the settles and the reduced-motion exit. */
[data-redline-to] { position: relative; }

/* The traverse hands off. Once the stroke has arrived, the group's resting
   rules — the two short cues the composition is designed around — are what
   remain, and the connector fades out from under them. The resting rules are
   drawn by this stylesheet, so the settled page never depends on script. */
[data-redline][data-redline-mode='descend'] .redline-rest,
[data-redline][data-redline-mode='traverse'] .redline-rest { display: block; }

[data-redline][data-redline-mode='stacked'] .redline-rest { display: none; }

[data-redline].is-handed-over .redline {
  opacity: 0;
  transition: opacity 520ms var(--ease-out) 120ms;
}

[data-redline-route='traverse'] .redline-rest {
  position: absolute;
  height: 2px;
  background: var(--f21-red);
  opacity: 0;
  pointer-events: none;
}

[data-redline-route='traverse'].is-handed-over .redline-rest,
[data-redline-mode='descend'].is-handed-over .redline-rest {
  opacity: 1;
  transition: opacity 320ms var(--ease-out) 200ms;
}

@media (prefers-reduced-motion: reduce) {
  [data-redline].is-handed-over .redline { transition: none; }
  [data-redline-route='traverse'] .redline-rest { opacity: 1; transition: none; }
}