, and
those needed spacing rules here as well as under .op-transcript — the
operator preview had them and the public entry page did not, so the same
text rendered finished in the console and cramped on the site. */
.transcript-body p { margin: 0 0 1.05rem; text-align: left; }
.transcript-body p:last-child { margin-bottom: 0; }
.transcript-body .fkl-contents-line { margin: 0 0 0.18rem; }
.transcript-body .fkl-transcript-head { max-width: 100%; }
/* Reflowed HTML supplies its own block spacing, so the pre-wrap used for raw
text must not also collapse-protect it. Set inline by the renderer; declared
here too so a no-JS/failed-reflow fallback still wraps. */
.transcript-body { white-space: pre-wrap; }
/* ── Text withheld: the work is in copyright ─────────────────────────────────
Shown instead of a transcript on a catalogue-only record. It is an
explanation, not an error message. */
.rights-withheld { font-family: Georgia, 'Times New Roman', serif; }
.rights-withheld__head {
font-family: 'Courier New', Courier, monospace;
font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase;
color: var(--gold-dim, #9d793d);
padding-bottom: 0.5rem; margin-bottom: 0.9rem;
border-bottom: 1px solid var(--border-light, rgba(120,88,40,0.28));
}
.rights-withheld p { margin: 0 0 0.9rem; font-size: 0.95rem; line-height: 1.75; }
.rights-withheld__link { margin-top: 1.1rem; font-family: 'Courier New', Courier, monospace; font-size: 0.85rem; }
.rights-withheld__note {
font-size: 0.86rem !important; font-style: italic; opacity: 0.82;
padding-top: 0.8rem; border-top: 1px solid var(--border-light, rgba(120,88,40,0.2));
}
/* ── Reader theme must beat the page skins ───────────────────────────────────
FOUR separate skin blocks in this file set `background: … !important` on
.transcript-body (lines ~1842, ~2382, ~3024, ~4255). The reader theme is an
explicit choice by the reader, so it has to outrank all of them: scoped from
`html body` to put its specificity above any bare-class skin rule, whichever
one happens to be last. */
html body .reader-pane.reader--light,
html body .transcript-body.reader--light,
html body .op-transcript.reader--light,
html body .rv-fulltext.reader--light {
background: #ffffff !important;
background-image: none !important;
border-color: #dcdcdc !important;
box-shadow: none !important;
color: #1a1a1a !important;
}
html body .reader-pane.reader--light p,
html body .reader-pane.reader--light em,
html body .reader-pane.reader--light strong,
html body .reader-pane.reader--light h3,
html body .reader-pane.reader--light h4,
html body .reader-pane.reader--light .fkl-contents-line { color: #1a1a1a !important; }
html body .reader-pane.reader--light a { color: #8a2b1d !important; }
html body .reader-pane.reader--dark,
html body .transcript-body.reader--dark,
html body .op-transcript.reader--dark,
html body .rv-fulltext.reader--dark {
background: #141210 !important;
background-image: none !important;
border-color: #3a2f22 !important;
box-shadow: none !important;
color: #e8dcc6 !important;
}
html body .reader-pane.reader--dark p,
html body .reader-pane.reader--dark em,
html body .reader-pane.reader--dark strong,
html body .reader-pane.reader--dark h3,
html body .reader-pane.reader--dark h4,
html body .reader-pane.reader--dark .fkl-contents-line { color: #e8dcc6 !important; }
html body .reader-pane.reader--dark a { color: #d8a75a !important; }
html body .reader-pane.reader--dark .fkl-transcript-head { border-bottom-color: #4a3c28 !important; }
/* ── Transcript header row + reading-pane button ─────────────────────────────
The button sits top-right of "Full Transcript" and opens the same
near-fullscreen reader the review queue and receipts use. */
.transcript-head-row {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 1rem; margin-bottom: 1rem;
}
.transcript-head-row .transcript-title { margin-bottom: 0; }
.transcript-expand {
flex: 0 0 auto; cursor: pointer;
font-family: 'Courier New', Courier, monospace;
font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
padding: 0.5rem 0.8rem; margin-top: 0.15rem;
color: var(--fkl-ink, #2e2312);
background: var(--fkl-paper-dark, #e6d7b4);
border: 1.5px solid var(--fkl-brass, #9c6c33); border-radius: 3px;
}
.transcript-expand:hover { background: rgba(196,154,72,0.30); }
@media (max-width: 560px) {
.transcript-head-row { flex-direction: column; }
.transcript-expand { align-self: flex-start; }
}
/* While the reading pane is open the page behind it must not scroll — two
scrollbars fighting is exactly the sideways-reading problem this replaced. */
body.rv-locked { overflow: hidden; }
/* The entry transcript is capped at 600px inline while previewing; expanded it
must fill the screen, so the height rules have to beat that. */
.transcript-body.rv-fulltext--expanded {
position: fixed; inset: 3vh 4vw; z-index: 90;
max-height: none !important; height: 94vh; width: auto;
padding: 2rem 2.6rem; overflow-y: auto;
box-shadow: 0 18px 60px rgba(20, 10, 2, 0.55);
font-size: 1.06rem; line-height: 1.78;
}
.transcript-body.rv-fulltext--expanded p,
.transcript-body.rv-fulltext--expanded .fkl-transcript-head {
max-width: 46rem; margin-left: auto; margin-right: auto;
}
/* ── Operator composer: write or paste an original work ──────────────────── */
.op-compose { margin-bottom: 1.1rem; }
.op-compose__meta { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.6rem; }
.op-toolbar {
display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem;
padding: 0.45rem 0.55rem;
background: var(--fkl-paper-dark, #e6d7b4);
border: 1.5px solid var(--fkl-brass, #9c6c33);
border-bottom: 0; border-radius: 3px 3px 0 0;
}
.op-toolbar button, .op-toolbar select {
font-family: 'Courier New', Courier, monospace; font-size: 0.76rem;
padding: 0.3rem 0.55rem; cursor: pointer;
color: var(--fkl-ink, #2e2312);
background: #fbf4df;
border: 1px solid var(--fkl-paper-dark, #cbb994); border-radius: 2px;
}
.op-toolbar button:hover { background: rgba(196,154,72,0.28); }
.op-toolbar button:active { background: rgba(196,154,72,0.45); }
.op-toolbar__sep { width: 1px; height: 18px; background: rgba(120,88,40,0.35); margin: 0 0.25rem; }
.op-editor {
min-height: 260px; max-height: 60vh; overflow-y: auto;
padding: 1.1rem 1.25rem;
background: #fbf4df; color: var(--fkl-ink, #2e2312);
border: 1.5px solid var(--fkl-brass, #9c6c33); border-radius: 0 0 3px 3px;
font-family: Georgia, 'Times New Roman', serif; font-size: 1rem; line-height: 1.75;
overflow-wrap: anywhere;
}
.op-editor:focus { outline: 2px solid rgba(156,108,51,0.5); outline-offset: -2px; }
.op-editor:empty::before {
content: attr(data-placeholder); color: rgba(70,52,26,0.5); font-style: italic;
}
.op-editor p { margin: 0 0 0.95rem; }
.op-editor h2 { font-size: 1.3rem; margin: 1.3rem 0 0.5rem; }
.op-editor h3 { font-size: 1.12rem; margin: 1.1rem 0 0.45rem; }
.op-editor blockquote {
margin: 0 0 0.95rem; padding-left: 1rem;
border-left: 3px solid var(--fkl-brass, #9c6c33); font-style: italic;
}
.op-editor ul, .op-editor ol { margin: 0 0 0.95rem 1.4rem; }
.op-compose__foot {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; margin-top: 0.7rem;
}
.op-compose__count {
font-family: 'Courier New', Courier, monospace; font-size: 0.74rem;
letter-spacing: 0.06em; color: var(--ink-mid, #5d4d31);
}
.op-compose__count.is-short { color: #9a3412; }
/* Author-chosen text sizes. A fixed set, because the sanitiser only permits
these four classes — an arbitrary inline style would be dropped. */
.fkl-size-sm { font-size: 0.86em; }
.fkl-size-md { font-size: 1em; }
.fkl-size-lg { font-size: 1.25em; }
.fkl-size-xl { font-size: 1.5em; }
/* An original work keeps its own structure, so the transcript pane styles its
markup directly rather than the reflowed shape. */
.transcript-body--authored h2 { font-size: 1.3rem; margin: 1.5rem 0 0.6rem; font-weight: 700; }
.transcript-body--authored h3 { font-size: 1.12rem; margin: 1.25rem 0 0.5rem; font-weight: 700; }
.transcript-body--authored blockquote {
margin: 0 0 1.05rem; padding-left: 1.1rem;
border-left: 3px solid var(--fkl-brass, #9c6c33); font-style: italic;
}
.transcript-body--authored ul, .transcript-body--authored ol { margin: 0 0 1.05rem 1.5rem; }
.transcript-body--authored li { margin-bottom: 0.4rem; }
/* ── Table plate ─────────────────────────────────────────────────────────────
De revolutionibus is largely astronomical tables, and the 1543 blackletter
figures do not survive OCR — 5 reads as $, 6 as £ — so a transcription would
be a tidy grid of wrong numbers. The preserved page scan is the only form in
which these tables are actually readable, so the image is the content here,
not an illustration. */
.fkl-table-plate {
display: block; margin: 1.6rem 0; padding: 0;
border: 1px solid var(--fkl-brass, #9c6c33); border-radius: 3px;
background: rgba(196,154,72,0.08);
overflow: hidden;
}
.fkl-table-plate__img {
display: block; width: 100%; height: auto; max-width: 100%;
background: #fff;
border-bottom: 1px solid var(--fkl-brass, #9c6c33);
}
.fkl-table-plate a { display: block; }
.fkl-table-plate__cap {
display: block; padding: 0.75rem 1rem;
font-family: 'Courier New', Courier, monospace;
font-size: 0.74rem; line-height: 1.6; color: var(--ink-mid, #5d4d31);
}
.fkl-table-plate__tag {
display: block; margin-bottom: 0.3rem;
font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--gold-dim, #9d793d);
}
/* In the expanded reading pane the plates get the column width the prose has,
so a table is not stretched across the whole screen. */
.rv-fulltext--expanded .fkl-table-plate,
.transcript-body.rv-fulltext--expanded .fkl-table-plate {
max-width: 46rem; margin-left: auto; margin-right: auto;
}
/* ── Quality findings ────────────────────────────────────────────────────────
The archivist's view of what the checks found. Severity is colour-coded so a
blocker cannot be mistaken for a note at a glance. */
.rv-quality {
margin: 0.7rem 0; padding: 0.7rem 0.9rem; border-radius: 3px;
border-left: 3px solid var(--fkl-brass, #9c6c33);
background: rgba(196,154,72,0.10);
font-family: 'Courier New', Courier, monospace; font-size: 0.76rem; line-height: 1.6;
}
.rv-quality--clean { border-left-color: #3f7d3f; background: rgba(63,125,63,0.08); }
.rv-quality--note { border-left-color: #9c6c33; }
.rv-quality--serious { border-left-color: #b8651c; background: rgba(184,101,28,0.10); }
.rv-quality--blocker { border-left-color: #8a2b1d; background: rgba(138,43,29,0.12); }
.rv-quality__tag {
display: block; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--gold-dim, #9d793d); margin-bottom: 0.35rem;
}
.rv-quality__list { margin: 0; padding-left: 1.1rem; }
.rv-quality__item { margin-bottom: 0.25rem; }
.rv-quality__item--blocker { color: #8a2b1d; font-weight: 700; }
.rv-quality__item--serious { color: #8a4a12; }
.rv-quality__item--note { opacity: 0.85; }
/* ── Correcting a record ─────────────────────────────────────────────────────
Two forms, two trust levels. The contributor may fix how their own document is
described; the archivist may correct anything the catalogue asserts. Neither
can edit a measurement — see IMMUTABLE_FIELDS in _records.mjs. */
.sub-edit {
margin: 1.2rem 0; padding: 1.1rem 1.25rem;
border: 1.5px solid var(--fkl-brass, #9c6c33); border-radius: 3px;
background: rgba(196,154,72,0.08);
}
.sub-edit__head { margin-bottom: 0.8rem; }
.sub-edit__head .op-lead { margin: 0.4rem 0 0; font-size: 0.86rem; }
.sub-edit__label {
display: block; margin: 0.75rem 0 0.3rem;
font-family: 'Courier New', Courier, monospace;
font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--gold-dim, #9d793d);
}
.sub-edit__label span { text-transform: none; letter-spacing: 0; opacity: 0.75; }
.sub-edit__area { resize: vertical; min-height: 5rem; line-height: 1.6; }
.sub-edit__foot {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; margin-top: 1rem;
}
.sub-edit__msg, .rv-edit__msg {
font-family: 'Courier New', Courier, monospace; font-size: 0.76rem;
color: var(--ink-mid, #5d4d31);
}
.sub-edit__msg.is-ok, .rv-edit__msg.is-ok { color: #3f7d3f; }
.sub-edit__msg.is-err, .rv-edit__msg.is-err { color: #8a2b1d; }
.rv-edit { margin: 0.9rem 0; }
.rv-edit > summary {
cursor: pointer; padding: 0.45rem 0;
font-family: 'Courier New', Courier, monospace;
font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--gold-dim, #9d793d);
}
.rv-edit__grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 0.6rem; margin: 0.6rem 0 0.4rem;
}
.rv-edit__field { display: flex; flex-direction: column; gap: 0.25rem; }
.rv-edit__field--wide { grid-column: 1 / -1; }
.rv-edit__field > span {
font-family: 'Courier New', Courier, monospace;
font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--gold-dim, #9d793d);
}
.rv-edit__field textarea { resize: vertical; line-height: 1.55; }
.rv-edit__trail {
margin-top: 0.7rem; padding-top: 0.6rem;
border-top: 1px solid rgba(120,88,40,0.28);
font-family: 'Courier New', Courier, monospace; font-size: 0.72rem;
}
.rv-edit__trail ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.rv-edit__trail li { margin-bottom: 0.2rem; opacity: 0.85; }
/* ── long titles on cover artwork ─────────────────────────────────────────────
A cover is a fixed 2:3 rectangle and .cover-type is pinned to its bottom edge
with position:absolute, so a long title in normal flow grows down the cover,
slides underneath the chip, and then spills past the border because an earlier
pass set overflow:visible. "Let Us Provide Active Support for the
Revolutionary Struggle of the Chinese People" took eight lines and printed
straight through the PRIMARY plate.
The artwork is the one place a title can safely be cut, because the COMPLETE
title is already printed immediately beside it —
inside a
.concept-record, .archive-card__title inside an archive card. So the drawing
clips and the record stays whole. This re-clamps the artwork that the earlier
"show the COMPLETE title" pass unclamped: that pass was right that a full
title must be readable, and it still is, one column to the right. */
/* Back into the flex column, so the chip can never be overlapped again. */
.cover-type{
position:static !important; bottom:auto; left:auto;
margin-top:auto; align-self:flex-start;
}
/* The drawing clips. */
.archive-card__cover,.concept-book{overflow:hidden !important;}
.concept-book strong,.cover-title{
display:-webkit-box !important; -webkit-box-orient:vertical;
-webkit-line-clamp:6 !important; overflow:hidden !important;
text-overflow:ellipsis;
}
/* Mobile keeps its own tuning, restated here because this block comes later and
would otherwise win: fewer lines on a 92px spine, and no chip at all. */
@media (max-width:760px){
.concept-book strong,.cover-title{
-webkit-line-clamp:5 !important; max-height:4.1rem !important;
}
.cover-type{display:none !important;}
}
/* ── cross-browser and off-fullscreen fixes (v=alpha-viewing-36) ──────────────
Measured across 320–1440px in every page, in same-origin iframes so the media
queries genuinely applied. No page overflows horizontally at any width; these
are the four things that did go wrong.
1. THE OFF-FULLSCREEN BUG. Between 861px and 980px the header was 461px tall
on a 900px window, where 1000px gives 232px and 860px gives 349px. Two
breakpoints disagreed: the nav starts stacking at 980px, but the search box
and the translate widget were only hidden at 860px, so the stacked band
kept them and put each on its own row.
2. iOS Safari zooms the entire page when a focused input has a font-size under
16px, and does not zoom back out. The search field was 13.3px and the
newsletter field 15.2px. 16px is the exact threshold, not a rounding.
3. 100vh on iOS Safari measures the space behind the browser toolbar, so a
hero sized with it grows and shrinks as the toolbar hides. dvh is the fix,
behind @supports so an engine without it keeps the old value.
4. Five nav links in a two-column grid took three rows on a phone. */
/* 1. the stacked band hides what the narrow band hides. */
@media (max-width: 980px){
.nav-search, .translate-control { display: none !important; }
}
/* 2. 16px on anything you can type into, so iOS never zooms the page. Not
inside a media query: iPad Safari reports about 1024px and zooms just the same,
so a width-scoped rule would have missed every iPad. The fields have fixed
widths, so only the text inside them grows. */
input[type="search"], input[type="text"], input[type="email"],
input[type="url"], input[type="tel"], input[type="password"],
textarea, select, .nav-search-input, .fkl-signup__input {
font-size: 16px !important;
max-width: 100%;
}
/* 3. the dynamic viewport, where the engine has it. */
@supports (height: 100dvh){
.concept-hero { min-height: calc(100dvh - 250px) !important; }
.about-hero, .operator-locked-hero { min-height: calc(100dvh - 175px) !important; }
.about-hero + .fkl-neutral { padding-top: calc(100dvh - 470px) !important; }
}
/* 4. Five links: three columns is two rows. Below 400px three columns would
crowd "Operator", so the narrowest phones keep two. */
@media (min-width: 361px) and (max-width: 760px){
.site-nav__links { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
/* Five links in a four-column grid left "Operator" alone on a second row for
every window between 761px and 980px. Five columns is one clean row; the
labels are short enough that even 761px gives each about 150px. */
@media (min-width: 761px) and (max-width: 980px){
.site-nav__links { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
/* The search glyph was U+2315, "telephone recorder", standing in for a
magnifier. Plenty of fonts do not carry it, so it rendered as a box on some
engines. It is an inline SVG now and draws the same everywhere. */
.nav-search-btn svg { display: block; }
/* The cover title sat 17px from the top of a 165px cover, with about 70px of
dead space between its rule and the type chip. The chip holds the bottom by
its auto margin, so the title just needs a small push down to sit better in
the composition. Small on purpose: a phone spine is 129px tall and has less
room to give away. */
.concept-book strong, .cover-title { margin-top: 1.1rem; }
@media (max-width: 760px){
.concept-book strong, .cover-title { margin-top: 0.55rem; }
}
/* ── the cover must not collapse (v=alpha-viewing-40) ─────────────────────────
Measured cover width by viewport: 93px at 1280 and above, 76px at 1100,
66px at 900 and 768, then back up to 92px at 600 and 86px at 430. Not
monotonic — the same shape of bug as the nav header. The mobile rules set an
explicit width and the desktop layout gives 93px, but the 768-1100 band sets
none, so the record grid squeezed the cover to 66px. A 66px cover holding
9.2px type is what sliced twenty of thirty-six titles mid-word at 900px.
The fix is a floor on the cover, not smaller type: shrinking the font to fit a
collapsed cover produced 3px text, which is worse than a cut title. The grid's
first column is 95px at 900 and 105px at 1100, so 86px fits inside it. */
.concept-book, .archive-card__cover {
/* min() so the floor can never exceed the space available — a flat 86px
pushed 9px past the viewport at 1100. */
min-width: min(86px, 100%);
max-width: 100%;
}
/* The clamp, not the space, was cutting the last two titles: at 1600px the cover
is 140px tall and six lines of 10.5px type occupy about 78px, so there was room
for more. Eight lines clears "Slave Narratives: A Folk History of Slavery…" and
the Musk quotation on a phone-width archive card. */
.concept-book strong, .cover-title { -webkit-line-clamp: 8 !important; }
/* ── CONTRIBUTOR TERMS (v=alpha-viewing-42) ──────────────────────────────────
The submission paths had no terms at all: nothing stated what a contributor
was granting, and nothing asked whether they had the right to submit the work.
Built from the existing card recipe rather than a new one. */
/* The marker is "[ ]" in a monospace face: three characters, about 1.25rem wide
at 0.7rem. The indent used to be 1.05rem, which is narrower than the marker
itself, so the closing bracket ran into the first word. The indent has to
clear the marker AND leave a gap, not merely match it. */
.fkl-terms__list {
margin: 0 0 0.9rem;
padding-left: 1.75rem;
list-style: none;
}
.fkl-terms__list li {
position: relative;
margin: 0 0 0.55rem;
line-height: 1.5;
color: var(--fkl-ink-soft);
}
.fkl-terms__list li::before {
content: "[ ]";
position: absolute;
left: -1.75rem;
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--fkl-red);
}
.fkl-terms__list strong { color: var(--fkl-ink); }
.fkl-terms__agree {
display: flex;
align-items: flex-start;
gap: 0.55rem;
padding: 0.6rem 0.7rem;
border: 2px solid var(--fkl-brass);
border-radius: 3px;
background: rgba(196, 154, 72, 0.10);
cursor: pointer;
color: var(--fkl-ink);
line-height: 1.45;
}
/* 16px minimum, or iOS Safari zooms the page on focus and never zooms back. */
.fkl-terms__agree input[type="checkbox"] {
margin-top: 0.18rem;
width: 16px;
height: 16px;
flex: 0 0 auto;
accent-color: var(--fkl-red);
}
.fkl-terms__msg { color: var(--fkl-red) !important; margin-top: 0.5rem; }
/* ── COVER TITLES: clip on a line, never through one (v=alpha-viewing-44) ─────
-webkit-line-clamp IS DEAD IN CURRENT CHROME on these elements. Measured:
the rule sets display:-webkit-box !important and the computed value is still
`flow-root`, and it stays flow-root even when the property is forced inline
on the element. So the clamp has been doing nothing for a while, and the only
reason covers looked right is the 38/64-character truncation in JS.
What was left holding the line was `overflow:hidden` on a box whose height is
not a whole number of lines: 70px of box against a 10.99px line-height is
6.37 lines, so the seventh line was half-drawn and then cut through the middle
of a word — "…Support For The Revolutionar". The brand guide is explicit that
long words break rather than being cut (page 09), so this is a brand fault as
well as an ugly one.
The fix is to stop relying on the clamp: make the box an exact multiple of the
line-height, so whatever is cut is cut between lines and reads as deliberate.
--cover-lines is per template because the three covers are different heights.
Kept as the last word in the file so nothing later can reintroduce a fraction. */
.concept-book strong,
.cover-title {
--cover-lh: 1.12;
line-height: var(--cover-lh) !important;
max-height: calc(var(--cover-lh) * var(--cover-lines, 6) * 1em) !important;
overflow: hidden !important;
/* Kept for engines where it still works; harmless where it does not. */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--cover-lines, 6);
}
.archive-card__cover .cover-title { --cover-lines: 6; }
.concept-book strong { --cover-lines: 6; }
@media (max-width: 760px) {
.concept-book strong,
.cover-title { --cover-lines: 5; max-height: calc(var(--cover-lh) * 5 * 1em) !important; }
}
/* The classification chip is a stamp, and a stamp does not wrap. "SECONDARY" was
breaking across two lines as "SECONDA / RY" inside a 67px chip on every
secondary-source cover. Stamps are uppercase mono by the brand guide (page 07)
and read as damaged the moment they wrap. Let the chip size to its own text
and step the tracking down instead of breaking the word. */
.cover-type {
white-space: nowrap !important;
width: auto !important;
max-width: 100% !important;
letter-spacing: 0.06em;
}
/* Long words on a narrow spine may break — the brand guide asks for break rather
than cut (page 09) — but an automatic hyphen makes the break read as
typography instead of damage: "Responsibil-ity", not "Responsibilit y". */
.concept-book strong,
.cover-title { hyphens: auto; -webkit-hyphens: auto; }
/* ── READER ACCOUNTS AND THE FORUM (v=alpha-viewing-45) ──────────────────────
Built from the system that is already here rather than a new one: the card is
the established paper-grain + brass-border + offset-shadow recipe, actions are
.btn-support maroon, kickers are .donate-status Courier chips, and every
colour is an --fkl-* token. The brand guide's page 10 rule for the operator
applies just as well to a forum: it is another room in the reading room, not a
separate app aesthetic. */
/* The nav's account link: a small brass plaque, matching the nav buttons. */
.site-nav__account {
display: inline-flex; align-items: center; gap: 0.4rem;
font-family: 'Courier New', Courier, monospace;
font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--fkl-gilt, #f0d188); text-decoration: none;
padding: 0.45rem 0.7rem; border: 1.5px solid var(--fkl-brass, #c49a48);
border-radius: 3px; background: rgba(0, 0, 0, 0.22);
white-space: nowrap;
}
.site-nav__account:hover { background: rgba(196, 154, 72, 0.18); }
.site-nav__account span {
/* 11ch clipped "My account" to "MY ACCOU…" — Courier is monospace but the
0.09em tracking is not counted by ch. Room for a long reader name, and the
ellipsis only bites on one genuinely longer than that. */
max-width: 16ch; overflow: hidden; text-overflow: ellipsis;
}
/* ── the forum under a reading ─────────────────────────────────────────────── */
.forum-section {
margin-top: 2rem; padding: 1.4rem 1.5rem 1.6rem;
background: url('paper-grain.png') center/512px repeat, var(--fkl-paper-card, #f6e8c6);
border: 2px solid #9c6c33; border-radius: 3px;
box-shadow: var(--fkl-card-shadow, 4px 4px 0 rgba(36, 20, 7, 0.28));
color: var(--fkl-ink, #241407);
}
.forum-title {
font-family: Georgia, 'Times New Roman', serif;
font-size: 1.25rem; margin: 0.45rem 0 0.5rem; color: var(--fkl-ink, #241407);
}
.forum-count {
font-family: 'Courier New', Courier, monospace; font-size: 0.7rem;
vertical-align: middle; padding: 0.1rem 0.4rem; margin-left: 0.3rem;
border: 1px solid var(--fkl-brass, #c49a48); border-radius: 2px;
color: var(--fkl-ink-soft, #5a3b1d);
}
.forum-note, .forum-empty, .forum-loading {
font-size: 0.86rem; line-height: 1.5; color: var(--fkl-ink-soft, #5a3b1d); margin: 0 0 0.6rem;
}
.forum-empty { font-style: italic; }
.forum-list { margin: 1rem 0; display: flex; flex-direction: column; gap: 0.8rem; }
.forum-comment {
position: relative;
padding: 0.8rem 0.95rem; background: var(--fkl-paper-light, #fbf1d4);
border: 1.5px solid rgba(156, 108, 51, 0.55); border-radius: 2px;
}
.forum-comment__head {
display: flex; justify-content: space-between; align-items: baseline;
gap: 0.6rem; margin-bottom: 0.35rem; flex-wrap: wrap;
}
.forum-comment__author {
font-family: 'Courier New', Courier, monospace; font-size: 0.72rem;
letter-spacing: 0.06em; text-transform: uppercase; color: var(--fkl-red, #862b21);
}
.forum-comment__date {
font-family: 'Courier New', Courier, monospace; font-size: 0.68rem;
color: var(--fkl-ink-muted, #7b5628);
}
.forum-comment__body {
font-family: Georgia, 'Times New Roman', serif; font-size: 0.95rem; line-height: 1.55;
/* A comment is reader-written and can hold a very long unbroken string. */
overflow-wrap: break-word; word-break: break-word;
}
.forum-report {
margin-top: 0.5rem; background: none; border: none; padding: 0; cursor: pointer;
font-family: 'Courier New', Courier, monospace; font-size: 0.64rem;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--fkl-ink-muted, #7b5628); text-decoration: underline;
}
.forum-report:hover { color: var(--fkl-red, #862b21); }
.forum-composer { margin-top: 1rem; }
.forum-label {
display: block; margin-bottom: 0.3rem;
font-family: 'Courier New', Courier, monospace; font-size: 0.7rem;
letter-spacing: 0.07em; text-transform: uppercase; color: var(--fkl-ink-soft, #5a3b1d);
}
.forum-hint { text-transform: none; letter-spacing: 0; opacity: 0.75; }
.forum-textarea {
width: 100%; box-sizing: border-box; resize: vertical;
font-family: Georgia, 'Times New Roman', serif;
/* 16px exactly: iOS Safari zooms the page for anything smaller and never
zooms back. Not in a media query on purpose — iPad reports ~1024px. */
font-size: 16px; line-height: 1.5; padding: 0.7rem 0.8rem;
background: #fbf4df; color: var(--fkl-ink, #241407);
border: 1.5px solid var(--fkl-paper-dark, #b88f4f); border-radius: 2px;
}
.forum-textarea:focus {
outline: none; border-color: var(--fkl-brass, #c49a48);
box-shadow: 0 0 0 2px rgba(196, 154, 72, 0.28);
}
.forum-composer__row {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 0.6rem; margin-top: 0.6rem;
}
.forum-msg { font-size: 0.82rem; color: var(--fkl-red, #862b21); }
.forum-signin {
margin-top: 1rem; padding: 0.9rem 1rem; text-align: center;
border: 1.5px dashed rgba(156, 108, 51, 0.6); border-radius: 2px;
}
.forum-signin p { margin: 0 0 0.6rem; color: var(--fkl-ink-soft, #5a3b1d); }
/* ── the bookmark control ──────────────────────────────────────────────────── */
.record-actions { margin-top: 1.2rem; }
.bookmark-btn {
display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
font-family: 'Courier New', Courier, monospace; font-size: 0.7rem;
letter-spacing: 0.08em; text-transform: uppercase;
padding: 0.5rem 0.85rem; border-radius: 2px;
border: 1.5px solid var(--fkl-brass, #c49a48);
background: var(--fkl-paper-light, #fbf1d4); color: var(--fkl-ink, #241407);
}
.bookmark-btn:hover { background: #f3e2b6; }
.bookmark-btn.is-saved {
background: var(--fkl-red, #862b21); border-color: var(--fkl-red, #862b21); color: #f0d188;
}
.bookmark-btn[disabled] { opacity: 0.6; cursor: default; }
/* ── the account page ──────────────────────────────────────────────────────── */
.acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; }
.acct-panel, .acct-section {
padding: 1.2rem 1.3rem; margin-bottom: 1.2rem;
background: url('paper-grain.png') center/512px repeat, var(--fkl-paper-card, #f6e8c6);
border: 2px solid #9c6c33; border-radius: 3px;
box-shadow: var(--fkl-card-shadow, 4px 4px 0 rgba(36, 20, 7, 0.28));
/* min-width:0 so a grid child can shrink; without it a long word inside pushes
the panel past the viewport and body{overflow-x:hidden} deletes the overflow
with no scrollbar to show anything is missing. */
min-width: 0;
}
.acct-heading {
font-family: Georgia, 'Times New Roman', serif; font-size: 1.1rem;
margin: 0.4rem 0 0.8rem; color: var(--fkl-ink, #241407);
}
.acct-form .op-input { width: 100%; box-sizing: border-box; margin-bottom: 0.7rem; font-size: 16px; }
.acct-privacy {
font-size: 0.78rem; line-height: 1.5; color: var(--fkl-ink-soft, #5a3b1d);
border-left: 3px solid var(--fkl-brass, #c49a48); padding-left: 0.7rem; margin: 0.4rem 0 0.8rem;
}
.acct-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.7rem; }
.acct-item {
display: block; padding: 0.7rem 0.85rem; text-decoration: none;
background: var(--fkl-paper-light, #fbf1d4);
border: 1.5px solid rgba(156, 108, 51, 0.55); border-radius: 2px;
color: var(--fkl-ink, #241407);
}
.acct-item:hover { border-color: var(--fkl-brass, #c49a48); }
.acct-item__title {
display: block; font-family: Georgia, 'Times New Roman', serif;
font-size: 0.98rem; margin-bottom: 0.15rem;
}
.acct-item__body {
display: block; font-size: 0.85rem; color: var(--fkl-ink-soft, #5a3b1d);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-item__meta {
display: block; margin-top: 0.25rem;
font-family: 'Courier New', Courier, monospace; font-size: 0.65rem;
letter-spacing: 0.07em; text-transform: uppercase; color: var(--fkl-ink-muted, #7b5628);
}
/* The account link sits at the end of the nav's link row, not in .nav-actions,
because that row had no space for a fourth control and a link placed there
added a whole extra nav row at EVERY width — 49px on desktop. Measured.
It still costs a row between 860 and 1100px, which is the band CLAUDE.md
already warns about: the nav starts stacking at 980 while the search and
translate controls are only hidden at 860, so the stacked band is the tight
one. The label goes and the icon stays for the whole of that band, which is
the same trick the search box uses and keeps the nav height monotonic. */
@media (max-width: 1100px) {
.site-nav__account span { display: none; }
.site-nav__account { padding: 0.45rem 0.55rem; }
}
/* MEASURED COST, accepted rather than hidden: between 860 and 1100px the link
adds one nav row (293px -> 331px). The link row already holds five links and
.nav-actions still has search, translate and support in that band, so BOTH
rows are full and a sixth item wraps whatever size it is — a bare borderless
icon saved 2px of the 38. Nothing is clipped and the height stays monotonic as
the window narrows. Do not "fix" this by putting the link back in
.nav-actions: that added a whole row at EVERY width, 49px on desktop. */
/* ── BOOK COVERS, AS THE BRAND GUIDE DRAWS THEM (v=alpha-viewing-47) ─────────
Page 09 of the guide is a picture, and until now this file had only ever been
written against the words next to it. The drawing shows something the words do
not say: every cover carries TWO gilt rules — one below the top edge and one
above the bottom — with the title and the author centred between them. Ours
had a single rule under the title, no author, and a classification chip that
appears nowhere in the guide.
Layout is top rule / centred text block / bottom rule, so the rules sit at the
ends however tall the cover is and the text stays optically centred. The
proportions come from the drawing: rules inset about a sixth from each side,
text block centred with the title above the author. */
.archive-card__cover,
.concept-book {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: space-between !important;
box-sizing: border-box;
text-align: center;
/* THE SPINE IS 14% AND THE TEXT IS CENTRED ON WHAT IS LEFT, not on the cover.
Every cover paints its spine with a hard gradient stop —
`rgba(0,0,0,.26) 0 14%, transparent 14%` — measured identical on all seven
variants. A symmetric padding centres the title on the whole cover, which
puts it 2.4px inside the spine on a 110px cover and reads as a title
sitting on the binding.
The face runs 14%..100%, so its centre is 57%.
THE OFFSET GOES ON THE CHILDREN, NOT ON THE COVER, and that is the whole
trick. A percentage padding resolves against the CONTAINING BLOCK's inline
size, not the element's own — on the archive the cover and its parent are
both 110px so `padding-left: 21%` looked right, while on the home page the
parent is 122px against a 93px cover and every percentage came out 31% too
large: 25.6px of padding where 19.5px was wanted, and the title sat off
centre the other way. A child's percentage DOES resolve against this
element's content box, so the same numbers on .cover-text and .cover-rule
are correct on every page and at every size. */
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 11% !important;
padding-bottom: 11% !important;
align-items: flex-start !important;
}
/* 21%..93%: centred on the face's 57%, with equal air either side of it. */
.cover-rule,
.cover-text {
width: 72% !important;
margin-left: 21% !important;
}
/* The title carried 1.92px of its own side padding from an older layout, and
that quarter-pixel decided a word: "Unwinnable" measures 60.4px against a
content box of 60.16, so it broke as "Unwinnabl / e" while LOOKING like it
fit. The gutter is .cover-text's job now, so the title gives its padding up
and gets the full box. */
.concept-book strong,
.cover-title { padding-left: 0 !important; padding-right: 0 !important; }
.cover-rule {
flex: 0 0 auto;
height: 1px;
background: var(--fkl-brass, #c49a48);
opacity: 0.85;
}
.cover-text {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
min-height: 0; /* so the title's own clamp still governs its height */
gap: 0.3em;
}
/* The author is the quieter line: same serif, lighter weight, smaller, and it
never competes with the title for the clamp. Two lines at most. */
.cover-author {
font-family: Georgia, 'Times New Roman', serif;
font-weight: 400;
font-size: 0.62em;
line-height: 1.2;
color: inherit;
opacity: 0.82;
max-height: 2.4em;
overflow: hidden;
overflow-wrap: break-word;
margin: 0;
}
.concept-book .cover-author { margin-top: 0 !important; font-size: 0.62em; }
.cover-author:empty { display: none; }
/* The author line is fitted by FKL.fitCoverTitles like the title above it, and
needs the same permission to break a word it cannot fit rather than overflow,
plus the prefixed hyphens WebKit actually reads. Without this it split as
"Congressio nal" under the GAO reports. */
.cover-author {
overflow-wrap: break-word !important;
word-break: normal !important;
hyphens: auto !important;
-webkit-hyphens: auto !important;
}
/* The old single rule and the classification chip are both gone from the cover.
The chip was ours, not the guide's — page 09 shows title and author and
nothing else, and the record's classification is still on the card beside it
and in the Format filter. */
.cover-line { display: none !important; }
.cover-type { display: none !important; }
/* The FLAGSHIP badge is pinned to the top-left of the card and sat directly on
the cover's upper rule, so the one record most people look at first was the
one showing a single rule. The badge is ours, not the guide's, so the cover
yields to it rather than the other way round: push the flagship cover's
content down by the badge's height and both rules are visible again. */
.flagship-badge + .archive-card__cover { padding-top: 1.85rem !important; }
/* On a narrow spine the 7% gutter costs more than it is worth: the text box drops
to 72% of an 86px cover and titles that used to fit start losing their last
line to the clamp — "The National Bolshevist Manifesto" was 9px over at 375px.
The gutter comes down to 4% below 760px, which keeps the text centred on the
face (18%..96% is centred on 57% exactly as 21%..93% is) and gives back the
room. Centring is preserved, not traded away. */
@media (max-width: 760px) {
/* 80%/17% is still centred on the face's 57% and buys another 7px of line.
"Unwinnable" measures about 63px in the cover's bold serif and the box was
62, so it broke as "Unwinnab / le" — a mid-word break the brand guide
tolerates but nobody wants to read. */
.cover-rule,
.cover-text {
width: 80% !important;
margin-left: 17% !important;
}
/* One word decided this. "Unwinnable" measures about 65px in the spine's bold
serif and the phone box is 64, so it broke as "Unwinnabl / e" — one pixel
short. Widening further would put the text within 2px of the spine, so the
type gives way instead: a 6% reduction clears the word and the spine stays
artwork, with the full title set beside it on the card either way.
hyphens:auto is already on and would have made this a real hyphen, but
Chrome needs a hyphenation dictionary that is not always present. */
.concept-book strong,
.cover-title { font-size: 0.62rem !important; }
/* The badge is the same size on a phone as on a desktop, but the cover is
129px instead of 165px. 1.85rem of clearance stole 18px from a cover that
had none to give: the flagship lost the bottom of its title AND its
author, and it was the only cover on the page still being cut.
The choice on a phone is badge-over-rule or title-loses-a-line, so take
neither: shrink the badge instead. At .48rem it is about 15px tall, 1rem of
clearance covers it, and the flagship costs the same as every other cover. */
.flagship-badge {
font-size: .48rem; padding: .14rem .4rem; letter-spacing: .08em;
}
.flagship-badge + .archive-card__cover { padding-top: 1rem !important; }
}
/* ── PAGED READING (v=alpha-viewing-56) ──────────────────────────────────────
A reading room should read like a book, not like a file. The transcript lays
into columns one page wide and turns sideways; the brand guide's reading-room
framing is the whole argument for it.
Built from what is already here — parchment, brass rules, Courier for the
furniture, --fkl-* tokens throughout — so it belongs to the same room as the
Library/Light/Dark themes it sits beside. */
.reader-paged {
overflow: hidden !important;
position: relative;
/* NO measure here any more. The measure moved to .reader-clip, which is one
page wide and centred inside this box — so the pane itself can be as wide as
the column it sits in, and the leftover reads as the margin of a page rather
than as dead space beside a small box. Neal, on the old inline size: "its
really small block until you open the pane which I don't like." */
max-width: 100%;
margin-left: auto;
margin-right: auto;
/* A page needs a fixed height to be a page. Taller than it was: the inline
reader is now a page you can actually read a while in, not a preview. */
height: clamp(460px, 74vh, 860px);
max-height: none !important;
padding-left: 0.2rem; padding-right: 0.2rem;
cursor: default;
}
/* One page wide, centred, and it CLIPS. This is the element that makes a page a
page: without it the next column sits in the pane's margin in plain sight. */
.reader-clip {
overflow: hidden;
position: relative;
}
.reader-paged .reader-flow {
column-fill: auto;
transition: transform 220ms ease;
will-change: transform;
}
/* Nothing may straddle a page break: a heading stranded at the foot of a page
with its paragraph on the next one is the tell that this is columns and not a
book. Images are page scans and must not be split at all. */
.reader-paged .reader-flow h2,
.reader-paged .reader-flow h3,
.reader-paged .reader-flow h4 { break-after: avoid-column; break-inside: avoid-column; }
.reader-paged .reader-flow figure,
.reader-paged .reader-flow img,
.reader-paged .reader-flow blockquote,
.reader-paged .reader-flow table { break-inside: avoid-column; }
.reader-paged .reader-flow img { max-width: 100%; height: auto; }
.reader-paged .reader-flow p { orphans: 2; widows: 2; }
/* The turn zones. Invisible, but the cursor says they are there. */
.reader-paged::before,
.reader-paged::after {
content: ''; position: absolute; top: 0; bottom: 0; width: 25%;
pointer-events: none; z-index: 1;
}
.reader-paged { cursor: default; }
/* ── the pager ──────────────────────────────────────────────────────────── */
.reader-pager {
display: flex; align-items: center; gap: 0.9rem;
margin-top: 0.7rem; padding: 0.55rem 0.7rem;
background: var(--fkl-paper-card, #f6e8c6);
border: 1.5px solid var(--fkl-brass, #c49a48); border-radius: 3px;
}
.reader-pager[hidden] { display: none; }
.reader-pager__btn {
flex: 0 0 auto; cursor: pointer;
width: 2.1rem; height: 2.1rem; line-height: 1;
font-size: 1.15rem; font-family: Georgia, 'Times New Roman', serif;
color: var(--fkl-gilt, #f0d188);
background: linear-gradient(180deg, #9b3325, var(--fkl-red-dark, #55180f));
border: 1px solid #d6a15a; border-radius: 3px;
}
.reader-pager__btn:disabled { opacity: 0.35; cursor: default; }
.reader-pager__mid { flex: 1 1 auto; display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.reader-pager__slider { flex: 1 1 auto; min-width: 0; accent-color: var(--fkl-red, #862b21); }
.reader-pager__count {
flex: 0 0 auto; font-family: 'Courier New', Courier, monospace;
font-size: 0.72rem; letter-spacing: 0.06em; color: var(--fkl-ink-soft, #5a3b1d);
}
/* ── layout and size controls, beside the theme toggle ──────────────────── */
.reader-controls {
display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
margin: 0.5rem 0 0.2rem;
}
.reader-mode, .reader-size { display: inline-flex; gap: 0.3rem; }
.reader-mode button, .reader-size button {
cursor: pointer; font-family: 'Courier New', Courier, monospace;
font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
padding: 0.34rem 0.6rem;
background: var(--fkl-paper-light, #fbf1d4); color: var(--fkl-ink, #241407);
border: 1.5px solid var(--fkl-paper-dark, #b88f4f); border-radius: 2px;
}
.reader-mode button.is-active {
background: var(--fkl-red, #862b21); border-color: var(--fkl-red, #862b21);
color: var(--fkl-gilt, #f0d188);
}
.reader-mode button:hover, .reader-size button:hover { border-color: var(--fkl-brass, #c49a48); }
/* THE READING PANE IS THE WHOLE SCREEN, and the measure is kept by columns.
The 38rem cap above is a reading measure for the INLINE pane. Applied to the
expanded one it made a full-screen reader into a 608px box in a 1440px window
— a small square with no way to turn a page. The cap is lifted here and the
line length is held instead by laying the page out in two or three columns,
which is how a book solves the same problem. */
.rv-fulltext--expanded.reader-paged {
max-width: min(1500px, 94vw) !important;
width: min(1500px, 94vw) !important;
height: calc(100vh - 9.5rem) !important;
padding: 1.4rem 1.8rem !important;
}
/* THE PAGER HAS TO COME WITH IT. The pane goes position:fixed when it expands
and the pager stayed in the document flow — measured at y=2028 in a 900px
window, which is why the next-page button could not be clicked at all. It is
fixed to the foot of the screen while the pane is open, above the backdrop
(z-index 85) and the pane (90). body.rv-locked is set by FKL.expandReader and
cleared by collapseReader, so it is already exactly the right hook. */
body.rv-locked .reader-pager {
position: fixed;
left: 50%;
bottom: 1.1rem;
transform: translateX(-50%);
width: min(1500px, 94vw);
z-index: 95;
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}
/* A page is one column now, so there is no spread and no binding rule to draw.
The gutter is hidden inside the clip instead, which is what gives the turn its
separation: the old page leaves entirely before the new one arrives. */
@media (max-width: 640px) {
.reader-paged { height: clamp(380px, 70vh, 620px); }
.reader-pager__slider { display: none; } /* thumb is too small to aim at */
}
/* ── PASSWORD FIELDS: reveal, confirm, strength (v=alpha-viewing-57) ─────────
A password you cannot read is where a typo becomes "that name and password do
not match" an hour later. The eye is drawn in CSS rather than fetched, and it
is per field: nothing is ever revealed by default. */
.pw-field { position: relative; }
.pw-field .op-input { width: 100%; box-sizing: border-box; padding-right: 2.6rem; }
.pw-eye {
position: absolute; top: 50%; right: 0.45rem; transform: translateY(-50%);
width: 1.8rem; height: 1.8rem; padding: 0; cursor: pointer;
background: none; border: 1px solid transparent; border-radius: 2px;
display: flex; align-items: center; justify-content: center;
}
.pw-eye:hover { border-color: var(--fkl-brass, #c49a48); }
/* The eye: an almond with a pupil, drawn from two boxes so no asset is needed
and it inherits the ink colour of the form around it. */
.pw-eye::before {
content: ''; width: 1.05rem; height: 0.62rem;
border: 1.4px solid var(--fkl-ink-soft, #5a3b1d);
border-radius: 65% 65% 65% 65% / 100% 100% 100% 100%;
}
.pw-eye::after {
content: ''; position: absolute;
width: 0.32rem; height: 0.32rem; border-radius: 50%;
background: var(--fkl-ink-soft, #5a3b1d);
}
/* Revealed: the eye turns leather-red, so the state is obvious at a glance and
in the one colour this site uses to mean "live". */
.pw-eye.is-on::before { border-color: var(--fkl-red, #862b21); }
.pw-eye.is-on::after { background: var(--fkl-red, #862b21); }
/* strength, as guidance and never as a gate */
.pw-meter {
display: flex; align-items: center; gap: 0.5rem;
margin: -0.3rem 0 0.7rem;
}
.pw-meter span {
flex: 1 1 auto; height: 4px; border-radius: 2px;
background: rgba(156, 108, 51, 0.28); position: relative; overflow: hidden;
}
.pw-meter span::after {
content: ''; position: absolute; inset: 0 100% 0 0;
background: var(--fkl-brass, #c49a48); transition: right 160ms ease;
}
.pw-meter span.lvl-too-short::after { right: 82%; background: var(--fkl-red, #862b21); }
.pw-meter span.lvl-weak::after { right: 70%; background: var(--fkl-red, #862b21); }
.pw-meter span.lvl-fair::after { right: 50%; }
.pw-meter span.lvl-good::after { right: 25%; }
.pw-meter span.lvl-strong::after { right: 0; background: #2f6b43; }
.pw-meter em {
flex: 0 0 auto; font-style: normal;
font-family: 'Courier New', Courier, monospace; font-size: 0.64rem;
letter-spacing: 0.07em; text-transform: uppercase; color: var(--fkl-ink-muted, #7b5628);
}
.pw-match {
margin: -0.35rem 0 0.7rem; font-size: 0.78rem;
font-family: 'Courier New', Courier, monospace; letter-spacing: 0.03em;
}
.pw-match.is-ok { color: #2f6b43; }
.pw-match.is-off { color: var(--fkl-ink-muted, #7b5628); }
/* ── CHAPTER JUMPS AND A LIVE TABLE OF CONTENTS (v=alpha-viewing-58) ─────────
A 243-page work needs a way in that is not flicking. The pager carries the
document's own chapters, and the contents page the document already prints
becomes what it always looked like it was: a set of links. */
.reader-pager__chapters {
flex: 0 1 12rem; min-width: 0;
font-family: 'Courier New', Courier, monospace;
font-size: 0.68rem; letter-spacing: 0.04em;
padding: 0.4rem 0.5rem;
background: var(--fkl-paper-light, #fbf1d4); color: var(--fkl-ink, #241407);
border: 1.5px solid var(--fkl-paper-dark, #b88f4f); border-radius: 2px;
}
.reader-pager__chapters:hover { border-color: var(--fkl-brass, #c49a48); }
.reader-pager__chapters[hidden] { display: none; }
/* Scrolling still gets the chapter list; it just has no page turner to show. */
.reader-pager--scroll .reader-pager__btn,
.reader-pager--scroll .reader-pager__mid { display: none; }
.reader-pager--scroll { justify-content: flex-start; }
/* A contents line that found its chapter looks like a link. One that did not is
left exactly as the document printed it — half a contents page linking and
half not is honest, and inventing a destination would not be. */
.fkl-contents-line.is-linked { margin: 0; }
a.fkl-contents-link {
display: block; text-decoration: none; color: inherit;
padding: 0.1rem 0.3rem; margin: 0 -0.3rem; border-radius: 2px;
border-bottom: 1px dotted rgba(156, 108, 51, 0.5);
}
a.fkl-contents-link:hover {
background: rgba(196, 154, 72, 0.16);
border-bottom-color: var(--fkl-brass, #c49a48);
color: var(--fkl-red, #862b21);
}
.reader--dark a.fkl-contents-link:hover { color: var(--fkl-gilt, #f0d188); }
/* The heading you were sent to, marked briefly so the eye lands on it. */
.fkl-transcript-head:target,
.fkl-transcript-head.is-jumped {
animation: fkl-head-flash 1.4s ease-out 1;
}
@keyframes fkl-head-flash {
0% { background: rgba(196, 154, 72, 0.45); }
100% { background: transparent; }
}
@media (max-width: 640px) {
.reader-pager__chapters { flex: 1 1 auto; }
}
/* A COLUMN SETS THE MEASURE, so nothing inside it may carry its own width.
The transcript's paragraphs are capped at 736px for the scrolling layout,
which is right there and wrong here: in a 622px column every paragraph was
wider than the column holding it, the two-column spread could not resolve,
the text bunched into the middle of a full-screen pane and the first line was
sliced by the top edge. Inside the flow the column IS the measure. */
.reader-paged .reader-flow > *,
.reader-paged .reader-flow p,
.reader-paged .reader-flow h2,
.reader-paged .reader-flow h3,
.reader-paged .reader-flow h4,
.reader-paged .reader-flow blockquote,
.reader-paged .reader-flow figure {
max-width: none !important;
width: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* The first thing on a page must not carry a top margin, or the page opens with
a gap and the last line falls off the bottom. */
.reader-paged .reader-flow > *:first-child { margin-top: 0 !important; }
/* ── The drop zone ────────────────────────────────────────────────────────
Neal asked for drag-and-drop, 2026-08-31. The file input is still the thing
that holds the file — a drop writes onto it via DataTransfer — so this is a
surface laid over that input rather than a replacement for it. The input is
stretched transparently across the whole zone: that keeps ONE click target,
makes the whole panel open the dialog, and means no label/for wiring can
drift out of step with it. */
.op-drop {
position: relative;
margin: 0 0 0.85rem;
border: 1px dashed var(--fkl-paper-dark, #cbb994);
border-radius: 3px;
/* color-mix() is Safari 16.2 and Firefox 113. An engine that does not know it
drops the whole declaration, which left the drop zone with no fill at all,
so a flat parchment goes first and the mix overrides it where supported. */
background: #f7efdc;
background: color-mix(in srgb, var(--fkl-paper, #f5ecd7) 55%, transparent);
transition: border-color 0.15s ease, background 0.15s ease;
}
.op-drop__inner {
display: flex; flex-direction: column; align-items: center;
gap: 0.3rem; padding: 1.6rem 1rem; text-align: center;
pointer-events: none; /* the input beneath takes every click */
}
.op-drop__icon {
width: 26px; height: 26px; margin-bottom: 0.15rem;
color: var(--gold-dim, #9d793d); opacity: 0.75;
}
.op-drop__lead {
margin: 0; font-family: 'Courier New', Courier, monospace;
font-size: 0.82rem; letter-spacing: 0.06em;
color: var(--fkl-ink, #2e2312);
/* A long filename must wrap inside the zone rather than widen it. */
max-width: 100%; overflow-wrap: anywhere;
}
.op-drop__hint {
margin: 0; font-family: 'Courier New', Courier, monospace;
font-size: 0.7rem; letter-spacing: 0.04em;
color: var(--ink-light, #8a7a5c);
max-width: 100%; overflow-wrap: anywhere;
}
/* The real input, invisible but covering the zone. opacity:0 rather than
display:none so it stays focusable and keyboard users still reach it. */
.op-drop .op-input--file {
position: absolute; inset: 0;
width: 100%; height: 100%;
padding: 0; margin: 0; border: 0;
opacity: 0; cursor: pointer;
}
.op-drop .op-input--file:focus-visible {
opacity: 1; /* show the native control when tabbed to, so focus is visible */
outline: 2px solid var(--gold-dim, #9d793d); outline-offset: 2px;
}
.op-drop:hover { border-color: var(--gold-dim, #9d793d); }
.op-drop.is-dragging {
border-color: var(--gold-dim, #9d793d);
border-style: solid;
background: #ece0c2;
background: color-mix(in srgb, var(--gold-dim, #9d793d) 10%, var(--fkl-paper, #f5ecd7));
}
.op-drop.is-loaded {
border-style: solid;
border-color: var(--gold-dim, #9d793d);
}
.op-drop.is-loaded .op-drop__icon { opacity: 1; }
.op-drop.is-invalid { border-color: #a33; }
.op-drop.is-invalid .op-drop__lead { color: #a33; }
.op-input-row--upload { justify-content: flex-end; }
/* The human check, when a submission was refused for want of it. */
.op-challenge--wanted {
outline: 2px solid var(--gold-dim, #9d793d);
outline-offset: 6px;
border-radius: 3px;
animation: op-challenge-pulse 0.9s ease-in-out 2;
}
@keyframes op-challenge-pulse {
0%, 100% { outline-color: var(--gold-dim, #9d793d); }
50% { outline-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
.op-challenge--wanted { animation: none; }
}
/* ── The submitter's address ──────────────────────────────────────────────
Required from 2026-08-31 so a contributor can be told the outcome. It sits at
the TOP of the console, above all three ways of submitting, because the last
field anyone reads is the one furthest from the button they are aiming at. */
.op-field { margin: 0 0 1.1rem; }
.op-field__label {
display: block; margin-bottom: 0.35rem;
font-family: 'Courier New', Courier, monospace;
font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--ink-mid, #5d4d31);
}
.op-field__req {
margin-left: 0.4rem; padding: 0.05rem 0.35rem;
font-size: 0.62rem; letter-spacing: 0.1em;
color: var(--fkl-paper, #f5ecd7); background: var(--gold-dim, #9d793d);
border-radius: 2px;
}
.op-field .op-input { width: 100%; }
.op-field__note {
margin: 0.4rem 0 0;
font-family: 'Courier New', Courier, monospace;
font-size: 0.68rem; line-height: 1.5; letter-spacing: 0.02em;
color: var(--ink-light, #8a7a5c);
}
.op-field__err {
margin: 0.4rem 0 0;
font-family: 'Courier New', Courier, monospace;
font-size: 0.7rem; letter-spacing: 0.03em; color: #a33;
}
.op-input--invalid { border-color: #a33 !important; }
/* The reading-pane button now lives IN the controls row, level with Pages /
Scroll and A- / A+, where Neal asked for it (2026-08-31). It is pushed to the
far end so the two grouped controls stay together on the left. Sized to match
them: it was a title-row button and read a size too large down here. */
.reader-controls .transcript-expand {
margin-top: 0;
margin-left: auto;
font-size: 0.66rem;
letter-spacing: 0.08em;
padding: 0.34rem 0.7rem;
}
@media (max-width: 560px) {
/* Wrapping puts it on its own line; auto margin would strand it mid-row. */
.reader-controls .transcript-expand { margin-left: 0; }
}
/* ── Record rows must be allowed to shrink (2026-08-31) ───────────────────
Reported from a volunteer's screen, reproduced at 1040-1119px: the row ran
past the right edge of the window and the last column was cut off. Because
`body { overflow-x: hidden }` there is no scrollbar to reveal it — the content
is simply gone, which is why it reads as a rendering fault rather than as
overflow.
CAUSE: a grid item's default `min-width` is `auto`, i.e. its min-content
width, so the flexible column REFUSES to go narrower than the longest
unbreakable thing inside it — a long title, a URL in a byline. Below about
1120px the four tracks then need more room than the row has and the surplus
goes off the edge. `1fr` never promised to shrink; `minmax(0, 1fr)` does. */
.concept-record { grid-template-columns: 122px minmax(220px, 1fr) minmax(260px, 0.88fr) 180px; }
.concept-record > * { min-width: 0; }
@media (max-width: 1180px) {
.concept-record { grid-template-columns: 105px minmax(0, 1fr) minmax(0, 260px) 150px; }
}
/* A squeezed column must degrade to wrapped text, never to a row that reaches
past the window: anything that cannot break is told it may. */
.concept-record-main h3,
.concept-record-main p { overflow-wrap: anywhere; }
/* ── The reading pane must be ABOVE the site header (2026-09-01) ───────────
Reported on mobile: the text "bleeds out" at the top of every page. It was
painting underneath the header. The pane is z-index 90 and .site-nav is a
sticky z-index 200, so the nav sat on top of it — measured at 390x844, the
nav is 342px tall and covered the top 316px of the pane, better than a third
of the reading area. On a desktop the nav is short enough that the overlap
was never obvious.
The whole reader stack moves above it, backdrop included, so the dimmed
backdrop covers the header too — which is what a full-screen reading view
should look like. Only while body.rv-locked is set, so the header behaves
normally the rest of the time. */
body.rv-locked .rv-backdrop { z-index: 300 !important; }
body.rv-locked .reader-pane.rv-fulltext--expanded { z-index: 310 !important; }
body.rv-locked .reader-pager { z-index: 320 !important; }
/* Belt and braces: a sticky header cannot outrank the pane while it is open. */
body.rv-locked .site-nav { z-index: 80 !important; }
/* ── The pager on a narrow screen ─────────────────────────────────────────
"Chapters (6)" was taking 204px of 367 and squeezing the page counter into
27px when it needs 53, so "1 / 140" was cut off mid-number. The counter is
the one part that must never be clipped — it is how you know where you are —
so it keeps its width and the chapter menu gives way instead. */
@media (max-width: 640px) {
.reader-pager { gap: 0.5rem; padding: 0.5rem 0.55rem; }
.reader-pager__chapters {
flex: 0 1 auto;
min-width: 0;
/* No hard cap. The counter beside it is flex: 0 0 auto, so it can no longer
be squeezed by this — capping the menu as well only truncated the chapter
count to "Chapters …" while 83px of the row sat unused. */
/* Room for the native dropdown arrow, which was sitting on the "(6)". */
padding-right: 1.5rem;
text-overflow: ellipsis;
}
.reader-pager__mid {
flex: 0 0 auto; /* never compress the counter */
justify-content: center;
}
.reader-pager__count {
white-space: nowrap;
font-size: 0.78rem;
}
.reader-pager__btn { flex: 0 0 auto; }
}
/* ══ MOBILE PASS (2026-09-01) ════════════════════════════════════════════
Neal, after reading on a phone: the submission page "is all messed up …
optimize the mobile version across the board".
The faults are all the same kind — desktop decisions that assume a wide
viewport and stop making sense on a narrow one. Kept in one block at the end
so what is mobile-only is obvious, and so none of it can leak to desktop. */
@media (max-width: 760px) {
/* 1. LEGIBILITY, and the bug that cost the hero its picture.
THE PICTURE WAS GONE ON EVERY PHONE. Neal, twice: "the hero is not
showing up on the mobile version"; "the hero is the image of the books."
Measured: background-image computed to `none` at 375px and to the
bookshelf at 1280px.
The cause is one line. This rule listed
`var(--concept-wood, url("/assets/concept-wood-strip.png"))` as a
background-image layer — but --concept-wood IS DEFINED, as the colour
#100904, so the url() fallback never applied and the substitution put a
colour where an has to be. That makes the whole declaration
invalid at computed-value time, and an invalid background-image computes
to its initial value: none. Not a wrong image. No image, and no error.
A colour is legal as the last term of the `background` SHORTHAND, which
is why the desktop rule above gets away with `var(--fkl-wood-black)`.
It is not legal in a background-image list.
Every hero on the site paints wood-library-hero-clean.png on desktop —
measured across /about/, /support/, /operator/ and /terms/ — so it is
named here rather than inferred from a variable, and the flat colour goes
to background-color where it belongs.
The veil stays vertical: the desktop veils are `linear-gradient(90deg, …)`,
dark on the left where a desktop text column sits and nearly clear on the
right. On a phone the text runs the full width, so its right half would
sit on the bare photograph. */
.hero, .about-hero, .concept-hero, .support-hero,
.operator-locked-hero, .operator-console-hero {
/* LIGHTER THAN IT WAS, and measured rather than eyeballed. Neal: the hero is
too dark on a phone. It was 0.82 / 0.58 / 0.86 black over the bookshelf,
which buys contrast nobody needed — composited against the image and read
at the 95th percentile of background brightness, the headline had 14.98:1
and the gold tagline 12.22:1, where WCAG AAA asks for 7.
0.55 / 0.42 / 0.60 was the first attempt and Neal said it was still dark.
This is 0.42 / 0.28 / 0.46, and the contrast is bought back with type
rather than with more black.
What the veil actually has to protect is only two lines. The mission
paragraph carries its own panel — rgba(19,9,3,0.72), set further up this
file — so it is legible whatever happens behind it.
Measured at the lightest point of the gradient, where the tagline sits:
headline 7.86:1, tagline 6.41:1. The headline clears AAA for normal text
and is large type besides. The tagline is 17px, so AAA asks 7 of it and it
lands under — which is why the shadow below exists. It clears AA (4.5) with
room, and a shadow does for a phone in sunlight what another 15% of black
over the photograph cannot: it separates the letter from whatever is
directly behind THAT letter, instead of dimming the whole shelf.
A FOURTH STOP, ADDED v=alpha-viewing-90. Neal: "increase the shadow a
little bit on the hero just at the top, above where it says free knowledge
library." The band above the headline is the strip where the shelf meets
the navigation and the two ran together. Taken further on his second look:
0.58 was not enough. It now starts at 0.74 and is back
to the old 0.42 by 17% — measured, the headline begins 88px into a 736px
hero, which is 12%, so the extra black is spent entirely ABOVE the type and
has returned to its previous value before the first letter. The contrast
figures below are therefore unchanged where they were measured, and the
0-14% band can only have got darker, never lighter. */
background-image:
linear-gradient(180deg, rgba(9,4,1,0.74) 0%, rgba(9,4,1,0.55) 9%, rgba(9,4,1,0.42) 17%, rgba(9,4,1,0.28) 42%, rgba(9,4,1,0.46) 100%),
url("/assets/wood-library-hero-clean.png") !important;
background-size: cover, cover !important;
background-position: center, center top !important;
background-repeat: no-repeat, no-repeat !important;
background-color: #100904 !important;
}
/* 1b. And the type carries its own edge, so the picture does not have to be
dimmed to give it one. Only the two lines that sit on the bare image —
the mission paragraph has a panel of its own. */
.concept-hero__copy h1,
.concept-hero__tag,
.hero__title,
.hero__sub {
text-shadow: 0 1px 2px rgba(9,4,1,0.85), 0 2px 10px rgba(9,4,1,0.55) !important;
}
/* 2. HEIGHT. `min-height: calc(100dvh - 175px)` is most of a phone screen
spent on a background image before a word of content. A hero should
introduce the page, not replace the first screen of it. */
.about-hero, .operator-locked-hero, .concept-hero {
min-height: 0 !important;
padding-top: 2.2rem !important;
padding-bottom: 2.2rem !important;
}
/* 3. And the padding that COMPENSATED for that tall hero has to go with it —
`calc(100dvh - 470px)` is 374px of empty wood on an 844px screen, which
is what put the record itself below two screenfuls of nothing. */
.about-hero + .fkl-neutral,
.concept-hero + .fkl-neutral {
padding-top: 2rem !important;
}
/* 4. Long unbroken strings — a receipt token, a storage URL, a DOI — are the
usual cause of a page that scrolls sideways on a phone. */
.source-ref, .source-ref a,
.entry-meta dd, .record-meta dd,
.submission-receipt, .submission-receipt a,
.op-receipt-link, code, kbd, samp {
overflow-wrap: anywhere;
word-break: break-word;
}
}
/* ══ FULL-TAB READING VIEW (/read/) ══════════════════════════════════════
Neal, 2026-09-01: the reading pane stays as a preview, and there is a link
beside it to open the transcript in its own tab "so that just provides a
bigger window".
So this page spends its space on the text. One thin bar instead of the site
header — the stacked mobile nav is 342px, which would hand back most of what
opening a tab was for. */
/* html body, and !important, because a later global rule paints every page with
the wood gradient. On a reading page that is 700px of dark texture around the
text; parchment is the page here. */
html body.read-page {
background: var(--fkl-paper, #f5ecd7) !important;
background-image: none !important;
margin: 0;
}
.read-bar {
position: sticky; top: 0; z-index: 20;
display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
padding: 0.55rem 1.1rem;
background: var(--concept-wood, #2b1608);
border-bottom: 1.5px solid var(--fkl-brass, #c49a48);
}
.read-bar__back {
flex: 0 0 auto;
font-family: 'Courier New', Courier, monospace;
font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--fkl-gilt, #f0d188); text-decoration: none;
padding: 0.3rem 0.55rem; border: 1px solid rgba(200,148,58,0.45); border-radius: 3px;
}
.read-bar__back:hover { background: rgba(196,154,72,0.18); color: var(--fkl-gilt, #f0d188); }
.read-bar__title {
flex: 1 1 14rem; min-width: 0;
font-family: Georgia, 'Times New Roman', serif;
font-size: 0.92rem; color: #ecd8af;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.read-bar__controls { flex: 0 0 auto; }
.read-bar__controls .reader-controls { margin: 0; }
.read-main {
/* Wider than the pane, and the type grows with it. Neal wanted a full-screen
reading experience, and 44rem in a 1440px window left most of the screen
empty. The measure still holds — a bigger page means bigger text, not
longer lines, so the character count per line barely moves. */
max-width: 60rem;
margin: 0 auto;
padding: 1.6rem 1.3rem 2.4rem;
font-size: 1.12rem;
}
/* The paged reader takes the window's height here, less the bar and the pager.
In the preview pane a page is a box on a page; in a tab it is the screen. */
.read-page .reader-paged {
height: calc(100vh - 11rem) !important;
max-width: 100% !important;
}
@supports (height: 100dvh) {
.read-page .reader-paged { height: calc(100dvh - 11rem) !important; }
}
.read-main .transcript-body { background: none !important; border: none !important; }
/* In a tab the pager sits under the text rather than being pinned to the
viewport: there is no backdrop to float above and nothing else competing. */
.read-page .reader-pager { position: static !important; width: auto; transform: none; }
@media (max-width: 640px) {
.read-bar { gap: 0.5rem; padding: 0.5rem 0.7rem; }
.read-bar__title { flex-basis: 100%; order: 3; font-size: 0.82rem; white-space: normal; }
.read-main { padding: 1.4rem 1rem 2.4rem; }
}
/* The link that opens it, sitting beside the reading-pane button. */
.reader-controls .transcript-newtab {
margin-left: 0.4rem;
flex: 0 0 auto; cursor: pointer;
font-family: 'Courier New', Courier, monospace;
font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
padding: 0.34rem 0.7rem; text-decoration: none;
color: var(--fkl-ink, #2e2312);
background: var(--fkl-paper-dark, #e6d7b4);
border: 1.5px solid var(--fkl-brass, #9c6c33); border-radius: 3px;
}
.reader-controls .transcript-newtab:hover { background: rgba(196,154,72,0.30); }
@media (max-width: 560px) {
.reader-controls .transcript-newtab { margin-left: 0; }
}
/* ── BOOK TITLES: THE ELLIPSIS NEVER FIRED (v=alpha-viewing-73) ──────────────
Neal: titles on the covers were being cut with no "…" to say so.
MEASURED CAUSE. Two rules capped the title and they disagreed. The clamp said
8 lines; max-height said 5 on a phone and 6 above it — 55.552px at a 11.11px
line, 61.93px at 10.32px, 69.67px at 11.61px, all exact multiples. max-height
is the smaller of the two, so IT is what cuts, and a max-height cut draws no
ellipsis: it slices the line through the middle of the glyphs. The clamp,
which is the only thing that draws the "…", could never be reached. Raising
the clamp from 6 to 8 — the fix in v36 — could not have worked for the same
reason, because max-height was left at 6.
THE FIX is to let ONE number decide, in a unit that cannot drift from the type.
line-height is 1.12 at every breakpoint (11.1104/9.92, 8.6016/7.68,
10.3219/9.216), so N lines is exactly N × 1.12em. The clamp and the height are
both derived from --title-lines, and cannot disagree again.
Line budget is unchanged — 6 lines, 5 on a phone — so no title loses a word.
The only difference is that a title too long for the cover now ENDS in an
ellipsis instead of being sliced.
Last in the file on purpose: three earlier blocks set these properties with
!important, one of them inside a max-width:760px media query that a later
!important rule outside the query was overriding. Specificity ties break on
order, so this has to be the final word. */
.concept-book strong,
.cover-title {
--title-lines: 6;
display: -webkit-box !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--title-lines) !important;
line-clamp: var(--title-lines);
max-height: calc(var(--title-lines) * 1.12em) !important;
overflow: hidden !important;
/* Long words still break rather than being cut, and hyphens:auto puts a real
hyphen at the break. -webkit- prefix restated with !important because Safari
reads only the prefixed property and the earlier block marked just the
unprefixed one. */
overflow-wrap: break-word !important;
word-break: normal !important;
hyphens: auto !important;
-webkit-hyphens: auto !important;
}
/* The home page's covers are 108px where the shelves' are 159px, so the title
there gets between 4.6 and 5.0 lines of room however wide the window is. Six
would be squeezed by the flex layout and sliced again — the same cut arriving
by a different route, since a shrunken flex item clips with its own overflow
and never reaches the clamp. Four fits the space that exists. */
body[data-collection] .concept-book strong,
body[data-collection] .cover-title { --title-lines: 4; }
/* Four on a phone, not five. The cover is 123px tall there and the lines above
and below the title take the rest, so the title box gets about 50px — less
than the 55.6px five lines need. The flex item then shrinks and its own
overflow slices the fifth line, which is the same slice by another route.
Four lines is 44.4px and fits inside the space that actually exists. */
@media (max-width: 760px) {
.concept-book strong,
.cover-title { --title-lines: 4; }
}
/* ── THE RECORD CARD'S META COLUMN (v=alpha-viewing-74) ──────────────────────
Neal: the verified date has to be readable on a wide screen, and the source,
the copy and the hash should be links.
The values were nowrap + ellipsis at every width, so "Mar 17, 2026" was cut to
"Mar 17, 20…" on a 1600px display with room to spare — the stamp beside it
already showed the date in full, which is how the truncation went unnoticed.
The label column is a fixed 130px, so the value column is what the card gives
it; letting the date wrap costs nothing and letting the rest keep the ellipsis
protects the layout from a long hostname. */
.concept-record-meta dd.meta-date {
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.concept-record-meta .meta-link {
color: var(--fkl-red);
text-decoration: underline;
text-underline-offset: 2px;
}
.concept-record-meta .meta-link:hover { color: #a8341f; }
/* A hash is a fingerprint, not prose: monospace, and it may break anywhere. */
.concept-record-meta .meta-hash {
font-family: var(--font-mono);
font-size: 0.94em;
word-break: break-all;
}
/* What is absent is said quietly. It is still said. */
.concept-record-meta .meta-none { color: #6d5a3d; font-style: italic; }
/* The card is an that behaves like a link now, so the pointer and the
focus ring the anchor gave it for free have to be stated. */
.concept-record[role="link"] { cursor: pointer; }
.concept-record[role="link"]:focus-visible {
outline: 2px solid var(--fkl-red);
outline-offset: 2px;
}
a.view-record-btn { text-decoration: none; }
/* ── THE UNDO TOAST IN THE REVIEW QUEUE (v=alpha-viewing-74) ─────────────────
A removal used to be silent: the card vanished, the list reflowed, and the
archivist was looking at a different submission without being told. This says
what happened, names the record so there is no doubt which one went, and
counts down the thirty seconds in which it can be taken back. */
.rv-toasts {
position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
z-index: 400; display: flex; flex-direction: column-reverse; gap: 0.6rem;
width: min(560px, calc(100vw - 2rem));
}
.rv-toast {
position: relative; overflow: hidden;
display: flex; align-items: center; gap: 1rem;
padding: 0.85rem 1rem 1rem;
background: #1a0f06;
border: 1px solid var(--fkl-brass);
border-radius: 4px;
box-shadow: 0 8px 26px rgba(20, 10, 2, 0.5);
color: #f3e3c0;
opacity: 0; transform: translateY(10px);
transition: opacity .2s ease, transform .2s ease;
}
.rv-toast.is-in { opacity: 1; transform: translateY(0); }
.rv-toast__body { flex: 1 1 auto; min-width: 0; }
.rv-toast__head {
font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--gold); margin-bottom: 0.2rem;
}
.rv-toast__title {
font-family: var(--font-serif, Georgia, serif); font-size: 0.95rem; font-weight: 700;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rv-toast__note { font-size: 0.7rem; color: #b9a37c; margin-top: 0.15rem; }
.rv-toast__undo {
flex: 0 0 auto; cursor: pointer;
font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
color: #fff2c8; background: linear-gradient(180deg, #9c3a28, #6d2617);
border: 1px solid var(--fkl-brass); border-radius: 3px;
padding: 0.5rem 0.8rem;
}
.rv-toast__undo:hover { background: linear-gradient(180deg, #aa402d, #76291a); }
/* The seconds are a number the eye can check, and the bar is the same fact for
the eye that is not reading. */
.rv-toast__secs {
display: inline-block; margin-left: 0.45rem; padding: 0 0.3rem;
border-radius: 2px; background: rgba(0,0,0,0.28); font-variant-numeric: tabular-nums;
}
.rv-toast__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(196,154,72,0.22); }
.rv-toast__bar i { display: block; height: 100%; width: 100%; background: var(--gold); transform-origin: left center; animation: rvDrain 30s linear forwards; }
@keyframes rvDrain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
.rv-toast { transition: none; }
.rv-toast__bar i { animation-duration: 30s; }
}
/* A transcript that cannot be trusted says so before it is read (v=alpha-viewing-75).
Neal's decision on Copernicus, 2026-09-05: keep the uncorrected 1543 Latin OCR
and label it, rather than repair what cannot be repaired or quietly delete it.
The notice reads as a caution, not as the ordinary "this is extracted text"
line it replaces, because the two say very different things. */
.transcript-notice--warn {
border-left: 3px solid var(--fkl-red);
padding-left: 0.85rem;
color: var(--fkl-ink);
}
/* ── A FOOTNOTE INSIDE THE TRANSCRIPT (v=alpha-viewing-75) ───────────────────
Scanning a printed critical edition drops the notes from the foot of the page
into the flow of the text. Around 300 of them survive across the transcripts
and they must not be deleted: they are real text, and an archive does not
discard part of a document because it landed in the wrong place. So they are
shown as what they are and the eye can skip them.
Set in and smaller rather than hidden, because a reader who wants the note
should still be able to read it. The rule at the left is the same maroon the
site uses for apparatus elsewhere. */
.transcript-body .fkl-transcript-note {
margin-left: 1.6rem;
padding-left: 0.9rem;
border-left: 2px solid rgba(138, 43, 29, 0.32);
font-size: 0.88em;
line-height: 1.55;
color: var(--fkl-ink-soft, #5b4a30);
}
@media (max-width: 560px) {
.transcript-body .fkl-transcript-note { margin-left: 0.5rem; padding-left: 0.7rem; }
}
/* ── THE MOBILE MASTHEAD WAS EATING THE SCREEN (v=alpha-viewing-76) ──────────
Neal: "the hero is not showing up on the mobile version."
It was rendering — 736px of it — but it began 337px down an 812px phone,
because the navigation was 337px tall. Forty-one per cent of the first screen
was chrome: an oversized brand block at 112px, five links wrapping onto three
rows at 117px, and a search field and a Support button under those. What a
reader met on opening the site was a logo and a menu, and they had to scroll
to find out what the site is.
Measured, not guessed: brand 112 + links 117 + actions 48, plus padding.
This is one block at the end of the stylesheet on purpose. Six earlier blocks
set .site-nav__inner and .site-nav__brand at overlapping breakpoints and were
partly cancelling each other out; untangling them risks the desktop nav for no
gain, while a single authoritative block at the end cannot be overridden by
any of them. */
@media (max-width: 760px) {
.site-nav__inner {
grid-template-columns: 1fr !important;
padding: 0.55rem 0.9rem !important;
gap: 0.5rem !important;
min-height: 0 !important;
}
/* THE BRAND IS AN IMAGE, not the markup it looks like. The