/* ghost-slain.css -- branded PIPE 3 stylesheet for "The Ghosts of the
Slain" (1915), ported from the Analects prototype design authority
(analects.css). Generated by _Build-Scripts\build_finished_html.py --
hand-edit ghost-slain.html instead of this generated file only if you
also re-run the generator, or the stylesheet link's ?v= fingerprint
(SHA-256 of this file, first 10 hex chars) goes stale. */
/* ---- design tokens, verbatim, analects.css:1-50 ------------------------ */
:root {
--parchment: #f6f1e7;
--parchment-mid: #eee7d6;
--parchment-dark: #ddd3bd;
--ink: #211c15;
--ink-mid: #44392d;
--ink-light: #665746;
--rust: #842727;
--rust-light: #a13a32;
--gold: #7b6326;
--rule: #c5b48f;
--note-bg: #eee5cf;
--note-border: #c0a070;
--shadow: rgba(30, 25, 18, 0.16);
--source-rail: 3.25rem;
--source-label: 2.75rem;
--contents-panel-width: 16rem;
--header-height: 3.55rem;
--section-bar-height: 2.15rem;
--body: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Noto Serif CJK TC", Georgia, serif;
--display: "Palatino Linotype", "Book Antiqua", "Noto Serif CJK TC", Georgia, serif;
--paper-highlight: rgba(255, 255, 255, 0.82);
--paper-texture: rgba(83, 64, 32, 0.018);
--on-accent: white;
--header-text: #f8f1df;
--header-bg: rgba(32, 27, 20, 0.97);
--header-shadow: rgba(0, 0, 0, 0.2);
--toggle-hover-color: #e3c46b;
--toggle-hover-bg: rgba(255, 255, 255, 0.08);
--nav-accent: #d7b85b;
--nav-meta: rgba(248, 241, 223, 0.82);
--title-bg: #f5f0e6;
--title-ink: #1e1913;
--title-kicker: #9a5c25;
--title-rule: #b8a678;
--cover-border: rgb(0, 0, 0);
--panel-highlight: rgba(255, 255, 255, 0.28);
--link-hover-bg-strong: rgba(132, 39, 39, 0.07);
--backdrop-bg: rgba(22, 18, 14, 0.42);
--panel-tint: rgba(255, 255, 255, 0.3);
--figure-bg: rgba(255, 255, 255, 0.55);
--footer-text: #eee3ca;
--footer-bg: #241f18;
--focus-ring: #d19135;
color-scheme: light;
}
/* ---- dark mode, verbatim, analects.css:65-133 --------------------------
System path follows prefers-color-scheme unless the reader has chosen
Off; explicit On always wins. Hue stays close to the light values, only
lightness/direction flips -- ink on dark paper, not an inverted site. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--parchment: #1b1712;
--parchment-mid: #241f18;
--parchment-dark: #2c251c;
--ink: #e8dfc9;
--ink-mid: #c9bc9c;
--ink-light: #a89877;
--rust: #e0785f;
--rust-light: #ef9478;
--gold: #d4af5a;
--rule: #4a4030;
--note-bg: #2a2318;
--note-border: #6b5636;
--shadow: rgba(0, 0, 0, 0.5);
--paper-highlight: rgba(255, 240, 210, 0.045);
--paper-texture: rgba(0, 0, 0, 0.32);
--header-shadow: rgba(0, 0, 0, 0.5);
--toggle-hover-bg: rgba(255, 255, 255, 0.12);
--panel-highlight: rgba(255, 255, 255, 0.06);
--link-hover-bg-strong: rgba(224, 120, 95, 0.18);
--backdrop-bg: rgba(0, 0, 0, 0.6);
--title-bg: #17130f;
--title-ink: #f2e9d6;
--title-kicker: #dba765;
--title-rule: #6b5636;
--cover-border: rgba(232, 223, 201, 0.4);
--panel-tint: rgba(255, 255, 255, 0.06);
--figure-bg: rgba(0, 0, 0, 0.2);
--on-accent: #1b1712;
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--parchment: #1b1712;
--parchment-mid: #241f18;
--parchment-dark: #2c251c;
--ink: #e8dfc9;
--ink-mid: #c9bc9c;
--ink-light: #a89877;
--rust: #e0785f;
--rust-light: #ef9478;
--gold: #d4af5a;
--rule: #4a4030;
--note-bg: #2a2318;
--note-border: #6b5636;
--shadow: rgba(0, 0, 0, 0.5);
--paper-highlight: rgba(255, 240, 210, 0.045);
--paper-texture: rgba(0, 0, 0, 0.32);
--header-shadow: rgba(0, 0, 0, 0.5);
--toggle-hover-bg: rgba(255, 255, 255, 0.12);
--panel-highlight: rgba(255, 255, 255, 0.06);
--link-hover-bg-strong: rgba(224, 120, 95, 0.18);
--backdrop-bg: rgba(0, 0, 0, 0.6);
--title-bg: #17130f;
--title-ink: #f2e9d6;
--title-kicker: #dba765;
--title-rule: #6b5636;
--cover-border: rgba(232, 223, 201, 0.4);
--panel-tint: rgba(255, 255, 255, 0.06);
--figure-bg: rgba(0, 0, 0, 0.2);
--on-accent: #1b1712;
}
:root[data-theme="light"] {
color-scheme: light;
}
/* Preserved artefacts: image files are never touched; dark mode only dims
them so a bright scan does not glare on a dark page (analects.css:154-
165). Captain's ruling (PIPE3-DESIGN-PACKET.md, decision list item 2):
this dimming does NOT apply to cover-front.png, cover-back.png or
cover-art.png -- those three are exempted below by re-asserting their
normal-mode filter at higher selector specificity than these two rules. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) img {
filter: brightness(0.85);
}
}
:root[data-theme="dark"] img {
filter: brightness(0.85);
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: auto;
scroll-padding-top: calc(var(--header-h-actual, var(--header-height)) + var(--section-bar-height) + 0.75rem);
}
body {
margin: 0;
color: var(--ink);
background:
radial-gradient(circle at 18% 10%, var(--paper-highlight), transparent 34rem),
repeating-linear-gradient(0deg, var(--paper-texture) 0, var(--paper-texture) 1px, transparent 1px, transparent 4px),
var(--parchment);
font-family: var(--body);
font-size: clamp(1.06rem, 0.98rem + 0.24vw, 1.24rem);
line-height: 1.58;
text-rendering: optimizeLegibility;
}
a {
color: var(--rust);
text-decoration-thickness: 0.08em;
text-underline-offset: 0.16em;
}
a:hover {
color: var(--rust-light);
}
.skip-link {
position: fixed;
z-index: 100;
top: 0.5rem;
left: 0.5rem;
padding: 0.65rem 1rem;
color: var(--on-accent);
background: var(--rust);
transform: translateY(-150%);
}
.skip-link:focus {
transform: none;
}
.site-header {
position: sticky;
z-index: 30;
top: 0;
color: var(--header-text);
background: var(--header-bg);
border-bottom: 2px solid var(--gold);
box-shadow: 0 0.25rem 1rem var(--header-shadow);
}
/* Floating section-title bar, analects.css:224-275. */
.section-bar {
position: sticky;
z-index: 25;
top: var(--header-h-actual, var(--header-height));
display: flex;
align-items: center;
min-height: var(--section-bar-height);
padding: 0;
color: var(--ink-light);
background: var(--parchment-mid);
border-bottom: 1px solid var(--rule);
box-shadow: 0 0.15rem 0.4rem var(--shadow);
font-family: var(--display);
font-size: 0.72rem;
letter-spacing: 0.03em;
text-transform: uppercase;
opacity: 0;
visibility: hidden;
transform: translateY(-0.35rem);
transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms, padding-left 180ms ease;
}
.section-bar.is-visible {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity 160ms ease, transform 160ms ease, padding-left 180ms ease;
}
.section-bar-inner {
width: min(100% - 2rem, 52rem);
height: 100%;
margin-inline: auto;
box-sizing: border-box;
display: flex;
align-items: center;
}
.site-nav {
width: min(100% - 2rem, 76rem);
min-height: 3.55rem;
margin-inline: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
font-family: var(--display);
font-size: 0.72rem;
letter-spacing: 0.055em;
text-transform: uppercase;
}
.nav-leading {
min-width: 0;
flex: 1;
display: flex;
align-items: center;
gap: 0.75rem;
}
.site-nav a {
color: inherit;
text-decoration: none;
}
.contents-toggle,
.contents-close,
.contents-backdrop {
border: 0;
font: inherit;
cursor: pointer;
}
.contents-toggle {
width: 2.25rem;
height: 2.25rem;
padding: 0;
display: grid;
place-items: center;
color: var(--header-text);
background: transparent;
border-radius: 0.25rem;
font-family: var(--body);
font-size: 1.2rem;
line-height: 1;
}
.contents-toggle:hover,
.contents-toggle[aria-expanded="true"] {
color: var(--toggle-hover-color);
background: var(--toggle-hover-bg);
}
.nav-brand {
min-width: 0;
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: 0.55rem;
row-gap: 0.08rem;
font-size: 0.86rem;
line-height: 1.3;
}
.nav-title {
white-space: nowrap;
}
.nav-meta-group {
display: inline-flex;
align-items: baseline;
gap: 0.55rem;
white-space: nowrap;
}
.nav-separator {
color: var(--nav-accent);
font-size: 0.68rem;
}
.nav-meta {
color: var(--nav-meta);
font-size: 0.54rem;
letter-spacing: 0.045em;
}
.top-link {
white-space: nowrap;
}
main {
min-height: 100vh;
transition: margin-left 180ms ease;
overflow-x: clip;
}
/* ---- title page, analects.css:399-419, 432-441, 471-486, 510-512 ------- */
/* Captain order, 2026-09-28 (stamp gap follows Analects, see
.library-edition below): min-height loses 18.9px (here and in the 720px
block) -- exactly the 24px -> 5.1px the stamp's margin above loses. Below
~900px this page is stretched to min-height rather than sized by its
content (slack 135px at 420x900), so without it the stamp would move up
18.9px and the gap from the stamp to the next section ("A VISION OF")
would grow by that much; with it that gap is unchanged (257.25 / 127.89 /
153.81 / 153.81 at 420 / 768 / 1280 / 1920 by 900px, measured before and
after). */
.title-page {
position: relative;
min-height: calc(100vh - var(--header-height) - 18.9px);
padding: clamp(3rem, 6vw, 5rem) 1.5rem 3.5rem;
display: grid;
grid-template-columns: minmax(0, 1fr);
justify-items: center;
align-content: start;
text-align: center;
background: var(--title-bg);
}
/* Captain order, 2026-09-28 ("All builds should match": the title-page
`Arsinoe Library Edition, 2026` stamp follows Analects in gap above and
colour). This stamp already carried Analects' 0.35rem margin and
var(--ink-light), but sits in a block `.title-credits` under
`.display-lines`, whose own 1.5rem margin-bottom collapsed with it and
left 26.11px of ink gap (Range-rect) against Analects' 7.38 / 7.27 /
7.22 / 6.94 at 420 / 768 / 1280 / 1920. That margin is zeroed for the
line directly above the stamp (`:has()`, which analects.css:857 already
uses) and margin-top set to 5.1px -> 7.2px ink gap at every
width (0.02-0.26px from Analects). See .title-page for the min-height
compensation. */
.title-credits .display-lines:has(+ .library-edition) {
margin-bottom: 0;
}
.library-edition {
margin: 5.1px 0 0;
color: var(--ink-light);
font-family: var(--display);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.14em;
line-height: 1.2;
text-transform: uppercase;
}
.eyebrow {
margin: 1rem 0 0.25rem;
color: var(--rust);
font-family: var(--display);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.contents-panel-head .eyebrow {
margin-top: 0;
}
.title-page h1 {
margin: 0;
color: var(--title-ink);
font-family: "Bodoni MT", Didot, "Times New Roman", serif;
font-size: clamp(3.25rem, 6vw, 6.75rem);
font-weight: 400;
letter-spacing: 0.015em;
line-height: 0.82;
text-transform: uppercase;
}
.cover-art {
width: min(47rem, 76vw);
max-width: 70%;
margin: clamp(2rem, 5vw, 3rem) 0 0;
padding: 0;
background: transparent;
border: 5px solid var(--cover-border);
box-shadow: none;
}
.cover-art img {
display: block;
width: 100%;
height: auto;
filter: sepia(0.1) contrast(1.03);
}
.title-credits {
margin-top: 1.65rem;
}
/* ---- reading column width + rail reservation, analects.css:514-544 ----
Applied to Ghost-slain's own section types. half-title, frontispiece,
text-section, colophon and reference each carry one or more rail
markers as descendants and so reserve --source-rail on the right;
source-note carries none (own rule, below).
Captain Review 2, 2026-09-12: "reference" was added to this list --
previously it shared a boxed/note-styled rule with source-note (own
rule, below the .cover-figure block) plus its own padding-right
override; the box is now removed (order (b): Reference reads as an
ordinary section header like the rest of the document, not a note),
so it takes the same plain reading-column treatment as its siblings
here, including their rail-reserving padding-right. Its two rail
markers (page 1 "Front cover", page 36 "Back cover") are unaffected --
they're absolutely positioned against this element's `position:
relative`, exactly as before. */
.half-title,
.frontispiece,
.text-section,
.colophon,
.reference {
position: relative;
width: min(100% - 2rem, 52rem);
margin-inline: auto;
padding: clamp(2.5rem, 6vw, 4.5rem) var(--source-rail) clamp(2.5rem, 6vw, 4.5rem) 0;
box-sizing: border-box;
}
/* ---- Captain's divider ruling, 2026-09-24: one spacing-line-spacing
divider at each of the work's 9 main-section/large-chapter boundaries
(frontispiece->1, 1->2, 2->3, 3->4, 4->5, 5->6, 6->colophon,
colophon->reference, reference->source-note); NOT at title-page->
half-title or half-title->frontispiece, which stay one continuous
front-matter opening per the Captain's ruling and are untouched here.
border-top supplies the line; padding-top/padding-bottom on each side
of a boundary are set so the visible gap above the line equals the
visible gap below it (within 1px) at 1280x900 and 420x800, matching
the Analects rhythm (~102px/103px at 1280, ~56px/57px at 420 -- the
+1px on the "below" side is the line's own width, exactly as in the
Analects fix). Fixed px values (not the shared clamp() above) because
these targets must land on exact pixels at two specific viewports;
each pair is still expressed as its own clamp() so the transition
between them stays smooth, except #section-4's padding-bottom (next
note) where a smooth two-point clamp isn't algebraically possible.
reference and half-title/frontispiece's own padding-top/bottom are
untouched by the shared rule above; only the overrides below change.
See _QA/reports/Divider-Apply-2026-09-24.md for the gap arithmetic. */
.text-section,
.colophon,
.reference {
border-top: 1px solid var(--rule);
}
.text-section {
padding-top: clamp(28px, 6.2vw, 74px);
padding-bottom: clamp(34.6px, 7vw, 78.8px);
}
/* section-4's last visible content before the divider is a mid-line
decorated-initial image (initial-p23-4.png) that sits lower than the
paragraph text baseline at 1280 width only -- at 420 the paragraph
re-wraps and ordinary text is last again, matching every other
chapter. "Last visible content" is measured the same way at every
boundary (lowest bottom edge of any visible glyph or image); this
rule only compensates the one boundary where that content happens to
sit lower, so the reader still sees the same ~102px gap there. The two
viewport targets (34.6px at 420, matching every other chapter; 106.1px
at 1280) are too far apart for one two-point clamp() to hit both
exactly, so the mobile value is restored explicitly in the existing
max-width: 720px block below instead. */
#section-4 {
padding-bottom: 106.1px;
}
#frontispiece {
padding-bottom: clamp(28.9px, 6.3vw, 74.9px);
}
main .colophon {
padding-top: clamp(24px, 5.6vw, 70px);
padding-bottom: clamp(28.9px, 6.3vw, 74.9px);
}
#reference {
padding-top: clamp(59px, 9vw, 106px);
/* padding-bottom re-tuned 2026-09-28 (FO-ordered fix, see the
.source-note comment below) -- was clamp(23px, 5.4vw, 69px), sized
for the boundary's old box-border-is-the-line design (2026-09-24).
Now feeds the reference->source-note gap-ABOVE only (the box's own
margin-top/::before carry the gap-below); re-targeted so gap-above
lands on the document's own divider rhythm (102px at 1280, 56px at
420) instead of the old, unrelated 102/103 pairing that boundary
used to share with everyone else's padding-top/bottom pairing.
FO correction 2026-09-28: +5px. The back-cover figure's 5px frame is
visible ink, not gap; measured from the frame's outer edge the gap
above the line was 97px at 1280 (51px at 420) against 102px (56px)
below. The +5px makes both sides equal the document's rhythm. */
padding-bottom: calc(clamp(50px, 9vw, 96px) + 5px);
}
.display-lines {
margin: 1.5rem auto;
color: var(--ink-mid);
font-family: var(--display);
font-size: 0.85rem;
letter-spacing: 0.06em;
line-height: 1.7;
text-align: center;
}
/* white-space: pre-wrap carried over from BasicHTML/ghost-slain.css:17-21
unchanged -- required so the two-space sentence-boundary convention
(Plan-Design_Ghost-slain.md PIPE 1) still renders. */
p.prose {
margin: 0 0 1.1em;
white-space: pre-wrap;
overflow-wrap: break-word;
text-align: left;
}
/* ---- decorated initials, re-expressed from BasicHTML/ghost-slain.css:23-
36 in the branded scale; float/inline-baseline mechanics unchanged. */
.initial {
float: left;
height: 2.75em;
width: auto;
margin: 0.15em 0.4em 0 0;
}
.initial.initial-mid {
float: none;
display: inline-block;
height: 1.25em;
vertical-align: text-bottom;
margin: 0 0.15em 0 0;
}
/* ---- plates: closest prototype analogue is .maps .source-figure /
.source-figure, analects.css:1888-1919. */
.plate {
position: relative;
margin: 1.75rem auto;
text-align: center;
}
.plate img {
display: block;
width: auto;
max-width: 100%;
max-height: 72vh;
margin-inline: auto;
object-fit: contain;
border: 5px solid var(--cover-border);
box-sizing: border-box;
}
.plate figcaption {
margin-top: 0.65rem;
color: var(--ink-light);
font-size: 0.83rem;
font-style: italic;
}
/* ---- printer's device (colophon ornament): Captain Review 1's sizing
intent (BasicHTML/ghost-slain.css:57-69) carried over, re-themed. */
.device {
margin: 2rem auto;
text-align: center;
}
.device img {
max-width: min(100%, 18em);
height: auto;
}
/* ---- cover photographs (Reference section): reuse the cover-figure
bordered-frame convention (analects.css:471-486) for the frame only.
These are colour photographs of the physical cloth binding, not aged
paper scans, so the sepia/contrast scan-warming filter used on
.cover-art is deliberately not applied here (see finished-build-
report.txt for this styling decision). Captain Review 2, 2026-09-12,
order (c): confirmed this frame -- border: 5px solid var(--cover-border)
-- is the exact same rule (same width, same colour token, so identical
in both themes) as .cover-art's frame on the title page; the box now
sits ONLY around these two images (this rule), never around the
Reference section itself (see the .reference h2 comment above). */
.cover-figure {
width: min(47rem, 76vw);
max-width: 70%;
margin: 1.75rem auto;
padding: 0;
background: transparent;
border: 5px solid var(--cover-border);
box-shadow: none;
}
.cover-figure img {
display: block;
width: 100%;
height: auto;
}
/* Dark-mode exemption for the three cover images (Captain's ruling):
re-assert the normal-mode filter at higher specificity than the two
blanket dark-mode img rules above, so cover-art/cover-front/cover-back
never receive the brightness(0.85) dimming applied to plates/initials. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .cover-art img {
filter: sepia(0.1) contrast(1.03);
}
:root:not([data-theme="light"]) .cover-figure img {
filter: none;
}
}
:root[data-theme="dark"] .cover-art img {
filter: sepia(0.1) contrast(1.03);
}
:root[data-theme="dark"] .cover-figure img {
filter: none;
}
/* ---- About this archival edition: styled like the prototype's own end
matter, analects.css:1427-1438. (Reference no longer shares this rule --
see Captain Review 2 comment above the rail-reservation block, and the
.reference h2 / .cover-figure comments below.)
Captain order, 2026-09-28 ("update all the About this archival edition
sections to look like Analects... reference Analects for correct
example"): padding-top used to be `clamp(54px, 9vw, 100px)` -- a stand-in
for the reference->source-note divider gap named in the 2026-09-24 ruling
above (line ~437) -- which left the inside padding asymmetric (100px top
vs 40px the other three sides at 1280) and never actually drew that
boundary's line. Reverted to flat `2.5rem` on all four sides, matching
the Prototype's own card exactly (analects.css:1717-1725); the gap moves
OUTSIDE the box via `margin-top` (below) and the line is drawn by the new
`::before` pseudo-element, same technique as analects.css:1736-1750.
FO-ordered fix, 2026-09-28: the first pass at this box's margin-top
(`clamp(23px, 5.4vw, 69px) + 3px`, ~70px at 1280) was wrong -- it called
itself "this boundary's dedicated smaller rhythm", but the Captain's
standing rule (2026-09-24 ruling, line ~437) is that EVERY divider in the
document shares one rhythm, and `reference->source-note` is one of the
nine boundaries that rule already names. The FO's own audit
(_Skill/divider-rhythm-check/audit_divider_rhythm.py --selector
.text-section --selector .colophon --selector .reference) shows every
other boundary's gap-above landing on a modal 102.0px at 1280x900 /
56.0px at 420x800 -- this boundary must hit the same number, not a
smaller one of its own.
The two sides of this boundary's line are independent by construction:
gap-above depends only on `#reference`'s own padding-bottom (the box's
margin-top cancels out of that side's arithmetic, since the `::before`'s
`top` offset is exactly `-1 *` the margin-top, so the line always sits
flush with the box's own padding-box regardless of the margin's size);
gap-below depends only on the margin-top (`X`), as `X - 2px` (the 2px is
this box's own 1px border-top plus the line's own 1px border-width).
`#reference`'s padding-bottom is re-tuned above to `clamp(50px, 9vw,
96px)` so gap-above = padding-bottom + 6px (the +6 is fixed: the box's
own 1px border-top, plus the back-cover cover-figure's own 5px visible
border below its `![]()
`, both between `#reference`'s last measured ink
and the line) lands on 56px at 420 and 102px at 1280, matching the
document rhythm exactly. The margin-top below reuses that SAME clamp
expression plus a flat +8px (not +3px) -- chosen so gap-below
(`= margin-top - 2px = padding-bottom + 6px`) equals gap-above at every
width, not just the two clamp endpoints, satisfying the Captain's
"gap above equals gap below" rule by construction rather than by
coincidence. Measured (Playwright, DOM Range/image rects to the actual
last visible ink, reduced motion, 420/768/1280/1920): 56.0/56.0px at
420, 75.1/75.1px at 768, 102.0/102.0px at 1280, 102.0/102.0px at 1920 --
within 1px of the document's own modal gap at all four (768 and 1920
aren't clamp endpoints, so they land whatever the shared curve
produces, same as every other boundary in this file). See
_Handoff/Ghost-slain/Work-Log_Ghost-slain.md, 2026-09-28 entry, for the
full before/after table. */
.source-note {
position: relative;
width: min(100% - 2rem, 52rem);
margin: calc(clamp(50px, 9vw, 96px) + 8px) auto 5rem;
padding: 2.5rem;
background: var(--note-bg);
border: 1px solid var(--rule);
box-shadow: 0 0.8rem 2rem var(--shadow);
box-sizing: border-box;
}
/* The divider line itself, in the margin-top gap just added above --
same technique and magnitude as analects.css:1736-1750. The containing
block for an absolutely positioned child of this `position: relative`
box is its PADDING box, 1px inside the border, so `-1px` each side
brings the line back out to the border's own outer edge (832px wide,
matching the box), the same compensation Analects' own rule uses. */
.source-note::before {
content: "";
position: absolute;
top: calc(-1 * (clamp(50px, 9vw, 96px) + 8px));
left: -1px;
right: -1px;
width: auto;
border-top: 1px solid var(--rule);
}
/* #reference's own last child (the back-cover `.cover-figure`) carries a
general `margin: 1.75rem auto` (28px bottom) that would otherwise stack
underneath #reference's own padding-bottom, inflating the gap above this
new line by that same 28px and breaking the match with the margin-top
just added. Zeroed here, scoped to this one boundary only -- the front
cover's own copy of this margin, mid-section, is untouched. */
#reference > .cover-figure:last-child {
margin-bottom: 0;
}
/* Captain Review 2, 2026-09-12, order (b): "Reference" reads as an
ordinary section header, like the rest of the document, not a boxed
note -- same heading scale the six text sections/plates would use if
they carried a visible