. 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;
}
.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 ---------------------------------------------------------------- */
.site-footer {
padding: 2rem 1.5rem;
border-top: 1px solid var(--rule);
color: var(--ink-light);
background: var(--parchment-mid);
text-align: center;
font-family: var(--display);
font-size: 0.75rem;
line-height: 1.6;
}
.site-footer a {
color: var(--rust);
}
/* =====================================================================
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 3rem;
padding: 3.5rem 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;
}
/* 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;
}
.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;
}
}
|