@charset "utf-8";
/* ============================================================================
   THE WIRE — page-local extensions to the imprint stylesheet
   ----------------------------------------------------------------------------
   Loaded AFTER site/style.css and used only by site/the-wire.html.

   These are not new system components. Every rule below is built from tokens
   declared in style.css (ground, ink, accent, type scale, spacing, motion) and
   every class is namespaced `wire-` so it can never collide with the shared
   vocabulary in DESIGN.md §3. Nothing here is required to read the page: with
   this file missing the page is plain, ordered, legible HTML.

   Three page-local pieces:
     .wire-wordmark  the masthead letter-justified across the wide column,
                     which is the broadsheet's own grammar rebuilt in tokens
     .wire-clock     the two timestamps and the interval between them
     .wire-tape      the fifteen-minute readings and the wire items, merged
                     into one timeline. The only chart on the page; the bar it
                     draws encodes the signed difference between two printed
                     readings, zero-centred, one shared scale. See the page's
                     methods note.

   Colour discipline: --accent (#CE4B33) measures 4.30:1 on --ground, so it is
   used here for rules, fills and type at --text-lg and above only. Small type
   uses --ink, --ink-muted or --ink-faint (5.2:1 floor).
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. MASTHEAD
   ------------------------------------------------------------------------ */

.wire-band {
  height: 3px;
  border: 0;
  background: var(--ink);
  margin: 0 0 var(--sp-2);
  opacity: 0.92;
}

/* The wordmark: eight capitals justified edge to edge, with a press-red
   impression offset behind them. Chrome, not data. */
.wire-wordmark { margin-bottom: var(--sp-2); }
.wire-wordmark__set {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
}
.wire-wordmark__set > span {
  display: block;
  text-shadow: -0.042em -0.03em 0 rgba(206, 75, 51, 0.55);
}
.wire-wordmark__gap { flex: 0 0 1.5em; text-shadow: none !important; }

/* The dateline strip — the sheet's own furniture, restated. */
.wire-dateline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-4);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--ink-faint);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--sp-5);
}

/* The deck: standfirst at the left, the subject's dossier at the right —
   the sheet's own arrangement, re-set as HTML. Every row is Q1 output. */
.wire-deck { display: grid; gap: var(--sp-5); }
@media (min-width: 48em) {
  .wire-deck {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--sp-6);
    align-items: start;
  }
}
.wire-dossier {
  border-top: 2px solid var(--ink-faint);
  padding-top: var(--sp-3);
}
.wire-dossier dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
}
.wire-dossier dt {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.4;
}
.wire-dossier dd {
  margin: 0;
  text-align: right;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.4;
}

/* Section rhythm: --sp-6 between the page's movements (DESIGN §1.4). */
.wire-sec { margin-top: var(--sp-6); }

/* ---------------------------------------------------------------------------
   2. THE CLOCK — 15:18:00 · 2h 13m 39s · 17:31:39
   ------------------------------------------------------------------------ */

.wire-clock {
  display: grid;
  gap: var(--sp-4);
  margin: var(--sp-4) 0 var(--sp-4);
}
.wire-clock__mark {
  padding-top: var(--sp-3);
  border-top: 2px solid var(--accent-deep);
}
.wire-clock__key { margin-bottom: var(--sp-2); }
.wire-clock__time {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: var(--track-display);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}
.wire-clock__note {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 34ch;
}
.wire-clock__note strong { color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; }

/* the interval between the two marks. Its rule sits on exactly the same
   baseline as the two marks' rules, so all three tops align. */
.wire-clock__span {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
}
.wire-clock__gap {
  position: absolute;
  left: 0; right: 0; top: -2px;
  height: 2px;
  background: linear-gradient(to right, var(--accent-deep) 12%, var(--ink-faint));
}
.wire-clock__gap::before,
.wire-clock__gap::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 2px;
  height: 12px;
  background: var(--ink-faint);
}
.wire-clock__gap::before { left: 0; background: var(--accent-deep); }
.wire-clock__gap::after  { right: 0; }
.wire-clock__dur {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: var(--track-title);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
  line-height: 1.05;
}
.wire-clock__durlab { display: block; }

@media (min-width: 48em) {
  .wire-clock {
    grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.8fr) minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: start;
  }
}

/* ---------------------------------------------------------------------------
   3. THE OPEN-THE-ORIGINAL PAIR
   ------------------------------------------------------------------------ */

.wire-opens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* ---------------------------------------------------------------------------
   4. THE TAPE — readings and wire items on one timeline
   ---------------------------------------------------------------------------
   Row grammar, phone first:

       [ time ] [ count ..... ] [ delta ]
                [ bar ...................]
                [ note ..................]

   From 48em it collapses to one line, the bar taking the middle.
   ------------------------------------------------------------------------ */

.wire-tape {
  margin: var(--sp-4) 0 var(--sp-3);
  border-top: 1px solid var(--rule);
}

.wire-tape__row {
  display: grid;
  grid-template-columns: 5.4em minmax(0, 1fr) auto;
  column-gap: var(--sp-3);
  row-gap: var(--sp-2);
  align-items: baseline;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--rule-faint);
}

.wire-tape__t {
  grid-column: 1;
  font-size: var(--text-xs);
  letter-spacing: var(--track-meta);
  color: var(--ink-faint);
  white-space: nowrap;
}
.wire-tape__n {
  grid-column: 2;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: var(--track-title);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
  line-height: 1.05;
}
.wire-tape__d {
  grid-column: 3;
  justify-self: end;
  font-family: var(--mono);
  font-size: var(--text-sm);
  letter-spacing: var(--track-meta);
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  white-space: nowrap;
}
.wire-tape__d--base { color: var(--ink-faint); font-style: normal; }

/* the bar: zero-centred, one shared scale, --m = |delta| / 4980 */
.wire-tape__bar {
  grid-column: 2 / -1;
  grid-row: 2;
  position: relative;
  display: block;
  height: 0.7rem;
  align-self: center;
}
/* the zero reference. It has to be visible: it is what makes a bar to the
   left mean "fell" rather than "shorter". */
.wire-tape__bar::before {
  content: "";
  position: absolute;
  left: 50%; top: -0.2rem; bottom: -0.2rem;
  width: 1px;
  background: var(--ink-faint);
  opacity: 0.55;
}
.wire-tape__bar i {
  position: absolute;
  top: 0; bottom: 0;
  width: calc(var(--m, 0) * 50%);
  display: block;
}
.wire-tape__bar i[data-sign="up"]   { left: 50%;  background: var(--accent-deep); }
.wire-tape__bar i[data-sign="down"] { right: 50%; background: var(--ink-faint); }

.wire-tape__note {
  grid-column: 1 / -1;
  position: relative;
  padding-left: var(--sp-4);
  color: var(--ink-faint);
  letter-spacing: var(--track-meta);
}
.wire-tape__note::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 10px; height: 1px;
  background: var(--accent-deep);
}

/* wire items read as prose, not as data */
.wire-tape__row--wire {
  background: var(--ground-raised);
  border-bottom-color: var(--rule);
  padding-inline: var(--sp-3);
  margin-inline: calc(var(--sp-3) * -1);
}
.wire-tape__h {
  grid-column: 2 / -1;
  font-family: var(--serif);
  font-size: var(--text-base);
  line-height: 1.42;
  color: var(--ink);
  text-wrap: pretty;
}
.wire-tape__src {
  display: inline-block;
  margin-left: var(--sp-2);
  vertical-align: 0.12em;
  white-space: nowrap;
}

/* the crest */
.wire-tape__row.is-crest {
  border-bottom-color: var(--accent-deep);
  border-top: 1px solid var(--accent-deep);
  margin-top: -1px;
}
.is-crest .wire-tape__n { color: var(--accent); font-size: var(--text-lg); }
.is-crest .wire-tape__t { color: var(--ink-muted); }

.wire-tape__row.is-turn .wire-tape__n { color: var(--ink-muted); }

@media (min-width: 48em) {
  .wire-tape__row {
    grid-template-columns: 6.2em 7.6em minmax(6rem, 1fr) 6.4em;
    row-gap: var(--sp-1);
    align-items: center;
  }
  .wire-tape__bar { grid-column: 3; grid-row: 1; }
  /* the zero rule runs the height of the row, so the tape reads as one scale */
  .wire-tape__bar::before { top: -1.05rem; bottom: -1.05rem; }
  .wire-tape__d   { grid-column: 4; }
  .wire-tape__note { grid-column: 2 / -1; }
  .wire-tape__h   { grid-column: 2 / -1; }
}

/* stagger the reveal so the tape reads as tape. Scoped to .js exactly as the
   system's .reveal is, and neutralised by the reduced-motion block in
   style.css, which forces .reveal visible and collapses durations. */
.js .wire-tape .reveal { transition-delay: var(--rd, 0ms); }

/* ---------------------------------------------------------------------------
   5. METHODS BLOCK — the same .footnote component, set in two columns on wide
   screens so six disclosures read as a block and not as a grey wall.
   ------------------------------------------------------------------------ */

@media (min-width: 64em) {
  .wire-notes {
    display: block;
    columns: 2;
    column-gap: var(--sp-6);
  }
  .wire-notes .footnote {
    break-inside: avoid;
    max-width: none;
    margin-bottom: var(--sp-4);
  }
}

/* ---------------------------------------------------------------------------
   6. EVIDENCE ROW — the stats under "what the count actually counts"
   ------------------------------------------------------------------------ */

.wire-evidence {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}
@media (min-width: 48em) {
  .wire-evidence { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
}

/* ---------------------------------------------------------------------------
   7. PRINT
   ------------------------------------------------------------------------ */

@media print {
  .wire-band { background: #111; }
  .wire-hair { background: #999; }
  .wire-wordmark__set > span { text-shadow: none; }
  .wire-tape__row--wire { background: transparent; }
  .wire-tape__bar i[data-sign="up"]   { background: #C4361B; }
  .wire-tape__bar i[data-sign="down"] { background: #777; }
  .wire-opens { display: none; }
}