:root {
  --mono: 'JetBrains Mono', monospace;
  --bg: #e8dcc2;
  --bg-2: #d9c9a7;
  --ink: #2b2418;
  --ink-soft: #5c4f3a;
  --rule: #8a7652;
  --moss: #6e2a1e;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: 0.005em;
  min-height: 100vh;
}

/* ─────────── night theme ─────────── */
body.theme-night {
  --bg: #1a1611;
  --bg-2: #25201a;
  --ink: #d9c9a7;
  --ink-soft: #a89778;
  --rule: #6e5c3e;
  --moss: #c8a14a;
}
body.theme-night .tree,
body.theme-night .marg-inline { color: var(--ink); }
body.theme-night.tex-foxed {
  background-image:
    radial-gradient(circle at 8% 12%, rgba(200,160,100,0.06) 0, transparent 8px),
    radial-gradient(circle at 68% 18%, rgba(200,160,100,0.05) 0, transparent 10px),
    radial-gradient(circle at 14% 72%, rgba(200,160,100,0.05) 0, transparent 9px),
    radial-gradient(circle at 48% 82%, rgba(200,160,100,0.06) 0, transparent 8px),
    radial-gradient(circle at 58% 58%, rgba(200,160,100,0.04) 0, transparent 6px),
    url("noise-light.png");
  background-size: auto, auto, auto, auto, auto, 48px 48px;
}

/* ─────────── foxed texture ─────────── */
body.tex-foxed {
  background-image:
    radial-gradient(circle at 8% 12%, rgba(140,60,30,0.22) 0, transparent 8px),
    radial-gradient(circle at 68% 18%, rgba(130,55,28,0.20) 0, transparent 10px),
    radial-gradient(circle at 14% 72%, rgba(120,50,22,0.18) 0, transparent 9px),
    radial-gradient(circle at 48% 82%, rgba(135,60,30,0.20) 0, transparent 8px),
    radial-gradient(circle at 58% 58%, rgba(125,55,26,0.16) 0, transparent 6px),
    url("noise.png");
  background-size: auto, auto, auto, auto, auto, 48px 48px;
}

/* ─────────── page-level day/night toggle ─────────── */
.lumen {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1;
  transition: background 200ms ease, color 200ms ease;
  padding: 0;
}
.lumen::before { content: "✢"; position: absolute; top: -6px; left: -5px; font-size: 9px; color: var(--ink-soft); background: var(--bg); padding: 0 2px; }
.lumen::after  { content: "✢"; position: absolute; bottom: -6px; right: -5px; font-size: 9px; color: var(--ink-soft); background: var(--bg); padding: 0 2px; }
.lumen:hover { background: var(--bg-2); }
.lumen .glyph-day, .lumen .glyph-night { display: none; }
body.theme-day .lumen .glyph-night { display: inline; }
body.theme-night .lumen .glyph-day { display: inline; }
.lumen-cap {
  position: fixed;
  top: 62px;
  right: 18px;
  width: 40px;
  text-align: center;
  font-size: 8px;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
  text-transform: uppercase;
  z-index: 50;
  pointer-events: none;
}

/* subtle parchment sway on the whole page frame */
@keyframes parchment-sway {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25%      { transform: translate3d(-1.5px, -1px, 0) rotate(-0.03deg); }
  50%      { transform: translate3d(1px, 1.5px, 0) rotate(0.02deg); }
  75%      { transform: translate3d(1.5px, -0.5px, 0) rotate(0.03deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .sway-page { animation: parchment-sway 26s ease-in-out infinite; }
}

.page {
  max-width: 920px;
  margin: 0 auto;
  padding: 64px 56px 72px;
  position: relative;
}

/* running heads */
.runner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 28px;
}

/* frontispiece */
.frontis {
  text-align: center;
}
.portrait-clock {
  display: inline-block;
  width: 280px;
  height: auto;
  filter: sepia(0.35) contrast(0.92) saturate(0.85);
  mix-blend-mode: multiply;
  opacity: 0.92;
}
.name {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 500;
  letter-spacing: 0.18em;
  margin: 22px 0 0;
}
.motto-inline {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.48em;
  text-transform: uppercase;
  opacity: 0.82;
}
.motto-inline .thorn { color: var(--moss); margin: 0 0.4em; }
.subtitle {
  font-size: 12px;
  font-style: italic;
  opacity: 0.68;
  margin-top: 12px;
}

/* divider — single thorn, hairline rules */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--ink);
  opacity: 0.6;
  margin: 36px 0;
}
.divider::before, .divider::after {
  content: "";
  flex: 0 0 110px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.divider .glyph {
  font-size: 13px;
  letter-spacing: 0;
  color: var(--ink);
}
.divider-closing {
  margin: 56px 0 36px;
}

/* chapter */
.chapter {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 28px;
  margin-top: 44px;
  align-items: flex-start;
}
.chapter-gutter {
  text-align: right;
  position: sticky;
  top: 24px;
}
.roman {
  font-size: 56px;
  font-weight: 700;
  line-height: 0.9;
  color: var(--moss);
  letter-spacing: -0.02em;
}
.chapter-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.7;
  margin-top: 8px;
}
/* marginalia · bracketed in-line — parenthetical, quieter */
.marg-inline {
  display: inline;
  font-style: italic;
  font-weight: 500;
  font-size: 0.88em;
  color: var(--ink);
  opacity: 0.6;
  letter-spacing: 0.01em;
}
.marg-inline::before { content: "[ "; }
.marg-inline::after  { content: " ]"; }

/* list-level gloss (under section tag) */
.marg-block {
  display: block;
  font-style: italic;
  font-weight: 500;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.6;
  margin: -4px 0 14px;
}
.marg-block::before { content: "[ "; }
.marg-block::after  { content: " ]"; }

.chapter-body .section-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.7;
  margin-bottom: 10px;
}

/* drop cap — plain mono, oversized, moss */
.dropcap::first-letter {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 3.6em;
  line-height: 0.88;
  float: left;
  padding: 0.08em 0.14em 0 0;
  margin-right: 0.06em;
  color: var(--moss);
}

.prose { font-size: 14.5px; line-height: 1.78; }
.prose em { color: var(--ink); font-style: italic; opacity: 0.9; }

/* writings list */
.writings { margin-top: 6px; }
.writing {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px dashed #2b241833;
  font-size: 13.5px;
  color: var(--ink);
  text-decoration: none;
  transition: background .2s, padding .2s;
}
.writing:last-child { border-bottom: none; }
.writing:hover { background: rgba(90,107,58,0.05); padding-left: 6px; padding-right: 6px; }
.writing .num {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.25em;
  opacity: 0.8;
}
.writing .title { font-weight: 500; }
.writing:hover .title { color: var(--moss); }
.writing .where {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.55;
}

/* links grid (elsewhere) */
.elsewhere {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 28px;
  font-size: 13.5px;
}
.elsewhere a {
  color: var(--ink);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px dashed #2b241833;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  transition: background .2s, padding .2s;
}
.elsewhere a:hover { background: rgba(90,107,58,0.05); padding-left: 6px; padding-right: 6px; }
.elsewhere a:hover .k { color: var(--moss); }
.elsewhere a .k::before { content: "✢ "; color: var(--moss); opacity: 0.6; margin-right: 0.2em; }
.elsewhere a .v {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
  font-style: italic;
  align-self: center;
}

/* crossed frame — applied to the closing quatrain */
.frame-cross {
  position: relative;
  border: 1px solid var(--ink);
  padding: 28px 32px;
  max-width: 460px;
  margin: 0 auto;
  background: rgba(139, 118, 82, 0.05);
}
.frame-cross .cx {
  position: absolute;
  font-size: 14px;
  line-height: 1;
  background: var(--bg);
  padding: 0 4px;
  color: var(--ink);
}
.frame-cross .cx.tl { top: -8px; left: -7px; }
.frame-cross .cx.tr { top: -8px; right: -7px; }
.frame-cross .cx.bl { bottom: -8px; left: -7px; }
.frame-cross .cx.br { bottom: -8px; right: -7px; }
.frame-cross .verse {
  font-size: 15px;
  line-height: 2;
  font-style: italic;
  text-align: center;
  opacity: 0.85;
}

/* colophon */
.colophon {
  text-align: center;
  margin-top: 44px;
  font-size: 9.5px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  opacity: 0.5;
}

/* hidden stanza (kept from original) */
.hidden-stanza { display: none; }

/* chapter gutter trees */
.tree {
  width: 132px;
  height: auto;
  color: var(--ink);
  opacity: 0.86;
  margin-top: 18px;
  margin-left: auto;
  display: block;
}
.tree.tree-ii { color: var(--moss); opacity: 0.82; }
.tree.tree-iii { color: var(--ink); opacity: 0.78; }

/* selection */
::selection { background: #5a6b3a44; color: var(--ink); }

/* responsive */
@media (max-width: 720px) {
  .page { padding: 40px 22px 56px; }
  .chapter { grid-template-columns: 1fr; gap: 16px; }
  .chapter-gutter { text-align: left; position: static; }
  .roman { font-size: 40px; }
  .divider::before, .divider::after { flex: 1; }
  .elsewhere { grid-template-columns: 1fr; }
  .runner { font-size: 9px; letter-spacing: 0.3em; }
  .writing { grid-template-columns: 24px 1fr; }
  .writing .where { grid-column: 2; opacity: 0.55; }
  .tree { margin-left: 0; width: 72px; }
}