*/
.verse-line {
margin: 0;
}
/* “Chorus:” label italic and slightly separated */
.chorus-label {
margin: 0.55rem 0 0.25rem 0;
font-style: italic;
}
/* Chorus stanza is indented and italic */
.stanza.chorus {
margin-left: 2.2rem;
font-style: italic;
}
/* Optional: last chorus (in your PDF it sits more “set off”) */
.stanza.chorus.final {
margin-left: 3.2rem;
}
/* Signature aligned right with an em dash */
.poem-signature {
margin: 0.8rem 0 0 0;
text-align: right;
font-style: italic;
}
/* Footnote / note at bottom, small & grey */
.poem-note {
margin: 1.2rem 0 0 0;
font-size: 0.85em;
font-style: italic;
color: #666;
}
/* =========================
Verse / Song (Casey)
========================= */
.casey-song{
max-width: 42rem;
margin: 0 auto;
font-family: serif;
line-height: 1.5;
}
.editor-headnote{
text-align: center;
color: #555;
margin-bottom: 1.2rem;
}
.song-header{
text-align: center;
margin-bottom: 1.8rem;
}
.song-author{
font-variant: small-caps;
letter-spacing: .06em;
}
.song-tune{
color: #666;
}
.song-text{
margin: 2rem 0;
}
.verse{
margin-bottom: 1.4rem;
}
.chorus{
font-style: italic;
margin: 1.4rem 0 0 2.2rem;
padding-left: 1.2rem;
/* border-left: 1px solid #999; */
font-style: italic;
}
.song-notes ul{
margin-left: 1.4rem;
}
.song-notes > li{
text-size: 0.85rem;
}
/* =========================================================
Casey manuscript quotation style
========================================================= */
.ms-block.ms-quote {
margin-left: 1.2em;
}
.ms-block.ms-quote > p {
margin: 0;
text-indent: 0;
}
.ms-block ul {
margin: 0;
padding-left: 1.2em;
list-style: none;
}
.ms-block ul li {
margin: 0.15em 0;
}
.ms-block ul li::before {
content: "•";
display: inline-block;
width: 1em;
margin-left: -1em;
color: #900;
}
.ms-block ul ul {
margin: 0;
padding-left: 1em;
list-style: none;
margin-top: 0;
}
.ms-block ul ul li {
margin: 0;
}
.ms-block ul ul li::before {
content: "○";
display: inline-block;
width: 1em;
margin-left: -1em;
}
/* =========================
CASEY — SEAMAN PHILOSOPHER
(archive article wrapper)
========================= */
/* overall reading surface */
.casey-article{
max-width: 33rem; /* whole article width */
margin: 0 auto;
padding: 0 1rem;
font-family: serif;
line-height: 1.45;
}
/* “PDF-ish” page blocks */
.casey-page{
padding: 1.4rem 0 2.2rem 0;
border-bottom: 1px solid #ddd;
margin-bottom: 1.6rem;
}
/* running header */
.casey-running-head{
font-size: 0.92rem;
color: #666;
text-align: center;
margin: 0 0 1.1rem 0;
}
/* big centred title */
.casey-title{
font-size: 1.5 rem;
font-weight: 800;
color: #900;
letter-spacing: 0.03em;
text-align: center;
margin: 0.2rem 0 0.8rem 0;
}
/* centred subtitle/dek with narrower measure */
.casey-deck{
font-size: 0.95rem;
color: #333;
text-align: center;
max-width: 36rem; /* narrower than body */
margin: 0 auto 0.95rem auto;
}
/* rule under dek */
.casey-rule{
border: 0;
border-top: 1px solid #999;
margin: 1.1rem 0 1.25rem 0;
}
/* body typography */
.casey-article p{
margin: 0 0 0.9rem 0;
text-align: justify;
text-justify: inter-word;
hyphens: auto;
-webkit-hyphens: auto;
}
/* section heads like “SOCIALIST PIONEER” */
.casey-section{
font-size: 1.35rem;
font-weight: 800;
color: #900;
letter-spacing: 0.02em;
margin: 1.55rem 0 0.65rem 0;
}
/* quoted verse/jingle blocks (no needed) */
.casey-verse{
margin: 1.0rem auto 1.15rem auto;
max-width: 28rem; /* column-like, like your PDF */
padding-left: 2.2rem; /* indented from left */
}
.casey-verse .label{
font-style: italic;
margin: 0 0 0.4rem 0;
}
.casey-verse .line{
margin: 0;
text-align: left;
hyphens: none;
}
.casey-verse .chorus{
margin-top: 0.6rem;
font-style: italic;
}
.casey-verse .attrib{
margin-top: 0.75rem;
text-align: right;
font-weight: 700;
}
.casey-verse .note{
margin-top: 0.85rem;
font-size: 0.92rem;
color: #555;
text-align: left;
}
/* small page number at foot */
.casey-page-no{
font-size: 0.9rem;
color: #666;
text-align: right;
margin-top: 1.2rem;
}
/* Let Casey exceed the 30rem parent while staying centered */
.page .casey-article{
max-width: 44rem; /* your preferred reading width for this article */
margin-left: 50%;
transform: translateX(-50%);
width: 44rem;
padding: 0 1rem;
}
/* Make it responsive (small screens) */
@media (max-width: 46rem){
.page .casey-article{
width: auto;
max-width: 100%;
margin-left: 0;
transform: none;
}
}
/* =========================================================
Diplomatic manuscript / typescript blocks
========================================================= */
.ms-diplomatic {
font-family: "Courier Prime",
"IBM Plex Mono",
ui-monospace,
SFMono-Regular,
Menlo,
Consolas,
monospace;
font-size: 0.75rem;
line-height: 1.45;
letter-spacing: 0.01em;
font-weight: 400;
color: #444;
white-space: pre; /* preserve exact spacing */
overflow-x: auto; /* prevent layout breakage */
margin: 0;
margin-left: 1em;
margin-bottom: var(--vr, 0.5em);
padding: 0; /* no code-block padding */
background: transparent; /* no grey box */
border: none; /* no box styling */
-webkit-text-size-adjust: 100%;
}
.ms-u {
text-decoration: underline;
}
/*
.ts-note {
outline: 1px solid red !important;
}
*/
/* ==============================
Manuscript paragraph system
============================== */
:root {
--vr: 0.65em; /* vertical rhythm unit */
--margin-note-gutter: 6.75rem;
}
/* Block wrapper controls spacing */
.ms-block {
margin: 0 0 var(--vr) 0;
position: relative;
overflow: visible;
padding-top: 1.8rem; /* breathing space */
}
.ms-block::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: rgba(0,0,0,0.08); /* very subtle */
}
.edition-layer {
position: absolute;
inset: 0;
transition: opacity 200ms ease;
}
.edition-layer.hidden {
opacity: 0;
pointer-events: none;
}
.edition-layer.visible {
opacity: 1;
}
/* Paragraph inside block has NO margins */
.ms-block > p {
margin: 0;
text-indent: 1.6em; /* optional first-line indent */
line-height: 1.45;
}
/* First paragraph after heading should not indent */
h2 + .ms-block > p,
h3 + .ms-block > p {
text-indent: 0;
}
/* Casey manuscript style */
.casey .ms-block > p {
text-indent: 0;
}
/* If paragraph carries sidenote anchor */
.ms-at {
position: relative;
}
/* PAGE BAND -- Refined Sticky Version (Book-Like) */
.page-band {
position: sticky;
top: 0;
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 0.78rem;
color: #666;
background: #fff;
padding: 0.5rem 0;
margin-bottom: 1rem;
opacity: 1; /* container always stable */
}
page-number {
font-weight: 600;
color: #444; /* steady */
}
.page-right {
opacity: 0.2;
transition: opacity 200ms ease;
}
/* Only brighten when hovering the page-band band right */
.page-right:hover {
opacity: 0.85;
}
/* =========================================================
Award tables
========================================================= */
table.award-table{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
margin: 0.6em 0 1em 0;
font-size: 0.98em;
}
table.award-table th,
table.award-table td{
text-align: left;
vertical-align: top;
padding: 0.35em 0.5em;
border-bottom: 1px dotted #ccc;
overflow-wrap: break-word;
word-break: normal;
hyphens: none;
}
table.award-table thead th{
border-bottom: 1px solid #999;
font-weight: bold;
}
table.award-table col.col-topic { width: 18%; }
table.award-table col.col-clause { width: 15%; }
table.award-table col.col-text { width: auto; }
td.money, td.clause{ white-space: nowrap; }
td.money, th.money{ text-align: right; }
table.award-table td.clause{ text-align: center; }
p.nb{ margin: 0.2em 0 1em 0; }
/* =========================================================
Voting tables
========================================================= */
table.vote-table{
border-collapse: separate; /* IMPORTANT for column spacing */
border-spacing: 0; /* we’ll control spacing via padding */
margin: 0.9em auto 1.1em auto; /* centers the whole table */
width: max-content; /* shrink-wrap to content where supported */
max-width: 100%; /* don’t overflow small screens */
letter-spacing: 0.01em; /* slightly tighten tracking */
font-variant-numeric: tabular-nums;
}
/* fallback if max-content isn’t supported: */
@supports not (width: max-content){
table.vote-table{ width: auto; }
}
table.vote-table td{
padding: 0.06em 0; /* tight vertical rhythm */
vertical-align: top;
white-space: nowrap; /* keeps alignment like typescript */
}
/* Column roles */
table.vote-table td.vote{
padding-right: 1.5em; /* gap between “Sixteen votes to” and col 1 */
}
table.vote-table td.c1{
padding-right: 2.8em; /* THIS is the intercolumn separator “gutter” */
}
table.vote-table td.c2{
padding-right: 0; /* last column */
}
/* Group spacing row */
table.vote-table tr.gap td{
padding: 0em 0 0 0;
}
/* =========================================================
Horizontal rules
========================================================= */
hr{
border: 0;
border-top: 1px solid #999;
margin: 1.6em 0;
}
hr.page{
border: 0;
border-top: 1px solid #999;
margin: 2.5em 0;
}
@media print{
hr.page{
border: 0;
margin: 0;
page-break-before: always;
break-before: page;
}
}
/* =========================================================
Figures
========================================================= */
figure{
margin: 1.4em 0;
padding: 0;
}
figure img{
display: block;
max-width: 92%;
border: 1px solid #ccc;
height: auto;
margin: 0.4em auto 0.6em auto;
}
figcaption {
text-align: left;
font-size: 0.95em;
line-height: 1.35;
margin: 0;
}
figure figcaption p {
margin: 0.35em 0;
}
figure figcaption p:first-of-type {
text-align: center;
text-align-last: center;
font-weight: bold;
color: #900;
}
/* =========================================
Verse
=====
Why this matters:
• = stanza (structural unit)
•
= line break (metrical unit)
• DOM structure matches literary structure
First line of the poem
Second line of the poem
Third line of the poem
New stanza begins here
And continues
========================================= */
.verse {
margin: 1.2em 0;
}
.verse p {
margin: 0 0 0.9em 0;
text-align: left;
text-align-last: left;
line-height: 1.4;
white-space: normal;
}
.verse p:last-child {
margin-bottom: 0;
}
/* Prevent justification inheritance */
.verse,
.verse p {
text-align: left;
}
/* Optional: slight indent for verse block */
.verse {
margin-left: 1.5em;
}
/* =========================================================
Navigation
========================================================= */
.inst-nav{
margin: 18px 0 10px;
padding: 2px 4px;
border: 1px solid #ddd;
border-radius: 10px;
background: #fafafa;
display: flex;
gap: 10px;
justify-content: space-between;
align-items: center;
font-size: 0.95em;
}
.inst-nav a{
text-decoration: none;
padding: 6px 10px;
border-radius: 8px;
color: #333;
}
.inst-nav a:hover{
background: #f0f0f0;
text-decoration: underline;
}
.inst-nav a.toc{ margin: 0 auto; }
/* =========================================================
Page-break marker (visual)
========================================================= */
.page-break{
margin: 1.8em 0;
text-align: center;
position: relative;
}
.page-break Make the whole site wide{
content:"";
position:absolute;
left:0; right:0;
top:50%;
border-top: 1px solid #999;
transform: translateY(-50%);
}
.page-break span{
position: relative;
padding: 0 0.9em;
background: #fff;
color: #666;
font-size: 0.9em;
letter-spacing: 0.02em;
}
/* =========================================================
Utility
========================================================= */
.handwritten{ color: #191970; }
.no-break{
hyphens: none;
-webkit-hyphens: none;
-ms-hyphens: none;
overflow-wrap: normal;
word-break: normal;
white-space: nowrap;
}
/* =================================================
Dialogue blocks (Q/A + Speaker) — hanging indent
================================================= */
.qa-block,
.ab-block{
margin: 0.4em 0;
}
.dlg-gap{ height: 0.6em; }
.qa-block .dlg,
.ab-block .dlg{
margin: 0;
text-indent: 0;
display: grid;
grid-template-columns: var(--label-w) 1fr;
column-gap: 0.6em;
align-items: start;
hyphens: none;
-webkit-hyphens: none;
overflow-wrap: normal;
word-break: normal;
white-space: normal;
}
.qa-block .lbl,
.ab-block .lbl{
/* font-weight: bold; */
color: #900;
white-space: nowrap;
}
.qa-block .txt,
.ab-block .txt{
min-width: 0;
}
.qa-block{ --label-w: 1.0em; }
.ab-block{ --label-w: 4.5em; }
.ab-block .lbl{
justify-self: end;
text-align: right;
}
/* each speech row is your grid */
.ab-block .dlg{
margin: 0; /* no surprise gaps */
text-indent: 0;
display: grid;
grid-template-columns: var(--label-w) 1fr;
column-gap: 0.6em;
align-items: start;
}
/* small separation between Registrar and W.J.C within the same snippet */
.ab-block .dlg + .dlg{
margin-top: 0.25em;
}
/* div with paragraphs, keep the label grid happy */
.ab-block .txt{ min-width: 0; }
/* paragraphing INSIDE a single speaker's text */
.ab-block .txt p{
margin: 0;
}
.ab-block .txt p + p{
text-indent: 0;
margin-top: 0.35em; /* paragraph spacing within ONE speech */
}
/* keep each dialog snippet visually separate */
.ab-block{
margin: 0.55em 0; /* separation between snippets */
}
/* =========================================
Typescript margin note system
========================================= */
/* Anchor container */
.ts-at {
position: relative;
}
p.ts-at {
margin-top: 0;
text-indent: 0;
}
/* spacing after headings */
h2 + p.ts-at,
h3 + p.ts-at {
margin-top: 0.75em;
}
/* =========================
Narrow (mobile-first)
========================= */
.ts-note {
display: block;
margin: 0.4em 0 0.6em 0;
font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 0.75rem;
line-height: 1.2;
font-weight: 400;
color: #666;
white-space: nowrap;
text-decoration: none;
}
.ts-note:hover {
text-decoration: underline;
}
.section-title .ts-note {
font-weight: 400;
}
/* =========================
Wide screen override
========================= */
@media (min-width: 1024px) {
.ts-note {
position: absolute;
top: 0;
right: calc(-1 * var(--margin-note-gutter));
display: inline-block;
margin: 0;
padding: 0;
text-indent: 0;
}
}
/* =========================================================
PAGE BAND
========================================================= */
.page-band {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 0.78rem; /* slightly smaller */
color: #666;
margin-bottom: 1rem;
}
.page-number {
font-weight: 600;
color: #333;
}
.page-right {
display: flex;
gap: 0.5rem;
align-items: baseline;
}
.band-sep {
color: #aaa;
}
.mode-link {
background: none;
border: none;
padding: 0;
font: inherit;
color: inherit;
cursor: pointer;
color: #777;
}
.mode-link:hover {
text-decoration: underline;
color: #000;
}
.mode-current {
color: #444;
font-weight: normal; /* no bold */
cursor: default;
}
.page-band a {
text-decoration: none;
color: inherit;
}
.page-band a:hover {
text-decoration: underline;
}
/* =========================================================
Footnote popups (SPAN version) + single-open JS hook
========================================================= */
span.fn-pop{
display: inline;
position: relative;
margin: 0;
padding: 0;
vertical-align: baseline;
white-space: nowrap;
}
span.fn-pop > a.fnref{
display: inline;
margin: 0;
padding: 0;
text-decoration: none;
cursor: pointer;
}
span.fn-pop > a.fnref:hover{ text-decoration: underline; }
span.fn-pop > .fn-popover{
display: none;
position: absolute;
z-index: 999;
left: 0;
top: 1.4em;
width: min(32em, 86vw);
max-height: 60vh;
overflow: auto;
background: #fff;
border: 1px solid #bbb;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0,0,0,0.18);
padding: 0.75em 0.9em;
font-size: var(--fn-pop-size, 0.95rem);
line-height: 1.45;
color: #222;
font-weight: normal;
text-indent: 0;
text-align: left;
hyphens: none;
-webkit-hyphens: none;
overflow-wrap: normal;
word-break: normal;
white-space: normal;
}
span.fn-pop.is-open > .fn-popover{ display: block; }
.doc-title span.fn-pop > .fn-popover{
font-size: var(--fn-pop-size, 0.95rem);
line-height: 1.45;
color: #222;
font-weight: normal;
}
span.fn-pop > .fn-popover::before{
content:"";
position: absolute;
top: -8px;
left: 10px;
width: 14px;
height: 14px;
background: #fff;
border-left: 1px solid #bbb;
border-top: 1px solid #bbb;
transform: rotate(45deg);
}
span.fn-pop .fn-close{
float: right;
border: 0;
background: transparent;
font-size: 1.1em;
line-height: 1;
cursor: pointer;
padding: 0.1em 0.2em;
color: #444;
}
span.fn-pop .fn-close:hover{ color:#000; }
span.fn-pop > .fn-popover p{
margin: 0.35em 0;
text-indent: 0;
}
span.fn-pop > .fn-popover p:first-child{ margin-top: 0; }
span.fn-pop > .fn-popover .note-text{
font-size: 0.8em;
line-height: 1.3;
}
span.fn-pop > .fn-popover .note-text a{
overflow-wrap: anywhere;
word-break: break-word;
}
span.fn-pop > .fn-popover .note-text ul,
span.fn-pop > .fn-popover .note-text ol{
margin: 0.4em 0 0.4em 1.4em;
padding: 0;
}
@media (min-width: 900px){
span.fn-pop > .fn-popover{
width: min(42em, 86vw);
}
}
span.fn-pop > .fn-popover img{
max-width: 100%;
height: auto;
display: block;
margin: 0.6em auto;
}
span.fn-pop .fn-close{
border-radius: 8px;
}
span.fn-pop .fn-close:hover{
background: rgba(0,0,0,0.06);
}
span.fn-pop .fn-popover .fn-close{
color: #900 !important; /* close “×” colour */
font-size: 1.4rem !important; /* close “×” size */
line-height: 1;
padding: 0.2em 0.35em; /* bigger tap target */
position: relative;
top: -1rem; /* raise it; tweak -1px to -4px to taste */
}
/* =========================
Appendix grid
========================= */
.lightbox-appendix {
max-width: none;
margin-top: 2em;
}
.lightbox-appendix h2 { margin-bottom: 0.6em; }
.appendix-note {
font-size: 0.9em;
color: #555;
margin-bottom: 1em;
}
.lb-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 1em;
}
.lb-item {
margin: 0;
text-align: center;
}
.lb-item img {
max-width: 100%;
height: auto;
border: 1px solid #bbb;
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.lb-item figcaption {
font-size: 0.8em;
margin-top: 0.4em;
}
.lb-link {
background: none;
border: 0;
padding: 0;
margin: 0;
display: block;
cursor: pointer;
}
.lb-link img {
display: block;
}
/* =========================
Lightbox overlay (Single System)
========================= */
.lb-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.85);
z-index: 9999;
align-items: center;
justify-content: center;
pointer-events: auto;
}
.lb-overlay.active {
display: flex;
}
.lb-inner {
position: relative;
max-width: 92vw;
max-height: 92vh;
pointer-events: auto;
}
.lb-img {
display: block;
max-width: 90vw;
max-height: 90vh;
width: auto;
height: auto;
margin: 0 auto;
background: #fff;
}
.lb-caption {
color: #eee;
font-size: 0.9em;
margin-top: 0.6em;
text-align: center;
}
.lb-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.6);
color: #fff;
border: none;
font-size: 2rem;
padding: 0.2em 0.4em;
cursor: pointer;
}
.lb-prev { left: -2.2rem; }
.lb-next { right: -2.2rem; }
.lb-nav:hover {
background: rgba(0,0,0,0.8);
}
.lb-prev[disabled],
.lb-next[disabled] {
opacity: 0.35;
pointer-events: none;
cursor: default;
}
.lb-close {
position: absolute;
right: -0.5rem;
top: -0.5rem;
border: 0;
background: #fff;
color: #000;
font-size: 1.4rem;
line-height: 1;
border-radius: 999px;
width: 2rem;
height: 2rem;
cursor: pointer;
}