/* Unstealth brand site, v3. THE JOURNEY.
   Palette and families come from tokens.css. Type SIZES are page scale.

   RESTORED 2026-08-24 to the BLOCK version, on Dev's call, after the gradient
   and corridor revisions both came back worse. Bone type on solid blocks at
   0.82. The measurement behind it is BLOCK-SYSTEM.md sections 1 to 8. */

:root {
  --m: 96px;
  --gut: 24px;
  --bleed: 56px;

  --d1: clamp(40px, 6.4vw, 92px);
  --d2: clamp(26px, 3.4vw, 52px);
  /* Body scale raised 2026-08-25 on Dev's review. 22/17 read small on a
     full-bleed film page. Hero (--d1) and the close plate are pinned below
     and deliberately excluded. */
  --b1: clamp(19px, 1.6vw, 26px);
  --b2: clamp(16px, 1.3vw, 20px);
  /* the close plate keeps the pre-2026-08-25 scale, it was already right */
  --b1-close: clamp(17px, 1.35vw, 22px);
  --mo: clamp(11px, 0.86vw, 14px);

  /* 0.78 is the measured floor for bone at 7:1 across all six legs in all five
     candidate positions. 0.82 is that floor plus margin. Solid would bury film
     that cost 20,160 credits. */
  --blk: rgba(11, 13, 16, 0.80);

  /* THE COLUMN. Dev drew a vertical line at roughly a third of the frame and
     said everything, copy and block, stays left of it. So the body chapters
     live in one left column and the film keeps the other two thirds. Blocks
     may be narrower than the cap. None may cross it.
     The hero and the close are the two full-width moments and are exempt. */
  --cap: 40vw;
  /* The nav is fixed and OPAQUE. Copy under it is invisible while measuring
     as inside the viewport, which is how ch3 and ch4 shipped with their top
     block hidden. Every frame starts below it. probe.mjs enforces this. */
  --nav-h: 74px;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }

body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--body); font-size: var(--b1);
  -webkit-font-smoothing: antialiased;
}

[data-sc-copy] { position: absolute; inset: 0; }

.frame {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
  padding: var(--nav-h) var(--m) 0;
  align-content: center;
}

[data-t] { margin: 0; position: relative; z-index: 2; }

/* =====================================================================
   THE THREE BLOCKS, and there are only three.
   Square, zero radius, no blur, no gradient, no shadow, per s8 and s9.2.
   ===================================================================== */

/* A soft left shade under the whole column. Not a scrim over the film: it
   stops well before the animal and its only job is to stop the blocks reading
   as rectangles cut out of the frame. Dev, 2026-08-24. */
.shade {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(8,10,13,0.72) 0%,  rgba(8,10,13,0.62) 20%,
    rgba(8,10,13,0.42) 36%, rgba(8,10,13,0.24) 50%,
    rgba(8,10,13,0.10) 64%, rgba(8,10,13,0.03) 78%, rgba(8,10,13,0) 90%);
}
/* Chapter 5 is the one frame where he is centre LEFT with his reflection under
   him, and the open water is on the right. The copy goes where the picture has
   room, so the column and its shade both flip. */
.shade-r {
  background: linear-gradient(260deg,
    rgba(8,10,13,0.72) 0%,  rgba(8,10,13,0.62) 20%,
    rgba(8,10,13,0.42) 36%, rgba(8,10,13,0.24) 50%,
    rgba(8,10,13,0.10) 64%, rgba(8,10,13,0.03) 78%, rgba(8,10,13,0) 90%);
}

.blk { background: var(--blk); }

/* A. THE RAIL. Full height, bleeds one side. Display type. A rail at exactly
   100vh is always reported CUT, because the engine's copy overlay sits about
   18px down the viewport. 84vh, centred. */
.blk-rail {
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
}
.blk-rail-r { margin-right: calc(-1 * var(--m)); padding: 0 var(--m) 0 var(--bleed); }

/* B. THE BAND. It bleeds ONE frame edge and its other edge is set by the copy,
   not by the grid span. s8 asks a slab to bleed at least one edge; it never
   asked for two. Sizing to the span left the ring block running 1300px past
   its longest line, which is a lot of film paid for and then covered with
   nothing. A band hugs its own longest line and stops. */
.blk-band { padding: 16px var(--bleed); }

/* C. THE PLATE. The close only. Solid lava, ink in --ground at 5.86:1.
   Bone on lava is 2.9:1 and fails every standard. */
.blk-plate {
  background: var(--lava); color: var(--ground);
  margin: 0 calc(-1 * var(--m)); padding: 30px var(--m) 0;
}

/* ---- type roles ---- */

.disp { font-family: var(--display); font-size: var(--d1);
  line-height: 0.96; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--ink); }
.disp-2 { font-family: var(--display); font-size: var(--d2); line-height: 1.02;
  letter-spacing: -0.014em; text-transform: uppercase; }
.body   { font-size: var(--b1); line-height: 1.4; max-width: 62ch; }
.body-s { font-size: var(--b2); line-height: 1.45; max-width: 58ch; color: var(--bone-200); }
.meta   { font-family: var(--meta); font-size: var(--mo); line-height: 1.5;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

.hl { background: var(--lava); color: var(--ground);
  font-family: var(--display); font-size: var(--d2);
  line-height: 1.06; text-transform: uppercase; letter-spacing: -0.012em;
  padding: 0.34em 0.46em 0.4em; display: inline-block; margin-top: 22px; }

/* =====================================================================
   S1 to S7. Seven compositions, each used ONCE, enforced by anchor-check.mjs
   which measures real geometry rather than these class names.
   ===================================================================== */

/* S1, the slope. A band across the bottom, so the animal keeps the frame and
   the display type keeps its full 92px measure. A rail wide enough to hold the
   claim covers his head, which sits at roughly x 560 to 700 on this leg. */
.s1 { align-content: start; padding-top: calc(var(--nav-h) + 3vh); }
.s1 [data-t] { grid-column: 1 / span 11; }
.s1 .disp { color: var(--ground); letter-spacing: -0.024em; }
.s1 .meta { margin-top: 22px; color: var(--ground); }

/* Letters arrive across the line as the reader scrolls. A word stays one unit
   so the line still wraps and still copies; only the letters inside it split. */
[data-letters] .w { display: inline-block; white-space: nowrap; }
[data-letters] .l { display: inline-block;
  --lp: clamp(0, calc((var(--wp) * 2.9 - var(--i) / var(--n)) * 9), 1);
  opacity: var(--lp);
  transform: translateY(calc((1 - var(--lp)) * 0.22em));
}

/* S2, the clearing. THE PEAK. Three bands at three different spans, so the
   reader's eye steps rather than sitting on one edge. */
.s2 { row-gap: 4px; }
.s2 .blk-band { padding: 8px var(--bleed); }
/* One cut edge, not three. The three bands were 42/47/46vw, so the staircase
   went out and came back and read as two panels overlapping rather than one
   surface. Chapter 4 steps its INSIDE edge and keeps one outside edge, which is
   why it fuses. Same mechanic here: the count is indented inside the surface. */
.s2 .bnd-1 { grid-column: 1 / -1; width: 47vw; margin-left: calc(-1 * var(--m)); padding-left: var(--m); }
.s2 .bnd-2 { grid-column: 1 / -1; width: 51vw; margin-left: calc(-1 * var(--m));
  /* the count is indented INSIDE the surface, the same mechanic that fuses s4 */
  padding-left: calc(var(--m) + 26px); }
/* 47vw, not --cap. The ring is a COUNT. An item that wraps to two lines makes
   five items look like eight and the reader stops counting. Every item has to
   hold one line at --b1. Measured by _ringcheck below the fold in BLOCK-SYSTEM. */
.s2 .bnd-3 { grid-column: 1 / -1; width: 47vw; margin-left: calc(-1 * var(--m)); padding-left: var(--m); }
.s2 .disp-2 { font-size: clamp(25px, 2.8vw, 42px); }
.s2 .hl { font-size: clamp(17px, 1.75vw, 26px); margin-top: 7px; }

.ring { margin: 0; padding: 0; list-style: none; counter-reset: r; }
.ring li { counter-increment: r; display: grid;
  grid-template-columns: 26px 1fr; align-items: baseline; gap: 14px;
  padding: 3px 0; border-bottom: 1px solid rgba(57,148,179,0.34);
  font-size: var(--b1); line-height: 1.2; }
.ring li::before { content: counter(r); font-family: var(--meta); color: var(--teal); }

/* S3, the treeline. The mirror of S1. The thing itself on the left, the second
   voice in a rail on the right, which leg 3's dark treeline earns. */
.s3 { row-gap: 4px; }
.s3 .bnd-left { grid-column: 1 / -1; width: 44vw;
  margin-left: calc(-1 * var(--m)); padding-left: var(--m); }
.s3 .blk-rail-r { grid-column: 1 / -1; width: 38vw;
  margin-left: calc(-1 * var(--m)); margin-right: 0; gap: 0;
  padding: 6px var(--bleed) 6px var(--m); }
.s3 .disp-2 { font-size: clamp(20px, 1.98vw, 29px); }
/* The second voice. It was set as amber mono with a rule down every line,
   which is the terminal-transcript look and reads as machine output rather
   than as someone talking. Prose now, in the page's own body face. */
.note-p { font-size: var(--b2); line-height: 1.34; color: var(--bone-200);
  margin: 0 0 3px; max-width: 52ch; }
.note-p--last { color: var(--ink); font-size: var(--b1); line-height: 1.36;
  margin: 7px 0 0; }

/* S4, the undergrowth. A stepped slab. Rows share ONE left edge with no row
   gap, so the blocks fuse into one surface and the staircase is on the right.
   Indenting from the left left bare film showing in strips between them, which
   read as a render fault rather than a composition. */
.s4 { row-gap: 0; }
.s4 .blk-band { padding: 6px var(--bleed) 6px var(--m); margin-left: calc(-1 * var(--m)); }
.s4 .r0 { grid-column: 1 / -1; width: 42vw; }
.s4 .r1 { grid-column: 1 / -1; width: var(--cap); padding-left: calc(var(--m) + 26px); }
.s4 .r2 { grid-column: 1 / -1; width: var(--cap); padding-left: calc(var(--m) + 26px); }
.s4 .gut { display: none; }   /* an orphan tab in the corner, attached to nothing */
.s4 .disp-2 { font-size: clamp(23px, 2.5vw, 37px); }

.ledger { display: grid; grid-template-columns: 1fr; gap: 2px; }
.ledger .was { font-family: var(--display); text-transform: uppercase;
  letter-spacing: -0.008em; font-size: clamp(19px, 1.7vw, 25px); line-height: 1.12; }
.ledger .is  { color: var(--moss); font-size: var(--b2); line-height: 1.35; }

/* S5, still water. Off the rail, high and left. Every statement occupies the
   SAME cell so the reader is left with one sentence and then silence. */
.s5 .blk-off { grid-column: 1 / -1; grid-row: 1; width: var(--cap);
  justify-self: end; margin-right: calc(-1 * var(--m));
  padding: 30px var(--m) 30px var(--bleed); }
.s5 .sign { grid-column: 1 / -1; grid-row: 1; align-self: end; justify-self: end;
  margin-bottom: 6vh; margin-right: calc(-1 * var(--m)); text-align: right;
  background: var(--blk); padding: 11px var(--m) 12px 18px; }

/* S6, the high rock. The close. Set LEFT, per brand-system-v2.md s6.4,
   "Left, always. No centred type anywhere in the system." */
/* THE CLOSE. Centred on Dev's call, 2026-08-24. brand-system-v2.md s6.4 says
   "Left, always. No centred type anywhere in the system", and the counter-case
   was made when this was moved left. Dev reversed it, so it is centred and the
   exception is recorded here rather than argued again.
   The footer sits ON the plate now, so the black box at the bottom of the frame
   is gone. The plate is the only ground in this chapter. */
/* The lava is a BAND that hugs the copy, not a field sized to the viewport.
   A 56% field turned the close into a colour panel with type on it. Both rows
   carry the same ground and the same bleed, so they fuse with no notch. */
.s6 { row-gap: 0; align-content: end; padding-bottom: 7vh; }
.s6 .c6-plate { grid-column: 1 / -1; margin: 0 calc(-1 * var(--m));
  padding: 30px var(--m) 28px; text-align: center;
  background: var(--lava); color: var(--ground); }
.s6 .c6-head { max-width: 72ch; margin: 0 auto 14px; }
.s6 .c6-act  { margin: 0; }
.s6 .plate-b { margin-left: auto; margin-right: auto; }
.plate-h { font-family: var(--display); font-size: clamp(38px, 5vw, 70px);
  line-height: 0.98; letter-spacing: -0.02em; text-transform: uppercase; margin: 0 0 16px; }
.plate-b { font-size: var(--b1-close); line-height: 1.5; max-width: 64ch; font-weight: 500;
  margin: 0 0 12px; }
/* THE BUTTON. Square, per s8: the one radius is zero. Ground on lava is the
   plate's own inversion, so the button is the plate's ink made solid. */
.btn { display: inline-block; margin: 4px 0 0;
  background: var(--ground); color: var(--ink);
  font-family: var(--meta); font-size: clamp(14px, 1.15vw, 17px);
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  padding: 15px 30px 16px; border: 1px solid var(--ground);
  transition: background .18s ease, color .18s ease; }
.btn:hover { background: transparent; color: var(--ground); }
.plate-foot { font-family: var(--meta); font-size: var(--mo); letter-spacing: 0.06em;
  text-transform: uppercase; margin: 26px 0 0; color: var(--ground); }
.plate-foot a { color: var(--ground); }

/* S7, the interstitial. The one block that bleeds NOTHING. Inset in the middle
   columns, which is what makes a breath read as a breath rather than as a short
   chapter, and what keeps it distinct from chapter 1. */
.s7 { align-content: center; }
.s7 .rule { grid-column: 1 / -1; width: 30vw; border-top: 1px solid var(--rule);
  justify-self: end; margin-right: calc(-1 * var(--m)); text-align: right;
  padding: 18px var(--m) 20px var(--bleed); }

/* ---- nav ---- */
/* THE NAV BAR. A real bar rather than two floating words, because the mark has
   a minimum of 48px (s4.7) and it is drawn for a ground, so it needs one. The
   bar is solid, which also means the nav never has to negotiate with six
   different legs of film underneath it. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; padding: 12px var(--m);
  background: rgba(9, 11, 14, 0.92);
  border-bottom: 1px solid var(--rule);
  font-family: var(--meta); font-size: var(--mo);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.nav__brand { display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: var(--ink); }
.nav__brand img { display: block; width: 48px; height: 48px; }
.nav__brand span { font-family: var(--display); font-size: 22px;
  letter-spacing: 0.02em; text-transform: uppercase; }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a { color: var(--muted); text-decoration: none; }
.nav__links a:hover { color: var(--ink); }
.nav__cta { color: var(--ink) !important;
  border-bottom: 1px solid var(--lava); padding-bottom: 3px; }

.sc-world { z-index: 0; }
.sc-world__copy { z-index: 20; }


/* =====================================================================
   THE SURFACE. 2026-08-25, Dev's review: "just text in a black box".
   He was right, and the cause is that the build broke its own rule.
   BLOCK-SYSTEM.md s4 says ONE BLOCK PER CHAPTER, NEVER TWO. Chapter 2
   shipped three separate bands, chapter 3 shipped two. Chapter 4 shipped
   eight elements at row-gap 0, which FUSES them into a single stepped
   surface, and chapter 4 is the one nobody calls a box. That is the whole
   difference: a chapter with gaps reads as stacked rectangles, a chapter
   without them reads as one panel that was cut to fit its copy.

   Everything a designer would normally reach for here is banned and was
   already tried. No radius, blur, glass, gradient or shadow (s8, s9.2, and
   glassmorphism is named in 9.2 as a dating category default). Gradients
   and a corridor were both built and both rejected, BLOCK-SYSTEM s9 to s13.
   So the upgrade is STRUCTURE, plus the two brand devices the page owned
   and never used.

   1. FUSE. row-gap 0 on chapters 2, 3 and 5. One surface, stepped on the
      cut edge, exactly as chapter 4 already is.
   2. THE MEASURE MARK. brand-system-v2.md s14, device 2, "a short lava bar
      sized off the type column and set above it. Furniture that admits the
      frame was measured." Built here, never previously placed.
   3. THE CUT EDGE. A 1px rule in the chapter's own state colour on the edge
      the copy set, so the staircase reads as measured rather than cropped.
      Colours are already documented in COPY-V3.md: teal is the ring that
      exists, amber is its edge, moss is the second ring.
   The plate opacity is untouched at 0.82. It is the measured AAA floor plus
   margin and it is not a style choice.
   ===================================================================== */

/* 1. FUSE */
.s2, .s3 { row-gap: 0; }
.s5 .blk-off { --edge: rgba(214,208,199,0.26); }

/* 2. THE MEASURE MARK, once per chapter, on the first block only */
.s2 .bnd-1::before,
.s3 .bnd-left::before,
.s4 .r0::before,
.s5 .blk-off::before {
  content: ""; display: block;
  width: 52px; height: 4px; background: var(--lava);
  margin-bottom: 13px;
}

/* 3. THE CUT EDGE. Each band already sets its own width off its copy, so the
   rule lands on the staircase and articulates it. */
.s2 .blk-band { --edge: rgba(57,148,179,0.42); }     /* teal, the ring that exists */
.s3 .blk-band, .s3 .blk-rail { --edge: rgba(209,169,59,0.34); }  /* amber, its edge */
.s4 .blk-band { --edge: rgba(78,163,104,0.38); }     /* moss, the second ring */
.s2 .blk-band, .s3 .blk-band, .s3 .blk-rail, .s4 .blk-band, .s5 .blk-off {
  border-right: 1px solid var(--edge);
}
/* Chapter 5's column is flipped, so its cut edge is the LEFT one. */
.s5 .blk-off { border-right: 0; border-left: 1px solid var(--edge); }

/* =====================================================================
   PHONE. 430x932. Six columns, every block bleeds both edges, because at a
   20px margin a stepped indent is noise rather than a composition.
   ===================================================================== */
@media (max-width: 900px) {
  :root { --m: 20px; --bleed: 20px; --nav-h: 56px; }
  .frame { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  .s1 [data-t],
  .s2 .bnd-1, .s2 .bnd-2, .s2 .bnd-3,
  .s3 .bnd-left, .s3 .blk-rail-r,
  .s4 .r0, .s4 .r1, .s4 .r2,
  .s5 .blk-off, .s6 .c6-head, .s6 .foot, .s7 .rule { grid-column: 1 / span 6; width: auto; }

  .blk-band, .s4 .blk-band { margin: 0 calc(-1 * var(--m)); padding: 16px var(--m); }
  .blk-rail-r { min-height: 0; margin: 0 calc(-1 * var(--m)); padding: 8px var(--m); gap: 0; }
  .s5 .blk-off { padding: 22px var(--m); margin: 0 calc(-1 * var(--m)); }
  .s4 .r1, .s4 .r2 { padding-left: var(--m); }
  .s4 .gut, .s5 .sign { display: none; }
  .ledger { grid-template-columns: 1fr; gap: 4px; }
  .s2 { row-gap: 0; }
  .ring li { padding: 6px 0; font-size: 15px; grid-template-columns: 22px 1fr; gap: 10px; }
  .blk-plate { padding: 30px var(--m) 34px; }
  .s7 .rule { padding: 16px var(--m) 18px; }

  /* The type came up for a 40vw desktop column. At 430px the same copy has to
     fit a 932px frame, so the phone takes its own smaller scale. */
  .s2 .disp-2 { font-size: 21px; }
  .s2 .hl { font-size: 14px; padding: .3em .42em .36em; margin-top: 10px; }
  .ring li { font-size: 13.5px; padding: 5px 0; line-height: 1.28; }
  .s3 .disp-2 { font-size: 16px; }
  .s3 .body-s, .c3-second { font-size: 13px; }
  .note-p { font-size: 11.5px; line-height: 1.4; margin-bottom: 6px; }
  .s4 .disp-2 { font-size: 19px; }
  .ledger .was { font-size: 14px; }
  .ledger .is { font-size: 12.5px; line-height: 1.35; }
  .s4 .row { padding-top: 5px; margin-bottom: 5px; }
  .blk-band, .s4 .blk-band { padding: 12px var(--m); }
  /* The fuse holds on the phone too. At row-gap 5 the film shows in strips
     between the bands and they read as three stacked boxes again, which is the
     exact defect this section fixes. */
  .s2, .s3 { row-gap: 0; }
  /* the engine's 2vh copy translate pushes a top-aligned block off the frame */
  .frame { padding-top: var(--nav-h); }
  /* the hero drifts up 2vh as its window hands over, so it needs clearance
     above the nav, not merely level with it */
  .s1 { padding-top: calc(var(--nav-h) + 9vh); }   /* was 3.2vh. ch3's top block sits at +46px, so half is still clear of the 2vh copy translate */
  .s2 .disp-2 { font-size: 19px; }
  .ring li { font-size: 12.5px; padding: 4px 0; }
  .s3 .disp-2 { font-size: 15px; }
  /* still 27px and 16px over the bottom on a 932px phone */
  .s2 .disp-2 { font-size: 18px; }
  .s2 .body { font-size: 14px; }
  .ring li { font-size: 12px; padding: 3px 0; }
  .s2 .hl { font-size: 13px; margin-top: 8px; }
  .note-p { font-size: 11px; margin-bottom: 5px; }
  .s3 .lines > span { margin-bottom: 3px; }
  .s2 .disp-2 { font-size: 17px; }
  .s2 .body { font-size: 13px; margin-top: 6px; }
  .ring li { font-size: 11.5px; line-height: 1.24; }
  .c3-second { margin-top: 6px; }
  .s3 .body-s { margin-bottom: 8px; font-size: 12px; }
  .s3 .disp-2 { font-size: 14px; }
  .note-p { font-size: 10.5px; line-height: 1.35; }
  /* ch4 gained a word on the "worth vouching for" row and went 10px over a
     932px frame. The slab is seven rows, so the padding is where it comes from. */
  .s4 .blk-band { padding: 7px var(--m); }
  .ledger .is { font-size: 12px; line-height: 1.3; }
  .nav { padding: 10px var(--m); gap: 12px; }
  .nav__brand img { width: 34px; height: 34px; }
  .nav__brand span { font-size: 17px; }
  .nav__links { gap: 14px; font-size: 9px; letter-spacing: 0.1em; }

  /* ------------------------------------------------------------------
     PHONE TYPE RAISED, 2026-08-25, Dev's review. Everything above this
     is an accumulated stack of shrink-to-fit passes that bottomed out at
     10.5px note copy, which is unreadable. This block is the last word in
     the cascade and it is sized UP to whatever probe.mjs still passes at
     430x932. If a future edit adds copy, take it out of the copy, not out
     of this scale.
     ------------------------------------------------------------------ */
  .s2 .disp-2 { font-size: 28px; }
  .s2 .body { font-size: 17px; margin-top: 10px; }
  .s2 .hl { font-size: 18px; margin-top: 12px; }
  .ring li { font-size: 16px; line-height: 1.3; padding: 6px 0; }
  .s3 .disp-2 { font-size: 22px; }
  .s3 .body-s { font-size: 16px; margin-bottom: 10px; }
  .note-p { font-size: 15px; line-height: 1.42; margin-bottom: 8px; }
  .note-p--last { font-size: 17px; margin-top: 12px; }
  .s4 .disp-2 { font-size: 25px; }
  .ledger .was { font-size: 19px; }
  .ledger .is { font-size: 15px; line-height: 1.4; }
  .s5 .body { font-size: 17px; }
  .s5 .disp-2 { font-size: 23px; }
  .s4 .blk-band { padding: 10px var(--m); }
  .blk-rail-r { padding: 16px var(--m); }

  /* The sentence-per-line stack is DROPPED below 900px. A 430px column cannot
     hold a sentence on one line, so every "line" wraps and the stack reads as
     broken prose rather than as a stack. Measured with br-check.mjs: 15 of 15
     segments wrap at 430px, 0 of 29 at 1440px. Prose cadence is correct here. */
  .body br, .note-p br, .plate-b br { display: none; }
}