/* ============================================================================== BW FAMILY GUIDES — SHARED PRINT SYSTEM
sprint-10 Track P4, from Track P3's audit and the operator's "Option A+" ruling.
Linked from every family guide as
The `media="print"` is load-bearing: it is the reason the SCREEN rendering of all
nineteen guides is provably byte-for-byte unchanged. Never drop it, and never put a
screen-affecting rule in this file.
What this file owns
-------------------
1. Page geometry — real margins, plus the full-bleed cream page ground that makes those
margins read as an inset on the text rather than a white frame round the sheet (§1,
§2, operator 2026-08-03).
2. A running FOOTER in the @page margin boxes: Martice's contact block and "Page X of Y".
Chromium 148 supports @top- and @bottom- margin boxes with `counter(page)` and
`counter(pages)` — Track P3's probe proved that directly. There is no running HEADER
any more; s12 Track C removed both top boxes on the operator's ruling.
3. The masthead: cream plate, contrast fix, and the restored Bonney Watson mark (§3).
4. Widow/orphan control: break-inside:avoid on every callout and prose box.
5. The print-suppression class for the operator's pricing rule.
THERE IS NO COVER PAGE. Sprint-11 Track D, on the operator's direction of 2026-08-02:
"I don't like the idea of a cover page and I don't like any of the PDF versions right
now." The s10 generated full-bleed cover is REVERSED — page 1 of every guide PDF is now
content, opening under the guide's own masthead. What survives from s10 is the part he
did not object to: the running footer, the real page margins, and the range-only pricing
rule. Do not reintroduce a cover without a fresh operator ruling.
`verify_guide_pages.mjs` still gates that, but the assertion is no longer "no page is
full-bleed" — since s12 EVERY page is, because the cream ground is required to reach the
paper edge. It is now two assertions: every page must carry a full-bleed CREAM ground,
and nothing else on any page may be painted full-bleed. A navy plate or a photograph
across the whole sheet still fails; so, now, does a page that quietly loses its bleed.
The build script still injects a marked per-guide block, but since s12 it holds only the
screen-side `.print-invite{display:none}` rule — the running-header title string it used
to carry died with the header. Nothing in THIS file is guide-specific except the named
overrides at the end.
===================================================================================== */
/* ── 1. PAGE GEOMETRY + RUNNING FOOTER ─────────────────────────────────────────────
sprint-12 Track C, on the operator's ruling of 2026-08-03:
"the margins are supposed to be stretched to the edge. we also do not need a header
and the footer should just overlap with the cream not sit outside separately."
THERE IS NO RUNNING HEADER. Both margin boxes at the top of the page are gone — the
constant @top-right "Bonney Watson" that used to live here, and the per-guide @top-left
title string that scripts/build_guide_print_system.mjs used to emit. The brand mark is
back on the masthead instead (§3), which is where he asked for it.
THE MARGINS ARE STILL REAL, AND THE CREAM STILL BLEEDS TO THE EDGE — because
`background` ON THE @page RULE paints the whole SHEET, margins included, and Chromium
implements it. That is the one mechanism that satisfies both of his sentences at once,
and it took measuring four candidates to find (all four probed with real page.pdf output
and rasterised corner pixels, s12 Track C):
- `@page{margin:0}` + a background on — bleeds, but there are then no @page
margin boxes at all, so the running footer he asked to KEEP has nowhere to render.
This is the failure already documented in build_guide_pdfs.mjs.
- `@page{margin:0}` + a `position:fixed` footer element — the element does repeat on
every printed page (verified), but `counter(page)`/`counter(pages)` resolve to 0
outside a margin box, so it prints a literal "Page 0 of 0".
- real margins + a background on — the ROOT background is clipped to the page
CONTENT box in print, so the white frame survives. This is what shipped and what he
complained about.
- real margins + `@page{background}` — sheet painted corner to corner, margin boxes
intact, counters correct. Chosen.
The root background is kept as well, one layer under it: `@page{background}` is paged-
media surface area that not every engine implements, and if a family hits Ctrl+P in
something other than Chromium the content box should still come out cream rather than
white. Our own PDFs are Chromium-only, so the belt is what ships and the braces are
insurance.
Top margin trimmed 0.50in -> 0.42in because nothing lives up there any more, and bottom
0.55in -> 0.46in: the footer is 7.5pt, it needs about a quarter inch, and the rest was
room reserved for a header box that no longer exists. That is where the vertical space
for the restored masthead logo comes from, and it is why Outside Marker Rules came down
from four printed pages to three. */
@page {
size: letter;
margin: 0.42in 0.5in 0.46in 0.5in;
background: #f8f6f2;
@bottom-left {
content: "Martice Morrison \00b7 (206) 445-9794 \00b7 mmorrison@bonneywatson.com";
font-family: 'Source Sans 3', sans-serif; font-size: 7.5pt; color: #6a7686;
}
@bottom-right {
content: "Page " counter(page) " of " counter(pages);
font-family: 'Source Sans 3', sans-serif; font-size: 7.5pt; color: #6a7686;
}
}
/* There is no @page:first override any more, and since s12 there is no per-guide @page
partial at all. With the cover gone, page 1 is content and carries the same margins and
the same running furniture as every other page — which is the whole point of a running
footer: Martice's name, phone and email are on the FIRST sheet a family reads, not only
from page 2 onward. */
@media print {
/* ── 2. FULL-BLEED CREAM ───────────────────────────────────────────────────────
Operator, 2026-08-03: "the margins are supposed to be stretched to the edge ... the
footer should just overlap with the cream not sit outside separately." What shipped
before this was a cream content block floating inside a white frame, with the running
footer stranded in the white below it.
The sheet-wide fill is `@page{background}` in §1 above; this is the second layer,
covering the page CONTENT box, plus the cleanup that makes both of them visible.
Every background BELOW the root must be transparent, or it repaints the content box in
its own colour and the white frame comes back as a cream-on-offwhite frame instead.
The eighteen `.doc-sheet` guides paint `--offwhite #f4f6f8` on body and cream on the
sheet; vault-guide.html has no `.doc-sheet` and paints cream on body directly. Both
are handled by zeroing body and .doc-sheet here and letting the root carry it.
`.doc-sheet` also loses its 960px max-width, its rounded corners and its drop shadow:
they are screen furniture for a page floating on a grey field, and on a full-bleed
printed sheet a rounded corner and a shadow are exactly the "sitting outside
separately" look he objected to.
`print-color-adjust:exact` is required: without it a colour-managed printer drops the
fill and the whole point of the change disappears on paper. */
html {
background: #f8f6f2 !important;
-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
body { background: transparent !important; }
.doc-sheet {
background: transparent !important;
box-shadow: none !important; border-radius: 0 !important;
max-width: none !important;
}
/* The guides' own print CSS fakes gutters, because it had no page margins to work
with. Now that @page carries real margins those hacks would double up, so they are
unwound here in one place rather than edited into nineteen files. */
.doc-sheet { padding: 0 !important; margin: 0 !important;
/* The screen rule is `.doc-sheet{min-height:100vh}` — it makes the cream
sheet reach the fold on a short page. Nothing in the guides' print CSS
ever reset it, which was harmless while the whole document was one flow
and became a shipped blank sheet once a full-page cover was added in
front: the sheet is forced to at least a full page, lands a hair past
the page boundary, and spills a page carrying nothing but the running
header and footer. scattering-guide.html printed exactly that. */
min-height: 0 !important; }
.cover { margin: 0 !important; }
/* The standing block footer is now redundant and was actively harmful. It carries the
address and phone — which is why the guides' own print CSS deliberately KEPT it, with
a comment saying a downloaded PDF is often read away from the site. True, and now
better served: the running footer puts Martice's name, phone and email at the foot of
EVERY page instead of once at the very end. Meanwhile the block itself, being
break-inside:avoid and taller than the slack left on the last page, was stranding
itself onto a sheet of its own in eleven of the nineteen guides — measured at 0.6%
to 2.8% ink, i.e. a blank page a family is asked to print. Hidden. */
.doc-footer { display: none !important; }
/* ── 3. MASTHEAD (cream treatment + contrast fix) ──────────────────────────────
P3's audit: the navy masthead put a 55%-opacity white subtitle on navy — under
4.5:1, and the first thing a family reads. The cream plate with navy type fixes it,
and it is kept now that the cover is gone: it is the lighter, less ink-heavy opening
for a document a family prints at home, and it is the treatment that was reviewed.
THE LOGO IS BACK — operator, 2026-08-03: "It's missing all bonney watson logoes." The
s11 decision to keep it hidden is REVERSED. `logo.svg` is white artwork for navy
backgrounds and is invisible on this cream plate, so it is swapped print-only to the
navy cut with `content:url("logo-navy.svg")`, which Chromium honours (and which
build_guide_pdfs.mjs already waits on — see the `.cover-logo, .pc-photo` loop there).
That mark IS the fleur: navy BONNEY WATSON wordmark either side of the orange
fleur-de-lis in its ring, #466e86/#e84610 family, per GPL-April-2026.pdf.
WHAT COST A SHEET OF PAPER IN S11 WAS THE STACK, NOT THE LOGO. It was restored as a
block above the kicker, so its 15-16px plus margin pushed the whole document down and
Glass-Front Niche went 3 pages to 4, Urn Gardens 1 to 2 — both operator-fixed counts.
Here it is taken OUT of flow: absolutely positioned against the top-right of the
masthead, opposite the title, in the space the running header used to occupy. Vertical
cost is zero by construction, and the measured page counts are unchanged from before
the restore (per-guide table in the s12 Track C report).
`.cover` is already `position:relative` in all eighteen guides' own CSS; it is
re-asserted here so the rule cannot be broken by a future condense-block edit. The
kicker and h1 get right padding so a long title cannot run under the mark. */
.cover {
background: #f8f6f2 !important;
border-bottom: 3px solid #2c445e;
padding: 0 0 9px !important;
position: relative !important;
}
.cover::before { display: none !important; }
.cover-logo {
display: block !important;
content: url("logo-navy.svg");
/* `right:3px`, not `right:0`. Flush against the content-box edge the mark's terminal
"N" was clipped off in the PDF on some guides and survived on others, from
sub-pixel rounding at the print clip — terramation-guide.html printed
"BONNEY (fleur) WATSO" while cemetery-property-guide.html, with a measurably
IDENTICAL layout box, printed cleanly. Found by rasterising at 300 dpi and looking,
not by measuring the layout, which said both were fine. Three pixels of inset also
reads better optically against the text column below. */
position: absolute !important; right: 3px; top: 1px;
height: 17px !important; width: auto !important;
margin: 0 !important;
}
/* 17px of a 308.34 x 56.42 mark is 92.9px wide; 104px clears it with a gutter. */
.cover-kicker, .cover h1 { padding-right: 104px; }
.cover-kicker { color: #a5450a !important; }
.cover h1 { color: #1e3a55 !important; }
.cover-sub { color: #4a5765 !important; } /* was rgba(255,255,255,.7) on navy */
.cover-rule { background: #c8540a !important; }
.cover-footer, .cover-stripe { display: none !important; }
/* vault-guide.html is the one guide whose masthead is `.hero`, not `.cover`, and it was
left out of the s10 cream treatment — it still printed a navy slab, now sitting inside
a full-bleed cream page and looking like a mistake. Same treatment, same reasons: the
contrast defect P3 flagged is here too (`.hero-sub` is rgba(255,255,255,.75) on navy,
under 4.5:1), and it is the only way one logo rule can serve all nineteen guides.
The selector matches the page's own `body:not(.modal-printing) .hero` specificity on
purpose — that is how its existing print rules are written and `!important` alone does
not beat them. The mark is centred here because this masthead is centred; it goes
ABOVE the kicker rather than out of flow, and the 12px it costs is paid back by the
padding trim, with the guide's page count unchanged (3). */
/* THE `.hero` TREATMENT IS GONE — sprint-16 Track E, on the audit's Tier-3 instruction
("Uses .hero, not .cover ... Bring it in line"). Everything that used to stand here was
a second, parallel copy of the `.cover` rules above, existing for exactly one guide:
vault-guide.html painted its masthead cream, drew the brand mark as a `::before`
because it had no to swap, and recoloured four differently-spelled children.
vault-guide.html now uses `.cover`, `.cover-logo`, `.cover-kicker`, `.cover-sub` and
`.cover-rule` like the other eighteen, so the rules above serve it and this block has
nothing left to do. The named override that hid `.hero-kicker` (its literal text was
"Bonney Watson", which duplicated the mark once the mark existed) went with it: the
guide's kicker now reads "BONNEY WATSON FAMILY GUIDE", which names the DOCUMENT, which
is what the other eighteen kickers do and why they were never hidden.
`verify_guide_pages.mjs`'s brand-mark gate kept a second code path to read that
`::before` from computed style. It now measures a real on all
nineteen guides, by the same route, which is a stronger check than the one it replaces. */
/* ── 3b. PHOTO-FIRST PRODUCT CARDS (sprint-11 Track D) ─────────────────────────
One card = a PHOTO, a name, one or two plain sentences, and a price RANGE. The
screen half of this component is injected into each adopting guide inside a marked
BW:PHOTO-FIRST-CSS block; the print half lives here, once, so nineteen guides cannot
drift into nineteen slightly different printed cards the way their condense blocks
already did.
The photo is the point of the component, so it does NOT shrink to a thumbnail in
print — it goes to 16:9 (shorter than the screen's 4:3, because a printed page is
the scarce thing) and keeps its full column width. Everything around it condenses.
`print-color-adjust:exact` is on the card, not the image: without it the card's
border and the hairline above the price drop out on a colour-managed printer, and
the price ends up floating under the text with nothing tying it to the card. */
.pf-grid { display: block; margin-bottom: 6px; }
.pf-card {
break-inside: avoid; page-break-inside: avoid;
margin: 0 0 7px; border-radius: 6px;
-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.pf-photo { aspect-ratio: 16 / 9; }
/* Block, not flex. On screen the body is a flex column so `margin-top:auto` pins the
price to the bottom and cards in a row line up; in a printed COLUMN there is no row
to line up with, and the same rule stretched the last card of a column and left an
inch of white between its text and its price. */
.pf-body { display: block; padding: 6px 8px 7px; }
.pf-card h3 { font-size: 10.5pt; margin-bottom: 0; }
.pf-kind { font-size: 6.5pt; margin-bottom: 3px; }
.pf-card p { font-size: 8pt; line-height: 1.34; margin: 0 0 5px; }
/* The price STACKS in print. Side by side it fits on screen at 480px of card, and it
does not fit in a 3.3in print column: the label wrapped onto three lines and the
range — the one figure the operator asked to be unmissable — was clipped mid-number
against the column edge. Four of the six cards printed "$7,000–$48,00". Found by
rasterising the PDF and reading it, not by any assertion. */
.pf-price { display: block; margin-top: 0; padding-top: 4px; }
.pf-price-label { display: block; font-size: 6pt; margin-bottom: 1px; }
.pf-range { display: block; font-size: 11.5pt; }
.pf-ask .pf-range { font-size: 8pt; font-style: italic; text-align: left; }
/* The secondary full-range line, under a typical band. Operator, 2026-08-02: a span of
$2,195-$82,500 is "a very wide price range" and must not lead on its own. So the band
is the big figure and the full span is a quiet line beneath it — present, because a
family who wants the extremes should find them, and small, because it is not the
answer to "what does this cost". */
.pf-full { display: block; font-size: 6.5pt; line-height: 1.3; margin-top: 2px; color: #5b6b7c;
text-align: left; /* the screen block right-aligns it against the card edge; in the
stacked print column that left the secondary line floating away
from the band it belongs to */ }
/* ── 4. WIDOW / ORPHAN CONTROL ────────────────────────────────────────────────
P3's audit found callouts split across the page break in eight guides. The guides'
own print CSS covered some boxes and not others; this covers every box class that
exists across the nineteen. */
.sidebar, .policy-box, .highlight-box, .callout, .note-box, .card, .option-card,
.check-card, .decision-card, .feature-card, .compare-card, .benefit-card,
.location-card, .size-card, .plan-card, .uv-card, .charge-list, .timeline-step,
.faq, .answer, .cta, .band, .figure, .tsg-section, .price-table, .footnote,
.benefit-row, .plan-row, .section-header, figure, table, tr,
.pf-card, .print-invite,
/* `.direct-panel` and its `.direct-option` cells — cremation-guide.html. The panel split
across the page 1/2 break in the condensed cut and put "$3,535" and "$3,935" alone at
the top of page 2 with their container labels left behind on page 1: two prices, in a
document about prices, attached to nothing. Same class of defect as the clipped
"$7,000–$48,00" noted above, and found the same way — by rasterising the PDF and
looking at it. */
.direct-panel, .direct-option {
break-inside: avoid; page-break-inside: avoid;
}
h2, h3, h4, .section-kicker, .section-sub, .section-rule {
break-after: avoid; page-break-after: avoid;
}
p { orphans: 2; widows: 2; }
/* ── 5. LINKS PRINT AS PROSE ──────────────────────────────────────────────────
P3's audit: underlined blue link text in a printed leave-behind reads as a defect,
and the target is unreachable on paper. Anchors print as plain prose; where the URL
itself matters the page carries it as visible text (`.url`), which stays. No QR
encoder is vendored: the repo's vendoring precedent (scripts/vendor) is for
libraries the app needs at runtime, and adding one for decoration on a leave-behind
that already prints the operator's phone number in the footer of every page did not
earn its place. Logged as an open question rather than decided silently. */
a, a:link, a:visited { text-decoration: none !important; color: inherit !important; }
/* ── 6. THE PRICING RULE ──────────────────────────────────────────────────────
Operator, 2026-08-01: "we can keep price ranges just not very specific pricing so
then they could ask me for an actual quote." Exact per-item prices and itemized
fee tables are removed from the PRINTED guide; ranges stay, and a warm invitation
takes the table's place. Screen keeps everything — this whole file is media=print.
`.print-suppress` is applied by the build script to the elements the rule names.
`.print-invite` blocks are generated with a computed range, never a typed figure,
and are verified by the range verifiers + verify_guide_pages.mjs. */
.print-suppress,
[data-print-suppress] { display: none !important; }
.print-invite {
display: block !important;
border-left: 3px solid #c8540a;
background: #f8f6f2;
padding: 9px 12px;
margin: 10px 0 12px;
-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* Compact variant: used where the rule took only a table's fee rows, so the
replacement must not cost more room than it saved. */
.print-invite.pi-compact { padding: 5px 9px; margin: 5px 0 6px; }
.print-invite.pi-compact p { font-size: 7.6pt; margin-top: 2px; }
.print-invite .pi-range {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 14pt; color: #1e3a55; display: block; margin-bottom: 2px;
}
.print-invite .pi-label {
font-family: 'Source Sans 3', sans-serif; font-size: 7.5pt; font-weight: 700;
letter-spacing: .13em; text-transform: uppercase; color: #a5450a;
}
/* Trailing-blank-page guards. Two separate causes, both found by rendering the tail of
every guide and looking at it:
- `html{height:100%}` in the guides' own print CSS, harmless when the cover was a
band at the top of page 1 and not harmless once the cover is a full 100vh page:
the two stack and push an empty sheet out the back. scattering-guide.html shipped
a page 3 carrying nothing but the running header and footer.
- a stray break-after on whatever happens to end the document. */
html, body { height: auto !important; min-height: 0 !important; }
.doc-sheet > *:last-child, body > *:last-child {
break-after: auto !important; page-break-after: auto !important;
}
/* ── 7. GEOMETRY COMPENSATION ────────────────────────────────────────────────
The guides' own print-condense rules were tuned when the page had NO margins and
the sheet faked 0.4in gutters — an 7.7 x 11.0in live area. Real margins plus a
running footer take that to 7.5 x 9.95in, about 12% less, and every guide gained a
page or two purely from geometry. Rather than re-tune nineteen condense blocks by
hand, the type is tightened here by roughly the same proportion. Measured, not
guessed: page counts before and after are in the track report.
Nothing drops below 7.6pt — these are read by grieving families, and the leading is
kept at 1.3 so the smaller size does not also read as cramped. */
.doc-sheet { column-gap: 13px; }
body { font-size: 7.7pt; }
.prose p, .prose li, .sidebar p, .sidebar li, .policy-box p, p { font-size: 7.7pt; line-height: 1.27; }
/* A body paragraph written as a direct child of `.section-wrap` with its size HARD-CODED
IN THE MARKUP — `
` — was missed by every rule above and by
every guide's own condense block, because an inline style beats a stylesheet outright.
Those paragraphs printed at their SCREEN size: 14px and 13.5px against the 7.7pt
(10.3px) of the column beside them, so a third larger, and cremation-guide.html put two
of them at the head of a section. The page reads as though the type changed size
halfway down. Found by rasterising page 2 and looking at it; no assertion could have
seen it, and the layout measurements said every box was fine.
Scoped to `[style*="font-size"]` on purpose. `!important` is the only thing that beats
an inline style, and a blanket `.section-wrap > p{...!important}` would also flatten a
paragraph some future guide deliberately sizes another way. This targets exactly the
defect — a screen pixel size leaking into print — and nothing else. Audited across all
nineteen guides: six paragraphs match (four in cremation-guide.html, two in
markers-guide.html), every one of them 13-14px, none smaller than the body size. */
.section-wrap > p[style*="font-size"] { font-size: 7.7pt !important; line-height: 1.27 !important; }
.section-wrap { padding-top: 2px; padding-bottom: 1px; }
.section-wrap h2 { font-size: 11.5pt; }
.section-sub { font-size: 7.6pt; margin-bottom: 3px; }
.sidebar, .policy-box, .highlight-box, .card { padding: 6px 8px; margin-bottom: 5px; }
.print-invite p {
font-family: 'Source Sans 3', sans-serif; font-size: 8.5pt; line-height: 1.4;
margin: 4px 0 0; color: #3a4453;
}
}
/* ============================================================================== PER-GUIDE OVERRIDES
Kept at the end of the shared sheet, few and named, rather than hand-edited into the
guides themselves — the guides' own print blocks are tuned to the OLD geometry and
editing them by hand is how those blocks got to nineteen slightly-different copies of
the same idea in the first place.
===================================================================================== */
@media print {
/* (The named override that hid vault-guide.html's `.hero-kicker` was deleted in sprint-16
Track E along with the rest of the `.hero` treatment — see §3. Its kicker was the
literal string "Bonney Watson" and duplicated the brand mark; it now reads
"BONNEY WATSON FAMILY GUIDE" like the other eighteen and needs no override.) */
/* ── THE EIGHT-PAGE PHOTO-FIRST GUIDES (sprint-13 Track A) ────────────────────────
Operator, 2026-08-03: "the crops on the granite niches guide cut off a lot of the
photos. This guide can be longer if we can have better quality photos for each
section. maybe a page per columbarium or nich section each." And, mid-sprint: "same
with glass front niches as well."
Two guides now print ONE PAGE PER LOCATION on an eight-page budget
(verify_guide_pages.mjs PER_GUIDE_CAPS; every other guide is still six). The page
breaks and the photo boxes live in each guide's own print block, because they are
structural and belong next to the markup they act on. What CANNOT live there is TYPE
SIZE: §7 above compensates the whole estate down to 7.7pt for a six-page budget, this
sheet is linked AFTER every guide's own