/* Explore — presentation only.
   Behaviour binds to #id, never to a class. Two classes are load-bearing and
   must keep working: `.hidden` (drawer, legend) and `.active-verse`. */

:root {
  --paper:        #fbf9f5;
  --paper-sunk:   #f3efe6;
  --paper-raised: #ffffff;
  --rule:         #e2dbcc;
  --rule-soft:    #ede7db;

  --ink:          #1e1b16;
  --ink-soft:     #5d564a;
  --ink-faint:    #928a7c;

  --accent:       #8a4b26;   /* structure, seams */
  --accent-soft:  #d8b596;
  --accent-wash:  #f5e9dd;

  --divine:       #8a6a12;   /* the Name */
  --divine-wash:  #f7efd6;
  --supplied:     #7d8899;   /* words not in the original */
  --gloss:        #3f6b52;   /* what a name means */
  --devotional:   #2f6b56;
  --dig:          #7a6a4f;   /* material evidence */
  --journey:      #4a6b7a;   /* journeys */
  --vocab:        #8a6a5a;   /* visual dictionary */
  --vocab-wash:   #f6ece6;
  --draft:        #8a6d1f;

  --serif: "EB Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --sans:  Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --measure: 34rem;
  --rail: 17rem;
  --aside: 25rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --vocab-wash:   #2a221d;
    --paper:        #14130f;
    --paper-sunk:   #1c1a15;
    --paper-raised: #211e18;
    --rule:         #353026;
    --rule-soft:    #29251d;

    --ink:          #ece6da;
    --ink-soft:     #aba396;
    --ink-faint:    #7d7566;

    --accent:       #dd9c6b;
    --accent-soft:  #7c5334;
    --accent-wash:  #2a1f16;

    --divine:       #e0b850;
    --divine-wash:  #2b2413;
    --supplied:     #8a94a3;
    --gloss:        #7cbb96;
    --devotional:   #7fc4a8;
    --draft:        #d6b45c;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

button {
  font: inherit;
  font-size: 0.82rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--paper-raised);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
button:hover:not(:disabled) { border-color: var(--accent-soft); color: var(--accent); }
button:disabled { opacity: .3; cursor: default; }
button[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent-soft); color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* ---------- masthead ---------- */

#masthead {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .7rem 1.75rem;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 30;
  flex-wrap: wrap;
}

#brand { text-decoration: none; display: flex; flex-direction: column; line-height: 1.15; }
#brand-mark {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .01em;
}
#brand-sub {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-faint);
}

#lookup-form { flex: 1 1 12rem; max-width: 20rem; }
#lookup-input {
  width: 100%;
  padding: .42rem .75rem;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--paper-raised);
  color: var(--ink);
  font: inherit;
  font-size: .85rem;
}
#lookup-input::placeholder { color: var(--ink-faint); }

/* The way back to theophilusbible.com. Beside the brand, quiet enough that it
   reads as a parent-site line rather than a control — the chapter's own
   controls live in #masthead-actions, and #study-link is already there. */
#home-link {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-faint);
  text-decoration: none;
  white-space: nowrap;
  padding: .2rem .5rem;
  border: 1px solid transparent;
  border-radius: 5px;
  transition: color .12s, border-color .12s;
}
/* An outbound link to the main site, and marked as one. */
/* A margin rather than a trailing space in `content`: the .1em letter-spacing
   on this element swallows the space and the arrow ends up jammed against the
   T. */
#home-link::before { content: "\2197"; margin-right: .35em; opacity: .6; }
#home-link:hover { color: var(--accent); border-color: var(--accent-soft); }

#masthead-actions { display: flex; gap: .5rem; margin-left: auto; align-items: center; }

/* The one control in the row that leaves the site. Shares the button shape so
   the row stays even, and carries an arrow so it does not read as another
   in-page toggle. */
#study-link {
  font-size: 0.82rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--paper-raised);
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .12s, color .12s, background .12s;
}
#study-link::after { content: " \2197"; opacity: .6; }
#study-link:hover { border-color: var(--accent-soft); color: var(--accent); }

/* ---------- chooser ---------- */

#chooser-wrap { display: flex; gap: .5rem; flex: 1 1 22rem; max-width: 30rem; align-items: center; }
#open-chooser { display: flex; align-items: center; gap: .4rem; white-space: nowrap; font-weight: 500; }
#chooser-current { font-family: var(--serif); font-size: .95rem; color: var(--ink); }
#lookup-form { flex: 1 1 8rem; max-width: none; }

#chooser {
  position: fixed; inset: 0; z-index: 50;
  background: color-mix(in srgb, var(--ink) 32%, transparent);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4.5rem 1rem 2rem;
}
#chooser-panel {
  position: relative;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 10px;
  box-shadow: 0 24px 64px rgba(0,0,0,.24);
  width: min(56rem, 100%); max-height: 78vh; overflow: hidden;
  display: flex; flex-direction: column;
}
#chooser-close {
  position: absolute; top: .5rem; right: .7rem; border: 0; background: none;
  font-size: 1.4rem; line-height: 1; color: var(--ink-faint); padding: .1rem .4rem;
}
#chooser-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 0; min-height: 0; }
#chooser-cols > section {
  padding: 1.1rem 1rem; overflow-y: auto; max-height: 78vh;
  border-right: 1px solid var(--rule-soft);
}
#chooser-cols > section:last-child { border-right: 0; }
#chooser-cols h3 {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-faint); margin: 0 0 .6rem; font-weight: 600;
}
#chooser-filter {
  width: 100%; padding: .35rem .6rem; margin-bottom: .6rem; font: inherit; font-size: .82rem;
  border: 1px solid var(--rule); border-radius: 5px; background: var(--paper-raised); color: var(--ink);
}
.chooser-group {
  font-size: .58rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-faint); margin: .8rem 0 .3rem; font-weight: 600;
}
.chooser-group:first-child { margin-top: 0; }
.chooser-book {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  width: 100%; text-align: left; border: 0; background: none; padding: .3rem .45rem;
  border-radius: 4px; font-size: .85rem; color: var(--ink-soft);
}
.chooser-book:hover { background: var(--accent-wash); color: var(--accent); }
.chooser-book[aria-current="true"] { background: var(--accent-wash); color: var(--accent); font-weight: 600; }
.has-structure { color: var(--accent); font-size: .6rem; }

#chooser-chapter-grid, #chooser-verse-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(2.2rem, 1fr)); gap: .28rem;
}
.numcell {
  padding: .3rem 0; font-size: .78rem; font-variant-numeric: tabular-nums;
  border: 1px solid var(--rule-soft); border-radius: 4px; background: var(--paper-raised);
}
.numcell:hover { border-color: var(--accent-soft); color: var(--accent); background: var(--accent-wash); }
.numcell[aria-current="true"] { background: var(--accent); color: var(--paper); border-color: var(--accent); }

@media (max-width: 46rem) {
  #chooser-cols { grid-template-columns: 1fr; }
  #chooser-cols > section { max-height: none; border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  #chooser-panel { max-height: 88vh; overflow-y: auto; }
}

/* ---------- the coloured original ---------- */

#original-legend { border-bottom: 1px solid var(--rule); background: var(--paper-sunk); }
#original-legend-inner { max-width: 74rem; margin: 0 auto; padding: 1.3rem 1.75rem 1.5rem; }
#original-legend-head { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: .9rem; }
#original-legend-head h2 { font-family: var(--serif); font-size: 1.05rem; margin: 0; font-weight: 600; }
#lens-switch { display: flex; gap: .4rem; }

#original-legend-list {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
}
.glegend-row { display: flex; align-items: center; gap: .45rem; font-size: .78rem; color: var(--ink-soft); }
.swatch { width: .8rem; height: .8rem; border-radius: 2px; flex: 0 0 auto; }

#original-caveat {
  font-size: .72rem; color: var(--ink-faint); line-height: 1.55; margin: 0;
  border-left: 2px solid var(--rule); padding-left: .8rem; max-width: 52rem;
}

.original {
  font-size: 1.45rem; line-height: 2.1; margin: .2rem 0 .5rem;
  padding: .5rem .7rem; background: var(--paper-sunk); border-radius: 6px;
}
.original.rtl { direction: rtl; text-align: right; }
.original.ltr { direction: ltr; }
/* Tokens are buttons so they can be opened by keyboard as well as pointer;
   they must not look like buttons. */
.tok {
  font: inherit; background: none; border: 0; padding: 0 .05rem; margin: 0;
  cursor: pointer; border-radius: 3px; line-height: inherit;
}
.tok:hover { text-decoration: underline; text-underline-offset: 4px; background: var(--accent-wash); }

.lex-mark {
  font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .05em;
  border-radius: 3px; padding: .1rem .4rem; margin-left: .4rem; cursor: pointer;
  vertical-align: .18em; color: var(--gloss); background: none;
  border: 1px solid color-mix(in srgb, var(--gloss) 40%, transparent);
}
.lex-mark:hover { background: var(--gloss); color: var(--paper); }

.theo-mark {
  font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .04em;
  border-radius: 3px; padding: .1rem .4rem; margin-left: .4rem; cursor: pointer;
  vertical-align: .18em; white-space: nowrap;
  color: #8a5a2b; border: 1px solid #d3b08c; background: none;
}
.theo-mark:hover { background: #8a5a2b; color: var(--paper); border-color: #8a5a2b; }
@media (prefers-color-scheme: dark) {
  .theo-mark { color: #d9a874; border-color: #6a4a2c; }
  .theo-mark:hover { background: #6a4a2c; color: var(--ink); }
}

.theo-locus {
  display: block; width: 100%; text-align: left; padding: .7rem .85rem;
  margin: 0 0 .5rem; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--paper-raised); cursor: pointer;
}
.theo-locus:hover { border-color: var(--accent-soft); background: var(--accent-wash); }
.theo-title { display: block; font-family: var(--serif); font-size: 1rem; color: var(--ink); margin-bottom: .2rem; }
.theo-meta { display: block; font-size: .72rem; color: var(--ink-faint); }
.theo-ocr { color: var(--draft); }
.theo-crumb { display: block; font-size: .68rem; color: var(--ink-faint); margin-top: .2rem; font-style: italic; }

.mas-mark {
  font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .04em;
  border-radius: 3px; padding: .1rem .4rem; margin-left: .4rem; cursor: pointer;
  vertical-align: .18em; white-space: nowrap;
  color: #7a4a8a; border: 1px solid #c4a9d1; background: none;
}
.mas-mark:hover { background: #7a4a8a; color: var(--paper); border-color: #7a4a8a; }
@media (prefers-color-scheme: dark) {
  .theo-mark {
  font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .04em;
  border-radius: 3px; padding: .1rem .4rem; margin-left: .4rem; cursor: pointer;
  vertical-align: .18em; white-space: nowrap;
  color: #8a5a2b; border: 1px solid #d3b08c; background: none;
}
.theo-mark:hover { background: #8a5a2b; color: var(--paper); border-color: #8a5a2b; }
@media (prefers-color-scheme: dark) {
  .theo-mark { color: #d9a874; border-color: #6a4a2c; }
  .theo-mark:hover { background: #6a4a2c; color: var(--ink); }
}

.theo-locus {
  display: block; width: 100%; text-align: left; padding: .7rem .85rem;
  margin: 0 0 .5rem; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--paper-raised); cursor: pointer;
}
.theo-locus:hover { border-color: var(--accent-soft); background: var(--accent-wash); }
.theo-title { display: block; font-family: var(--serif); font-size: 1rem; color: var(--ink); margin-bottom: .2rem; }
.theo-meta { display: block; font-size: .72rem; color: var(--ink-faint); }
.theo-ocr { color: var(--draft); }
.theo-crumb { display: block; font-size: .68rem; color: var(--ink-faint); margin-top: .2rem; font-style: italic; }

.mas-mark { color: #c3a0d4; border-color: #55406b; }
  .mas-mark:hover { background: #55406b; color: var(--ink); }
}

.qk { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 0 1.1rem;
      padding: .8rem .9rem; background: var(--paper-raised); border-radius: 6px;
      border: 1px solid var(--rule-soft); }
.qk-label { display: block; font-size: .58rem; text-transform: uppercase; letter-spacing: .14em;
            color: var(--ink-faint); margin-bottom: .25rem; }
.qk-heb { display: block; font-size: 1.5rem; direction: rtl; text-align: right; line-height: 1.7; }
.qk-gloss { display: block; font-size: .68rem; color: var(--ink-faint); font-style: italic; text-align: right; }

.mas-note { margin: 0 0 1rem; }
.mas-note h4 { font-size: .9rem; margin: 0 0 .25rem; }
.mas-heb { font-size: 1rem; color: var(--ink-soft); margin-right: .3rem; }
.mas-note p { font-size: .88rem !important; margin: 0 !important; }
.mas-caveat { font-size: .74rem !important; color: var(--draft) !important; margin-top: .3rem !important; }

.lex-entry { margin: 0 0 1.5rem; }
.lex-entry h3 { margin: 0 0 .3rem !important; font-size: 1.35rem; }
.lex-entry h4 { margin: 0 0 .3rem; font-size: .92rem; }
.lex-pos {
  font-family: var(--sans); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-faint); margin-left: .5rem; vertical-align: .3em;
}
.lex-defs { font-size: .95rem !important; color: var(--accent); margin: 0 0 .6rem !important; }
.lex-sense { font-size: .86rem !important; margin: 0 0 .5rem !important; }
.lex-sense b { color: var(--ink-faint); margin-right: .35rem; }
.lex-cites { font-size: .72rem !important; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.lex-strongs { border-top: 1px solid var(--rule-soft); padding-top: .9rem; }
.lex-usage { font-size: .78rem !important; color: var(--ink-faint); }

/* ---------- legend ---------- */

/* Deliberately NOT sticky. Stacking a second sticky element under the sticky
   masthead produced a scroll-position gap: the panel is opened, read and
   closed, so it can simply push the page down like any other block. */
#legend {
  border-bottom: 1px solid var(--rule);
  background: var(--paper-sunk);
}
#legend-inner { max-width: 74rem; margin: 0 auto; padding: 1.5rem 1.75rem 1.75rem; }
#legend-head h2 { font-family: var(--serif); font-size: 1.1rem; margin: 0 0 .3rem; font-weight: 600; }
#legend-head p { font-size: .82rem; color: var(--ink-soft); margin: 0 0 1.1rem; max-width: 44rem; line-height: 1.55; }

#legend-list { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid;
               grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .6rem 1.5rem; }
.legend-row { display: flex; align-items: baseline; gap: .7rem; padding: .35rem 0; }
.legend-row button { flex: 0 0 auto; min-width: 3.1rem; text-align: center; }
.legend-sample { font-family: var(--serif); font-size: 1rem; flex: 0 0 auto; }
.legend-what { font-size: .76rem; color: var(--ink-soft); line-height: 1.4; }
.legend-count { font-size: .68rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

#legend-caveat {
  font-size: .74rem;
  color: var(--ink-faint);
  line-height: 1.55;
  max-width: 46rem;
  margin: 0;
  border-left: 2px solid var(--rule);
  padding-left: .85rem;
}

/* ---------- layout ---------- */

/* THREE PANES: structure · text · notes.
   The notes were a modal drawer, which meant you could not read the verse and
   its commentary at the same time — the thing a study Bible exists to let you
   do. As a pane, the aside stays open while you move through the chapter, and
   it doubles as the search results surface so the text is never covered.

   The reading column keeps a fixed measure; the panes flex around it. */
#reader {
  display: grid;
  /* The reading column is CAPPED at the measure and the aside takes every
     remaining pixel, rather than the text track absorbing the slack and
     leaving a dead gap between the text and the notes. Line length is a
     legibility constraint, so the space goes to the pane that can use it —
     the one holding photographs and commentary. */
  grid-template-columns: var(--rail) minmax(0, var(--measure)) minmax(var(--aside), 1fr);
  gap: 2.5rem;
  max-width: 124rem;
  margin: 0 auto;
  padding: 2.25rem 1.75rem 5rem;
  align-items: start;
}
body[data-rail="off"] #reader { grid-template-columns: minmax(0, var(--measure)) minmax(var(--aside), 1fr); }
body[data-rail="off"] #structure-rail { display: none; }
body[data-aside="off"] #reader { grid-template-columns: var(--rail) minmax(0, 1fr); }
body[data-aside="off"] #aside { display: none; }
body[data-rail="off"][data-aside="off"] #reader { grid-template-columns: minmax(0, 1fr); }

/* Two panes: the structure rail is the first to go, because a reader who has
   opened a note is looking at the note. */
@media (max-width: 84rem) {
  #reader { grid-template-columns: minmax(0, var(--measure)) minmax(var(--aside), 1fr); gap: 2rem; }
  #structure-rail { display: none; }
  #toggle-structure { display: none; }
}

/* One pane: the aside becomes an overlay sheet rather than a column, which
   is the only honest option at this width. */
@media (max-width: 60rem) {
  #reader { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  #aside {
    position: fixed; inset: 0 0 0 auto; width: min(30rem, 100vw);
    z-index: 40; max-height: none; border-left: 1px solid var(--rule);
    box-shadow: -12px 0 48px rgba(0,0,0,.16); background: var(--paper-sunk);
    border-radius: 0;
  }
  #aside[data-mode="empty"] { display: none; }
  body[data-aside="off"] #aside { display: none; }
}

/* ---------- structure rail ---------- */

#structure-rail {
  position: sticky;
  top: 5.2rem;
  max-height: calc(100vh - 7.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: .82rem;
  padding-right: .5rem;
}
#structure-rail::-webkit-scrollbar { width: 6px; }
#structure-rail::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }

#rail-head { margin-bottom: 1.1rem; }
#rail-head h2 {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .15em;
  color: var(--ink-faint); margin: 0 0 .25rem; font-weight: 600;
}
#structure-source { font-size: .72rem; color: var(--ink-faint); margin: 0; font-style: italic; }
#structure-empty { font-size: .76rem; color: var(--ink-faint); line-height: 1.5; }

/* A structure group is drawn as Bullinger drew it: a brace down the left,
   members hanging off it, nested groups indented inside their parent member. */
.sgroup { margin: 0 0 .9rem; }

.sgroup-head {
  display: flex; align-items: baseline; gap: .5rem;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-faint); margin: 0 0 .45rem; font-weight: 600;
}
.sgroup-type {
  font-size: .58rem; letter-spacing: .06em; border: 1px solid var(--rule);
  border-radius: 3px; padding: 0 .28rem; color: var(--ink-faint); font-weight: 500;
  white-space: nowrap;
}

.sbrace { border-left: 2px solid var(--rule); padding-left: .55rem; }

.smember {
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  gap: .5rem;
  align-items: start;
  width: 100%;
  padding: .28rem .35rem .28rem 0;
  border: 0; background: none; text-align: left; color: inherit;
  border-radius: 4px;
}
.smember:hover { background: var(--accent-wash); border-color: transparent; color: inherit; }
.smember[aria-current="true"] { background: var(--accent-wash); }
.smember[aria-current="true"] .slabel { color: var(--ink); font-weight: 600; }

.sletter {
  font-family: var(--serif);
  font-weight: 600;
  font-size: .82rem;
  line-height: 1.25rem;
  height: 1.3rem;
  text-align: center;
  border-radius: 3px;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  background: var(--paper-raised);
  font-variant-numeric: tabular-nums;
}
/* A letter that recurs in its group is a correspondence — the only claim the
   notation makes. Corresponding members share a tint so the pairing is
   visible without decoding it. */
.sletter[data-pair="1"] { border-color: var(--accent-soft); color: var(--accent); background: var(--accent-wash); }
.sletter[data-pair="2"] { border-color: #9aa8bd; color: #5b6d87; background: #eef1f6; }
.sletter[data-pair="3"] { border-color: #a3b79f; color: #4f6b4a; background: #eef3ec; }
@media (prefers-color-scheme: dark) {
  .sletter[data-pair="2"] { border-color: #46536a; color: #9db0cc; background: #1b2029; }
  .sletter[data-pair="3"] { border-color: #46603f; color: #94b78c; background: #1a2018; }
}
.smember[aria-current="true"] .sletter { outline: 1px solid var(--accent); }

.slabel { color: var(--ink-soft); line-height: 1.4; font-size: .8rem; }
.sscope { display: block; font-size: .68rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; margin-top: .05rem; }

.schild { margin: .3rem 0 .55rem 1.1rem; }

.scaveat {
  font-size: .68rem; color: var(--draft); line-height: 1.45;
  border-left: 2px solid var(--draft); padding-left: .6rem; margin: .5rem 0 0 .55rem;
}

/* ---------- the text ---------- */

/* Centred in its track, which only shows when the aside is closed and the
   track is wider than the measure. */
#text-column { max-width: var(--measure); margin-inline: auto; }

#passage-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; margin-bottom: .5rem; flex-wrap: wrap;
}
#passage-heading {
  font-family: var(--serif); font-size: 2.1rem; font-weight: 500;
  margin: 0; letter-spacing: .005em; line-height: 1.1;
}
#chapter-nav { display: flex; align-items: center; gap: .4rem; }
#chapter-label { font-size: .74rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

#breadcrumb { font-size: .7rem; color: var(--ink-faint); margin: 0 0 2.4rem; line-height: 1.5;
              letter-spacing: .01em; }
.crumb { color: var(--accent); }
.crumb + .crumb::before { content: " › "; color: var(--ink-faint); }

/* The verse is a two-column grid: a narrow gutter carrying the number and a
   single apparatus marker, then the prose. Before this the markers trailed
   the text inline — six chips in five colours on a busy verse — and the line
   broke to fit them. A gutter keeps the measure intact and lets the reading
   column stay the loudest thing on the page. */
.verse {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0 .6rem;
  margin: 0 0 1rem;
  scroll-margin-top: 7rem;
  border-radius: 5px;
  padding: .15rem .4rem .15rem 0;
}
.verse.active-verse { background: var(--accent-wash); }

.verse-gutter {
  display: flex; flex-direction: column; align-items: flex-end; gap: .3rem;
  padding-top: .45rem;
}

/* The second grid column: the plate and the paragraph together.
 * It exists so the plate can be a SIBLING of the paragraph rather than a
 * child of it — `<figure>` inside `<p>` is unparseable and the browser
 * ejects it (see the note at plateFor in app.js). Being a grid item, this
 * is an independent formatting context, so it contains the float rather
 * than letting a tall plate bleed over the verses below. */
.verse-body { min-width: 0; }

.verse-text {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.72;
  margin: 0;
}

.verse-num {
  font-family: var(--sans);
  font-size: .68rem; font-weight: 600;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* One marker per verse. Each dot is a layer that has something to say; they
   are deliberately the same size and nearly the same weight, because ranking
   them by colour is what produced the chip salad. */
.notes-mark {
  /* A compact cluster, not a column. Six dots stacked vertically read as an
     ellipsis and stood as tall as the verse; wrapped into two short rows
     they read as what they are — a count of what is available here. */
  display: flex; flex-wrap: wrap-reverse; justify-content: flex-end;
  align-content: flex-start; gap: 3px;
  max-width: 1.9rem; padding: .25rem .2rem;
  border: 0; background: none; cursor: pointer; border-radius: 4px;
}
.notes-mark:hover { background: var(--paper-sunk); }
.dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-faint); opacity: .5; transition: opacity .12s;
}
.notes-mark:hover .dot { opacity: 1; }
.dot-commentary { background: var(--accent); }
.dot-theology   { background: #8a5a2b; }
.dot-crossrefs  { background: #5b6d87; }
.dot-lexicon    { background: var(--gloss); }
.dot-masoretic  { background: #7a4a8a; }
.dot-devotional { background: var(--devotional); }
.dot-archaeology { background: var(--dig); }

@media (max-width: 40rem) {
  /* No room for a gutter; the number returns inline and the marker floats
     to the right of it. */
  .verse { grid-template-columns: 1fr; gap: .2rem; }
  .verse-gutter { flex-direction: row; align-items: center; justify-content: flex-start;
                  gap: .5rem; padding-top: 0; }
  .notes-mark { flex-direction: row; gap: 3px; }
}

/* --- Rotherham's apparatus --- */

/* The Name. Rotherham prints it; he never writes LORD. */
.r-divine { color: var(--divine); font-variant: small-caps; letter-spacing: .02em; font-weight: 500; }
body[data-mark-divine="off"] .r-divine { color: inherit; font-variant: normal; letter-spacing: normal; font-weight: inherit; }

/* Words with nothing behind them in the original. Lighter, because they carry
   less authority than the words around them — which is exactly why Rotherham
   bracketed them. */
.r-supplied { color: var(--supplied); font-style: italic; }
.r-supplied .r-bracket { opacity: .5; }
body[data-mark-supplied="off"] .r-supplied { display: none; }

/* What a Hebrew name means, at the point the pun is made. */
.r-gloss {
  font-family: var(--sans); font-size: .74rem; color: var(--gloss);
  border: 1px solid color-mix(in srgb, var(--gloss) 35%, transparent);
  border-radius: 3px; padding: .05rem .35rem; margin: 0 .15rem;
  vertical-align: .12em; white-space: nowrap;
}
body[data-mark-gloss="off"] .r-gloss { display: none; }

/* Who is speaking — the Song, mostly. An editorial reading. */
.r-speaker {
  display: block; font-family: var(--sans); font-size: .62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; color: var(--ink-faint);
  margin: .9rem 0 .2rem;
}
body[data-mark-speaker="off"] .r-speaker { display: none; }

/* A liturgical direction, not part of the line. */
.r-selah {
  font-family: var(--sans); font-size: .66rem; font-style: italic;
  color: var(--ink-faint); letter-spacing: .06em; margin-left: .5rem;
}
body[data-mark-selah="off"] .r-selah { display: none; }

.r-paren { color: var(--ink-soft); }

/* A canto division in the Song. Rotherham printed asterisks; a centred
   ornament says the same thing without looking like a redaction. */
.r-divider {
  display: flex; align-items: center; gap: 1rem;
  margin: 2.2rem auto 1.8rem; max-width: 14rem; line-height: 1;
}
.r-divider::before, .r-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}
.r-divider span.glyph {
  font-family: var(--serif); font-size: 1.35rem; color: var(--accent-soft); line-height: 1;
}
body[data-mark-divider="off"] .r-divider { display: none; }

/* Legend swatch for the divider needs the glyph inline, not as a block. */
.legend-sample.r-divider { display: inline; margin: 0; }
.legend-sample.r-divider::before { content: none; }

/* Devotional word links */
.dev-word {
  color: inherit; text-decoration: none;
  background: linear-gradient(transparent 82%, color-mix(in srgb, var(--devotional) 34%, transparent) 0);
}
.dev-word:hover { background: linear-gradient(transparent 0, color-mix(in srgb, var(--devotional) 18%, transparent) 0); }

/* --- seams and markers --- */

.seam {
  display: flex; align-items: center; gap: .8rem;
  margin: 2rem 0 1.3rem;
}
.seam::before, .seam::after { content: ""; flex: 1; height: 1px; background: var(--accent-soft); }
.seam-text {
  flex: 0 1 auto; min-width: 0; max-width: 26rem; text-align: center;
  font-size: .72rem; line-height: 1.45; color: var(--ink-soft); overflow-wrap: anywhere;
}
.seam-text strong { color: var(--accent); font-weight: 600; }
@media (max-width: 34rem) {
  .seam { display: block; }
  .seam::before, .seam::after { display: none; }
  .seam-text { display: block; max-width: none; text-align: left;
               border-left: 2px solid var(--accent-soft); padding-left: .75rem; }
}

.ann-mark, .dev-mark {
  font-family: var(--sans); font-size: .62rem; font-weight: 600;
  letter-spacing: .03em; border-radius: 3px; padding: .1rem .4rem;
  margin-left: .4rem; cursor: pointer; vertical-align: .18em; white-space: nowrap;
}
/* The one marker still allowed inline. It is rare, and it says "there is a
   dispute here" — which is the site's editorial voice and should not be a
   click away. Kept quiet: no fill until hover. */
.ann-mark {
  color: var(--accent); background: none;
  border: 1px solid var(--accent-soft); font-weight: 500;
}
.ann-mark:hover { background: var(--accent); color: var(--paper); }
.ann-mark[data-status="draft"]::after { content: " draft"; font-weight: 500; opacity: .75; }
.dev-mark { color: var(--devotional); border: 1px solid color-mix(in srgb, var(--devotional) 40%, transparent);
            background: none; text-decoration: none; }
.dev-mark:hover { background: var(--devotional); color: var(--paper); }

/* ---------- commentary ---------- */

#commentary-intros { display: grid; gap: .6rem; margin: 0 0 2rem; }

.intro-card {
  display: block; width: 100%; text-align: left;
  padding: .7rem .9rem; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--paper-sunk); cursor: pointer;
}
.intro-card:hover { border-color: var(--accent-soft); background: var(--accent-wash); }
.intro-name {
  display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--accent); font-weight: 600; margin-bottom: .3rem;
}
.intro-snippet {
  display: block; font-family: var(--serif); font-size: .92rem;
  line-height: 1.5; color: var(--ink-soft);
}

/* The daily teaching video over this chapter's passage. Shaped like an
   .intro-card because it sits in the same band and is the same kind of
   thing — an offer above the text, not a mark inside it — but an <a>, and
   bordered in the accent rather than filled: one link above a chapter of
   Rotherham should not outweigh the chapter. */
#chapter-videos:not(:empty) { display: grid; gap: .5rem; margin: .6rem 0 1rem; }
.video-card {
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem .9rem; border: 1px solid var(--accent-soft); border-radius: 6px;
  background: var(--paper-sunk); color: var(--ink); text-decoration: none;
}
.video-card:hover { border-color: var(--accent); background: var(--accent-wash); }
.video-card svg { width: 1.05em; height: 1.05em; flex: none; color: var(--accent); }
.video-ref {
  font-family: var(--sans); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--accent); font-weight: 600;
}
.video-label { font-family: var(--serif); font-size: .92rem; color: var(--ink-soft); }
.video-card::after { content: "↗"; margin-left: auto; opacity: .5; font-size: .85em; }

/* From TheophilusBible — the Passage page's band of what the main site has
   for this chapter. Sits below the videos and above the text, like them an
   offer rather than a mark inside the verses. Quieter than the text: a rule
   above and below, no fill, so a chapter of Rotherham still reads first. */
#passage-companion {
  margin: .4rem 0 1.4rem; padding: .9rem 0 1rem;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
#companion-heading {
  font-family: var(--sans); font-size: .66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; color: var(--ink-faint);
  margin: 0 0 .7rem;
}
#companion-commentary:not(:empty) { display: grid; gap: .8rem; margin-bottom: 1rem; }
.tc-card {
  padding: .8rem 1rem; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--paper-raised);
}
.tc-head { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: baseline; }
.tc-ref {
  font-family: var(--sans); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--accent); font-weight: 600;
}
/* The review status is a statement about the prose below it, so it is never
   hidden or made hover-only — the same rule as an image credit. */
.tc-status {
  font-family: var(--sans); font-size: .66rem; color: var(--draft);
  border: 1px solid currentColor; border-radius: 3px; padding: 0 .35rem;
}
.tc-status.tc-reviewed { color: var(--devotional); }
.tc-title { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; margin: .35rem 0 .3rem; }
.tc-thrust { font-family: var(--serif); font-size: 1rem; line-height: 1.5; margin: 0 0 .4rem; color: var(--ink); }
.tc-confidence {
  font-family: var(--sans); font-size: .66rem; color: var(--ink-soft);
  white-space: nowrap; margin-left: .2rem;
}
.tc-moves {
  margin: .3rem 0 .5rem; padding-left: 1.2rem;
  font-family: var(--serif); font-size: .92rem; color: var(--ink-soft); line-height: 1.45;
}
.tc-move-ref { font-family: var(--sans); font-size: .7rem; color: var(--ink-faint); }
.tc-more, .tc-tool { color: var(--accent); text-decoration: none; }
.tc-more { font-family: var(--sans); font-size: .8rem; font-weight: 500; }
.tc-more::after, .tc-tool-label::after { content: " ↗"; opacity: .55; font-size: .85em; }
.tc-more:hover { text-decoration: underline; }

#companion-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem 1.2rem; }
.tc-tools-head {
  font-family: var(--sans); font-size: .64rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); margin: 0 0 .35rem;
}
.tc-tool {
  display: flex; flex-direction: column; padding: .35rem .6rem; margin: 0 -.6rem;
  border-radius: 5px;
}
.tc-tool:hover { background: var(--accent-wash); }
.tc-tool-label { font-family: var(--sans); font-size: .85rem; font-weight: 500; }
.tc-tool-note { font-family: var(--serif); font-size: .88rem; color: var(--ink-soft); }
.tc-tools-fine { font-family: var(--sans); font-size: .72rem; color: var(--ink-faint); margin: .35rem 0 0; }

.comm-mark {
  font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .03em;
  border-radius: 3px; padding: .1rem .4rem; margin-left: .4rem; cursor: pointer;
  vertical-align: .18em; white-space: nowrap;
  color: var(--ink-soft); border: 1px solid var(--rule); background: var(--paper-sunk);
}
.comm-mark:hover { border-color: var(--accent-soft); color: var(--accent); background: var(--accent-wash); }

.xref-mark {
  font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .03em;
  border-radius: 3px; padding: .1rem .4rem; margin-left: .4rem; cursor: pointer;
  vertical-align: .18em; white-space: nowrap;
  color: #5b6d87; border: 1px solid #b6c2d4; background: none;
}
.xref-mark:hover { background: #5b6d87; color: var(--paper); border-color: #5b6d87; }
@media (prefers-color-scheme: dark) {
  .xref-mark { color: #9db0cc; border-color: #46536a; }
  .xref-mark:hover { background: #46536a; color: var(--ink); }
}

.xref-entry { margin: 0 0 1.3rem; }
.xref-entry h4 { font-family: var(--serif); font-style: italic; margin: 0 0 .4rem; font-size: 1rem; }
.xref-list { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 !important; }
.xref-link {
  font-size: .74rem; padding: .12rem .45rem; border-radius: 3px;
  border: 1px solid var(--rule); background: var(--paper-raised); color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.xref-link:hover { border-color: var(--accent-soft); color: var(--accent); background: var(--accent-wash); }

#figure-filter {
  width: 100%; padding: .45rem .7rem; margin: .6rem 0 .9rem; font: inherit; font-size: .88rem;
  border: 1px solid var(--rule); border-radius: 5px; background: var(--paper-raised); color: var(--ink);
}
.figure-caveat {
  font-size: .72rem !important; color: var(--ink-faint); line-height: 1.55;
  border-left: 2px solid var(--rule); padding-left: .7rem; margin: 0 0 1.3rem !important;
}
.figure { margin: 0 0 1.1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--rule-soft); }
.figure:last-child { border-bottom: 0; }
.figure h4 { font-family: var(--serif); font-size: 1.02rem; margin: 0 0 .1rem; }
.figure-gloss { font-size: .8rem !important; color: var(--accent); margin: 0 0 .35rem !important; font-style: italic; }
.figure p { font-size: .86rem !important; margin: 0 !important; }
.ocr-flag {
  font-size: .6rem; color: var(--draft); border: 1px solid var(--draft);
  border-radius: 50%; padding: 0 .25rem; margin-left: .35rem; vertical-align: .3em;
}

.witness-book { margin: 0 0 1.5rem; }
.witness-book h4 { font-family: var(--serif); font-size: 1rem; margin: 0 0 .1rem; }
.witness-sub { font-size: .74rem !important; color: var(--ink-faint); font-style: italic; margin: 0 0 .6rem !important; }
.witness-sign { margin: 0 0 .8rem; font-size: .86rem; color: var(--ink-soft); }
.witness-sign strong { color: var(--accent); font-variant: small-caps; letter-spacing: .03em; }
.witness-sign ul { margin: .25rem 0 0 !important; padding-left: 1.1rem; font-size: .8rem !important; }

/* K&D comments on spans. Saying which span keeps the panel from implying a
   note written about the single verse in view. */
.comm-range {
  font-size: .72rem !important; color: var(--accent); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; margin: 0 0 .4rem !important;
}

.comm-entry { margin: 0 0 2.2rem; }
.comm-entry:last-child { margin-bottom: 0; }
.comm-entry p { font-size: .92rem; line-height: 1.7; }
.comm-entry em { font-style: italic; color: var(--ink); }

/* Attribution. CC-BY makes this mandatory, so it is styled to be readable
   rather than tucked away — it is a licence term, not a footnote. */
.comm-credit {
  font-size: .7rem !important; color: var(--ink-faint); line-height: 1.5;
  border-left: 2px solid var(--rule); padding-left: .7rem;
  margin: 0 0 1rem !important;
}

#foot-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem;
            padding-top: 1.5rem; border-top: 1px solid var(--rule); }

/* ---------- the notes / search pane ---------- */

#aside {
  position: sticky; top: 5rem;
  max-height: calc(100vh - 7rem);
  display: flex; flex-direction: column;
  background: var(--paper-sunk);
  border: 1px solid var(--rule); border-radius: 8px;
  overflow: hidden;
}
#aside[data-mode="empty"] .aside-empty { display: block; }

#aside-head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .6rem .9rem; border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
#aside-title {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-faint); font-weight: 600;
}
#aside-close { border: 0; background: none; font-size: 1.2rem; line-height: 1;
               color: var(--ink-faint); padding: 0 .3rem; }
#aside[data-mode="empty"] #aside-close { visibility: hidden; }

#aside-body { overflow-y: auto; padding: 1.1rem 1.1rem 2rem; flex: 1; }
#aside-body h2 { font-family: var(--serif); font-size: 1.15rem; margin: 0 0 .5rem; line-height: 1.3; font-weight: 600; }
#aside-body h3 { font-family: var(--serif); font-size: .92rem; margin: 1.5rem 0 .5rem;
                 color: var(--accent); font-weight: 600; }
#aside-body h4 { font-size: .85rem; margin: 0 0 .3rem; }
#aside-body p  { font-size: .86rem; line-height: 1.62; margin: 0 0 .7rem; }
#aside-body ul { font-size: .82rem; line-height: 1.6; padding-left: 1.1rem; margin: 0 0 .7rem; }
#aside-body a  { color: var(--accent); }
#aside-body blockquote { font-size: .95rem; }
.aside-empty { font-size: .82rem !important; color: var(--ink-faint); line-height: 1.65; }

/* ---------- the library ---------- */

.lib-list { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.lib-list li { padding: .5rem 0; border-bottom: 1px solid var(--rule-soft); font-size: .85rem; }
.lib-list li:last-child { border-bottom: 0; }
.lib-meta { display: block; font-size: .72rem; color: var(--ink-faint); margin-top: .15rem; }
.lib-licence { color: var(--gloss); }
.lib-link {
  border: 0; background: none; padding: 0; font: inherit; font-size: .85rem;
  color: var(--accent); cursor: pointer; text-align: left;
}
.lib-link:hover { text-decoration: underline; }

/* ---------- search results ---------- */

#search-filters { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1rem; }
.search-chip {
  font-size: .66rem; padding: .18rem .5rem; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--paper-raised); color: var(--ink-soft);
  cursor: pointer;
}
.search-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.search-count { font-size: .74rem; color: var(--ink-faint); margin: 0 0 .8rem !important; }

.hit {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--rule-soft); background: none;
  padding: .65rem .2rem; border-radius: 3px;
}
.hit:hover { background: var(--accent-wash); }
.hit-ref { display: block; font-size: .7rem; font-weight: 600; color: var(--accent);
           letter-spacing: .02em; margin-bottom: .15rem; }
.hit-kind { color: var(--ink-faint); font-weight: 500; margin-left: .4rem; text-transform: uppercase;
            letter-spacing: .08em; font-size: .58rem; }
.hit-snippet { display: block; font-family: var(--serif); font-size: .86rem; line-height: 1.5;
               color: var(--ink-soft); }
.hit-snippet mark { background: color-mix(in srgb, var(--accent) 22%, transparent);
                    color: inherit; border-radius: 2px; padding: 0 .1em; }

/* ---------- panel content (shared by every aside mode) ---------- */
/* ---------- drawer ---------- */

  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(36rem, 100vw);
  background: var(--paper-sunk);
  border-left: 1px solid var(--rule);
  padding: 3rem 2.25rem 4rem;
  overflow-y: auto; z-index: 40;
  box-shadow: -12px 0 48px rgba(0,0,0,.14);
}
  position: absolute; top: .8rem; right: 1rem;
  font-size: 1.5rem; line-height: 1; padding: .1rem .5rem;
  border: 0; background: none; color: var(--ink-faint);
}
.panel-section { margin: 0 0 2rem; }
.panel-section:last-child { margin-bottom: 0; }
.panel-item { margin: 0 0 1rem; padding: 0 0 .9rem; border-bottom: 1px solid var(--rule-soft); }
.panel-item:last-of-type { border-bottom: 0; }
.panel-item h4 { margin: 0 0 .3rem; font-family: var(--serif); font-size: 1rem; }
.panel-link { display: block; text-decoration: none; color: inherit; }
.panel-link:hover h4 { color: var(--accent); }
.panel-credit {
  font-size: .7rem !important; color: var(--ink-faint); line-height: 1.55;
  border-left: 2px solid var(--rule); padding-left: .7rem; margin: .6rem 0 0 !important;
}


.aside-kicker { font-size: .64rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-faint); margin: 0 0 .5rem; }
.disciplines { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1.1rem !important; }
.disc {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
  padding: .12rem .45rem; border-radius: 3px; border: 1px solid currentColor; opacity: .85;
}
.disc-biblical   { color: #2e6da4; }
.disc-systematic { color: #7a4a8a; }
.disc-historical { color: #7a7061; }
.disc-pastoral   { color: #2e8a7a; }
.disc-practical  { color: #c0392b; }

.draft-banner { font-size: .76rem; color: var(--draft); border: 1px solid var(--draft);
                border-radius: 5px; padding: .6rem .8rem; margin: 0 0 1.4rem; line-height: 1.5; }
.hebrew { font-size: 1.7rem; line-height: 1.9; direction: rtl; text-align: right; margin: .6rem 0 .2rem; }
.translit { font-style: italic; color: var(--ink-soft); font-size: .9rem; margin: 0 0 .9rem; text-align: right; }
.position { border-left: 3px solid var(--accent-soft); padding-left: 1rem; margin: 0 0 1.6rem; }
.position-held { font-size: .76rem; color: var(--ink-faint); margin: .25rem 0 .7rem; line-height: 1.55; }
blockquote { margin: .6rem 0; padding-left: 1rem; border-left: 2px solid var(--rule);
             font-family: var(--serif); font-size: 1.05rem; color: var(--ink-soft); }
/* ---------- colophon ---------- */

#colophon {
  border-top: 1px solid var(--rule); padding: 1.75rem;
  max-width: 74rem; margin: 0 auto;
  font-size: .72rem; color: var(--ink-faint); line-height: 1.65;
}
#colophon p { margin: 0; }
#colophon p + p { margin-top: .5rem; }
#colophon a { color: var(--ink-soft); }


/* ---------- material evidence ----------
 * The card is a thumbnail plus a line, because the object is the point: a
 * reader scanning a chapter should be able to tell a prism from a tunnel
 * without opening anything.
 *
 * .dig-credit is not styling for its own sake. CC-BY and CC-BY-SA images are
 * displayable here only because the photographer is named at the image, so
 * this rule is load-bearing for the licence, not decoration. It must stay
 * legible: no display:none, no hover-only reveal. */
.dig-card {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  width: 100%;
  text-align: left;
}
.dig-thumb {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--rule);
  flex: none;
  background: var(--paper-sunk);
}
.dig-body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.dig-title { font-weight: 600; }

.dig-certainty { font-variant: small-caps; letter-spacing: .02em; }
.dig-contested, .dig-disputed { color: var(--draft); font-weight: 600; }

.dig-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .15rem .8rem;
  margin: .6rem 0 1rem;
  font-size: .88rem;
}
.dig-facts dt { color: var(--ink-faint); font-variant: small-caps; }
.dig-facts dd { margin: 0; }

.dig-figure { margin: 1rem 0; }
.dig-figure img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  border: 1px solid var(--rule);
  background: var(--paper-sunk);
}
.dig-figure figcaption {
  font-size: .82rem;
  color: var(--ink-soft);
  margin-top: .35rem;
  line-height: 1.45;
}
.dig-credit { display: block; color: var(--ink-faint); font-size: .78rem; }
.dig-credit a { color: inherit; }

.dig-quote {
  border-left: 3px solid var(--dig);
  padding-left: .9rem;
  margin: .8rem 0 .3rem;
  font-style: italic;
}

/* Agreement and disagreement are given the same visual weight deliberately.
 * Making one list louder than the other would be an argument, and this layer
 * is not here to make one. */
.dig-agree, .dig-differ { margin: .4rem 0 .9rem; padding-left: 1.1rem; }
.dig-agree  li::marker { color: var(--gloss); }
.dig-differ li::marker { color: var(--accent); }

/* An image that could not be fetched still shows its caption and credit —
 * the credit especially, since it is the licence obligation and not a
 * garnish on the picture. */
.dig-figure-textonly figcaption { border-left: 2px solid var(--rule); padding-left: .6rem; }


/* ---------- the plate ----------
 * A picture set into the measure at the verse where an anchor opens, the
 * way a plate sits in a printed book. This exists because the layer's first
 * version put every image behind four clicks: open the verse panel, scroll
 * to the section, click the card, scroll again. A reader landing on the
 * chapter now sees the object. */
.verse-plate {
  /* Floated inside .verse-body, never inside .verse-text — float does not
     apply to a grid item, and .verse is the grid. */
  float: right;
  width: 9.5rem;
  margin: .15rem 0 .6rem 1.1rem;
  cursor: pointer;
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  background: var(--paper-sunk);
  transition: border-color .12s ease;
}
.verse-plate:hover, .verse-plate:focus-visible { border-color: var(--accent-soft); outline: none; }
.verse-plate:focus-visible { box-shadow: 0 0 0 2px var(--accent-soft); }
.verse-plate img { display: block; width: 100%; height: auto; }
.verse-plate figcaption {
  font-family: var(--sans);
  font-size: .68rem;
  line-height: 1.3;
  color: var(--ink-soft);
  padding: .3rem .4rem .35rem;
  border-top: 1px solid var(--rule-soft);
}
.plate-more { display: block; color: var(--ink-faint); font-size: .64rem; margin-top: .1rem; }

/* The verses an anchor merely spans. A quiet rule, not another thumbnail:
   Sennacherib's anchor covers 25 verses, and repeating the plate down all of
   them would make the object present everywhere and noticeable nowhere. */
.verse-spans-dig .verse-gutter { border-left: 2px solid var(--dig); margin-left: -2px; opacity: .3; }

@media (max-width: 60rem) {
  /* No room to float at this width; the plate becomes a band above the verse. */
  .verse-plate { float: none; width: 100%; max-width: 16rem; margin: .4rem 0 .7rem; }
}

/* ---------- journeys ----------
 * The layer answers "where am I in this trip", so the neighbours and the
 * stage count carry the weight, not decoration. */
.dot-journeys { background: var(--journey); }

.dig-uncertain {
  font-family: var(--sans); font-size: .68rem; font-variant: small-caps;
  letter-spacing: .03em; color: var(--draft); white-space: nowrap;
  margin-left: .4rem;
}
.journey-neighbours {
  display: flex; justify-content: space-between; gap: .8rem;
  font-family: var(--sans); font-size: .7rem; color: var(--ink-faint);
  margin-top: .3rem; border-top: 1px dotted var(--rule); padding-top: .3rem;
}
.journey-list { margin: .5rem 0 1rem; padding-left: 1.4rem; }
.journey-stage { margin-bottom: .55rem; line-height: 1.45; }
.journey-place { font-weight: 600; }
.journey-modern {
  display: block; font-family: var(--sans); font-size: .74rem; color: var(--ink-faint);
}
.journey-note { display: block; font-size: .82rem; color: var(--ink-soft); }
/* Uncertain stages are marked, not hidden and not softened away: on the
   exodus itinerary twelve of the twelve stages are proposals, and a list
   that looked uniformly confident would be the map problem in list form. */
.journey-uncertain .journey-place { border-bottom: 1px dashed var(--draft); }
.journey-dispute {
  border-left: 3px solid var(--draft); padding-left: .9rem;
  background: var(--paper-sunk); padding-top: .5rem; padding-bottom: .5rem;
  border-radius: 0 3px 3px 0;
}

/* ---------- visual dictionary ----------
 * The marker sits under the word rather than around it: a verse with three
 * marked words should still read as a verse. A dotted underline is the
 * lightest thing that survives both themes. */
.vocab-word {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  border-bottom: 1px dotted var(--vocab);
  cursor: pointer;
}
.vocab-word:hover, .vocab-word:focus-visible {
  border-bottom-style: solid; background: var(--vocab-wash); outline: none;
}
.vocab-original { font-family: var(--serif); font-size: .95rem; color: var(--ink-soft); }
.vocab-headword { margin: .1rem 0 .8rem; }
.vocab-words { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0 .5rem; }
.vocab-chip {
  font-family: var(--sans); font-size: .72rem; padding: .1rem .45rem;
  border: 1px solid var(--rule); border-radius: 2px; color: var(--ink-soft);
}
/* The caveat is not small print. A dotted underline looks like a fact, and
   this layer's matching is lexical, so the limit is stated where the reader
   is looking at the claim. */
.vocab-caveat { font-size: .82rem; color: var(--ink-soft); }