/* 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. */ /* SCOPED, after measuring. Of every heading on these pages, exactly two need to be able to break a word at 200% type: this sheet's h1 (348px inside a 230px column) and its stacked .name (260 inside 230). Everything else was carrying a rule that can split a word and never needed it. */ h1, .name { overflow-wrap: break-word; } .name span { white-space: nowrap; } /* but never inside "Publishing Co." */ /* ========================================================================== BAR FIVE RAFTER PUBLISHING CO. Palette: COLOPHON. Warm oatmeal paper, brown-black ink, oxblood accent. Contrast ratios computed against --canvas: ink 14.14, ink-70 7.16, ink-45 5.90, accent 8.17. The reader is often seventy or older, on an iPad or a phone, and has never published anything. So: ONE column, LARGE type by default rather than behind a toggle, generous line height, and touch targets well above the minimum. Everything is in rem, so a reader who has already set their device to large text gets larger text again rather than being overridden. ========================================================================== */ :root { --canvas: #F4EFE4; --surface: #FBF8F1; --sink: #E8E0D0; --rule: #D6CCB8; --ink: #23201C; --ink-70: #554E44; --ink-45: #645A4B; --accent: #7A2E22; --serif: "Source Serif 4", "Source Serif Pro", Charter, Georgia, serif; --sans: "Public Sans", "Helvetica Neue", Arial, sans-serif; --measure: 33rem; /* Clamped for the same reason press.css clamps --gutter: vw does not scale with font size, and 6.25vw is exactly 20px at 320, so 100% is unchanged at every width and this only binds when the reader enlarges the text. */ --gap: min(1.25rem, 6.25vw); /* ---- The lead: the 4px baseline grid, shared with press.css ------------- This sheet never joined the grid press.css states as law. press.css §1 requires every line-height to be calc(N * var(--lead)) and §16 documents each place that could not be brought on; here every line-height was a bare ratio (1.65, 1.2, 1.5, 1.25, 1.7) and a browser probe of the tools page found 30 of the 34 rendered elements computing to a line box that is not a multiple of 4 — h1 at 40.32px, body at 33px, every 16px line at 26.4px. Two pages of one site were set to two different rhythms. Same token, same value, same law from here down. In rem, exactly as press.css writes it, so the grid scales with the reader rather than pinning him to 4 device pixels: tools.js's larger print probes for a --fs route, finds none in these sheets, and takes the rootsize route, which multiplies every rem including this one. So the multiple-of-4 check is a check at the default root size — the same claim press.css makes. CHOOSING N, where the old value fell between two stops: the number press.css already uses for the same role wins; failing that, the nearer stop wins. The two places where neither rule was followed say why on the spot, and again in the closing section of this file. */ --lead: 0.25rem; /* 4px */ color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } /* First paint and iOS overscroll must never be white. index.html paints the brand ground on the root element for exactly that reason (press.css) and ships a matching theme-color; this page painted only , so the shell behind it — and the rubber-band above the header on an iPad — came up white before the page did. Painted here now, and tools.html carries the meta. */ html { background-color: var(--canvas); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--serif); font-size: 1.25rem; /* 20px at default — the whole point */ /* 32px on 20px: press.css's own body lead. Was 1.65 (33px). CONSEQUENCE THAT HAS TO BE HANDLED, and is press.css §16's warning: a RATIO inherits as a ratio, a LENGTH inherits as pixels. The moment this became a length, every 16px caption and hint below stopped computing 1.65 of its own size and started inheriting 32px flat. So each of them now states its own lead. If a text element is added to this sheet later and given no line-height, it will inherit 32px and be too airy — that is the bug to look for, not a missing multiple of 4. */ line-height: calc(8 * var(--lead)); font-variation-settings: "opsz" 16; } .wrap { max-width: 46rem; margin-inline: auto; padding-inline: 1.4rem; } p { margin: 0 0 var(--gap); max-width: var(--measure); } /* The shared 1.2 is gone: one ratio across three sizes lands on three different fractional line boxes (40.32, 30.72, 24.96). Each heading takes the stop nearest the value it already had, so the page looks the same and the rhythm is machined instead of approximate. */ h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0 0 var(--gap); text-wrap: balance; max-width: 22ch; } h1 { font-size: 2.1rem; line-height: calc(10 * var(--lead)); /* 40 on 33.6 */ font-variation-settings: "opsz" 40; } h2 { font-size: 1.6rem; line-height: calc(8 * var(--lead)); /* 32 on 25.6 */ font-variation-settings: "opsz" 28; margin-top: 0; } h3 { font-size: 1.3rem; line-height: calc(6 * var(--lead)); /* 24 on 20.8 */ font-variation-settings: "opsz" 20; } /* 36 on 22.4, NOT the nearer 32. This is the lead paragraph and it has to sit airier than the body under it; body is 8 units at 20px, so 8 units at 22.4px would have made the larger type the tighter-set of the two and inverted the one thing this class exists to do. press.css sets its lead paragraph at 9 units for the same reason. Costs 2.4px against the old 33.6. */ .big { font-size: 1.4rem; line-height: calc(9 * var(--lead)); color: var(--ink); max-width: 30rem; } a { color: var(--accent); text-underline-offset: .2em; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } section { padding-block: 3.25rem; border-top: 1px solid var(--rule); } /* --- Header -------------------------------------------------------------- The telephone number is the most important thing on this page, so it is the largest thing in the header and it is a real link on a phone. */ header { background: var(--sink); padding-block: 1.75rem; border-bottom: 2px solid var(--ink); } .name { font-family: var(--sans); font-size: 1.35rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: calc(7 * var(--lead)); /* 28 on 21.6; was 27 */ margin: 0; } /* The 1.25 above used to inherit into this span as a RATIO and give it 20px. On the grid the parent's lead is a length, so without this line the second line of the lockup would have inherited 28px and the wordmark would have grown 8px taller. 5 units is the 20px it always had. */ .name span { display: block; font-size: 1rem; font-weight: 500; letter-spacing: .2em; line-height: calc(5 * var(--lead)); color: var(--ink-45); margin-top: .3em; } /* 5 units is press.css's own value for this line (a dateline in caps, no descenders to clear but the comma). It had no line-height at all and was inheriting the body's 26.4px. Nothing moves visibly on this page either way: .place holds a link whose 44px touch target builds the line box. */ .place { font-family: var(--sans); font-size: 1rem; letter-spacing: .08em; line-height: calc(5 * var(--lead)); text-transform: uppercase; color: var(--ink-45); margin: .75rem 0 1.25rem; } /* 56px was already a whole 14 units, so the number does not move — but it was written as a pixel literal doing two jobs at once. min-height is what guarantees the touch target; the lead is written as a lead, and now it grows with the reader's own text size instead of standing still at 56px while the type around it gets larger. */ .phone { display: inline-block; font-family: var(--sans); font-weight: 700; font-size: 1.7rem; letter-spacing: .01em; text-decoration: none; color: var(--accent); min-height: 56px; line-height: calc(14 * var(--lead)); } .phone:hover, .phone:focus-visible { text-decoration: underline; } .hours { font-family: var(--sans); font-size: 1rem; color: var(--ink-70); line-height: calc(6 * var(--lead)); margin: 0; } /* press.css's value */ /* --- The book ------------------------------------------------------------ */ .book { background: var(--surface); } .book-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; } @media (min-width: 46rem) { .book-grid { grid-template-columns: 15rem 1fr; gap: 2.5rem; } } .cover { width: 100%; height: auto; display: block; border: 1px solid var(--rule); } .credit { font-size: 1rem; line-height: calc(6 * var(--lead)); color: var(--ink-45); } /* --- Looking inside ------------------------------------------------------ One page at a time, big, with two big buttons. No spread, no page-turn animation, no gestures — a gesture is a thing you have to already know. */ .reader { margin-top: 1.5rem; } #pageImg { width: 100%; max-width: 26rem; height: auto; display: block; margin-inline: auto; border: 1px solid var(--rule); background: #fff; } .page-caption { font-family: var(--sans); font-size: 1.05rem; color: var(--ink-70); /* 24 on 16.8. press.css §16 makes the same move for the same reason: a caption should be set TIGHTER than body text, not looser, and this one was inheriting the body's lead and coming out at 27.72px. */ line-height: calc(6 * var(--lead)); text-align: center; margin: .9rem auto 1rem; max-width: none; } .page-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; } .page-controls button { font-family: var(--sans); font-size: 1.15rem; font-weight: 700; min-height: 56px; padding: 0 1.5rem; background: var(--surface); color: var(--ink); border: 2px solid var(--ink); border-radius: 0; cursor: pointer; } .page-controls button:hover { background: var(--ink); color: var(--surface); } .page-controls button[disabled] { opacity: .35; cursor: default; } .page-controls button[disabled]:hover { background: var(--surface); color: var(--ink); } .page-count { font-family: var(--sans); font-size: 1.05rem; color: var(--ink-45); line-height: calc(6 * var(--lead)); font-variant-numeric: tabular-nums; min-width: 5.5rem; text-align: center; } .says { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* --- Lists --------------------------------------------------------------- */ .plain-list { list-style: none; margin: 0; padding: 0; max-width: var(--measure); } .plain-list li { padding: .85rem 0 .85rem 1.9rem; border-bottom: 1px solid var(--rule); line-height: calc(8 * var(--lead)); /* 32 on 20, as the body */ position: relative; } .plain-list li::before { content: ""; position: absolute; left: 0; top: 1.55rem; width: .75rem; height: 1px; background: var(--ink-45); } .plain-list li:last-child { border-bottom: 0; } .doesnt { background: var(--sink); } /* --- Starting ------------------------------------------------------------ */ .ways { display: grid; gap: 2rem; grid-template-columns: 1fr; } @media (min-width: 46rem) { .ways { grid-template-columns: 1fr 1fr; gap: 2.5rem; } } /* Its padding is clamped so it cannot eat the column under text zoom: 1.25rem is 40px each side at 200%, which is 80px of a 230px column. 5vw is 16px at 320 and never binds at any normal size. Measured: this box was 286px wide inside a 230px grid column, and it is what put 11px of sideways scroll on this page. */ .way { padding-inline: min(1.25rem, 5vw); } .addr { font-family: var(--sans); font-size: 1.1rem; line-height: calc(7 * var(--lead)); /* 28 on 17.6; was 29.92 */ background: var(--surface); border: 1px solid var(--rule); padding: 1rem 1.15rem; display: inline-block; } .note { font-size: 1.05rem; line-height: calc(7 * var(--lead)); /* 28 on 16.8 */ color: var(--ink-70); margin-top: 1.5rem; } /* --- Footer -------------------------------------------------------------- */ footer { background: var(--sink); border-top: 2px solid var(--ink); padding-block: 2.5rem; margin-top: 0; } .name-small { font-family: var(--sans); font-size: 1rem; letter-spacing: .08em; line-height: calc(6 * var(--lead)); text-transform: uppercase; color: var(--ink-45); margin-bottom: .5rem; } /* 24 on 16 — press.css's fine-print lead. The footer's provenance paragraph is the longest block of small type on the page, so it is the one place where inheriting the body's lead was actually visible: 26.4px, looser than the 20px prose above it, which is backwards. */ .fine { font-size: 1rem; line-height: calc(6 * var(--lead)); color: var(--ink-70); margin-top: 1.25rem; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } @media print { .page-controls { display: none; } /* html joined this the day the root started carrying the brand ground: the rule said body alone, so on paper the oatmeal would have come through from underneath the white it had just been given. */ html, body { background: #fff; } } /* Any link in running text is still something a thumb has to hit. 44px is 11 whole units, so the target does not move; it is written as a lead so it scales with the reader, and min-height keeps the 44px floor either way. */ footer .fine a, .place a { display: inline-block; min-height: 44px; line-height: calc(11 * var(--lead)); font-weight: 700; } /* ========================================================================== THE BASELINE GRID — WHAT WAS NOT BROUGHT ONTO IT, AND WHY -------------------------------------------------------------------------- press.css §16 keeps this list for the front page; this is the same list for the tools page, kept for the same reason: a departure that is written down is a decision, and one that is not is a drift. 1. BUTTONS — .page-controls button here, button.do and .controls button on tools.html. Their line-height is `normal`, not a bare ratio, so nothing is being knocked off the grid by a number this file chose. Two reasons they stay that way. They are single-line UI whose height is already fixed by min-height:56px, which is a hand and not a rhythm — press.css §16 stands its own buttons down on exactly this argument. And the tools page's Larger-print button is sized calc(1.15rem * var(--fs, 1)): a lead pinned to rem would not follow the font-size up if these sheets are ever rewired to the --fs multiplier, and the type would grow inside a line box that did not. The grid law is about the rhythm of running text. 2. NATIVE FORM CONTROLS — input[type="text"] and select in tools.css. Same answer, plus one that is specific to them: Safari on iOS lays a select's value out against the control box, and a line-height forced on it clips the text rather than moving it. min-height:56px already sets their height. Left at `normal` deliberately. 3. THE LEAD IS IN rem, so larger print scales it: tools.js takes the rootsize route on these sheets and 0.25rem becomes 5px at 125%. The grid then holds on a 5px lead instead of a 4px one — still a grid, still whole units, but the multiple-of-4 probe is a probe at the default root size. press.css makes the same claim on the same terms. ========================================================================== */ /* ========================================================================== THE THUMB BAR, ON THESE TWO PAGES TOO -------------------------------------------------------------------------- The owner's instruction of 2026-09-04 was "also make the footer persistent with the phone number". It was built on the front page and stopped there, because these two pages do not load press.css at all — they are served by this sheet, deliberately, and .callbar simply did not exist here. Measured 2026-09-06, before this block: index.html callbar fixed masthead sticky 6 tel: links coversheet.html none none 0 tel: links sample.html none none 0 tel: links Zero. The cover sheet is the page an author actually fills in, it prints the telephone number in its own fine print, and on a phone that number could not be tapped — it was text. A telephone-first press whose telephone is not a link on the page where someone is deciding to call is the wrong way round. Values are press.css's, written out rather than referenced: --rule-heavy is `2px solid var(--ink)`, --s2 is .5rem, --s3 .75rem, --t-ui 1.125rem, --t-fine 1rem, and this sheet's --gap is 1.25rem, the same number --gutter carries there. Nothing new is invented; the bar is the same object. ========================================================================== */ /* THE PRIVACY NOTE UNDER THE SHEET'S FORM. press.css and finish.css both style .form-privacy, and this page loads neither — it is served by this sheet — so without these five lines the sentence would have shipped as unstyled body copy at full measure. It is fine print: the size and colour of the sheet's other fine print, held to the form's own column, and it does not print. On paper the form is being posted BY the author TO the office; a note about what the office does with the data belongs on the screen where they are deciding to send it, not on the sheet in the envelope. */ .form-privacy { font-size: 1rem; line-height: calc(6 * var(--lead)); color: var(--ink-70); max-width: 34rem; /* Air on BOTH sides. With a top margin only it sat hard against the line that follows it — "Telephone (615) 398-1776 for the address before posting" — and the two read as one paragraph on a phone. Seen on the device. */ margin: calc(3 * var(--lead)) 0 calc(4 * var(--lead)); } @media print { .form-privacy { display: none; } } .callbar { max-width: 100%; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--sink); border-top: 2px solid var(--ink); padding: .5rem var(--gap); padding-bottom: max(.5rem, env(safe-area-inset-bottom)); } .callbar-tel { display: flex; align-items: center; justify-content: center; /* Wraps, for the reason press.css states: the label and the number are 374px of unbreakable line at 200% type, which made the bar wider than the phone. */ flex-wrap: wrap; row-gap: calc(1 * var(--lead)); gap: .75rem; min-height: 56px; text-decoration: none; font-family: var(--sans); font-weight: 700; font-size: 1.125rem; color: var(--accent); line-height: calc(11 * 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; /* overflow-wrap:anywhere IS THE ONE THAT MATTERS. min-width:0 lets a flex item shrink, but the item still cannot go below its own min-content width, and for "TELEPHONE THE OFFICE" at 32px that is the whole phrase — 350px on a 320px phone. overflow-wrap:anywhere is the only property that lowers min-content itself, so the label can finally break and the bar can be the width of the glass. It never binds at a size where the phrase already fits. */ overflow-wrap: anywhere; font-size: 1rem; font-weight: 500; color: var(--ink-70); letter-spacing: .06em; text-transform: uppercase; line-height: calc(5 * var(--lead)); } .callbar-num { font-variant-numeric: tabular-nums lining-nums; } /* The bar never covers the last line, and SC 2.4.11: focus scrolled to the foot of the page has to clear 74px of bar. press.css states the same two declarations for the same reason. */ body { padding-bottom: 5rem; } :root { scroll-padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px) + 1.5rem); } /* ON PAPER THERE IS NO BAR. The cover sheet exists to be printed and posted; a fixed element would print over the foot of the form, and the number is already in the sheet's own fine print. */ @media print { .callbar { display: none; } body { padding-bottom: 0; } } /* ========================================================================== THE DEVICE ON THE PRINTED SHEET -------------------------------------------------------------------------- This page is the one an author fills in and posts on top of a manuscript, so it is the site's only real DOCUMENT — and it carried the press's name in type with no mark at all. The device goes above the name, which is where a printed letterhead puts it. The name itself is left alone. It is already stacked and letterspaced, and it is set in the sans on purpose: this is a form, and the form's own voice is not the title page's. Adding the mark incorporates the brand; changing the face would be redesigning a document that works. Same technique as everywhere else — mark.png as a MASK with the foil painted underneath, so nothing new ships. The band is parked at 50%, frozen at its brightest, because a printed sheet has no animation to catch. On a mono printer the ramp comes out as polished gray, which the logo generator's own docstring says still reads as metal. ========================================================================== */ .sheet-device { width: 3.5rem; aspect-ratio: 1.226; margin: 0 0 .55rem; -webkit-mask: url(../brand/mark.png) no-repeat center / contain; mask: url(../brand/mark.png) no-repeat center / contain; background-image: linear-gradient(102deg, transparent 0 43%, var(--foil, #B08D57) 50%, transparent 57% 100%), linear-gradient(122deg, var(--surface) 0%, var(--rule) 46%, #847A66 100%); background-size: 320% 100%, 100% 100%; background-position: 50% 0, 0 0; background-repeat: no-repeat, no-repeat; } /* It prints. A device on a posted document is the point of a letterhead, and print-color-adjust keeps the ramp from being dropped as a background. */ @media print { .sheet-device { width: 2.6rem; margin-bottom: .35rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* ========================================================================== THE STRUCK LOCKUP AT THE FOOT OF EVERY SHEET (owner, 2026-09-13) -------------------------------------------------------------------------- The owner, on the phone: "where is the logo on the bottom on mobile? ... the one that shimmers." It lived only in the front page's colophon, whose rules are in finish.css, which these pages do not load. The rules below are that lockup's rules COPIED EXACTLY — the same --lw, the same .19 / .072 / .052 ratios from tools/make-publisher-logo.py, the same text-indent equal to the tracking so centerd caps sit on the true center — so the mark at the foot of a sheet is the mark at the foot of the front page. The foil and the pointer's light come from impression.css's `html.js .cl-device` and impression.js, which every sheet now loads; the solid ink below is the safety layer they paint over. If finish.css's lockup rules ever change, these change with them. ========================================================================== */ .sheet-foot { --ink-30: #847A66; --foil: #B08D57; } .sheet-foot > .wrap { text-align: center; max-width: 34rem; margin-inline: auto; } .colophon-lockup { --lw: min(30rem, 78vw); width: var(--lw); margin: 0 auto; text-align: center; } .cl-device { width: calc(var(--lw) * .19); aspect-ratio: 1.226; margin: 0 auto calc(var(--lw) * .030); background-color: var(--ink); -webkit-mask: url(../brand/mark.png) no-repeat center / contain; mask: url(../brand/mark.png) no-repeat center / contain; } .cl-name { margin: 0; font-family: "EB Garamond", var(--serif); color: var(--ink); } .cl-caps, .cl-sub { display: block; text-transform: uppercase; } .cl-caps { font-size: calc(var(--lw) * .072); line-height: 1; font-weight: 560; letter-spacing: .16em; text-indent: .16em; } .cl-sub { margin-top: calc(var(--lw) * .024); font-size: calc(var(--lw) * .052); line-height: 1; font-weight: 500; letter-spacing: .18em; text-indent: .18em; color: var(--ink); } .sheet-foot .place-line { margin: calc(var(--lw, 30rem) * .034) 0 0; text-align: center; } .sheet-foot .fine { margin-left: auto; margin-right: auto; }