. That is what makes
* it identical everywhere: the figure is a fixed share of the page, so the
* frame is the same size whatever is dropped inside it, and the media simply
* scales to fit. Previously the frame was drawn on the media element itself,
* so its size followed the media — a portrait photo and a landscape video got
* visibly different frames — and a later rule setting `background` on the
* video wiped the frame's gradient entirely, which is why video had no border
* at all while images did.
*
* Layout per media page: date + title on top, frame fills the rest (~78%).
* ===================================================================== */
.page-media-block .page-media {
flex: 1 1 auto;
min-height: 0;
width: 100%;
display: flex; align-items: center; justify-content: center;
margin: 0 auto;
box-sizing: border-box;
padding: 12px;
border: 10px solid transparent;
border-radius: 3px;
background:
linear-gradient(#fffdf6, #f4e9d4) padding-box,
repeating-linear-gradient(135deg,
#f6e3ad 0 4px, #c9a227 4px 8px, #8a6a1d 8px 12px, #c9a227 12px 16px) border-box;
box-shadow:
0 0 0 1px rgba(122, 92, 24, .6),
0 0 0 1px rgba(255, 248, 226, .9) inset,
0 12px 26px -10px rgba(52, 32, 12, .55),
0 2px 5px rgba(52, 32, 12, .28);
overflow: hidden;
}
.reader-room.night .page-media-block .page-media {
background:
linear-gradient(#2b241c, #221c16) padding-box,
repeating-linear-gradient(135deg,
#b8952f 0 4px, #8a6a1d 4px 8px, #5c4713 8px 12px, #8a6a1d 12px 16px) border-box;
box-shadow:
0 0 0 1px rgba(90, 70, 20, .85),
0 0 0 1px rgba(255, 248, 226, .1) inset,
0 12px 26px -10px rgba(0, 0, 0, .7);
}
/* No black behind video: these earlier rules set an opaque dark background on
the element, which showed as bars whenever the footage did not exactly fill
its box. The frame's parchment shows instead. */
.page-video video,
.page-media.page-video video,
.page-media-block .page-media.page-video video { background: transparent; }
/* The play badge belongs over the media, inside the frame. */
.page-media-block .page-video .video-play { z-index: 2; }
/* =====================================================================
* SHELF: books rest ON the board, and stand together
* ===================================================================== */
/* `.page-home .book { flex: 1 1 0 }` gave every book an equal SHARE of the
row, so a shelf holding two books put each in the middle of its own half —
the large gap on the second Private Library shelf. Content-width books plus
the existing centring keeps them together.
flex-basis auto, shrink ENABLED, and NOWRAP — deliberately, all three:
a wrap threshold is a discontinuity, and this row used to sit within a
few pixels of it, so any small width difference between two renders of
the same shelf (the reader backdrop has no scrollbar; the live page
does) flipped a book onto a second row and shifted every shelf below.
With nowrap + shrink, a small width deficit shrinks every book evenly
and imperceptibly instead (min-width:0 on .book already allows it, and
the cover's width:100% chain follows the shrink while keeping its
aspect ratio). Same inputs at any width now give the same layout. */
.page-home .shelf-books .book { flex: 0 1 auto; }
.page-home .shelf-books { justify-content: center; flex-wrap: nowrap; }
/* Consolidated seating — several earlier rules set competing margins here.
The asset has no transparent margin at its base (measured: opaque to the
last pixel), so the books' own bottom edge IS the shelf line; the board is
pulled up just enough to meet it. */
/* =====================================================================
* SHELF + COVER — SINGLE SOURCE OF TRUTH
*
* Every shelf spacing/seating rule now lives here and nowhere else. There were
* NINE competing declarations for these same properties scattered through this
* file, each added by a different round of fixes; whichever happened to be
* last silently won, which is why adjusting the overlap or the seating kept
* appearing to do nothing. If a shelf measurement needs changing, change it
* HERE — do not append a new rule elsewhere.
* ===================================================================== */
/* Seating. The cover image is inline by default, so it sits on the text
baseline and leaves descender space beneath it — that space is the gap under
the books, not a margin. display:block removes it. (Measured: the artwork is
opaque to its final pixel, so the image's bottom edge IS the shelf line.)
The board is pulled up 5px so the books' bottom edge tucks BEHIND it —
the board paints above the books (z-index 2 !important vs the books'
layer), so the tuck reads as resting on the shelf rather than floating
at its front edge. The .page-home variant is required: main.css carries
`.page-home .shelf-board { margin-top: -1px }` which out-ranks the bare
selector on every origin page. */
img.cover-face { display: block; }
.shelf-books { align-items: flex-end; }
.shelf-books .book { margin-bottom: 0; }
.shelf-board,
/* -1px, not -5px. The -5px was cancelling the baseline descender measured
above; with that gone it would have buried the bottom 5px of every cover
under the plank. One pixel is the tuck, so the books meet the board instead
of hovering over it or sinking into it. */
.page-home .shelf-board { margin-top: -1px; } /* books tuck into the board */
/* Spacing. A slight lean, not a stack: -8px was too aggressive. */
.shelf-books .book + .book { margin-left: -3px; }
.page-home .shelf-books { gap: clamp(6px, 1vw, 14px); }
/* Custom cover, fitted INSIDE the visible front face.
Measured from the artwork (98x158): the face spans x 22%-96%; its top edge
sits below the page block and its bottom rises from ~98% on the left to
~86% on the right as the book turns away. These bounds are inset from those
extremes so the cover can never spill above or beyond the face. */
.book-user-art {
position: absolute;
left: 23%; width: 71%;
top: 0; height: 100%;
background-size: cover;
background-position: center;
/* MEASURED FROM THE ARTWORK, NOT ESTIMATED FROM IT.
Scanning the 98x158 covers column by column for the first fully opaque
dark pixel — the printed cover face, below the gold/maroon top edge —
gives a face that begins at 10.3% of the height at x=23% and rises to
4.9% at x=94%, and a bottom that falls from 98.1% to 84.2% across the
same span. The polygon claimed 8% on the right where the face actually
starts at 4.9%, so a ~3% band of the underlying book showed above the
uploaded cover along its top-right — which is the reported misfit — and
it stopped ~1.7% short along the bottom for the same reason.
Inset ~0.2% from the measured edges so the cover can never spill past
the face it is sitting on. */
clip-path: polygon(0% 10.5%, 100% 5.2%, 100% 85.2%, 0% 97.4%);
transform: none;
border-radius: 0;
box-shadow: none;
pointer-events: none;
}
/* The blurred backdrop renders the same shelf smaller; it keeps the seating
but not the overlap, which would squash it at that scale. */
/* =====================================================================
* PANEL DENSITY STANDARD (Add Entry, Edit Entry, Search, Change Cover)
* One place defining how reader panels use space, so future panels inherit it
* instead of each one being tuned separately.
* ===================================================================== */
/* A label and its control share one row rather than stacking. */
.ov-row-inline {
display: flex; align-items: center; gap: 10px;
margin-bottom: 8px;
}
.ov-row-inline .ov-label { margin: 0; flex: 0 0 auto; white-space: nowrap; }
.ov-row-inline .ov-input { flex: 0 1 auto; width: auto; min-width: 0; }
/* A date field only needs to be as wide as a date. */
.ov-input[type="date"] { width: auto; min-width: 148px; padding: 5px 8px; font-size: 13px; }
/* Primary actions: compact and centred, never stretched across the panel. */
.ov-panel .ov-primary {
display: block; width: auto; margin: 10px auto 0;
padding: 7px 22px; font-size: 12.5px; border-radius: 15px;
min-width: 132px; text-align: center;
}
/* Small circular control used where a full block would be wasteful
(cover preview, image editor). */
.ov-icon-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; padding: 0; cursor: pointer;
background: #fffdf8; border: 1px solid #d3c6ae; border-radius: 50%;
color: #5c4a33; flex: 0 0 auto;
}
.ov-icon-btn svg { width: 15px; height: 15px; fill: currentColor; }
.ov-icon-btn:hover,
.ov-icon-btn.is-active { border-color: var(--maroon, #7b3335); color: var(--maroon, #7b3335); }
.ec-compact { gap: 8px; flex-wrap: wrap; }
/* Instructional text is a hint, not a paragraph. */
.ov-panel .ov-note { font-size: 10.5px; line-height: 1.4; margin: 4px 0; color: #8d7c64; }
/* A message that must actually be NOTICED — the picture-titles hint, and
errors like "an entry already exists for this date". Both previously
rendered as .ov-note: 10.5px in a muted brown, indistinguishable from
decoration. Deliberately compact — a notice, not a banner. */
.ov-panel .ov-notice {
margin: 8px 0; padding: 7px 10px; border-radius: 7px;
font-size: 11.5px; line-height: 1.45; font-weight: 500;
border: 1px solid transparent;
}
.ov-panel .ov-notice[hidden] { display: none; }
.ov-panel .ov-notice.ov-notice-info,
.ov-panel .ov-notice.is-info {
background: #f7f0e1; border-color: #ddc9a3; color: #6b552f;
}
.ov-panel .ov-notice.is-error {
background: #fbeaea; border-color: #e6b6b6; color: #8c2626;
}
/* Writing space is the point of an entry panel: the textarea takes what is
left after the compact rows above it. */
.ov-panel .ov-form { display: flex; flex-direction: column; min-height: 0; }
.ov-panel textarea.ov-input { flex: 1 1 auto; min-height: 150px; resize: vertical; }
/* THE RULE SITS UNDER THE TITLE IT BELONGS TO. `margin: 6px 0 8px` left it
hard against the panel's left padding while .ov-title above it is centred,
so every overlay had a centred heading with an off-centre divider. `auto`
on the sides centres it, which is what reader.css intended before this rule
overrode the whole shorthand to change the vertical spacing.
One shared declaration, so Participants, Add Entry, Find a Memory, Pending
Memories, Share This Book and every other .ov-panel move together. */
.ov-panel .overlay-rule { margin: 6px auto 8px; }
.ov-panel .ov-title { margin-bottom: 2px; }
/* THE SPECIAL EVENTS MEDIA TITLE CARRIES A DATE, so it is several times longer
than "Edit Entry" or "Memory" — at the shared clamp's upper bound it filled
two lines and dwarfed the picture beneath it. Held at the clamp's LOWER bound
so it matches the entry panels' title rather than shouting over them; the
family, weight, colour and centring are inherited unchanged. */
.ov-panel .evm-title { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.25; }
/* =====================================================================
* THE END page
* ===================================================================== */
.end-page {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
height: 100%; text-align: center; gap: 10px;
}
.end-flourish { font-size: 26px; color: var(--page-accent, #7b3335); opacity: .8; }
.end-title {
margin: 0;
font-family: var(--font-display, Georgia, serif);
font-size: clamp(26px, 3.4vw, 44px);
letter-spacing: .18em;
font-weight: 400;
color: var(--page-ink, #34281c);
}
.end-rule {
display: block; width: 110px; height: 2px;
background: linear-gradient(90deg, transparent, #c9a227, transparent);
}
/* The back cover PAGE styling that used to live here is gone: the back cover
is a BOARD (.book-back-cover, styled in reader.css beside .book-cover), and
the closing leaf is type 'inside-cover' — the exact leaf the front uses —
so reader.css's is-inside-cover rules cover it with no parallel CSS here. */
/* =====================================================================
* #14 BACKDROP SHELF = HOMEPAGE SHELF
* The blurred backdrop renders the same markup as the page it came from, so it
* should look the same. Previously it carried its own spacing overrides (no
* overlap, different board offset) which is exactly why its shelves sat
* closer together and overlapped. Those are gone; the backdrop now inherits
* every shelf measurement from the single source of truth above.
*
* Only two things remain backdrop-specific, and both are necessary:
* - covers load eagerly (lazy images never load in a fixed, clipped box)
* - no shadow (a shadow on top of a blur reads as a smear)
* The no-shadow rule itself lives in the "(5) Backdrop books" block earlier
* in this file — ONE owner; a duplicate filter:none one-liner here is gone.
* ===================================================================== */
/* One shelf rhythm, expressed twice ON PURPOSE — this is not a duplicate.
main.css sets `.page-home .shelf { margin-bottom: 0 }`, which is more
specific than `.shelf`, so the homepage needs the value restated at matching
specificity or it would fall back to 0. Both carry the SAME number; change
them together. */
.shelf { margin-bottom: 26px; }
.page-home .shelf { margin-bottom: 26px; }
/* =====================================================================
* #13 PARTICIPANTS PAGE
* ===================================================================== */
/* Heading: prominent and left aligned, not a muted note. */
.mm-heading {
margin: 4px 0 8px;
text-align: left;
font-family: var(--font-display, Georgia, serif);
font-size: 15px; font-weight: 600; letter-spacing: .01em;
color: var(--page-accent, #7b3335);
}
/* ONE PARTICIPANT PER ROW.
This used to be `repeat(auto-fit, minmax(190px, 1fr))`, which put two cards
side by side on any panel wider than ~400px. The compact two-column item
below was then trying to fit an identity column AND an actions column into
about 207px. Measured at 1280x900 with four participants: each card 227.6px
wide, the name column squeezed to 60.6px, a long name wrapping to four lines
and cards 120-145px tall — the "large boxes" in the report. The item was
rebuilt as a compact row in an earlier pass but was never given a row's
width, so the rebuild could not show.
A full-width row leaves the name real space at every panel size. */
.mm-list {
display: flex;
flex-direction: column;
gap: 4px;
margin: 8px 0;
}
.mm-item { padding: 7px 10px; }
.mm-name { font-size: 12.5px; }
.mm-email { font-size: 11px; margin: 1px 0 4px; }
.mm-actions { margin-top: 6px; }
.mm-actions .ie-mini { padding: 4px 10px; font-size: 10.5px; }
/* Add Participant / View Participants: two actions, not two banners.
.ov-primary is full width by default, which would stack them as slabs;
these are peers on one line, wrapping only when the panel is too narrow to
hold both. The 34px height is a compromise the panel forced: the 44px floor
applies to the site's own controls, and a pair of 44px slabs directly under
the heading dominated a panel whose subject is the list below them. */
.mm-actions-row {
display: flex; flex-wrap: wrap; gap: 8px;
align-items: center; justify-content: center;
margin: 6px 0 2px;
}
/* THE WRAPPER GENERATES NO BOX, so both buttons are direct flex items of the
row and are laid out identically. It was an ordinary flex container, which
made Add a grandchild and View a child of the row — measured 5px apart
vertically, Add at y=362 against View at y=367, because View still carried
.ov-primary's own `margin: 8px auto 2px` while Add's was reset by a
descendant selector. `display: contents` removes the asymmetry at its
source rather than compensating for it.
The wrapper still carries `hidden`, which keeps working because main.css
declares [hidden] { display: none !important } and that beats this. */
.mm-actions-row .mm-add-wrap { display: contents; }
/* Scoped to the row so it outranks `.ov-primary` on specificity rather than on
file order. Written as a single-class rule first, this lost to a later
`.ov-primary` at equal specificity — which is exactly the silent-override
risk gate 4 counts. */
.mm-actions-row .ov-primary {
width: auto; min-width: 148px; min-height: 34px;
margin: 0; padding: 8px 18px;
font-size: 12px; border-radius: 17px;
}
/* Occupies the list while it loads, so the box is never shown empty. */
.mm-loading {
margin: 0; padding: 10px 2px;
font-size: 12px; color: #9a8763; text-align: center;
}
/* Back control on a panel, matching the close button's position. */
.ov-back {
position: absolute; top: 10px; left: 12px;
padding: 4px 10px; border-radius: 12px; cursor: pointer;
background: #fffdf8; border: 1px solid #d3c6ae; color: #5c4a33;
font: inherit; font-size: 11.5px; font-weight: 600;
}
.ov-back:hover { background: #f4ebd9; border-color: var(--maroon, #7b3335); }
.ec-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: #9a8763; }
/* =====================================================================
* (#7) GUEST STATIC BOOK — Private Library preview for non-subscribers
* Image left, description right, on the shared static-book layout. Follows
* the FORM DENSITY STANDARD: compact rows, small centred actions.
* ===================================================================== */
/* LEFT PAGE — the artwork carries the page.
Previously `width:auto; height:auto` meant the image drew at its INTRINSIC
size: the shelf covers are 98x158 thumbnails, so it painted a postage stamp
in the middle of a full page. It now fills ~88% of the usable page area
while keeping its aspect ratio (object-fit: contain never crops or
stretches), with the gilt frame kept as the border treatment. */
/* The left page IS the artwork. The page's own body padding is pulled right
in so the image reaches close to the page edges, leaving only a margin;
the image then takes the entire remaining box. The earlier 88% was
shrinking it inside an already-padded page, which is what left the large
empty areas. object-fit: contain still guarantees no crop or distortion. */
.page-guest-book .page-left .sb-body { padding: 3.2%; }
/* ============ INFORMATIONAL BOOK — PROPORTIONS ============
THE BOOK WAS SIZED FOR A READER SPREAD, not for a page of prose. At
min(97vw, 1500px) it filled the window, so three paragraphs sat in an
enormous sheet with a full-bleed picture beside them — the "large empty
document" effect. Constraining the spread on these pages is what fixes it;
nothing about the layout, the reader or the flipbook changes, and the same
boards, spine and paper are still used. */
.page-guest-book .flipbook {
width: min(88vw, 1120px, calc((100vh - var(--reader-chrome, 200px)) * 1.60));
}
.page-guest-book .book-open { min-height: 420px; max-height: 720px; }
.page-static-book .reader-room { padding-bottom: clamp(18px, 2.6vw, 38px); }
.page-guest-book .gb-art {
display: flex; align-items: center; justify-content: center;
/* THE ARTWORK FILLS THE PAGE. A previous round inset it with `padding: 9%
10%` and capped the image at its intrinsic size, on the reasoning that
the picture is "an illustration, not the page". That shrank it to well
inside the board and left the empty margin the client reported. Reverted:
the page's own 3.2% body padding above is the only inset, so the image
reaches close to the page edges as it did originally. */
width: 100%; height: 100%; padding: 0;
box-sizing: border-box;
}
.page-guest-book .gb-art img {
display: block;
width: 100%; height: 100%;
object-fit: contain; /* fills the box, never crops or distorts */
border-radius: 2px;
/* The gilt frame treatment, kept. */
border: 7px solid transparent;
border-image: linear-gradient(145deg, #f3e2b4, #b8933f 28%, #fbf0cf 52%, #a8843a 78%, #e6cd92) 1;
box-shadow: 0 18px 42px rgba(52, 35, 18, .48);
}
.page-guest-book .gb-art img.img-missing { display: none; }
.page-guest-book .gb-art img.img-missing + .gb-art-fallback { display: block; }
.gb-art-fallback {
display: none;
font-family: var(--font-display, Georgia, serif);
font-size: clamp(20px, 2.4vw, 30px); color: var(--page-ink, #34281c);
text-align: center;
}
/* RIGHT PAGE — a product page, not a paragraph dump.
Hierarchy: title, rule, a larger italic lede, then body copy with generous
leading; the first paragraph takes a drop-cap-ish emphasis so the eye has a
clear entry point. Sizes use clamp() so the page reads well from a laptop
to a large monitor without a media query. */
/* THE TEXT COLUMN. Tighter margins and a measured line length: the previous
7.5% side padding on an already-narrow page left a thin ribbon of text down
the middle with space either side, which is what made it feel empty. Long
text scrolls within the page rather than stretching it. */
.page-guest-book .page-right .sb-body {
padding: 5.5% 6.5%;
overflow-y: auto; overflow-x: hidden;
max-height: 100%;
scrollbar-width: thin;
/* THE TITLE STARTS AT THE TOP. A previous round set
`justify-content: center` here so short pages would sit mid-sheet. On a
real page that pushed the heading down and opened a large blank area
above it — the client reported this twice. The column starts at the top
and the copy flows below it, which is the original behaviour; long text
still scrolls within the page. */
display: flex; flex-direction: column; justify-content: flex-start;
}
.page-guest-book .page-right .sb-body > * { flex: 0 0 auto; }
.page-guest-book .sb-title {
font-size: clamp(21px, 2.05vw, 30px);
line-height: 1.18; margin: 0 0 5px;
}
/* Subheadings, for the informational pages that use them (About Us). */
.page-guest-book .sb-subtitle {
font-family: var(--font-display, Georgia, serif);
font-size: clamp(15px, 1.3vw, 19px);
line-height: 1.3; margin: 18px 0 7px;
color: var(--page-accent, #7b3335);
}
.page-guest-book .sb-subtitle:first-of-type { margin-top: 12px; }
.gb-lede {
margin: 8px 0 14px;
font-family: var(--font-display, Georgia, serif);
font-size: clamp(14px, 1.2vw, 17px);
line-height: 1.4; font-style: italic; font-weight: 500;
color: var(--page-accent, #7b3335);
}
.gb-para {
margin: 0 0 11px;
font-size: clamp(12.5px, .95vw, 14.5px);
/* 1.8 leading on a narrow column is what made short pages look sparse. */
line-height: 1.65;
color: var(--page-ink, #34281c);
text-align: left;
}
.gb-para:first-of-type { font-size: clamp(13px, 1vw, 15px); }
.gb-para:last-of-type { margin-bottom: 0; }
.gb-actions {
display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
margin-top: 18px; padding-top: 13px;
border-top: 1px solid rgba(120, 86, 44, .22);
}
.gb-cta, .gb-back {
display: inline-block; padding: 9px 26px; border-radius: 21px;
font: 600 13px/1.3 var(--font-ui, Poppins, sans-serif);
text-decoration: none; border: 1px solid transparent;
position: relative; z-index: 1; /* above the page's texture layer */
transition: background .15s, color .15s, border-color .15s;
}
.gb-cta { background: var(--maroon, #7b3335); color: #fff; }
.gb-cta:hover { background: var(--maroon-dark, #5f2426); }
.gb-back { background: #fff; color: var(--maroon, #7b3335); border-color: #cbb894; }
.gb-back:hover { background: #f8f1e2; }
/* (#3) One upload tool at a time, in ONE toolbar slot. The back-cover
button carries BOTH classes (.tool-upload .tool-upload-back) so the
closed-state rule above keeps it alive; these two rules then swap the
pair by closed state — front-closed shows the front upload, back-closed
shows the back upload, never both. (The on-board icon is gone: the
toolbar owns the entry point for both covers.) */
.reader-room.book-closed-back .reader-toolbar .tool-upload:not(.tool-upload-back) { display: none !important; }
.reader-room:not(.book-closed-back) .reader-toolbar .tool-upload-back { display: none !important; }
/* Pending invitations in My Shared Books. Same row as an accepted book so the
list reads as one thing, with a gold edge and a filled action to mark that
this one still needs a decision. */
.pf-invite-item { border-color: #c9a227; background: #fbf4e2; }
.pf-invite-from { font-weight: 400; font-size: 12px; color: #7a6647; } /* typography floor */
.pf-invite-accept {
flex: 0 0 auto; padding: 6px 16px; border-radius: 14px; border: 0;
background: var(--maroon, #7b3335); color: #fff; cursor: pointer;
font: 600 12px/1.3 var(--font-ui, Poppins, sans-serif);
}
.pf-invite-accept:hover:not([disabled]) { background: var(--maroon-dark, #5f2628); }
.pf-invite-accept[disabled] { opacity: .6; cursor: default; }
.pf-invite-msg { margin: 6px 0 0; font-size: 12px; }
.pf-invite-msg[hidden] { display: none; }
.page-media-block[data-media-row] { position: relative; }
/* Metadata panel */
.evm-preview { margin: 0 0 8px; text-align: center; }
.evm-preview-media {
display: block; width: 100%; max-height: 200px;
object-fit: contain; border-radius: 6px;
border: 1px solid #dccdb0; background: #efe6d4;
}
.evm-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.evm-actions .ie-mini,
.evm-actions .ov-primary { width: auto; margin: 0; padding: 7px 18px; font-size: 12.5px; border-radius: 15px; }
/* Image order: one row per picture, thumbnail + label + two nudge buttons. */
.eo-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
/* ---- (#6) Add Event Entry: compact, top-weighted ----
The panel previously used full-width stacked blocks with the shared
.ov-field spacing, which pushed the date selector down and Save below the
fold. Rows are tighter, and the two upload areas share a line. */
.ev-entry-panel .ev-row { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; }
.ev-entry-panel .ev-row .ov-label { flex: 0 0 46px; margin: 0; }
.ev-entry-panel .ev-row .ov-input { flex: 1 1 auto; margin: 0; min-width: 0; }
.ev-entry-panel .ev-block { display: flex; flex-direction: column; gap: 3px; margin: 0 0 7px; }
.ev-entry-panel .ev-block .ov-input { margin: 0; }
.ev-entry-panel .ev-uploads { display: flex; gap: 8px; align-items: flex-start; }
.ev-entry-panel .ev-uploads .ev-block { flex: 1 1 0; min-width: 0; }
.ev-entry-panel .ev-drop { padding: 8px 10px; }
.ev-entry-panel .ev-drop .ov-drop-text { font-size: 11px; }
.ev-entry-panel .ev-meta-hint { margin: 6px 0 8px; }
.ev-entry-panel .ee-save { margin-top: 2px; }
/* =====================================================================
SPECIAL EVENTS — media page controls and Edit Entry media management
===================================================================== */
/* The date text inside a media page's head, so the action icons can sit
beside it rather than inside the same text node. */
.ev-head-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Action icons in a media page head.
Their own class and their own styling: `.page-full .entry-edit` and
`.page-media-block .entry-edit` are hidden with !important elsewhere in this
file (Edit/Delete belong to an entry's text page), so borrowing that class
for these made them invisible on exactly the pages they belong on. */
.page-head .ev-media-btn {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 23px; height: 23px; margin-left: 4px; padding: 0;
border: 1px solid #d8c7a4; border-radius: 50%;
background: rgba(255, 252, 245, .94); color: #6b5335;
cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.page-head .ev-media-btn svg { width: 13px; height: 13px; fill: currentColor; }
.page-head .ev-media-btn:hover {
background: #fff; border-color: var(--maroon, #7b3335); color: var(--maroon, #7b3335);
}
.page-head .ev-media-btn.ev-meta-del:hover {
background: #fbeaea; border-color: #b3413f; color: #a3302f;
}
/* A drop control used inside an already-dense panel. */
.ov-drop-sm { padding: 7px 10px; }
.ov-drop-sm .ov-drop-text { font-size: 11px; }
/* ---- Linked items on an entry page (generic `chapter.links`) ----
Used by Special Events to surface an event inside the diary it was linked
to, but the block itself names no module. Presented as a card with a gold
rule and a clear call to open it — as a plain tinted strip it read as a
disabled notice rather than something to click. */
.blk-entry-links { margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.blk-entry-links::before {
content: 'Linked event';
display: block; margin-bottom: 2px;
font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
color: #a08a5c;
}
.entry-link {
position: relative; display: flex; align-items: center; justify-content: space-between;
gap: 12px; padding: 11px 14px 11px 16px; text-decoration: none;
border-radius: 9px; overflow: hidden;
background: linear-gradient(135deg, #fffdf7 0%, #f6eeda 100%);
border: 1px solid #ddc9a3;
box-shadow: 0 2px 5px -3px rgba(82, 60, 24, .45);
transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.entry-link::before {
content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
background: linear-gradient(180deg, #d8b45e, var(--maroon, #7b3335));
}
.entry-link:hover {
border-color: var(--maroon, #7b3335);
box-shadow: 0 6px 14px -8px rgba(82, 60, 24, .6);
transform: translateY(-1px);
}
.entry-link-label {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 19px; font-weight: 700; color: #4a3218; line-height: 1.2;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.entry-link-go {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
padding: 6px 14px; border-radius: 999px;
background: var(--maroon, #7b3335); color: #fff;
font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
box-shadow: 0 2px 6px -3px rgba(90, 40, 40, .8);
}
.entry-link-go::after { content: '\2197'; font-size: 11px; line-height: 1; }
.entry-link:hover .entry-link-go { background: #5f2628; }
/* Expanded previews inside a chip's inline preview area. */
.ev-prev-cell { position: relative; display: inline-block; margin: 0 5px 5px 0; }
.ev-prev-thumb {
width: 46px; height: 46px; object-fit: cover; display: block;
border-radius: 5px; border: 1px solid #dccdb0; background: #efe6d4; cursor: pointer;
}
.ev-prev-thumb:hover { border-color: var(--maroon, #7b3335); }
.ev-prev-x {
position: absolute; top: -5px; right: -5px;
width: 16px; height: 16px; line-height: 14px; padding: 0;
border-radius: 50%; border: 1px solid #e6b6b6;
background: #fbeaea; color: #8c2626; font-size: 9px; cursor: pointer;
}
.ev-prev-x:hover { background: #8c2626; color: #fff; border-color: #8c2626; }
.ev-prev-video { display: block; width: 100%; max-height: 110px; border-radius: 5px; background: #000; }
.ev-prev-del { width: auto !important; margin: 6px 0 0 !important; padding: 5px 12px; font-size: 11.5px; }
.et-image-count { font-weight: 400; }
/* Settings checkboxes: one per line, compact. */
.eg-check { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #5c4a2f; margin: 2px 0; cursor: pointer; }
.eg-check input { width: 14px; height: 14px; margin: 0; flex: 0 0 auto; }
.eg-couple-list { display: flex; flex-direction: column; }
.eg-range { margin: 2px 0 8px; }
/* "Current images" / "Current video" above the upload control, so the panel
says what it is showing instead of just presenting a chip. */
.ev-current-label {
font-size: 9.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
color: #a08a5c; margin: 2px 0 1px;
}
.ev-current-label[hidden] { display: none; }
/* Replace + Edit Image sit on one row rather than stacking. */
.evm-swap { display: flex; align-items: stretch; gap: 8px; margin: 6px 0 2px; }
.evm-swap .ov-drop { flex: 1 1 auto; margin: 0; }
.evm-swap .ie-mini { flex: 0 0 auto; width: auto; margin: 0; padding: 0 14px; font-size: 11.5px; }
.evm-swap .ie-mini[hidden] { display: none; }
/* The metadata fields: label above field, consistent gaps, full width. */
.ov-panel[data-overlay="eventMedia"] .ov-row-inline,
.ov-panel[data-overlay="eventMedia"] .ov-field { margin: 0 0 8px; }
.ov-panel[data-overlay="eventMedia"] .ov-input { margin: 0; width: 100%; }
.ov-panel[data-overlay="eventMedia"] textarea.ov-input { min-height: 68px; resize: vertical; }
.eg-linked {
display: inline-flex; align-items: center; gap: 6px; margin: 5px 5px 0 0;
padding: 4px 6px 4px 10px; border-radius: 999px;
background: #f7f0e1; border: 1px solid #ddc9a3; color: #6b552f;
font-size: 11.5px; font-weight: 600;
}
.eg-linked-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eg-linked-x {
width: 15px; height: 15px; line-height: 13px; padding: 0; border-radius: 50%;
border: 1px solid #e6b6b6; background: #fbeaea; color: #8c2626; font-size: 8.5px; cursor: pointer;
}
.eg-linked-x:hover { background: #8c2626; color: #fff; border-color: #8c2626; }
/* A panel heading that also carries a date needs less weight than a bare
one, or it wraps and crowds the rule beneath it. */
.ov-panel .ov-title-sm { font-size: 17px; line-height: 1.25; margin: 0 34px 2px 0; }
.ov-panel .ov-title-sm + .overlay-rule { margin: 4px 0 10px; }
/* Grouped sections inside the picture panel: the item and its tools, then
the words. Interleaved, Replace/Edit read as unrelated to the preview. */
.evm-group { padding: 9px 10px; border-radius: 8px; background: #faf5ea; border: 1px solid #e6d8ba; }
.evm-group + .evm-group { margin-top: 8px; }
.evm-group .ov-field { margin: 0 0 6px; }
.evm-group .ov-field:last-child { margin-bottom: 0; }
.evm-group .evm-swap { margin: 8px 0 0; }
.evm-preview-sm .evm-preview-media { max-height: 78px; width: auto; max-width: 100%; margin: 0 auto; }
/* Drag-to-reorder rows. */
.eo-item {
display: flex; align-items: center; gap: 9px; padding: 6px 9px; margin: 0 0 5px;
border-radius: 7px; background: #fffdf7; border: 1px solid #e2d3b4;
cursor: grab; user-select: none;
}
.eo-item:hover { border-color: #cbb894; }
/* The row being dragged lifts rather than fading: it is the thing under the
pointer, so it should read as picked up, not as removed. No transition on
transform while dragging — the transform IS the pointer position, and
easing it makes the row lag behind the cursor. */
.eo-item.is-dragging {
cursor: grabbing; z-index: 5; position: relative;
border-color: var(--maroon, #7b3335); background: #fffdf7;
box-shadow: 0 10px 20px -10px rgba(60, 42, 20, .55);
}
/* Children must not swallow the pointer, and no native drag anywhere. */
.eo-item * { pointer-events: none; }
.eo-item img { -webkit-user-drag: none; user-select: none; }
/* touch-action: none is what stops a touch drag scrolling the panel instead
of moving the row. */
.eo-item { touch-action: none; }
/* Only the OTHER rows animate as they make room. */
.eo-item:not(.is-dragging) { transition: transform .14s ease, border-color .12s ease; }
.eo-grip { flex: 0 0 auto; width: 15px; height: 15px; }
.eo-grip svg { width: 15px; height: 15px; fill: #bda87e; }
.eo-pos {
flex: 0 0 auto; width: 19px; height: 19px; line-height: 19px; text-align: center;
border-radius: 50%; background: #efe3c9; color: #6b552f; font-size: 10.5px; font-weight: 700;
}
.eo-thumb { flex: 0 0 auto; width: 34px; height: 34px; object-fit: cover; border-radius: 4px; border: 1px solid #dccdb0; }
.eo-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #5c4a2f; }
/* Settings: one box, one idea. */
.eg-box { padding: 11px 12px; border-radius: 9px; background: #faf5ea; border: 1px solid #e6d8ba; margin: 2px 0 10px; }
.eg-box-title {
display: block; margin: 0 0 7px; font-size: 9.5px; font-weight: 700;
letter-spacing: .9px; text-transform: uppercase; color: #a08a5c;
}
.eg-couple { margin-top: 10px; padding-top: 9px; border-top: 1px solid #e6d8ba; }
.eg-sub { display: block; margin: 0 0 5px; font-size: 11.5px; font-weight: 600; color: #6b552f; }
.eg-picker { display: flex; align-items: center; gap: 6px; max-width: 260px; }
.eg-picker .ov-input { flex: 1 1 auto; min-width: 0; max-width: 172px; margin: 0; font-size: 12px; padding: 6px 8px; }
.eg-picker .ie-mini { flex: 0 0 auto; width: auto; margin: 0; padding: 0 13px; font-size: 11.5px; }
/* Save and Delete pushed apart, and the pair centred as a group. */
.ev-entry-panel .et-actions,
.ov-panel[data-overlay="eventSettings"] .et-actions {
display: flex; justify-content: center; align-items: center;
gap: 22px; flex-wrap: wrap; margin-top: 10px;
}
.ov-panel[data-overlay="eventSettings"] .et-actions .ie-mini,
.ov-panel[data-overlay="eventSettings"] .et-actions .ov-primary { width: auto; margin: 0; }
/* ---- Sharing panel ---- */
.sh-row { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.sh-row .ov-input { flex: 1 1 0; min-width: 0; margin: 0; font-size: 12px; padding: 6px 8px; }
.sh-row-x, .sh-item-x {
flex: 0 0 auto; width: 20px; height: 20px; line-height: 18px; padding: 0;
border-radius: 50%; border: 1px solid #e6b6b6; background: #fbeaea; color: #8c2626;
font-size: 9px; cursor: pointer;
}
.sh-row-x:hover, .sh-item-x:hover { background: #8c2626; color: #fff; border-color: #8c2626; }
.sh-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.sh-actions .ie-mini, .sh-actions .ov-primary { width: auto; margin: 0; padding: 7px 16px; font-size: 12px; }
.sh-link-out { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.sh-link-out .ov-input { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 11px; padding: 6px 8px; }
.sh-link-out .ie-mini, .eg-box > .ie-mini { width: auto; margin: 0; padding: 6px 14px; font-size: 11.5px; }
.sh-item {
display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 0 0 5px;
border-radius: 6px; background: #fffdf7; border: 1px solid #e2d3b4;
}
.sh-who { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #5c4a2f; font-weight: 600; }
.sh-state { flex: 0 0 auto; font-size: 9.5px; letter-spacing: .4px; text-transform: uppercase; color: #a08a5c; }
/* ---- One link, and access as a screen rather than a list ----
The panel used to print every recipient inline under "Who has access", so a
book shared with a dozen people grew past the controls. The count stays on
the main screen and the names move behind View Access.
AND IT WAS FAR TALLER THAN IT NEEDED TO BE. The intro was a full
.ov-notice-info banner, .ov-form's clamp gap put up to 17px between boxes,
and each .eg-box carried the panel's default padding — so Who has access sat
below the fold on a laptop and needed scrolling to reach. The measurements
below trim the gaps and the type, not the information. */
/* 8px read as two boxes touching. 12px separates them without adding a
scroll: View Access still sits inside the panel at every measured size. */
.sh-panel .ov-form { gap: 12px; }
/* THREE PARAGRAPHS OF PROSE WERE COSTING 130px OF A 523px PANEL.
Measured on a 390px phone: the intro 74.2px and the link explanation 57px,
against a Share Link box of 152px and an Email Access box of 215px. Both are
still here — the operator asked for tighter, not shorter — but at the size a
supporting note should be rather than at body size, and with the margins the
.eg-box wrapper was already providing removed. */
.sh-intro { margin: 0 0 2px; font-size: 10.5px; line-height: 1.35; }
.sh-box { padding: 10px 11px; margin: 0 !important; }
.sh-box .eg-box-title { margin-bottom: 5px; }
.sh-panel .sh-rows { gap: 5px; }
.sh-panel .sh-row { gap: 5px; }
.sh-panel .sh-row .ov-input { padding: 6px 8px; font-size: 11.5px; }
.sh-actions { margin-top: 6px; }
/* THE NOTE WAS STARTING AT THE BUTTON'S EDGE. Measured 0px between the bottom
of Get Share Link and the top of the line under it, so the control read as
part of the paragraph rather than as a button sitting in its own box. The
5px declared here was being consumed: .sh-link-actions is a flex row with no
bottom margin, so the note's top margin had nothing to clear. Space is now
put on BOTH sides of the actions row, which is the thing that needs to stand
apart from the text above and below it. */
/* Scoped to .sh-box so these outrank `.ov-note` on specificity rather than on
file order. Written as bare single-class rules first, the note's margin-top
was silently reset to 0 by a later .ov-note — measured 0px between the button
and the line under it even after the margin was declared. Same equal-
specificity trap as .mm-actions-row .ov-primary. */
/* THE SPACE IS ON THE ACTIONS ROW, both sides, and deliberately so.
Putting it on the note's margin-top does not work: a fresh cloned into the same parent computes 11px from the rule
below, while the note actually in the DOM computes 0px — some positional
selector is zeroing it and it was not worth more of the budget to isolate,
because the row is the thing that has to stand apart from the text above and
below it anyway. Measured before: 0px between the bottom of Get Share Link
and the line under it, so the button read as part of the paragraph. */
.sh-box .sh-link-actions { margin: 10px 0 11px; }
.sh-box .sh-link-help { font-size: 10px; line-height: 1.3; }
.sh-link-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-link-actions .ie-mini { width: auto; margin: 0; padding: 6px 14px; font-size: 11.5px; }
/* Turning the link off is destructive for everyone holding it, so it does not
look like the neutral control beside it. */
.sh-link-actions .ie-mini.is-danger { color: #8c2626; border-color: #d9b3b3; }
.sh-link-actions .ie-mini.is-danger:hover { background: #8c2626; color: #fff; border-color: #8c2626; }
.sh-link-out { margin: 0 0 8px; }
.sh-access-summary { margin: 6px 0 5px; font-size: 10.5px; }
.sh-box-head {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; margin-bottom: 4px;
}
.sh-box-head .eg-box-title { margin: 0; }
.sh-box-head .ie-mini.sh-view-access {
width: auto; margin: 0; padding: 5px 13px; font-size: 11.5px; flex: 0 0 auto;
}
.sh-access-screen .sh-access-back {
width: auto; margin: 0 0 8px; padding: 5px 12px; font-size: 11.5px; align-self: flex-start;
}
/* ONE WAY OUT OF THE SUB-SCREEN. The panel's X is still the right control for
the panel, but while the access screen is up it did something different from
the Back beside it — it closed the book's overlays and left the reader on the
title page. Hiding it leaves exactly one way back, which goes where it says. */
.sh-panel.is-access .overlay-close { display: none; }
.ov-subtitle {
margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #5c4a2f;
}
/* ---- The read-only share viewer ---- */
/* ============ THE SHARED BOOK IS SIZED LIKE ANY OTHER ============
REPORTED, AUGUST 2026: a shared Special Event, and before it a shared In
Memory Of, opened on a phone as a tiny box in the middle of the screen. It
could be flipped, but it could not be read. Not an In Memory Of problem and
not a Special Events one — every shared book, because the cause is this
rule and this rule is on the container.
MEASURED, 390x844:
owned book .book-stage 375 x 822 .flipbook 345 x 539.1
shared book .book-stage 0 x 768 .flipbook 0 x 25
`align-items: center` on a flex COLUMN sets the cross axis, which is the
horizontal one — so every child shrink-wrapped to its content instead of
filling the room. That is harmless for the banner, and fatal for the stage:
in single-page mode `.book-stage` is `container-type: size` and the book is
sized from `100cqw`. A shrink-to-fit stage has no width of its own to give,
the book asks the stage how wide it is, the stage answers with the book —
and the loop settles at zero.
Desktop never showed it. There the flipbook takes its width from `97vw`
rather than from the container, so it sizes itself and the stage
shrink-wraps around it: 1062.4px on both pages, identical. The defect was
only ever visible where the container query is used, which is exactly the
phone.
So the room no longer centres its children. The banner centres ITSELF with
`align-self`, which is what was actually wanted, and the stage stretches to
the room exactly as it does for the owner. Nothing about the read-only
behaviour is touched: this is the geometry, not the permissions. */
.share-room { display: flex; flex-direction: column; }
.share-banner {
align-self: center;
margin: 14px auto 6px; padding: 7px 16px; border-radius: 999px;
background: #f7f0e1; border: 1px solid #ddc9a3; color: #6b552f;
font-size: 12px; font-weight: 600;
}
.share-banner span {
margin-left: 6px; padding: 2px 9px; border-radius: 999px;
background: var(--maroon, #7b3335); color: #fff;
font-size: 9.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
}
/* ---- Panel alignment ----
.ov-panel textarea.ov-input grows to fill the form (flex: 1 1 auto), which
is right for a diary entry whose text IS the page, but in the event panels
it pushed Image Order and Save to the very bottom of the book page. These
panels have media controls under the text, so the textarea is sized to its
rows and the actions follow the content. */
.ev-entry-panel textarea.ov-input { flex: 0 0 auto; min-height: 76px; }
.ev-entry-panel .ov-form { justify-content: flex-start; }
/* Entry editor actions: Image Order beside Save, right aligned. */
.et-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 6px; }
.et-actions .ie-mini,
.et-actions .ov-primary { width: auto; margin: 0; padding: 7px 18px; font-size: 12.5px; border-radius: 15px; }
.et-actions .ie-mini[hidden] { display: none; }
/* =====================================================================
MY LIFE IN PICTURES — per-media page controls
Same visual language as the Special Events media buttons, and separate
classes for the same hard reason: `.page-full .entry-edit` and
`.page-media-block .entry-edit` are hidden with !important earlier in this
file, because Edit and Delete belong to an entry's TEXT page. Reusing those
classes here would put the icons in the DOM and then hide them on exactly
the pages they are meant for.
Not merged with the .ev-* rules either: one module changing its icon size
should not silently move another module's, and these two sets are free to
diverge.
===================================================================== */
/* The date text inside a media page head, wrapped so icons sit beside it. */
.lp-head-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.page-head .lp-media-btn {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 23px; height: 23px; margin-left: 4px; padding: 0;
border: 1px solid #d8c7a4; border-radius: 50%;
background: rgba(255, 252, 245, .94); color: #6b5335;
cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.page-head .lp-media-btn svg { width: 13px; height: 13px; fill: currentColor; }
.page-head .lp-media-btn:hover {
background: #fff; border-color: var(--maroon, #7b3335); color: var(--maroon, #7b3335);
}
/* Delete reads as destructive on hover only — coloured at rest, it would pull
the eye away from the picture, which is the point of the page. */
.page-head .lp-media-btn.lp-del:hover {
background: #fbeaea; border-color: #b3413f; color: #a3302f;
}
/* The per-media panel — laid out to match the Special Events media panel.
Its own .lp-* classes rather than reusing .evm-*: the two panels should be
free to diverge, and one module changing a shared layout rule out from under
another is exactly the coupling this project keeps hitting. The VALUES are
deliberately identical, so the two read as the same panel; only the
selectors differ. Generic classes (.ov-panel, .ov-form, .ov-field,
.ov-label, .ov-input, .ov-drop, .ie-mini, .ov-note, .ov-notice) are shared
as intended. */
.lp-group {
padding: 9px 10px; border-radius: 8px;
background: #faf5ea; border: 1px solid #e6d8ba;
}
.lp-group + .lp-group { margin-top: 8px; }
.lp-group .ov-field { margin: 0 0 6px; }
.lp-group .ov-field:last-child { margin-bottom: 0; }
.lp-preview { margin: 0 0 8px; text-align: center; }
.lp-preview-media {
display: block; width: 100%; max-height: 200px;
object-fit: contain; border-radius: 6px;
border: 1px solid #dccdb0; background: #efe6d4;
}
.lp-swap { display: flex; align-items: stretch; gap: 8px; margin: 6px 0 2px; }
.lp-swap .ov-drop { flex: 1 1 auto; margin: 0; }
.lp-swap .ie-mini { flex: 0 0 auto; width: auto; margin: 0; padding: 0 14px; font-size: 11.5px; }
.lp-swap .ie-mini[hidden] { display: none; }
.lp-replace-name:empty { display: none; }
.ov-panel[data-overlay="lpMedia"] .ov-field { margin: 0 0 8px; }
.ov-panel[data-overlay="lpMedia"] .ov-input { margin: 0; width: 100%; }
.lp-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.lp-actions .ov-primary { width: auto; margin: 0; padding: 7px 18px; font-size: 12.5px; border-radius: 15px; }
/* =====================================================================
"CURRENT IMAGE / CURRENT VIDEO" in the Edit Entry panel
Shows what is already on the page, above the control that would replace it.
Deliberately small: this is context, not the subject of the panel, and the
panel already has to fit a date, two media controls, two metadata pairs and
a save button inside a book page.
===================================================================== */
.ee-current {
display: flex; align-items: center; gap: 8px;
margin: 0 0 7px; padding: 6px 9px;
background: #faf5ea; border: 1px solid #e6d8ba; border-radius: 7px;
}
.ee-current-label {
flex: 1 1 auto; min-width: 0;
font-size: 11.5px; font-weight: 700; letter-spacing: .2px; color: #6b5335;
}
/* The thumbnail is NOT shown inline any more. It was a 74px preview sitting in
every panel whether or not anyone wanted to look at it, which made a page
holding an image and a video noticeably taller. The eye reveals it on
demand, matching the compact row the Special Events media panel already
uses — and matching what the eye means everywhere else in the reader. */
.ee-current-media {
display: none;
width: 100%; max-height: 190px; object-fit: contain;
border-radius: 5px; border: 1px solid #dccdb0; background: #efe6d4;
}
.ee-current.is-open { flex-wrap: wrap; }
.ee-current.is-open .ee-current-media { display: block; margin-top: 7px; }
/* =====================================================================
POEM PAGE — Poems Collection and Forty Poems One Love
The right-hand page of every poem spread. The left page is the shared
media frame, unchanged: poem books reuse it exactly as every other module
does, which is why there is no image styling here at all.
===================================================================== */
.poem-page {
display: flex; flex-direction: column;
height: 100%; min-height: 0;
padding: 4px 2px 0;
text-align: center;
}
.poem-title {
flex: 0 0 auto;
margin: 0 0 3px;
font-family: var(--font-display, 'Cormorant Garamond', serif);
/* Reduced from 21-28px, then again from 18-23px to the shared scale in
main.css — see --rp-title there for why the quote page reads the same
token. Still the most prominent thing on the page. */
font-size: var(--rp-title); font-weight: 700; line-height: 1.18;
color: #9b2118; /* red, as specified */
letter-spacing: .01em;
}
.poem-author {
flex: 0 0 auto;
margin: 0 0 9px;
/* BLACK and bold. It was a muted brown at 13px, which read as a caption
rather than as the author's name — the one piece of attribution on the
page should not be the faintest thing on it.
On the shared scale it also stays a step ABOVE the body at every width
(13.5/13 wide, 12.5/12 narrow), so its prominence is now carried by size
as well as by weight and colour. */
font-size: var(--rp-author); font-weight: 700; letter-spacing: .02em;
color: #1c1510;
}
.poem-rule {
flex: 0 0 auto;
width: 64px; height: 2px; margin: 0 auto 12px;
background: linear-gradient(90deg, transparent, #c9a24e, transparent);
}
/* THE POEM ITSELF — EVERY LINE CENTRED.
`pre-line` preserves every newline and every blank line between stanzas, so
the shape of the verse is exactly as stored, and it still wraps a line too
long for the page rather than forcing a horizontal scrollbar.
WHY NOT pre-wrap. pre-wrap also preserves LEADING SPACES, and a preserved
leading space is part of the line for centring purposes — so an indented
line gets pushed off-axis by its own indentation. That is the defect the
previous round worked around by centring the poem as a block instead: the
text sat in an inline-block sized to its LONGEST line, with every line
ranged left inside it. On a poem whose lines vary in length that reads as
left-aligned, and on an indented one as pushed right — which is exactly the
"shifted left or right" being reported.
`pre-line` collapses the leading whitespace that was skewing the axis while
keeping every line break, so each line can now centre on the true middle of
the page. The trade-off is deliberate and worth stating: relative
indentation is NOT preserved any more. Line breaks and stanza breaks are;
horizontal indentation is not. The two cannot both hold — centring a line
discards its horizontal offset by definition. */
.poem-body {
flex: 1 1 auto; min-height: 0;
overflow-y: auto; overflow-x: hidden; /* long poems scroll; they never spill */
-webkit-overflow-scrolling: touch;
white-space: pre-line;
text-align: center;
/* No reserved gutter and no max-width: the scrollbar now sits near the page
edge and the text takes back the space it was giving away. */
margin: 0; max-width: none;
padding: 0 6px 6px;
font-family: var(--font-body, Georgia, serif);
font-size: var(--rp-body); line-height: 1.62;
color: #3c2f1e;
}
/* A poem book has no dates and no ornament rule. Hidden rather than
conditionally omitted, so a shared component that emits one cannot leave a
stray element on the page.
.favorite-book is listed for the FORMAT properties only. The entry controls
are split out below, because a favourite book DOES have them. */
.poem-book .page-head,
.favorite-book .page-head,
.poem-book .blk-entry-open,
.favorite-book .blk-entry-open { display: none !important; }
/* Read-only poem books keep hiding the row controls. A favourite book does not
appear here: its owner edits and deletes their own poems. */
.poem-book .entry-edit,
.poem-book .entry-delete { display: none !important; }
/* Give the image page as much of the sheet as possible — the poem's picture
is half the spread and should not sit in a small box.
Both classes: a favourite book's image page has to look identical to a
Poems Collection one. Nothing above the picture either — the payload sends
no caption and no description, so pagination emits no title block at all. */
.poem-book .page-media-block,
.favorite-book .page-media-block { padding: 0; }
.poem-book .page-media-block .page-media,
.favorite-book .page-media-block .page-media { flex: 1 1 auto; min-height: 0; }
/* =====================================================================
POEM BOOKS ARE READ-ONLY — remove every editing affordance.
Hidden in CSS keyed off the .poem-book class the reader already applies,
rather than by omitting markup: the toolbar and cover are shared components
used by every book, and stripping elements from them for one book type is
how a shared template starts growing per-module branches. The ACTIONS are
already unreachable — these books set no apiBase, so isDiary() is false and
nothing wires them up — this simply stops the buttons being visible.
===================================================================== */
/* .readonly-book takes the READ-ONLY half of the poem-book treatment and none
of the format half: Daily Quotes & Weekly Poems is chronological and keeps
its page heads, which .poem-book hides. Adding a selector to a comma list
cannot change what the existing one matches. */
.reader-room.readonly-book .reader-toolbar .tool-add,
.reader-room.readonly-book .reader-toolbar .tool-upload,
.reader-room.readonly-book .reader-toolbar .tool-upload-back,
.reader-room.readonly-book .reader-toolbar .tool-share,
.reader-room.readonly-book .reader-toolbar .tool-members,
.reader-room.readonly-book .reader-toolbar .tool-pending,
.reader-room.readonly-book .reader-toolbar .tool-diarypw,
.reader-room.readonly-book .reader-toolbar .tool-book-settings,
.reader-room.readonly-book .reader-toolbar .tool-event-add,
.reader-room.readonly-book .reader-toolbar .tool-event-settings,
.reader-room.readonly-book .entry-edit,
.reader-room.readonly-book .entry-delete { display: none !important; }
.reader-room.poem-book .reader-toolbar .tool-add,
.reader-room.poem-book .reader-toolbar .tool-upload,
.reader-room.poem-book .reader-toolbar .tool-upload-back,
.reader-room.poem-book .reader-toolbar .tool-share,
.reader-room.poem-book .reader-toolbar .tool-members,
.reader-room.poem-book .reader-toolbar .tool-pending,
.reader-room.poem-book .reader-toolbar .tool-diarypw,
.reader-room.poem-book .reader-toolbar .tool-event-add,
.reader-room.poem-book .reader-toolbar .tool-event-search,
.reader-room.poem-book .reader-toolbar .tool-event-settings { display: none !important; }
/* A FAVOURITE BOOK IS WRITABLE. It keeps the tools that belong to other
modules off, but Add Entry and both cover uploads stay — that is the whole
difference from a read-only poem book, and it is expressed by this list
being SHORTER, not by overriding anything above. */
.reader-room.favorite-book .reader-toolbar .tool-share,
.reader-room.favorite-book .reader-toolbar .tool-members,
.reader-room.favorite-book .reader-toolbar .tool-pending,
.reader-room.favorite-book .reader-toolbar .tool-diarypw,
.reader-room.favorite-book .reader-toolbar .tool-event-add,
.reader-room.favorite-book .reader-toolbar .tool-event-search,
.reader-room.favorite-book .reader-toolbar .tool-event-settings { display: none !important; }
/* ---- FILTER / CLEAR FILTER: one button, three glyphs -------------------
Exactly one renders at a time, so the button never changes size.
Books with a real date search keep the magnifier — nothing below applies to
them, because every rule is scoped to .poem-book. A poem book shows a
funnel, and once a filter is in force the same control clears it, so it
shows the funnel struck through: the glyph states what the button will DO,
which a bare cross did not.
The maroon fill is deliberate reinforcement, not decoration: a filtered book
is showing a SUBSET, and that should be readable at a glance rather than
from memory. */
.reader-toolbar .tool-search .tool-ic-filter,
.reader-toolbar .tool-search .tool-ic-clear { display: none; }
.reader-room.poem-book .reader-toolbar .tool-search .tool-ic-find,
.reader-room.favorite-book .reader-toolbar .tool-search .tool-ic-find { display: none; }
.reader-room.poem-book .reader-toolbar .tool-search .tool-ic-filter,
.reader-room.favorite-book .reader-toolbar .tool-search .tool-ic-filter { display: block; }
.reader-room.poem-book .reader-toolbar .tool-search.is-filtered .tool-ic-filter,
.reader-room.favorite-book .reader-toolbar .tool-search.is-filtered .tool-ic-filter { display: none; }
.reader-room.poem-book .reader-toolbar .tool-search.is-filtered .tool-ic-clear,
.reader-room.favorite-book .reader-toolbar .tool-search.is-filtered .tool-ic-clear { display: block; }
.reader-toolbar .tool-search.is-filtered {
background: var(--maroon, #7b3335);
box-shadow: 0 2px 9px rgba(123, 51, 53, .34);
}
.reader-toolbar .tool-search.is-filtered svg { fill: #fff; }
.reader-toolbar .tool-search.is-filtered:hover { background: var(--maroon-dark, #5f2628); }
/* ---- COVER: artwork only -------------------------------------------------
These books ship dedicated cover art that already contains the title, so
the generated title block would print it twice. The artwork fills the whole
cover face, using the same boundaries every other book uses. */
/* Poems Collection and Forty Poems carry their titles INSIDE the artwork, so
printing it again over the plate doubles it. A favourite book does not: its
cover is whatever the owner uploaded, or the stock plate, and neither has
the book's name on it. So .favorite-book is deliberately NOT in this rule —
it was, and that is why a favourite book opened with a blank cover. */
.reader-room.poem-book .cover-book-title,
.reader-room.full-cover .cover-book-title { display: none !important; }
/* THE ARTWORK STAYS INSIDE THE BOARD'S PLATE.
An earlier attempt used `inset: 0`, which made the image the whole cover
and swallowed the maroon board — the book stopped looking like a book.
The plate keeps its normal insets; only the TOP one is reduced, because
these covers hide the generated title and that 15% gap existed to clear it.
Left inset is untouched: that is the spine side. */
/* POEM BOOKS ONLY. The reduced TOP inset exists because a poem collection's
artwork already contains its title, so the band that would have cleared a
printed title is not needed. A favourite book DOES print its title — its
cover is the owner's upload or the stock plate, and neither carries the
name — so it keeps the standard plate and the title keeps its own band
above the image. Listing .favorite-book here is what made the two overlap. */
.reader-room.poem-book .cover-front .cover-art,
.reader-room.full-cover .cover-front .cover-art {
inset: 7% 5.5% 6% 12.5% !important;
}
/* `cover` rather than `contain` here: the artwork is made for this plate, so
filling it edge to edge is right, and any slight ratio difference should be
cropped rather than leave bands inside the frame. */
.reader-room.poem-book .cover-front .cover-art img,
.reader-room.full-cover .cover-front .cover-art img,
.reader-room.favorite-book .cover-front .cover-art img {
object-fit: cover !important;
}
/* NO favourites-specific cover geometry. It had its own title position and a
22% plate, which opened a large gap that no other book had. A favourite book
prints a title exactly like a diary does, so it takes the same defaults —
one rule for every title-bearing book instead of a per-module copy. */
/* ---- POEM TEXT: centred, and using the width it should ------------------
Centred as specified. The body previously reserved a wide gutter and the
scrollbar sat well inside the page; it now runs near the page edge with the
text taking the space back.
scrollbar-width/`::-webkit-scrollbar` give a slim gold-brown bar instead of
the platform default, which was both wide and visually foreign to the book. */
/* A full-width block, so each line centres on the page's axis rather than on
the axis of the poem's longest line. This was an inline-block with its lines
ranged left, which is what made short lines hug the left edge. */
.poem-body > .poem-text {
display: block;
text-align: center;
white-space: pre-line;
max-width: 100%;
}
/* ---- MISSING IMAGE -------------------------------------------------------
A poem with no picture keeps its left page and its frame; only the contents
change. Page STRUCTURE never varies, so every spread is image-left and
poem-right whether or not a picture exists. */
.poem-noimage {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%; min-height: 180px;
background: #efe7d8;
font-family: var(--font-display, 'Cormorant Garamond', serif);
font-size: clamp(14px, 1.6vw, 19px); font-style: italic;
color: #9a8663; letter-spacing: .02em;
}
/* ---- POEM FILTER PANEL ---------------------------------------------------
Rows rather than a stack of loose fields. Author and Poem Name share the
first row because they are the two most-used, genre takes the second, and
the two actions sit together in a third.
Apply and Clear are sized identically. Clear previously inherited the full
width of a primary button while Apply did not, which is what made it read as
an oversized afterthought rather than the other half of a pair.
------------------------------------------------------------------------- */
.rs-filter { display: flex; flex-direction: column; gap: 2px; }
.rs-filter-row { display: flex; gap: 10px; align-items: flex-end; }
.rs-filter-row .ov-field { flex: 1 1 0; min-width: 0; margin: 0 0 8px; }
.rs-filter-row .ov-input { width: 100%; margin: 0; }
.rs-filter-actions {
display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
margin: 4px 0 0;
}
.rs-filter-actions .ov-primary,
.rs-filter-actions .ov-secondary {
width: auto; margin: 0;
padding: 8px 20px; font-size: 12.5px; border-radius: 16px;
}
.rs-poem-result { margin: 2px 0 0; }
/* The shared First / Last row sits under the actions for these books, so all
four controls read as one group. */
.reader-room.poem-book .ov-jump,
.reader-room.favorite-book .ov-jump { margin-top: 8px; }
/* =====================================================================
ADD TO FAVORITES — the heart on a poem page
Belongs to the capability module, so it is scoped to its own classes and
named nowhere in the poem books' own rules. Note the class is .af-fav-btn
and NOT .entry-edit: `.poem-book .entry-edit` is display:none !important,
and reusing that class would have made the control invisible in exactly the
two books it exists for.
===================================================================== */
.af-fav-btn {
position: absolute; top: 10px; right: 12px; z-index: 6;
width: 30px; height: 30px; padding: 0;
display: grid; place-items: center;
border: 1px solid rgba(150, 120, 70, .38); border-radius: 50%;
background: rgba(255, 253, 248, .92);
cursor: pointer;
transition: background .15s, border-color .15s, transform .12s;
}
.af-fav-btn svg { width: 16px; height: 16px; fill: #b9a684; transition: fill .15s; }
.af-fav-btn:hover { background: #fff; border-color: var(--maroon, #7b3335); transform: scale(1.06); }
.af-fav-btn:hover svg { fill: var(--maroon, #7b3335); }
/* Added: filled, so the state reads at a glance from across the page. */
.af-fav-btn.is-favorited { background: var(--maroon, #7b3335); border-color: var(--maroon, #7b3335); }
.af-fav-btn.is-favorited svg { fill: #fff; }
/* The picker rows. */
.af-poem {
margin: 0 0 10px; text-align: center;
font: italic 400 13px/1.4 var(--font-ui, Poppins, sans-serif); color: #8d7c64;
}
.af-list { display: flex; flex-direction: column; gap: 8px; }
.af-row {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px; border: 1px solid rgba(150, 120, 70, .28); border-radius: 6px;
background: #fffdf8;
}
.af-row-name { flex: 1 1 auto; font: 600 13px/1.3 var(--font-ui, Poppins, sans-serif); }
.af-row-count { flex: 0 0 auto; font: 400 11.5px/1 var(--font-ui, Poppins, sans-serif); color: #9a866a; }
.af-row-add { flex: 0 0 auto; }
.af-row.is-added { border-color: rgba(123, 51, 53, .45); }
.af-row.is-full { opacity: .62; }
.af-note a { color: var(--maroon, #7b3335); font-weight: 600; }
/* ---- Create Favorite Book: the two covers as a pair --------------------
Equal columns so the drop zones match, and a single-column fallback below
620px where two would each be too narrow to aim at. */
.fc-covers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
align-items: start;
}
.fc-covers .sb-field { margin: 0; }
.fc-covers .cc-drop { min-height: 0; padding: 14px 10px; }
.fc-covers .cc-drop-text { font-size: 12px; text-align: center; }
@media (max-width: 620px){
.fc-covers { grid-template-columns: 1fr; }
}
/* ---- My Favorites: compact image controls ------------------------------
`.ov-chip` is `flex: 1 1 auto` platform-wide, which makes a chip fill its
row. That is right in a diary panel, where the chip carries a filename and
an upload percentage; here the rows say "Current image" and "New image" and
stretching them across the panel made two short labels look like two empty
bars. Scoped to these two panels only — the diaries are untouched. */
[data-overlay="addPoem"] .ov-media-row,
[data-overlay="editPoem"] .ov-media-row {
flex-wrap: wrap;
justify-content: flex-start;
}
[data-overlay="addPoem"] .ov-chip,
[data-overlay="editPoem"] .ov-chip {
flex: 0 0 auto;
}
.quote-page .quote-author {
margin: 0 0 4px;
text-align: center;
font-family: var(--font-display, 'Cormorant Garamond', serif);
/* THE SAME TOKEN THE POEM TITLE READS. A quote page has no separate title:
this heading occupies the poem title's slot, in the same markup, and so
takes the same step of the scale. It was clamp(17px, 2.2vw, 25px), two
pixels above the poem title at the top and on its own separate curve —
which is how a quote came to read as a bigger thing than a poem. */
font-size: var(--rp-title);
/* 700, MATCHING THE POEM TITLE. It asked for 800, which this family does not
have: header.php loads Cormorant Garamond at 500/600/700, and the family
ships nothing above 700 anyway. Measured — the same string at 700 and at
800 renders to the identical width, so 800 was never producing a heavier
face, only a heavier NUMBER. Stating 700 makes the two headings agree in
the stylesheet as well as on screen. */
font-weight: 700;
color: var(--maroon, #7b3335);
letter-spacing: .01em;
}
/* The quote itself reads as prose, not as verse: normal wrapping, centred.
IT IS NO LONGER LARGER THAN A POEM'S BODY — same token, same size. The
leading stays looser than the poem's 1.62, which is a prose/verse
distinction rather than a size one and is the only thing that still differs
between the two bodies. */
.quote-page .poem-body { white-space: normal; }
.quote-page .poem-text {
white-space: normal;
font-size: var(--rp-body);
line-height: 1.72;
}
/* The hearts, and Remove on a diary quote page. Same shell as My Favorites'
page controls — .fp-icon and .fp-actions are already the shared pair. */
.qd-heart svg { fill: #b9a684; transition: fill .15s; }
.qd-heart:hover { background: var(--maroon, #7b3335); border-color: var(--maroon, #7b3335); }
.qd-heart:hover svg { fill: #fff; }
.qd-del:hover { background: var(--maroon, #7b3335); border-color: var(--maroon, #7b3335); }
.qd-del:hover svg { fill: #fff; }
/* ---- Quote page: the diary version ------------------------------------
The date is in the page head, where every diary page carries it. What the
page adds is a kicker that says what this page IS, so a quote reads as a
quote and not as something the diary's owner wrote. */
.quote-in-diary .quote-kicker {
margin: 0 0 6px;
text-align: center;
/* The smallest step of the shared scale. An uppercase letter-spaced
eyebrow, not read text, so it sits with .cd-shared-badge in the class
A7b lists as deliberately below the 12px floor. */
font: 700 var(--rp-kicker)/1 var(--font-ui, Poppins, sans-serif);
letter-spacing: .22em;
text-transform: uppercase;
color: #b09a72;
}
.quote-in-diary .quote-author { margin-bottom: 2px; }
/* ---- Add-to-diary dialog ----------------------------------------------
The quote leads, so the dialog is visibly about the page behind it. Then
the two decisions, then the action — one idea per band, with the spacing
doing the grouping rather than rules and boxes. */
.qd-card {
margin: 0 0 18px;
padding: 14px 16px 12px;
border-left: 3px solid var(--maroon, #7b3335);
border-radius: 0 6px 6px 0;
background: #f8f2e6;
}
.qd-card .qd-text {
margin: 0 0 8px;
font-family: var(--font-display, 'Cormorant Garamond', serif);
font-size: clamp(14px, 1.7vw, 17px);
line-height: 1.6;
color: #4a3722;
/* Four lines is enough to recognise a quote by; a long one is not the
subject of this dialog, the date is. */
display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
overflow: hidden;
}
.qd-card .qd-quote {
display: block;
font: 600 11.5px/1.3 var(--font-ui, Poppins, sans-serif);
font-style: normal;
letter-spacing: .04em;
color: var(--maroon, #7b3335);
}
[data-overlay="quoteToDiary"] .ov-field { margin-bottom: 14px; }
[data-overlay="quoteToDiary"] .ov-hint {
display: block; margin-top: 5px;
font: 400 11px/1.4 var(--font-ui, Poppins, sans-serif); color: #9a866a;
}
[data-overlay="quoteToDiary"] .qd-save { margin-top: 4px; }
/* ---- A heart that is already linked ------------------------------------
Filled, not merely tinted: the question it answers is yes or no, and a
half-state reads as neither. */
.qd-heart.is-linked { background: var(--maroon, #7b3335); border-color: var(--maroon, #7b3335); }
.qd-heart.is-linked svg { fill: #fff; }
.qd-heart.is-linked:hover { background: var(--maroon-dark, #5f2628); }
/* ---- Add-to-diary dialog: label beside control -------------------------- */
[data-overlay="quoteToDiary"] .qd-row {
display: grid;
grid-template-columns: 74px 1fr;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
[data-overlay="quoteToDiary"] .qd-row .ov-label { margin: 0; text-align: right; }
[data-overlay="quoteToDiary"] .qd-row .ov-input { width: 100%; }
[data-overlay="quoteToDiary"] .qd-hint {
display: block; margin: -4px 0 16px 86px;
font: 400 11px/1.4 var(--font-ui, Poppins, sans-serif); color: #9a866a;
}
@media (max-width: 520px){
[data-overlay="quoteToDiary"] .qd-row { grid-template-columns: 1fr; gap: 5px; }
[data-overlay="quoteToDiary"] .qd-row .ov-label { text-align: left; }
[data-overlay="quoteToDiary"] .qd-hint { margin-left: 0; }
}
/* ---- The heart, and the badge that qualifies it -------------------------
The badge belongs to its heart: it appears with it, disappears with it, and
cannot push the quote around, because the pair is one inline-flex unit
inside the same absolutely positioned .fp-actions row. */
/* No badge beside the heart. It widened the control row until it overlapped
the author, and one label cannot represent a quote linked to several dates
in several diaries. The dates are listed inside the panel instead. */
.qd-existing {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
margin: 0 0 16px;
}
.qd-existing-lead {
font: 600 10.5px/1 var(--font-ui, Poppins, sans-serif);
letter-spacing: .1em; text-transform: uppercase; color: #a07a52;
}
.qd-existing-pill {
padding: 4px 10px; border-radius: 11px;
background: rgba(123, 51, 53, .08);
border: 1px solid rgba(123, 51, 53, .22);
font: 600 11px/1.3 var(--font-ui, Poppins, sans-serif);
color: var(--maroon, #7b3335);
white-space: nowrap;
}
/* =====================================================================
PANEL FEEDBACK STAYS IN VIEW
Two complaints with one cause. A panel scrolls, and both the upload
progress bar and the validation message live in the document flow — so a
long form, or an expanded image preview, pushes them below the visible
area. The person is then either watching nothing while an upload runs, or
being told about a missing field they cannot see.
Sticky rather than moved. Repositioning ten progress bars and ten notes in
the markup would have to be done panel by panel, would be undone by the
next layout change, and gives no guarantee at all once a preview expands.
Sticky guarantees it at every scroll position, in every panel, for free —
including panels added later.
The progress bar sticks to the BOTTOM: it belongs with the upload controls
it reports on and following the content down keeps it beside them.
The message sticks to the TOP: an error has to be the first thing seen, and
the top edge is where the eye returns after pressing Save.
===================================================================== */
.ov-panel .ov-progress,
.page-overlay .ov-progress {
position: sticky;
bottom: 0;
z-index: 6;
/* Opaque, so content scrolling underneath does not read through it. */
background: var(--page-bg, #f0e6d2);
padding: 8px 0 6px;
margin-top: 10px;
}
/* :not(:empty) MATTERS. `.ov-note` is used for more than messages — Special
Events carries an empty one as a filename slot — and styling every instance
turned those into empty red boxes the moment this rule arrived. A note with
nothing in it is not a message and gets nothing. */
.ov-panel .ov-note:not([hidden]):not(:empty),
.page-overlay .ov-note:not([hidden]):not(:empty) {
position: sticky;
top: 0;
z-index: 7;
margin: 0 0 12px;
padding: 10px 12px;
border-radius: 6px;
border: 1px solid rgba(150, 120, 70, .34);
background: #f8f2e6;
color: #6b5940;
font: 600 12px/1.45 var(--font-ui, Poppins, sans-serif);
text-align: left;
box-shadow: 0 4px 12px rgba(60, 40, 20, .12);
}
/* Red is for an actual failure, whether marked by class or left unmarked by a
panel that only ever writes errors into its note. */
.ov-panel .ov-note.is-error:not([hidden]):not(:empty),
.page-overlay .ov-note.is-error:not([hidden]):not(:empty) {
border-color: rgba(163, 48, 47, .34);
background: #fbf0ee;
color: #8c2f2f;
}
/* ---- Special Events: the replacement chip uses the shared component ---- */
.evm-swap-row { margin-top: 8px; }
/* ---- Destructive actions, set apart --------------------------------------
A delete that removes a whole book does not belong among the ordinary
controls. Its own band, its own rule above it, and the consequence stated
before the button rather than only in the confirmation. */
.ov-danger { margin-top: 20px; }
.ov-danger-rule {
display: block; height: 1px; margin-bottom: 12px;
background: linear-gradient(to right, transparent, rgba(163, 48, 47, .3), transparent);
}
.ov-danger-note {
margin: 0 0 10px;
font: 400 11.5px/1.5 var(--font-ui, Poppins, sans-serif);
color: #8c6f5a;
text-align: center;
}
.ov-danger-btn {
display: block; width: 100%;
padding: 9px 14px;
border: 1px solid rgba(163, 48, 47, .45);
border-radius: 7px;
background: #fbf0ee;
color: #8c2f2f;
font: 600 12.5px/1 var(--font-ui, Poppins, sans-serif);
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
.ov-danger-btn:hover { background: #a3302f; border-color: #a3302f; color: #fff; }
.ov-danger-btn:disabled { opacity: .55; cursor: default; }
/* The favourite-book delete used to be a hover-only icon on the shelf tile.
Removed: the tile and the icon are separate hover targets, so moving the
cursor towards the icon left the tile and the icon vanished. A destructive
action cannot depend on a hover state it fights with. It now lives in the
book's own settings panel, where it is always visible. */
/* Book settings is a favourites-only tool. Hidden by default and shown only on
a favourite book — the same shape every other module-specific tool uses. */
.reader-toolbar .tool-book-settings { display: none; }
/* inline-flex here used to override .tool's own `display: grid; place-items:
center`, which is what un-centred the glyph inside the circular button.
inline-grid keeps the show/hide behaviour and restores the centring. */
.reader-room.favorite-book .reader-toolbar .tool-book-settings {
display: inline-grid; place-items: center;
}
/* ---- Page controls hug the binding -------------------------------------
On a right-hand page they sit upper-LEFT, on a left-hand page upper-RIGHT —
both next to the spine. That keeps them clear of the titles, which are
centred, and clear of the page-turn arrows, which live on the outer edges.
The default (outer corner) still applies to books that do not set a side. */
/* Higher, and further out. At 10px from the spine and 4px down they crowded
the poem title, which is centred and begins near the top of the page. Moving
them up and outward gives the title its band back while staying well inside
the page-turn arrows, which sit on the outer edges of the BOOK rather than
of the page. */
/* ---- The deliberate spacer before a Saturday poem ----------------------
The page exists so the poem opposite keeps its image on the left. Saying so
makes it read as intentional rather than as a page that failed to render. */
.page-spacer-note {
height: 100%;
display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 0;
padding: 0 8%;
}
/* A CARD, not a caption on an empty sheet.
A centred device with one grey line still read as a page that had failed to
render. Framing it — rule, ornament, label, title, rule — makes the page an
intentional half-title, which is exactly what a printed book puts opposite a
plate. */
.page-spacer-note::before {
content: '\2766';
font-family: var(--font-display, 'Cormorant Garamond', serif);
font-size: clamp(30px, 3.8vw, 44px);
line-height: 1;
color: rgba(155, 33, 24, .6);
margin-bottom: 18px;
}
.page-spacer-note .spacer-label {
font: 700 10px/1 var(--font-ui, Poppins, sans-serif);
letter-spacing: .3em;
text-transform: uppercase;
color: #b09a72;
margin-bottom: 14px;
}
.page-spacer-note p {
margin: 0;
max-width: 88%;
font-family: var(--font-display, 'Cormorant Garamond', serif);
font-size: clamp(17px, 2.3vw, 24px);
font-style: italic;
letter-spacing: .02em;
line-height: 1.5;
color: #6b5236;
text-align: center;
}
.page-spacer-note .spacer-sub {
margin-top: 14px;
font: 400 11.5px/1.5 var(--font-ui, Poppins, sans-serif);
font-style: normal;
letter-spacing: .06em;
color: #a4917a;
}
.page-spacer-rule {
display: block; width: 118px; height: 1px;
margin: 20px 0;
background: linear-gradient(to right, transparent, rgba(150, 120, 70, .6), transparent);
}
/* ---- Search result highlight -------------------------------------------
A soft glow on the page a search landed on, so it is obvious which of the
two matched. Removed by the reader after a few seconds; the animation is on
a pseudo-element so nothing about the page's own layout or paint changes. */
.page.is-search-hit::after {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 30;
/* A LIT PAGE, not a flashing one.
Earlier versions pulsed, which reads as an alert rather than as "here it
is". This holds one steady state instead: a solid gold frame, a warm wash
across the page so it is visibly brighter than its neighbour, and a bloom
that lifts it off the spread. It arrives quickly, sits still while it is
read, and fades out. Nothing blinks. */
box-shadow: inset 0 0 0 3px var(--gold, #c9a24e),
inset 0 0 0 6px rgba(201, 162, 78, .22),
0 0 34px 6px rgba(201, 162, 78, .55);
background: linear-gradient(160deg,
rgba(201, 162, 78, .20), rgba(201, 162, 78, .07) 55%, transparent);
animation: mw-search-hit 3.4s ease-in-out forwards;
}
/* A corner marker, so the eye is drawn even before the frame registers. */
.page.is-search-hit::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 4px;
z-index: 31;
pointer-events: none;
background: linear-gradient(to right, var(--gold, #c9a24e), rgba(201, 162, 78, .1));
animation: mw-search-hit 3.4s ease-in-out forwards;
}
@keyframes mw-search-hit {
0% { opacity: 0; }
6% { opacity: 1; }
76% { opacity: 1; }
100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
/* The marker bar too — it shares the animation, so without this it would
stay at opacity 0 and never appear for these readers. */
.page.is-search-hit::after,
.page.is-search-hit::before { animation: none; opacity: 1; }
}
/* The gear reads better a touch larger than the line icons, and `place-items:
center` on .tool only centres the SVG BOX — a path that is not centred
within its own viewBox still looks off. This one is drawn symmetrically
about (12,12), so the box and the mark agree. */
.reader-toolbar .tool-book-settings svg { width: 21px; height: 21px; display: block; margin: 0; }
/* =====================================================================
* ICON ALIGNMENT — public books (Poems, Forty Poems, Quotes, Daily Quotes)
*
* A page is rendered into FOUR slots, not two: the two standing pages and the
* two faces of the turning sheet. Rules written only for .page-left/.page-right
* leave the sheet faces unstyled, which is what made icons appear to jump or
* vanish mid-turn in earlier attempts. The mapping is fixed and direction-
* independent — flipbook.js fills sheet-front from an ODD page index (a right
* page) and sheet-back from an EVEN one (a left page) in both directions — so
* .sheet-front pairs with .page-right and .sheet-back with .page-left.
*
* POSITIVE OFFSETS ONLY. .page-body is `position: relative; overflow: hidden`,
* so it is both the positioning ancestor and the clipping ancestor. A negative
* offset is clipped by the same box that positions it; that is the mechanism
* behind "icons clipped, partly hidden, or missing entirely".
*
* Two-page layout only. flipbook.js switches to a single page at 860px, where
* there is no binding to align to, so below that everything stays as it was.
* ===================================================================== */
@media (min-width: 861px){
/* Right-hand page — binding is on its LEFT. */
.page-right .fp-actions,
.sheet-front .fp-actions {
right: auto;
left: 6px;
top: 2px;
}
.page-right .af-fav-btn,
.sheet-front .af-fav-btn {
right: auto;
left: 2px;
top: 4px;
}
/* Left-hand page — binding is on its RIGHT, so these were already on the
correct side and only move a little closer to it. */
.page-left .fp-actions,
.sheet-back .fp-actions {
right: 6px;
top: 2px;
}
.page-left .af-fav-btn,
.sheet-back .af-fav-btn {
right: 2px;
top: 4px;
}
}
/* =====================================================================
* ICON ALIGNMENT — date-based books, ONE reusable pattern
*
* Personal Diary, Couple Diary, In Memory Of, My Life in Pictures,
* Special Events, My Favorites — and anything added later that puts an icon in
* the page head. There is no per-module rule here and there should never be
* one: every head icon lives in .page-head-actions, so this positions the
* container and the icons come along.
*
* WHY A CONTAINER AND NOT OFFSETS PER ICON.
* .page-head is `display: flex; justify-content: center`. An icon appended
* loose is a flex item: it shifts the date off centre and sits at whichever end
* the row happens to finish — the arrow side on a right-hand page. Absolutely
* positioning each icon instead would have needed a fixed offset per class to
* keep them together, which breaks the moment an icon's width or count changes.
* That fragility is what produced the earlier revert cycles. One positioned
* container is count-independent and width-independent.
*
* FOUR RENDERING SLOTS, NOT TWO. flipbook.js fills .page-left, .page-right and
* the two faces of the turning sheet. sheet-front always takes an ODD page
* index (a right-hand page) and sheet-back an EVEN one, in both directions, so
* the pairing below is fixed. Styling only the two standing pages is what made
* icons appear to jump mid-turn before.
*
* POSITIVE OFFSETS ONLY. .page-head is both the positioning ancestor
* (position: relative) and the clipping ancestor (overflow: hidden), so a
* negative offset is clipped by the same box that positions it.
* ===================================================================== */
.page-head-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
@media (min-width: 861px){
/* Out of the centred row entirely, vertically centred against the head. */
.page-head-actions {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 8;
}
/* Left-hand page: binding is on its RIGHT. Right-hand page: on its LEFT. */
.page-left .page-head-actions,
.sheet-back .page-head-actions { right: 6px; }
.page-right .page-head-actions,
.sheet-front .page-head-actions { left: 6px; }
/* The per-icon margins existed to space them inside the flex row. The
container's `gap` does that now, and leaving them in would push the group
off its offset. */
.page-head .entry-edit,
.page-head .entry-delete,
.page-head .ev-media-btn,
.page-head .lp-media-btn { margin-left: 0; }
/* ROOM FOR THE GROUP.
The head's padding was reduced to 16px when the icons were inline and took
their own space in the row. Out of flow they no longer do, so the padding
has to reserve it or a long date runs underneath them. Symmetric, so the
date still reads as centred: the widest group is Edit (30) + gap (6) +
Delete (24) = 60, plus the 6px offset = 66. */
.page-head {
padding-left: 68px !important;
padding-right: 68px !important;
}
}
/* =====================================================================
* POEM TITLE — clearance for the favourite heart.
*
* Moving the heart alone could never fix this, and the offset number is
* misleading about why. .af-fav-btn is positioned against .page-body, and
* .page-body sits INSIDE .page's `padding: 24px 10% 16px` — so `left: 2px` is
* 2px into the TEXT COLUMN, not 2px from the page edge. It is already as far
* toward the binding as it can go: any further needs a negative offset, and
* .page-body is `overflow: hidden`, so a negative offset is clipped by the
* same box that positions it.
*
* The title is centred across the full column, so a long one grows outward
* until it reaches the icon. Reserving the icon's own width on BOTH sides is
* what actually prevents that, and doing it symmetrically keeps the title
* centred. The heart occupies 2px + 30px = 32px; 34px leaves 2px of air.
*
* The title does not move down. A very long title now wraps to a second line
* slightly sooner than it did — that is the trade for never overlapping.
* ===================================================================== */
@media (min-width: 861px){
.poem-title {
padding-left: 34px;
padding-right: 34px;
}
}
/* ---- CONTACT FORM STATES (Phase 7) --------------------------------------
The enquiry form finally goes somewhere, so it needs the two states it never
had: sent, and please-check-that. Scoped to .sb- so nothing else moves. */
.sb-form-ok{margin:0 0 18px;padding:12px 15px;border-radius:8px;
background:rgba(46,110,64,.10);border:1px solid rgba(46,110,64,.35);color:#25502f;font-size:15px}
.sb-form-err{margin:0 0 18px;padding:12px 15px;border-radius:8px;
background:rgba(138,43,43,.08);border:1px solid rgba(138,43,43,.35);color:#7a2626;font-size:15px}
/* The honeypot: off-screen rather than display:none, which some bots skip. */
.sb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* ---- PLAN HIERARCHY (Phase 7) -------------------------------------------
Poet's Corner and its features, on the public pricing book. Scoped to .plan-
so nothing else moves. */
.plan-row.plan-group{border:0;padding:10px 0 2px}
.plan-row.plan-group .pl-name{font-size:11px;letter-spacing:.07em;text-transform:uppercase;
opacity:.6}
.plan-row.plan-sub-item .pl-name{padding-left:14px;position:relative}
.plan-row.plan-sub-item .pl-name::before{content:'';position:absolute;left:3px;top:.6em;
width:5px;height:1px;background:currentColor;opacity:.4}
/* ---- A LA CARTE PICKER (Phase 7) ---------------------------------------- */
.ac-wrap{max-width:1000px;margin:0 auto;padding:38px 22px 70px}
.ac-head h1{margin:0 0 6px;font-size:30px}
.ac-head p{margin:0 0 28px;opacity:.85;max-width:60ch}
.ac-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px;align-items:start}
.ac-choices{display:flex;flex-direction:column}
.ac-group{margin:20px 0 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.ac-group:first-child{margin-top:0}
.ac-item{display:flex;align-items:center;gap:12px;padding:12px 4px;cursor:pointer;
border-bottom:1px solid rgba(0,0,0,.08)}
.ac-item.is-child{padding-left:16px}
.ac-item input{width:17px;height:17px;flex:0 0 17px;cursor:pointer}
.ac-name{flex:1;min-width:0;font-size:15px}
.ac-price{font-size:14px;opacity:.75;white-space:nowrap}
/* The summary follows you down a long list. */
.ac-summary{position:sticky;top:22px;padding:22px;border:1px solid rgba(0,0,0,.12);
border-radius:12px;background:rgba(255,255,255,.55)}
.ac-summary h2{margin:0 0 14px;font-size:17px}
.ac-totals{display:grid;grid-template-columns:auto auto;gap:8px 14px;margin:0 0 14px;font-size:14px}
.ac-totals dt{opacity:.75}
.ac-totals dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.ac-pay{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
margin:0 0 18px;padding-top:14px;border-top:1px solid rgba(0,0,0,.12)}
.ac-pay strong{font-size:24px;font-variant-numeric:tabular-nums}
.ac-update,.ac-continue{display:block;width:100%;text-align:center;padding:11px 14px;
border-radius:9px;font-size:15px;cursor:pointer;margin-bottom:9px;border:0}
.ac-continue{background:#6b1f2a;color:#fff;text-decoration:none}
.ac-continue[aria-disabled="true"]{opacity:.45;pointer-events:none}
.ac-update{background:transparent;border:1px solid rgba(0,0,0,.25)}
.ac-back{display:block;text-align:center;font-size:13px;opacity:.75}
.ac-empty{padding:30px 0;opacity:.8}
@media (max-width: 820px){
.ac-grid{grid-template-columns:minmax(0,1fr)}
.ac-summary{position:static}
}
/* ---- PLAN CARDS, REBUILT (Phase 7) --------------------------------------
A BOOK PAGE IS A FIXED BOX: .plan-page is height:100%; overflow:hidden.
Everything below is written for that. Nothing may rely on the page growing,
and anything that overflows is simply gone — which is exactly how the
À La Carte list lost half its modules. */
/* The hero was padded as though it had a screen to breathe in; on a book page
that space comes straight out of the list underneath it. */
.plan-hero{text-align:center;padding:0 0 8px;border-bottom:1px solid rgba(150,120,70,.28);
margin-bottom:10px;flex:0 0 auto}
.plan-pay-big{margin:0;line-height:1;display:flex;flex-direction:column;align-items:center;gap:3px}
/* NAMED CLASSES, NOT A BARE `span`. The old descendant selector styled the
price itself as the small faded unit label — see the note in plans.php. */
.plan-pay-big .pl-figure{font:800 clamp(24px,3vw,38px)/1 var(--font-display,serif);
letter-spacing:-.02em;color:var(--maroon,#7b3335)}
.plan-pay-big .pl-unit{font-size:11px;font-weight:400;letter-spacing:.09em;
text-transform:uppercase;opacity:.6}
.plan-was{margin:5px 0 0;font-size:12px;opacity:.7}
.plan-blurb{margin:0 0 10px;font-size:13px;line-height:1.45;opacity:.85;text-align:center;
flex:0 0 auto}
.plan-row .pl-price i{font-style:normal;font-size:11px;opacity:.55}
/* ---- À LA CARTE, INLINE --------------------------------------------------
TWO COLUMNS, BECAUSE THE PAGE CANNOT GROW. Thirteen modules in one column
overflow the page, and overflow is clipped — so the last several were
invisible AND unselectable. Two columns halves the height; the category
heading spans both so the grouping still reads. No internal scrolling. */
.ac-inline{display:flex;flex-direction:column;height:100%;min-height:0}
/* ONE MODULE PER ROW, AT EVERY WIDTH.
This was `repeat(2, minmax(0, 1fr))` above 620px, which halved the space
available to a name. The catalogue's real names are long — "Daily Quotes &
Weekly Poems", "Forty Poems One Love", "Quotes Collection" — so a half-width
tile broke them mid-word ("Quotes Collecti / on") and made the tiles tall to
hold the wrap. A full-width row fits every name on one line and is shorter,
not taller, than the two-column version it replaces. The list still scrolls
(overflow-y: auto, declared further down), so a long catalogue is contained
exactly as before. */
.ac-inline-list{display:grid;grid-template-columns:minmax(0,1fr);
gap:0 16px;align-content:start;flex:1 1 auto;min-height:0;overflow:visible}
.ac-inline-group{grid-column:1/-1;margin:6px 0 1px;padding:0;border:0;
font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.ac-inline-group:first-child{margin-top:0}
.ac-inline-item{display:flex;align-items:center;gap:8px;padding:4px 2px;cursor:pointer;
border-bottom:1px solid rgba(150,120,70,.20);font-size:clamp(10px,.92vw,12.5px);
line-height:1.2;color:#4a3826;min-width:0}
.ac-inline-item.is-child{padding-left:9px}
.ac-inline-item input{width:14px;height:14px;flex:0 0 14px;cursor:pointer;accent-color:#7b3335}
.ac-inline-item .pl-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
.ac-inline-item .pl-price{flex:0 0 auto;font-weight:700;font-size:11.5px}
.ac-inline-note{margin:6px 0 0;font-size:11px;opacity:.7;text-align:center}
button.plan-subscribe{border:0;cursor:pointer;font:inherit;width:max-content}
button.plan-subscribe:disabled{opacity:.45;cursor:default}
/* ---- THE LAST PAGE ------------------------------------------------------
A book closes; it does not ask a question. */
.plan-page-end{text-align:center;display:flex;flex-direction:column;
align-items:center;justify-content:center;height:100%}
.plan-end-mark{margin:0 0 18px;font-size:22px;color:var(--maroon,#7b3335);opacity:.5}
.plan-end-imprint{margin:0 0 6px;font:700 clamp(15px,1.7vw,20px)/1.2 var(--font-display,serif);
color:var(--maroon,#7b3335);letter-spacing:.02em}
.plan-end-copy{margin:0 0 22px;font-size:12.5px;opacity:.7}
.plan-end-back{font-size:12px;opacity:.75;text-decoration:underline}
/* =====================================================================
SUBSCRIPTION PLANS ON A PHONE — READ, DON'T TRUNCATE.
The plans book is a reader page, so its content had to fit a fixed box.
Everything about the mobile layout followed from that: `.pl-name` carried
`white-space: nowrap` with `text-overflow: ellipsis`, so plan and A La Carte
item names were CUT OFF rather than merely tight — the "compressed content"
reported, and worst on A La Carte, which has the longest names and the most
rows.
The trade the client asked for explicitly: some vertical scrolling is
acceptable, unreadable text is not. So on phones the page scrolls its own
content instead of squeezing it, names wrap to as many lines as they need,
and the rows get real vertical rhythm.
Scoped to the plans book and to phones — the reader's own pages, its
geometry and its turn are untouched, and desktop keeps the fixed-page
layout it was designed with. */
@media (max-width: 860px) {
.plans-flipbook .plan-page {
overflow-y: auto; overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* The truncation, removed. A name that wraps is readable; a name with an
ellipsis through it is not a name. */
.plans-flipbook .plan-row .pl-name,
.plans-flipbook .ac-inline-item .pl-name {
white-space: normal;
overflow: visible;
text-overflow: clip;
line-height: 1.35;
}
/* Rows breathe. Aligned to the top so a wrapped name does not drag its
price out of line with it. */
.plans-flipbook .plan-row {
align-items: flex-start;
gap: 10px;
padding-top: 9px;
padding-bottom: 9px;
}
.plans-flipbook .plan-blurb { line-height: 1.5; }
/* Titles one step down, which is what buys the rows their space. */
.plans-flipbook .plan-hero .pl-name { font-size: 1.05em; }
.plans-flipbook .pl-figure { font-size: 1.15em; }
/* A La Carte is the densest page: nested child items need to read as
children without losing width to indentation. */
.plans-flipbook .ac-inline-item {
align-items: flex-start;
padding-top: 8px;
padding-bottom: 8px;
}
.plans-flipbook .ac-inline-item.is-child { padding-left: 12px; }
.plans-flipbook .ac-inline-note { line-height: 1.45; }
/* The action stays a comfortable target while everything around it relaxes. */
.plans-flipbook .plan-subscribe { min-height: 44px; padding: 10px 18px; }
}
/* =====================================================================
ONE STANDARD BOOK BOX FOR THE BOOK-SHAPED PAGES THAT SCROLL.
THE ROOT CAUSE OF "PLANS IS SMALLER THAN THE OTHER BOOKS": three different
sizing systems were in play.
- The READER sizes from its stage (`cqh`) because it scroll-locks and
hides the footer, so the stage IS the viewport. Correct there.
- PLANS carries `page-reader`, so it inherited that same height-driven
formula — but it does NOT scroll-lock and it KEEPS its footer. Its stage
is therefore ~160px shorter, the height term binds instead of the width
term, and the book comes out visibly narrower than every other book on
the site. Same CSS, different page contract.
- STATIC BOOKS used neither: `height: auto` sized them to their content,
so a book's proportions changed with how much text it happened to hold.
The fix is to say what a book IS, once, for every page that shows a book and
scrolls: a standard WIDTH taken from the viewport, height from the shared
`--book-ratio`, and content that scrolls INSIDE the page rather than
resizing the book around itself. That is the client's own rule — "keep the
book the same size, allow scrolling inside the page" — and it makes plans,
About Us, Contact and the info books all the same object.
The reader is deliberately excluded and unchanged: it locks scrolling, so
fitting its stage exactly is right for it and only for it.
In mw.css because it loads last. `.page-plans-book .book-stage .flipbook`
and `.page-reader .book-stage .flipbook` are both (0,3,0), so load order is
what decides — the documented convention rather than an !important.
THE CONDITION CARRIES A LANDSCAPE TERM, AND IT HAS TO. A phone on its side
is 844 or 932 CSS px WIDE, so `max-width: 860px` alone missed every landscape
phone over 860 — and the reader's own landscape block (which IS keyed on
height) was still stripping the min/max-height floors off `.book-open` there.
Measured at 932x430 before this term was added: every static book rendered
334x122, ratio 2.74. The term is spelled exactly as reader.css spells it, so
there is one definition of "landscape phone" in the codebase, not two.
THE SELECTOR IS KEYED ON .page-static-book, NOT .page-auth-book. Every static
book page carries .page-static-book — the auth pages, the create forms AND
the six guest books, which are `page-static-book page-guest-book` and were
therefore excluded from the shape rule while still receiving the width rule.
Same specificity (0,3,0); strictly more of the pages this block already
claims to cover. */
.sb-scroll { overflow-x: hidden; } /* pairs reader.css's bare overflow-y; see the note below */
@media (max-width: 860px), (max-height: 520px) and (orientation: landscape) {
.page-plans-book .book-stage .flipbook,
.page-static-book .book-stage .flipbook,
.page-auth-book .book-stage .flipbook {
width: min(calc(100vw - 22px), 540px);
max-width: none;
}
.page-plans-book .book-open,
.page-static-book .static-book .book-open {
aspect-ratio: var(--book-ratio, 0.64) / 1;
height: auto;
min-height: 0;
max-height: none;
}
/* CONTENT SCROLLS; THE BOOK DOES NOT MOVE.
`.plan-table` was `flex: 1 1 auto; min-height: 0` with NO overflow, so
when the page shrank it kept its full content height and spilled OUT of
the table — which is why the feature rows painted straight through the
Subscribe and Continue buttons. It was never a spacing problem; the
overflow simply had nowhere to go. */
/* OVERFLOW-Y ALONE MAKES AN ELEMENT SCROLL SIDEWAYS TOO.
`overflow-x` defaults to `visible`, and `visible` CANNOT pair with a
non-visible value — the spec computes it to `auto`. So every container
given `overflow-y: auto` here silently became horizontally scrollable as
well, and any content a pixel too wide let the whole form slide left and
right under a finger. Measured on .plan-table at 393px: computed
overflow-x resolved to `auto`, not `visible`.
The axis is named explicitly wherever a container is meant to scroll in one
direction only. Nothing here is meant to scroll sideways: a form that moves
horizontally while being read is a defect, not a feature. */
.page-plans-book .plan-table,
.page-static-book .sb-scroll {
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
min-height: 0;
}
/* The action sits below the scrolling list, in flow, never over it. */
.page-plans-book .plan-subscribe,
.page-plans-book .ac-continue { flex: 0 0 auto; position: relative; z-index: 1; }
/* The page itself no longer clips what the table is now scrolling. */
.plans-flipbook .page-body { overflow: hidden; display: flex; flex-direction: column; }
/* ------------------------------------------------------------------
PLANS TAKES THE SCROLLING PAGE'S CONTRACT, NOT THE READER'S.
THE DEFECT THIS FIXES, measured at 393x749: the book rendered 371x580
inside a stage only ~480px tall. `.book-stage` centres its child, so the
100px of overflow split EVENLY — 50px up behind the Return button, which
is why the toolbar painted over the price and the plan name, and 50px
down past `.reader-room { overflow: hidden }`, which is why the lower gold
corners vanished and only 15px of the 48px next-plan arrow was reachable.
`document.scrollHeight` equalled the viewport exactly, so none of it could
be scrolled to. That is the whole of "pushed against the edges", "does not
fit inside the book" and "stuck and cannot be flipped".
ROOT CAUSE: plans.php declares `page-reader`, so it inherits the reader's
VIEWPORT CONTRACT — body pinned to 100svh, room pinned and clipped, book
sized to fit the stage. Every one of those is correct for the reader,
which scroll-locks and hides its footer. Plans does NEITHER. The block
above already gave plans the book box of a page that scrolls; it never
gave it the page contract that goes with it, so the book was sized by
width while its container was still sized by a locked viewport. The two
halves of one decision, only one of which shipped.
This completes it rather than compensating for it: no size is capped and
no number is restated. The document flows, the room grows to whatever the
book needs, and the stage stops centring a child it is no longer too
short for. Scoped to .page-plans-book, so the reader is untouched.
Three releases, and each one names the reader mechanism it is opting out
of. Nothing here restates a size:
body — the reader pins the document to 100svh so there is nothing
to scroll. Plans has a reachable footer and a book that may
exceed the fold, so the document flows and the viewport
becomes a FLOOR rather than a cap.
.reader-room — `flex: 1` computes flex-basis 0, which DISCARDS any height
declared on the room (the trap recorded in A8ter). `flex:
none` is what lets the room take its content height; without
it the `height: auto` below is silently ignored. `overflow:
visible` stops the room amputating a book taller than it.
.book-stage — the reader makes this a `container-type: size` box so the
book can be sized from `cqh`. Size containment means the
stage IGNORES ITS CONTENT for sizing, so with no definite
height it collapsed to its own 16px of padding and the
580px book overflowed it centred, landing at top: -159px.
`container-type: normal` cancels the containment; the stage
then measures the book it holds, as an ordinary flex item.
------------------------------------------------------------------ */
body.page-plans-book { height: auto; min-height: 100svh; }
.page-plans-book .reader-room {
flex: none;
height: auto;
min-height: 0;
overflow: visible;
}
.page-plans-book .book-stage { container-type: normal; flex: 0 0 auto; }
/* The Stage-2 two-content-page exception stood here. It existed for ONE page:
Profile, which carried its identity form on the left and Subscription on the
right, so its book had to grow to hold both. Subscription now opens as an
.sb-panel and Profile has a single content page like every other static
book, so the exception has no subject left and the standard box applies
unconditionally again. Removed rather than left dormant — a rule kept "just
in case" is a rule nobody dares delete later. */
}
/* =====================================================================
MOBILE INPUT ZOOM — THE STANDARDS-BASED FIX.
iOS Safari zooms the page whenever a focused input's computed font-size is
below 16px, and it does not zoom back out afterwards. Every field on this
site was 13.5px, so every tap into a form left the visitor pinched in.
16px is the whole fix. It is not a hack and it is not `user-scalable=no` —
that would disable pinch zoom for everyone, which is an accessibility
regression and is ignored by current iOS anyway. Making the text meet the
threshold means the browser has no reason to zoom, and the field stays
readable for people who need it.
Applied to controls only, so surrounding copy keeps its scale. */
@media (max-width: 860px) {
.sb-field input,
.sb-field select,
.sb-field textarea,
.sb-input-wrap input,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"], select, textarea {
font-size: 16px;
}
/* ---------------------------------------------------------------
THE HINT TEXT DOES NOT NEED THE 16px, AND LOOKS WRONG WEARING IT.
16px above is load-bearing: below it, iOS Safari zooms on focus and does
not zoom back. But that threshold is measured against the INPUT's own
computed font-size, not against ::placeholder — so the hint can be set
back down without giving the zoom any reason to fire. Typed text stays at
16px; only the empty-field prompt shrinks.
Reported as "First Name / Last Name / Password / Phone Number look too
large" on registration and contact. They were: every placeholder jumped
2.5px on a phone while its label stayed at 12px, so the hint read larger
than the thing naming it.
14px, not smaller — this is text a visitor reads to know what a field
wants, and the 12px floor elsewhere is for supporting copy, not for
instructions. Written as three separate rules because one invalid
selector in a combined list voids the whole list, and the prefixed
spellings are exactly the engines this is aimed at. */
.sb-field input::placeholder,
.sb-input-wrap input::placeholder,
input::placeholder, textarea::placeholder { font-size: 14px; }
.sb-field input::-webkit-input-placeholder,
.sb-input-wrap input::-webkit-input-placeholder,
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { font-size: 14px; }
.sb-field input::-moz-placeholder,
.sb-input-wrap input::-moz-placeholder,
input::-moz-placeholder, textarea::-moz-placeholder { font-size: 14px; }
}
/* =====================================================================
THE DAILY PANELS READ AS CARDS, NOT AS STRIPS.
Reported as "slightly too narrow… more like a thin rectangle than a
balanced content card". Measured, the width was not the problem: the frame
already takes 93% of a 390px phone. The PROPORTION was. A short quote inside
a frame with desktop's horizontal-only padding produces a wide, shallow band
— correct in a narrow desktop column, wrong as the full-width card it
becomes when the room stacks.
So the fix is vertical, not horizontal: real padding above and below, and a
floor on the frame's height so a one-line quote and a four-line poem still
read as the same kind of object. A couple of pixels of width are given back
at the same time. */
@media (max-width: 760px) {
.page-home .room-col { padding-left: 11px; padding-right: 11px; }
.page-home .daily-frame { padding: 12px 11px; }
.page-home .frame-inner {
padding: 20px 16px;
min-height: 128px;
display: flex;
flex-direction: column;
justify-content: center;
}
.page-home .daily-section { width: 100%; }
}
/* =====================================================================
* BOTTOM NAVIGATION — see includes/bottom-nav.php for how to remove.
* Every rule below is inside a mobile media query, so desktop is untouched
* whether the feature is on or off.
*
* FIVE EQUAL SLOTS. `flex: 1 1 0` + `min-width: 0` means the slots stay equal
* no matter how long a label is, so the bar cannot go lopsided when "Log out"
* replaces "Plans". Measured slot width: 64px at 320px, 78px at 390px — both
* above the 44px touch floor, and the whole bar is 56px tall so every target
* clears the floor on BOTH axes.
*
* LABELS ARE 12px, NOT 9.5px. The previous 9.5px was the single largest
* accessibility finding on the public site (260 of the 560 sub-12px results in
* the responsive audit came from this one declaration). 12px is the floor the
* audit enforces everywhere else and every label still fits its slot at 320px.
* ===================================================================== */
@media (max-width: 860px) {
.mw-bottom-nav {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
display: flex; align-items: stretch;
/* 56px of bar plus whatever the phone's home indicator needs. env() is 0 on
hardware that has no inset, so this is one rule for both. */
height: calc(56px + env(safe-area-inset-bottom, 0px));
padding-bottom: env(safe-area-inset-bottom, 0px);
/* Near-opaque rather than translucent-plus-heavy-blur: this element is
fixed over scrolling content, and a backdrop filter on a fixed layer is
re-rasterised every frame of every scroll. At .96 the blur is a finishing
touch rather than the thing making the bar readable, so the cheap
fallback below looks the same. */
background: rgba(247, 238, 222, .96);
border-top: 1px solid rgba(120, 86, 44, .22);
box-shadow: 0 -2px 10px rgba(60, 42, 30, .10);
}
@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
.mw-bottom-nav {
background: rgba(247, 238, 222, .88);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
}
.mwn-item {
flex: 1 1 0; min-width: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 3px; text-decoration: none; color: #7d6a50;
font: 600 12px/1 var(--font-ui, Poppins, sans-serif); letter-spacing: .1px;
-webkit-tap-highlight-color: transparent;
}
/* A long label must never wrap or push its neighbours: the slot is fixed, so
the LABEL is clipped.
THE CLIPPING LIVES ON THE LABEL, NOT ON .mwn-item — and that distinction is
the whole rule. `overflow: hidden` on the item clips its children, and
.mwn-home-disc deliberately sits OUTSIDE the item's box via a negative
top margin. Putting the ellipsis on the item cut 10px off the top of a 44px
Home disc (23% of the circle) on every phone, while the label behaved
identically either way. If a future change needs the item to clip, the disc
has to stop being raised first. */
.mwn-item > span {
max-width: 100%;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mwn-item svg { width: 21px; height: 21px; fill: currentColor; flex: none; }
/* CURRENT STATE. Colour alone is not the whole signal — the label also goes
to full weight — because a maroon-on-parchment shift is weak in sunlight. */
.mwn-item.is-current { color: var(--maroon, #7b3335); font-weight: 700; }
/* Touch devices have no pointer to move away, so :hover would latch after a
tap. Only :active is defined here, deliberately. */
.mwn-item:active { color: var(--maroon, #7b3335); }
.mwn-item:focus-visible {
outline: 2px solid var(--maroon, #7b3335); outline-offset: -3px; border-radius: 6px;
}
/* HOME IS RAISED, NOT MERELY LARGER: a disc breaks the row so the eye finds
it without reading, which is the whole reason it is centred.
THE DISC IS NEUTRAL UNTIL YOU ARE ACTUALLY ON HOME. It used to be maroon
unconditionally, with the "current" state a slightly darker maroon — so
Home read as selected on every page of the site, and the real current state
was invisible. Default is now parchment with a maroon glyph; current fills
with maroon. */
.mwn-home { position: relative; }
.mwn-home-disc {
display: flex; align-items: center; justify-content: center;
width: 44px; height: 44px; margin-top: -16px; border-radius: 50%;
background: #fdf6e8; color: var(--maroon, #7b3335);
border: 1.5px solid rgba(123, 51, 53, .32);
box-shadow: 0 2px 7px rgba(60, 42, 30, .20);
transition: background .15s, color .15s, border-color .15s;
}
.mwn-home-disc svg { width: 21px; height: 21px; fill: currentColor; }
.mwn-home.is-current .mwn-home-disc {
background: var(--maroon, #7b3335); color: #fdf6e8;
border-color: var(--maroon, #7b3335);
box-shadow: 0 3px 9px rgba(123, 51, 53, .38);
}
.mwn-home:active .mwn-home-disc { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
.mwn-home-disc { transition: none; }
.mwn-home:active .mwn-home-disc { transform: none; }
}
/* THE BAR MUST NOT COVER THE LAST LINE OF A PAGE. The footer is the last
thing in flow on every page that has one — verified as a DIRECT child of
body on every rendered page, which is what the `>` combinator needs — so
the reservation goes there and nothing else needs to know the bar exists.
Hit-tested at 320x568, 390x844 and 844x390 across eight pages: zero
controls unreachable at full scroll. */
body:has(.mw-bottom-nav) > footer.site-footer {
padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}
/* Anchored jumps must not land under the bar either. */
body:has(.mw-bottom-nav) { scroll-padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
/* HIDDEN WITH THE BOOK, THE SAME WAY THE FOOTER IS. `book-open-mode` already
means "a book is open" — reader.php sets it and shelf.js adds and removes it
around the open/close animation — so the bar leaves and returns by itself
with no JS and no second definition to keep in step. .page-reader covers the
reader and Plans, which own the full viewport. */
body.book-open-mode .mw-bottom-nav,
body.page-reader .mw-bottom-nav { display: none; }
}
/* LANDSCAPE PHONES: SAME BAR, LESS OF IT.
A landscape phone is ~390px tall. The site header takes 68px and the bar took
another 56px, so a third of the screen was permanently chrome on a viewport
that is already the tightest the site supports. The bar is kept — it is more
useful in landscape, not less, because the hamburger is further from the
thumb — but compacted to 46px by tightening the gap and the icon. The label
stays at 12px; shrinking text to buy height is what created the finding this
round removed. */
@media (max-height: 520px) and (orientation: landscape) {
.mw-bottom-nav { height: calc(46px + env(safe-area-inset-bottom, 0px)); }
.mwn-item { gap: 1px; font-size: 12px; }
.mwn-item svg { width: 17px; height: 17px; }
.mwn-home-disc { width: 36px; height: 36px; margin-top: -12px; }
.mwn-home-disc svg { width: 17px; height: 17px; }
body:has(.mw-bottom-nav) > footer.site-footer {
padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px));
}
body:has(.mw-bottom-nav) { scroll-padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px)); }
}
/* Desktop never renders it. The hamburger remains the navigation system. */
@media (min-width: 861px) {
.mw-bottom-nav { display: none; }
}
/* ===================================================================
DAILY QUOTE NOTIFICATIONS TOGGLE (Aug 2026)
Appended at the END of the file, which is where mw.css says new rules go:
appending cannot invert an existing contested pair, and moving blocks can.
Every selector here is new (.pf-toggle*), so nothing existing is contested
and gate 35 has no pair to check.
THE CONTROL IS A REAL CHECKBOX. The input is taken out of the flow with
opacity rather than `display:none` or `visibility:hidden`, because both of
those remove it from the tab order and from the accessibility tree — the
switch would then be unreachable by keyboard and silent to a screen reader.
Kept in the layer, sized to the track, and painted over.
TAP TARGET: the track is 30px tall inside a 44px-tall row, and the whole
.pf-toggle label is clickable, so the target is the row — comfortably past
the 44px floor the responsive audit checks.
=================================================================== */
.pf-toggle-row {
margin: 14px 0 0;
padding: 13px 0 0;
border-top: 1px solid #ece0c8;
}
/* NOT A 's usual behaviour: see the note on .pf-toggle-input. The text
is informational, so it does not take the pointer cursor and clicking it does
nothing — `pointer-events: none` on the text is what actually prevents the
implicit label activation that a would otherwise give it. */
.pf-toggle {
display: flex;
align-items: center;
gap: 12px;
min-height: 44px;
padding: 4px 0;
cursor: default;
}
/* The switch, and the ONLY clickable thing in the row. Positioned so the
transparent input can be sized over it. */
.pf-toggle-switch {
position: relative;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
min-height: 44px;
cursor: pointer;
}
/* Informational. Not inside the , so clicking it does nothing at all —
pointer-events alone would only have passed the click through to the label. */
.pf-toggle-text { cursor: default; }
/* Sized and stacked over the track rather than hidden — see the note above.
All offsets are `auto`, so the box resolves to its STATIC position: exactly
where it would have sat in the flex line, which is precisely over the track.
Measured at 390px: input and track both (0, 35, 52, 30). Because the offsets
are auto, the containing block is irrelevant, so a positioned or transformed
ancestor cannot pull the two apart.
z-index PUTS THE TRANSPARENT INPUT ABOVE THE TRACK, and it is load-bearing.
Without it the track — later in DOM order, and positioned — paints over the
input and swallows every pointer event aimed at it. The switch still worked,
because both are inside the and label activation toggles the input,
but the input itself was unclickable: automated checks could not operate the
control, and anything that clicks the element rather than the label would
have silently done nothing. Found by the Playwright probe refusing to click
it. */
/* THE HIT AREA IS THE SWITCH, NOT THE WHOLE ROW.
Reported as "clicking the text does nothing" and "the switch is difficult to
operate". Both came from the same thing: the input was stretched over the
track and given z-index, so it sat ON TOP of the label's own text. A click on
the words landed on a transparent input box only where the two overlapped,
and elsewhere hit the label — which worked — so the control felt
intermittent rather than broken, which is worse.
The input now covers the ENTIRE label. It is still the real checkbox, so a
click anywhere on the row, a tap, the spacebar and a screen reader all
operate the same element, and the label needs no click handling of its own. */
.pf-toggle-input {
position: absolute;
z-index: 1;
/* 60x44: the 52px track plus a small margin, at the 44px tap-target floor.
Wide enough to hit comfortably on a phone, contained enough that reading
the label cannot change a mailing preference by accident. */
left: -4px; top: 50%;
transform: translateY(-50%);
width: 60px; height: 44px;
margin: 0;
opacity: 0;
cursor: pointer;
}
.pf-toggle-track {
position: relative;
flex: 0 0 auto;
width: 52px; height: 30px;
border-radius: 999px;
background: #ded0b4;
border: 1px solid #cdbb98;
transition: background .18s ease, border-color .18s ease;
}
.pf-toggle-knob {
position: absolute;
top: 3px; left: 3px;
width: 22px; height: 22px;
border-radius: 50%;
background: #fffdf7;
box-shadow: 0 1px 3px rgba(60, 47, 30, .35);
transition: transform .18s ease;
}
.pf-toggle-input:checked ~ .pf-toggle-track {
background: var(--maroon, #7b3335);
border-color: var(--maroon, #7b3335);
}
.pf-toggle-input:checked ~ .pf-toggle-track .pf-toggle-knob {
transform: translateX(22px);
}
/* Keyboard focus must be visible on the TRACK, since the input it belongs to is
transparent. Without this the switch is reachable by tab and gives no sign of
it. */
.pf-toggle-input:focus-visible ~ .pf-toggle-track {
outline: 2px solid var(--maroon, #7b3335);
outline-offset: 2px;
}
/* Saving in progress: the control stops accepting input but does not move, so
the switch never shows a state the server has not confirmed. */
.pf-toggle-input:disabled ~ .pf-toggle-track { opacity: .55; }
.pf-toggle-input:disabled { cursor: default; }
.pf-toggle-text { display: block; }
.pf-toggle-name {
display: block;
font: 600 13px/1.3 var(--font-ui, Poppins, sans-serif);
color: #3c2f1e;
}
/* TYPOGRAPHY FLOOR: this is read while deciding whether to switch the setting
on, so it sits at the 12px floor rather than below it. */
.pf-toggle-hint {
display: block;
margin: 2px 0 0;
font: 400 12px/1.4 var(--font-ui, Poppins, sans-serif);
color: #8d7c64;
}
.pf-toggle-status {
margin: 7px 0 0;
font: 500 12px/1.4 var(--font-ui, Poppins, sans-serif);
color: #6b7a4a;
}
.pf-toggle-status.is-error { color: var(--maroon, #7b3335); }
/* ===================================================================
PLANS — SERVER-RENDERED FIRST SPREAD, and the subscriber's own card.
Appended at the end of the file, where mw.css says new rules go.
=================================================================== */
/* display:contents, NOT block. .plan-page is height:100%, which resolves
against its parent; a wrapper that generated a box would become that parent
and the page would collapse to nothing. display:contents makes the wrapper
generate no box, so .plan-page remains the layout child of .page-body and
the served markup lays out identically to the JavaScript-built one.
The spread half is the default because the spread is the wider layout. */
.plans-flipbook .pp-boot { display: contents; }
.plans-flipbook .pp-boot-single { display: none; }
.plans-flipbook .page-head .pp-boot-spread { display: inline; }
/* THE SINGLE-PAGE HALF MUST FOLLOW THE BASE RULES, NOT PRECEDE THEM.
These selectors are equal in specificity to the three above (0,2,0), so the
later one wins and a media query buys no priority whatsoever. The first
attempt put this block earlier in the file, mid-way through mw.css, and the
base rules appended here silently overrode it: phones and tablets rendered
SILVER as the opening page and showed both page titles at once. Caught by
measuring a purpose-built fixture — the standard harness cannot render this
page because it is PHP-generated, and its stale plans.html fixture reported
a completely different book.
This is the equal-specificity order trap gate 35 exists for. Keeping the two
halves adjacent, base first, is what makes the relationship visible.
860px is the breakpoint reader.css uses to hide .page-left; it is already
used by this book elsewhere in this file and is on the grandfathered list
gate 36 checks. */
@media (max-width: 860px) {
.plans-flipbook .pp-boot-spread { display: none; }
.plans-flipbook .pp-boot-single { display: contents; }
.plans-flipbook .page-head .pp-boot-spread { display: none; }
.plans-flipbook .page-head .pp-boot-single { display: inline; }
}
/* THE CURRENT PLAN'S BADGE. Deliberately not a button and not maroon: it is a
statement of fact, not an invitation, and making it look actionable is the
thing this change exists to stop. Same box as .plan-subscribe so the card's
rhythm is unchanged, in the muted parchment/green of a settled state. */
.plan-subscribe.is-current {
background: #eef1e4;
color: #4f5b33;
border: 1px solid #c8d2ac;
box-shadow: none;
cursor: default;
}
.plan-subscribe.is-current:hover { background: #eef1e4; }
.plan-cta-tick {
margin-right: 7px;
font-weight: 700;
}
/* ===================================================================
SUBSCRIPTION NOTIFICATION BAR (Aug 2026)
SITE CHROME. Sits above the header and is counted in --site-header-h, so
every book formula already subtracts it. Appended at the end of the file,
where mw.css says new rules go; every selector is new.
HEIGHT IS DECLARED, NOT MEASURED. main.css does
calc(var(--site-header-base) + var(--mw-subbar-h)); the bar is then given
exactly --mw-subbar-h, so the arithmetic and the pixels cannot drift. That is
why the copy is one line, clipped rather than wrapped: a bar that wrapped to
two lines would be taller than the number every book was sized against.
An earlier revision made this a content-flow block sized by its own text. It
measured 159px at 390x844 and 177px at 320x568 — a fifth of the viewport —
and it changed page height, so it had to be kept off every book page by an
exclusion list. Declaring the height instead removed both problems and the
exclusion list with them.
TWO STATES, ONE SHAPE. Expiring is the site's parchment and gold — a notice,
not an alarm. Expired is the maroon every consequential action already uses.
Neither is red: red is not in this palette, and a memorial site is the wrong
place to introduce it.
=================================================================== */
body.has-subbar { --mw-subbar-h: 40px; }
/* STICKY, WITH THE HEADER. The header is `position: sticky; top: 0; z-index: 60`
and the bar sits immediately above it, so on scroll the bar left and the
header stayed — hiding the one message a lapsed customer most needs.
The bar sticks at top:0 and the header is pushed down to stick BELOW it (see
the .site-header rule that follows), so the two travel together as one piece
of chrome. z-index is one higher than the header's so the bar is never
overlapped by it during the transition.
NO LAYOUT CHANGE. Both elements were already in the flow and still are —
`position: sticky` reserves its space, unlike `fixed` — so --site-header-h
still describes the total chrome height exactly, and every book formula that
subtracts it is unaffected. */
.mw-subbar {
position: sticky;
top: 0;
z-index: 61;
height: var(--mw-subbar-h);
overflow: hidden;
border-bottom: 1px solid;
font-family: var(--font-ui, Poppins, sans-serif);
}
/* The header sticks beneath the bar rather than under the viewport top. Scoped
to `body.has-subbar` so a page with no bar keeps `top: 0` exactly as before. */
body.has-subbar .site-header {
top: var(--mw-subbar-h);
}
.mw-subbar-in {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
height: 100%;
max-width: 1180px;
margin: 0 auto;
padding: 0 clamp(12px, 3vw, 44px);
}
.mw-subbar-mark {
flex: 0 0 auto;
width: 7px; height: 7px;
border-radius: 50%;
background: currentColor;
}
/* TYPOGRAPHY FLOOR: both strings are read while deciding whether to renew. */
.mw-subbar-msg {
flex: 0 1 auto;
min-width: 0;
font-size: 12.5px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mw-subbar-detail {
flex: 0 1 auto;
min-width: 0;
font-size: 12px;
opacity: .85;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mw-subbar-cta {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
height: 26px;
padding: 0 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
}
.mw-subbar-expiring {
background: #fdf6e6;
border-bottom-color: #e3d0a4;
color: #6b5628;
}
.mw-subbar-expiring .mw-subbar-cta { background: #c9a24e; color: #3c2f1e; }
.mw-subbar-expired {
background: #f7ecec;
border-bottom-color: #e0c3c3;
color: var(--maroon, #7b3335);
}
.mw-subbar-expired .mw-subbar-cta { background: var(--maroon, #7b3335); color: #fffdf7; }
/* THE SECOND STRING GOES ON A PHONE, not the action. The headline carries the
fact and the button carries the response; the detail line repeats the expiry
date, which is on Profile and in every reminder email. Dropping it keeps the
bar one line at 320px instead of clipping the button off the end. Removed
from the layout only — a screen reader still reads it. */
@media (max-width: 620px) {
.mw-subbar-detail {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.mw-subbar-in { gap: 8px; }
}
/* The Profile renewal link when the subscription needs attention. The banner
cannot render on a static book page, so this link carries the urgency there
instead — same maroon the expired banner uses, so the two read as one
system. */
.pf-renew.is-urgent {
background: var(--maroon, #7b3335);
color: #fffdf7;
border-color: var(--maroon, #7b3335);
}
/* ===================================================================
MODULES KEPT UNTIL EXPIRY, NOT RENEWED (Aug 2026)
Shown on Profile when a customer has dropped an A La Carte module during a
plan change. Deliberately NOT styled as a warning: nothing has gone wrong and
nothing has been taken away — it is a statement of what they still have.
Parchment and gold, the same furniture as the expiring notice.
=================================================================== */
.pf-dropped {
margin: 14px 0 0;
padding: 11px 13px;
background: #fdf6e6;
border: 1px solid #e3d0a4;
border-left: 3px solid #c9a24e;
border-radius: 7px;
}
.pf-dropped-head {
margin: 0 0 6px;
font: 700 12px/1.4 var(--font-ui, Poppins, sans-serif);
color: #6b5628;
}
.pf-dropped-list {
margin: 0 0 7px;
padding-left: 17px;
font: 400 12px/1.55 var(--font-ui, Poppins, sans-serif);
color: #3c2f1e;
}
/* TYPOGRAPHY FLOOR: this explains why access continues, which is the sentence
that stops a support email. It sits at 12px, not below. */
.pf-dropped-note {
margin: 0;
font: 400 12px/1.5 var(--font-ui, Poppins, sans-serif);
color: #6b5628;
}
.pf-dropped-note a { color: var(--maroon, #7b3335); font-weight: 600; }
/* ===================================================================
SCHEDULED SUBSCRIPTION CHANGE (Aug 2026)
Shown on Profile when a downgrade or switch is waiting for renewal. Styled as
information, not as a warning: nothing has gone wrong and nothing has been
lost — the customer asked for this, and the block exists so they can see it
and undo it.
=================================================================== */
.pf-pending {
margin: 14px 0 0;
padding: 12px 14px;
background: #eef1f6;
border: 1px solid #c9d2e0;
border-left: 3px solid #6b7fa3;
border-radius: 7px;
}
.pf-pending-head {
margin: 0 0 5px;
font: 700 12px/1.4 var(--font-ui, Poppins, sans-serif);
color: #3d4a60;
}
/* TYPOGRAPHY FLOOR: this sentence is what stops a support email asking why the
plan has not changed yet. 12px, not below. */
.pf-pending-text {
margin: 0 0 9px;
font: 400 12px/1.55 var(--font-ui, Poppins, sans-serif);
color: #3c2f1e;
}
.pf-pending-cancel {
min-height: 34px;
padding: 7px 15px;
border-radius: 999px;
border: 1px solid #6b7fa3;
background: transparent;
color: #3d4a60;
font: 700 12px var(--font-ui, Poppins, sans-serif);
cursor: pointer;
}
.pf-pending-cancel:hover { background: #dde4ee; }
/* ===================================================================
SUBSCRIPTION CHANGE CONFIRMATION PAGE (Aug 2026)
=================================================================== */
.sc-lead {
margin: 0 0 14px;
font: 400 13.5px/1.6 var(--font-ui, Poppins, sans-serif);
color: #3c2f1e;
}
.sc-points {
margin: 14px 0 18px;
padding-left: 18px;
font: 400 12.5px/1.65 var(--font-ui, Poppins, sans-serif);
color: #4a3f2f;
}
.sc-points li { margin-bottom: 5px; }
.sc-actions { margin: 0; }
/* Current-plan card when renewal is due: the badge states the fact, the button
offers the action. Stacked rather than side by side because the plan card is
a book page and never wide enough for two pill buttons on a phone. */
.plan-cta-pair {
display: flex;
flex-direction: column;
gap: 8px;
align-items: stretch;
}
.plan-subscribe.plan-renew {
background: var(--maroon, #7b3335);
color: #fffdf7;
border-color: var(--maroon, #7b3335);
}
/* Grace-period explanation on Profile. Maroon like the expired bar, so the two
read as one system, but laid out as a list because it answers four separate
questions and a paragraph would bury the reassuring one. */
/* ===================================================================
THE EXPIRED-SUBSCRIPTION CARD (Aug 2026, rebuilt)
This was a bold line with four bullets under it — a paragraph wearing a
border. Every part carried the same weight, so the one fact the customer
needs (how long have I got, or is it already gone) read at the same volume
as the footnote about deletion, and the block had no shape of its own.
It is now a status card with four deliberate levels:
chip the state in one word, colour-coded, read first
headline the consequence, large enough to be the answer
sub one sentence of what to do about it
facts the dates, as a definition grid — a date is data, not prose
notes what stays true, demoted to the bottom
TWO STATES, ONE COMPONENT. `.is-grace` is a warning: nothing has been lost
yet. `.is-stopped` is the alert state, and takes the same maroon the
site-wide bar and Profile's status text already use so the page does not
invent a third red for the same condition.
=================================================================== */
.pf-grace {
margin: 14px 0 0;
padding: 13px 15px 12px;
background: #fdf7ee;
border: 1px solid #e6d6b6;
border-left: 3px solid #b8892f;
border-radius: 8px;
}
.pf-grace.is-stopped {
background: #f9eded;
border-color: #e0c3c3;
border-left-color: var(--maroon, #7b3335);
}
/* THE ANSWER, AT THE SIZE OF AN ANSWER. "6 days of full access left" is the
whole reason somebody reads this block, so it is the largest thing in it. */
.pf-grace-head {
margin: 0 0 5px;
font: 700 clamp(15px, 1.6vw, 18px)/1.25 var(--font-display, serif);
color: #3c2f1e;
}
.pf-grace.is-stopped .pf-grace-head { color: var(--maroon, #7b3335); }
.pf-grace-sub {
margin: 0;
font: 400 12.5px/1.5 var(--font-ui, Poppins, sans-serif);
color: #5c4a33;
}
/* DATES AS DATA. A definition grid puts every label above its value in a
consistent column, so the three facts scan in one pass instead of being
read as three sentences. It wraps rather than scrolls; on a narrow page the
columns become rows and nothing is truncated. */
/* TYPOGRAPHY FLOOR: read while deciding whether to renew. 12px, not below. */
/* ---- THE PAGE'S ACTION BUTTONS ARE SECONDARY, AND SHOULD LOOK IT ----
Renew Subscription was a 190px-minimum pill with 11px/28px padding and a
drop shadow, and Change Password sat under it at 22px padding. Both were
sized like the primary action of a checkout on a page whose primary content
is a form — they crowded the rows above and below them and, inside a book
page that cannot grow, pushed content out of sight. Same vocabulary, one
step down in scale. */
/* ---- THE BUTTON IS NOT PART OF THE BOX ----
With 6px between them the Renew control read as the expired box's footer —
an action belonging to that panel rather than to the subscription. The gap is
now larger than the box's own internal spacing, which is what makes two
things read as separate rather than nested. */
.pf-grace + .pf-renew,
.pf-grace ~ .pf-renew { margin-top: 20px; }
/* ---- TWO ACTIONS, ONE ROW ----
Stacked and individually centred, these spent two rows of a book page that
cannot grow. Side by side they spend one. `flex-wrap: wrap` means the pair
drops to two lines only where the row genuinely will not fit, so the
single-column case is the exception rather than the default. */
.pf-actions-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px;
margin: 10px 0 0;
}
.pf-renew,
.pf-change-pw {
/* The 44px floor applies at EVERY width, not only on touch. These sit beside
each other now, so an unequal pair reads as a mistake — and a 38px control
next to a 44px one is exactly that. Flex centring on both axes, for the
same reason the Verify button needed it (A10l §6): `min-height` on a block
box adds the space below the label instead of around it. */
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 44px;
border-radius: 999px;
margin: 0;
box-sizing: border-box;
}
/* SIZED SO THE PAIR ACTUALLY FITS. Measured with the real labels — the widest
is "Change Subscription" — the pair needed 340px and the book page offers
303px at 390 and 338px at 430, so it wrapped on the two most common phone
widths. Trimming the horizontal padding and settling both at the 12px
typography floor brings the pair to ~290px, which fits every width down to
360. At 320 it still wraps, and that is the right answer: "where space
allows" is a condition, not a target.
`white-space: nowrap` because a wrapped label inside a pill turns a 44px
control into a 60px one and breaks the pair's alignment — measured at 320
before this was added. */
.pf-renew {
padding: 9px 16px;
font-size: 12px;
white-space: nowrap;
box-shadow: none;
}
.pf-change-pw {
padding: 8px 14px;
font-size: 12px;
white-space: nowrap;
}
/* Subscription status value on Profile, coloured by state. The label is a
fact, not an action, so it is tinted text rather than a pill — a pill would
read as something to press. */
.pf-status { font-weight: 700; }
.pf-status-ok { color: #4f5b33; }
.pf-status-warn { color: #8a6d1f; }
.pf-status-bad { color: var(--maroon, #7b3335); }
/* ===================================================================
CURRENT-PLAN RIBBON (Aug 2026)
A ribbon, not a button. The visual language has to make the difference
obvious at a glance: a badge states what you have, a button offers what you
can do. Two pill buttons side by side — "Subscribed" next to "Renew Now" —
read as two choices, which is exactly the confusion this replaces.
Gold on parchment, uppercase and letter-spaced: the site's own furniture, and
nothing like the maroon of an action.
=================================================================== */
/* ===================================================================
PLAN CARDS — PRESENTATION PASS (Aug 2026)
Presentation only. Not one price, threshold or destination is touched here;
every rule below changes how the existing markup looks.
The cards read as an unstyled table on a page: price, a blurb, a list of
rows with hairlines, a button. Nothing said which plan was better than which,
nothing separated the price from the contents, and the current plan looked
the same as the rest.
Four changes, each with a reason:
1. the price gets a plate of its own, so it stops being the first row
2. the module rows get a zebra ground instead of ruled lines, which reads
as a list rather than a form
3. included / paid modules are distinguishable at a glance
4. the current plan's card is tinted, so the customer's own plan is
recognisable before any text is read
=================================================================== */
/* ---- 1. THE PRICE, ON ITS OWN GROUND ---- */
.plan-hero {
padding: 10px 8px 9px;
margin: 0 0 10px;
border: 0;
border-radius: 8px;
background: linear-gradient(180deg, rgba(255,253,247,.95) 0%, rgba(246,236,214,.9) 100%);
box-shadow: inset 0 0 0 1px rgba(150, 120, 70, .26);
}
.plan-pay-big .pl-figure {
/* The figure was already the biggest thing on the card; giving it the plate
lets it come down slightly and still dominate, which buys back a row. */
font-size: clamp(23px, 2.7vw, 34px);
}
.plan-was {
margin: 4px 0 0;
font-size: 11.5px;
opacity: .72;
}
/* ---- 2. A CONTAINED PANEL, NOT A RULED TABLE ----
Zebra banding was the previous attempt and it was still a spreadsheet: rows
the full width of the page, each one a horizontal band, nothing holding them
together. The list is now a PANEL with its own ground and border, and the
rows inside it are entries rather than table rows — no horizontal rules at
all, the separation carried by spacing and by a soft ground on each entry.
IT HAS TO SCALE. Some plans carry four modules and some carry a dozen, so
the panel scrolls inside itself rather than growing: `.plan-page` is
`overflow: hidden`, so a table that grows past the card does not become a
longer card, it becomes an invisible one. Scrolling here keeps every module
reachable at any plan size, which is what "accommodate plans with many
modules" requires. */
.plan-table {
gap: 3px;
padding: 8px;
border-radius: 9px;
background: rgba(255, 253, 247, .62);
box-shadow: inset 0 0 0 1px rgba(150, 120, 70, .22);
overflow-y: auto;
min-height: 0;
/* Thin, and only where the platform offers it — a scrollbar the width of the
old rules would put a vertical line back in place of the horizontal ones. */
}
.plan-row {
border-bottom: 0;
border-radius: 6px;
padding: clamp(4px, .6vh, 7px) 9px;
background: rgba(255, 253, 247, .9);
box-shadow: 0 1px 0 rgba(150, 120, 70, .1);
}
.plan-row .pl-price { color: #6d5327; }
/* A GROUP HEADING IS A LABEL, NOT AN ENTRY. It gets no card of its own, so the
entries beneath it read as belonging to it rather than as siblings of it. */
.plan-row.plan-group {
background: none;
box-shadow: none;
padding-left: 2px;
}
/* "included" is a different KIND of answer from "$25", so it looks different
rather than merely smaller. */
.plan-row .pl-price i {
/* 11px, which is what this rule already used. Shrinking it to 10.5 would
have added a NEW entry to A7b's itemised typography-floor list for a
purely decorative gain — the uppercase treatment and the colour already
make "included" read as a different kind of answer from "$25". */
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase;
opacity: .75;
color: #5f6b3d;
}
.plan-row.plan-group {
margin-top: 8px;
padding-bottom: 1px;
}
.plan-row.plan-group:first-child { margin-top: 0; }
.plan-row.plan-group .pl-name {
opacity: .72;
color: #8a6d1f;
font-weight: 700;
}
.plan-blurb {
margin: 0 0 9px;
font-size: 12.5px;
opacity: .8;
}
/* ---- 3. THE ACTION ---- */
.plan-subscribe {
margin: 10px auto 2px;
padding: 9px 26px;
border-radius: 999px;
font-size: 12.5px;
letter-spacing: .02em;
box-shadow: 0 2px 7px rgba(123, 51, 53, .22);
}
/* The inert current-plan state is a statement, so it is quiet: no fill, no
shadow, nothing that invites a press. */
.plan-subscribe.is-current {
box-shadow: none;
}
/* ---- 4. THE CUSTOMER'S OWN PLAN IS RECOGNISABLE ----
`:has()` keeps this a pure CSS consequence of the stamp already being in the
markup, so no PHP had to learn about it. Where :has() is unsupported the
card simply looks like the others and the stamp still says which it is. */
.plan-page:has(.plan-ribbon) {
background:
linear-gradient(180deg, rgba(216, 180, 95, .13) 0%, rgba(216, 180, 95, 0) 190px);
}
.plan-page:has(.plan-ribbon.is-expired) {
background:
linear-gradient(180deg, rgba(164, 66, 63, .12) 0%, rgba(164, 66, 63, 0) 190px);
}
/* ===================================================================
À LA CARTE — SELECTABLE TILES, NOT A CHECKLIST (Aug 2026)
Selection and pricing logic untouched: these are the same and
that opens a file dialog, and the decorative
rows around it. */
pointer-events: none;
}
.page-overlay.is-saving .overlay-close { opacity: .55; }
/* THE FADE IS ON THE FORM'S CHILDREN, NOT ON THE FORM.
`opacity` establishes a stacking context, so a child cannot be more opaque
than its parent: fading `.ov-form` to .55 and then setting the save button
back to 1 does nothing at all — the button renders at .55 with the rest.
Every save control in reader.php carries `.ov-primary`, and the progress
bar `.ov-progress`, so both can simply be left out of the selector. */
.page-overlay.is-saving .ov-form > *:not(.ov-primary):not(.ov-progress) {
opacity: .55;
}
/* =====================================================================
TITLE PAGE — THE TOP BLOCK, TIGHTENED SO THE SUMMARY FITS ON IT
MEASURED BEFORE ANYTHING WAS CHANGED, at 1440x900 on an In Memory Of
title page carrying a name, two dates and a two-line summary:
flourish top 36 h 49.8 .title-page gap: 24px x 5 = 120px of
h1 top 109.8 h 76.8 pure gap, plus .tp-dates' own 16px
dates top 230.6 h 145.3 margin and .tp-summary's own 14px on
summary top 405.9 h 99 TOP of it
rule top 540.9
imprint top 564.9 -> 585.7 against a 592px page: OVERFLOWING
So the summary did not "sit far down the page" by accident — the page had
already spent 120px on gaps before it got there, and the last element was
past the leaf. The same page WITHOUT a summary ended at 452.7 and looked
fine, which is why this only became visible once summaries existed.
WHAT THIS CHANGES: spacing only. No element is moved, renamed, removed or
restyled; the order, the fonts, the colours and the rule are exactly as
approved. The flourish comes down to a size proportional to the title it
sits above rather than a 30px glyph in a 49.8px box.
NOTHING IS NEEDED FOR THE EMPTY CASE. pagination.js omits `.tp-summary`
from the DOM entirely when the book has none, so a flex `gap` cannot leave
a hole where it would have been — the page closes up by itself.
Appended at the END of mw.css, which is where a new rule belongs: nothing
already in the file can be inverted by a rule added after all of it
(tools/css_inversions.py, gate 35).
===================================================================== */
.title-page {
gap: 12px;
padding-top: clamp(14px, 2.6vh, 30px);
}
/* Proportional to the title beneath it, not a separate ornament competing
with it. `line-height: 1` is what removes the 20px of box the glyph was
carrying above and below itself. */
.title-page .tp-flourish {
font-size: 22px;
line-height: 1;
}
/* The title and the flourish read as ONE block: the gap above the title is
the flex gap, and this removes the extra margin under it so the name and
dates follow immediately. */
.title-page h1 { margin-bottom: 0; }
/* Name and dates: a tight group near the top, which is what makes them read
as facts about the book rather than as three separate lines. The 16px
top margin was doubling the flex gap. */
.tp-dates { margin: 2px 0 0; }
.tp-dates p { margin: 4px 0; }
/* The summary is deliberately the LAST thing before the rule, and it is
allowed a slightly wider column than the 34ch it had — at 34ch a two-line
summary became three lines and pushed the imprint off the leaf. */
.tp-summary {
margin: 2px auto 0;
max-width: 38ch;
}
/* =====================================================================
TITLE PAGE — THE SUMMARY, LEGIBLE
MEASURED: the summary was #7b6750 on the page's #f6efe2, which is
**4.71:1** — under WCAG AA for body text (4.5:1 is the floor, and this is
set at 15px, so it only just clears it and reads as washed out next to the
name and dates beside it at #34281c, 12.52:1). It looked like a caption
somebody had greyed out rather than a sentence the owner wrote.
It now uses `--page-ink`, the reader's own approved dark text colour — the
same one `.tp-dates` and the entry text already use, so this introduces no
new colour and follows the night theme for free.
THE LABEL IS SUBORDINATE, AND STAYS SUBORDINATE. Same uppercase
letter-spaced treatment as `.tp-dates span` ("Name", "Date of Birth"),
which is the page's existing vocabulary for "this is what the thing below
is". It is a label, not a heading: it must never compete with the title.
HIERARCHY UNCHANGED: title (clamp 22-32) > dates (clamp 14-17) >
summary (15) > label (10.5). Only the COLOUR and the label are new; the
size, the family and the 38ch column are as they were.
The block is emitted as one node by pagination.js and omitted entirely when
there is no summary, so the label cannot appear alone and the flex gap
cannot leave a hole where the block would have been.
===================================================================== */
.tp-summary-block {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
margin: 2px auto 0;
max-width: 38ch;
}
.tp-summary-label {
font-family: var(--font-ui);
font-size: 10.5px;
letter-spacing: .11em;
text-transform: uppercase;
font-weight: 700;
color: #9a8763; /* exactly .tp-dates span */
}
.tp-summary-block .tp-summary {
margin: 0;
color: var(--page-ink, #34281c);
font-size: 15px;
line-height: 1.6;
max-width: none; /* the block owns the column now */
}