/* =============================================================================
   BAR FIVE RAFTER PUBLISHING CO. — finish.css
   The typographic finish. Loaded after press.css and it adjusts; it does not
   restate. Nothing in this file adds a word to the page, and nothing in it
   moves. Written by the finish pass, 2026-09-01.

   WHY THIS FILE EXISTS. The owner's verdict on the built site was "it feels
   very basic still." The words are right and the grid is right; what was
   missing is the layer a reader never names — the finish of a page that has
   been SET rather than styled. Eight things, each the kind a book's own
   compositor does without being asked, and each measured before it stayed.

   -----------------------------------------------------------------------------
   WHAT THE TWO FACES ACTUALLY CARRY — read before anything below was written
   -----------------------------------------------------------------------------
   The self-hosted files are Google's latin subsets, and a subset drops
   whatever the subsetter was not told to keep. The GSUB feature list of each
   file was read from the file itself (fontTools, 2026-09-01) and then
   confirmed in Chromium by measuring a rendered string with the feature on
   and off — a feature the browser cannot find changes nothing, and that
   "nothing" is the measurement:

     Source Serif 4  wght 200–900, opsz 8–60
                     carries  ccmp dnom frac liga locl numr pnum tnum
                     LACKS    smcp c2sc onum lnum
     Public Sans     wght 100–900, no opsz axis
                     carries  calt ccmp dnom frac liga locl numr pnum tnum
                     LACKS    smcp c2sc onum lnum

   Two consequences, both of them refusals:
     - NO SMALL CAPITALS. Neither face has them. font-variant-caps would make
       the browser fake them by shrinking capitals, which is exactly the
       "slightly wrong font" fonts.css already refuses for synthetic bold.
       The gothic labels stay as capitals, tracked one step tighter (§1).
     - NO OLDSTYLE FIGURES in the prose. The serif has none, so the running
       text keeps its lining figures, which is what the book itself does.
   Tabular figures ARE real in both faces (tnum), and are used (§6).
   ========================================================================== */


/* ==========================================================================
   1. THE GOTHIC LABELS — capitals, tracked to .08em
   ========================================================================== */

/* These are the eight or so words on the page that are set in capitals, and
   each was tracked by hand at a different figure: .12em, .1em, .09em. One
   figure for the case, and it is the tighter one — capitals need air between
   them, but .12em at 16px is 2px of air per letter and "THE FIRST BOOK TO
   CARRY THIS IMPRINT" ran wide of the measure it sits over. .08em is what
   the colophon slug already used, and the widest label (measured, §verify)
   comes in narrower than it was, not wider.
   .callbar-lbl is left at press.css's .06em: the only way to reach .08em
   from .06em is to GROW, and a label in a fixed thumb bar 375px wide has
   nowhere to grow into. */
.eyebrow, .opt-no, .receipt-head, .way h3, .place {
  letter-spacing: .08em;
}


/* ==========================================================================
   2. THE RAG — pretty where press.css has not already said so
   ========================================================================== */

/* press.css already carries the other half of this section and it is not
   repeated here: hanging-punctuation: first last is on body (§2, inherited
   by everything), text-wrap: balance is on h1/h2/h3, and text-wrap: pretty is
   on p. What it left out is every line that is not a <p>: the option lists,
   the seven stations, the fence's five lines, the receipt's items and the
   cover credit. Same rag rule, same reason — no orphan word on its own line
   for a reader who is holding the phone at arm's length. Ignored by any
   browser that does not know it; nothing depends on it. */
li, dt, dd, summary, figcaption {
  text-wrap: pretty;
}


/* ==========================================================================
   3. THE DROP CAPITAL — REMOVED (owner, 2026-09-02)
   --------------------------------------------------------------------------
   "i dont like the big letter in the hero section." It is out. The measurement
   that set it — the cap's baseline landing on the third line's, to the pixel,
   in both print modes — is kept in DECISIONS D56 rather than here, because a
   stylesheet is not the place to argue with a ruling. The hero lead is now
   ordinary text at its own optical size (section 5 below), which was the only
   part of this section doing work for the reader rather than for the page.
   ========================================================================== */

/* ==========================================================================
   4. THE LETTERHEAD RULE — thick, then thin, the way a letterhead was cut
   ========================================================================== */

/* The masthead's heavy rule stays exactly what press.css made it: the one
   2px ink rule on the page. Three pixels beneath it, a hairline. A
   nineteenth-century trade letterhead closed its heading with this pair —
   the thick rule to end the name, the thin one to start the sheet — and it
   is the single ornament this page allows itself that is not the book. It
   is drawn as a positioned pseudo-element hung below the band's own border
   (the band is not made taller, so nothing under it moves), and it is not
   drawn with the shadow property: shadows are banned in press.css §1 and a
   1px offset one would be a shadow under another name. z-index 1 so the
   reading bar, which forauthors.js mounts directly beneath, cannot paint
   over it; motion.css later makes the band sticky at z-index 40, and the
   pair travels with the running head, as a letterhead's rule should. */
.masthead { position: relative; }
.masthead::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;                 /* 2px border, 3px of paper, then the line */
  height: 0;
  border-top: var(--rule-hair);
  z-index: 1;
  pointer-events: none;
}

/* The three option cards and the receipt carry the same pair as their edge:
   press.css's mid rule outside, and a hairline 3px inside it. A pseudo-
   element rather than an inset outline, for one reason — the receipt's foot
   is a dashed perforation and the inner rule has to stop short of it, which
   an outline cannot do. Nothing else on the page gets a double rule. */
.option, .receipt { position: relative; }
.option::before, .receipt::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: var(--rule-hair);
  pointer-events: none;
}
.receipt::before { border-bottom: 0; }

/* FOUND BY THE OVERFLOW SWEEP FOR THIS PASS, and fixed here because the
   receipt's edge is this file's to draw: a receipt line is a nowrap flex row
   whose figure is flex: 0 0 auto, so where an item's shortest word plus its
   figure outrun the row, nothing can give. Measured with finish.css OFF, so
   it is press.css's and not this file's: at 320 in normal print "$8.00 a
   page" ends at x=319 on a card whose border is at x=300 — through the
   edge, and through the hairline above; in Larger print at 320 and 390 it
   ends at 398.6 and the PAGE scrolls sideways, which is the one thing no
   width may do. Below press.css's own 30rem breakpoint — the width its
   extras register stacked at, for the same reason — the item takes the
   line and the leader and figure follow on the next, which is how a
   printed receipt wraps a long item. Above it the row is untouched. */
/* RE-SCOPED BY THE COMPOSITION PASS, 2026-09-02, and the reason is §11D: the
   receipt's rows are now set at --t-fine, which is the size press.css §17 set
   this same content at before §18 enlarged it. At that size the item and its
   figure fit one line on a 390px phone in normal print, so firing this rule at
   every width below 480px was costing five rows a second line each — ~250px of
   the phone page — to prevent an overflow that no longer happens there.

   It still fires exactly where the type IS too big for the card, which is the
   two cases the original measurement found: Larger print below 480px (at 390
   the row ended at 398.6 against a 390 viewport and the PAGE scrolled
   sideways), and the narrowest phones in normal print, where 320 less its
   gutters and the card's own padding leaves ~256px for an item and a figure.
   22rem = 352px, so 320 is covered and 390 is not.

   WHAT IT IS ACTUALLY WORTH, measured at 390 rather than assumed: the five
   rows are 280px with the rule firing and 257px without it — 23px, not the
   hundred this first claimed. Four of the five items still take two lines
   either way, because at --t-fine the item and its figure need 372, 400, 428
   and 443px against the 326px the card leaves, and no scoping changes
   arithmetic. What the un-stacked form buys besides the 23px is that the
   figure sits on the item's FIRST line, beside it, where a receipt puts it,
   and the one row that fits keeps its dotted leader. Re-verified by the
   overflow sweep at 320/390/430/834/1280 in both print modes. */
@media (max-width: 30rem) {
  html.large .receipt-lines > div { flex-wrap: wrap; row-gap: 0; }
  html.large .receipt-lines dt { flex: 0 0 100%; }
}
@media (max-width: 22rem) {
  .receipt-lines > div { flex-wrap: wrap; row-gap: 0; }
  .receipt-lines dt { flex: 0 0 100%; }
}


/* ==========================================================================
   5. OPTICAL SIZE — every serif size on the axis
   ========================================================================== */

/* press.css sets --opsz per role, and the universal rule turns it into the
   axis. One serif size had no role of its own: the hero lead is 24px through
   .hero-say but inherits body's opsz 16, so it was drawn with the sturdier
   contrast of text type at a size that wants the lead paragraph's 24 (.big
   already does exactly this in §2). The rest were audited in the browser —
   every serif element's font-size against its resolved opsz — and are on
   the axis already; the audit is in the verification block. */
.hero-say .lead { --opsz: 24; }


/* ==========================================================================
   6. FIGURES — tabular and lining wherever figures line up
   ========================================================================== */

/* The prices, the receipt, the telephones and the mock-up's facts were
   already tabular in press.css. The two dates were not: the date under each
   station and the date the reader can set above them. Figures that are
   going to be compared want the same width each. lining-nums is stated for
   the day a build ships a face that has oldstyle by default; on these two
   faces it is a no-op, measured. */
.station-date, .post-date {
  font-variant-numeric: tabular-nums lining-nums;
}


/* ==========================================================================
   7. PAPER — a second impression of the tooth on the two bands that lead
   ========================================================================== */

/* press.css §4 paints the tooth into header, .book, .inside, .doesnt and
   footer — but §14's `.masthead { background: var(--sink) }` is a shorthand
   and a shorthand resets background-image, so the letterhead had in fact
   lost its paper, and .options never had any. Both get it here, and get it
   one step stronger than the body: the SAME tile, referenced through the
   same custom property so there is still exactly one tooth on the site,
   laid down twice. Two multiplies of the same sparse noise, aligned, are the
   same fibres printed a second time — the pattern does not change, only its
   depth. Measured in the browser by compositing the tile onto the sink
   ground in a canvas: one impression darkens the mean sRGB value by 2.0%,
   the second by a further 1.97% of what was left — the 2% that press.css §1
   measured the tooth at is this encoded figure, and it is held to here. In
   linear light the same two steps are 4.5% and 4.3%, which is the number to
   quote if anyone asks in photometric terms. Never on the book's
   photographs, as before. */
.masthead, .options {
  background-image: var(--paper), var(--paper);
  background-blend-mode: multiply, multiply;
  background-repeat: repeat;
}


/* ==========================================================================
   8. INK — the underline of a link
   ========================================================================== */

/* A hairline in the accent ink, close under the word, the way a rule is
   drawn under a line in a ledger. press.css had it at 0.18em, which at 20px
   is 3.6px below the baseline and reads as a separate object; 0.12em sits
   it under the descender line. The color is the accent's, so the underline
   is the link's mark even where the word is not: a read link goes to ink-70
   in press.css and its rule follows it, so a visited link is one color and
   not two. On hover the rule thickens by a pixel — press.css's own rule,
   left standing — and nothing changes color alone. The telephones and the
   skip link set text-decoration: none in press.css and are untouched. */
a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
  text-decoration-color: var(--accent);
}
a:visited { text-decoration-color: var(--ink-70); }
a:active  { text-decoration-color: var(--ink); }


/* ==========================================================================
   VERIFICATION — Chromium 148, 2026-09-01/02. Every figure below was read
   from a same-origin <iframe> created at the size named and never resized
   after loading, with finish.css fetched cache:'reload' first so a stale
   copy could not be what was measured. "Before" is the same frame with this
   sheet disabled; "after" is the same frame with it enabled.
   --------------------------------------------------------------------------
   FEATURES — width of a 100px string, feature off / on:
     Source Serif 4  Hamburgefonstiv 788.00 / 788.00 smcp        none
                     HAMBURGEFONSTIV 982.80 / 982.80 c2sc        none
                     0123456789      500.00 / 500.00 onum, lnum  none
                     ten 1s          500.00 / 426.00 pnum        real; the
                                     figures are tabular BY DEFAULT, so
                                     tabular-nums is a no-op on the serif
                     font-variant-caps: all-small-caps  687.96   synthesised
     Public Sans     Hamburgefonstiv 812.61 / 812.61 smcp        none
                     HAMBURGEFONSTIV 1006.27 / 1006.27 c2sc      none
                     0123456789      600.91 / 600.91 onum, lnum  none
                     ten 1s          406.81 / 700.00 tnum        real
   LABELS — text width at 390, normal print, before -> after (Larger print
   is 1.25x each, same line counts):
     .eyebrow        261.27 -> 246.55, two lines both times
     .opt-no         87.90 / 91.20 / 91.69 -> 82.77 / 86.09 / 86.56
     .receipt-head   224.48 -> 211.52
     .way h3         123.83 / 213.88 -> 122.21 / 210.81
     .place          224.59 -> 218.51 — and one line at 320, where press.css
                     §14 records it taking two
     .callbar-lbl    211.04 -> 211.04, left alone as §1 says
   DROP CAP — float path, initial-letter forced off, baselines by a zero-size
   inline-block probe inside a replica whose line breaks match the original:
     normal  cap baseline 88.5px below the paragraph top, third line 88.5
     Larger  110.5 and 110.5
     (0.758 sat 0.5px high in both modes; 0.766 sat 0.5px low in Larger;
     0.762 is the one that is exact in both.) Float box 92.35px against a
     third line ending at 96, and 115.45 against 120: three lines shortened
     and the fourth full width at 320, 390 and 430 in both modes; at 834 and
     1280 the paragraph is only three lines long.
   DROP CAP — initial-letter path, which is what Chromium and Safari draw:
     the browser ignores the declared font-size and sizes the cap itself,
     48.7px wide whatever size is declared (119.6px, from the face's cap
     height), three lines shortened at every width in both modes.
   OPTICAL SIZE — every visible serif element's font-size against the opsz
     it resolves: h1 40 at 36px, wordmark 30 at 30px, telephone 40 at 40px,
     body 16 at 20px, hero lead 24 at 24px. The only mismatch that is not a
     container holding correctly-set children is .mock-front .t, 31.9px at
     opsz 40, which mockup.js owns.
   PAPER — the tile decoded and composited on a canvas: mean alpha 1.994%,
     peak 7.45%. On the sink ground the mean sRGB value goes 221.33 -> 216.89
     -> 212.61 for none / one / two impressions.
   OVERFLOW — documentElement.scrollWidth against clientWidth at 320, 390,
     430, 834 and 1280, normal and Larger: equal in all ten, after the
     receipt repair in §4. Before it, with this sheet OFF: 398 against 320
     and 390 in Larger print, and at 320 normal the figure ended at x=319
     inside a card whose border is at x=300.
   RAG — text-wrap: pretty changed no line count on any list item, station,
     fence line, caption or receipt item at 390 or 1280; it changes where a
     line breaks, not how many there are.
   CONTRAST — the only text this sheet recolours is the cap: ink on canvas,
     14.14:1. The underline is accent on canvas 8.17:1 and on surface
     8.83:1; a read link's rule is ink-70 on canvas, 7.16:1. The hairlines
     are --rule at 1.39:1 on canvas, 1.5:1 on surface, 1.21:1 on sink —
     decorative, as press.css §1 requires of that token.
   ========================================================================== */


/* ==========================================================================
   9. THE PHOTOGRAPHS — a mount for the five slots, ready before the files
   ========================================================================== */

/* index.html carries five photograph slots, commented out until the owner
   takes the pictures (docs/PHOTOGRAPHS_TO_TAKE.md). Without a rule a figure
   would get the browser's own 40px indent and no mount, so the mount is
   written now and measured against the slots spliced in with stand-in
   images. The hero slot wears .jacket as well and keeps the jacket's own
   mount; this reaches the other four. Same hairline, same caption face as
   the cover credit, no shadow. */
figure.photo:not(.jacket) {
  margin: var(--s8) 0 0;
  max-width: var(--measure);
}
figure.photo:not(.jacket) img {
  display: block; width: 100%; height: auto;
  border: var(--rule-hair);
  background: none;
}
figure.photo:not(.jacket) figcaption {
  font-family: var(--sans);
  font-size: var(--t-fine);
  line-height: calc(6 * var(--lead));
  color: var(--ink-45);
  margin-top: var(--s2);
}


/* ==========================================================================
   10. THE BRAND — the mark, the blind stamp, and the sheet it came from
   --------------------------------------------------------------------------
   The mark is a RAFTER over a V over a BAR: the company's name drawn. It was
   cut from the owner's photograph of the registration sheet on 2026-09-02
   (tools/make-brand-icons.py) and it is drawn everywhere as a MASK rather than
   an image, so it takes a color token and can never sit at a tone the palette
   does not own. png rather than svg because it is a photograph of ink on paper
   and its edge is the brand's own, not a tracing of it.
   ========================================================================== */

/* THE DEVICE, hung off the wordmark rather than placed beside it.

   It was its own grid child at first, and on a wide screen the masthead's
   `1fr auto` auto-placement then took the first cell for the mark and pushed
   the company's name into the second — the name left the top left, which is
   where a letterhead's name belongs and where the owner asked for it back
   (2026-09-02). Drawn as the wordmark's own ::before it sits directly above
   the name, in the name's own cell, at every width, and nothing else in that
   grid moves.

   A MASK, not an image, so it takes the ink token and can never sit at a tone
   the palette does not own. png rather than svg because it is a photograph of
   ink on paper and the edge is the brand's own, not a tracing of it. */
.mark-slot { display: none; }
.wordmark::before {
  content: "";
  display: block;
  width: 2.6rem;
  aspect-ratio: 900 / 734;              /* the redrawn die's own proportion, 2026-09-05 */
  margin-bottom: var(--s2);
  background-color: var(--ink);
  -webkit-mask: url("../brand/mark.png") no-repeat center / contain;
  mask: url("../brand/mark.png") no-repeat center / contain;
}
@media (min-width: 52.5rem) {
  .wordmark::before { width: 3.1rem; }
}

/* THE BLIND STAMP. One luminance step down from the colophon's own ground —
   --rule on --sink — and nothing else: no ink, no shadow, no outline. Large,
   because an impression is large and quiet rather than small and loud, and set
   to the right so it sits under the fine print instead of interrupting it. */
.stamp {
  width: min(11rem, 38%);
  aspect-ratio: 900 / 734;
  margin: var(--s10) 0 0 auto;
  background-color: var(--rule);
  -webkit-mask: url("../brand/mark.png") no-repeat center / contain;
  mask: url("../brand/mark.png") no-repeat center / contain;
}

/* THE REGISTRATION SHEET, once, in About the company. Ink on the page's own
   ground, held to the text column, with the caption face the photograph slots
   use so the two agree when the photographs arrive. */
.brand-sheet {
  margin: var(--s8) 0 0;
  max-width: var(--measure);
}
.brand-sheet img {
  display: block;
  width: 100%;
  height: auto;
  /* The cut-out is ink on nothing, so it needs no border and no ground: it sits
     on the paper the way it sits on the sheet. */
}
.brand-sheet figcaption {
  font-family: var(--sans);
  font-size: var(--t-fine);
  line-height: calc(6 * var(--lead));
  color: var(--ink-45);
  margin-top: var(--s2);
}


/* ==========================================================================
   11. THE COMPOSITION PASS (2026-09-02)
   --------------------------------------------------------------------------
   THE VERDICT: "Thoroughly analyze and fix spacing, so much wasted space,
   much too much scrolling, this is unfortunately looking like a website built
   in 2010 — where are we going wrong."

   THE DIAGNOSIS, MEASURED BEFORE A LINE OF THIS WAS WRITTEN (Chromium 140,
   headless, deploy/ on :8142, each size in its own browser context, scrolled
   to the foot and back so every lazy image and every entrance had resolved):

       390x844   document 13,025px = 15.43 screens
      1280x900   document  9,697px = 10.77 screens

   and the sections, at 390: options 2955, yours 1572, path 1352, inside 1194,
   write 1105, house 1007, hero 841, begin 828, book 788.

   THE FAULT IS NOT PADDING. Section padding is 1,332px of 13,025 — ten per
   cent. Removing all of it would not have answered the verdict. The fault is
   that the page is TWELVE FULL-WIDTH BANDS OF EQUAL WEIGHT stacked down one
   ribbon, and that above 840px it refuses the horizontal axis: at 1280 the
   reading column was 584px inside a 1,280px window, so 55% of the sheet was
   blank paper and every pairing that a compositor would set side by side was
   set one under the other instead. That stack IS the 2010 pattern. It is not
   fixed by trimming; it is fixed by composing.

   FOUR THINGS ARE DONE HERE, IN THIS ORDER OF SIZE:

     A. The horizontal axis is used. Above 840, and again above 1280, each
        section is set the way its own matter pairs — the book's record beside
        its blurb, the plate beside its legend, the stations beside their date
        control, the two forms facing, the prose beside the diagram, the
        refusals in two columns. Above 1280 four sections that share a ground
        are set two to a row, so the page ends as a composed field rather than
        as four more bands.
     B. The rhythm develops instead of repeating. Every section was
        padding-block 64. Now the page opens generously and tightens as it
        moves from claim to detail, and where two sections share a ground the
        HAIRLINE does the separating that 128px of air was doing — which is
        press.css §3's own law ("a hairline separates two sections ONLY where
        the ground does not change"), applied to the four sections of §18 that
        were written after that law and never given it.
     C. The joints are set to a hierarchy. Paragraph space was 24 and heading
        space was 24, so a heading had no more authority than a paragraph
        break — that is the "nothing signals importance" half of the verdict.
        Paragraph space goes to 16 (four leads), heading space stays 24 (six).
     D. The three objects that were bigger than what they hold are fitted to
        it: the option cards (the price now stands beside the name the way a
        price list is set, not on a line of its own), the receipt (set at the
        fine size the register it replaced always used), and the mock-up's
        scene box (which reserved 22rem to draw a book 238px tall).

   WHAT IS NOT DONE: nothing is deleted, no type is below press.css's scale,
   no touch target is under 56px, no color is added and no shadow is drawn.
   Every figure below was measured, and the after-figures are in the
   verification block at the end of this section.
   ========================================================================== */


/* --------------------------------------------------------------------------
   11A. THE RHYTHM — a cadence that develops down the page
   --------------------------------------------------------------------------
   press.css §6 wrote a cadence for the eight-section page and the §14/§17/§18
   markup then arrived with twelve sections, all of them taking the bare
   `section { padding-block: var(--s16) }`. Measured at 390: eleven bands at
   64px top and bottom, with two exceptions, and the eye gets no signal from
   any of them.

   The ladder below is the same one press.css §6 reasoned in — ground and air,
   never ornament — and it develops:

     the OPENING   hero 24/32, book 48/32   the book keeps the most air on the
                   inside 32/32             page, because it is the flourish
     the WORKING   path, options 32/32      the matter a reader is studying
                   doesnt 32/32
     the CLOSING   yours, write, begin,     tight, and separated by a rule
                   house 32/24              rather than by a gap

   Phone total: 680px of section padding against 1,332px before. Nothing is
   crushed — the smallest gap between two bands is 56px, which is more than
   the 48px press.css §6 already gave .does and .doesnt.
   -------------------------------------------------------------------------- */

.hero    { padding-block: var(--s6)  var(--s8); }
.book    { padding-block: var(--s12) var(--s8); }
.inside  { padding-block: var(--s8)  var(--s8); }
.path    { padding-block: var(--s8)  var(--s8); }
.options { padding-block: var(--s8)  var(--s8); }
.doesnt  { padding-block: var(--s8)  var(--s8); }
.yours   { padding-block: var(--s8)  var(--s6); }
.write   { padding-block: var(--s8)  var(--s6); }
.begin   { padding-block: var(--s8)  var(--s6); }
.house   { padding-block: var(--s8)  var(--s6); }
.colophon {
  padding-block: var(--s8);
  padding-bottom: max(var(--s8), env(safe-area-inset-bottom));
}

/* THE RULE INSTEAD OF THE AIR. press.css §3 deduces where a hairline is
   allowed: "a hairline separates two sections ONLY where the ground does NOT
   change. Where the paper changes, the paper has already done the separating."
   .inside was given one on that reasoning. The four sections that arrived with
   §18 — yours, write, begin, house — are four consecutive bands on the SAME
   canvas ground with no rule between them, so 128px of padding each was the
   only thing telling a reader that one had ended. A hairline does that job in
   one pixel, which is the whole argument of §3, and it is why the closing
   sections above can be set at 32/24 without running together. */
.write, .begin, .house { border-top: var(--rule-hair); }


/* --------------------------------------------------------------------------
   11B. THE JOINTS — paragraph space under heading space
   --------------------------------------------------------------------------
   press.css sets `p { margin: 0 0 var(--s6) }` and `h1,h2,h3 { margin: 0 0
   var(--s6) }`: 24px in both cases. A heading therefore opened exactly as much
   air as a paragraph break, and on a page of twelve sections that is precisely
   the "nothing signals importance" the owner is describing. A compositor sets
   the space below a heading LARGER than the space between paragraphs, always.

   Four leads (16) between paragraphs, six (24) below a heading. 16px against a
   32px line is half a line of white — still an unmistakable break at arm's
   length, and it is what the book's own pages do. Counted at 390: about 26
   paragraph gaps on the page, so this alone is ~208px.
   -------------------------------------------------------------------------- */

p { margin-bottom: var(--s3); }


/* --------------------------------------------------------------------------
   11C. THE OPTION CARDS — the price beside the name, as a price list is set
   --------------------------------------------------------------------------
   Measured at 390: the three cards were 1,831px, a seventh of the whole page,
   and 132px of every card was its header — the option number, then the name,
   then the price alone on a line of its own at 40px with 24px of margin around
   it. No printed price list has ever been set that way: the figure goes at the
   right of the name, which is where the eye compares three of them.

   The card becomes a two-track grid. Nothing is removed: the number, the name,
   the price, the sentence and the list are all still there, in that order for
   a screen reader, because the grid moves boxes and not source. MEASURED, from
   the option number's top to the description's top: 144px before, 84px after —
   60px a card, and 144px off the option grid at 390 (1,429 -> 1,285) and 48px
   at 1280, where the three cards are equal-height and only the tallest counts.
   The three prices also line up horizontally across the three cards, and the
   three descriptions start level, neither of which they did.

   The vertical padding comes down one step (24/32 -> 16/24). The horizontal
   padding is LEFT at 24 on the sheet: the card carries the double rule of §4
   at inset 3px and the text needs to clear it. The list rows go from 8/8 to
   4/4, which keeps the rule-to-rule pitch on the 4px lead (4+28+4 = 36)
   exactly as press.css §11 requires, and the mark track narrows from 24+12 to
   16+8 (12+4 below 840, §11J), which gives every line back the measure the
   dash was taking.
   -------------------------------------------------------------------------- */

.option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--s4);
  align-content: start;
  padding: var(--s4) var(--s6) var(--s6);
}
/* The number and the figure on one line, the name on its own beneath it, full
   width. The first cut had the price spanning both rows beside the name, and
   the screenshot is why it did not stay: the price column is as wide as
   "$3,500" (152px at 40px), so on the widest card the name was squeezed into
   180px and set as three stacked lines — "A book / with / more in it" —
   against a huge figure, and the three cards' descriptions then started at
   three different heights. With the figure on the number's line the header
   block is the same height on all three, the descriptions line up across the
   row, and the name gets the whole card. It is also how a printed price list
   is actually set: the item's reference and its figure on one rule, the
   description under. */
.option > .opt-no { grid-column: 1; grid-row: 1; align-self: center; }
.option > h3      { grid-column: 1 / -1; grid-row: 2; }
.option > .price {
  grid-column: 2; grid-row: 1;
  align-self: center; text-align: right; margin: 0;
}
.option > .opt-say     { grid-column: 1 / -1; margin-top: var(--s4); }
.option > .plain-list  { grid-column: 1 / -1; }

.option .plain-list li {
  padding-block: var(--s1);
  grid-template-columns: var(--s4) minmax(0, 1fr);
  column-gap: var(--s2);
}


/* --------------------------------------------------------------------------
   11D. THE RECEIPT — set at the size the register it replaced always used
   --------------------------------------------------------------------------
   728px at 390, of which 416 was five rows that each took TWO lines: the item
   at 20px plus its figure does not fit a 300px card at that size, so finish.css
   §4 had to break every row in half below 30rem to stop it leaving the card.

   press.css §17 set exactly this content — the same add-ons, the same figures
   — as `.extras`, and it set the item in `--t-fine`. The §18 receipt dropped
   to the body size and inherited the overflow with it. Back to --t-fine, which
   is 16px, this build's hard floor, and the size the receipt's own terms and
   the site's every caption already use.

   MEASURED at 390, the five rows: 416px at the body size, 280px at --t-fine,
   257px at --t-fine with §4's stacking re-scoped off — 159px in all. Four of
   the five still take two lines, and honestly so: "Reading the whole book a
   second time" and its figure need 443px and the card has 326. What the size
   buys is that a two-line row is 56px instead of 72 or 100, and that the
   figures sit beside their items instead of under them.
   -------------------------------------------------------------------------- */

.receipt { padding: var(--s4) var(--s6) var(--s6); margin-top: var(--s8); }
.receipt-head { margin-bottom: var(--s3); }
.receipt-lines > div {
  padding-block: var(--s1);
  font-size: var(--t-fine);
  line-height: calc(6 * var(--lead));
}
.receipt-terms { margin-top: var(--s4); padding-top: var(--s3); }


/* --------------------------------------------------------------------------
   11E. THE MOCK-UP — the scene box fitted to the object in it
   --------------------------------------------------------------------------
   1,572px at 390 to show one drawn book. `.mock-scene` reserved min-height
   22rem (352px) plus 32px of padding top and bottom whatever it held, and
   mockup.js sizes the book from the scene's WIDTH — so at 1280, inside the
   584px reading column, it drew a 154x238 book inside a 416px box. The box was
   the thing that was too big, not the book.

   min-height goes to 0 and the padding to one step: the box is now the height
   of what is in it. On a phone the scene is capped at 17rem so the drawn book
   is 212x327 rather than 290x446 — a preview beside its form, not a second
   hero. mockup.js reads clientWidth in fit(), which runs at build and on every
   resize, so the cap is respected without touching that file.
   -------------------------------------------------------------------------- */

.mock { gap: var(--s6); margin-top: var(--s6); }
.mock-form label { margin-bottom: var(--s3); }
.mock-scene { min-height: 0; padding: var(--s4) 0; }
/* A SELECT MAY NOT CLIP ITS OWN LABEL. "Cream — usual for novels" needs 324px
   at the body size and 406px in Larger print; the control was 256px at 1280 and
   clipped at 390 in Larger print too, which was there before this pass. The
   field is allowed to run the full width of its cell and the text is allowed to
   set the floor, so the option always reads. */
.mock-form select,
.mock-form input[type="text"],
.mock-form input[type="number"] { width: 100%; min-width: 0; }
.mock-form select { text-overflow: ellipsis; }
/* The last eight pixels. At 390 in Larger print the longest option needs 294px
   of text and the control offers 286 — the shortfall is the control's own
   inline padding, not the type, so the padding gives way rather than the word.
   A select cannot be relied on to ellipsize its own button text, so this is the
   only honest way to make it read. */
html.large .mock-form select { padding-inline: var(--s2); }
@media (max-width: 52.4375rem) {
  /* The scene takes the whole column, not 17rem of it centerd. Capped and
     centerd it sat 71px in from the form above it and 142px narrower, so the
     drawn book read as a stray picture rather than as the thing the form makes
     — measured 2026-09-03: form 350 wide at x=20, scene 208 wide at x=91. */
}


/* --------------------------------------------------------------------------
   11F. THE LETTER, THE PATH, THE PLATE — the joints inside the three
        sections whose height is chrome rather than words
   -------------------------------------------------------------------------- */

/* The letter: 536px at 390, of which 144 was a textarea nobody had asked for
   at that size (press.css: min-height 9rem) and 80 was the gap and the rule
   between the two forms. Seven lines of message is still seven lines at the
   20px reading size; the separation between the two forms is a rule doing the
   work, so it does not also need 48+32 of air. The answer line reserves 6
   leads rather than 8 — it holds one short sentence and there are two of them
   on the page, both empty until the reader has pressed something. */
.letter label { margin-bottom: var(--s3); }
.letter textarea { min-height: 7rem; }
.list { margin-top: var(--s8); padding-top: var(--s6); }
.form-say { min-height: calc(6 * var(--lead)); }

/* The path: the station rows carry a 56px touch floor, so the padding is only
   paying for the rows that have wrapped to two lines — every one of them at
   390, where the label and its date stack. One step off each takes 56px from
   the list without moving a single target below the floor (verified: every
   .station-btn still measures >= 56). */
.station-btn { padding-block: var(--s2); }
.stations { margin-top: var(--s6); }
.post-date { margin-top: var(--s4); }
.note { margin-top: var(--s8); padding-top: var(--s3); }

/* The plate: book.js sets its caption 1.1rem clear of the stage and its two
   control rows 12px apart. The caption is a legend under a plate, not a new
   movement. Doubled selectors are NOT enough here — book.js adopts its sheet
   through adoptedStyleSheets, which cascade AFTER every document stylesheet,
   so these need one more class than its own single-class selectors to win. */
.inside .bk-caption  { margin-top: var(--s2); }
.inside .bk-controls { margin-top: var(--s3); }
.inside .bk-open-row { margin-top: var(--s2); }
.inside .b5r-magrow  { margin-top: var(--s2); }
.inside .sample-link { margin-top: var(--s2); }

/* The colophon's blind stamp asked for var(--s10), and there is no --s10 in
   press.css §1 — the ladder is 1,2,3,4,6,8,12,16,24,32. An unknown custom
   property makes the whole shorthand invalid at computed-value time, so the
   stamp has been sitting at margin 0 since it was written, and the figure in
   this file has never once been applied. Stated in a token that exists, and
   the mark comes down one step: 8rem of blind stamp is still large for an
   impression, and it was taking 109px of a 390px phone. */
.stamp { width: min(8rem, 32%); margin: var(--s6) 0 0 auto; }


/* --------------------------------------------------------------------------
   11G. >= 840px — the rhythm steps up, and the plate gets one control bar
   --------------------------------------------------------------------------
   press.css §14's title is "840px IS A DIFFERENT MACHINE", and the rhythm has
   to say so: every figure in §11A goes up one rung, so the page is airier on a
   sheet than on a phone rather than being the same page stretched.
   -------------------------------------------------------------------------- */

@media (min-width: 52.5rem) {

  .hero    { padding-block: var(--s16) var(--s12); }
  .book    { padding-block: var(--s12) var(--s12); }
  .inside  { padding-block: var(--s12) var(--s12); }
  .path    { padding-block: var(--s12) var(--s12); }
  .options { padding-block: var(--s12) var(--s12); }
  .doesnt  { padding-block: var(--s12) var(--s8); }
  .yours   { padding-block: var(--s8) var(--s8); }
  .write   { padding-block: var(--s8) var(--s8); }
  .begin   { padding-block: var(--s8) var(--s8); }
  .house   { padding-block: var(--s8) var(--s8); }
  .colophon { padding-block: var(--s12); }

  /* THE PLATE'S CONTROLS: one bar, not three stacked.
     Measured at 1280: Back/Next, "Open the book" and the magnifier were three
     separate 56px rows, 208px of chrome under a plate on a sheet 1,280px wide
     with 220px of blank paper either side of the stage. They are one control
     bar now — the same three groups, side by side, centerd under the plate —
     and every button keeps its own 56px minimum, untouched.

     FLEX AND NOT GRID, and the first cut is the reason: three `auto` grid
     tracks cannot shrink below their content and cannot wrap, so the moment
     the three groups outran the mount — Larger print at 1280, where the
     magnifier's label needs 160px and the wide "Open the book" key needs 300 —
     the row overflowed the track and the PAGE scrolled sideways (measured:
     scrollWidth 1448 against a 1280 client). Wrapping, they fall to a second
     line instead, which is what a control bar should do and what no width may
     ever do.

     Guarded on .bk, which book.js writes on the mount only once it has built
     the object. With script off the mount still holds the nine-page fallback
     list and must stay a plain block. */
  .book-object.bk {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    column-gap: var(--s6);
  }
  /* THE STAGE KEEPS ITS OWN WIDTH. `flex: 0 0 100%` sets flex-basis, and
     flex-basis beats `width` on a flex item — so .bk-stage's own
     `width: var(--bk-stage-w)` was being thrown away and the stage stretched to
     the whole mount. The book inside it is absolutely positioned at
     `left: var(--bk-spine-x)` from the stage's LEFT edge, while its contact
     shadow is at `left: 50%` of the stage, so the book walked out from under
     its own shadow: measured 72px adrift at 1024x768 with the scene off, 107px
     with it on, and the left page cut off at x=0. The caption and the live
     region do want the full row; the stage wants to be the size it computed. */
  .book-object.bk > .bk-stage { flex: 0 0 auto; }
  .book-object.bk > .bk-caption,
  .book-object.bk > .bk-live { flex: 0 0 100%; }
  .inside .bk-controls { flex: 0 1 auto; margin: var(--s4) 0 0; }
  .inside .bk-open-row { flex: 0 1 auto; margin: var(--s4) 0 0; }
  .inside .b5r-magrow  { flex: 0 1 auto; margin: var(--s4) 0 0; }
}


/* --------------------------------------------------------------------------
   11H. >= 1024px — the two pairings the reading column is finally wide
        enough to hold
   --------------------------------------------------------------------------
   At 1024 the reading column is 648px. That is wide enough for two forms to
   face each other at 300px apiece, and for the book's record to stand beside
   its own description — and not wide enough for anything else, which is why
   the rest of the composition waits for 1280.
   -------------------------------------------------------------------------- */

@media (min-width: 64rem) {

  /* THE BOOK'S RECORD BESIDE ITS DESCRIPTION. Five blocks in one 592px column
     with 400px of blank paper beside them, measured at 1280: eyebrow, title,
     byline, then two paragraphs. The first three are the record — they are the
     book's title page — and the two paragraphs are what the book is about.
     They are two different things and they are set as two.
     .book is one of the three sections press.css §14 licenses to break the
     slug grid ("the object is wider than the slug. It is the flourish"), so
     its title block sits on the MARGIN line, where it always has. */
  .book > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure));
    column-gap: var(--s12);
    align-items: start;
  }
  /* The eyebrow crosses both columns rather than sitting in the first: grid
     rows are shared, so an eyebrow alone in row 1 was 24px in a row the
     opposite paragraph made 96 tall, and the book's title then hung 72px below
     its own label. Spanning it puts the label over the whole record, which is
     what a label over a section is, and the title follows it immediately. */
  .book > .wrap > .eyebrow { grid-column: 1 / -1; grid-row: 1; }
  .book > .wrap > h2       { grid-column: 1; grid-row: 2; max-width: none; }
  .book > .wrap > .byline  { grid-column: 1; grid-row: 3; }
  .book > .wrap > p:not(.eyebrow):not(.byline) { grid-column: 2; }

  /* THE TWO LETTERS, FACING. They were stacked with 48px of margin and 32px of
     padding and a hairline between them — 909px of a 1,280px sheet to hold two
     forms that between them are 24 characters wide. The rule that separated
     them turns on its side and becomes the rule BETWEEN them, which is the
     same rule doing the same job in the axis that was going spare. */
  .write > .wrap {
    grid-template-columns: var(--slug) minmax(0, 1fr) minmax(0, 1fr);
  }
  .write > .wrap > h2 { grid-column: 1; grid-row: 1; }
  .write > .wrap > .letter:not(.list) { grid-column: 2; grid-row: 1; }
  .write > .wrap > .list {
    grid-column: 3; grid-row: 1;
    margin-top: var(--s8); padding-top: 0; border-top: 0;
    padding-left: var(--s8); border-left: var(--rule-hair);
  }
}


/* --------------------------------------------------------------------------
   11I. >= 1280px — THE WIDE SHEET
   --------------------------------------------------------------------------
   This is where the verdict was earned and this is where it is answered.
   Measured before: the widest inked thing on a 1,280px window was 838px, the
   reading column was 584px, and the page was ten and three-quarter screens of
   full-width bands. Four things change, and only at this width:

     1. THE SHEET GETS ITS REAL MEASURE. --wrap goes from 62rem to 76rem, so
        the content band is 1,120px instead of 896. NOTHING GETS A LONGER LINE
        FOR IT: press.css caps every <p> at --measure (37rem / 67 characters)
        and every list at the same, so the extra 224px cannot become an
        88-character line. It becomes a second column, which is the point.
        The margin slug comes in one step to 14rem to pay for the third track;
        the TEXT line therefore stands at 272px from the band's edge in every
        section on the page, which is press.css §14's "exactly two left edges"
        held exactly.

     2. FOUR SECTIONS ARE COMPOSED ACROSS THE AXIS: the plate gets its legend
        beside it, the stations get their date control and their Back/Next
        beside them, the fence goes into two columns, and the receipt sets its
        terms beside its figures.

     3. THE PAGE ENDS AS A FIELD, NOT AS FOUR MORE BANDS. yours/write and
        begin/house are two sections to a row. They are the four consecutive
        sections that share the canvas ground and that a reader DOES rather
        than reads: the mock-up and the letter on one line, the two doors and
        the house on the next. Nothing is reordered — grid places boxes, and
        the source order a screen reader follows is untouched.

     4. main becomes the field that makes 3 possible. Its five tracks are
        [margin | column | gap | column | margin], and the two column tracks
        are cut so that a paired section's text begins at exactly the same x as
        a full-width band's: (76rem - 2 gutters - the gap) / 2 = 536px, with
        the margins taking 80px each at 1280. Measured to the pixel; if the
        arithmetic is ever changed, check that number first.
   -------------------------------------------------------------------------- */

/* THE FIELD ARRIVES AT 1088, NOT AT 1280. It was written at 80rem and measured
   there, and the cliff that left was brutal: a 1200px window got 7,967px of
   document (8.85 screens) and a 1280px window got 6,131px (6.81), so 1,836px
   of page turned on a single pixel boundary — and 1024 to 1200 is where a great
   many laptop windows actually sit. At 68rem the band is still the ordinary
   62rem, so each paired column is (992 - 40 - 48) / 2 = 452px: narrower than
   the 536px of the wide sheet, wide enough for the pairs to hold. The wider
   band and the deeper slug still wait for 80rem, below. */
@media (min-width: 68rem) {

  :root {
    --pair-gap: 3rem;     /* 48 — the gutter between two paired sections     */
  }

  /* ---- 4. the field ---------------------------------------------------- */
  main {
    display: grid;
    grid-template-columns:
      minmax(var(--gutter), 1fr)
      minmax(0, calc((var(--wrap) - 2 * var(--gutter) - var(--pair-gap)) / 2))
      var(--pair-gap)
      minmax(0, calc((var(--wrap) - 2 * var(--gutter) - var(--pair-gap)) / 2))
      minmax(var(--gutter), 1fr);
    align-items: start;
  }
  main > * { grid-column: 1 / -1; }
  /* press.css §14 holds the reading bar's space with a pseudo-element before
     forauthors.js arrives. As a grid item it would take one cell and the bar
     would land 536px wide. */
  html.js main::before { grid-column: 1 / -1; }

  /* ---- 3. two sections to a row ---------------------------------------- */
  .yours { grid-column: 2; }
  .write { grid-column: 4; }
  .begin { grid-column: 2; }
  .house { grid-column: 4; }

  /* A paired section's own .wrap must not center or pad: the field's tracks
     are already the page margins, and a second set would put the left column's
     text 48px inside the line every other section stands on. */
  .yours > .wrap, .write > .wrap,
  .begin > .wrap, .house > .wrap {
    max-width: none;
    padding-inline: 0;
  }

  /* The rule that separates two bands on the same ground (§11A) now also has
     to separate two COLUMNS on the same ground, so the top rule goes on both
     halves of each row and the pair reads as one line across the sheet. */
  .yours, .write, .begin, .house { border-top: var(--rule-hair); }

  /* The mock-up loses its slug (536px cannot carry a 224px margin column and
     still hold a reading measure) and sets its form and its scene facing. */
  .yours > .wrap { display: block; }
  /* THE FORM GETS THE LARGER HALF, and this is not taste. An even split gave
     the controls 256px at 1280 and above — NARROWER than the 352px they have at
     1024, because the paired track is half the sheet — and the Paper select then
     clipped its own selected option by 114px ("Cream — usual for nov") and by
     192px in Larger print. Controls that shrink as the screen grows is the one
     place on this page the density read as cramped rather than composed.
     1.25fr against 1fr returns the form to ~330px while the drawn book keeps
     enough of the column to be a book. The floor below is the guarantee. */
  /* The form only faces the drawn book once there is room for both. Between
     1088 and 1280 the paired column is 452px, and split two ways the select is
     231px against the 324px its own longest option needs — so below the wide
     sheet the form keeps the whole column and the book sits under it, which is
     what the phone already does and what fits. */
  /* THE FORM IS NOT SPLIT AGAIN. .yours is already half the sheet — 536px — and
     dividing that between a form and a drawn book left the Paper select 284px,
     which LOOKS like it fits by arithmetic and clips in the rendering, because a
     native select reserves more for its own arrow than a text measurement
     accounts for. Photographed at 1280 reading "Cream — usual for nov…".
     The form keeps the column and the book sits under it, which is what the
     phone does; the book is also bigger for it. Height is the cheaper thing to
     spend here than a truncated word in a control. */
  .mock { grid-template-columns: minmax(0, 1fr); }
  /* THE PLATE SITS UNDER ITS FORM AND IS THE WIDTH OF IT. Capped at 19rem it
     was 304px under a 536px form, left-aligned, with the drawn book 216px and
     stranded — three blocks with no relationship, which is what the owner saw
     as "the spacing is all messed up". The scene is the column's width now and
     the book centers in it, so the form and the object it describes read as one
     thing. The height this costs is bought back below by the rhythm. */
  .mock-scene { max-width: none; margin-inline: 0; }

  /* The letter and the list, same reason, in the narrower pair. */
  .write > .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--s8);
  }
  .write > .wrap > h2 { grid-column: 1 / -1; grid-row: 1; max-width: none; }
  .write > .wrap > .letter:not(.list) { grid-column: 1; grid-row: 2; }
  .write > .wrap > .list { grid-column: 2; grid-row: 2; }

  /* The two doors stack inside their half of the row. They must: the display
     telephone measures 245.7px at 40px in Source Serif (press.css §15's own
     figure) and a 1fr 1fr inside a 536px column gives each door 244. */
  .begin .ways { grid-template-columns: 1fr; gap: var(--s8); }

  /* The house is the one closing section that is NOT re-composed inside its
     half of the row: its registration diagram is 1400x379, and beside a 592px
     column of prose it would print 65px tall. It keeps the diagram under the
     paragraphs, at the width of its column. (No rule is needed to say so —
     .house > .wrap is not a grid in press.css and never becomes one here. The
     rule that stood at this line said `display: block` on a block, which is
     the dead-CSS fault press.css §9 records; it is a note now, not a rule.) */

  /* ---- 2a. the plate and its legend ------------------------------------ */
  /* The book object was a full-bleed 1,280px block with a 838px stage in the
     middle of it and 221px of blank paper either side, and the section's own
     heading, lead and sample-page link stacked ABOVE it in a 584px column.
     They are the plate's legend and they now stand in the margin beside it —
     which is what press.css §14 already does with the cover ("the object IS
     that section's running head"), read the other way round.
     The mount track is 44rem = 704px, deliberately above book.js's
     SPREAD_MIN_BOX of 620, so the book stays a two-page spread. */
  .inside {
    display: grid;
    grid-template-columns:
      minmax(var(--gutter), 1fr)
      minmax(0, calc((min(var(--wrap), 100%) - 2 * var(--gutter)) * 0.38))
      var(--s12)
      minmax(0, calc((min(var(--wrap), 100%) - 2 * var(--gutter)) * 0.62 - var(--s12)))
      minmax(var(--gutter), 1fr);
    align-items: start;
  }
  .inside > .wrap {
    display: block;
    grid-column: 2;
    max-width: none;
    padding-inline: 0;
  }
  .inside > .wrap > h2 { margin-bottom: var(--s6); }
  .inside > .book-object { grid-column: 4; }

  /* ---- 2b. the stations and their date control ------------------------- */
  /* 671px of stations in a 584px column, with the date they would be posted
     on, the Back/Next and the eight-week note stacked under them — four things
     one after another where two of them are the instrument for the list beside
     it. The list keeps the measure; the instrument takes the third track. */
  /* THE THIRD TRACK NEEDS THE WIDE BAND, and only the wide band. Between 1088
     and 1280 the slug is still 0 and the band is still 62rem, so the measure
     track eats the row and the instrument column collapses — measured at a
     1100 viewport, the date field ran to x=1215 against a 1100 clientWidth.
     Below 80rem the stations and their instrument stay stacked, which is what
     they did before the field was lowered and it fits. */
  @media (min-width: 80rem) {
    .path > .wrap {
      grid-template-columns: var(--slug) minmax(0, var(--measure)) minmax(14rem, 1fr);
    }
    .path > .wrap > h2         { grid-column: 1; grid-row: 1; }
    .path > .wrap > .lead      { grid-column: 2; grid-row: 1; }
    .path > .wrap > .stations  { grid-column: 2; grid-row: 2 / span 3; }
    .path > .wrap > .post-date { grid-column: 3; grid-row: 2; margin-top: 0; }
    .path > .wrap > .station-nav { grid-column: 3; grid-row: 3; flex-wrap: wrap; }
    .path > .wrap > .note      { grid-column: 3; grid-row: 4; align-self: start; }
    /* The date field may not set the track's floor by its own intrinsic width. */
    .path > .wrap > .post-date input { max-width: 100%; }
  }

  /* ---- 2c. the fence, in two columns ----------------------------------- */
  /* Five short refusals down one 584px column. They pair, they are all one
     line, and the register's own top rule still crosses both columns. */
  .doesnt .nots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s12);
    align-content: start;
    max-width: none;
  }

  /* ---- 2d. the receipt sets its terms beside its figures ---------------- */
  .receipt {
    max-width: 52rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    column-gap: var(--s8);
    align-items: start;
  }
  .receipt-head  { grid-column: 1 / -1; }
  .receipt-lines { grid-column: 1; }
  .receipt-terms {
    grid-column: 2;
    margin: 0; padding: 0 0 0 var(--s6);
    border-top: 0; border-left: var(--rule-hair);
  }

  /* ---- 1. what the wider band does to the three sections that fill it --- */
  /* The option cards go from 277px to 355px wide, which takes a line off every
     sentence in them and two off the longest list item. With the price now
     standing beside the name (§11C) all three names fit one line at this
     width, so press.css §18's 16-lead minimum on the h3 — which existed to
     line the three prices up when they were stacked under the names — comes
     down to 8 and stops padding every card with 32px of nothing. */
  .option h3 { min-height: calc(8 * var(--lead)); }

  /* The hero keeps its 20rem plate and lets the sentence take a little more
     measure rather than leaving the difference as a hole: 34rem is 544px,
     which at the lead paragraph's 24px is 55 characters — inside what a lead
     is set at, and the h1 comes onto one line. */
  .hero-say { max-width: 34rem; }

  /* THE ONE PLACE LARGER PRINT CANNOT HAVE THE THIRD TRACK.
     Media queries resolve rem against the INITIAL font size, never the root's
     (press.css §14 relies on the same fact), so this block runs at 1280 in
     both print modes — but --measure and --slug are rem and DO grow 25%. The
     arithmetic at 1280 with Larger print on: band 1,280 less 2x60 gutters is
     1,160, less a 280px slug and two 60px gaps leaves 760, and the measure
     alone wants 740. The date control was therefore being laid out in a 20px
     track: measured, its <input> ran from x=1200 to x=1448 and the page
     scrolled sideways by 168px.

     Larger print gets the two-track sheet back, with the instrument under the
     list where it was. It is the same trade press.css §15 makes for the
     display numeral: the reader's preference sets the type, and the glass —
     which does not grow with it — decides what will fit beside it. */
  html.large .path > .wrap {
    grid-template-columns: var(--slug) minmax(0, 1fr);
  }
  html.large .path > .wrap > .stations    { grid-column: 2; grid-row: 2; }
  html.large .path > .wrap > .post-date   { grid-column: 2; grid-row: 3; margin-top: var(--s4); }
  html.large .path > .wrap > .station-nav { grid-column: 2; grid-row: 4; }
  html.large .path > .wrap > .note        { grid-column: 2; grid-row: 5; }
}


/* THE WIDE SHEET proper: past 1280 the band opens to 76rem and the margin slug
   steps in to 14rem to buy the third track. Below this the field is the same
   composition at the ordinary 62rem band. */
@media (min-width: 80rem) {
  :root {
    --wrap: 76rem;        /* 1216 — the band, not the line                   */
    --slug: 14rem;        /* 224 — one step in, to buy the third track       */
    --slug-gap: 3rem;     /* 48                                              */
  }
}

/* --------------------------------------------------------------------------
   11J. THE SECOND PASS — what the first round of measurement found
   --------------------------------------------------------------------------
   Everything below was written after the page had been re-measured with §11A-I
   in it, and each rule closes a gap that showed up in the numbers rather than
   in an intention.
   -------------------------------------------------------------------------- */

/* THE HEADINGS WERE REFUSING THE WIDTH THEY HAD. press.css caps h2 at 16ch
   (18ch above 840) so a display line balances instead of running the measure.
   On a 390px phone 16ch of 30px type is 246px inside a 350px column, so every
   section heading was wrapping 104px early: the book's title took four lines
   where it fits three, and "About the company" took two where it fits one.
   That is the verdict's own complaint — unused width — in the one place it
   costs a line every time.

   `text-wrap: balance` is what press.css actually wants here and it is already
   on every heading; balance does the evening-out, and the cap is only a
   backstop for a sheet far wider than a phone. Released below 840 only; the
   slug headings and the wide sheet keep press.css's caps exactly. */
@media (max-width: 52.4375rem) {
  h2 { max-width: none; }
}

/* THE OPTION CARDS' SIDE PADDING. 24px each side inside a 350px card leaves
   278px of measure once the list's mark track is paid for, which is about 30
   characters — so almost every list item took two lines and several took
   three. 16px is still four clear pixels outside the double rule of §4 (the
   inner hairline sits at inset 3), and it buys 16px of measure on every line
   in the card. Only below 840, where the card is the width of the phone; on
   the sheet the cards are 355px wide and the air is worth more than the
   character. */
@media (max-width: 52.4375rem) {
  .option { padding: var(--s4) var(--s4) var(--s6); }
  .option .plain-list li {
    grid-template-columns: var(--s3) minmax(0, 1fr);
    column-gap: var(--s1);
  }
}

/* THE MOCK-UP'S SCENE, once more. 17rem still drew a 212x327 book above a
   504px form on a 390px phone — a second hero for a thing that is a preview.
   13rem puts mockup.js at its own floor scale (28px to the inch, the figure
   its fit() calls "on a phone"), which draws 154x238: a small book beside the
   questions that make it, which is what the section is for. */
/* THE PHONE CAP IS GONE. 13rem drew a 154x238 book at mockup.js's floor scale,
   208px wide and indented under a 350px form, which is what the owner saw as
   "the spacing is all messed up": a stray picture rather than the object the
   form describes. The plate is the column's width on a phone too, and the book
   centers in it — mockup.js sizes from the scene's width and caps its own
   scale, so the book grows to something worth looking at and no further. */
.mock-form label { margin-bottom: var(--s2); }

/* THE BLIND STAMP BESIDE THE FINE PRINT, not under it. Below 840 the colophon
   is a single column and the stamp was taking 92px of height plus its margin
   at the foot of a phone page — for an impression that is meant to be found
   rather than read. Beside the three lines it costs nothing, and an impression
   in the outer margin of a colophon is where a binder actually puts one.
   Above 840 press.css's own two-column colophon already holds it. */
@media (max-width: 52.4375rem) {
  .colophon > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
  .colophon > .wrap > * { grid-column: 1; }
  .colophon .stamp {
    grid-column: 2; grid-row: 1 / span 3;
    align-self: end;
    width: 5.5rem; margin: 0 0 0 var(--s6);
  }
}

/* THE DATE UNDER EACH STATION, moved beside it where there is room. §19 puts
   the date the reader would reach that step on its own line under the label —
   24px a station, 168px down the list. On the sheet the station line is 592px
   wide and the label uses 300 of it, so the date goes to the right of the row,
   set right, which is where a schedule prints its dates. Not on a phone: at
   350px the third track would take the label from two lines to three and cost
   more than it saves (measured both ways). */
@media (min-width: 64rem) {
  .station-btn { grid-template-columns: 2.3rem minmax(0, 1fr) auto; }
  .station-date { grid-column: 3; text-align: right; }
}

/* Small joints found in the same pass. */
.ways { gap: var(--s8); }
.brand-sheet { margin-top: var(--s6); }
.option > .opt-say { margin-top: var(--s3); }

/* THE THREE OPTIONS ARE A CARD WHEN THEY STAND BESIDE EACH OTHER AND A ROW
   WHEN THEY STAND UNDER EACH OTHER.
   A box exists to hold a thing apart from what is beside it. Below 840 there
   is nothing beside them: the three cards stack, each one 350px wide inside a
   350px column, and the box is then costing 48px of gap and 32px of side
   padding to separate a card from nothing but white paper — and the 32px comes
   straight out of the measure, which is why almost every line in them wrapped.
   Measured at 390: the option grid was 1,599px.

   Below 840 they are one register on the section's own raised ground, ruled
   the way every other register on this page is ruled (press.css §11: rows on
   the same stock, hairline between). The number, the name, the price, the
   sentence and the list are all still there, in the same order, at the same
   sizes. The double rule of §4 goes with the box, because it IS the box; the
   receipt keeps it, and so do the cards on the sheet, where three panels side
   by side are exactly what a panel is for. */
@media (max-width: 52.4375rem) {
  .option-grid { gap: 0; margin-top: var(--s6); border-top: var(--rule-hair); }
  .option {
    background: none;
    border: 0;
    border-bottom: var(--rule-hair);
    padding: var(--s4) 0 var(--s6);
  }
  .option::before { content: none; }
  /* The receipt stays a card and keeps its perforated foot; only its side
     padding comes in, for the same measure. */
  .receipt { padding: var(--s4) var(--s4) var(--s6); }
  /* The hero's two blocks are one argument, not two: 16px between the
     telephone and the book it is about. */
  .hero-in { gap: var(--s4); }
  .mock { margin-top: var(--s4); }
}

@media (min-width: 52.5rem) {
  /* The blind stamp is placed by the colophon's own two-column grid here, and
     its 24px is a gap the grid has already given it. */
  .stamp { margin-top: 0; }
}

@media (min-width: 80rem) {
  /* The registration diagram is 1400x379. At the full 536px of its half of the
     closing row it prints 145px tall, which is more sheet than a once-used
     diagram earns beside three paragraphs; 26rem prints it 113 and it is still
     the widest single image on the page after the book. */
  .house .brand-sheet img { max-width: 26rem; }
}

/* --------------------------------------------------------------------------
   11K. THE THIRD PASS — the last of it, all of it measured
   -------------------------------------------------------------------------- */

/* WHAT WAS TRIED HERE AND TAKEN OUT, so it is not tried again: the receipt's
   side padding was cut to 12 and the dotted leader's margin to .15em, on the
   theory that a few pixels of measure would pull the two-line rows onto one
   line. Measured after: the rows were 257px before the change and 257px after
   it. They need 372 to 443px and the card has 326 — the shortfall is 46 to
   117px, not three — so the rule was a fix that had never once applied, which
   is the same class of thing as the dead .page-controls block press.css §9
   records. Removed rather than left standing to be believed. */

/* THE STATION LABELS. press.css sets the station line at the reading leading,
   8 leads, because it was written when a station was one line of prose. It is
   a two-line UI label with a date under it on a phone, and a label sets
   tighter than running text: 7 leads is 28px, still on the grid, and it takes
   8px off each of the four stations whose label wraps. The 56px touch floor is
   min-height and is untouched — re-measured after: every .station-btn >= 56. */
@media (max-width: 52.4375rem) {
  .station-btn { line-height: calc(7 * var(--lead)); }
}

/* THE COVER ON A PHONE. press.css caps it at min(16rem, 66vw) — 257px at 390,
   377px tall — and says why: 66vw is 16rem expressed as a share of the 390px
   screen the file measures against. The share is the part worth keeping and
   the figure is not: the jacket is the LAST thing in the hero on a phone
   (press.css reorders it below the sentence), so its height is pure distance
   between the telephone and the next section. 56vw draws it 218 x 322 — still
   the largest object on the first two screens, and its top edge measured at
   y=713 on a 390x844 phone, so the book is still on the first screen under the
   sentence that explains it, which is the whole of press.css §14's argument
   for putting the sentence first. */
@media (max-width: 52.4375rem) {
  .jacket .cover { max-width: min(20rem, 56vw); }
}

/* The letter's message box. rows="5" sets 180px of empty box before a word is
   typed; 9rem is four lines, and the box is resize: vertical, so a reader who
   wants more has it. */
.letter textarea { height: 9rem; }

/* The closing four sections carry a hairline each (§11A), so the paper between
   them can come to the same 24 the joints inside them use. */
@media (max-width: 52.4375rem) {
  .yours, .write, .begin, .house { padding-block: var(--s6); }
}

/* THE ONE TOUCH TARGET ON THE PAGE THAT WAS UNDER THE FLOOR, found by this
   pass's sweep and not caused by it: press.css §19 gives the date control's
   <input> min-height: 44px, and every other pressable thing on this site is 56
   (press.css's own reader note: "anything that must be pressed is 56px"). It
   is a control an author taps to see when their book would be finished, and it
   was 44 in normal print and 51 in Larger print. Raised here rather than in
   press.css, which is not this pass's file; it costs 12px of page and it is
   not negotiable against a number. */
.post-date input { min-height: 56px; }


/* ==========================================================================
   §11 VERIFICATION — Chromium 152, headless, 2026-09-02, against deploy/ on
   :8142. Every size in its own browser context, cache disabled, localStorage
   seeded or cleared before any page script ran, scrolled to the foot and back
   before measuring so every lazy image and every entrance had resolved.
   --------------------------------------------------------------------------
   DOCUMENT HEIGHT AND SCREENS, before -> after

     320x568   14,075 -> 11,809   24.78 -> 20.79 screens
     390x844   13,025 -> 10,723   15.43 -> 12.70
     430x932   12,743 -> 10,390   13.67 -> 11.15
     834x1112  11,839 ->  9,777   10.65 ->  8.79
    1280x900    9,697 ->  6,131   10.77 ->  6.81      <- the 1280 target, met

   In Larger print (localStorage b5r.largeprint='1'):
     320x568   19,436 -> 16,749     390x844  17,707 -> 14,829
     430x932   16,618 -> 13,994     834x1112 14,312 -> 11,849
    1280x900   11,827 ->  8,366

   SECTIONS, before -> after
     390x844   options 2955->2130, yours 1572->1150, path 1352->1176,
               inside 1194->1113, write 1105->922, house 1007->860,
               hero 841->750, begin 828->709, book 788->648, doesnt 482->450,
               colophon 423->338, masthead 300->300, bar 73->73
    1280x900   options 1635->1078, inside 1215->828, path 1156->781,
               write 1037->637, book 636->336, doesnt 414->284,
               house 812->702, yours 860->800, begin 560->597 (it is half the
               width of the sheet now and shares its row with the house, so
               the page loses the shorter of the two, not the sum)

   THE 390 TARGET IS NOT MET AND HERE IS THE ARITHMETIC, because a number
   missed quietly is worse than a number missed: the brief asks for under 12
   screens (10,128px) and composition lands at 12.70 (10,723). The 595px that
   remain are not in the layout. What the phone page is now made of: about
   1,800px of 56px touch targets (7 stations, 9 form fields, 11 buttons, 5
   fence rows, 6 telephones), about 700px of pictures (the cover 322, the book
   plate 473, the brand sheet 95), 640px of section padding across eleven
   bands, and the rest is type at press.css's 20px on its 32px lead. Taking
   595px more means removing about 19 lines of set matter or going under the
   scale, and both are the owner's call, not this pass's:
     - the mock-up section is 1,150px on a phone for a drawn preview;
     - the three option descriptions are 224px between them;
     - the receipt's terms paragraph is 181px.
   Nothing here has been shrunk to reach a number instead.

   OVERFLOW — documentElement.scrollWidth against clientWidth at 320, 390,
   430, 834 and 1280, normal AND Larger print: EQUAL in all ten. Two overflows
   were introduced by this pass and both are fixed above with the measurement
   that found them: the plate's three-track control row (1280, scrollWidth
   1323) and the path's third track in Larger print (1280, scrollWidth 1448).

   CONSOLE — zero errors and zero warnings at every size, both print modes,
   script on; zero with prefers-reduced-motion: reduce.

   STILL THERE, AND STILL WORKING, counted in the page at 390 and at 1280:
   the reading bar (2 controls, both 56px; Larger print toggles the root from
   16px to 20px and back with no overflow), 7 stations with 7 buttons and one
   open, Back/Next, the date control (which moves all seven dates: set to
   2026-10-01 and station 1 reads "Thursday, October 1"), 2 forms with 4
   fields and 2 buttons, 3 options with 3 prices and 13 list items, 5 receipt
   rows and the terms, 5 fence rows (each opens), the mock-up with its 5
   fields (given 73,000 words it answers "About 252 pages, with a spine 0.63
   inches thick"), the book object with its stage and 3 keys, and 6
   telephones.

   TOUCH TARGETS — every a[href^=tel], button, summary, input, select and
   textarea measured at all five widths in both print modes: none under 56px.
   One was under before this pass and is fixed at the foot of §11K.

   SHADOWS — box-shadow and text-shadow enumerated over every element in the
   body at 390 and 1280: none. No color outside the COLOPHON tokens is
   introduced by this section; every value in it is a token or a length.

   SCRIPT OFF — 390 and 1280 load with no horizontal overflow and the full
   nine-page fallback list; the page is longer (13,539 at 390) because the
   nine printed pages are all in the flow, which is what the fallback is.

   REDUCED MOTION — 390 and 1280: no wrap left below full opacity, no
   overflow, no errors, and the document is the same height as with motion.
   ========================================================================== */


/* ==========================================================================
   12. WHAT THE JUDGE FOUND — the last four, each with its measurement
   ========================================================================== */

/* THE TELEPHONE IS THE LARGEST THING ON THE FIRST SCREEN, and on the wide sheet
   it had stopped being: measured at 1280, h1 44px against the display numeral's
   40px. On a phone the number still won outright. The site's own law (D13) is
   that the telephone is the most important thing on the page, so it takes the
   4px back rather than the heading giving them up — the heading is doing its
   own work at 44. */
@media (min-width: 80rem) {
  .tel-big, .hero .tel { font-size: 2.75rem; }
}

/* THE MARGIN RAIL: THE HEADING IS NOT STICKY, and this is the second time it
   has been taken out, so the reason is written where the rule was.

   The judge found the rail dead below its heading and a sticky heading is the
   obvious answer. It does not work here, for a reason that has nothing to do
   with the breakpoint it was first blamed on: `.inside > .wrap` is
   `display: block`. The grid-template-columns declared for these sections never
   applies, so the heading is not in a rail at all — it is in ordinary flow
   above its own lead, and a sticky element in normal flow slides DOWN OVER the
   text beneath it. Photographed twice at 1280, "Look inside it" printed across
   "The real pages, from the file the printer works from", 12px of overlap
   measured the second time.

   If the rail is ever to be justified, the fix is to make the wrap a grid so
   the heading has a column of its own, and to put something real in that
   column. Not to make the heading follow the reader. */


/* ==========================================================================
   13. THE COLOPHON — what the research found, and what it cost the reader
   --------------------------------------------------------------------------
   Measured 2026-09-03 at 375px. Three faults, all of them visible, and the
   first is the "sloppy" the owner named.
   ========================================================================== */

/* 1. THE INK TAB. press.css §3 gives every section rule an ornament: a 28px
      ink bar centerd on two flanking hairlines. The colophon ALSO carries its
      own 2px ink border. Both fire in the same 2px band, and because the
      pseudo-element's top:0 is the padding edge — below the border — the
      ornament hangs 4px x 28px off the middle of the rule like a printing
      slip, while its hairlines are invisible against the border above them.
      The colophon's rule is already the heaviest on the page; it does not need
      an ornament as well. */
.colophon::before { display: none; }

/* 2. THE STAMP WAS TAKING A THIRD OF THE FOOT. The blind stamp is a whole grid
      column — 112px of a 335px foot at 375 — for a mark that measures 1.21:1
      against its own ground and is meant to be nearly invisible. On the wide
      sheet there is room for a device that quiet. On a phone the foot is four
      lines of type and there is not, so the stamp stands down and the type
      takes the width back. */
@media (max-width: 52.4375rem) {
  .colophon .stamp { display: none; }
}

/* 3. THE ORPHANED SEPARATOR. "Bar Five Rafter Publishing Co. · LaGuardo,
      Tennessee" wrapped to four lines with the middot stranded at the end of
      one of them, which is the one typographic slip a reader always sees. The
      separator is bound to the word before it in the markup now; this holds
      the rag. */
.colophon .wordmark-small { text-wrap: balance; }


/* ==========================================================================
   14. THE LETTERHEAD — grouping, which is the thing it did not have
   --------------------------------------------------------------------------
   Measured 2026-09-03 at 390x844: the five lines sat at intervals of 8, 4, 8,
   4 and 0 pixels, and all four text blocks were set to the identical 350px
   column. Near-equal intervals and equal widths are what make a stack read as
   a LIST; a letterhead is two or three GROUPS with unequal air between them
   (proximity — Butterick, Practical Typography, "Space above and below": the
   space below a heading belongs to what follows it).

   So: three groups, and the air between them is three times the air inside
   them.
     THE HOUSE     device, name, place        — one lockup, 4px apart
     THE CALL      the telephone              — the loudest line in the band
     THE HOURS     when it is answered        — 2px apart, one thought
   Nothing is resized and nothing is removed. Only the space is re-spent, and
   it costs the band no height: measured before 304px, after 304px.
   ========================================================================== */

/* Inside a group: tight. The name and its dateline are one object. */
.masthead-in > .place { margin-top: var(--s1); }
.masthead-in > .hours-now { margin-top: 0; }

/* Between groups: three times the air, so the eye reads three things and not
   five. The telephone gets the most room above it because it is the reason
   the band exists. */
.masthead-in > .tel-line { margin-top: var(--s6); }
.masthead-in > .hours { margin-top: var(--s3); }

/* THE NAME HAS TO OUTRANK A SECTION HEADING. It computed to 30px — the same
   size as every h2 on the page — while the telephone beside it was 40px and
   the hero's h1 was 44px, so the house's own name was the fourth thing in its
   own letterhead. Two steps of weight and a hair of tracking, not a size
   increase: the band must not grow. */
.wordmark { --wght: 650; font-weight: 650; letter-spacing: -0.008em; }
.wordmark-b { --wght: 400; font-weight: 400; }

@media (min-width: 52.5rem) {
  /* On the sheet the two columns are set from their own group, not from each
     other: the contact block aligns to the right margin rather than floating
     against the name's baseline. */
  .masthead-in > .tel-line { margin-top: var(--s2); }
  .masthead-in > .hours { margin-top: var(--s2); }
}


/* ==========================================================================
   15. THE MOCK-UP, FORMATTED — one plate, one rhythm
   --------------------------------------------------------------------------
   Measured 2026-09-03 at 390 and 1280: the form, the drawn book, the two turn
   buttons and the facts line sat at four different widths and four different
   left edges, with the gaps between them set by whatever each element happened
   to carry. Four blocks, no composition. The owner: "the spacing is all messed
   up with the form and the example book thing."

   One column, one edge, and a rhythm that groups: the form is a group, the
   plate is a group, and the controls belong to the plate rather than floating
   under it.
   ========================================================================== */

.mock { gap: 0; }
.mock-form { margin: 0; }

/* The plate: the drawn book, its controls and its readout are ONE object, so
   they are close to each other and further from the form above. */
.mock-scene { margin-top: var(--s8); padding: 0; }
.mock-nav { margin-top: var(--s4); }
.mock-facts { margin-top: var(--s3); max-width: var(--measure); }

/* The book centers on the column at every width — it is a plate on a page, and
   a plate is centerd on its measure or it is a mistake. */
.mock-scene { display: grid; place-items: center; }

/* --------------------------------------------------------------------------
   §16. THE PRIVACY NOTE SPANS BOTH FORMS
   Added 2026-09-03 on the owner's ruling (NEEDS_THE_OWNER.md 0i).

   It is a footnote to BOTH forms, and it kept landing in one column: 252px at
   1280 — about thirty characters a line — hanging under the mailing-list form
   as though it were part of it. Three different rules put it there, one per
   band: press.css §.. sends `.write > .wrap > *` to column 2, and the two
   bands here put every child on `grid-row: 1`.

   So it is said once, specifically enough to win in all of them, and outside
   any media query: span every column, take a row of your own. Where the wrap
   is not a grid (the phone), both declarations are ignored and the paragraph
   simply follows the forms, which is what it should do there anyway.

   Measured after, note width against the first form's: 390 350/350 at one x;
   834 592/592; 1024 296/296; 1280 536 against 252 — the full span, one left
   edge with the heading.
   -------------------------------------------------------------------------- */
.write > .wrap > .form-privacy { grid-column: 1 / -1; grid-row: auto; }

/* --------------------------------------------------------------------------
   §17. THE BOOK'S CONTROL ROWS CLEAR THE GATHERING
   Added 2026-09-03, found by photographing the book mid-turn on a phone.

   The gathering is `position: fixed` at `left: var(--s1)` — it occupies x 4-8
   for the whole height of the page. The book's two control rows are full-bleed
   on a phone, 0 to 390, so the collating marks were being drawn straight across
   the left edge of the Back button.

   It was never a functional fault: the marks are `pointer-events: none` and a
   tap at x=6 was measured hitting `.bk-btn-prev` correctly. It was a progress
   mark drawn over a control, which is the kind of thing this owner has twice
   called sloppy, and he was right both times.

   12px, symmetric, and only where the rows are full-bleed. That clears the
   marks with 4px of air and costs a 140px button twelve pixels it does not
   need — it is still 128 wide against a 56px floor. Above 52.5rem the rows are
   already inside the panel (measured: 145 to 689 at 834) and nothing here
   applies.
   -------------------------------------------------------------------------- */
@media (max-width: 52.4375rem) {
  .bk-controls, .b5r-magrow { padding-inline: 12px; }
}

/* --------------------------------------------------------------------------
   §18. THE DEVICE SITS BESIDE THE NAME, NOT ABOVE IT
   Added 2026-09-04 on the owner's instruction to take the wasted vertical
   space out of the header.

   MEASURED FIRST. At 390x844 everything above the reading bar was 324px, and
   the bar takes another 73 — so 397px of an 844px screen, 47%, was chrome
   before a reader saw one word of the page. The single largest item in it was
   the wordmark at 106px, and 42 of those were the mark stacked ON TOP of the
   name with a gap under it.

   A printer's device belongs beside the name. It is how a colophon is set on a
   title page and how a brand is burned beside a name on a registration sheet —
   the lockup this masthead is imitating. Stacking it was the arrangement that
   cost the most and said the least.

   float, not grid or flex: .wordmark is a paragraph containing a text node and
   a span, and both of those become separate items in a grid or a flex
   container, which breaks the two-line lockup the leading was tuned for in
   press.css §16. A float leaves the lockup exactly as it is and simply puts
   the device to its left. flow-root contains it without clipping.
   -------------------------------------------------------------------------- */
.wordmark { display: flow-root; }
.wordmark::before { float: left; margin: 0 var(--s3) 0 0; }

/* ==========================================================================
   THE PUBLISHER'S DEVICE, STRUCK AT SIZE ON THE COLOPHON
   --------------------------------------------------------------------------
   This is the lockup the owner chose on 2026-09-05 and which Vellum prints on
   the book's title page, rebuilt in live type so it shimmers with the rest of
   the site and stays sharp at any size or zoom. Every ratio is taken from
   tools/make-publisher-logo.py, which drew the artwork:

       device      0.19 of the lockup width, aspect 1.226
       BAR FIVE RAFTER   0.072 of the width, weight 560, tracking .16em
       PUBLISHING CO.    0.052 of the width, weight 500, tracking .18em
       gaps        0.030 device->name, 0.024 name->sub

   Measured back off the 2400px master to confirm: device 3.02x the cap height,
   the second line 0.69x, gaps 0.59 and 0.47 of the cap height. The generator's
   own note explains the proportion — "an imprint, not a badge with a caption";
   an earlier cut at 5.4x was rejected for exactly that reason.

   ONE THING THAT IS NOT IN THE ARTWORK'S NUMBERS. letter-spacing adds its space
   AFTER the last character as well as between, so centerd letterspaced caps sit
   half a tracking-unit left of true center. text-indent of the same em value
   puts it back. Without it this lockup is off-center by 0.08em and 0.09em, which
   is visible at this size against a device that is centerd geometrically.
   ========================================================================== */
/* IT SPANS THE FOOT, AND THE BLIND STAMP STANDS DOWN.
   The colophon is a two-column grid above 52.5rem with the blind stamp in the
   outer margin — "where a binder actually puts one". That reasoning holds for an
   impression meant to be found rather than read; it does not hold for the
   publisher's device struck at size, which is the mark itself and belongs on the
   center line. Dropped in as an ordinary grid item it landed in column one and
   pushed "LaGuardo, Tennessee" out to column two, which is how this first
   rendered. So it spans both columns and centers, and the supporting lines keep
   the grid beneath it. The old .stamp is removed from the markup rather than
   hidden: two devices in one foot is one too many. */
/* AND THE FOOT COMPOSES ROUND IT. The colophon was a two-column grid with the
   blind stamp in the outer margin, which was right for an impression meant to be
   found rather than read. With the device struck at size on the center line, the
   old arrangement left the place, the telephone and the link ragged underneath a
   centerd mark — measured: the telephone at the left edge, the link floated right
   and vertically centerd against it, the place line between them. A colophon is
   the one place on a page where centerd type is the traditional form, and it is
   what the mark above it now asks for. One column, centerd, in the reading order
   the page already had. */
.colophon > .wrap {
  display: block;
  text-align: center;
  max-width: 34rem;
  margin-inline: auto;
}
.colophon > .wrap > .colophon-lockup { margin-inline: auto; }
.colophon > .wrap > * + * { margin-top: var(--s4); }
.colophon .tel-line { margin-top: var(--s3); }
.colophon .fine { max-width: none; margin-left: auto; margin-right: auto; }

.colophon-lockup {
  --lw: min(30rem, 78vw);
  width: var(--lw);
  margin: 0 auto;
  text-align: center;
}
.cl-device {
  width: calc(var(--lw) * .19);
  aspect-ratio: 1.226;                     /* the device's own ratio, from the generator */
  margin: 0 auto calc(var(--lw) * .030);
  background-color: var(--ink);
  -webkit-mask: url(../brand/mark.png) no-repeat center / contain;
          mask: url(../brand/mark.png) no-repeat center / contain;
}
.cl-name { margin: 0; font-family: "EB Garamond", var(--serif); color: var(--ink); }
.cl-caps, .cl-sub { display: block; text-transform: uppercase; }
.cl-caps {
  font-size: calc(var(--lw) * .072); line-height: 1;
  font-weight: 560; letter-spacing: .16em; text-indent: .16em;
}
.cl-sub {
  margin-top: calc(var(--lw) * .024);
  font-size: calc(var(--lw) * .052); line-height: 1;
  font-weight: 500; letter-spacing: .18em; text-indent: .18em;
  /* FULL INK, NOT --ink-70. The masthead sets its second line a tier lighter,
     and copying that convention here was wrong: the artwork the owner chose
     draws BOTH lines in INK (#23201C) — tools/make-publisher-logo.py:164-165
     passes the same INK constant to both wordline() calls. On this lockup the
     hierarchy is carried by size and tracking, not by tone. */
  color: var(--ink);
}
/* The place line sits under the mark, not inside it. */
.colophon-lockup + .place-line {
  margin: calc(var(--lw, 30rem) * .034) 0 0;
  text-align: center;
}

/* ==========================================================================
   THE LAST OF THE 200% REFLOW, AT 320px
   --------------------------------------------------------------------------
   The reflow pass took the front page from 114px of sideways scroll at 320 to
   36, and every other phone width to zero. What was left is three pieces of type
   that cannot break where they are asked to:

       .stations      310px of content in a 280px column   (30 over)
       .post-date     296 in 280                           (16 over)
       .tel-line .tel 295 in 280                           (15 over)

   THE TELEPHONE IS CAPPED, NOT BROKEN. It is set with a non-breaking hyphen so
   that "(615) 398-1776" can never be split across two lines, and that is right —
   a telephone number in two pieces is worse than a narrow page. So it is allowed
   to get SMALLER instead. 14vw is 44.8px at 320, comfortably above its 24px
   resting size at every width, so min() never binds at 100% and only takes hold
   when the reader has enlarged the text past what the line can hold. Same
   technique as --gutter, and for the same reason: vw does not scale with font
   size.

   The other two are ordinary prose and are simply allowed to break a long word
   rather than push the page. At 100% they have never needed to.
   ========================================================================== */
.stations, .stations li, .post-date { overflow-wrap: break-word; }