/* ════════════════════════════════════════════════════════════════════
   CODEX PROTOTYPES (proto/codex branch; nothing here is live)
   One stylesheet, switched by <html data-codex="…">:
     page    the vellum leaf: rubrics, illuminated initials, running head, catchwords
     spread   (with page) the open book on wide screens: two equal pages, commentary facing the text
     notebook (with page) a ruled notebook beside the book: this passage's commentary + words you tapped
     scene   the scene backdrop: a fixed painting behind the page, changing per chapter
     leaves  (with page + scene) each chapter is its own leaf lying on the painting
     cards   (with page + scene) Eric's pick: the codex dress on separate pages, one per
             passage, lying on the painting the way the Scene design's cards do
   The text itself always sits on a solid page. Art only ever shows in the margins and
   in the gap between chapters.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --cx-vellum:   #efe3c8;
  --cx-ink:      #1c1308;
  --cx-ink2:     #4a3a22;
  --cx-rubric:   #a22b17;      /* vermilion: chapter titles, section numbers, pilcrows */
  --cx-lapis:    #1f3a78;      /* ground of the illuminated initial */
  --cx-gold:     #c99a2e;
  --cx-gold-hi:  #f4d98a;
  --cx-desk:     #231a12;      /* what the book lies on */
  --cx-tex:      url('/codex/vellum.webp');
  --cx-head-h:   34px;
}
body.dark {
  --cx-vellum:   #2a2116;
  --cx-ink:      #efe5cc;
  --cx-ink2:     #c9b78f;
  --cx-rubric:   #e58a63;
  --cx-lapis:    #24427f;
  --cx-desk:     #0f0b07;
}

/* ───────────────────────── A · THE PAGE ───────────────────────── */

/* the desk: the whole window behind the book is dark wood-brown, like the shelf front door */
html[data-codex~="page"] body {
  background: var(--cx-desk);
  background-image: radial-gradient(ellipse at 50% 30%, rgba(120,80,40,0.22), transparent 70%);
}
/* the title page sits on the leaf too */
html[data-codex~="page"] .title-page {
  background: var(--cx-vellum) var(--cx-tex) 0 0 / 400px;
  color: var(--cx-ink);
  max-width: 880px; margin: 14px auto 0; border-radius: 3px 3px 0 0;
  box-shadow: 0 0 0 1px rgba(80,55,20,0.25), 0 18px 50px rgba(0,0,0,0.55);
}
body.dark .title-page { background-blend-mode: multiply; }

/* the leaf itself: one continuous page instead of a stack of cards */
html[data-codex~="page"]:not([data-codex~="leaves"]):not([data-codex~="cards"]) main {
  background: var(--cx-vellum) var(--cx-tex) 0 0 / 400px;
  box-shadow: 0 0 0 1px rgba(80,55,20,0.25), 0 18px 50px rgba(0,0,0,0.55),
              inset 0 0 90px rgba(120,80,30,0.16);
  border-radius: 0 0 3px 3px;
  padding-bottom: 120px;
}
body.dark main, body.dark .page-block, body.dark .chapter-divider, body.dark .section-divider,
body.dark .art-figure { background-blend-mode: multiply; }

html[data-codex~="page"] .page-block {
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
}
html[data-codex~="page"] .page-block::before { display: none; }

/* real margins on a wide screen: a codex page is mostly margin */
@media (min-width: 900px) {
  html[data-codex~="page"] main { padding-left: 64px; padding-right: 64px; }
  html[data-codex~="page"] .page-block { padding-left: 8px; padding-right: 8px; }
}

/* ink: the English reads in full black ink, not the muted grey-brown */
html[data-codex~="page"] .translation-text { color: var(--cx-ink); }

/* the passage label becomes a rubric: red section number, then the title in italic ink,
   lowercase reading serif (no Cinzel capitals) */
html[data-codex~="page"] .passage-label {
  font-family: 'Vollkorn', 'Noto Serif', serif; text-transform: none; letter-spacing: 0;
  font-size: 0.98rem; color: var(--cx-ink2); padding: 0 12px;
}
html[data-codex~="page"] .passage-label-text { font-style: italic; }
.cx-lab-new { display: none; }
html[data-codex~="page"] .cx-lab-orig { display: none; }
html[data-codex~="page"] .cx-lab-new { display: inline; }
html[data-codex~="page"] .cx-lab-new b {
  font-style: normal; font-weight: 600; color: var(--cx-rubric); margin-right: 0.45em;
}
html[data-codex~="page"] .passage-ornament { display: none; }

/* section breaks: a red or blue paragraphus, the way scribes marked them */
html[data-codex~="page"] .section-divider-line { display: none; }
html[data-codex~="page"] .section-divider::after {
  content: '¶'; display: block; text-align: center; font-family: 'Vollkorn', serif;
  font-size: 1.25rem; line-height: 1; padding: 6px 0 10px; color: var(--cx-rubric); opacity: 0.85;
}
html[data-codex~="page"] .section-divider.cx-blue::after { color: var(--cx-lapis); }
body.dark .section-divider.cx-blue::after { color: #8fa6e0; }

/* chapter openings: a rubricated title, lowercase serif, red */
html[data-codex~="page"] .chapter-divider { margin: 34px auto 8px; }
html[data-codex~="page"] .chapter-divider-orn { color: var(--cx-gold); opacity: 0.8; }
html[data-codex~="page"] .chapter-divider-title {
  font-family: 'IM Fell English', 'Vollkorn', serif; font-weight: 400; letter-spacing: 0.01em;
  font-size: 2rem; color: var(--cx-rubric); text-transform: none;
}
@media (max-width: 640px) { html[data-codex~="page"] .chapter-divider-title { font-size: 1.6rem; } }

/* the illuminated initial: the first English letter of each chapter, gold on lapis
   (alternating with gold on red), set in the English only so the Greek word and its gloss
   are never pulled apart */
html[data-codex~="page"] .cx-incipit .translation-text::first-letter,
html[data-codex~="page"] .cx-incipit .english-flow::first-letter {
  float: left;
  font-family: 'IM Fell English', 'Vollkorn', serif; font-style: normal;
  font-size: 3.5em; line-height: 0.82;
  padding: 0.14em 0.15em 0.06em; margin: 0.08em 0.16em 0 0;
  color: var(--cx-gold-hi);
  background: var(--cx-lapis);
  background-image: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.18), transparent 60%);
  border: 2px solid var(--cx-gold);
  border-radius: 2px;
}
html[data-codex~="page"] .cx-incipit.cx-red .translation-text::first-letter,
html[data-codex~="page"] .cx-incipit.cx-red .english-flow::first-letter { background-color: #8e2414; }
/* …and the first Greek word of the chapter is rubricated (same size, red) */
html[data-codex~="page"] .cx-incipit .interlinear .word-unit:first-child .w-greek { color: var(--cx-rubric); }

/* the running head: book left, chapter right, folio (section number) in red. Fixed, not
   sticky (body's overflow-x makes sticky unreliable), so it never moves the text. */
#cx-head { display: none; }
html[data-codex~="page"] #cx-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  position: fixed; z-index: 40; left: 50%; transform: translateX(-50%);
  bottom: 0; width: min(880px, 100vw); height: var(--cx-head-h);
  padding: 0 24px; pointer-events: none;
  font-family: 'Vollkorn', serif; font-size: 15px; color: var(--cx-ink2);
  background: var(--cx-vellum) var(--cx-tex) 0 0 / 400px;
  border-top: 1px solid rgba(120,80,30,0.28); align-items: center;
}
body.dark #cx-head { background-blend-mode: multiply; }
#cx-head .cx-h-book { font-style: italic; }
#cx-head .cx-h-ch { font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cx-head .cx-h-folio { color: var(--cx-rubric); font-weight: 600; font-variant-numeric: oldstyle-nums; }
body.dock #cx-head { left: calc(50% - 160px); }
@media (max-width: 899px) {
  /* phone: the bottom bar is the reader's own; the head sits just above the home indicator
     only when the phone bar is hidden, so keep it out entirely and let the title carry it */
  html[data-codex~="page"] #cx-head { display: none; }
}

/* catchwords: the first word of the next section, bottom right, as scribes wrote them so
   the binder kept the leaves in order. Here it says "the story goes on" and what comes next. */
html[data-codex~="page"] .page-block[data-catch]::after {
  content: attr(data-catch);
  display: block; text-align: right; padding: 4px 12px 0;
  font-family: 'Noto Serif', serif; font-style: italic; font-size: 0.9rem;
  color: var(--cx-ink2); opacity: 0.7;
}
body.stage-2 .page-block[data-catch]::after, body.stage-3 .page-block[data-catch]::after { display: none; }

/* where you left off: a manicule (☞), the reader's pointing hand from the margins of old books */
html[data-codex~="page"] .page-block.cx-here .passage-label::before {
  content: '☞'; color: var(--cx-rubric); font-size: 1.5rem; line-height: 1;
  position: absolute; left: -46px; top: 18px;
}
html[data-codex~="page"] .page-block.cx-here .passage-label-text::after {
  content: '  · you stopped here'; font-style: italic; color: var(--cx-rubric); white-space: pre;
}
@media (max-width: 899px) {
  html[data-codex~="page"] .page-block.cx-here .passage-label::before { position: static; margin-right: 6px; font-size: 1.2rem; }
}

/* art on the page: plates get a thin ruled frame, like a miniature */
html[data-codex~="page"] .art-plate .art-plate-btn,
html[data-codex~="page"] .art-opener .art-plate-btn {
  background: transparent; box-shadow: none;
  border: 1px solid rgba(160,110,30,0.55); outline: 4px double rgba(160,110,30,0.35); outline-offset: 3px;
  padding: 6px; border-radius: 0;
}
html[data-codex~="page"] .art-caption { color: var(--cx-ink2); font-family: 'Vollkorn', serif; font-style: italic; }

/* speaker names: a rubric in lowercase italic, not Cinzel capitals */
html[data-codex~="page"] .speaker-label {
  font-family: 'Vollkorn', serif; font-style: italic; text-transform: none; letter-spacing: 0;
  font-size: 1rem; color: var(--cx-rubric);
}
/* passage buttons: lowercase, no Cinzel */
html[data-codex~="page"] .passage-label .share-btn { font-family: 'Vollkorn', serif; text-transform: none; letter-spacing: 0; font-size: 0.85rem; background: transparent; }
/* the commentary opener: lowercase, quiet */
html[data-codex~="page"] .c-open { font-family: 'Vollkorn', serif; letter-spacing: 0.02em; font-size: 1rem; text-transform: none; }
html[data-codex~="page"] .commentary { background: rgba(160,110,30,0.08); }
html[data-codex~="page"] .commentary-label { font-family: 'Vollkorn', serif; font-style: italic; text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: var(--cx-rubric); }

/* the word panel looks like a loose leaf laid on the book */
html[data-codex~="page"] .panel {
  background: var(--cx-vellum) var(--cx-tex) 0 0 / 400px;
  border-left: 1px solid rgba(80,55,20,0.4);
  box-shadow: -14px 0 40px rgba(0,0,0,0.35);
}
body.dark .panel { background-blend-mode: multiply; }

/* ───────────────────────── B · THE OPEN BOOK (two equal pages) ───────────────────────── */
/* On a wide screen the book lies open: two pages of the same width, the sewn spine exactly
   in the middle. The text is on the left page; its commentary faces it on the right page,
   always open, beside its own passage. Under 1200px it folds back to the single page. */
@media (min-width: 1200px) {
  html[data-codex~="spread"] main,
  html[data-codex~="spread"] .title-page { max-width: 1280px; }
  html[data-codex~="spread"] main { padding-left: 56px; padding-right: 56px; }
  html[data-codex~="spread"]:not([data-codex~="leaves"]):not([data-codex~="cards"]) main {
    background-image:
      linear-gradient(to right, transparent calc(50% - 34px), rgba(50,25,8,0.10) calc(50% - 14px), rgba(50,25,8,0.42) 50%,
                      rgba(50,25,8,0.10) calc(50% + 14px), transparent calc(50% + 34px)),
      var(--cx-tex);
    background-size: auto, 400px;
  }
  html[data-codex~="spread"] .page-block {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 112px;
  }
  html[data-codex~="spread"] .page-block > * { grid-column: 1; }
  html[data-codex~="spread"] .page-block .commentary {
    display: block; grid-column: 2; grid-row: 1 / span 40; align-self: start;
    margin: 4px 0 0; padding: 0; background: none; border: 0; border-radius: 0;
    font-size: 1rem; line-height: 1.75; color: var(--cx-ink);
  }
  html[data-codex~="spread"] .page-block .commentary .c-para:nth-child(2) { display: none; }
  html[data-codex~="spread"] .page-block .commentary .c-para:nth-child(3)::before { content: '¶ '; color: var(--cx-rubric); font-weight: 600; }
  html[data-codex~="spread"] .page-block .english-flow,
  html[data-codex~="spread"] .page-block .translation-text { max-width: none; }
  html[data-codex~="spread"] .c-open { display: none; }
  html[data-codex~="spread"] #cx-head { width: min(1280px, 100vw); }
  html[data-codex~="spread"] main > .chapter-divider,
  html[data-codex~="spread"] main > .section-divider,
  html[data-codex~="spread"] main > .art-figure { margin-left: 0; margin-right: calc(50% + 28px); max-width: none; }
}

/* ───────────────────────── B2 · THE BOOK AND A NOTEBOOK ───────────────────────── */
/* The book stays one page; beside it on the desk lies a ruled notebook. It shows the
   commentary for the passage you are reading, and every word you tap gets written into it. */
#cx-notebook { display: none; }
@media (min-width: 1200px) {
  html[data-codex~="notebook"] main,
  html[data-codex~="notebook"] .title-page { margin-left: max(32px, calc(50vw - 640px + 32px)); margin-right: auto; max-width: 800px; }
  html[data-codex~="notebook"] #cx-head { left: max(32px, calc(50vw - 640px + 32px)); transform: none; width: 800px; }
  html[data-codex~="notebook"] .reader-toolbar { left: calc(max(32px, calc(50vw - 640px + 32px)) + 400px); }
  html[data-codex~="notebook"] #cx-notebook {
    display: flex; flex-direction: column; gap: 1.8rem;
    position: fixed; z-index: 30; top: 72px; bottom: 26px;
    right: max(28px, calc(50vw - 640px + 28px)); width: min(380px, calc(100vw - 800px - 120px));
    padding: 1.8rem 22px 1.8rem 58px; overflow-y: auto; overscroll-behavior: contain;
    color: #1d2433; font-family: 'Noto Serif', Georgia, serif; font-size: 0.98rem; line-height: 1.8rem;
    /* ruled paper: pale blue lines, a red margin rule, a stitched edge */
    background:
      radial-gradient(circle at 18px 50%, #3a2a1c 0 4px, transparent 5px) 0 0 / 36px 28px repeat-y,
      linear-gradient(to right, transparent 46px, rgba(200,60,50,0.55) 46px, rgba(200,60,50,0.55) 47px, transparent 47px),
      repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.8rem - 1px), rgba(90,130,190,0.28) calc(1.8rem - 1px), rgba(90,130,190,0.28) 1.8rem),
      #fbf7ec;
    background-attachment: local;
    border-radius: 3px 8px 8px 3px;
    box-shadow: 0 0 0 1px rgba(60,40,20,0.25), 0 18px 40px rgba(0,0,0,0.55);
    transform: rotate(0.7deg);
  }
  body.dark #cx-notebook { background-color: #e9e1cc; }
  html[data-codex~="notebook"] .c-open { display: none; }
}
#cx-notebook * { line-height: 1.8rem; }
#cx-notebook .cx-nb-head { font-family: 'IM Fell English', 'Vollkorn', serif; font-size: 1.6rem; line-height: 3.6rem; margin-top: -1.8rem; color: #6a2416; }
#cx-notebook .cx-nb-k { font-family: 'Vollkorn', serif; font-style: italic; color: #6a2416; font-size: 1rem; }
#cx-notebook .cx-nb-where b { color: #a22b17; margin-right: 0.35em; }
#cx-notebook .cx-nb-where { font-style: italic; }
#cx-notebook .cx-nb-note { margin: 0; }
#cx-notebook .cx-nb-note em, #cx-notebook .cx-nb-note i { color: #33405a; }
#cx-notebook .cx-nb-words { margin: 0 0 0 1.1rem; padding: 0; }
#cx-notebook .cx-nb-words li { cursor: pointer; }
#cx-notebook .cx-nb-words li .gk { font-size: 1.15rem; color: #1d2433; margin-right: 0.3em; }
#cx-notebook .cx-nb-words li:hover { color: #a22b17; }
#cx-notebook .cx-nb-empty { list-style: none; margin-left: -1.1rem; font-style: italic; color: #59617a; cursor: default; }

/* ───────────────────────── C · THE SCENE BACKDROP ───────────────────────── */
/* A fixed layer behind everything (iPhone Safari has no background-attachment: fixed).
   Two image layers crossfade when the reader crosses into a new chapter. */
#cx-scene { display: none; }
html[data-codex~="scene"] #cx-scene {
  display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: #120d08;
}
html[data-codex~="scene"].cx-plain #cx-scene { display: none; }
#cx-scene .cx-layer {
  position: absolute; inset: -2%; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s ease;
}
#cx-scene .cx-layer.on { opacity: 1; }
/* a calm scrim: the painting reads as the room, not as a poster */
#cx-scene::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(18,12,6,0.18), rgba(18,12,6,0.62) 85%);
}
body.dark #cx-scene::after { background: radial-gradient(ellipse at 50% 45%, rgba(8,5,2,0.38), rgba(8,5,2,0.78) 85%); }
@media (prefers-reduced-motion: reduce) { #cx-scene .cx-layer { transition: none; } }

html[data-codex~="scene"]:not(.cx-plain) body { background: transparent; background-image: none; }
/* the title page needs its own solid ground once the body is transparent */
html[data-codex~="scene"]:not([data-codex~="page"]):not(.cx-plain) .title-page {
  background: var(--page-bg); border-radius: 6px; margin-top: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.45);
}
/* cards stay fully solid: nothing of the painting ever shows behind words */
html[data-codex~="scene"]:not([data-codex~="page"]) .page-block { box-shadow: 0 6px 24px rgba(0,0,0,0.4); }
html[data-codex~="scene"]:not([data-codex~="page"]) .section-divider-line { background: rgba(255,240,210,0.5); }

/* the chapter opening becomes a window onto the scene: the painting you are now in */
html[data-codex~="scene"]:not(.cx-plain) .chapter-divider.cx-window {
  position: relative; min-height: 52vh; margin: 28px auto 18px;
  display: flex; flex-direction: column; justify-content: flex-end; cursor: zoom-in;
}
html[data-codex~="scene"]:not(.cx-plain) .chapter-divider.cx-window .chapter-divider-orn { display: none; }
html[data-codex~="scene"]:not([data-codex~="page"]):not(.cx-plain) .chapter-divider.cx-window .chapter-divider-title {
  align-self: center; background: var(--page-bg); color: var(--text);
  padding: 12px 26px; border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,0.45);
  font-family: 'Vollkorn', 'Noto Serif', serif; letter-spacing: 0.01em; font-weight: 600; text-transform: none;
}
.cx-credit { display: none; }
html[data-codex~="scene"]:not(.cx-plain) .cx-window .cx-credit {
  display: block; align-self: center; margin-top: 8px; max-width: 92%;
  font-family: 'Vollkorn', serif; font-style: italic; font-size: 0.85rem; line-height: 1.4;
  color: #f3e7cc; text-shadow: 0 1px 4px rgba(0,0,0,0.9); text-align: center;
}
/* the painting now IS the chapter opening, so its inline copy steps aside */
html[data-codex~="scene"]:not(.cx-plain) .art-figure.cx-is-scene { display: none; }
/* story maps and other plates stay, on a solid mat */
html[data-codex~="scene"]:not([data-codex~="page"]):not(.cx-plain) .art-figure {
  background: var(--page-bg); padding: 14px; border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,0.4);
}

/* "plain page" under each scene's credit (the settings palette has the full switch) */
.cx-plain-link {
  display: inline-block; margin-left: 10px; padding: 6px 10px; min-height: 32px;
  font: italic 0.85rem 'Vollkorn', serif; color: #f3e7cc; cursor: pointer;
  background: rgba(20,14,8,0.55); border: 1px solid rgba(240,215,160,0.45); border-radius: 999px;
  text-shadow: none; white-space: nowrap;
}

/* ───────────────────────── D · LEAVES ON THE SCENE ───────────────────────── */
/* The codex page and the scene together: each chapter is its own vellum leaf lying on the
   painting, and between chapters the painting shows through. The page is never transparent
   behind words; only the gap between leaves is. */
html[data-codex~="leaves"] main { background: transparent; box-shadow: none; }
html[data-codex~="leaves"] .page-block,
html[data-codex~="leaves"] .section-divider,
html[data-codex~="leaves"] .art-figure,
html[data-codex~="leaves"] .chapter-divider {
  background: var(--cx-vellum) var(--cx-tex) 0 0 / 400px;
  margin-top: 0; margin-bottom: 0;
}
html[data-codex~="leaves"] .art-figure { padding: 26px 0 18px; }
/* every piece of a leaf is the same width, so the leaf reads as one sheet */
html[data-codex~="leaves"] main > .chapter-divider,
html[data-codex~="leaves"] main > .section-divider,
html[data-codex~="leaves"] main > .art-figure { max-width: none; margin-left: 0; margin-right: 0; }
html[data-codex~="leaves"] .art-figure .art-plate-btn { max-width: min(780px, calc(100% - 40px)); margin: 0 auto; }
html[data-codex~="leaves"] .page-block { box-shadow: none; }
/* a leaf's side edges and drop shadow, drawn on every piece of the leaf */
html[data-codex~="leaves"] .page-block,
html[data-codex~="leaves"] .section-divider,
html[data-codex~="leaves"] .art-figure,
html[data-codex~="leaves"] .chapter-divider {
  box-shadow: 1px 0 0 rgba(80,55,20,0.25), -1px 0 0 rgba(80,55,20,0.25), 0 0 40px rgba(0,0,0,0.35);
  clip-path: inset(0 -60px);
}
@media (min-width: 900px) {
  html[data-codex~="leaves"] main { padding-left: 24px; padding-right: 24px; }
  html[data-codex~="leaves"] .page-block { padding-left: 56px; padding-right: 56px; }
}
@media (max-width: 899px) {
  html[data-codex~="leaves"] main { padding-left: 10px; padding-right: 10px; }
  html[data-codex~="leaves"] .page-block { padding-left: 10px; padding-right: 10px; }
}
/* the chapter divider: its top is the window (painting), its bottom is the head of a new leaf */
html[data-codex~="leaves"]:not(.cx-plain) .chapter-divider.cx-window {
  min-height: 0; padding-top: 50vh; padding-bottom: 0; margin: 0;
  background-clip: content-box; box-shadow: none; clip-path: none;
}
html[data-codex~="leaves"]:not(.cx-plain) .chapter-divider.cx-window .chapter-divider-title {
  background: var(--cx-vellum) var(--cx-tex) 0 0 / 400px; margin: 0; padding: 34px 0 12px;
  border-radius: 3px 3px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,0.3);
}
body.dark .chapter-divider-title { background-blend-mode: multiply; }
html[data-codex~="leaves"]:not(.cx-plain) .chapter-divider.cx-window .cx-credit {
  position: absolute; top: 0; left: 0; right: 0; height: 50vh;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px; margin: 0 auto;
}
/* the last piece before a window closes its leaf with a bottom edge */
html[data-codex~="leaves"] .cx-leaf-end { border-radius: 0 0 3px 3px; padding-bottom: 26px; }
html[data-codex~="leaves"] .title-page { border-radius: 3px; margin-bottom: 0; }

/* ════════════════════ BOLDER (Eric 2026-10-05: "lean into that fantasy") ════════════════════
   The book is a real object on a real desk: the front door's own wood under it, a tooled
   leather binding around it, the stacked edges of the leaves at its sides. Ornament stays in
   the frame; every control keeps its words, its size and its contrast. */

/* the desk is the shelf's own wood, darkened */
html[data-codex~="page"] body {
  background: #1b130c url('/shelf/wood-back.jpg') center top / 900px;
  background-blend-mode: multiply;
}
html[data-codex~="page"] body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(ellipse at 50% 35%, rgba(255,190,110,0.10), rgba(0,0,0,0.55) 80%);
}

/* the binding: stacked page edges, then tooled leather with a gilt fillet, then the shadow */
html[data-codex~="page"]:not([data-codex~="leaves"]):not([data-codex~="cards"]) main,
html[data-codex~="page"]:not([data-codex~="leaves"]):not([data-codex~="cards"]) .title-page {
  box-shadow:
    3px 0 0 -1px #e9dcbd, 6px 0 0 -2px #d6c39b, 9px 0 0 -3px #e4d4b0, 12px 0 0 -4px #cdb88e,
    -3px 0 0 -1px #e9dcbd, -6px 0 0 -2px #d6c39b, -9px 0 0 -3px #e4d4b0, -12px 0 0 -4px #cdb88e,
    0 0 0 16px #3a1d0f, 0 0 0 17px rgba(214,168,72,0.75), 0 0 0 21px #3a1d0f,
    0 26px 60px 20px rgba(0,0,0,0.6),
    inset 0 0 90px rgba(120,80,30,0.16);
}
html[data-codex~="page"]:not([data-codex~="leaves"]):not([data-codex~="cards"]) main { clip-path: inset(0 -90px -90px -90px); margin-bottom: 60px; }
html[data-codex~="page"]:not([data-codex~="leaves"]):not([data-codex~="cards"]) .title-page { clip-path: inset(-90px -90px 0 -90px); margin-top: 40px; border-radius: 3px 3px 0 0; }
@media (max-width: 899px) {
  /* on a phone the binding is a hint at the edges, never at the cost of line length */
  html[data-codex~="page"]:not([data-codex~="leaves"]):not([data-codex~="cards"]) main,
  html[data-codex~="page"]:not([data-codex~="leaves"]):not([data-codex~="cards"]) .title-page {
    box-shadow: 2px 0 0 -1px #d6c39b, -2px 0 0 -1px #d6c39b, 0 0 0 5px #3a1d0f, 0 0 0 6px rgba(214,168,72,0.7),
                inset 0 0 50px rgba(120,80,30,0.14);
  }
  html[data-codex~="page"]:not([data-codex~="leaves"]):not([data-codex~="cards"]) main { margin-left: 6px; margin-right: 6px; }
  html[data-codex~="page"]:not([data-codex~="leaves"]):not([data-codex~="cards"]) .title-page { margin: 18px 6px 0; }
}
/* the initial: a diapered ground (gold lattice on lapis or red) inside a double gold frame */
html[data-codex~="page"] .cx-incipit .translation-text::first-letter,
html[data-codex~="page"] .cx-incipit .english-flow::first-letter {
  font-size: 4.1em; padding: 0.16em 0.17em 0.08em; margin: 0.06em 0.2em 0 0;
  font-family: 'Cinzel', 'IM Fell English', serif; font-weight: 600; line-height: 1;
  /* IM Fell's capital I reads as a lowercase i in the box (Canterbury 19-22, “It happened”); Cinzel is the masthead face */
  color: #f7e2a0;
  text-shadow: 0 1px 0 #6b4a10, 0 0 6px rgba(255,220,140,0.35);
  background-color: var(--cx-lapis);
  background-image:
    repeating-linear-gradient(45deg, rgba(232,190,90,0.22) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, rgba(232,190,90,0.22) 0 1px, transparent 1px 9px),
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.16), transparent 60%);
  border: 4px double var(--cx-gold);
}

/* chapter openings: red title between two fleuron rules, like a rubricated incipit */
html[data-codex~="page"] .chapter-divider-orn { display: none; }
html[data-codex~="page"] .chapter-divider-title::before,
html[data-codex~="page"] .chapter-divider-title::after {
  content: '❦'; display: block; font-size: 1.1rem; line-height: 1; color: var(--cx-gold);
  background: linear-gradient(to right, transparent, rgba(162,43,23,0.55) 30%, transparent 47%, transparent 53%, rgba(31,58,120,0.55) 70%, transparent)
              center / 280px 1px no-repeat;
  margin: 0 auto 10px; max-width: 320px;
}
html[data-codex~="page"] .chapter-divider-title::after { content: '❧'; margin: 10px auto 0; }
html[data-codex~="page"] .chapter-divider-title { font-size: 2.3rem; }
@media (max-width: 640px) { html[data-codex~="page"] .chapter-divider-title { font-size: 1.8rem; } }

/* controls: dressed as tooled leather with gold edges, but every label, size and contrast
   unchanged. Cream on dark leather is 12:1. */
html[data-codex~="page"] .reader-toolbar,
html[data-codex~="scene"] .reader-toolbar {
  background: #2c170c url('/shelf/leather.jpg') center / 300px;
  background-blend-mode: multiply;
  border: 1px solid rgba(214,168,72,0.8);
  box-shadow: 0 0 0 3px rgba(44,23,12,0.9), 0 6px 18px rgba(0,0,0,0.45);
}
html[data-codex~="page"] .rtb-btn, html[data-codex~="scene"] .rtb-btn { color: #f3e7cc; }
html[data-codex~="page"] .rtb-btn.on, html[data-codex~="scene"] .rtb-btn.on { color: #ffd98a; border-color: rgba(255,217,138,0.8); }
html[data-codex~="page"] .rtb-key, html[data-codex~="scene"] .rtb-key { color: rgba(243,231,204,0.6); border-color: rgba(243,231,204,0.35); }
html[data-codex~="page"] .toc-btn, html[data-codex~="page"] .share-book-btn, html[data-codex~="page"] .float-ctrl-btn,
html[data-codex~="scene"] .toc-btn, html[data-codex~="scene"] .share-book-btn, html[data-codex~="scene"] .float-ctrl-btn,
html[data-codex~="page"] .phone-bar, html[data-codex~="scene"] .phone-bar {
  background: #2c170c url('/shelf/leather.jpg') center / 300px;
  background-blend-mode: multiply;
  color: #f3e7cc; border-color: rgba(214,168,72,0.8);
}
html[data-codex~="page"] .phone-bar .pbar-btn, html[data-codex~="scene"] .phone-bar .pbar-btn { color: #f3e7cc; }

/* the passage buttons say what they do */
html[data-codex~="page"] .pass-star { font-size: 1.05rem; min-height: 32px; padding: 0 8px; color: var(--cx-rubric); }
html[data-codex~="page"] .pass-star::after { content: ' save'; font-family: 'Vollkorn', serif; font-size: 0.85rem; color: var(--cx-ink2); }
html[data-codex~="page"] .pass-star.on::after { content: ' saved'; }
html[data-codex~="page"] .passage-label .share-btn { min-height: 32px; padding: 0 10px; color: var(--cx-ink2); border-color: rgba(120,80,30,0.4); }

/* scenes: candle-warm edges, and a very slow drift (off for reduced motion) */
#cx-scene .cx-layer.on { animation: cxDrift 60s ease-in-out infinite alternate; }
@keyframes cxDrift { from { transform: scale(1.0) translate(0, 0); } to { transform: scale(1.06) translate(-1%, -1%); } }
@media (prefers-reduced-motion: reduce) { #cx-scene .cx-layer.on { animation: none; } }
#cx-scene::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,170,80,0.14), transparent 60%);
}

/* the scene switch only belongs to designs with scenes */
html:not([data-codex~="scene"]) .cx-scene-row { display: none; }

/* desktop controls in the book designs: taller targets, and the reading-options chip says so */
@media (min-width: 900px) {
  html[data-codex~="page"] .rtb-btn, html[data-codex~="scene"] .rtb-btn { min-height: 36px; }
}
/* search stepped clear of the docked palette (today it hides under it on a 1280px screen) */
@media (min-width: 740px) { body.dock #glp-searchbtn { transform: translateX(-336px); } }

/* ───────────────────────── the design switcher (switch.html only) ───────────────────────── */
#cx-switch {
  position: fixed; z-index: 900; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 4px; padding: 5px;
  background: rgba(24,16,10,0.94); border: 1px solid rgba(214,168,72,0.7); border-radius: 999px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.5); font-family: 'Noto Serif', Georgia, serif;
  max-width: calc(100vw - 16px); overflow-x: auto; scrollbar-width: none;
}
#cx-switch .cx-sw-k { color: rgba(243,231,204,0.75); font-size: 14px; padding: 0 8px 0 10px; white-space: nowrap; font-style: italic; }
#cx-switch button {
  min-height: 40px; padding: 0 14px; border-radius: 999px; border: 0; cursor: pointer; white-space: nowrap;
  background: transparent; color: #f3e7cc; font: 600 15px/1 'Noto Serif', Georgia, serif;
}
#cx-switch button[aria-checked="true"] { background: #f3e7cc; color: #2c170c; }
#cx-head { z-index: 40; }
@media (min-width: 900px) { html[data-codex~="page"] #cx-switch { bottom: calc(var(--cx-head-h) + 12px); } }
@media (max-width: 899px) {
  #cx-switch { left: 8px; right: 8px; transform: none; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
               display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 18px; overflow: visible; }
  #cx-switch .cx-sw-k { display: none; }
  #cx-switch button { padding: 0 6px; font-size: 14px; min-height: 38px; }
}

/* ───────────────────────── E · CODEX PAGES ON THE SCENE (Eric's pick, 2026-10-05) ─────────────────────────
   "The treatment of the last but the pages of the one before": every passage is its own
   vellum page in a gilt-and-leather frame, laid on the painting with a little of the
   painting between pages, the way the Scene design's cards lie on it. The words always
   sit on solid vellum. */
html[data-codex~="cards"] main { background: transparent; box-shadow: none; }
html[data-codex~="cards"] .page-block {
  background: var(--cx-vellum) var(--cx-tex) 0 0 / 400px;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(80,55,20,0.35), 0 0 0 4px #3a1d0f, 0 0 0 5px rgba(214,168,72,0.8), 0 0 0 8px #3a1d0f,
              0 14px 34px rgba(0,0,0,0.55), inset 0 0 70px rgba(120,80,30,0.16);
  margin-bottom: 30px;
}
body.dark .page-block { background-blend-mode: multiply; }
@media (min-width: 900px) {
  html[data-codex~="cards"] main { padding-left: 32px; padding-right: 32px; }
  html[data-codex~="cards"] .page-block { padding-left: clamp(28px, 3.4rem, 70px); padding-right: clamp(28px, 3.4rem, 70px); }
}
@media (max-width: 899px) {
  html[data-codex~="cards"] main { padding-left: 14px; padding-right: 14px; }
  html[data-codex~="cards"] .page-block {
    margin-bottom: 22px;
    box-shadow: 0 0 0 1px rgba(80,55,20,0.35), 0 0 0 3px #3a1d0f, 0 0 0 4px rgba(214,168,72,0.8), 0 0 0 6px #3a1d0f,
                0 10px 24px rgba(0,0,0,0.5), inset 0 0 50px rgba(120,80,30,0.14);
  }
}
/* between pages: only the painting (no ¶ floating on the art) */
html[data-codex~="cards"] .section-divider { height: 0; padding: 0; }
html[data-codex~="cards"] .section-divider::after { display: none; }
/* chapter titles sit on their own vellum plate in the same frame */
html[data-codex~="cards"] .chapter-divider { margin: 40px auto 30px; }
html[data-codex~="cards"] .chapter-divider-title {
  display: inline-block; align-self: center;
  background: var(--cx-vellum) var(--cx-tex) 0 0 / 400px;
  padding: 16px clamp(22px, 4vw, 54px) 14px; border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(80,55,20,0.35), 0 0 0 4px #3a1d0f, 0 0 0 5px rgba(214,168,72,0.8), 0 0 0 8px #3a1d0f, 0 14px 34px rgba(0,0,0,0.55);
}
html[data-codex~="cards"]:not(.cx-plain) .chapter-divider.cx-window { min-height: 56vh; margin: 34px auto 30px; }
html[data-codex~="cards"]:not(.cx-plain) .chapter-divider.cx-window .cx-credit { margin-top: 14px; }
/* plates and maps on a vellum mat in the same frame */
html[data-codex~="cards"] .art-figure {
  background: var(--cx-vellum) var(--cx-tex) 0 0 / 400px; padding: 18px 18px 12px; border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(80,55,20,0.35), 0 0 0 4px #3a1d0f, 0 0 0 5px rgba(214,168,72,0.8), 0 0 0 8px #3a1d0f, 0 14px 34px rgba(0,0,0,0.55);
}
html[data-codex~="cards"] .title-page {
  border-radius: 4px; margin-top: 40px; margin-bottom: 34px;
  box-shadow: 0 0 0 1px rgba(80,55,20,0.35), 0 0 0 4px #3a1d0f, 0 0 0 5px rgba(214,168,72,0.8), 0 0 0 8px #3a1d0f, 0 14px 34px rgba(0,0,0,0.55);
}
@media (max-width: 899px) { html[data-codex~="cards"] .title-page { margin: 24px 14px 26px; } }

/* the Ⅰ chip (reading mode, text size, night…) is the one control a newcomer can't read:
   a word under it says what it is. It hangs below the chip, so nothing moves sideways. */
@media (min-width: 740px) {
  html[data-codex~="page"] .float-ctrl-btn::after, html[data-codex~="scene"] .float-ctrl-btn::after {
    content: 'settings'; position: absolute; top: calc(100% + 4px); left: 50%; right: auto; bottom: auto; opacity: 1; transform: translateX(-50%);
    font: italic 13px/1 'Vollkorn', Georgia, serif; letter-spacing: 0; color: #f3e7cc;
    background: rgba(44,23,12,0.92); padding: 3px 7px 4px; border-radius: 6px; white-space: nowrap; pointer-events: none;
  }
}
/* the search chip (added by glp-share.js) wears the same leather as its neighbours */
html[data-codex~="page"] #glp-searchbtn, html[data-codex~="scene"] #glp-searchbtn {
  background: #2c170c url('/shelf/leather.jpg') center / 300px; background-blend-mode: multiply;
  color: #f3e7cc; border-color: rgba(214,168,72,0.8);
}

/* the undocked palette opens below the "settings" label, framed like the rest of the book */
@media (min-width: 740px) {
  html[data-codex~="page"] .float-ctrl-panel, html[data-codex~="scene"] .float-ctrl-panel {
    top: 84px; border: 1px solid rgba(214,168,72,0.8);
    box-shadow: 0 0 0 3px rgba(44,23,12,0.9), 0 18px 44px rgba(0,0,0,0.55);
  }
}

/* a scene that begins inside a chapter: its credit sits as a quiet line at the head of the passage it starts on */
html[data-codex~="scene"]:not(.cx-plain) .cx-credit-inline {
  display: block; margin: 0 0 8px; padding: 0 12px; font-style: italic;
  font-size: calc(0.72rem * var(--rs, 1)); color: var(--cx-ink2); opacity: 0.85; text-align: right;
}

/* ───────────── The opening letter of every passage (Eric 2026-10-05: "most of the greek text doesn't
   start the sentence or page with a capital letter… anything that can help anchor the corner?"; approved:
   "Yes update the colored first letter… sometimes the english protrudes and doesn't let it anchor").
   Editions capitalize only names and some openings, and the text is verbatim, so the letter is never
   changed: it is only DRAWN larger and in red, the way scribes marked an opening (a littera notabilior).
   ::first-letter is display-only, so select, copy, search and the verbatim gate see the same characters,
   and line-height: 0 keeps every card exactly as tall as before. codex.js marks the first real source
   word (.cx-first) as the shell draws it. ───────────── */
html[data-codex~="page"]:not(.cx-no-initial) .word-unit.cx-first .w-greek::first-letter {
  color: var(--cx-rubric); font-size: 1.32em; line-height: 0; font-weight: 600;   /* Eric: 1.8em was "so discordant in size" with the next letter */
}
/* the initial owns its column: the transliteration and gloss start under it, not centred past it */
html[data-codex~="page"]:not(.cx-no-initial) .interlinear > .word-unit.cx-first { align-items: flex-start; }
html[data-codex~="page"]:not(.cx-no-initial) .interlinear > .word-unit.cx-first > * { text-align: left; }
/* when an English word leads the line ("[Cyrus] ordered…"), a red paragraph mark takes the corner */
html[data-codex~="page"]:not(.cx-no-initial) body:not(.stage-2):not(.stage-3) .interlinear.cx-lead-en::before {
  content: '¶'; color: var(--cx-rubric); font-family: 'Vollkorn', 'Noto Serif', serif; font-weight: 600;
  font-size: calc(1.6rem * var(--gs, 1) * 1.15); line-height: 1.25; padding: 4px 6px 0 0; align-self: flex-start;
}
/* chapter and scene openings: the full illuminated initial on the Greek, gilt on the lapis or red lattice;
   the English opening letter becomes a plain red capital, so one corner carries the gold */
html[data-codex~="page"]:not(.cx-no-initial) .cx-incipit .word-unit.cx-first .w-greek::first-letter {
  font-size: 1.45em; color: #f7e2a0; text-shadow: 0 1px 0 #6b4a10; vertical-align: 0.12em;
  padding: 0.02em 0.1em 0; margin-right: 0.06em;
  background-color: var(--cx-lapis);
  background-image:
    repeating-linear-gradient(45deg, rgba(232,190,90,0.25) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(232,190,90,0.25) 0 1px, transparent 1px 7px);
  border: 3px double var(--cx-gold);
}
html[data-codex~="page"]:not(.cx-no-initial) .cx-incipit.cx-red .word-unit.cx-first .w-greek::first-letter { background-color: #8e2414; }
html[data-codex~="page"]:not(.cx-no-initial) .cx-incipit .interlinear { padding-top: 1.3rem; }
html[data-codex~="page"]:not(.cx-no-initial) .cx-incipit .translation-text::first-letter,
html[data-codex~="page"]:not(.cx-no-initial) .cx-incipit .english-flow::first-letter {
  background: none; border: 0; text-shadow: none; color: var(--cx-rubric); padding: 0.04em 0.1em 0 0; font-size: 3.2em;
}