/* ============================================================================= BAR FIVE RAFTER PUBLISHING CO. — press.css Replaces plain.css. Same markup, same words, made properly. ----------------------------------------------------------------------------- THE METAPHOR — the enforcement clause. Every rule below is deduced from it. ----------------------------------------------------------------------------- THIS PAGE IS A PROOF SHEET PULLED ON THE HOUSE'S OWN PAPER: the ink sits IN the stock rather than on top of it, every line that crosses the sheet is a rule doing structural work, the type is set from one case in the sizes a printer would actually reach for — and the only thing on the sheet permitted to be a picture is the book. What that sentence forces, clause by clause: 1. "the ink sits IN the stock" No drop shadows, anywhere, in flow. Ink does not hover over paper. Depth is three papers (canvas / surface / sink) and 1px hairlines, and nothing else. The paper tooth (§4) is painted INTO each ground, behind the type, never as a film laid over it — so the letterforms stay perfectly crisp. 2. "every line that crosses the sheet is a rule doing structural work" Three rule weights, each with exactly one job (§3). If a rule is not separating two things that are genuinely different, it is deleted. The ornamented rule (§3) appears TWICE on the whole page, at the only two places where the register of the document actually changes. 3. "set from one case, in the sizes a printer would reach for" One serif (Source Serif 4) carries display and prose, at a different optical size per role — that is what the opsz axis is FOR. One gothic (Public Sans) carries labels and nothing else. The scale is 1.2, and every size is rounded to the nearest one whose line box lands on the 4px lead — the scale suggests, the leading decides. That is how a printer works and it is why this page is machined rather than approximate. 4. "the only thing permitted to be a picture is the book" The cover painting and the eight photographs of the real printed pages are the earned flourish, and they are the ONLY flourish. They get the plate treatment. Every other surface on this page stays quiet: no gradient, no glass, no glow, no rounded corners, no motion that merely confirms something the reader can already see. ----------------------------------------------------------------------------- THE READER ----------------------------------------------------------------------------- Frequently seventy or older, on an iPad or a phone, holding a finished book and no idea what happens next. So: body type is 20px and it is not behind a toggle; nothing is below 16px; anything that must be pressed is 56px; every gesture also has a button; every size is in rem, so a reader who has already asked their device for large text gets larger text again rather than being overridden. ----------------------------------------------------------------------------- PALETTE — COLOPHON, fixed by the owner. Ratios computed against --canvas. ink 14.14 · ink-70 7.16 · ink-45 5.90 · accent 8.17 · flag 6.20 · stop 8.01 ink-30 is 3.69 and is therefore NON-TEXT ONLY. --rule is 1.39 and is therefore a decorative hairline only, never an affordance boundary. No color in this file is written as a literal. Everything is a token. ----------------------------------------------------------------------------- ONE DECLARED DEPARTURE FROM SPEC.md §7.3.5, so it is a decision and not a drift: §7.3.5 says "no texture". The build brief asks for a paper tooth at 2–4%. It is built (§4), painted into the grounds rather than over the page, at a MEASURED mean of 2.0% and a peak of 7.4%. Kill it with ONE line: set --paper: none in :root. ========================================================================== */ /* ========================================================================== 1. TOKENS ========================================================================== */ /* WCAG 2.2 SC 2.4.11 FOCUS NOT OBSCURED (MINIMUM), AA — and it was failing twice, hard. Measured 2026-09-03: six controls are entirely covered by the fixed thumb bar when they take focus, and forty land wholly beneath the 58px sticky running head on shift-Tab or after an anchor jump — including the target the skip link itself points at. `scroll-padding` computed to `auto`, which is the documented failure F110; the technique that fixes it is C43, "Using scroll-padding to un-obscure content". Two declarations. The head is 56px plus its 2px rule; the thumb bar is 74px and is only fixed below 52.5rem, so the foot padding is conditional further down. --s6 of air on top of each so a focused control is not merely visible but readable. */ :root { scroll-padding-top: calc(58px + env(safe-area-inset-top, 0px) + var(--s6)); } :root { /* ---- Color: the eleven rungs, and each rung's permitted use ---------- */ --canvas: #F4EFE4; /* the page */ --surface: #FBF8F1; /* raised: the book, the address card */ --sink: #E8E0D0; /* recessed: masthead, "what it does not do", footer */ --rule: #D6CCB8; /* DECORATIVE hairlines only — never an affordance */ --ink: #23201C; /* primary text, the heavy rule */ --ink-70: #554E44; /* secondary text where emphasis is still wanted */ --ink-45: #645A4B; /* the pervasive secondary rung: captions, labels */ --ink-30: #847A66; /* NON-TEXT ONLY: affordance borders */ --accent: #7A2E22; /* links, the focus ring, the telephone number */ --flag: #8F420D; /* waiting on you — unused on this page */ --good: #3F5D3A; /* done — unused on this page */ --stop: #8A1F14; /* declined, error — unused on this page */ /* ---- Type: two families, and nothing else ---------------------------- */ --serif: "Source Serif 4", "Source Serif Pro", Charter, Georgia, serif; --sans: "Public Sans", "Helvetica Neue", Arial, sans-serif; /* Variable-font axes carried as inherited custom properties so that a inside an

keeps the heading's optical size and only changes weight. See §2 for the universal rule that resolves them. Source Serif 4: opsz 8-60, wght 200-900. Public Sans: wght 100-900, no opsz axis — an unknown axis is ignored, which is why one rule works for both families. */ --opsz: 16; --wght: 400; /* ---- The lead --------------------------------------------------------- THE LEAD IS 0.25rem, NOT 4px, AND THE DIFFERENCE IS THE WHOLE POINT: with Larger print on the root is 20px, the lead is 5px, and every calc(N * var(--lead)) line box on the page steps to 5. The grid travels with the reader's type instead of being nailed to the device. WHAT STOOD HERE WAS FALSE. It said a probe "walks every h1/h2/h3/p/li/a/button/span and reports any computed line-height that is not a multiple of 4. It reports none." A verifier ran exactly that probe and got 17. Both claims were wrong in the same way: a probe that tests against a hard-coded 4 is not testing this grid. With Larger print on it flags the entire page — 42 elements at 390x844, including h1 at 50, h2 at 45 and .tel at 55, every one of them exactly on the lead it was written against. THE PROBE, WRITTEN SO IT MEASURES WHAT IT CLAIMS TO. --lead has to be resolved first, and getPropertyValue cannot do it — a custom property hands back the literal token "0.25rem". Put it on a real property and read the used value back: var m = document.createElement('div'); m.style.cssText = 'position:absolute;visibility:hidden;height:var(--lead)'; document.body.appendChild(m); var lead = parseFloat(getComputedStyle(m).height); // 4, or 5 document.body.removeChild(m); // then walk h1,h2,h3,p,li,a,button,span, skip anything with no client // rects, and flag any computed line-height that is not a multiple of // `lead` WHAT IT REPORTS, run 2026-08-31 over index.html at 320 / 390 / 430 / 1280 in both print modes: FIVE, the same five at every width, and not one of them is in this file — .b5r-lead (x2, 33.6px), .b5r-spec (x2, 26.04px) and .b5r-facts (26.88px), all injected by forauthors.js against its own --fs scale, which §16's closing note already declines to override from here and says why. press.css's own share is zero, and it was not zero before this pass: the thumb bar carried a bare line-height:1.15 that put three more elements off the grid. That is fixed at §15, not excused here. The rules between register rows are on the lead too, which took subtracting each rule's own 1px from the row below it (§11). */ --lead: 0.25rem; /* 4px at the default root size */ /* ---- The scale: 1.2, rounded onto the lead ---------------------------- */ --t-fine: 1rem; /* 16 / 24 — captions, fine print */ --t-ui: 1.125rem; /* 18 / 28 — gothic labels, buttons */ --t-body: 1.25rem; /* 20 / 32 — reading body. The floor. */ --t-h3: 1.5625rem; /* 25 / 32 — row heading */ --t-lead-para: 1.5rem; /* 24 / 36 — lead paragraph */ --t-h2: 1.875rem; /* 30 / 36 — section */ --t-h1: 2.25rem; /* 36 / 40 — the display line */ --t-num: 2.5rem; /* 40 / 40 — display numeral */ /* ---- Space: base 4. No value off this scale. -------------------------- */ --s1: 0.25rem; /* 4 */ --s2: 0.5rem; /* 8 */ --s3: 0.75rem; /* 12 */ --s4: 1rem; /* 16 */ --s6: 1.5rem; /* 24 */ --s8: 2rem; /* 32 */ --s12: 3rem; /* 48 */ --s16: 4rem; /* 64 */ --s24: 6rem; /* 96 */ --s32: 8rem; /* 128 */ /* ---- Measure and page ------------------------------------------------- */ --measure: 37rem; /* MEASURED at 67 characters, 20px Source Serif 4 */ --measure-lead: 32rem; /* the lead paragraph is set shorter, being larger */ --wrap: 43rem; /* outer page width below 840px */ /* --gutter: 20px at 375, per SPEC §7.3.4 — AND IT MUST NOT DOUBLE WHEN THE READER DOES. A bare 1.25rem is 20px at the default root and 40px at Chrome's 200% font setting, on a viewport that did not grow, so 80px of a 360px phone went to margins that the reader never asked to enlarge. That is one of the three reasons this page put a horizontal scrollbar on every phone width at 200% (measured 2026-09-06: 114px sideways at 320, 74 at 360, 44 at 390, 24 at 414). vw does not scale with font size, and 6.25vw is EXACTLY 20px at 320 — the narrowest width this site supports — so min() is 1.25rem at every width at 100% and SPEC §7.3.4's number is untouched. It only binds once the root grows. Verified against an 18-configuration baseline captured before the change. */ --gutter: min(1.25rem, 6.25vw); --slug: 0rem; /* margin column for section headings; 0 until 840 */ --slug-gap: 0rem; /* ---- The three rules. There is no fourth. ----------------------------- hair separates two things printed on the SAME piece of stock: rows in a register, one section from the next on the same ground. mid is the edge of something that is NOT the stock — a button, a card, a mounted plate. One definition, and it covers the button and the book's photographs without inventing a fourth weight. heavy closes the masthead. Once on the page, and that is the point. */ --rule-hair: 1px solid var(--rule); --rule-mid: 1px solid var(--ink-30); --rule-heavy: 2px solid var(--ink); /* ---- Motion. 120 / 180 / 240, one easing. ----------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --t-state: 120ms; /* ---- The paper tooth (§4). Set to `none` to remove it entirely. ------- */ --paper: var(--paper-tooth); /* A 256px stitched fractal-noise tile, seamless (stitchTiles). The alpha row of the color matrix maps the turbulence luminance onto a narrow band: alpha = 0.065(R+G+B) - 0.078. MEASURED in this build at mean 2.0% / peak 7.4% — felt, not seen. Black, multiplied into the ground, so the paper's hue is darkened rather than desaturated; a plain alpha composite would gray the warmth out of it. No color literal appears anywhere in it: SVG's default fill is already black, which is why this is a data URI and not a hex. Generated in CSS, no external file, no network, and it satisfies img-src 'self' data:. */ --paper-tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='p' x='0' y='0' width='256' height='256' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .065 .065 .065 0 -.078'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23p)'/%3E%3C/svg%3E"); color-scheme: light; accent-color: var(--accent); } /* ========================================================================== 2. THE SHEET, AND THE TYPE SYSTEM ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* The one universal rule in the file, and it earns its place: it re-resolves the two variable axes on every element from inherited custom properties. Without it, font-variation-settings inherits as a computed string and a nested silently loses its weight. font-weight is ALSO always set alongside --wght, so the fallback stack (Charter, Georgia) still bolds. */ *, *::before, *::after { font-variation-settings: "opsz" var(--opsz), "wght" var(--wght); } html { /* First paint is the brand ground, never white. Painted on the root so it covers the whole canvas including overscroll on iOS. */ background-color: var(--canvas); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior: none; /* no rubber-band reveal of the shell */ scrollbar-gutter: stable; /* no reflow when the scrollbar shows */ scroll-behavior: auto; } body { margin: 0; background-color: var(--canvas); background-image: var(--paper); background-blend-mode: multiply; color: var(--ink); font-family: var(--serif); font-size: var(--t-body); line-height: calc(8 * var(--lead)); /* 32px on a 20px body */ --opsz: 16; /* sturdier than 20 on glass */ --wght: 400; font-weight: 400; font-kerning: normal; font-variant-ligatures: common-ligatures; hanging-punctuation: first last; /* Safari; this audience */ overflow-x: hidden; /* belt and braces at 390 */ } /* Deliberately NOT setting -webkit-font-smoothing: antialiased. It thins serif strokes on macOS, and this reader needs every stroke it can get. */ ::selection { background: var(--rule); color: var(--ink); } img { max-width: 100%; height: auto; } /* HEADINGS BREAK RATHER THAN PUSH THE PAGE SIDEWAYS. At Chrome's 200% font setting a display line is roughly twice as wide in a column that did not grow: the cover sheet's h1 measured 348px of unbreakable word inside a 230px column, which is what put a horizontal scrollbar on that page. Breaking a long word is ugly; a page that scrolls sideways is unusable, and at normal sizes this never binds because the words already fit. */ /* NOT break-word ON EVERY HEADING. That is what stood here, and measuring it at 320, 360, 390 and 414 found NOT ONE heading on this page overflowing with the rule or without it — it was doing nothing but carrying the risk of splitting a word mid-stroke, on the press's own name among others. The two elements that genuinely need it at 200% type are both on the cover sheet, and plain.css scopes it to them there. WHAT THIS PAGE NEEDED WAS THE OPPOSITE. On a 440pt phone the lockup broke as "Bar Five Rafter Publishing / Co." — the company's name with "Co." orphaned on a line of its own. Seen on an iPhone in the simulator; no measurement I had would have told me. The two halves are separated by an ordinary space, so the line could turn anywhere. Each half is unbreakable now, which leaves exactly one place for the lockup to turn: between them, where it was always meant to. */ .wordmark-a, .wordmark-b { white-space: nowrap; } /* ---- Headings --------------------------------------------------------- */ h1, h2, h3 { font-family: var(--serif); margin: 0 0 var(--s6); text-wrap: balance; font-weight: 600; --wght: 600; } h1 { font-size: var(--t-h1); line-height: calc(10 * var(--lead)); /* 40 on 36 */ letter-spacing: -0.01em; --opsz: 40; max-width: 17ch; /* Optical margin alignment. At display size the face's designed left sidebearing is proportionally too generous, so the line is pulled back a hair to sit flush with the rules and the prose beneath it. It is a NEGATIVE MARGIN and not a text-indent on purpose: text-indent moves only the FIRST line, which on a three-line display heading would leave lines two and three out of alignment with line one by exactly the size of the correction — a defect introduced by the fix. */ margin-inline-start: -0.018em; } h2 { font-size: var(--t-h2); line-height: calc(9 * var(--lead)); /* 36 on 30 */ letter-spacing: -0.005em; --opsz: 30; max-width: 16ch; margin-inline-start: -0.014em; } h3 { font-size: var(--t-h3); line-height: calc(8 * var(--lead)); /* 32 on 25 */ --opsz: 24; margin-bottom: var(--s3); } /* ---- Prose ------------------------------------------------------------ */ p { margin: 0 0 var(--s6); max-width: var(--measure); text-wrap: pretty; /* better rag, no orphans */ } p:last-child { margin-bottom: 0; } .big { font-size: var(--t-lead-para); line-height: calc(9 * var(--lead)); /* 36 on 24 */ --opsz: 24; max-width: var(--measure-lead); color: var(--ink); } strong, b { --wght: 700; font-weight: 700; } em, i, cite { font-style: italic; } /* ---- Links ------------------------------------------------------------ */ a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-skip-ink: auto; } /* A read link goes to secondary ink — it is still underlined, so link-ness never rides on color alone. The telephone is exempt below: a tel: link is not "read", and dimming it would be a lie about what matters here. */ a:visited { color: var(--ink-70); } @media (hover: hover) and (pointer: fine) { a:hover { text-decoration-thickness: 2px; } } a:active { color: var(--ink); } /* ---- Focus: this audience tabs, so the ring is designed, not defaulted -- */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 0; /* square. This is a letterpress house. */ } :focus:not(:focus-visible) { outline: none; } /* ========================================================================== 3. THE RULE AS AN INSTRUMENT Three weights, one job each, and one ornamented rule used exactly twice. --rule-hair between rows in a register; between two sections of the same register --rule-mid the edge of anything that is NOT the stock: a button, the address card, the cover, the mounted page plate --rule-heavy under the masthead. Once on the page, and that is the point. The ornamented rule is SPEC §7.3.6's permitted motif — a hairline, a 6px gap, a 2px centerd dash, a 6px gap, the hairline resuming — drawn here as three background layers on a 2px band, so the swell is a single crisp element with no sub-pixel seam. It marks the two places on this page where the register genuinely changes: into the book, and out of the record into the colophon. It is not used anywhere else, because a motif used eight times is decoration. ========================================================================== */ /* WHERE A HAIRLINE IS ALLOWED TO APPEAR, deduced rather than decided: a hairline separates two sections ONLY where the ground does NOT change. Where the paper changes, the paper has already done the separating and a rule on top of it is decoration. That single sentence produces every section border on this page, and it is why there are four of them and not eight. */ .book, footer { position: relative; } .book::before, footer::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px; pointer-events: none; background-repeat: no-repeat; background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--rule), var(--rule)), linear-gradient(var(--rule), var(--rule)); background-size: 28px 2px, calc(50% - 20px) 1px, calc(50% - 20px) 1px; background-position: 50% 0, 0 0, 100% 0; } /* ========================================================================== 4. MATERIAL — the paper tooth Painted INTO the three grounds, multiplied, behind the type. Not a film over the page: an overlay would composite the noise across every glyph and soften the one thing this reader cannot afford to lose. Mean alpha ~3%, sparse rather than uniform, so it reads as fibre in the stock rather than as gray haze. Never on the book's own photographs — they are the object, and the object does not get the site's paper laid over it. ========================================================================== */ header, .book, .inside, .doesnt, .addr, footer { background-image: var(--paper); background-blend-mode: multiply; background-repeat: repeat; } header { background-color: var(--sink); } /* the letterhead band */ .book { background-color: var(--surface); } /* raised: the object */ .inside { background-color: var(--surface); } /* same movement, same paper */ .doesnt { background-color: var(--sink); } /* recessed: the absences */ footer { background-color: var(--sink); } /* the colophon */ /* ========================================================================== 5. PAGE FRAME ========================================================================== */ .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: calc(var(--gutter) + env(safe-area-inset-left, 0px)) calc(var(--gutter) + env(safe-area-inset-right, 0px)); } /* ========================================================================== 6. RHYTHM The current page reads flat because it is eight sections of equal weight on one ground. It is given a cadence here — in GROUND and in AIR, not in ornament: masthead sink the letterhead band, closed by the one heavy rule opening canvas the largest display line; no rule above it the book surface RAISED. The ornamented rule opens it. inside it surface same ground, hairline only: one movement, two parts does canvas tight utilitarian rows does not sink RECESSED — the negative space of the offer costs canvas air returns begin canvas the most air on the page, before the telephone the house canvas quiet, short colophon sink the ornamented rule closes the record ========================================================================== */ section { padding-block: var(--s16); } .opening { padding-block: var(--s16) var(--s24); } /* no rule: the masthead's heavy rule already closed what precedes */ .book { padding-block: var(--s24) var(--s16); } /* ornamented */ .inside { padding-block: var(--s12) var(--s16); border-top: var(--rule-hair); } /* same ground */ .does { padding-block: var(--s12); } /* ground turns*/ .doesnt { padding-block: var(--s12); } /* ground turns*/ .cost { padding-block: var(--s16); } /* ground turns*/ .start { padding-block: var(--s24); border-top: var(--rule-hair); } /* same ground */ .who { padding-block: var(--s12); border-top: var(--rule-hair); } /* same ground */ /* ========================================================================== DEAD SECTION — VERIFIED 2026-09-03. DO NOT EDIT THIS EXPECTING AN EFFECT. -------------------------------------------------------------------------- Every selector below (.name, .name span, .phone, header .phone, .addr) has ZERO matches in web/index.html, and index.html is the only page that loads this stylesheet — coversheet.html, sample.html and 404.html load plain.css. The live letterhead is .masthead / .wordmark / .place / .tel / .hours, and it is styled in section 14 of this file and in finish.css sections 9 and 14. Consequence, and it is why this marker exists rather than a quiet deletion: SPEC 7.4.1's wordmark — serif caps at opsz 48, +0.02em, a gothic second line at +0.16em — has never once rendered. Anyone who "fixes the masthead" here is editing a comment. It is left in place rather than deleted because the specification it encodes is the only written record of what the wordmark was meant to be, and that is worth more than the 150 lines it costs. Delete it the day the letterhead is redrawn from it. ========================================================================== */ /* ========================================================================== 7. THE MASTHEAD The wordmark is SPEC §7.4.1: line one in the SERIF, caps, opsz 48, wght 600, +0.02em; line two in the gothic, caps, +0.16em, --ink-45. ONE DECLARED DEPARTURE, because two house rules collide: §7.4.1 sets line two at 0.34 x line one, which at any wordmark size that fits a 390px phone puts it under 12px — below this build's hard 16px floor. The floor wins, and it is written into the CSS rather than into a comment: font-size: max(1rem, 0.34em) The ratio is honored wherever it clears the floor and yields where it does not, so the lockup is correct at desktop and legible on a phone. ========================================================================== */ header { padding-block: calc(var(--s8) + env(safe-area-inset-top, 0px)) var(--s8); border-bottom: var(--rule-heavy); } .name { font-family: var(--serif); /* Stepped, not fluid. A clamp() on vw produced 38.72px here, whose line box is 38.72px and therefore off the 4px lead — the only two lines on the page that were. Discrete sizes that are multiples of four fix that, and they also stop the wordmark from ignoring a reader who has already asked their device for larger text, which a vw-driven size does. */ font-size: 2rem; /* 32; 40 and 44 below */ line-height: 1; /* = the size = on the lead */ letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); --opsz: 48; --wght: 600; font-weight: 600; margin: 0; max-width: none; margin-inline-start: -0.02em; /* optical margin, again */ } .name span { display: block; font-family: var(--sans); font-size: max(1rem, 0.34em); /* the floor, in the rule */ line-height: calc(5 * var(--lead)); /* 20 — on the lead */ letter-spacing: 0.16em; color: var(--ink-45); margin-top: var(--s1); --wght: 600; font-weight: 600; } .place { font-family: var(--sans); font-size: var(--t-fine); line-height: calc(6 * var(--lead)); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-45); font-variant-numeric: tabular-nums; --wght: 500; font-weight: 500; margin: var(--s6) 0 var(--s8); max-width: none; } .hours { font-family: var(--sans); font-size: var(--t-ui); line-height: calc(7 * var(--lead)); color: var(--ink-70); --wght: 400; margin: 0; max-width: 40ch; } /* ---- The telephone number is a display numeral, and it is set as one ---- Serif, tabular, at the size a price would be set. It is the most important thing on the page, so it is not a gothic UI string — it is typeset. */ .phone { display: inline-block; font-family: var(--serif); font-variant-numeric: tabular-nums; color: var(--accent); --wght: 500; font-weight: 500; text-decoration-thickness: 1px; text-underline-offset: 0.16em; min-height: 56px; /* the touch floor */ } .phone:visited { color: var(--accent); } .phone:active { color: var(--ink); } @media (hover: hover) and (pointer: fine) { .phone:hover { text-decoration-thickness: 2px; } } header .phone { font-size: var(--t-h3); line-height: 56px; --opsz: 32; margin-bottom: var(--s2); } /* ========================================================================== 8. THE OPENING — commanding, and the only place the display line hangs ========================================================================== */ .opening h1 { margin-bottom: var(--s8); } /* ========================================================================== 9. THE BOOK — the earned flourish, and the only picture on the sheet No shadow. A book is made to feel physical here the way a plate is made to feel physical in a printed book: it is mounted. The cover gets a hairline directly on its edge, on a raised ground, with more air around it than anything else on the page. The page photographs get a mat — padding on the itself, in --surface, closed with a hairline — which is a tipped-in plate and is also literally true, because they ARE photographs of paper. ========================================================================== */ .book-grid { display: grid; grid-template-columns: 1fr; gap: var(--s8); align-items: start; } .cover { display: block; width: 100%; max-width: 20rem; height: auto; border: var(--rule-mid); background: none; /* never the site's paper */ } .credit { font-size: var(--t-fine); line-height: calc(6 * var(--lead)); --opsz: 10; color: var(--ink-45); margin-top: var(--s8); padding-top: var(--s3); border-top: var(--rule-hair); /* a caption rule, not trim */ max-width: var(--measure); } /* ========================================================================== 10. LOOKING INSIDE One page at a time, big, with two big buttons. Every gesture also has a button; there is no gesture here at all, which is the same rule taken to its end. The buttons are recessed keys: --sink ground on the --surface section, closed with --rule-mid. Two luminance steps and a hairline is the whole vocabulary of "this is a thing you can press". ========================================================================== */ .reader { margin-top: var(--s8); } #pageImg { display: block; width: 100%; max-width: 24rem; height: auto; margin-inline: auto; padding: var(--s2); /* the mat */ background-color: var(--surface); background-image: none; /* never the site's paper */ border: var(--rule-mid); /* a mounted plate */ } .page-caption { font-family: var(--sans); font-size: var(--t-fine); line-height: calc(6 * var(--lead)); color: var(--ink-70); text-align: center; margin: var(--s4) auto var(--s6); max-width: none; } /* DELETED, 2026-08-31: every rule for the Back / count / Next control row and its four button states. That element belongs to the superseded plain build and appears nowhere in index.html or tools.html. Dead CSS is not free — this is the incident: forauthors.js carried a stale document.querySelector('.page-controls') and forty lines of considered CSS in this file are what made that line look correct in review. Anyone checking "is that a real element on this site?" found the styling and stopped there. The null it actually returned put the magnifier button in the wrong place on a phone. The JS side is being repaired separately; this is the half that told the lie. .page-count, #pageImg, .page-caption and .reader are dead in exactly the same way and are NOT removed here — they were outside this pass's brief. They are named in the report so their removal stays a decision and not a drift. */ .page-count { font-family: var(--sans); font-size: var(--t-fine); color: var(--ink-45); font-variant-numeric: tabular-nums; --wght: 500; font-weight: 500; min-width: 5rem; text-align: center; justify-self: center; } /* The live region. Present for a screen reader, absent to the eye. */ .says { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ========================================================================== 11. THE TWO REGISTERS — what it does, what it does not Tight utilitarian rows, hairline-separated, with the leading gutter doing the work a printer's furniture would do. The affirmative list is NUMBERED, because it is a manifest of work performed and a manifest is countable; the negative list carries an EN-RULE, because an absence cannot be numbered. That distinction is structural, it is drawn with the rule vocabulary, and it is the only difference between the two lists. ========================================================================== */ .plain-list { list-style: none; margin: 0; padding: 0; max-width: var(--measure); counter-reset: item; border-top: var(--rule-hair); } /* The gutter mark and the text are two grid tracks aligned on their FIRST BASELINES, not by a hand-tuned offset. The mark and the prose are set in different families at different sizes, so any fixed top value would be a guess that breaks the moment either size changes; baseline alignment is the thing a compositor actually does, and it stays true. */ .plain-list li { counter-increment: item; display: grid; grid-template-columns: var(--s6) minmax(0, 1fr); column-gap: var(--s3); align-items: baseline; /* The rule is part of the lead, not extra to it. Subtracting its 1px from the bottom padding is what puts the RULE-TO-RULE PITCH on the 4px grid: 12 + 32 + 11 + 1 = 56 for a one-line row, 88 for two, 120 for three. Left alone it was 89 / 121 / 153, and every rule in the register drifted a pixel further off the grid than the one above it. */ padding-block: var(--s3) calc(var(--s3) - 1px); border-bottom: var(--rule-hair); line-height: calc(8 * var(--lead)); } /* The mark is set in the TEXT face at the TEXT size, not in the gothic. Two reasons, and the second is why it is not a preference: - a numbered list inside running prose is part of the text, not UI chrome, and a compositor sets its figures from the same case; - Source Serif 4 carries `tnum`, so the figures are still tabular, and because the mark and the prose now share metrics their baselines agree exactly. Setting the mark in Public Sans put its baseline 1.2px high, and correcting that with grid baseline alignment grew every row by 1px — which silently took all eleven rules off the 4px grid. Measured before and after: 89/121px per row, then 88/120px. */ .plain-list li::before { text-align: right; font-family: var(--serif); font-size: var(--t-body); line-height: inherit; font-variant-numeric: tabular-nums; color: var(--ink-45); --opsz: 16; --wght: 500; font-weight: 500; } /* A manifest of work performed is countable, so it is numbered, in tabular figures. */ .does .plain-list li::before { content: counter(item); } /* An absence cannot be numbered, so it carries an en-rule instead — a real en-dash set in the type, not a drawn box, which is why it sits on the baseline correctly and scales with the reader's text size. The empty alt text keeps it out of the screen reader; the sentence already says "No". */ .doesnt .plain-list li::before { content: "\2013"; } /* The alternative-text form of `content` is Chrome 111+ / Safari 17.4+, and an unsupported value invalidates the WHOLE declaration — which on an older iPad would have removed the en-rule from every row rather than just leaving it in the accessibility tree. Declared as a progressive enhancement instead. */ @supports (content: "a" / "b") { .doesnt .plain-list li::before { content: "\2013" / ""; } } /* ========================================================================== 12. HOW TO BEGIN — the most air on the page, and the largest numeral ========================================================================== */ .ways { display: grid; grid-template-columns: 1fr; gap: var(--s16); } /* "Telephone" and "Or send the pages" are not headings of prose — they are the two field labels on a letterhead, and setting them at 25px serif put them within five pixels of the section head above, which flattened the whole section. They go into the gothic, which is what the gothic is for. This is the only uppercase on the page outside the wordmark, the dateline and the colophon slug, and every one of them is a label of three words or fewer that nobody has to READ — which is the condition SPEC §7.3.2 puts on uppercase, and the reason it is not used anywhere else. */ .way h3 { font-family: var(--sans); font-size: var(--t-ui); line-height: calc(7 * var(--lead)); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-70); --wght: 700; font-weight: 700; margin-bottom: var(--s2); max-width: none; } .start .phone { display: block; /* max-content, so the hit box is the number and not the whole column. Measured at 1280 the block form gave a 416px-wide target for a 240px number, which puts a telephone call under a lot of empty paper. */ width: max-content; max-width: 100%; font-size: clamp(2rem, 6vw, var(--t-num)); line-height: calc(12 * var(--lead)); --opsz: 48; letter-spacing: -0.005em; margin-block: var(--s2) var(--s4); } .addr { display: inline-block; font-family: var(--sans); font-size: var(--t-ui); line-height: calc(8 * var(--lead)); font-variant-numeric: tabular-nums; color: var(--ink); background-color: var(--surface); background-image: var(--paper); background-blend-mode: multiply; border: var(--rule-mid); /* a card, not the stock */ padding: var(--s4) var(--s6); margin-block: var(--s2) var(--s6); max-width: none; } .note { font-size: var(--t-fine); line-height: calc(6 * var(--lead)); --opsz: 12; color: var(--ink-70); margin-top: var(--s12); padding-top: var(--s4); border-top: var(--rule-hair); } /* ========================================================================== DEAD SECTION — VERIFIED 2026-09-03. DO NOT EDIT THIS EXPECTING AN EFFECT. -------------------------------------------------------------------------- Every selector below (.name, .name span, .phone, header .phone, .addr) has ZERO matches in web/index.html, and index.html is the only page that loads this stylesheet — coversheet.html, sample.html and 404.html load plain.css. The live letterhead is .masthead / .wordmark / .place / .tel / .hours, and it is styled in section 14 of this file and in finish.css sections 9 and 14. Consequence, and it is why this marker exists rather than a quiet deletion: SPEC 7.4.1's wordmark — serif caps at opsz 48, +0.02em, a gothic second line at +0.16em — has never once rendered. Anyone who "fixes the masthead" here is editing a comment. It is left in place rather than deleted because the specification it encodes is the only written record of what the wordmark was meant to be, and that is worth more than the 150 lines it costs. Delete it the day the letterhead is redrawn from it. ========================================================================== */ /* ========================================================================== 13. THE COLOPHON ========================================================================== */ footer { padding-block: var(--s16) calc(var(--s16) + env(safe-area-inset-bottom, 0px)); } .name-small { font-family: var(--sans); font-size: var(--t-fine); line-height: calc(6 * var(--lead)); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-45); --wght: 600; font-weight: 600; margin: 0 0 var(--s3); max-width: none; } footer .phone { font-size: var(--t-lead-para); line-height: 56px; --opsz: 28; margin-bottom: var(--s6); } .fine { font-size: var(--t-fine); line-height: calc(6 * var(--lead)); --opsz: 12; color: var(--ink-70); margin-top: var(--s6); max-width: var(--measure); } /* An inline link in running text is still something a thumb has to hit. The hit area is grown with a pseudo-element rather than with padding, so the target clears 56px without inflating the line box and wrecking the rag. */ .fine a { display: inline-block; position: relative; --wght: 600; font-weight: 600; } .fine a::after { content: ""; position: absolute; inset: -16px -8px; /* 24 + 32 = 56px tall */ } /* ========================================================================== 14. >= 840px IS A DIFFERENT MACHINE Not a wider phone. The page becomes a two-column editorial sheet: section headings drop into a margin slug — the running head of a proof sheet — and the reading column holds its measure beside them. Tablet portrait (768) deliberately keeps the touch layout, which is why every multi-column break is at 840 and not at 736. Three sections are allowed to break the slug grid, and each break is a statement rather than an exception: .opening the display line hangs into the margin. It is the page title. .book the object is wider than the slug. It is the flourish. .start the telephone gets the whole sheet. It is where the reader acts. ========================================================================== */ @media (min-width: 52.5rem) { /* 840px */ :root { --wrap: 62rem; --gutter: 2rem; /* 32px */ /* The margin track widens in three steps rather than one. At exactly 840 a 14rem slug left the reading column at 496px — 57 characters, measured — which is below the 60-character floor. 12rem restores it to 60 and the track grows as the sheet does. */ --slug: 12rem; --slug-gap: 3.5rem; --t-h1: 2.75rem; /* 44 / 48 */ --t-h2: 1.875rem; /* held: the slug column is narrow */ } .name { font-size: 2.5rem; } /* 40 */ h1 { line-height: calc(12 * var(--lead)); max-width: 20ch; } /* Only the headings that stay IN the reading column are measured here; the slug headings are measured by their track and are released below. */ h2 { max-width: 18ch; } /* --- the slug grid ---------------------------------------------------- */ .inside > .wrap, .does > .wrap, .doesnt > .wrap, .cost > .wrap, .who > .wrap { display: grid; grid-template-columns: var(--slug) minmax(0, 1fr); column-gap: var(--slug-gap); align-items: start; } .inside > .wrap > *, .does > .wrap > *, .doesnt > .wrap > *, .cost > .wrap > *, .who > .wrap > * { grid-column: 2; } .inside > .wrap > h2, .does > .wrap > h2, .doesnt > .wrap > h2, .cost > .wrap > h2, .who > .wrap > h2 { grid-column: 1; grid-row: 1; margin-bottom: 0; /* The slug is set one optical step smaller than a heading in the flow, because in the margin it is a running head and not a shout. */ font-size: var(--t-h3); line-height: calc(8 * var(--lead)); --opsz: 24; max-width: none; text-wrap: balance; } /* --- the opening: the display line hangs into the margin --------------- */ .opening > .wrap { display: grid; grid-template-columns: var(--slug) minmax(0, 1fr); column-gap: var(--slug-gap); } .opening h1 { grid-column: 1 / -1; } .opening .big { grid-column: 2; } /* --- THE TWO VERTICAL LINES OF THE PAGE ------------------------------- Above 840 the sheet has exactly two left edges and every element is on one of them: the MARGIN line — section slugs, the cover, the page plate the TEXT line — every word of prose, in every section The book was breaking both: a 20rem cover column pushed its prose 120px right of the prose in every other section, so the reading column of the page visibly stepped sideways between "the book" and "look inside it", which are one movement. The cover now takes the margin track, which is also the truer idea — the object IS that section's running head. The page plate is the one thing allowed past the margin line, because it is the thing the section exists to show. */ .book-grid { grid-template-columns: var(--slug) minmax(0, 1fr); column-gap: var(--slug-gap); } .cover { max-width: none; } /* --- looking inside: the plate hangs on the margin line, controls beside */ .inside > .wrap > .reader { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); column-gap: var(--s12); align-items: start; margin-top: var(--s12); } #pageImg { grid-column: 1; grid-row: 1 / span 3; margin-inline: 0; max-width: none; } .page-caption { grid-column: 2; grid-row: 1; text-align: left; margin: 0 0 var(--s6); } /* --- how to begin: the telephone gets the whole sheet ------------------ */ .start > .wrap { display: grid; grid-template-columns: var(--slug) minmax(0, 1fr); column-gap: var(--slug-gap); } .start > .wrap > h2 { grid-column: 1 / -1; font-size: var(--t-h2); max-width: none; } .start > .wrap > .ways{ grid-column: 1 / -1; grid-template-columns: 1fr 1fr; column-gap: var(--s16); } .start > .wrap > .note{ grid-column: 1 / -1; max-width: var(--measure); } /* --- the masthead becomes a letterhead: mark left, contact right ------- */ header > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s16); align-items: end; } .name { grid-column: 1; grid-row: 1; } .place { grid-column: 1; grid-row: 2; margin-bottom: 0; } header .phone { grid-column: 2; grid-row: 1; justify-self: start; margin-bottom: 0; } .hours { grid-column: 2; grid-row: 2; max-width: 34ch; } /* --- the colophon lines up with the masthead -------------------------- */ footer > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s16); align-items: start; } .name-small { grid-column: 1; grid-row: 1; } footer .phone { grid-column: 1; grid-row: 2; margin-bottom: 0; justify-self: start; } /* Definite column, auto row: grid's sparse auto-placement puts the first .fine at row 1 and the second at row 2, so the fine print starts level with the wordmark and stacks. No explicit rows, nothing to overlap. */ .fine { grid-column: 2; margin-top: 0; } .fine + .fine { margin-top: var(--s6); } } @media (min-width: 64rem) { /* 1024px */ :root { --slug: 14rem; } } @media (min-width: 80rem) { /* 1280px */ :root { --gutter: 3rem; /* 48px */ --slug: 16rem; } /* 44 and not 48: at 48 the lockup measures 458px and the masthead's first track is 458px, so it fits with nothing to spare — and a wordmark that wraps is a broken wordmark. */ .name { font-size: 2.75rem; } } /* ========================================================================== 15. REDUCED MOTION — a real static equivalent, not a degraded one There is nothing on this page whose meaning is carried by motion, so the static version is the same page with the 120ms state transitions removed. Nothing disappears and nothing has to be waited for. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 16. PRINT In print the paper IS the paper: every ground is dropped and the sheet the reader loaded becomes the canvas. The ink stays --ink, which is a warm near-black and prints better on 24lb office paper than #000. The controls are removed because they cannot be pressed, and the one real hyperlink prints its address, because a printed link that hides its destination is a defect. ========================================================================== */ @media print { /* §16's first sentence is "in print the paper IS the paper: every ground is dropped", and until this pass it was not: `section` loses to .book, .inside and .doesnt, which carry their grounds on a CLASS in §4, and a class beats an element. Those three are added here because §4 is earlier in the file, so this block wins them on order. .masthead and .colophon are set LATER than this block and cannot be won here at all — they are stood down at the end of the file, with the reason. .post is deliberately left alone: it is a small bordered card, not a band, and dropping its ground would leave its hairline floating. (.addr is a dead selector — the markup uses .post — and is left for the pass that removes the others.) */ html, body, header, footer, section, .addr, .book, .inside, .doesnt { background-color: transparent; background-image: none; } /* THE ONE LINE-HEIGHT ON THIS PAGE THAT MUST BE A RATIO, AND THE PROOF. It was `font-size: 11pt; line-height: 1.5` — 22px, off the lead, and the only leading in this file with neither a calc(N * var(--lead)) form nor a reason beside it. The obvious repair, calc(5 * var(--lead)), was written, printed to PDF and looked at, and it is WRONG: a length inherits as a LENGTH. Every element that does not set its own leading — the lead paragraph at 24px above all — took 20px and printed with its lines overlapping. §16 names this exact trap for captions on screen; print is where it bites hardest, because this block re-sizes body while every other size on the sheet stays on the rem scale and stays larger. So it stays a ratio, and the ratio is put ON the grid instead of being excused: body is 1rem, which is four leads, and 1.5 x 4 = 6 leads exactly — 24px at the default root, 30px with Larger print on, a whole number of leads at any root size, and every descendant that inherits the ratio lands on the grid with it (the 24px lead paragraph gets 36px, nine leads). WHAT IT COSTS, measured rather than assumed: the type goes from 11pt to 12pt (1rem is exactly 12pt) and the line from 22px to 24px, and the document stays at TEN Letter sheets — printed to PDF both ways, with everything else on the page identical, and the pages counted. The sheet count here is set by the 16pt section padding and the plates, not by the running text, which is why 9% more type costs nothing. */ body { font-size: 1rem; line-height: 1.5; } header { border-bottom: 1px solid var(--ink); padding-block: 0 12pt; } footer { padding-block: 12pt; } /* On screen the section padding is the cadence; on paper it is wasted sheets. Measured: the untightened sheet put the opening alone on page 1 with a third of it blank. */ .opening, .book, .inside, .does, .doesnt, .cost, .start, .who { padding-block: 16pt; } .page-count { display: none; } /* The thumb bar was never stood down for paper. It only goes position:static at 52.5rem, and a Letter page box is about 740px wide, so it stayed FIXED and printed as a floating strip across whichever part of the sheet it landed on. It is the same category as .page-count above — chrome that cannot be pressed — and the telephone it carries is printed twice already, in the masthead and in the colophon. Its 6.5rem of body clearance is stood down with it, at the end of this file, because a later body rule there would otherwise beat this block on source order. */ .callbar { display: none; } /* Same category again, and the render is the evidence: the reading strip printed on sheet 1 as "Read this page aloud / Larger print" over a rule — two buttons that cannot be pressed and a note explaining that they work on this device. It belongs to forauthors.js, which is why only its visibility is decided here; that module injects its sheet AFTER this file and sets no display of its own in print, so this holds. */ .b5r-bar { display: none; } .book::before, footer::before { display: none; } h1, h2, h3 { break-after: avoid; } .plain-list li, .way, .book-grid { break-inside: avoid; } /* Everything prints in ink. The oxblood is a screen color; on a mono office printer it renders as a mid gray, which is a contrast loss on the one line of this page that matters most. */ a, .phone, .phone:visited { color: var(--ink); } .fine a::after { content: " (" attr(href) ")"; position: static; inset: auto; font-size: 0.9em; } #pageImg { max-width: 12rem; } .cover { max-width: 12rem; } } /* ========================================================================== 14. THE BRIDGE — the restructured markup -------------------------------------------------------------------------- §1-13 were written against the earlier eight-section page. The markup was then restructured so the BOOK opens the page rather than sitting three sections down, the two lists face each other as one ledger, and the book's facts are set as a register rather than as prose. Everything above still governs — the tokens, the type system, the tooth, the rules, the focus ring are all element-level and carry over untouched. What follows is only the layout those new classes need, deduced from the same metaphor: a proof sheet, ink in the stock, every line structural. ========================================================================== */ /* ---- Global, and overdue: the fallback plates were pushing the document to 872px at 375. An image is never wider than its column. ---------- */ img { max-width: 100%; height: auto; } /* ---- A mount with nothing in it is not a gap ------------------------------ */ .mount:empty { display: none; } /* ---- The skip link was position:static and therefore always on screen, which is the first thing a sighted reader met. ---------------------- */ .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--surface); font-family: var(--sans); --wght: 700; font-size: var(--t-ui); padding: var(--s3) var(--s4); text-decoration: none; } .skip:focus-visible { left: var(--s4); top: var(--s2); } /* ---- The masthead ------------------------------------------------------- MEASURED, AND THE REASON EVERY NUMBER BELOW MOVED: on a 390x844 phone this band was 294px in normal print and 388px in large — 46% of the screen — and with the reading bar under it a visitor met 758px of letterhead before the page said what the business is. The owner's standing complaint about this site is that it is too much before it is anything, and this was where it started. Nothing is removed. The wordmark, the place line, the telephone and the hours are all still here; they are set on the lead instead of being given a loose gap each, and the band's own padding comes down one step. Measured after: 234px normal, 283px large. The 56px touch floor on the telephone is untouched — it is the only figure in this block that is a physical target rather than a typographic one. */ .masthead { background: var(--sink); border-bottom: var(--rule-heavy); padding-block: var(--s4) var(--s3); padding-top: max(var(--s4), env(safe-area-inset-top)); } /* row-gap:0 and a margin on each line, rather than one uniform gap, and the incident is specific: .controls is a script mount that no script ever fills — nothing in assets/js queries it, the reading bar is injected as its own section further down the page. As a grid item it is 0px tall, but a uniform `gap` still bought it a full gap of its own, so an empty div nobody can see was costing 12px of the first screen. Per-line margins price each line for what it is and price the phantom at nothing. */ .masthead-in { display: grid; row-gap: 0; } .masthead-in > .place { margin-top: var(--s1); } .masthead-in > .tel-line { margin-top: var(--s2); } .masthead-in > .hours { margin-top: var(--s1); } /* 30px on 32px lead. It is a two-line lockup at every phone width — the name measures 395.7px at 30px against a 350px column — so the leading is set as a lockup's is, tight, not as prose. The old `line-height:1.15` computed to 34.5px, which §16 had already caught as off the 4px grid; the spans then carried 36px and the lockup stood 72px tall for two lines of a name. */ .wordmark { margin: 0; font-family: var(--serif); --opsz: 30; --wght: 600; font-size: var(--t-h2); line-height: calc(8 * var(--lead)); } .wordmark-b { color: var(--ink-70); } /* 16px on 20px lead. It is a dateline in caps — no descenders to clear except the comma — and §7's 24px lead was set for it as a lone line under a wordmark, not as the second of four rows in a compacted band. It still takes two lines at 390 (419.3px of type in a 350px column, measured, and 16px is this build's hard floor so it cannot be made to fit one). */ .place { margin: 0; font-family: var(--sans); --wght: 600; font-size: var(--t-fine); line-height: calc(5 * var(--lead)); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-45); } .hours { margin: 0; font-family: var(--sans); font-size: var(--t-fine); line-height: calc(6 * var(--lead)); color: var(--ink-70); } .mark-slot { display: none; } /* reserved; no logo is to be invented */ /* What every telephone on the page shares: the accent ink, no underline until it is touched, and the 56px target. The FACE is deliberately not settled here, because the two telephones are not the same object — the display numeral is set in the serif at §15, per §7 ("it is not a gothic UI string"), and the thumb bar keeps the gothic below, because a 22.5px line inside a fixed strip is a label and §2 says the gothic carries labels. The gothic set here is therefore the THUMB BAR'S face, and §15 overrides it for the other two. --wght without font-weight is enough for the variable face, which is what the universal rule in §2 resolves; §15 sets both, so the display numeral still has weight if the webfont never arrives. */ .tel, .tel-big { font-family: var(--sans); --wght: 700; font-size: var(--t-num); font-variant-numeric: tabular-nums lining-nums; color: var(--accent); text-decoration: none; display: inline-block; min-height: 56px; line-height: 56px; } .tel:hover, .tel-big:hover { text-decoration: underline; } .tel-line { margin: 0; } /* ---- The reading controls: available, not dominant ---------------------- These were two large bordered boxes and a paragraph occupying a whole screen before any content. They are utilities. The touch target stays 56px and they stay first in the tab order; only their visual weight drops. The flex children are .b5r-btnrow inside the bar's own .wrap. */ .b5r-bar { border-bottom: var(--rule-hair); } .b5r-btnrow { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: 0; } .b5r-barnote { font-size: var(--t-fine); color: var(--ink-45); max-width: var(--measure); } /* THE DOUBLED CLASS IS DELIBERATE AND THE INCIDENT IS MEASURED. forauthors.js appends its own stylesheet AFTER this file, so at equal specificity it wins: its `.b5r-bar{padding-block:1.1rem}` and `.b5r-barnote{margin:.85rem 0 0}` beat the padding and margin that used to stand in the two rules above. Those declarations READ like a fix and had never once been applied — measured in the browser at 17.6px and 13.6px, not 12px and 8px. Doubling the class costs one selector and makes the file honest about who is in charge of the strip's own air; the sizes and colors inside it stay that module's business, because they are written against its --fs scale and this file has none. Why the strip gets less air than it asked for: it is a utility, not the next thing to do. Its buttons already carry their own 56px targets, so 8px above and below is a band around two controls, not a crush. Measured at 390: the bar was 201.8px tall — 24% of the screen, above the fold, before the page had said anything. Its remaining height is the note's line count, and the note's wording is not this file's to set. */ .b5r-bar.b5r-bar { padding-block: var(--s2); } /* THE BAR'S SPACE, HELD BEFORE THE BAR EXISTS. early.js marks the root "js" before first paint; forauthors.js, deferred, builds the bar later and marks the root "b5r-bar-on" the moment it is in the page. Between the two, this pseudo-element stands where the bar will stand, at the bar's own height: its padding is var(--s2) top and bottom (1rem in all), its row is the 56px button (57 with the rule under it). In Larger print on a phone narrower than about 450px the two labels wrap inside their buttons and the row is 71px; hence the second figure. Without script there is no "js" and no space, so the page with script off is exactly what it was. Measured to the pixel at 320-1280 in both print modes on 2026-09-02 (D46). */ html.js:not(.b5r-bar-on) main::before { content: ""; display: block; height: calc(1rem + 57px); } html.js.large:not(.b5r-bar-on) main::before { height: calc(1rem + 72px); } @media (min-width: 28.125rem) { html.js.large:not(.b5r-bar-on) main::before { height: calc(1rem + 57px); } } @media print { html.js main::before { display: none; } } .b5r-barnote.b5r-barnote { margin: var(--s1) 0 0; } .b5r-count { font-family: var(--sans); font-size: var(--t-fine); color: var(--ink-45); } .controls { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; } .b5r-btn { font-family: var(--sans); --wght: 600; font-size: var(--t-ui); min-height: 56px; padding: 0 var(--s4); cursor: pointer; background: var(--surface); color: var(--ink); border: var(--rule-mid); } /* The bar's own two utilities are quieter than a page action: no box, a rule under the label, so they read as tools rather than as the next thing to do. */ .b5r-bar .b5r-btnrow:first-child .b5r-btn { background: none; border: 0; border-bottom: var(--rule-mid); padding-inline: var(--s1); color: var(--accent); } .b5r-bar .b5r-btnrow:first-child .b5r-btn:hover { border-bottom-color: var(--accent); } .b5r-btn:hover { background: var(--canvas); } /* ---- The hero, and the arithmetic that decided its order ----------------- On a phone this grid is one column, so whatever is above the h1 is measured in screens the reader has to travel before the page says what it is. That is the owner's standing complaint, and it was worst in the mode built to help. Measured, h1 top offset in screens, before this pass: 320x568 normal 1.69 LARGE 2.05 390x844 normal 1.00 LARGE 1.40 430x932 normal 0.88 LARGE 1.24 THE PROOF THAT SIZE ALONE COULD NOT FIX IT. At 320x568 with Larger print on, the masthead measures 363px and the reading bar 244px. That is 607px — 1.07 screens — before .hero begins, and neither number is available: nothing may be removed from the masthead and the bar belongs to another module. A 1.2 screen budget on a 568px screen is 681.6px, so 74.6px remain. The credit line under the cover is 90px on its own at that type size, before any picture at all. No cover of any width fits above the h1 there. Shrinking the jacket cannot close a gap that is already negative. SO THE ORDER CHANGES, AND ONLY ON A PHONE. Below 840 the sentence, the lead and the telephone come first and the book follows immediately under them. Nothing is deleted, nothing moves in the DOM, and the source order — figure, then heading — is what a screen reader still gets, unchanged. The jacket holds no focusable element, so the tab order does not diverge either. Above 840 the two stand side by side in their own columns and the order is reset, because there the book is not in front of anything. Measured after: 320 normal 0.84 / LARGE 1.08, 390 normal 0.45 / LARGE 0.69, 430 normal 0.38 / LARGE 0.59. At 390x844 the cover is still on the first screen — under the sentence that explains it, which is the argument the page was trying to make anyway. */ .hero { padding-block: var(--s6) var(--s12); } /* 24 and not 32: on a phone this gap is not a gutter between two things standing side by side, it is air between the telephone and the book. At 840 the two do stand side by side and the gap goes back to 64 (below), where it is doing the job it was written for. */ .hero-in { display: grid; gap: var(--s6); } .hero-in > .hero-say { order: -1; } /* reset at 840, below */ .jacket { margin: 0; } /* 16rem, CAPPED IN vw, and the vw term is the point. A photograph is not type. 16rem is a rem, so Larger print was making the cover 25% BIGGER for a reader who had asked for bigger WORDS: measured, 256 x 378 became 320 x 472 at 390 and 430, and the page got a quarter longer for it. Screen width is a physical constraint and does not scale with a type preference — the same sentence the telephone's cap is derived from in §15, and the same reason the 480px breakpoint below is deliberately left in rem so it does NOT move. 66vw is 16rem expressed as a share of the 390px screen this file measures everything against (256/390 = 65.6%), so normal print is unchanged at 390 and above and only the 320px phone tightens — which is exactly where a 256px picture in a 280px column was too much of the glass. */ .jacket .cover { display: block; width: 100%; max-width: min(16rem, 66vw); margin-inline: auto; border: var(--rule-mid); } .jacket-cap { font-family: var(--sans); font-size: var(--t-fine); color: var(--ink-45); text-align: center; margin: var(--s2) auto 0; max-width: 26rem; } .hero h1 { max-width: 18ch; } .hero-say { max-width: var(--measure-lead); font-size: var(--t-lead-para); color: var(--ink-70); } /* ---- The register: the book's own facts, set as data -------------------- */ .record { margin: var(--s8) 0 0; display: grid; gap: 0; max-width: 34rem; } .record-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s4); align-items: baseline; padding: var(--s3) 0; border-bottom: var(--rule-hair); } .record-row:last-child { border-bottom: 0; } .record dt { font-family: var(--sans); font-size: var(--t-fine); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-45); margin: 0; } .record dd { margin: 0; text-align: right; font-size: var(--t-body); } .record .num { font-family: var(--sans); font-variant-numeric: tabular-nums lining-nums; } /* ---- The ledger: the two lists FACING, not sequential -------------------- */ .ledger { display: grid; gap: var(--s12); grid-template-columns: 1fr; margin-top: var(--s8); } .ledger-col h3 { padding-bottom: var(--s2); border-bottom: var(--rule-heavy); margin-bottom: var(--s2); } .ledger-col ul { list-style: none; margin: 0; padding: 0; } .ledger-col li { padding: var(--s3) 0; border-bottom: var(--rule-hair); } .ledger-col li:last-child { border-bottom: 0; } .nots { color: var(--ink-70); } /* ---- Eyebrow ------------------------------------------------------------ */ .eyebrow { font-family: var(--sans); --wght: 700; font-size: var(--t-fine); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-45); margin: 0 0 var(--s3); } /* ---- Beginning: the address is a card on raised stock -------------------- */ .ways { display: grid; gap: var(--s12); grid-template-columns: 1fr; } .post { font-style: normal; font-family: var(--sans); font-size: var(--t-ui); line-height: 1.7; background: var(--surface); border: var(--rule-mid); padding: var(--s4); display: inline-block; } /* ---- The colophon ------------------------------------------------------- */ .colophon { background: var(--sink); border-top: var(--rule-heavy); padding-block: var(--s12); padding-bottom: max(var(--s12), env(safe-area-inset-bottom)); } .wordmark-small { font-family: var(--sans); font-size: var(--t-fine); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-45); } .fine { font-size: var(--t-fine); color: var(--ink-70); max-width: var(--measure); } /* ---- The thumb bar: the telephone, always reachable on a phone ----------- */ .callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--sink); border-top: var(--rule-heavy); padding: var(--s2) var(--gutter); padding-bottom: max(var(--s2), env(safe-area-inset-bottom)); } .callbar-tel { display: flex; align-items: center; justify-content: center; /* WRAP. At Chrome's 200% font setting "TELEPHONE THE OFFICE" and "(615) 398-1776" are 374px of unbreakable line on a 320px phone, and a nowrap flex row made the fixed bar itself 414px wide — the single widest thing on the page and the reason the whole document scrolled sideways. Two lines is the right answer at that size; at every normal size it still fits on one and this changes nothing. */ flex-wrap: wrap; row-gap: var(--s1); gap: var(--s3); min-height: 56px; text-decoration: none; font-family: var(--sans); --wght: 700; font-size: var(--t-ui); color: var(--accent); } .callbar-num { font-variant-numeric: tabular-nums lining-nums; } body { padding-bottom: 5rem; } /* the bar never covers the colophon */ /* THE BAR IS FIXED AT EVERY WIDTH. Owner, 2026-09-04: "also make the footer persistent with the phone number". It used to drop into the flow above 52.5rem and become an ordinary line in the colophon — measured on a 1280 window it sat 3,978px below the fold, which is not a persistent anything. A telephone-first business whose telephone number is only reachable by scrolling to the bottom has the number in the wrong place, and that is exactly what the desktop layout was doing. body keeps its padding-bottom at every width now, so the bar never covers the last line of the colophon. The yield behavior in motion.css §3 is unchanged and still applies only below 52.5rem: on a phone 74px of an 844px screen is 9% of the reader's glass and it is right that it gets out of the way while they scroll; on a sheet, 56px of 900 is not worth hiding. */ @media (min-width: 52.5rem) { .callbar { padding-block: var(--s1); } } /* ---- The feature sections the reading tools inject ---------------------- They were 4.8 of 13.9 screens — each longer than the book. The prose is theirs; the air around it is the sheet's, and the sheet is tighter. */ .b5r-sec { padding-block: var(--s12); border-top: var(--rule-hair); } .b5r-sec p { max-width: var(--measure); } /* Above a 480px screen the jacket is no longer standing in front of the opening sentence on a 844px-tall phone, so it takes its full 20rem back. The query is in rem and rem in a media query resolves against the INITIAL font size, never the root's — so this breakpoint is 480px in both print modes and does not move when the reader asks for larger type. */ @media (min-width: 30rem) { .jacket .cover { max-width: min(20rem, 66vw); } } /* ---- >= 840px is a different machine, not a wider phone (owner rule) ----- */ @media (min-width: 52.5rem) { .masthead-in { grid-template-columns: 1fr auto; align-items: end; } /* The band is only half a phone screen on a phone. Here it is a letterhead across a 62rem sheet, so it gets its air back. */ .masthead { padding-block: var(--s6) var(--s4); padding-top: max(var(--s6), env(safe-area-inset-top)); } .hero { padding-block: var(--s16) var(--s12); } /* center, not start: with the column top-aligned the text ended at the telephone with ~250px of empty ground beneath while the painting ran on to 800px (taste pass, D45). Centerd against the painting the two read as one composed screen, and nothing else about the hero changes. */ .hero-in { grid-template-columns: 20rem 1fr; align-items: center; gap: var(--s16); } /* The phone's reordering is undone here, and it has to be explicit: with order:-1 still standing, auto-placement drops .hero-say into the 20rem cover track and puts the book in the reading column. */ .hero-in > .hero-say { order: 0; } .jacket .cover { max-width: 100%; } .ledger { grid-template-columns: 1fr 1fr; gap: var(--s16); } .ways { grid-template-columns: 1fr 1fr; gap: var(--s16); } } /* ========================================================================== 15. LARGER PRINT — the overflow it caused, and why it mattered most -------------------------------------------------------------------------- With Larger print on at 375px the document measured 446px against a 375px viewport, and body{overflow-x:hidden} CLIPPED the difference instead of letting it scroll. Seventy-one pixels — including the end of both ISBNs and the last digits of the telephone number — were unreachable by any means. The feature built for the reader with poor eyesight was the one feature hiding content from them, and hiding it silently. It presented as three separate offenders. It was one, with two victims. CAUSE: .tel is set as a display numeral at a FIXED var(--t-num). Under Larger print that resolves to 50px, at which "(615) 398-1776" has a max-content width of 414px. .masthead-in is a grid, and a grid track is floored by its item's minimum — so the 414px numeral sized the track, the track stretched every other masthead child to 414px, and the document went with it. The callbar then measured 440px because a fixed element sizes to a viewport that the overflow had already widened. Neither was a bug of its own; both disappear when the numeral fits. §7 line 828 had already solved this exact problem for another display numeral with a fluid clamp. This rule simply never received the same treatment. Screen width is a physical constraint and does not scale with a type preference, so the cap is in vw while the floor stays in rem — Larger print still enlarges it, up to what the glass can actually hold. -------------------------------------------------------------------------- AND THEN THE CLAMP ITSELF WAS THE BUG. Written as clamp(1.75rem, 9vw, var(--t-num)) the MIDDLE term won on every phone. On a 390px screen 9vw is 35.1px, which is under --t-num in normal print (40px) AND under it in large print (50px), so the same middle term was selected in both modes and the number did not move. Measured on a 390x844 phone, before: body paragraph 24px -> 30px with Larger print on the telephone 35.1px -> 35.1px UNCHANGED The one control built for the reader who cannot see well was leaving the most important element on the page exactly as it found it. The shape below says the three things in the right order: the reader's preference SETS the size (--t-num, in rem), the glass CAPS it (vw), and a floor keeps it a display numeral on the narrowest phone. AND THEN THE CAP WAS NOT THE WHOLE FAULT EITHER. The shape above is right; the FACE was wrong, and the face is what set the width. Measured, normal -> Larger print, with the 9.5vw cap in place: 320 30.40 -> 30.40 +0% 390 37.05 -> 37.05 +0% 430 40.00 -> 40.85 +2% 1280 40.00 -> 50.00 +25% Every other element on the page moved +25%. The reason is arithmetic, not clamp arithmetic: "(615) 398-1776" set in Public Sans at wght 700 with tabular figures is 8.2881em wide (.tel sets `tabular-nums lining-nums`, so every digit is one width and any number of this shape measures the same — these figures were taken on the placeholder the site carried before the real number arrived, and they transfer exactly), and the column it has to fit is the viewport less two --gutter — which is in rem, so LARGER PRINT NARROWS THE COLUMN (390: 350 -> 340; 320: 280 -> 270) at the same moment the type wants to grow. At 390 the widest the string could be in large print was 41.0px (340 / 8.2881) against a 40px normal-print ceiling. The whole prize was one pixel. Raising the cap bought that pixel at 390 and overflowed 320. THE FIX IS THE ONE §7 ALREADY SPECIFIES, AND IT IS A CONTRADICTION REMOVED RATHER THAN A DESIGN DECISION TAKEN. §7 says the telephone "is a display numeral, and it is set as one — Serif, tabular, at the size a price would be set. It is the most important thing on the page, so it is not a gothic UI string." §2 says the gothic "carries labels and nothing else". It was this §14 bridge that set the number in Public Sans, against both. Measured in this build, the same string, all at 16 / 40 / 50 / 100px and agreeing to four places: Public Sans wght 700 8.2881 em Source Serif 4 wght 500, opsz 40 6.1417 em 25.9% narrower Source Serif 4 wght 500, opsz 32 6.2217 em opsz 40 because that is the optical size h1 is set at, and this numeral runs 40-50px. font-variant-numeric is kept but measured to be a no-op here: in Source Serif 4 '1111111111' and '0000000000' both measure 4.9441em with and without tabular-nums, so the figures are already fixed-width. U+2011, the non-breaking hyphen the markup actually uses, is a real glyph in both subsets — 0.3063em in the serif, identical to the plain hyphen, and not the 0.6002em .notdef box. THE CAP RE-DERIVED FROM THE SERIF. The binding case is still the narrowest phone in large print: fs * 6.1417 <= vw - 50, so the cap in vw may not exceed 100 * 270 / (6.1417 * 320) = 13.74vw at 320. 13vw is taken, which leaves 5.4% rather than nothing, and it is the ONLY width where the cap still bites at all: 320 normal 40.00 -> 245.7 in 280 320 large 41.60 -> 255.5 in 270 390 normal 40.00 -> 245.7 in 350 390 large 50.00 -> 307.1 in 340 430 normal 40.00 -> 245.7 in 390 430 large 50.00 -> 307.1 in 380 1280 normal 40.00 -> 245.7 in 896 1280 large 50.00 -> 307.1 in 1120 So Larger print now moves it +25% at 390, 430 and 1280 — the full step — and +4% at 320, where 43.96px is the arithmetic ceiling of the glass and nothing can do better. One line at every width; nothing overflows. The 1.5rem floor is kept and is now inert: 13vw only falls below 30px (1.5rem in large print) under a 231px viewport, and below 24px under 185px. It is a floor for a screen this page will never meet, and it stays because a display numeral should have one. THE EXPOSURE, SAID RATHER THAN LEFT TO BE FOUND: the cap is derived from Source Serif 4, not from its fallbacks, exactly as the old cap was derived from Public Sans and not from Helvetica Neue. If sourceserif4-latin.woff2 fails to arrive, Charter measures 7.2706em and Georgia 6.7452em, and at 320 in large print the string would run past the column. It scrolls rather than clips — that is what body{overflow-x:auto} at the end of this section is for — and it needs the narrowest phone, the large-print mode and a failed preload at once. Both faces are self-hosted and preloaded. ========================================================================== */ /* The display telephone only. .callbar-tel is excluded here as it was before: the thumb bar is a UI strip, not a display numeral, and it sets its own face and size below. */ .tel:not(.callbar-tel), .tel-big { font-family: var(--serif); --opsz: 40; /* h1's optical size */ --wght: 500; font-weight: 500; /* so Charter bolds too */ font-size: max(1.5rem, min(var(--t-num), 13vw)); } /* The thumb bar carries .tel too, for its color and its 56px target, but it is not a display numeral — it is a 22.5px line inside a fixed bar 375px wide. It must be excluded above, or the clamp sizes it at 35px and the last digits leave the bar. The label and the number then wrap as a pair rather than clipping: two readable lines beat one truncated telephone number. */ .callbar .callbar-tel { font-size: var(--t-ui); flex-direction: column; gap: 0; justify-content: center; /* A bare 1.15 stood here and it was the only line-height left in this file that was a raw ratio. It computed to 20.7px on the anchor and, because a ratio INHERITS as a ratio, it also put the label on 18.4 and the number on 26.91 — three of the offenders the §1 probe reports. Each line is priced on the lead instead. 5 + 7 = 48px of stacked text inside a 56px target, so the strip's height is still set by the touch floor and not by the type, which is what the 6.5rem body clearance below was measured against. */ line-height: calc(5 * var(--lead)); } /* NO CONTROL MAY OUTRUN THE LINE. The letter's fields are width:100%, but a control outside that form gets no width rule at all and falls back to its intrinsic size — roughly twenty characters, which at Chrome's 200% font setting is 372px inside a 315px column. That is what put the reading bar's date field 48px past the right edge of a 360px phone. A max-width costs nothing at any normal size and cannot make a control narrower than its box. */ input, select, textarea, button { max-width: 100%; } .callbar .callbar-lbl { /* min-width:0 BECAUSE IT IS A FLEX ITEM. A flex item's min-width defaults to `auto`, which floors it at its min-content width — so "TELEPHONE THE OFFICE" at 32px type held the bar open at 366px on a 320px phone even after the row was allowed to wrap, and white-space:normal could not help, because the item was never given a width small enough to wrap inside. This is the standard flexbox floor and it changes nothing at any size where the label fits. */ min-width: 0; /* AND overflow-wrap:anywhere, WHICH IS THE ONE THAT ACTUALLY DOES IT. min-width:0 lets a flex item shrink, but nothing lets it go below its own min-content width, and for "TELEPHONE THE OFFICE" at 32px type that is the whole phrase — 350px inside a 320px phone, which held the fixed bar open at 390px and was the last thing keeping a horizontal scrollbar on the page. overflow-wrap:anywhere is the only property that lowers min-content itself. It cannot bind at any size where the phrase already fits on its line. */ overflow-wrap: anywhere; font-size: var(--t-fine); --wght: 500; color: var(--ink-70); letter-spacing: .06em; text-transform: uppercase; line-height: calc(5 * var(--lead)); /* 20 on 16 */ } /* THE SAME FAULT AS THE DISPLAY NUMERAL, one bar lower down. A clamp whose MIDDLE term is in vw is mode-independent, so it won in both print modes and the number stopped answering the reader's preference: measured 25.80px at 430x932 with Larger print both OFF and ON, while 166px of its own column sat unused. The preference sets the size; vw is only a backstop that must not bind on the phones this is built for. "(615) 398-1776" measures 8.2884em in Public Sans, so the full large-print 1.625rem = 32.5px needs 269.4px and the narrowest supported column (a 320px screen in Larger print) is 270px — it fits everywhere, and 10vw only intervenes below that. */ .callbar .callbar-num { font-size: min(1.625rem, 10vw); line-height: calc(7 * var(--lead)); /* 28 on 20-26 */ } /* Letting the bar wrap freely made it 134px tall — one sixth of an iPhone screen, permanently, and taller than the 5rem body clearance meant to keep it off the colophon. A fixed bar has to be measured against the screen it sits on, not just against its own contents. Stacked and bounded it is ~90px, and the clearance below is set from that. */ body { padding-bottom: 6.5rem; } /* 5rem above 52.5rem, NOT 0. This was zero for as long as the bar dropped into the flow up here; now that it is fixed at every width (see the note at the .callbar breakpoint) a clearance of nothing means the bar sits on top of the last line of the colophon. Measured on the built page at 1280: bar 66px, so 80px of clearance, and the colophon's own 48px of bottom padding sits inside it rather than under it. Owner's ruling, 2026-09-04. */ @media (min-width: 52.5rem) { body { padding-bottom: 5rem; } } /* ---- THE PRINT STAND-DOWNS THAT HAVE TO COME LAST ----------------------- §16 is the print block, and it sits ~450 lines above this point — which means every rule written after it beats it at equal specificity, on order. Three rules in §16 were therefore dead, and the only way to find that out was to print the page to PDF and look at it: body{padding-bottom:0} lost to the 6.5rem clearance six lines up. The clearance exists only to hold the fixed thumb bar off the colophon, and §16 removes that bar from paper, so on paper it is 6.5rem of nothing. .masthead / .colophon lost to their own §14 background rules, so the two tinted bands printed at full width — solid ink across the top of sheet one and the bottom of sheet ten, on a page whose stated print rule is that the paper IS the paper. They are re-stated here, where nothing follows them. This is the same class of fault as the dead .page-controls block §9 used to carry: a rule that reads like a fix and has never once applied. */ @media print { body { padding-bottom: 0; } .masthead, .colophon { background-color: transparent; background-image: none; } } /* The structural guard, so no single item can size the masthead again. */ .masthead-in > * { min-width: 0; } /* Second victim, same class of fault: a grid column of `1fr` will not shrink below its content's minimum, and an ISBN is one unbreakable 265px word. Below 30rem the register stacks — an ISBN and its label do not belong on one 375px line at 25px type. */ .record-row { grid-template-columns: minmax(0, 1fr) auto; } .record dd { overflow-wrap: anywhere; } @media (max-width: 30rem) { .record-row { grid-template-columns: 1fr; gap: var(--s1); } .record dd { text-align: left; } } /* A backstop, not a fix. Nothing should reach it now, but overflow must scroll rather than vanish: clipping is the only reason the fault above survived a visual check. */ body { overflow-x: auto; } /* ========================================================================== 16. THE BASELINE GRID, WHERE IT HAD BEEN LEFT UNSET -------------------------------------------------------------------------- §1 sets the law: every line-height is `calc(N * var(--lead))`, and a check reports any computed value that is not a multiple of the lead. An element that simply omits line-height does not inherit the RATIO — it inherits the computed PIXEL VALUE of the body, which is 40px. On 20px body text that is the intended 1.6; on a 20px caption it lands at 2.0, and the caption under the cover painting was noticeably airier than the paragraph beside it. Small secondary text — a caption, an eyebrow, a note — should be TIGHTER than body text, not looser. book.js already sets its own captions at 1.45. These are brought onto the grid at 6 lead units (1.5 at the body size). ========================================================================== */ .jacket-cap, .eyebrow, .b5r-barnote { line-height: calc(6 * var(--lead)); } /* The wordmark was setting a bare 1.15 multiplier and computing to 43.125px, off the grid this stylesheet exists to hold. Brought to 9 units then, and to 8 when the masthead was compacted — the spans are what actually build the line boxes, so a lockup leading set on the

alone would have been overruled by the 9 units sitting here and the band would not have moved. */ .wordmark-a, .wordmark-b { line-height: calc(8 * var(--lead)); } /* The telephone's 56px was the TOUCH TARGET expressed as a line-height, which is both off the grid and the wrong property for the job. min-height already guarantees the target; the line box goes back on the grid at 11 units. */ .tel, .tel-big { line-height: calc(11 * var(--lead)); } /* NOT FIXED HERE, on purpose: .b5r-btn, .b5r-lead and .b5r-count compute off the grid too, but they belong to forauthors.js, which injects its own sheet AFTER this one and runs its own --fs scale. A rule here loses to it at equal specificity, so writing one would leave dead CSS in this file claiming a fix it never made. They are UI chrome with their own min-height targets, and the grid law is about the rhythm of running text. If they are ever brought onto the grid it belongs in that module, not in an override from this one. */ /* ========================================================================== 17. THE PATH, THE THREE TIERS, AND THE FENCE (2026-09-01) -------------------------------------------------------------------------- The owner's direction, verbatim: "a proper publishing company website ... I don't want to have gimmicks ... three tiers of payment only." The true-size drawing and the typesetting panel went; in their place is what an author actually needs before telephoning: what happens, in order; what it costs, in three plain columns; and what the press will not do. Everything is on the lead, in the existing tokens, and there is no ground, rule or flourish here that the ledger did not already carry. ========================================================================== */ /* ---- The path: numbered, one step a line -------------------------------- */ .steps { margin: var(--s8) 0 0; padding: 0 0 0 1.6em; max-width: var(--measure); } .steps li { padding: var(--s3) 0; border-bottom: var(--rule-hair); } .steps li:last-child { border-bottom: 0; } .steps li::marker { font-family: var(--sans); --wght: 700; font-weight: 700; color: var(--ink-45); font-variant-numeric: tabular-nums; } .steps b { --wght: 650; font-weight: 650; } /* ---- The tiers: three panels on raised stock ------------------------------ */ .tiers { background-color: var(--surface); } .tier-grid { display: grid; grid-template-columns: 1fr; gap: var(--s8); margin-top: var(--s8); } .tier { margin: 0; padding: var(--s6) var(--s6) var(--s8); background: var(--canvas); border: var(--rule-mid); } .tier h3 { margin: 0; font-family: var(--serif); --opsz: 24; font-size: var(--t-h3, 1.4rem); line-height: calc(8 * var(--lead)); max-width: none; } .price { margin: var(--s2) 0 var(--s4); font-family: var(--sans); --wght: 700; font-weight: 700; font-size: var(--t-num); line-height: calc(12 * var(--lead)); color: var(--accent); font-variant-numeric: tabular-nums lining-nums; } .tier-say { color: var(--ink-70); } .tier .plain-list { list-style: none; margin: var(--s4) 0 0; padding: 0; } .tier .plain-list li { padding: var(--s2) 0; border-top: var(--rule-hair); } /* .plain-list li is a two-track grid — a mark, then the text — and a row with no ::before content drops its text into the 24px MARK track, which wrapped every tier item one word to a line on a phone. The fence never showed it, because .doesnt already draws an en-dash there. The tiers take the same mark, so the grid is used as it was designed rather than fought. */ .tier .plain-list li::before { content: "\2013"; } @supports (content: "a" / "b") { .tier .plain-list li::before { content: "\2013" / ""; } } /* ---- What costs extra: a small register, like the book's own ---------------- */ .extras { margin: var(--s12) 0 var(--s8); display: grid; gap: 0; max-width: var(--measure); } .extras-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4); padding: var(--s3) 0; border-bottom: var(--rule-hair); align-items: baseline; } .extras-row:last-child { border-bottom: 0; } .extras dt { font-family: var(--sans); font-size: var(--t-fine); color: var(--ink-70); line-height: calc(6 * var(--lead)); } .extras dd { margin: 0; text-align: right; font-family: var(--sans); font-variant-numeric: tabular-nums lining-nums; } @media (max-width: 30rem) { .extras-row { grid-template-columns: 1fr; gap: var(--s1); } .extras dd { text-align: left; } } /* ---- The fence, standing alone, on the recessed ground it always had ----- */ .doesnt .plain-list { list-style: none; margin: var(--s8) 0 0; padding: 0; max-width: var(--measure); } .doesnt .plain-list li { padding: var(--s3) 0; border-bottom: var(--rule-hair); } .doesnt .plain-list li:last-child { border-bottom: 0; } /* ---- >= 840px: three columns, the fence and the path in the reading column */ @media (min-width: 52.5rem) { .tier-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s8); } .tier h3 { min-height: calc(16 * var(--lead)); } .path > .wrap, .tiers > .wrap { display: grid; grid-template-columns: var(--slug) minmax(0, 1fr); column-gap: var(--slug-gap); align-items: start; } .path > .wrap > *, .tiers > .wrap > * { grid-column: 2; } .path > .wrap > h2, .tiers > .wrap > h2 { grid-column: 1; max-width: none; } .tiers > .wrap > .tier-grid { grid-column: 1 / -1; } .tiers > .wrap > .extras, .tiers > .wrap > p { grid-column: 2; } } /* ========================================================================== 18. THE OWNER'S SECOND PASS (2026-09-01): stations, options, a receipt, a fence you touch, a letter, and the reader's own book -------------------------------------------------------------------------- "Utilize interactive visuals as much as possible ... late 1800s ... not corny." The period cue is confined to three things a trade house of that date actually printed: a numbered line of stations, a receipt with dotted leaders, and a notice whose items open. Everything else is the sheet. ========================================================================== */ /* ---- The path as a line of stations (path.js) ---------------------------- */ .stations { position: relative; margin: var(--s8) 0 0; padding: 0; list-style: none; max-width: var(--measure); } .stations::before { content: ""; position: absolute; left: 1.15rem; top: 1.4rem; bottom: 1.4rem; border-left: var(--rule-mid); } .station { position: relative; margin: 0; } .station-btn { display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); column-gap: var(--s4); align-items: baseline; width: 100%; text-align: left; cursor: pointer; background: none; border: 0; padding: var(--s3) 0; color: var(--ink); font: inherit; line-height: calc(8 * var(--lead)); min-height: 56px; } .station-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .station-no { position: relative; z-index: 1; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; align-self: center; font-family: var(--serif); font-variant-numeric: tabular-nums; --wght: 600; font-weight: 600; background: var(--canvas); border: var(--rule-mid); color: var(--ink-70); transition: background var(--t-state), color var(--t-state), border-color var(--t-state); } .station-label { --wght: 650; font-weight: 650; } /* A sibling of the button, not a grid child, so it is indented to the text track by hand: the number's 2.3rem plus the column gap. Without this it sat at the left edge, printed across the station line. */ .station-say { margin: 0 0 var(--s3) calc(2.3rem + var(--s4)); padding: 0 0 var(--s3); color: var(--ink-70); border-bottom: var(--rule-hair); max-width: var(--measure); } .station[hidden] { display: block; } /* the list item itself never hides */ .station:not(.is-open) .station-say { display: none; } .station.is-open .station-no { background: var(--ink); color: var(--surface); border-color: var(--ink); } .station.is-done .station-no { background: var(--sink); } .station-nav { display: flex; gap: var(--s3); margin-top: var(--s4); } @media (prefers-reduced-motion: reduce) { .station-no { transition: none; } } /* ---- Three options, numbered, and the receipt beneath them --------------- */ .options { background-color: var(--surface); } .option-grid { list-style: none; margin: var(--s8) 0 0; padding: 0; display: grid; gap: var(--s8); grid-template-columns: 1fr; } .option { margin: 0; padding: var(--s6) var(--s6) var(--s8); background: var(--canvas); border: var(--rule-mid); } .opt-no { margin: 0; font-family: var(--sans); --wght: 700; font-weight: 700; font-size: var(--t-fine); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-45); line-height: calc(6 * var(--lead)); } .option h3 { margin: var(--s1) 0 0; font-family: var(--serif); --opsz: 24; font-size: var(--t-h3); line-height: calc(8 * var(--lead)); max-width: none; } .opt-say { color: var(--ink-70); } .option .plain-list { list-style: none; margin: var(--s4) 0 0; padding: 0; border-top: 0; } .option .plain-list li { padding: var(--s2) 0; border-top: var(--rule-hair); border-bottom: 0; line-height: calc(7 * var(--lead)); } .option .plain-list li::before { content: "\2013"; } @supports (content: "a" / "b") { .option .plain-list li::before { content: "\2013" / ""; } } .receipt { margin: var(--s12) auto 0; max-width: 34rem; padding: var(--s6) var(--s6) var(--s8); background: var(--canvas); border: var(--rule-mid); border-bottom: 2px dashed var(--ink-30); } .receipt-head { margin: 0 0 var(--s4); text-align: center; font-family: var(--sans); --wght: 700; font-weight: 700; font-size: var(--t-ui); letter-spacing: .12em; text-transform: uppercase; line-height: calc(7 * var(--lead)); } .receipt-lines { margin: 0; } .receipt-lines > div { display: flex; align-items: baseline; gap: var(--s2); padding: var(--s2) 0; line-height: calc(7 * var(--lead)); } .receipt-lines dt { flex: 0 1 auto; } .receipt-lines > div::after { content: ""; flex: 1 1 auto; order: 1; margin: 0 .25em; border-bottom: 2px dotted var(--ink-30); transform: translateY(-.35em); } .receipt-lines dd { order: 2; margin: 0; flex: 0 0 auto; font-family: var(--sans); font-variant-numeric: tabular-nums lining-nums; } .receipt-terms { margin: var(--s6) 0 0; padding-top: var(--s4); border-top: var(--rule-hair); font-size: var(--t-fine); line-height: calc(6 * var(--lead)); color: var(--ink-70); max-width: none; } /* ---- The fence: six lines, the reason on touch ---------------------------- */ .nots { margin: var(--s8) 0 0; max-width: var(--measure); border-top: var(--rule-hair); } .no { border-bottom: var(--rule-hair); } .no summary { list-style: none; cursor: pointer; padding: var(--s3) 0; min-height: 56px; display: grid; grid-template-columns: var(--s6) minmax(0, 1fr); column-gap: var(--s3); align-items: baseline; line-height: calc(8 * var(--lead)); } .no summary::-webkit-details-marker { display: none; } .no summary::before { content: "\2013"; text-align: right; font-family: var(--serif); color: var(--ink-45); --wght: 500; font-weight: 500; } .no[open] summary::before { content: "\2014"; color: var(--ink); } .no summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .no p { margin: 0 0 var(--s4) calc(var(--s6) + var(--s3)); color: var(--ink-70); } /* ---- The letter and the list --------------------------------------------- */ .letter { max-width: var(--measure); margin: var(--s8) 0 0; } .letter label { display: block; margin: 0 0 var(--s4); font-family: var(--sans); --wght: 700; font-weight: 700; font-size: var(--t-ui); line-height: calc(7 * var(--lead)); } .letter input, .letter textarea { display: block; width: 100%; margin-top: var(--s1); font: inherit; font-family: var(--serif); font-size: var(--t-body); line-height: calc(8 * var(--lead)); color: var(--ink); background: var(--surface); border: 2px solid var(--ink); border-radius: 0; padding: var(--s2) var(--s3); min-height: 56px; } .letter textarea { min-height: 9rem; resize: vertical; } .letter .do { font-family: var(--sans); --wght: 700; font-weight: 700; font-size: var(--t-ui); min-height: 56px; padding: var(--s2) var(--s8); cursor: pointer; border-radius: 0; background: var(--ink); color: var(--surface); border: 2px solid var(--ink); } .letter .do:hover { background: var(--accent); border-color: var(--accent); } .letter .do:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .form-say { margin: var(--s3) 0 0; color: var(--ink-70); min-height: calc(8 * var(--lead)); } .list { margin-top: var(--s12); padding-top: var(--s8); border-top: var(--rule-hair); } .list-say { color: var(--ink-70); } /* What becomes of what the forms collect. It sits under BOTH forms, so it is separated from them by the same hairline the receipt uses for its terms — the reader should read it as a footnote to the section, not as part of the list form it happens to follow. Fine size, --ink-70: present, not shouted. Added on the owner's ruling, 2026-09-03 (NEEDS_THE_OWNER.md 0i). */ .form-privacy { grid-column: 1 / -1; margin: var(--s6) 0 0; padding-top: var(--s4); border-top: var(--rule-hair); font-size: var(--t-fine); line-height: calc(6 * var(--lead)); color: var(--ink-70); max-width: var(--measure); } /* grid-column, because .write .wrap is a two-column grid above 52.5rem and this paragraph dropped into the second column: 252px wide at 1280, about thirty characters a line, hanging under the mailing-list form as though it belonged to it. It is a footnote to BOTH forms and spans them, exactly as the heading does. Measured before: 252px. After: 536. */ /* ---- Your book, as it would be (mockup.js) --------------------------------- */ .mock { display: grid; gap: var(--s8); margin-top: var(--s8); } .mock-form label { display: block; margin: 0 0 var(--s4); font-family: var(--sans); --wght: 700; font-weight: 700; font-size: var(--t-ui); line-height: calc(7 * var(--lead)); } .mock-form input, .mock-form select { display: block; width: 100%; max-width: 26rem; margin-top: var(--s1); font: inherit; font-size: var(--t-body); line-height: calc(8 * var(--lead)); color: var(--ink); background: var(--surface); border: 2px solid var(--ink); border-radius: 0; padding: var(--s2) var(--s3); min-height: 56px; } .mock-form input[type="file"] { padding: var(--s3); background: var(--canvas); border-style: dashed; } .mock-scene { perspective: 1400px; perspective-origin: 50% 40%; min-height: 22rem; display: grid; place-items: center; padding: var(--s8) 0; overflow: hidden; } .mock-book { position: relative; transform-style: preserve-3d; transition: transform 600ms cubic-bezier(.2,.7,.2,1); cursor: grab; touch-action: pan-y; } .mock-book.is-dragging { transition: none; cursor: grabbing; } .mock-face { position: absolute; left: 0; top: 0; backface-visibility: hidden; background: var(--sink); border: 1px solid var(--ink-30); box-sizing: border-box; } .mock-front { background-size: cover; background-position: center; display: grid; align-content: end; padding: 6% 8%; color: var(--ink); } .mock-front.has-art { color: transparent; } .mock-front .t { font-family: var(--serif); --opsz: 40; --wght: 650; font-weight: 650; line-height: 1.1; margin: 0; } .mock-front .a { font-family: var(--sans); margin: .5em 0 0; } .mock-spine { transform-origin: left center; display: grid; place-items: center; background: var(--ink-70); color: var(--surface); } .mock-spine span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--sans); --wght: 700; font-weight: 700; letter-spacing: .06em; white-space: nowrap; overflow: hidden; max-height: 92%; } .mock-pages { background: var(--surface); border: 0; background-image: repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 3px); } .mock-facts { font-family: var(--sans); color: var(--ink-70); max-width: var(--measure); font-variant-numeric: tabular-nums lining-nums; } .mock-nav { display: flex; gap: var(--s3); flex-wrap: wrap; } @media (prefers-reduced-motion: reduce) { .mock-book { transition: none; } } @media (min-width: 52.5rem) { .option-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .option h3 { min-height: calc(16 * var(--lead)); } .options > .wrap, .path > .wrap, .yours > .wrap, .write > .wrap { display: grid; grid-template-columns: var(--slug) minmax(0, 1fr); column-gap: var(--slug-gap); align-items: start; } .options > .wrap > *, .path > .wrap > *, .yours > .wrap > *, .write > .wrap > * { grid-column: 2; } .options > .wrap > h2, .path > .wrap > h2, .yours > .wrap > h2, .write > .wrap > h2 { grid-column: 1; max-width: none; } .options > .wrap > .option-grid { grid-column: 1 / -1; } .mock { grid-template-columns: 22rem minmax(0, 1fr); align-items: start; } } /* ---- §19. From the research (2026-09-01): the answering line, the date under each step, and the link to a page printed at true size ----------------- */ .hours-now { margin: 0; font-family: var(--sans); --wght: 700; font-weight: 700; font-size: var(--t-fine); line-height: calc(6 * var(--lead)); color: var(--ink-70); } /* ink-70, not --good: the taste pass found the green line the loudest color on the first screen. Ink at rest; the words "Answering now" carry it (D45). */ .hours-now:empty { display: none; } .post-date { margin: var(--s6) 0 0; font-family: var(--sans); font-size: var(--t-ui); line-height: calc(7 * var(--lead)); color: var(--ink-70); } .post-date input { font: inherit; font-size: var(--t-ui); color: var(--ink); background: var(--surface); border: 2px solid var(--ink); border-radius: 0; padding: var(--s1) var(--s2); min-height: 44px; margin-left: var(--s2); } /* The button is a two-track grid (number | text). Appended as a third child the date fell into the number track, 2.3rem wide, and printed one word to a line under the circle. It is pinned to the text track, under the label. */ .station-date { grid-column: 2; display: block; font-family: var(--sans); font-size: var(--t-fine); --wght: 500; font-weight: 500; color: var(--ink-45); line-height: calc(6 * var(--lead)); } .station.is-open .station-date { color: var(--ink-70); } .sample-link { margin-top: var(--s4); } /* THE BUY LINE. `.buy` is the owner's own class name, from the slot he left in the book section on 2026-09-01; it was filled on 2026-09-07 and this is the rule it never had. It needs no box of its own — the bare `p` above already carries the margin and the measure — only a thumb-sized target. The two lines here (paperback, Kindle) carry the links a reader (as opposed to an author) most needs to hit, and the audience is elderly. ONE LINK PER .buy PARAGRAPH, never two: on a wrapped line the 12px growth above and below meets the neighbor's, and two links in one sentence were measured overlapping by 74px at 390 and 131px at 320 in Larger print. The space between the paragraphs is set just below. A 20/32 body line is a 32px target against this site's 56px floor, so the hit area is grown with the same pseudo-element `.fine a` uses at §9, and for the same reason: a pseudo-element rather than padding, so the target clears 56 without inflating the line box and wrecking the rag. 32 + 24 = 56. NOT restyled otherwise. It stays --accent and underlined, which is the whole of this site's link vocabulary. It is deliberately NOT a filled button: DESIGN-BIBLE §0 says the telephone is the largest thing on the first screen and the only red on it, and "if a change makes something else louder, the change is wrong". This line is a screen further down, so the accent is permitted; a button would not be. NOTE for the touch-target sweep: hv_compose_verify.py enumerates only a[href^="tel:"], button, summary, input, select, textarea, a.skip and .no summary, so this anchor matches nothing it looks at and is NOT covered by the 56px sweep. It was measured by hand instead. Widen that selector before trusting it here. */ .buy a { display: inline-block; position: relative; } .buy a::after { content: ""; position: absolute; inset: -12px -8px; /* 32 + 24 = 56px tall */ } /* THE SPACE BETWEEN THE TWO EDITIONS. Each target grows 12px above and below its line, so the two need 24px between their lines or they cross. finish.css:547 sets `p { margin-bottom: var(--s3) }` — 12px, not the 24 of press.css's p rule — and with that margin the two targets were measured overlapping by 12px at 390 and at 1280 (a thumb on the bottom of "paperback" landed on Kindle). This takes the gap to --s6; collapsed with the 12 above it, the margin is 24 at normal print (targets meet, do not cross) and 30 in Larger print. Specificity 0,2,0 beats the bare p rule regardless of which stylesheet loads last. */ .buy + .buy { margin-top: var(--s6); } /* The other half of SC 2.4.11, AND IT IS NO LONGER SCOPED TO A PHONE. This block used to sit inside `@media not all and (min-width: 52.5rem)`, on the stated grounds that "the fixed thumb bar exists only on a phone, so the foot padding is scoped the way the bar is." That was true when it was written. The bar was then made persistent at every width on the owner's instruction — `.callbar { position: fixed }` at line 1493 is now top-level, in no media query at all — and this padding did not follow it. The cost, measured 2026-09-06 by tabbing every focusable control and hit-testing the focused rect with elementFromPoint (z-index counted, not merely overlapping boxes): 390x844 had one control more than half painted over by a bar; 840x900 had five; 1024x768 had six, among them the letter's own `name` field at 100% covered and its "Send it" button; 1280x900 had five. A phone was nearly fine and a desktop was not, which is exactly the shape a phone-scoped fix leaves behind. 74px of bar and one step, at every width the bar is at. */ :root { scroll-padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px) + var(--s6)); }