. The scroll container is what keeps a wide
table from forcing the whole page to scroll sideways on a narrow screen. */
.source-table {
margin: 1.6rem 0;
}
.source-table figcaption {
margin-bottom: 0.45rem;
color: var(--ink-light);
font-family: var(--display);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table.source-table {
width: 100%;
border-collapse: collapse;
font-size: 0.86rem;
line-height: 1.45;
text-align: left;
}
.source-table caption {
padding-bottom: 0.4rem;
font-size: 1.1rem;
font-weight: bold;
text-align: left;
}
.source-table th,
.source-table td {
padding: 0.42rem 0.7rem;
border-bottom: 1px solid var(--rule);
vertical-align: top;
text-indent: 0;
}
.source-table thead th {
border-bottom: 2px solid var(--note-border);
color: var(--rust);
font-family: var(--display);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
white-space: nowrap;
}
.source-table tbody tr:last-child th,
.source-table tbody tr:last-child td {
border-bottom: 0;
}
.source-table tbody tr:nth-child(even) {
background: var(--parchment-mid);
}
/* Row-header tables -- first cell of each row identifies the row. Our
chronology table's date column is exactly this: the year identifies
the row, so it is marked up as | rather than | . The
nowrap keeps a two-part date ("509 or 508", "478 to 476") on one
line instead of wrapping merely because the column is narrow. */
.source-table tbody th[scope="row"] {
color: var(--ink);
font-weight: 600;
white-space: nowrap;
}
/* The chronology event cells carry the Basic HTML two-space sentence
rule. Like every prose context in this sheet they need
white-space: pre-wrap for the literal double spaces to render -- a
| defaults to `normal`, which collapses them silently.
overflow-wrap: break-word is paired with it as elsewhere, so a long
token cannot overflow a narrow cell. */
.source-table td {
white-space: pre-wrap;
overflow-wrap: break-word;
}
@media (max-width: 720px) {
.source-table table {
font-size: 0.8rem;
}
.source-table th,
.source-table td {
padding: 0.34rem 0.5rem;
}
}
/* ---- Note boxes (house treatment) ---------------------------------------- */
.note-box {
margin: 1.5rem 0 1.5rem 1.6rem;
padding: 0.7rem 0.9rem;
background: var(--note-bg);
border-left: 3px solid var(--note-border);
color: var(--ink-mid);
font-size: 0.85rem;
line-height: 1.58;
text-align: left;
}
/* The two-space sentence rule (Basic HTML) depends on white-space:
pre-wrap to render its literal double spaces; the house .note-box
rule would otherwise reset text to white-space: normal and silently
collapse them back to one. */
.note-box p.content-note {
margin: 0;
text-align: left;
text-indent: 0;
white-space: pre-wrap;
overflow-wrap: break-word;
}
/* Quotation passages (Captain-ordered): visually kin to note boxes --
same background, border, padding, font -- but a structurally separate
class, so the notes toggle (which only ever queries .note-box) can
never hide one. */
.quotation {
margin: 1.5rem 0 1.5rem 1.6rem;
padding: 0.7rem 0.9rem;
background: var(--note-bg);
border-left: 3px solid var(--note-border);
color: var(--ink-mid);
font-size: 0.85rem;
line-height: 1.58;
text-align: left;
}
.quotation p.quotation-text {
margin: 0 0 0.45rem;
text-align: left;
text-indent: 0;
white-space: pre-wrap;
overflow-wrap: break-word;
}
.quotation p.quotation-text:last-child {
margin-bottom: 0;
}
/* ---- Colophon / source note ------------------------------------------------ */
.source-note {
margin: 3rem auto 0;
max-width: 42rem;
padding: 1.5rem 1.25rem;
border-top: 1px solid var(--rule);
font-size: 0.9rem;
}
/* Captain order 2026-09-28: "update all the 'About this archival edition'
sections to look like Analects (color, text box, spacing, etc.)"; then
"...no section line / space divider as requested for all sections.
Again, reference Analects for correct example." #end-note (the "About
the Arsinoe Library Edition" box; heading and text ruled unchanged --
style only) takes Analects' aside#source-note card (analects.css
~1717-1755): note-bg fill, 1px --rule border, 0 0.8rem 2rem shadow,
2.5rem padding (1.5rem at <=720px), body-size text with no indent, the
heading 1.35rem / 1.2 / 3px top padding / 1.5rem below, the last
paragraph's bottom margin 0 so the inner bottom gap equals the padding.
Width is Analects' min(100% - 2rem, 52rem) of : wider than this
build's reading column by (its padding - 1rem) a side, hence the
negative side margins (main clips overflow-x). The divider is the
box's own `::before`, outside the box, drawn in its margin-top gap the
full width of the box (left/right -1px = the border's outer edge), with
equal space above and below: the gap is this build's own main-section
divider gap, 3.5rem + 1.38em (79.4 / 80.2 / 81.9 / 83.4px at 420 / 768
/ 1280 / 1920; the other dividers measure 79.1 / 79.8 / 82.3 / 83.7);
+2px = the box border and the line's own 1px, which the pseudo's
containing block (the padding box) leaves out. margin-bottom -1rem
brings the box-to-footer distance to Analects' 5rem (this shell's
padding-bottom is 6rem). Scoped to #end-note on purpose: the front
colophon (aside#source-note) shares .source-note and is unchanged.
Supersedes the 2026-09-24 `#end-note { border-top: none }` (that line
removed a doubled rule; the chap21 line is now this ::before). */
#end-note {
--end-note-gap: calc(3.5rem + 1.38em + 2px);
position: relative;
max-width: none;
margin: var(--end-note-gap) calc(-1 * max(0px, min(1rem, (100vw - 52rem) / 2))) -1rem;
padding: 2.5rem;
background: var(--note-bg);
border: 1px solid var(--rule);
box-shadow: 0 0.8rem 2rem var(--shadow);
font-size: inherit;
}
#end-note::before {
content: "";
position: absolute;
top: calc(-1 * var(--end-note-gap));
left: -1px;
right: -1px;
border-top: 1px solid var(--rule);
}
#end-note > h2 {
margin: 0 0 1.5rem;
padding-top: 3px;
font-size: 1.35rem;
line-height: 1.2;
}
#end-note > p {
margin: 1em 0;
text-indent: 0;
}
#end-note > p:last-child {
margin-bottom: 0;
}
@media (min-width: 901px) {
/* the reading shell's own side padding is 2.625rem here (1rem below) */
#end-note {
margin-inline: -1.625rem;
}
}
@media (max-width: 720px) {
#end-note {
padding: 1.5rem;
}
}
.source-note h2 {
text-align: left;
font-size: 1.1rem;
}
.source-note dl {
display: grid;
grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
column-gap: 1em;
row-gap: 0.4em;
}
.source-note dt {
font-weight: bold;
}
.source-note dd {
margin: 0;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
/* ---- Footer ---------------------------------------------------------------- */
/* Footer: the Analects presentation (Captain order 2026-09-28) -- the dark
"furniture" bar in both themes, gold top rule, 0.86rem, body typeface. */
.site-footer {
padding: 2.5rem 1rem;
color: var(--footer-text);
background: var(--footer-bg);
border-top: 3px solid var(--gold);
font-size: 0.86rem;
text-align: center;
}
.site-footer p {
margin: 0.2rem;
}
.site-footer a {
color: var(--toggle-hover-color);
}
/* =====================================================================
Part 2 verse indentation ladder -- this edition's own mechanism
(Basic HTML, PIPE 1/2), re-themed into this palette/type scale only.
Rules kept mutually exclusive (not "baseline plus override") because
a :not()-heavy baseline selector can outrank the plain .verse-label /
.sub-line rules meant to override it -- see build_basic_html.py.
===================================================================== */
.verse-chapter p:not(.verse-label):not(.sub-line):not(.poem):not(.center):not(.noindent):not(.signature),
.verse-chapter .content-note {
text-indent: 0;
padding-left: var(--indent-unit);
}
.verse-chapter p.verse-label {
text-indent: calc(-1 * var(--indent-unit));
padding-left: var(--indent-unit);
}
.verse-chapter p.sub-line {
text-indent: 0;
padding-left: calc(2 * var(--indent-unit));
}
p {
margin-top: 0.5em;
margin-bottom: 0.5em;
text-indent: 1.5em;
}
p:not(.center):not(.poem):not(.noindent):not(.signature):not(.content-note) {
white-space: pre-wrap;
overflow-wrap: break-word;
word-wrap: break-word;
}
p.center, p.poem, p.noindent, p.signature {
text-indent: 0;
white-space: normal;
}
p.poem {
margin-left: 10%;
}
p.signature {
text-align: right;
font-style: italic;
}
div.chapter.editorial h3 {
font-size: 1.1em;
font-weight: bold;
text-align: left;
}
h1.part {
font-size: 1.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-block: 2rem 0;
padding: calc(79.530px + 0.3761vw) 1rem calc(78.530px + 0.3761vw) 1rem;
border-top: 1px solid var(--gold);
border-bottom: 1px solid var(--gold);
color: var(--rust);
}
/* Every .chapter div in this build -- Part 1's front-matter sections,
the six Introduction sections, the section holding the Bibliography
and Footnotes, the two editorial sections, and Part 2's thirteen
chapters alike -- gets this rhythm: 3.5rem of breathing room above
and below (matching consecutive .chapter/.document-section in the
prototypes) plus a dividing rule after it. Deliberately uniform
rather than scoped to Part 2 only: every one of these IS a document
section, and a reader should feel the same separation between all of
them. The two editorial sections (div.chapter.editorial) get this
too -- checked after the change: they read exactly like the other
sections, just with more air, which is the point. --source-rail is
0 for this build (see :root), so the right-hand padding component
is inert -- no gutter. */
div.chapter {
padding: 3.5rem var(--source-rail) 3.5rem 0;
border-bottom: 1px solid var(--rule);
}
/* A Part divider (h1.part, inside div.part-division) already draws its
own top and bottom rule. Where a .chapter's border-bottom would sit
immediately above one, it doubles the divider's own top rule --
two parallel hairlines framing an empty band, not a design. Suppress
it declaratively (by relationship, not by naming the two sections
that happen to precede a divider today) so a future third Part never
reintroduces the defect. */
div.chapter:has(+ .part-division) {
border-bottom: none;
}
/* Divider Apply 2026-09-24 -- Captain's spacing-line-spacing ruling: the
gap above a main-section/large-chapter rule must equal the gap below it
(heading TEXT top, not box top), within 1px, at 1280px and 420px alike.
div.chapter carries no per-chapter id of its own (the id sits on the
inside its ), so these are matched by :has() rather than by id,
the same relational technique div.chapter:has(+ .part-division) already
uses above. Two independent causes needed two independent corrections:
(1) a chapter's own trailing content sets its "gap above" baseline
before any of this -- a plain paragraph's 0.5em margin measures to a
different glyph-bottom than a boxed aside.note-box's 1.5rem margin, so
the eight paragraph-ending chapters and the eight note-box-ending
chapters below need different padding-bottom top-ups; (2) the target
itself (a standard chapter's padding-top plus its h2's own metrics)
grows a few px between 420 and 1280 because the body font uses a vw
term, so every top-up carries a small vw term of its own to track it
at both measured widths rather than just one. #pref02 and #chap06 (the
two small chapters) and their neighbours are deliberately absent below
-- their lines and spacing stay exactly as delivered. */
div.chapter:has(#chap01),
div.chapter:has(#chap02),
div.chapter:has(#chap09),
div.chapter:has(#chap10),
div.chapter:has(#chap12),
div.chapter:has(#chap15),
div.chapter:has(#chap16),
div.chapter:has(#chap20) {
padding-bottom: calc(66.646px + 0.2889vw);
}
div.chapter:has(#chap04),
div.chapter:has(#chap07),
div.chapter:has(#chap11),
div.chapter:has(#chap13),
div.chapter:has(#chap14),
div.chapter:has(#chap17),
div.chapter:has(#chap18),
div.chapter:has(#chap19) {
padding-bottom: calc(53.530px + 0.3761vw);
}
div.chapter:has(#chap08) {
padding-bottom: calc(34.646px + 0.2889vw);
}
/* Captain order 2026-09-28 (About box styled like Analects): the
chap21->end-note line is no longer #chap21's own border-bottom -- it is
the box's `#end-note::before` (see the #end-note block, above), the full
width of the box, as in Analects. So this chapter drops its border and
its padding-bottom is re-set so the ink above that line equals the
gap below it (this build's main-section divider gap, 3.5rem + 1.38em):
padding + the "THE END" line's own 0.5em margin and leading residual
(~0.5em + 2.6px) + the 1px the line sits below this chapter's edge. */
div.chapter:has(#chap21) {
padding-bottom: calc(3.5rem + 0.88em - 3.6px);
border-bottom: none;
}
/* The title/colophon/dedication/Table-of-Contents wrapper (its last
visible content is a boxed Contents-page link, not running text). */
.chapter.front-matter {
padding-bottom: calc(33.530px + 0.3761vw);
}
/* Maps the prototypes' .chapter-header (a wrapper we do not have)
2rem margin-bottom onto the heading itself. */
div.chapter > h2 {
margin-bottom: 2rem;
}
.part-title {
display: block;
font-size: 0.6em;
letter-spacing: 0.02em;
text-transform: none;
margin-top: 0.4rem;
color: var(--ink-light);
}
a.part-link {
font-weight: bold;
letter-spacing: 0.03em;
text-transform: uppercase;
}
/* ---- Print -------------------------------------------------------------- */
@media print {
@page {
size: letter;
margin: 0.65in 0.7in;
}
body {
color: #000;
background: #fff;
font-size: 11pt;
}
.site-header,
.section-bar,
.skip-link,
.contents-backdrop,
.contents-toggle,
.contents-close,
.display-controls,
.top-link {
display: none !important;
}
main {
margin-left: 0 !important;
}
.contents-panel {
position: static;
width: 100%;
padding: 0.35in 0;
overflow: visible;
border-right: 0;
box-shadow: none;
transform: none;
visibility: visible;
inset: auto;
}
.contents-panel {
break-after: page;
}
.source-note {
background: none;
border: 0;
box-shadow: none;
}
/* #end-note's id-level screen rules outrank the class rule just above. */
#end-note {
margin-inline: 0;
background: none;
border: 0;
box-shadow: none;
}
.site-footer {
margin-top: 0.3in;
padding-top: 0.15in;
border-top: 1px solid #999;
background: none;
text-align: center;
}
.site-footer a[href="#top"] {
display: none !important;
}
h2, h3, h4 {
break-after: avoid;
}
.note-box, table, tr {
break-inside: avoid;
}
a {
color: #000;
text-decoration: none;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Captain order, 2026-09-28 ("All builds should match": the title-page
`Arsinoe Library Edition, 2026` stamp follows Analects in gap above and
colour). The stamp's 1rem margin-top collapsed with the 0.5em
margin-bottom of the "1910" p.center above it (both are block siblings)
and left 17.78 / 17.67 / 17.63 / 17.34px 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()`, as
div.chapter:has(#chap..) above already does) and margin-top set to
Analects' 0.35rem (analects.css:415): 7.38 / 7.27 / 7.22 / 6.94px, equal
to Analects at every width. Colour was already var(--ink-light). Nothing
below the stamp changes spacing, so the stamp -> source-note line gap
stays 47.81px above / 40.59px below at every width (measured before and
after). */
p.center:has(+ .library-edition) {
margin-bottom: 0;
}
.library-edition {
margin: 0.35rem 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-align: center;
text-indent: 0;
text-transform: uppercase;
}
/* Footer lines are centred; cancel the body paragraph indent so the text sits on the centre line. */
.site-footer p {
text-indent: 0;
}
|