/* ══════════════════════════════════════════════════════════════════════════
   Codex layer: what a long-form chapter needs that the house template does
   not have. Everything above this file (css/style.css) is the stake site's
   stylesheet, verbatim. Nothing here restyles a house class; it only adds
   the reading column, the manuscript rules, the illuminations and the
   chapter navigation.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --codex-measure: 46rem;  /* column width; the text inside runs ~65 characters */
  --ink: #2a3530;          /* the house parchment ink */
  --ink-head: #1a4731;     /* the house parchment heading green */
  --ink-soft: #5c5344;     /* the house parchment muted ink */
  --rule: rgba(140,100,60,.4);
}

/* Runes fall everywhere except behind the reading card. The app sites let them
   show through their cards on purpose: people keep those pages open for hours and
   the runes are company. A codex page is read by newcomers who need to focus on
   the text, so here the card stays clear. The canvas is the house
   layer, untouched; this mask cuts a hole the size of the card, which js/docs.js
   keeps in step with scrolling through four variables (the card's edges in
   viewport px). Two layers, added together: one opaque left and right of the
   card, one opaque above and below it, so the only clear region is the card. */
#runes {
  --cl: -1px; --cr: -1px; --ct: -1px; --cb: -1px;
  -webkit-mask-image:
    linear-gradient(to right, #000 var(--cl), transparent var(--cl), transparent var(--cr), #000 var(--cr)),
    linear-gradient(to bottom, #000 var(--ct), transparent var(--ct), transparent var(--cb), #000 var(--cb));
          mask-image:
    linear-gradient(to right, #000 var(--cl), transparent var(--cl), transparent var(--cr), #000 var(--cr)),
    linear-gradient(to bottom, #000 var(--ct), transparent var(--ct), transparent var(--cb), #000 var(--cb));
}

/* ─── The reading column ──────────────────────────────────────────────── */

.codex { max-width:var(--codex-measure); margin:0 auto }
.codex.glass { padding:44px 52px 40px; overflow:visible }

.codex p, .codex li {
  font-size:17px; line-height:1.75; color:var(--ink);
}
.codex p + p { margin-top:1em }
.codex strong { color:#1f2a25; font-weight:600 }
.codex em { font-style:italic }
.codex a { color:#0f3b26; text-decoration:underline; text-underline-offset:2px }
.codex a:hover { color:#7a3018 }
.codex code { font-family:monospace; font-size:.92em; color:#0f3b26; overflow-wrap:anywhere }

.codex h2 {
  font-family:'Cinzel Decorative',serif; font-size:21px; line-height:1.35;
  color:var(--ink-head); letter-spacing:.4px; margin:0 0 14px; scroll-margin-top:96px;
}
.codex h3 {
  font-family:'Cinzel Decorative',serif; font-size:15px; color:var(--ink-head);
  letter-spacing:.3px; margin:24px 0 8px; scroll-margin-top:96px;
}
.codex section { scroll-margin-top:96px }
.codex section + section { margin-top:8px }

/* Every heading is an address. The mark shows on hover and on focus. */
.anchor {
  margin-left:.35em; font-family:'Exo 2',sans-serif; font-size:.8em; font-weight:400;
  color:var(--ink-soft); text-decoration:none !important; opacity:0; transition:opacity .2s;
}
h2:hover .anchor, h3:hover .anchor, .anchor:focus { opacity:1 }
@media (hover:none) { .anchor { opacity:.55 } }

/* The lore opening: a dispatch, so it reads a little apart from the procedure. */
.codex-open p { font-style:italic; color:#33302a }
.codex-open p:first-of-type::first-letter {
  float:left; font-family:'Cinzel Decorative',serif; font-style:normal; font-weight:900;
  font-size:64px; line-height:.9; margin:6px 10px 0 0; color:var(--ink-head);
}

/* ─── Illuminations: art set into the column, text running past it ───── */

.illum { float:right; width:200px; height:auto; margin:4px 0 14px 26px }
.illum.left { float:left; margin:4px 26px 14px 0 }
.illum.small { width:132px }
.clear { clear:both }

/* ─── Manuscript rules between sections ───────────────────────────────── */

.rune-rule {
  display:flex; align-items:center; gap:14px; margin:34px 0 30px;
  color:var(--ink-soft); font-size:15px; letter-spacing:8px;
  font-family:'Noto Sans Runic','Segoe UI Historic','Segoe UI Symbol',serif;
}
.rune-rule::before, .rune-rule::after { content:''; flex:1; height:1px; background:var(--rule) }

/* ─── Procedures: plain, numbered, nothing ornamental ─────────────────── */

.steps { margin:12px 0 0 1.4em }
.steps li + li { margin-top:6px }
.steps li::marker { color:var(--ink-head); font-weight:700 }
.plain { list-style:disc; margin:10px 0 0 1.4em }
.plain li + li { margin-top:4px }

.codex .notice { margin:16px 0 0 }
.codex .notice p { font-size:15px; line-height:1.7 }

.go { margin-top:12px; font-size:14px !important }
.go a { font-weight:600; letter-spacing:.3px }

/* ─── Chapter head and chapter navigation ─────────────────────────────── */

.chapter-num {
  display:block; font-family:'Cinzel Decorative',serif; font-size:13px; letter-spacing:4px;
  color:#7a3018; margin-bottom:10px; text-transform:uppercase;
}

.chapter-nav {
  max-width:var(--codex-measure); margin:22px auto 0; padding:14px 22px;
  display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center;
  font-size:13px; letter-spacing:.5px;
}
.chapter-nav a, .chapter-nav span { color:#3a4540; text-decoration:none }
.chapter-nav a:hover { color:#1a4731; text-decoration:underline }
.chapter-nav .next { text-align:right }
.chapter-nav .pending { color:var(--ink-soft); font-style:italic }

/* Contents page */
.toc { list-style:none; margin-top:6px }
.toc li { display:grid; grid-template-columns:3.2em 1fr; gap:6px; padding:9px 0; border-bottom:1px solid rgba(140,100,60,.22) }
.toc li:last-child { border-bottom:none }
.toc .num { font-family:'Cinzel Decorative',serif; color:var(--ink-head); font-weight:700 }
.toc .t { font-size:17px; color:var(--ink) }
.toc .d { display:block; font-size:14px; color:var(--ink-soft); margin-top:2px }
.toc .pending .t { color:var(--ink-soft) }

.stamp { font-size:13px !important; color:var(--ink-soft) !important; font-style:italic; margin-top:26px }

/* ─── Reference tables (Chapter XI): the ledger, set in the column ─────── */

.ref { width:100%; border-collapse:collapse; margin:14px 0 4px; font-size:14.5px; line-height:1.55; color:var(--ink) }
.ref th { font-family:'Cinzel Decorative',serif; font-size:12px; letter-spacing:.4px; color:var(--ink-head); text-align:left; font-weight:700; padding:6px 10px 6px 0; border-bottom:1px solid var(--rule) }
.ref td { padding:8px 10px 8px 0; vertical-align:top; border-bottom:1px solid rgba(140,100,60,.18) }
.ref tr:last-child td { border-bottom:none }
.ref td:first-child { font-weight:600; color:#1f2a25; white-space:nowrap }
.ref .sub { display:block; font-size:13px; color:var(--ink-soft); font-weight:400; white-space:normal }
.ref code { font-size:12.5px }
.kind { display:inline-block; font-size:11px; letter-spacing:.5px; text-transform:uppercase; padding:1px 7px; border-radius:3px; border:1px solid var(--rule); color:var(--ink-soft); white-space:nowrap }
.kind.compiled { color:#1a4731; border-color:rgba(26,71,49,.45) }
.kind.settable { color:#7a3018; border-color:rgba(122,48,24,.45) }
.formula { font-family:monospace; font-size:14px; color:#0f3b26; margin:12px 0; padding:10px 14px; border-left:2px solid var(--rule); overflow-wrap:anywhere }

/* ─── Phone ───────────────────────────────────────────────────────────── */

@media (max-width:640px) {
  .wrap { padding:0 16px }
  .codex.glass { padding:28px 20px 26px }
  .codex p, .codex li { font-size:16.5px }
  .codex h2 { font-size:18px }
  .illum { width:120px; margin-left:16px }
  .illum.left { margin:4px 16px 12px 0 }
  .illum.small { width:96px }
  .codex-open p:first-of-type::first-letter { font-size:52px }
  .chapter-nav { grid-template-columns:1fr 1fr; }
  .chapter-nav .mid { display:none }
  .ref, .ref tbody, .ref tr, .ref td { display:block; width:100% }
  .ref thead { display:none }
  .ref tr { padding:8px 0; border-bottom:1px solid rgba(140,100,60,.18) }
  .ref td { border-bottom:none; padding:2px 0 }
  .ref td:first-child { white-space:normal }
}