/* hero.css — the spread at the head of sheet 1: Fig. 1 on the left, the copy
 * on the right.
 *
 * Fig. 1 is a plate in the brochure sense: a hairline frame, the figure tag in
 * the spot colour, a tape counter in the corner, and under the picture a print
 * band where the lines the transport has read appear as real text. The frame is
 * a grid of two rows — the scene takes what the print band leaves — so the same
 * markup survives a 4:3 plate on a desk and a square one on a phone without a
 * pixel that means "above the print band on a 529px-tall plate".
 *
 * The scene is paint (design/hero.js draws the machine); everything with letters
 * in it is DOM. Without script every line is printed; `html.js` is what hides
 * them until the tape has passed the head, which is the same arrangement the
 * console further down the sheet uses.
 */

.spread {
  display: grid; grid-template-columns: 58fr 42fr; gap: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 4vw, 56px) 0; border-bottom: 1px solid var(--tc-rule-strong);
}
figure.plate { margin: 0; display: grid; gap: var(--tc-space-xs); min-width: 0; align-content: start; }
.frame {
  position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto;
  aspect-ratio: 4 / 3; overflow: hidden; background: var(--tc-paper);
  border: 1px solid var(--tc-ink); border-radius: var(--tc-radius-xs);
}
.scene { position: relative; min-height: 0; }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.no-gl .scene canvas { display: none; }
.fig-tag { position: absolute; top: 10px; left: 12px; color: var(--tc-spot); }
.scene .counter {
  position: absolute; top: 9px; right: 12px;
  font-family: var(--tc-font-mono); font-size: var(--tc-text-2xs); font-weight: var(--tc-weight-medium);
  color: var(--tc-ink-muted); font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}
.scene .counter b { color: var(--tc-ink); font-weight: var(--tc-weight-medium); }

/* the print band */
.print { border-top: 1px solid var(--tc-rule); padding: var(--tc-space-xs) var(--tc-space-sm) var(--tc-space-sm); }
.print ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
html.js .print .line { visibility: hidden; opacity: 0; }
html.js .print .line.on { visibility: visible; opacity: 1; transition: opacity var(--tc-dur-fast) var(--tc-ease-out-soft); }

/* the caption: a dimension rule, then the figure legend */
figcaption { display: grid; gap: var(--tc-space-xs); }
.dim {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--tc-space-xs);
  font-family: var(--tc-font-mono); font-size: var(--tc-text-2xs); color: var(--tc-ink-muted); font-variant-numeric: tabular-nums;
}
.dim i { position: relative; height: 8px; border-inline: 1px solid var(--tc-ink); }
.dim i::before { content: ""; position: absolute; inset-inline: 0; top: 50%; border-top: 1px solid var(--tc-ink); }
figcaption p { margin: 0; max-width: var(--tc-measure); }
figcaption b { color: var(--tc-spot); margin-right: 6px; }

/* the copy */
.copy { display: grid; align-content: start; gap: var(--tc-space-md); min-width: 0; }
.copy .field { margin-block-start: var(--tc-space-xs); }
.probe-note { margin: 0; }

@media (max-width: 980px) { .spread { grid-template-columns: 55fr 45fr; } }
@media (max-width: 760px) { .spread { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .frame { aspect-ratio: 1 / 1; }
  .print .line:nth-child(n + 4) { display: none; }
}
@media (prefers-reduced-motion: reduce) { html.js .print .line.on { transition: none; } }
@media (forced-colors: active) {
  /* A canvas cannot be rethemed by the OS: the script does not boot here, and the
     plate is a bordered box of real text. */
  .scene canvas { display: none; }
  .frame { border-color: CanvasText; }
  .fig-tag, .counter, .counter b { color: CanvasText; }
}