*, *::before, *::after { box-sizing: border-box; }
html, body, .root { height: 100%; }
body { margin: 0; }
/* Light default = the "Bone" paper (what the React app rendered by default via
inline vars). Accent (Gold) and scripture (Prata) are fixed — the old tweaks
panel is retired. Dark = "Night", applied by setting data-theme="dark" on
(the inline theme-init in index.html does this before first paint). */
:root {
--paper: #faf8f3; --paper-2: #f1ede3; --ink: #1c1813; --ink-soft: #736b5c;
--struck: #b3a892; --line: #e6ddcb; --accent: #b08d4f; --accent-deep: #8a6c33;
--grain: 0.035; --scripture: 'Prata', serif;
--ui: 'Hanken Grotesk', system-ui, sans-serif;
--mono: 'Spline Sans Mono', ui-monospace, monospace;
}
:root[data-theme="dark"] {
--paper: #161310; --paper-2: #1f1b16; --ink: #f1e9d8; --ink-soft: #a89e8a;
--struck: #6a6253; --line: #2e2820; --grain: 0.06;
}
body {
background: var(--paper); color: var(--ink); font-family: var(--ui);
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.root {
height: 100%; display: flex; flex-direction: column;
background: radial-gradient(120% 80% at 50% -10%, color-mix(in oklab, var(--paper) 88%, white) 0%, var(--paper) 55%), var(--paper);
position: relative;
}
.root::before {
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: var(--grain);
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
}
.root > * { position: relative; z-index: 1; }
/* ---------------- masthead ---------------- */
.masthead {
position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
padding: 22px clamp(20px, 5vw, 64px); border-bottom: 1px solid var(--line);
}
.brand { appearance: none; background: transparent; border: none; cursor: pointer; text-align: center; padding: 0; }
.brand-mark { display: block; margin: 0 auto; width: 68px; height: 68px; object-fit: contain; }
/* single cycling theme button — a circle in the masthead's right corner */
.theme-cycle {
appearance: none; cursor: pointer; position: absolute; right: clamp(20px, 5vw, 64px);
top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
display: inline-flex; align-items: center; justify-content: center;
transition: color .2s, border-color .2s, background .2s;
}
.theme-cycle:hover { color: var(--ink); border-color: var(--accent); }
/* the chant button — the theme circle's mirror, holding the left corner.
Its edge IS the progress ring: hairline at rest, gold sweeping as it sings. */
.audio-cycle {
appearance: none; cursor: pointer; position: absolute; left: clamp(20px, 5vw, 64px);
top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
border: none; background: transparent; color: var(--ink-soft);
display: inline-flex; align-items: center; justify-content: center;
transition: color .2s;
}
.audio-cycle::before {
content: ""; position: absolute; inset: 0; border-radius: 50%;
background: var(--line);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
}
.audio-cycle::after {
content: ""; position: absolute; inset: 0; border-radius: 50%;
background: conic-gradient(var(--accent-deep) calc(var(--p, 0) * 1turn), transparent 0);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
transition: opacity 1.4s ease;
}
.audio-cycle.ring-done::after { opacity: 0; }
.audio-cycle:hover { color: var(--ink); }
.audio-cycle:hover::before { background: var(--accent); }
.audio-cycle.playing { color: var(--accent-deep); }
.ic { display: block; }
/* ---------------- body grid (shared) ---------------- */
.body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 300px 1fr; }
.book-group-label, .bs-cap, .cbh-kicker { font-family: var(--mono); }
.book-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ref-mark { width: 26px; height: 1px; background: var(--accent); display: inline-block; flex: 0 0 auto; }
.verse, .br-name, .cbh-title, .bs-num {
font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
font-feature-settings: "liga" 1, "clig" 1, "dlig" 1, "calt" 1;
}
.verse { font-family: var(--scripture); font-weight: 400; font-size: clamp(30px, 5vw, 56px); line-height: 1.3; letter-spacing: normal; margin: 0; color: var(--ink); text-wrap: pretty; white-space: normal; }
.verse.compact { font-size: clamp(21px, 2.6vw, 30px); line-height: 1.42; }
/* set in light: the renewed text stands plain and unmarked. The verse
sizes itself to its length — great passages sit as pages, not walls. */
.verse.size-m { font-size: clamp(26px, 4vw, 44px); }
.verse.size-l { font-size: clamp(22px, 3.2vw, 36px); line-height: 1.4; }
.verse.size-xl { font-size: clamp(17px, 2.3vw, 27px); line-height: 1.5; }
/* ---------------- canon (page 2) ---------------- */
.books { border-right: 1px solid var(--line); overflow-y: auto; padding: 24px 0 40px; }
.books-summary { padding: 0 24px 22px; margin: 0 0 6px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; }
.bs-num { font-family: var(--scripture); font-size: 44px; line-height: 0.9; color: var(--accent-deep); }
.bs-cap { font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.5; }
.book-group { padding: 18px 0 4px; }
.book-group-label { font-size: 10px; letter-spacing: 0.3em; color: var(--accent-deep); padding: 0 24px; margin-bottom: 8px; }
.book-row { width: 100%; appearance: none; background: transparent; border: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 24px; font-family: var(--ui); font-size: 14.5px; text-align: left; white-space: nowrap; transition: background .15s, color .15s; }
.book-row.empty { color: color-mix(in oklab, var(--ink-soft) 55%, transparent); cursor: default; }
.book-row.has { color: var(--ink); }
.book-row.has:hover { background: color-mix(in oklab, var(--paper-2) 60%, transparent); }
.book-row.on { background: color-mix(in oklab, var(--paper-2) 90%, transparent); color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }
.br-name { font-family: var(--scripture); font-size: 17px; }
.book-row.empty .br-name { font-size: 14px; font-family: var(--ui); }
.br-count { font-family: var(--mono); font-size: 10.5px; color: var(--accent-deep); border: 1px solid var(--line); border-radius: 10px; padding: 1px 7px; }
.canon-main { overflow-y: auto; padding: clamp(30px, 5vh, 56px) clamp(24px, 6vw, 88px); }
.canon-book-head { max-width: 760px; margin: 0 auto 36px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.cbh-kicker { font-size: 11px; letter-spacing: 0.3em; color: var(--accent-deep); margin-bottom: 10px; }
.cbh-title { font-family: var(--scripture); font-weight: 400; font-size: clamp(40px, 6vw, 68px); line-height: 1; margin: 0 0 14px; color: var(--ink); }
.cbh-meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--ink-soft); }
.canon-folios { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: flex; flex-direction: column; gap: 44px; }
.cfolio { }
.cf-ref { display: flex; align-items: flex-start; gap: 12px; font-family: var(--mono); font-size: 11.5px; line-height: 1.7; letter-spacing: 0.2em; color: var(--accent-deep); text-transform: uppercase; margin-bottom: 16px; }
.cf-ref .ref-mark { margin-top: 0.75em; }
.cf-source { margin-left: auto; font-size: 9.5px; letter-spacing: 0.18em; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--line); color: var(--ink-soft); }
.cf-source.inscribed { color: var(--accent-deep); border-color: var(--accent); }
.cf-rationale { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); font-style: italic; max-width: 600px; text-wrap: pretty; }
.canon-empty { margin: auto; color: var(--ink-soft); font-style: italic; font-size: 16px; }
/* ---- canon: sort control + lens chips ---- */
.canon-controls { display: flex; flex-direction: column; }
.sort-by { display: flex; align-items: center; gap: 9px; padding: 16px 24px 14px; }
.sort-by-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; color: var(--ink-soft); }
.sort-by select {
appearance: none; -webkit-appearance: none; cursor: pointer; flex: 1;
background-color: var(--paper-2); color: var(--ink); border: 1px solid var(--line); border-radius: 2px;
font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; padding: 7px 28px 7px 11px;
background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
background-position: calc(100% - 15px) center, calc(100% - 10px) center;
background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.sort-by select:hover { border-color: var(--accent); }
.cf-tags { display: inline-flex; gap: 6px; margin-left: auto; }
.chip { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 7px; border-radius: 10px; border: 1px solid var(--line); color: var(--ink-soft); white-space: nowrap; }
.chip.testament { color: #fff; border-color: transparent; }
.chip.testament.reason { background: #36607a; }
.chip.testament.revelation { background: #a37f3f; }
.chip.testament.law { background: #8c3a34; }
.chip.testament.enlightenment { background: #5a6b3a; }
.chip.testament.imagination { background: #6a4a78; }
.chip.testament.unsorted { background: var(--struck); }
/* ---------------- responsive ---------------- */
@media (max-width: 880px) {
.body { display: block; overflow-y: auto; grid-template-columns: 1fr; }
.books, .canon-main { overflow: visible; height: auto; }
.books { border-right: none; border-bottom: 1px solid var(--line); }
.index-foot { display: none; }
.stage { display: block; padding: 32px 22px 64px; }
.stage-inner { margin: 0; }
.masthead { flex-wrap: wrap; gap: 16px; }
}
/* ---------------- static build additions ---------------- */
/* The sidebar entries and the brand are now real anchors (the canon is
set into the page; nav is jump-to-anchor, no JS). Strip link chrome so
they read exactly like the old buttons. */
a.book-row, a.brand { text-decoration: none; color: inherit; }
a.book-row:visited { color: inherit; }
/* All five testaments stand stacked in the main column, each its own section.
scroll-margin keeps a jumped-to heading off the very top edge; the rule
between sections marks the seam. */
.canon-section { scroll-margin-top: 24px; }
.canon-section + .canon-section { margin-top: 60px; padding-top: 56px; border-top: 1px solid var(--line); }
/* the section you jumped to gets a quiet gold tick on its heading */
.canon-section:target .canon-book-head { box-shadow: inset 3px 0 0 var(--accent); padding-left: 18px; }
/* the sidebar link matching the current :target lights like the old .on row;
falls back gracefully where :has is unsupported (just no active highlight) */
.book-row.on { background: color-mix(in oklab, var(--paper-2) 90%, transparent); color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }
/* ---- the original, on reveal ---- */
/* The renewed line is the summary (always lit, always visible). Tapping it
unfolds the original beneath — muted whole, only the renewed words struck.
Native : instant by default, eased by script.js (set in light), keyboard-accessible. */
.folio-reveal > summary { display: block; cursor: pointer; list-style: none; }
.folio-reveal > summary::-webkit-details-marker { display: none; }
.folio-reveal > summary::marker { content: ""; }
.folio-reveal > summary:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; }
/* the quiet affordance that says a verse can be opened (reuses the cf-source pill look) */
.cf-compare {
margin-left: auto; font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em;
text-transform: uppercase; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--line);
color: var(--ink-soft); white-space: nowrap; transition: color .15s, border-color .15s;
}
.cf-compare::after { content: "compare"; }
.folio-reveal[open] .cf-compare::after { content: "return"; }
.folio-reveal > summary:hover .cf-compare { color: var(--ink); border-color: var(--accent); }
/* the witness: whole passage muted; the line-through falls only on what changed */
.verse.verse-original { color: var(--struck); margin-top: 20px; }
.verse.verse-original .struck {
text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--struck);
}