.poem-body {
display: flex;
flex-direction: column;
gap: 0;
}
.poem-line {
white-space: pre-wrap;
text-indent: -1em;
padding-left: 1em;
margin: 0 0 0.4em;
/* Tighter than the space between two distinct lines (the margin
above), so a long line that wraps in the browser reads as one
turned-over line, not two - Jonny, 2026-09-12. */
line-height: 1.4;
position: relative;
}
/* A stanza break: a genuinely empty line, never a .poem-line, so it can
never be mistaken for one of the numbered lines below. */
.poem-gap { height: 1em; }
/* The book's own rhyme-scheme indent (e.g. the B lines of an ABAB
quatrain, or a closing couplet) - applied per line, per poem, by
comparing the book's own page. Presentational only: the line is
still a plain div in normal reading order, so this has no WCAG
impact on its own. Kept small and in em so it never eats too far
into an already-narrow phone column (WCAG 1.4.10 Reflow) - smaller
again on phone, same reasoning as the line-number gutter below.
Jonny, 2026-09-14. */
.poem-line--indent { margin-left: 1.5em; }
@media (max-width: 480px) {
.poem-line--indent { margin-left: 0.75em; }
}
/* Line numbers, every 5th line. Decided once, when the poem is typed in
(a real pair on that div, not counted live by
CSS - a CSS counter can't reliably skip .poem-gap and any other
future non-line markup, which is exactly the bug an earlier version
of this had). This used to be CSS generated content (::after) read
right-aligned - moved to a genuine link at the START of the line
instead, for three reasons at once: it's real DOM text, so every
screen reader announces it with no generated-content guesswork; it's
announced before the line's own words, which is when a reader
actually wants to hear it; and being a real
means the id on the line is a real, always-on deep link (works
whether or not the button below has been clicked) while the visible
link itself stays link tab order only once the reader has switched
numbers on. One element, one piece of CSS, both audiences.
Jonny, 2026-09-12. */
.poem-line-number {
display: none;
position: absolute;
left: 0;
top: 0;
/* Every inline-level display value blockifies once an element is
absolutely positioned, per spec - display:flex and inline-block
both computed the same way here, so neither was ever the real
variable. The actual bug: a block box with width:auto is supposed
to shrink-to-fit its content, but that measured as a genuine 0px
box on a real phone regardless of which display value it started
from - not worth chasing further given these are always one or
two digits (5 through however far a poem runs). An explicit width
sidesteps the whole shrink-to-fit question and guarantees a real,
non-zero box every time. "left: 0" was being measured from a box
that claimed to have no width, which is almost certainly why the
number read as escaping past the column's edge on a phone rather
than sitting inside it. Jonny, 2026-09-12 ("almost off the
screen"). */
width: 1.4em;
height: 1.4rem;
line-height: 1.4rem;
white-space: nowrap;
font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.75em;
color: var(--tx-2);
text-decoration: none;
/* Same as the old right-aligned version: centred-on-the-row still
read a touch high next to serif text on a real phone. */
transform: translateY(0.09em);
}
.poem-line-number:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.poem-body.show-line-numbers .poem-line-number { display: block; }
.poem-body.show-line-numbers .poem-line { padding-left: 2.5em; }
/* Most lines wrap onto two or three short rows on a phone, so a fixed
2.5em gutter reads as a lot of dead air next to a short wrapped
fragment - Jonny, 2026-09-12. Smaller, still enough for two digits. */
@media (max-width: 480px) {
.poem-body.show-line-numbers .poem-line { padding-left: 1.5em; }
}
/* The header (H1) already gets 2rem of breathing room from its own
section below it and this section's own 2rem top padding - stacked,
that's 4rem before the date/author/button even start, which read as
a lot of dead space with nothing in it. Pulled up here instead - the
generous gap moves to right before the poem itself, below, where
there's an actual reason for one. Jonny, 2026-09-12. */
.poem-section { padding-top: 0.5rem; }
/* Tighter than the default paragraph margins these were relying on
(~1em/16px each, uneven and undesigned) - a poem's own metadata
reads as one small compact block, not four loosely related lines. */
.poem-meta p { margin: 0.35rem 0; }
.poem-meta p:first-child { margin-top: 0; }
/* The deliberate gap: metadata above is compact now, so the poem text
below - genuinely a different, more important thing on the page -
gets real space to breathe rather than running straight into it.
Used to live as a margin on the toggle button that sat at the bottom
of this column - now that button has moved below the poem instead
(Jonny, 2026-09-13: "the show line number button gone"), so the gap
moved onto the column itself, which keeps working the same way
whichever field happens to be last (date, author or tags). On mobile
this is the actual gap between two stacked blocks; on desktop it
just makes this column a bit taller than the poem column beside it,
which is harmless. Jonny, 2026-09-12. */
.poem-meta { margin-bottom: 3rem; }
/* rem/em everywhere in this file, deliberately - the numbers below
aren't a second unit system, they're a second, smaller VALUE for a
small screen. On a phone, the same header-to-metadata gap that reads
fine on a wide screen ate up real vertical space with nothing in it,
and the same before-the-poem gap read as barely there once
everything else on the page had also gotten more compact. Jonny,
2026-09-12 ("on mobile the gap between title and date is too big,
and between button and poem not big enough"). */
@media (max-width: 480px) {
.poem-section { padding-top: 0; }
.poem-meta { margin-bottom: 4rem; }
}
/* Two Notes buttons, one shown at a time depending on viewport width -
Jonny, 2026-09-15 ("the proper way to do the notes button is to have
2 buttons and show the right one depending on the viewport"), on the
site's ordinary bootstrap-style row/col grid throughout - no special
grid override. The mobile one sits right after the poem, exactly
where the single button always lived, so its spacing is unchanged.
The desktop one lives in poem-meta instead, under the byline, with
its own tighter spacing matching the rest of that compact block. The
notes box itself hasn't moved - always under the poem - both buttons
just toggle that one shared box. display:none also drops the hidden
button from tab order, so a keyboard user only ever meets one. */
.poem-toggle { margin: 3rem 0 0; }
@media (max-width: 480px) {
.poem-toggle { margin-top: 4rem; }
}
.poem-toggle--desktop { display: none; margin: 1.5rem 0 0; }
@media (min-width: 768px) {
.poem-toggle--desktop { display: block; }
.poem-toggle--mobile { display: none; }
}
.poem-notes {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--ui-2);
}
/* Poems index sort control - same plain-link visual language as the
footer's theme switcher (Jonny, 2026-09-13: "similar to the theme
control"), just server-rendered links with a query string instead of
radios with JS, since the sort itself happens in PHP, not the
browser. No button chrome, active choice shown by colour/weight
rather than a pill. */
.poem-sort {
font-size: 0.9rem;
color: var(--tx-2);
margin: 0 0 2rem;
}
.poem-sort a {
color: var(--tx);
text-decoration: underline;
text-underline-offset: 0.2em;
text-decoration-color: var(--ui-2);
}
.poem-sort a:not(:last-of-type)::after {
content: "/";
text-decoration: none;
color: var(--tx-2);
margin-left: 0.5rem;
}
.poem-sort a.active {
color: var(--primary);
font-weight: 600;
text-decoration: none;
pointer-events: none;
}
/* A page created for the contents-list order (Jonny, 2026-09-13:
"build the pages for these, ready for me to drop the poems in") but
with no poem_text yet - most of this later, 20th-century section of
the book is still in copyright, so the text has to be typed in from
Jonny's own copy rather than sourced here. */
.poem-pending {
color: var(--tx-2);
font-style: italic;
}
/* Red instead of the site's usual orange link, on the index list only -
flags a poem that's still in copyright and has no text here yet,
rather than looking like any other finished poem until you click in.
Jonny, 2026-09-13. */
.poem-index-item a.pending { color: var(--copyright); }
.poem-index-item a.pending:hover { opacity: 0.8; }
/* Green on the index itself, not just the poem's own page - Jonny,
2026-09-13: "I meant green on the index so I can quickly find them."
A pending poem with a real source link found sits out from a pending
one with none, right where the list is scanned. */
.poem-index-item a.available { color: var(--available); }
.poem-index-item a.available:hover { opacity: 0.8; }
/* The "read it elsewhere" link on a pending poem's own page - same red,
sitting right under the "Text not yet added" line. */
.poem-external-link { margin-top: 0.5rem; }
.poem-external-link a { color: var(--available); }
/* A stanza's own number, for a poem built from selected, individually-
numbered excerpts (the Rubaiyat's quatrains, keeping FitzGerald's own
numbering rather than the site's usual every-5th-line count, which
would land in the middle of a quatrain and mean nothing). Small and
muted, like the printed book's own styling for it. */
.poem-stanza-label {
margin: 0 0 0.25rem;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--tx-2);
}