/* ===================================================================================
   FSSB, the stylesheet. Single source of truth for every surface on the site.

   THE ILLUMINATED MARGIN.
   The Word sits alone in the centre of the page. The human voices (✦) live in the left
   margin in a warm scholar's hand; the machine (⚙) lives in the right margin in a cooler,
   precise hand. Where a thing sits on the page tells you who is speaking.

   Type    Fraunces (soft, wonky, heavy) is the display voice: numerals, spines, headings,
           the wordmark. Newsreader is the Word and the notes, with optical sizes.
           Frank Ruhl Libre for Hebrew, Gentium Plus for Greek.
   Colour  Manuscript rubrication. Vermilion for the Word's own numerals and headings, gold
           for its labels and the ribbon, ochre for the human voices, lapis for the machine.
           Saffron paper by day, indigo ink by night. The paper follows the reader's clock.
   Motion  Under 300ms, ease-out for responses, springs for things that move, transform
           and opacity only, interruptible, nothing on high-frequency actions. One slow
           moment per page: the numeral rising. Reduced motion turns all of it off.
   No boxes. No cards. Hierarchy is scale, space, rules and colour.

   1 tokens  2 type  3 base + marks  4 bar  5 opening  6 the page grid  7 verses
   8 word cards + bloom  9 margins  10 synthesis  11 colophon + pager + bars
   12 cover + today + shelf + contents  13 about  14 plans  15 concordance
   16 search + panel + library + parallel  17 responsive
   =================================================================================== */

/* ── 1. TOKENS ──────────────────────────────────────────────────────────────────── */

@property --bg-a { syntax:"<color>"; inherits:true; initial-value:#f6ecd4; }
@property --bg-b { syntax:"<color>"; inherits:true; initial-value:#f1e5c8; }
@property --bg-c { syntax:"<color>"; inherits:true; initial-value:#e9dbb9; }
@property --ink  { syntax:"<color>"; inherits:true; initial-value:#2a2116; }

:root {
  /* the two ends of the day, mixed by --daylight (0 cool and dim, 1 warm and bright) */
  --paper-cool:#eceee9; --paper-warm:#f8ead0;
  --daylight:.75;
  --bg-a:color-mix(in oklab, var(--paper-cool) calc((1 - var(--daylight)) * 100%), var(--paper-warm));
  --bg-b:color-mix(in oklab, var(--bg-a) 88%, #b89a63);
  --bg-c:color-mix(in oklab, var(--bg-a) 76%, #a98a54);
  /* The ink ramp and the rubrication colours are set so that every one of them clears
     WCAG AA (4.5:1) against the darkest stop of the paper gradient in every daylight
     state. --gold stays leaf-bright because it only ever paints rules, fills and the
     ribbon; gold that carries text uses --gold-ink. */
  --ink:#2a2116; --ink-soft:#4b3e2d; --ink-faint:#605645;
  --rule:#d8cba9; --rule-soft:#e6dbc0;
  --paper:rgba(255,255,255,.35);
  --rubric:#a52717;                 /* vermilion: the Word's numerals and headings */
  --gold:#b8862b; --gold-ink:#715117; --gold-tint:rgba(184,134,43,.16);
  --ox:#834813; --ox-soft:#6f3d10; --ox-tint:rgba(131,72,19,.10);       /* ochre: ✦ */
  --slate:#2a569a; --slate-soft:#36578c; --slate-tint:rgba(42,86,154,.08); --slate-bd:#b9c9e3; /* lapis: ⚙ */
  --green:#23623d; --green-bd:#b9d9c3;
  --band:#c8321e; --band-ink:#fbf1de;   /* the opening band */
  --cream:#fbf1de;
  --grain:.06;
  --scrim:rgba(50,36,14,.5);
  --shadow-lg:0 30px 80px rgba(60,40,10,.22);
  --bar:color-mix(in oklab, var(--bg-a) 82%, transparent);
  --spine-s:52%; --spine-l:33%; --div-l:24%; --spine-ink:#fffaf2;
}
[data-daylight="dusk"]{ --paper-warm:#f4dcb0; }
[data-daylight="dawn"]{ --paper-cool:#e9edea; }
[data-theme="sepia"]{
  --paper-cool:#f1e4c6; --paper-warm:#f1e4c6; --ink:#3a2d1c; --ink-soft:#4e402b; --ink-faint:#605645;
  --rule:#d4c39c; --rule-soft:#e2d4b4; --grain:.08;
}
[data-theme="dark"],[data-theme="midnight"]{
  --paper-cool:#16141f; --paper-warm:#16141f;
  --bg-a:#16141f; --bg-b:#100f18; --bg-c:#0a0a10;
  --ink:#efe7d6; --ink-soft:#bdb2a0; --ink-faint:#887f72;
  --rule:#2d2a3a; --rule-soft:#201e2b;
  --paper:rgba(255,245,225,.03);
  --rubric:#ff6b4a;
  --gold:#e2b85f; --gold-ink:#e2b85f; --gold-tint:rgba(226,184,95,.14);
  --ox:#e0a25a; --ox-soft:#c48a44; --ox-tint:rgba(224,162,90,.12);
  --slate:#7ea6f0; --slate-soft:#5f8ad8; --slate-tint:rgba(126,166,240,.09); --slate-bd:#2f4470;
  --green:#63cf92; --green-bd:#2f5a44;
  --band:#7a1f12; --band-ink:#fbe9dc;
  --grain:.035;
  --scrim:rgba(4,4,10,.7);
  --shadow-lg:0 30px 80px rgba(0,0,0,.6);
  --bar:rgba(16,14,24,.84);
  --spine-s:46%; --spine-l:34%; --div-l:66%; --spine-ink:#fffaf2;
}
[data-theme="midnight"]{ --bg-a:#0a0a0c; --bg-b:#050505; --bg-c:#000; --paper-cool:#0a0a0c; --paper-warm:#0a0a0c; --rule:#26262c; --rule-soft:#161619; --bar:rgba(5,5,5,.88); --band:#8a2314; }
[data-accent="indigo"]  {--ox:#5349aa; --ox-soft:#463d90; --ox-tint:rgba(83,73,170,.12);}
[data-accent="violet"]  {--ox:#743f9a; --ox-soft:#603281; --ox-tint:rgba(116,63,154,.12);}
[data-accent="emerald"] {--ox:#116440; --ox-soft:#0c5133; --ox-tint:rgba(17,100,64,.12);}
[data-accent="amber"]   {--ox:#774f0c; --ox-soft:#634008; --ox-tint:rgba(119,79,12,.14);}
[data-accent="rose"]    {--ox:#993056; --ox-soft:#7f2646; --ox-tint:rgba(153,48,86,.12);}
[data-accent="teal"]    {--ox:#0f615e; --ox-soft:#0a4e4b; --ox-tint:rgba(15,97,94,.12);}
/* on ink-dark paper the accents stay luminous; only indigo needed a lift to clear AA */
[data-theme="dark"][data-accent="indigo"],[data-theme="midnight"][data-accent="indigo"]  {--ox:#7a6df5; --ox-soft:#5a4fc7; --ox-tint:rgba(122,109,245,.12);}
[data-theme="dark"][data-accent="violet"],[data-theme="midnight"][data-accent="violet"]  {--ox:#a85ede; --ox-soft:#8a47bd; --ox-tint:rgba(168,94,222,.12);}
[data-theme="dark"][data-accent="emerald"],[data-theme="midnight"][data-accent="emerald"]{--ox:#22a06a; --ox-soft:#1b875a; --ox-tint:rgba(34,160,106,.12);}
[data-theme="dark"][data-accent="amber"],[data-theme="midnight"][data-accent="amber"]    {--ox:#d3901f; --ox-soft:#b67a15; --ox-tint:rgba(211,144,31,.14);}
[data-theme="dark"][data-accent="rose"],[data-theme="midnight"][data-accent="rose"]      {--ox:#dd497e; --ox-soft:#bb3866; --ox-tint:rgba(221,73,126,.12);}
[data-theme="dark"][data-accent="teal"],[data-theme="midnight"][data-accent="teal"]      {--ox:#1f9e99; --ox-soft:#178681; --ox-tint:rgba(31,158,153,.12);}
:root{
  --hl-gold:color-mix(in srgb, var(--gold) 34%, transparent);
  --hl-green:color-mix(in srgb, var(--green) 30%, transparent);
  --hl-blue:color-mix(in srgb, var(--slate) 30%, transparent);
  --hl-rose:color-mix(in srgb, var(--rubric) 26%, transparent);
  --hl-violet:color-mix(in srgb, #a25ad6 30%, transparent);

  --display:"Fraunces","Fraunces Fallback",Georgia,serif;
  --text:"Newsreader","Newsreader Fallback",Georgia,serif;
  --hebrew:"Frank Ruhl Libre","Times New Roman",serif;
  --greek:"Gentium Plus","Times New Roman",serif;

  --left:15rem; --measure:38rem; --right:17rem; --gap:2.5rem;
  --bar-h:3.4rem;
  --spring:cubic-bezier(.2,1.4,.4,1);

  /* one spacing scale: 4 8 12 16 24 32 48 64 96 at the default root size */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem;
  --s7:3rem; --s8:4rem; --s9:6rem;
  /* the page gutter and the widest content box: the ribbon is placed from these */
  --page-pad:clamp(1.2rem, 4vw, 3rem);
  --content-max:calc(var(--left) + var(--measure) + var(--right) + var(--gap) * 2);
}

/* ── 2. TYPE ────────────────────────────────────────────────────────────────────── */

:root{
  --t-label:.72rem;
  --t-note:1rem;
  --t-body:1.1875rem;
  --t-verse:clamp(1.35rem, 1.05rem + 1.2vw, 1.75rem);
  --t-orig:clamp(1.6rem, 1.2rem + 1.7vw, 2.25rem);
  --t-h2:clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem);
  --t-numeral:clamp(7rem, 3rem + 18vw, 19rem);
}
/* Fraunces is an optical-size family. Forcing opsz 144 puts the poster drawing into
   headings, spines and the wordmark, where it clots; WONK 1 with SOFT 100 makes it worse
   below about 3rem. So every display use takes the optical size for the size it is set
   at, WONK 0 and a small SOFT for warmth. The one exception is the giant chapter numeral
   in the opening band, which is large enough to wear the full wonk: see section 5. */
.display,.ref,.topbar-brand,.book-name,.spine-title,.shelf-div span,.plan-title,.day-refs,.mk-panel h2,.sec > h2,.toc-head h2,.home-hero .ref,.lx-lemma,.fssb-pager-ref,.bb-ref,.pc .pc-r,.hs-item .r,.fssb-ov-item .r,.rail-verses a,.vnav a,.verse-head .vn,.mv h3,.thread h3,.ulayer>summary .ut,.sub>summary .st,.voice .who,.auth h3,.home-plans .pl-t b,.uref,.lx-unit,.mk-iref{
  font-family:var(--display); font-optical-sizing:auto; font-variation-settings:"SOFT" 30,"WONK" 0;
}
/* figures that are read in a column, or compared with one another, are tabular */
.verse-head .vn,.vnav a,.pc .pc-r,.spine-count,.book-count,.div-cov,.cov-line,.plan-meta,.day-n,
.lx-n,.lx-s,.lx-stat,.wstr,.voice .yr,.coverage,.umeta,.hs-item .k,.fssb-ov-item .k,.bb-ref,
.fssb-pager-ref,.uref,.sub>summary .sm,.ulayer>summary .um,.voices>summary .sm,.vbadge,.refs{
  font-variant-numeric:tabular-nums lining-nums;
}
/* Newsreader carries no smcp table (checked with fontTools: GSUB holds liga, pnum, rvrn,
   tnum only), so the label voice is set as tracked uppercase rather than faked small caps. */
.lbl,.kicker,.ll-label,.dv-label,.trans-note,.heb-prompt,.grk-prompt,.ref .bk,.sub>summary .sm,.ulayer>summary .um,.gflag,.ai-flag,.apparatus h2,.votd-tag,.today-label,.plan-kind,.lx-h,.day-n,.fssb-sec-h,.par-bar,.fssb-pager-dir,.bb-dir,.div-cov,.book-count,.div-name,.fssb-crumbs ol,.legend,.home-legend,.cov-line,.sec > h2 .num,.auth .lvl,.verifier h3,.acts-close cite,.backhome,.plan-back,.plan-reset,.home-foot .about-link,.fssb-pager-home,.hs-tips,.lx-stat,.shelf-div small,.spine-count,.voice .yr,.tag,.wstr,.hs-kbd,.fssb-ov-esc{
  font-family:var(--text); font-optical-sizing:auto; font-size:var(--t-label); letter-spacing:.08em; text-transform:uppercase; font-weight:500;
}
.voice .yr{text-transform:none; letter-spacing:.06em;}   /* 1860s, not 1860S */

/* ── 3. BASE + THE MARKS ────────────────────────────────────────────────────────── */

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--bar-h) + 1rem); font-size:calc(100% * var(--fs,1));
  -webkit-tap-highlight-color:transparent;
  background-color:var(--bg-c); transition:--bg-a 1.2s ease, --bg-b 1.2s ease, --bg-c 1.2s ease, --ink 1.2s ease;}
body{margin:0; background:radial-gradient(130% 70% at 30% -20%, var(--bg-a) 0%, var(--bg-b) 60%, var(--bg-c) 100%) fixed; color:var(--ink);
  font-family:var(--text); font-size:var(--t-body); line-height:1.5; padding:0 0 var(--s9); font-optical-sizing:auto;
  font-variant-ligatures:common-ligatures; font-kerning:normal; text-wrap:pretty;
  hanging-punctuation:first last; transition:color 1.2s ease;}
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:var(--grain); mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
[data-theme="dark"] body::before,[data-theme="midnight"] body::before{mix-blend-mode:screen;}
:focus-visible{outline:2px solid var(--ox); outline-offset:2px; border-radius:2px;}
/* nothing loses its outline without a replacement: these paint their own ring */
.spine:focus-visible,.book > summary:focus-visible,.sub > summary:focus-visible,
.voices > summary:focus-visible,.ulayer > summary:focus-visible,.pc:focus-visible,
.lx-chip:focus-visible,.plan-card:focus-visible,.day-head:focus-visible,
.heb-word:focus-visible,.grk-word:focus-visible{outline:2px solid var(--ox); outline-offset:2px;}
a{color:var(--rubric); text-decoration:none;}
::selection{background:var(--gold-tint); color:var(--ink);}
button{font-family:var(--text);}
.skip-link{position:absolute; left:.6rem; top:calc(var(--bar-h) + env(safe-area-inset-top) + .5rem); z-index:300; display:inline-flex; align-items:center; min-height:44px; padding:0 var(--s4); background:var(--bg-a); color:var(--rubric); border:1px solid var(--rubric); font-size:.9rem;
  transform:translateY(calc(-100% - var(--bar-h) - env(safe-area-inset-top) - 1rem)); transition:transform .18s ease-out;}
.skip-link:focus{transform:none;}

/* The three marks, drawn. The Unicode glyphs stay in the markup for meaning and for
   screen readers; here they are painted as one slightly irregular stroke each. */
.src-mark,.legend .src .gl,.home-legend .src .gl,.pc-dot,.hs-icn,.fssb-ov-icn,.div-name .dot,.auth.human .mk,.srclist .mk.h,.votd-tag .gl,.votd-share .gl,.rail-jump .mk.src,
.un,.warning .mk,.legend .ai .gl,.home-legend .ai .gl,.ai-mark,.auth.ai .mk,.srclist .mk.a,.pc.pending .pc-dot,.gflag .dot,.ai-flag .dot,
.ornament span,.home-legend .canon .gl,.auth.word .mk,.srclist .mk.w{
  display:inline-block; width:1em; height:1em; vertical-align:-.12em; color:transparent !important; overflow:hidden; line-height:1;
  background-color:var(--m); -webkit-mask:var(--mask) center/contain no-repeat; mask:var(--mask) center/contain no-repeat; flex:none;
}
.src-mark,.legend .src .gl,.home-legend .src .gl,.pc-dot,.hs-icn,.fssb-ov-icn,.div-name .dot,.auth.human .mk,.srclist .mk.h,.votd-tag .gl,.votd-share .gl,.rail-jump .mk.src{
  --m:var(--ox);
  --mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.2C13.1 6.4 15.3 9.2 22.8 12.2 15.7 14.1 13.5 16.9 11.9 22.8 10.7 17.1 8.3 14.3 1.3 11.9 8.3 9.7 10.8 6.9 12 1.2Z'/%3E%3C/svg%3E");
}
.un,.warning .mk,.legend .ai .gl,.home-legend .ai .gl,.ai-mark,.auth.ai .mk,.srclist .mk.a,.pc.pending .pc-dot,.gflag .dot,.ai-flag .dot{
  --m:var(--slate); width:1.05em; height:1.05em; border-radius:0; background:var(--slate);
  --mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.6 1.4h2.8l.5 2.6 1.9.8 2.2-1.5 2 2-1.5 2.2.8 1.9 2.6.5v2.8l-2.6.5-.8 1.9 1.5 2.2-2 2-2.2-1.5-1.9.8-.5 2.6h-2.8l-.5-2.6-1.9-.8-2.2 1.5-2-2 1.5-2.2-.8-1.9L1.4 13.4v-2.8l2.6-.5.8-1.9L3.3 6l2-2 2.2 1.5 1.9-.8ZM12 8.3a3.7 3.7 0 1 0 0 7.4 3.7 3.7 0 0 0 0-7.4Z' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.ornament span,.home-legend .canon .gl,.auth.word .mk,.srclist .mk.w{
  --m:var(--gold);
  --mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.4 1.5h3.2v8.9h8.9v3.2h-8.9v8.9h-3.2v-8.9H1.5v-3.2h8.9V1.5Z'/%3E%3Ccircle cx='12' cy='2.4' r='1.7'/%3E%3Ccircle cx='12' cy='21.6' r='1.7'/%3E%3Ccircle cx='2.4' cy='12' r='1.7'/%3E%3Ccircle cx='21.6' cy='12' r='1.7'/%3E%3C/svg%3E");
}
/* the marks move once, on the reader's action */
.voices[open] .src-mark{animation:settle .22s var(--spring) both;}
.ulayer[open]>summary .un{animation:tooth .24s ease-out both;}
@keyframes settle{from{transform:scale(.6) rotate(-14deg); opacity:.4} to{transform:none; opacity:1}}
@keyframes tooth{from{transform:rotate(0)} to{transform:rotate(60deg)}}

/* ── 4. THE BAR ─────────────────────────────────────────────────────────────────── */

.topbar{position:sticky; top:0; z-index:90; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--s4);
  min-height:calc(var(--bar-h) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) max(.9rem, env(safe-area-inset-right)) 0 max(1.4rem, env(safe-area-inset-left));
  background:var(--bar); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); border-bottom:1px solid var(--rule-soft);}
/* the hairline under the bar belongs to a page that has been scrolled, not to a page at rest */
@supports (animation-timeline: scroll()) {
  .topbar{border-bottom-color:transparent; animation:bar-rule linear both; animation-timeline:scroll(root block); animation-range:0 56px;}
  @keyframes bar-rule{from{border-bottom-color:transparent} to{border-bottom-color:var(--rule-soft)}}
}
.topbar-brand{font-style:italic; font-weight:600; font-size:1.3rem; color:var(--ink); white-space:nowrap; display:inline-block; line-height:44px; min-height:44px; letter-spacing:-.005em; max-width:52vw; overflow:hidden; text-overflow:ellipsis;}
.topbar-brand b{color:var(--rubric); font-weight:600;}
.topbar-brand:hover{color:var(--rubric);}
.topbar-loc{min-width:0; display:flex; justify-content:center; overflow:hidden;}
.topbar-loc .fssb-crumbs{margin:0; padding:0; max-width:none; animation:none; min-width:0;}
.topbar-loc .fssb-crumbs ol{flex-wrap:nowrap; min-width:0;}
.topbar-loc .fssb-crumbs li{min-width:0; overflow:hidden; text-overflow:ellipsis; display:block;}
.topbar-loc .fssb-crumbs li:first-child{flex:none;}
.topbar-actions{display:flex; align-items:center; gap:.2rem; justify-content:flex-end;}
.tb-btn,.fssb-cog,.fssb-share{position:static; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border-radius:50%; border:0; background:none; color:var(--ink-soft); cursor:pointer; transition:color .18s, transform .18s;}
.tb-btn:hover,.fssb-cog:hover,.fssb-cog.on,.fssb-share:hover{color:var(--rubric);}
.tb-btn:active,.fssb-cog:active,.fssb-share:active{transform:scale(.9); color:var(--rubric);}
.tb-btn svg,.fssb-cog svg,.fssb-share svg{width:21px; height:21px;}
.fssb-share-lbl{display:none;}
.fssb-share.fssb-share-ok{color:var(--green);}

/* The ribbon: reading progress as a bookmark hanging from the bar. It lives in the page's
   right gutter and never enters the column: its width is whatever the gutter can spare
   (11px where there is room for the full bookmark, down to a 4px strip on a phone) and it
   sits at its old distance from the edge unless that would bring it within 8px of the
   column, in which case it is pushed back into the gutter. */
.ribbon{
  --rib-gutter:calc(max(0px, (100vw - var(--content-max)) / 2) + var(--page-pad));
  --rib-w:clamp(4px, calc(var(--rib-gutter) - 16px), 11px);
  position:fixed; top:calc(var(--bar-h) + env(safe-area-inset-top));
  right:max(4px, min(clamp(1rem, 5vw, 4.5rem), calc(var(--rib-gutter) - var(--rib-w) - 8px - env(safe-area-inset-right))));
  width:var(--rib-w); height:calc(var(--progress,0) * 34vh); background:var(--gold); z-index:80; pointer-events:none;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--rib-w) * .64),50% 100%,0 calc(100% - var(--rib-w) * .64));
  transition:height .14s linear; box-shadow:0 2px 6px rgba(0,0,0,.18);}
.page-home{--content-max:78rem;}
.page-about{--content-max:calc(var(--measure) + var(--gap) * 2);}
.page-plans,.page-strongs{--content-max:calc(var(--measure) + var(--right) + var(--gap) * 2);}

/* ── 5. THE OPENING ─────────────────────────────────────────────────────────────── */

main.wrap{position:relative; z-index:1; display:block; margin:0; padding:0; max-width:none;}
.opening{background:var(--band); color:var(--band-ink); padding:clamp(2rem,6vw,4rem) 0 clamp(2rem,5vw,4rem); margin:0; text-align:left; animation:none;}
.opening-inner{max-width:var(--content-max); margin:0 auto; padding:0 max(var(--page-pad), env(safe-area-inset-left)) 0 max(var(--page-pad), env(safe-area-inset-right));}
.opening .kicker{color:var(--band-ink); opacity:.78; margin:0 0 var(--s6);}
.opening .kicker b{color:var(--band-ink); font-weight:700; opacity:1;}
.opening .ref{margin:0; line-height:.82; font-size:var(--t-numeral); font-weight:900; letter-spacing:-.04em; color:var(--band-ink); text-wrap:balance;
  animation:rise-slow .9s cubic-bezier(.2,.7,.2,1) both;}
/* the one place the full wonk belongs: the chapter numeral, set large enough to carry it */
.opening .ref .num{font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1; font-variant-numeric:lining-nums;}
.opening .ref .bk{display:block; font-family:var(--text); font-size:var(--t-label); letter-spacing:.14em; text-transform:uppercase; font-weight:500; color:var(--band-ink); opacity:.92; margin:0 0 var(--s4);}
.opening .ref .num{display:block;}
.opening .subt{font-family:var(--text); font-style:italic; font-weight:400; color:var(--band-ink); opacity:.94; font-size:clamp(1.4rem,1rem + 1.3vw,2rem); margin:var(--s5) 0 0; max-width:30rem; line-height:1.34;}
@keyframes rise-slow{from{opacity:0; transform:translateY(.15em)} to{opacity:1; transform:none}}
/* the same opening, quieter, on the other pages */
.masthead:not(.opening){padding:var(--s7) max(var(--page-pad), env(safe-area-inset-right)) 0 max(var(--page-pad), env(safe-area-inset-left)); text-align:left; max-width:calc(var(--measure) + 2 * var(--gap)); margin:0 auto; animation:rise .8s ease both;}
.masthead:not(.opening) .kicker{color:var(--ink-faint); margin:0 0 var(--s6);}
.masthead:not(.opening) .kicker b{color:var(--rubric); font-weight:700;}
.masthead:not(.opening) .ref{font-size:var(--t-h2); font-weight:600; line-height:1.02; margin:0; letter-spacing:-.018em; color:var(--ink); text-wrap:balance;}
.masthead:not(.opening) .ref .bk{display:block; color:var(--rubric); margin-bottom:var(--s3); letter-spacing:.14em; font-weight:500;}
.masthead:not(.opening) .subt{font-family:var(--text); font-style:italic; color:var(--ink-soft); font-size:clamp(1.3rem,1rem + 1.1vw,1.8rem); margin:.9rem 0 0; line-height:1.3; max-width:30rem;}
.ornament{display:flex; align-items:center; gap:var(--s3); justify-content:flex-start; margin:var(--s5) 0 0; font-size:1.05rem;}
.ornament::before{content:""; height:2px; width:3.5rem; background:var(--gold);}
.ornament::after{content:none;}

/* ── 6. THE PAGE GRID ───────────────────────────────────────────────────────────── */

.reader{max-width:var(--content-max); margin:0 auto; padding:0 max(var(--page-pad), env(safe-area-inset-left)) 0 max(var(--page-pad), env(safe-area-inset-right));}
.front,.reading{display:grid; grid-template-columns:minmax(0,1fr); column-gap:var(--gap);}
.front{padding:2rem 0 .5rem;}
@media (min-width:900px){
  .front,.reading{grid-template-columns:minmax(0,var(--measure)) var(--right); justify-content:center;}
  .front > *,.reading > *{grid-column:1;}
}
@media (min-width:1280px){
  .front,.reading{grid-template-columns:var(--left) minmax(0,var(--measure)) var(--right);}
  .front > *,.reading > *{grid-column:2;}
  .front > .warning{grid-column:3; grid-row:1 / span 4; align-self:start;}
}

/* the confession: the machine declaring itself on the first page, in its own hand */
.warning{position:relative; margin:0 0 1.6rem; padding:.1rem 0 .1rem 1.2rem; border:0; border-left:2px solid var(--slate); background:none; font-size:var(--t-note); line-height:1.5; color:var(--ink-soft); display:block; animation:rise .8s .05s ease both;}
.warning .mk{position:absolute; left:-.55em; top:-.1em; font-size:1.1em; background:var(--bg-a); box-shadow:0 0 0 4px var(--bg-a);}
.warning b{color:var(--ink); font-weight:600;}
.warning .vt{color:var(--rubric); font-style:italic; display:block; margin-top:.6rem; font-size:1.05em;}
.legend{display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; color:var(--ink-faint); margin:0 0 1.2rem; animation:rise .8s .1s ease both;}
.legend .item{display:flex; align-items:center; gap:.5rem;}
.unit-intro{font-size:var(--t-note); line-height:1.55; color:var(--ink-soft); margin:0 0 1.6rem; padding:0 0 1.4rem; border-bottom:1px solid var(--rule); animation:rise .9s .12s ease both;}
.unit-intro em{color:var(--ink); font-style:italic;}
.vnav{display:flex; flex-wrap:wrap; gap:.3rem; margin:0 0 1.4rem; animation:rise .9s .14s ease both;}
.vnav a{font-size:1.25rem; font-weight:600; color:var(--rubric); min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 .4rem; border-bottom:2px solid transparent; transition:border-color .15s, transform .15s;}
.vnav a:hover{border-color:var(--rubric);}
.vnav a:active{transform:scale(.94);}
.par-bar{display:flex; align-items:center; gap:.9rem; margin:0 0 1.6rem; color:var(--ink-faint);}

/* ── 7. VERSES ──────────────────────────────────────────────────────────────────── */

.verse-unit{position:relative; grid-column:1 / -1; display:grid; grid-template-columns:subgrid; column-gap:var(--gap); align-items:start; margin:0; padding:var(--s6) 0; border-top:1px solid var(--rule-soft); animation:rise .8s ease both;
  scroll-margin-top:calc(var(--bar-h) + env(safe-area-inset-top) + var(--s4));}
/* arriving from the verse nav or a shared link: the verse says so, once */
.verse-unit:target{animation:land .9s cubic-bezier(.2,.7,.2,1) both;}
@keyframes land{
  0%{background:var(--gold-tint); box-shadow:0 0 0 .6rem var(--gold-tint);}
  70%{background:var(--gold-tint); box-shadow:0 0 0 .6rem var(--gold-tint);}
  100%{background:transparent; box-shadow:0 0 0 .6rem transparent;}}
.verse-unit:first-of-type{border-top:0; padding-top:var(--s3);}
.verse-unit:nth-of-type(2){animation-delay:.07s} .verse-unit:nth-of-type(3){animation-delay:.14s} .verse-unit:nth-of-type(n+4){animation-delay:.2s}
.verse-head{display:flex; align-items:center; gap:.6rem; min-height:44px;}
.verse-head .vn{font-size:1.9rem; font-weight:700; color:var(--rubric); line-height:1; letter-spacing:-.015em;}
.verse-head .vtools{margin-left:auto; display:flex; align-items:center; gap:.2rem;}
.vbody{min-width:0;}
.verse-en{font-family:var(--text); font-weight:400; font-size:var(--t-verse); line-height:1.42; color:var(--ink); margin:.1rem 0 var(--s2); text-wrap:pretty; max-width:66ch;}
.verse-en .vmark{display:none;}
.verse-unit:first-of-type .verse-en::first-letter{font-family:var(--display); font-optical-sizing:auto; font-variation-settings:"SOFT" 30,"WONK" 0; font-weight:700; font-size:3em; float:left; line-height:.76; padding:.06em .09em 0 0; color:var(--rubric);}
/* the label under the opening verse clears the initial rather than tucking under it */
.verse-unit:first-of-type .trans-note,.verse-unit:first-of-type .heb-prompt,
.verse-unit:first-of-type .grk-prompt{clear:left;}
.trans-note{color:var(--ink-faint); margin:var(--s1) 0 var(--s4);}
@media (min-width:900px){
  .verse-head{grid-column:1; grid-row:1; position:absolute; left:-3.6rem; top:2rem; width:2.8rem; display:block; text-align:right; min-height:0;}
  .verse-unit:first-of-type .verse-head{top:.8rem;}
  .verse-head .vn{font-size:2.3rem;}
  .verse-head .vtools{position:absolute; right:-.1rem; top:2.9rem; margin:0; flex-direction:column;}
  .vbody{grid-column:1; grid-row:1;}
  .margin-notes{grid-column:2; grid-row:1;}
  .margin-voices{grid-column:1; grid-row:2; max-width:var(--measure);}
}
@media (min-width:1280px){
  .verse-head{grid-column:2; left:-3.8rem;}
  .vbody{grid-column:2;}
  .margin-notes{grid-column:3;}
  .margin-voices{grid-column:1; grid-row:1; max-width:none;}
}

/* ── 8. THE ORIGINAL LINE, WORD CARDS, THE BLOOM ────────────────────────────────── */

.heb-prompt{color:var(--ink-faint); margin:1rem 0 .4rem; text-align:right;}
.grk-prompt{color:var(--ink-faint); margin:1rem 0 .4rem; text-align:left;}
.heb-line{direction:rtl; unicode-bidi:isolate; text-align:right; line-height:2.05; font-family:var(--hebrew); font-weight:500; font-size:var(--t-orig); color:var(--ink);}
.grk-line{direction:ltr; text-align:left; line-height:1.9; font-family:var(--greek); font-size:var(--t-orig); color:var(--ink);}
.heb-word,.grk-word{font:inherit; background:none; border:0; cursor:pointer; color:inherit; padding:.02em .1em; margin:0 .02em; border-radius:4px; position:relative;
  -webkit-tap-highlight-color:transparent;
  transition:transform .22s var(--spring), background .18s, color .18s, box-shadow .22s;}
.heb-word:active,.grk-word:active{background:var(--gold-tint);}
.heb-word:hover,.grk-word:hover{background:var(--gold-tint);}
.heb-word.is-lifted,.grk-word.is-lifted{transform:translateY(-.12em) scale(1.06); background:var(--bg-a); color:var(--rubric); box-shadow:0 10px 24px -10px rgba(0,0,0,.35), 0 0 0 1px var(--rule);}
.heb-word::after,.grk-word::after{content:none;}
.translit{direction:ltr; text-align:left; font-style:italic; color:var(--ink-faint); font-size:.95rem; line-height:1.6; margin:.8rem 0 0;}
.bloom{position:absolute; z-index:5; display:flex; align-items:baseline; gap:var(--s2); padding:.55rem .8rem; background:var(--bg-a); color:var(--ink); border:1px solid var(--rule); box-shadow:0 2px 6px rgba(0,0,0,.10), var(--shadow-lg);
  direction:ltr; font-family:var(--text); font-size:.95rem; white-space:nowrap; opacity:0; transform:translateY(-4px) scale(.96); transform-origin:var(--tail,50%) 0; transition:opacity .18s ease-out, transform .2s var(--spring);}
.bloom.in{opacity:1; transform:none;}
.bloom::before{content:""; position:absolute; top:-6px; left:calc(var(--tail,50%) - 6px); width:11px; height:11px; background:var(--bg-a); border-left:1px solid var(--rule); border-top:1px solid var(--rule); transform:rotate(45deg);}
.bloom-tl{font-style:italic; color:var(--rubric);}
.bloom-gl{font-weight:600;}
.bloom-st{font-size:.74rem; letter-spacing:.08em; color:var(--ink-faint); font-variant-numeric:tabular-nums lining-nums;}
.bloom-st:hover{color:var(--rubric);}

.sub{border:0; border-top:1px dotted var(--rule); margin-top:1rem;}
.sub>summary{list-style:none; cursor:pointer; padding:var(--s3) 0 var(--s2); display:flex; align-items:baseline; gap:var(--s2); user-select:none; min-height:44px; transition:color .15s;}
.sub>summary::-webkit-details-marker{display:none;}
.sub>summary .st{font-size:1.2rem; font-weight:600; color:var(--ink); flex:1;}
.sub>summary:hover .st,.book>summary:active .book-name{color:var(--rubric);}
.sub>summary:active .st{color:var(--rubric);}
.sub>summary .sm{color:var(--ink-faint);}
.sub>summary .chev,.voices>summary .chev,.ulayer>summary .chev{color:var(--ink-faint); font-size:.8rem; transition:transform .2s; line-height:1;}
.chev::before{content:"▸"; display:inline-block;}
.sub[open]>summary .chev,.voices[open]>summary .chev,.ulayer[open]>summary .chev{transform:rotate(90deg); color:var(--rubric);}
.sbody{padding:.1rem 0 .4rem;}
.wrow{border-top:1px dotted var(--rule-soft); padding:var(--s3) 0; transition:background .25s, box-shadow .25s; border-radius:3px;}
.wrow:first-child{border-top:0;}
.wrow.flash,.wrow.is-lit{background:var(--gold-tint); box-shadow:0 0 0 .6rem var(--gold-tint);}
.wtop{display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .7rem;}
.wtop .wh{font-family:var(--hebrew); font-size:1.5rem; direction:rtl; color:var(--ink); min-width:2.2rem; text-align:center;}
.wtop .wh.grk{direction:ltr; font-family:var(--greek); font-size:1.3rem; text-align:left;}
.wtop .wtl{font-style:italic; color:var(--rubric); font-size:1rem;}
.wtop .wlit{color:var(--ink); font-size:1rem; font-weight:600;}
.wtop .wstr{color:var(--ink-faint); margin-left:auto; transition:color .2s;}
.wtop .wlit{letter-spacing:-.002em;}
a.wstr{position:relative;}
a.wstr::after{content:""; position:absolute; inset:-14px -10px;}
a.wstr:hover{color:var(--rubric);}
.wparse{display:flex; flex-wrap:wrap; gap:.25rem .55rem; margin:.45rem 0 0;}
.tag{padding:0; border:0; color:var(--ink-faint); background:none; white-space:nowrap; text-transform:none; letter-spacing:.02em; font-size:.82rem;}
/* the separator hangs off the end of a tag, so a wrapped line never opens with a stray dot */
.tag:not(:last-child)::after{content:"·"; margin-left:.55rem; color:var(--rule);}
.tag.root{color:var(--ox); white-space:normal; max-width:100%; line-height:1.4; font-style:italic; font-size:.92rem; flex-basis:100%;}
.tag.root::after{content:none;}
.wnote{margin:.5rem 0 0; color:var(--ink-soft); font-size:.98rem; line-height:1.55;}
.wnote em{color:var(--ink); font-style:italic;}
.text-only-note{font-size:.95rem; color:var(--slate); border-left:2px solid var(--slate); padding:.3rem 0 .3rem 1rem; margin:1rem 0;}

/* ── 9. THE MARGINS ─────────────────────────────────────────────────────────────── */

.margin-voices,.margin-notes{min-width:0; font-size:var(--t-note); line-height:1.5;}
/* ✦ the human hand */
.voices{border:0; margin:1.2rem 0 0;}
.voices>summary{list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:.6rem; min-height:44px; padding:.6rem 0 .3rem; user-select:none; border-top:1px dotted var(--rule);}
.voices>summary::-webkit-details-marker{display:none;}
.voices>summary .st{font-size:1.15rem; font-weight:600; color:var(--ox); flex:1;}
.voices>summary .sm{color:var(--ink-faint);}
.voice{margin:0 0 var(--s5); padding:0 0 0 var(--s4); border-left:2px solid var(--ox); font-style:italic;}
.voice .byline{display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .55rem; margin-bottom:.35rem; font-style:normal;}
.voice .src-mark{font-size:.85em;}
.voice .who{font-size:1.05rem; font-weight:600; color:var(--ox);}
.voice .work{font-style:italic; color:var(--ink-faint); font-size:.9rem;}
.voice .yr{color:var(--ink-faint); letter-spacing:.06em;}
.voice blockquote{margin:0; color:var(--ink); text-wrap:pretty;}
.voice .ed{display:block; margin-top:.4rem; font-size:.9rem; color:var(--ink-faint);}
.voice .src-link{font-style:normal; margin-top:.1rem;}
.voice .src-link a{color:var(--ink-faint); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; display:inline-flex; align-items:center; min-height:44px;}
.voice .src-link a:hover{color:var(--ox);}
@media (min-width:1280px){
  .voices{margin:0;}
  .voices>summary{display:none;}
  .margin-voices{padding-top:.3rem;}
}
/* ⚙ the machine hand */
.margin-notes .literal{border-left:2px solid var(--slate); padding:.1rem 0 .1rem var(--s4); margin:var(--s4) 0 0;}
.ll-label{color:var(--slate); margin:0 0 .45rem; display:flex; align-items:center; gap:.4rem;}
.ll-text{font-style:italic; color:var(--ink); line-height:1.45; margin:0 0 .9rem; text-wrap:pretty;}
.ll-text b{font-style:normal; font-weight:600; color:var(--slate);}
.diverge{background:none; border:0; border-top:1px dotted var(--rule); padding:.8rem 0 0; margin:0;}
.dv-label{color:var(--slate); margin:0 0 .5rem; font-weight:600;}
.diverge ul{margin:0; padding:0; list-style:none;}
.diverge li{font-size:.95rem; line-height:1.5; color:var(--ink-soft); margin:.5rem 0; padding-left:1rem; position:relative;}
.diverge li::before{content:""; position:absolute; left:0; top:.6em; width:.34rem; height:.34rem; border-radius:50%; background:var(--slate);}
.diverge .hw{font-family:var(--hebrew); font-size:1.05rem; color:var(--ink);}
.diverge em{color:var(--ink); font-style:italic;}
@media (min-width:900px){ .margin-notes .literal{margin-top:.3rem;} }

/* ── 10. THE SYNTHESIS ──────────────────────────────────────────────────────────── */

.layers-rule{margin:var(--s7) 0 var(--s1);}
.layers-intro{margin:var(--s1) 0 var(--s5); padding:0; border:0; font-size:1.05rem; color:var(--ink-soft);}
.layers-intro em{font-style:italic; color:var(--ink);}
.ulayer{position:relative; margin:0; border:0; border-top:1px solid var(--rule); background:none; animation:rise .9s ease both;}
.ulayer::before{content:none;}
.ulayer>summary{list-style:none; cursor:pointer; padding:var(--s4) 0; display:flex; align-items:baseline; gap:var(--s3); user-select:none; min-height:44px;}
.ulayer>summary::-webkit-details-marker{display:none;}
.ulayer>summary .un{font-size:1rem;}
.ulayer>summary .ut{font-size:1.6rem; font-weight:600; color:var(--ink); flex:1; margin:0; line-height:1.12; letter-spacing:-.008em; text-wrap:balance;}
.ulayer>summary .um{color:var(--slate);}
.ulayer>summary:hover .ut{color:var(--slate);}
.ubody{padding:0 0 var(--s6) var(--s4); border-left:2px solid var(--slate); margin:0 0 var(--s2); font-size:var(--t-note); line-height:1.55; color:var(--ink-soft);}
.grand,.ai-body{background:none; border:0; padding:0;}
.gflag,.ai-flag{display:flex; gap:.5rem; align-items:center; color:var(--slate); margin:.2rem 0 1.2rem;}
.mv{margin:0 0 1.5rem;} .mv:last-child{margin-bottom:0;}
.mv h3{font-size:1.3rem; font-weight:600; color:var(--ink); margin:0 0 var(--s1); display:flex; align-items:baseline; gap:var(--s2); flex-wrap:wrap; text-wrap:balance;}
.mv h3 .rn{font-family:var(--text); font-size:var(--t-label); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); font-weight:500;}
.mv p{margin:0 0 .8rem; text-wrap:pretty;} .mv p:last-child{margin-bottom:0;}
.mv.sola{border-top:1px dotted var(--rule); padding-top:1.2rem; margin-top:1.5rem;} .mv.sola h3{color:var(--slate);}
.pull{font-family:var(--text); font-style:italic; font-size:1.25rem; line-height:1.42; color:var(--ink); border-left:2px solid var(--gold); padding-left:var(--s4); margin:var(--s4) 0;}
.thread{margin:0 0 1.1rem; padding:0 0 1rem; border-bottom:1px dotted var(--rule);} .thread:last-child{border-bottom:0; margin-bottom:0; padding-bottom:0;}
.thread h3{margin:0 0 var(--s1); font-size:1.2rem; font-weight:600; color:var(--ink); text-wrap:balance;}
.thread p{margin:0 0 .45rem;}
.refs{font-size:.86rem; color:var(--slate-soft);} .refs b{color:var(--slate); font-weight:600;}
.vbadge{font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--green); border-bottom:1px solid var(--green-bd); padding:0 .1rem; margin-left:.4rem; white-space:nowrap; font-weight:600;}
.vbadge.flag{color:var(--rubric); border-color:var(--rubric);}
.flagged{color:var(--rubric);}

/* ── 11. COLOPHON, PAGER, BARS ──────────────────────────────────────────────────── */

.apparatus{margin:var(--s7) 0 0; padding-top:var(--s5); border-top:1px solid var(--rule); font-size:.9rem; color:var(--ink-faint); line-height:1.55;}
.apparatus h2{color:var(--ink-soft); margin:0 0 .7rem; font-weight:600;}
.apparatus ul{margin:.5rem 0 0; padding:0; list-style:none;} .apparatus li{margin:.2rem 0;}
.apparatus .cc{margin-top:1rem; padding-top:1rem; border-top:1px dotted var(--rule); font-style:italic; font-size:1.02rem; color:var(--ink-soft);}
.fssb-pager{margin:var(--s6) 0 0; display:grid; grid-template-columns:1fr auto 1fr; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); overflow:hidden;}
.fssb-pager-side{display:flex; flex-direction:column; justify-content:center; gap:.15rem; padding:var(--s4) 0; min-height:5rem; border:0; background:none; transition:transform .18s;}
a.fssb-pager-side:active{transform:scale(.985);}
.fssb-pager-next{text-align:right;} .fssb-pager-empty{opacity:.3;}
.fssb-pager-dir{color:var(--ink-faint);}
.fssb-pager-ref{font-size:1.8rem; font-weight:600; color:var(--rubric); line-height:1.04; letter-spacing:-.015em; transition:color .15s;}
.fssb-pager-side:hover .fssb-pager-ref{color:var(--ink);}
.fssb-pager-title{font-style:italic; font-size:.92rem; color:var(--ink-soft); line-height:1.25;}
.fssb-pager-home{display:flex; align-items:center; justify-content:center; color:var(--gold-ink); padding:0 var(--s5); border:0; white-space:nowrap; min-height:44px;}
.fssb-pager-home:hover{color:var(--rubric);}
.bottombar{position:fixed; left:0; right:0; bottom:0; z-index:85; display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; min-height:3.4rem; background:var(--bar); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--rule-soft); padding:0 max(0px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(0px, env(safe-area-inset-left)); transition:transform .28s cubic-bezier(.2,.7,.2,1);}
.bottombar.is-hidden{transform:translateY(110%);}
.bb-side{display:flex; flex-direction:column; justify-content:center; gap:.05rem; padding:.4rem 1rem; min-height:44px; color:var(--ink-soft); min-width:0;}
.bb-side.bb-empty{visibility:hidden;} .bb-next{text-align:right; align-items:flex-end;}
.bb-dir{color:var(--ink-faint); font-size:.66rem;}
.bb-ref{font-size:1.2rem; font-weight:600; color:var(--rubric); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:36vw;}
.bb-lib-slot{display:flex; align-items:center; justify-content:center; border-left:1px solid var(--rule-soft); border-right:1px solid var(--rule-soft); padding:0 .4rem;}
.mk-lib{position:static; height:44px; padding:0 1rem; border:0; background:none; color:var(--ink-soft); display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; font-size:.9rem; transition:color .18s;}
.mk-lib:hover{color:var(--rubric);}
.mk-lib:active{transform:scale(.96);}
@media (min-width:900px){ .bottombar{display:none;} }
.page-unit main.wrap{padding-bottom:var(--s8);}
.fssb-crumbs{margin:0; padding:var(--s4) 0 0; animation:rise .8s ease both;}
.fssb-crumbs ol{list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:.05rem; margin:0; padding:0;}
.fssb-crumbs li{display:flex; align-items:center; color:var(--ink-faint); white-space:nowrap;}
.fssb-crumbs li + li::before{content:"/"; margin:0 .6rem; color:var(--rule);}
.fssb-crumbs a{color:var(--ink-faint); display:inline-flex; align-items:center; min-height:24px; min-width:24px; padding:0 .15rem; border-bottom:1px solid transparent; transition:color .18s, border-color .18s;}
.fssb-crumbs a:hover{color:var(--rubric); border-color:var(--rubric);}
.fssb-crumbs [aria-current="page"]{color:var(--rubric);}

/* ── 12. COVER, TODAY, THE SHELF, CONTENTS ─────────────────────────────────────── */

.page-home main.wrap{padding:0 max(var(--page-pad), env(safe-area-inset-right)) 0 max(var(--page-pad), env(safe-area-inset-left)); max-width:78rem; margin:0 auto;}
.cover{padding:var(--s8) 0 0; text-align:left; max-width:46rem; margin:0; animation:rise .9s ease both;}
.cover .kicker{color:var(--ink-faint); margin-bottom:var(--s6);}
.cover .kicker b{color:var(--rubric); font-weight:700;}
.cover .ref{font-size:clamp(3.6rem, 1.6rem + 9vw, 9.6rem); line-height:.88; letter-spacing:-.038em; font-weight:800; color:var(--ink); margin:0; text-wrap:balance; animation:rise-slow .9s cubic-bezier(.2,.7,.2,1) both;}
.cover .ref .bk{display:block; font-family:var(--text); font-size:var(--t-label); letter-spacing:.14em; text-transform:uppercase; font-weight:500; color:var(--rubric); margin:0 0 var(--s4);}
.cover .ethos{font-family:var(--text); font-style:italic; color:var(--ink-soft); font-size:clamp(1.35rem,1.05rem + 1.3vw,1.9rem); margin:var(--s6) 0 0; max-width:32rem; line-height:1.38; text-wrap:pretty;}
.cover .ethos .src{color:var(--ox); font-style:normal; font-weight:500;}
.cover .ethos .ai{color:var(--slate); font-style:normal; font-weight:500;}
.acts{font-size:.95rem; color:var(--ink-faint); margin:var(--s4) 0 0; font-style:italic; max-width:32rem; line-height:1.52;}
.acts b{color:var(--ink-soft); font-weight:500; font-style:normal;}
.cover .ornament{margin-top:var(--s6);}
.home-search{position:relative; max-width:46rem; margin:var(--s7) 0 0; animation:rise .9s .08s ease both;}
.hs-field{display:flex; align-items:center; gap:var(--s3); border:0; border-bottom:2px solid var(--ink); background:none; padding:.2rem 0 .3rem; transition:border-color .2s, box-shadow .2s;}
.hs-field:focus-within{border-bottom-color:var(--ox); box-shadow:0 2px 0 0 var(--ox);}
.hs-icn{font-size:1.25rem;}
.hs-input{flex:1; background:none; border:0; outline:none; color:var(--ink); font-family:var(--text); font-style:italic; font-size:max(1.6rem,16px); min-height:56px; min-width:0; text-overflow:ellipsis;}
.hs-input::placeholder{color:var(--ink-faint);}
.hs-input:placeholder-shown,.lx-search input:placeholder-shown,.fssb-ov-input:placeholder-shown{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2.5rem),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 2.5rem),transparent);}
.hs-kbd{color:var(--ink-faint); white-space:nowrap;}
.hs-results{position:absolute; left:0; right:0; top:calc(100% + .4rem); z-index:40; background:var(--bg-a); border:1px solid var(--rule); box-shadow:var(--shadow-lg); list-style:none; margin:0; padding:.35rem; max-height:60vh; overflow:auto; display:none; text-align:left;}
.hs-results.open{display:block;}
.hs-item{display:block; color:var(--ink); padding:.6rem .8rem; border:1px solid transparent; cursor:pointer; min-height:44px; font-size:.95rem;}
.hs-item .r{font-size:1.25rem; font-weight:600; color:var(--rubric);}
.hs-item .t{font-style:italic; color:var(--ink-soft); margin-left:.5rem;}
.hs-item .k{float:right; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:.4rem;}
.hs-item .snip{display:block; font-size:.88rem; color:var(--ink-faint); margin-top:.2rem; line-height:1.4;}
.hs-item .snip b{color:var(--ink); font-weight:600; font-style:normal;}
.hs-item.pending{opacity:.5; cursor:default;} .hs-item.pending .r{color:var(--ink-faint);} .hs-item.pending .k{color:var(--slate);}
.hs-item.active,.hs-item:hover{background:var(--gold-tint);}
.hs-empty{padding:1rem .9rem; color:var(--ink-faint); font-style:italic;}
.hs-tips{color:var(--ink-faint); margin:.9rem 0 0; text-transform:none; letter-spacing:.02em; font-size:.88rem;}
.hs-tips b{color:var(--ink-soft); font-weight:600;}
.home-legend{display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; color:var(--ink-faint); margin:1.4rem 0 0;}
.home-legend .item{display:flex; align-items:center; gap:.5rem;}

.today{max-width:46rem; margin:var(--s8) 0 0; padding-top:var(--s6); border-top:1px solid var(--ink); animation:rise .9s .12s ease both;}
.today-label{color:var(--rubric); margin:0 0 .6rem;}
.votd{min-height:11rem;}   /* reserved so the verse of the day lands without a jump */
.votd-card{display:block; border:0; padding:0; background:none;}
.votd-tag{color:var(--gold-ink); display:flex; align-items:center; gap:var(--s2);}
.votd-text{font-family:var(--text); font-style:italic; font-weight:400; font-size:clamp(1.7rem,1.2rem + 2.2vw,2.9rem); line-height:1.26; color:var(--ink); margin:.8rem 0 .9rem; text-wrap:balance;}
.votd-ref{font-family:var(--display); font-optical-sizing:auto; font-variation-settings:"SOFT" 30,"WONK" 0; font-size:1.3rem; font-weight:600; color:var(--rubric); font-variant-numeric:tabular-nums lining-nums;}
.votd-share{margin:1rem 0 0; background:none; border:1px solid var(--rule); color:var(--ink-soft); padding:0 1rem; min-height:44px; display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; font-size:.9rem; transition:color .18s, border-color .18s;}
.votd-share:hover{color:var(--ox); border-color:var(--ox);}
.votd-share:active{transform:scale(.97);}

/* the two instruments: two lines */
.home-instruments{display:block; max-width:46rem; margin:var(--s7) 0 0; border-top:1px solid var(--rule);}
.home-plans{display:flex; align-items:center; gap:var(--s4); margin:0; padding:var(--s5) 0; border:0; border-bottom:1px solid var(--rule); background:none; color:var(--ink); transition:transform .18s;}
a.home-plans:active{transform:scale(.99);}
.home-plans .pl-ic{font-size:1.4rem; color:var(--rubric); width:2rem; line-height:1; font-family:var(--text);}
.home-plans .pl-ic.heb{font-family:var(--hebrew);}
.home-plans .pl-t{flex:1; min-width:0; display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;}
.home-plans .pl-t b{font-size:1.8rem; font-weight:600; display:inline; line-height:1.04; letter-spacing:-.008em; transition:color .15s;}
.home-plans .pl-t span{font-size:1rem; color:var(--ink-soft); font-style:italic; display:inline; margin:0;}
.home-plans .pl-go{color:var(--ink-faint); font-size:1.4rem; transition:transform .2s var(--spring), color .15s;}
.home-plans:hover .pl-t b{color:var(--rubric);} .home-plans:hover .pl-go{color:var(--rubric); transform:translateX(5px);}

/* the shelf */
.canon-wrap{margin:var(--s8) 0 0; animation:rise .9s .2s ease both;}
.toc-head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; border-bottom:2px solid var(--ink); padding-bottom:var(--s3); margin-bottom:var(--s4);}
.toc-head h2{font-size:var(--t-h2); font-weight:600; margin:0; line-height:1.02; letter-spacing:-.02em; text-wrap:balance;}
.cov{max-width:22rem; flex:1; margin:0;}
.cov-line{color:var(--ink-faint); margin:0 0 var(--s1); line-height:1.5;} .cov-line b{color:var(--gold-ink); font-weight:600;}
.cov-track{height:2px; background:var(--rule); overflow:hidden;} .cov-fill{height:100%; background:var(--gold);}
.shelf{margin:1rem 0 0;}
.shelf-row{margin:0 0 var(--s6);}
.shelf-div{display:flex; align-items:baseline; gap:var(--s3); margin:0 0 var(--s2); font-size:1rem;}
.shelf-div span{font-size:1.15rem; font-weight:600; color:hsl(var(--hue) var(--spine-s) var(--div-l)); letter-spacing:-.008em;}
.shelf-div small{color:var(--ink-faint);}
.spines{display:flex; align-items:flex-end; gap:.45rem; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; padding:1rem .2rem 0; scrollbar-width:none;
  border-bottom:4px solid var(--ink); box-shadow:0 6px 0 -2px color-mix(in oklab, var(--ink) 28%, transparent);}
.spines::-webkit-scrollbar{display:none;}
.spine{position:relative; flex:0 0 auto; scroll-snap-align:start; width:2.7rem; height:calc(7rem + var(--h,.5) * 7.5rem); border-radius:4px 4px 0 0; overflow:hidden;
  background:hsl(var(--hue) var(--spine-s) var(--spine-l)); color:var(--spine-ink); text-decoration:none;
  transform-origin:50% 100%; transition:transform .3s var(--spring), filter .2s; will-change:transform;
  box-shadow:inset 3px 0 0 rgba(255,255,255,.22), inset -3px 0 0 rgba(0,0,0,.22), 0 1px 0 rgba(0,0,0,.2);}
.spine::before{content:""; position:absolute; left:0; right:0; bottom:0; height:calc(var(--fill,0) * 100%); background:var(--gold); opacity:.45;}
.spine::after{content:""; position:absolute; left:.45rem; right:.45rem; top:.55rem; height:2px; background:rgba(255,255,255,.55);}
.spine-title{position:absolute; inset:1.2rem .35rem 1.9rem; writing-mode:vertical-rl; transform:rotate(180deg); display:flex; align-items:center; justify-content:flex-end; font-size:1rem; font-weight:600; letter-spacing:.012em; white-space:nowrap; text-shadow:0 1px 0 rgba(0,0,0,.3);}
.spine-count{position:absolute; left:0; right:0; bottom:.45rem; text-align:center; font-size:.66rem; opacity:.95; letter-spacing:.04em;}
.spine:hover,.spine:focus-visible,.spine.pulled{transform:translateY(-10px) rotate(-2deg); filter:brightness(1.06); z-index:2;}
.spine:active{transform:translateY(-3px) rotate(-.6deg); filter:brightness(1.02); transition-duration:.12s;}
@media (hover:none){ .spine:hover{transform:none; filter:none;} .spine.pulled{transform:translateY(-10px) rotate(-2deg);} }
.spine.ghost{background:none; color:var(--ink-faint); box-shadow:none; border:1px dashed var(--rule); border-bottom:0;}
.spine.ghost::before,.spine.ghost::after{display:none;}
.spine.ghost .spine-title{text-shadow:none; font-weight:500;}
.spine.ghost:hover{transform:translateY(-4px);}

/* contents: the open book's list */
.contents{margin-top:2rem;}
.div-block{border:0; padding:var(--s5) 0 .2rem;}
.div-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:0 0 .3rem; border-bottom:1px solid var(--rule); padding-bottom:.4rem;}
.div-name{color:var(--ink-soft); margin:0; font-weight:600; display:flex; align-items:center; gap:.5rem;}
.div-cov{color:var(--ink-faint);} .div-cov b{color:var(--gold-ink);}
.book-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 2.6rem;}
.book{border:0; background:none; overflow:visible; border-bottom:1px solid var(--rule-soft);}
.book[open]{grid-column:1 / -1; border-color:var(--rule);}
.book[open] > summary{border-bottom:1px solid var(--rule);}
.book > summary{list-style:none; cursor:pointer; padding:.7rem 0 .55rem; display:block; min-height:44px;}
.book > summary::-webkit-details-marker{display:none;}
.book > summary:hover .book-name{color:var(--rubric);}
.book-top{display:flex; align-items:baseline; justify-content:space-between; gap:.6rem;}
.book-name{font-size:1.5rem; font-weight:600; color:var(--ink); transition:color .15s;}
.book-count{color:var(--ink-faint); white-space:nowrap;} .book-count b{color:var(--gold-ink);}
.book-bar{height:2px; background:var(--rule-soft); margin-top:.4rem; overflow:hidden;} .book-bar > i{display:block; height:100%; background:var(--gold);}
.book.none .book-name{color:var(--ink-faint); font-weight:500;} .book.none .book-bar{opacity:.35;}
.book .chev{display:inline-block; color:var(--ink-faint); font-size:.6rem; margin-left:.5rem; transition:transform .2s, color .2s; vertical-align:middle; font-family:var(--text);}
.book[open] .chev{transform:rotate(90deg); color:var(--rubric);}
.pc-list{list-style:none; margin:0; padding:var(--s3) 0 var(--s5); columns:3; column-gap:2.6rem;}
.pc-list > *{break-inside:avoid;}
.pc{display:flex; align-items:baseline; gap:.6rem; padding:.3rem 0;}
a.pc:hover .pc-t{color:var(--rubric);}
.pc .pc-dot{font-size:.65rem;}
.pc .pc-r{color:var(--rubric); font-size:1.15rem; font-weight:600; min-width:3.6rem;}
.pc .pc-t{color:var(--ink-soft); font-style:italic; font-size:.98rem; line-height:1.3; min-width:0; overflow-wrap:anywhere; transition:color .15s;}
.pc.pending{cursor:default; opacity:.45;} .pc.pending .pc-r,.pc.pending .pc-t{color:var(--ink-faint);}
.home-foot{max-width:46rem; margin:var(--s8) 0 0; font-size:.9rem; color:var(--ink-faint); line-height:1.6; padding-top:var(--s6); border-top:1px solid var(--rule);}
.home-foot .verse{font-family:var(--text); font-style:italic; font-size:1.35rem; color:var(--ink-soft); display:block; margin-bottom:.7rem;}
.home-foot .foot-about{margin-top:1rem;}
.home-foot .about-link{color:var(--gold-ink); border-bottom:1px solid var(--rule); display:inline-flex; align-items:center; min-height:44px;}
.home-foot .about-link:hover{border-color:var(--gold-ink); color:var(--rubric);}

/* ── 13. ABOUT: the three voices as three margin notes ──────────────────────────── */

.page-about main.wrap{max-width:var(--content-max); margin:0 auto; padding:0 max(var(--page-pad), env(safe-area-inset-right)) 0 max(var(--page-pad), env(safe-area-inset-left));}
.about-lede{font-family:var(--text); font-style:italic; font-size:clamp(1.45rem,1.1rem + 1.4vw,2.1rem); line-height:1.34; color:var(--ink-soft); margin:1.6rem 0 0; max-width:30rem; text-wrap:pretty; animation:rise .9s .08s ease both;}
.sec{margin:var(--s7) 0 0; animation:rise .8s ease both;}
.sec > h2{font-weight:600; font-size:var(--t-h2); color:var(--ink); margin:0 0 var(--s2); line-height:1.02; letter-spacing:-.02em; text-wrap:balance;}
.sec > h2 .num{display:block; color:var(--rubric); margin-bottom:var(--s3); letter-spacing:.14em;}
.sec > p{color:var(--ink-soft); line-height:1.6; margin:.7rem 0; text-wrap:pretty;}
.sec a{color:var(--rubric); border-bottom:1px solid var(--gold-tint);} .sec a:hover{border-color:var(--rubric);}
.northstar{border:0; border-left:2px solid var(--gold); background:none; padding:.3rem 0 .3rem var(--s5); margin:var(--s5) 0; font-size:1.25rem; line-height:1.42; font-style:italic;}
.northstar p{margin:0;} .northstar b{color:var(--gold-ink); font-weight:600; font-style:normal;}
.auth-grid{display:grid; grid-template-columns:1fr; gap:var(--s5); margin:var(--s5) 0;}
@media (min-width:900px){ .auth-grid{grid-template-columns:1fr 1.2fr 1fr; gap:2rem; align-items:start;} }
.auth{border:0; background:none; padding:.2rem 0 .2rem 1rem; display:flex; flex-direction:column; gap:.4rem; border-left:2px solid var(--rule);}
.auth.word{border-left-color:var(--gold);} .auth.human{border-left-color:var(--ox); font-style:italic;} .auth.ai{border-left-color:var(--slate);}
.auth .mk{font-size:1.4rem;}
.auth h3{font-weight:600; font-size:1.5rem; margin:0; color:var(--ink); font-style:normal;}
.auth.human h3{color:var(--ox);} .auth.ai h3{color:var(--slate);}
.auth .lvl{color:var(--ink-faint); font-style:normal;}
.auth p{font-size:.98rem; line-height:1.5; color:var(--ink-soft); margin:.2rem 0 0;}
.legend.big{margin:1.6rem 0; gap:2rem;}
.verifier{border:0; border-left:2px solid var(--slate); background:none; padding:.2rem 0 .2rem 1.2rem; margin:1.3rem 0;}
.verifier h3{color:var(--slate); margin:0 0 .6rem;}
.verifier ol{margin:0; padding-left:1.2rem; color:var(--ink-soft); line-height:1.6;} .verifier ol li{margin:.35rem 0;}
.verifier code{font-family:ui-monospace,Menlo,monospace; font-size:.82em; color:var(--gold-ink);}
.badge-demo{display:inline-flex; align-items:center; gap:.4rem; margin:.2rem .4rem .2rem 0;}
.stance{border-left:2px solid var(--ox); padding:.2rem 0 .2rem 1.2rem; margin:1.2rem 0; color:var(--ink-soft); line-height:1.6;} .stance b{color:var(--ink);}
.srclist{list-style:none; padding:0; margin:1rem 0;}
.srclist li{padding:.6rem 0; border-bottom:1px dotted var(--rule); color:var(--ink-soft); font-size:.98rem; line-height:1.5;} .srclist li:last-child{border-bottom:0;}
.srclist b{color:var(--ink); font-weight:600;} .srclist .mk{margin-right:.4rem;}
.acts-close{margin:var(--s7) 0 var(--s4); font-family:var(--text); font-style:italic; font-size:1.6rem; line-height:1.36; color:var(--ink-soft); max-width:30rem; text-wrap:pretty;}
.acts-close cite{display:block; font-style:normal; color:var(--rubric); margin-top:.8rem;}
.backhome{display:inline-flex; align-items:center; gap:.4rem; margin:1.4rem 0 0; color:var(--ink-faint); min-height:44px;} .backhome:hover{color:var(--rubric);}

/* ── 14. PLANS ──────────────────────────────────────────────────────────────────── */

.page-plans main.wrap,.page-strongs main.wrap{max-width:var(--content-max); margin:0 auto; padding:0 max(var(--page-pad), env(safe-area-inset-right)) 0 max(var(--page-pad), env(safe-area-inset-left));}
.plans-root,.strongs-root{margin:2rem 0 0;}
.plans-loading{color:var(--ink-faint); font-style:italic;}
.plan-grid{display:block; border-top:2px solid var(--ink);}
.plan-card{display:grid; grid-template-columns:1fr auto; gap:var(--s1) var(--s6); align-items:baseline; color:var(--ink); border:0; border-bottom:1px solid var(--rule); background:none; padding:var(--s5) 0; transition:transform .18s;}
a.plan-card:active{transform:scale(.99);}
.plan-card:hover .plan-title{color:var(--rubric);}
.plan-kind{color:var(--rubric); grid-column:1;}
.plan-title{font-size:2.1rem; font-weight:600; color:var(--ink); display:block; margin:.2rem 0 0; line-height:1.04; letter-spacing:-.015em; grid-column:1; transition:color .15s; text-wrap:balance;}
.plan-sub{font-family:var(--text); font-style:italic; color:var(--ink-soft); font-size:1.15rem; grid-column:1;}
.plan-blurb{font-size:1rem; color:var(--ink-soft); line-height:1.52; margin:var(--s2) 0 0; grid-column:1; max-width:34rem;}
.plan-blurb.centered{max-width:34rem; margin:0 0 1.6rem;}
.plan-meta{display:flex; align-items:center; gap:var(--s3); color:var(--ink-faint); grid-column:2; grid-row:1 / span 4; align-self:center; min-width:8rem; justify-content:flex-end; font-size:var(--t-label); letter-spacing:.08em; text-transform:uppercase;}
.plan-bar{flex:1; height:2px; background:var(--rule); overflow:hidden; max-width:6rem;} .plan-bar i{display:block; height:100%; background:var(--gold); width:0; transition:width .4s;}
.plan-back{display:inline-flex; gap:.4rem; align-items:center; color:var(--ink-faint); margin:0 0 1.2rem; min-height:44px;} .plan-back:hover{color:var(--rubric);}
.plan-h1{font-size:clamp(3rem,1.8rem + 5vw,5.6rem);} .plan-head{padding-top:.5rem;}
body.plan-detail > #main > .masthead{display:none;}
.day{border:0; border-bottom:1px solid var(--rule); background:none; margin:0;}
.day-head{display:flex; align-items:center; gap:var(--s4); padding:var(--s4) 0; cursor:pointer; user-select:none; width:100%; min-height:44px; background:none; border:0; text-align:left; font-family:inherit; color:inherit; transition:transform .15s;}
.day-head:active{transform:scale(.995);}
.day-check{width:26px; height:26px; border-radius:50%; border:1px solid var(--rule); flex:none; display:flex; align-items:center; justify-content:center; color:transparent; transition:all .2s; font-size:.8rem;}
.day.done .day-check{background:var(--rubric); border-color:var(--rubric); color:var(--cream);}
.day-n{color:var(--ink-faint);}
.day-refs{font-size:1.5rem; font-weight:600; color:var(--ink); line-height:1.12;}
.day.done .day-refs{color:var(--ink-faint); text-decoration:line-through; text-decoration-color:var(--rule);}
.day-links{display:flex; flex-wrap:wrap; gap:var(--s1) var(--s4); padding:0 0 var(--s4) 3.6rem;}
.day-link{font-size:.98rem; color:var(--rubric); border-bottom:1px solid var(--gold-tint); display:inline-flex; align-items:center; min-height:44px;} .day-link:hover{border-color:var(--rubric);}
.day-link .dl-t{color:var(--ink-faint); font-style:italic;}
.day-link.pending{color:var(--slate-soft); border-bottom-style:dotted; border-color:var(--slate-bd); cursor:default;}
.plan-progress{display:flex; align-items:center; gap:var(--s3); margin:0 0 var(--s4); font-size:.95rem; color:var(--ink-soft); border-bottom:1px solid var(--rule); padding-bottom:var(--s4); font-variant-numeric:tabular-nums lining-nums;}
.plan-reset{margin-left:auto; background:none; border:0; border-bottom:1px solid var(--rule); color:var(--ink-faint); cursor:pointer; padding:.3rem 0; min-height:44px;} .plan-reset:hover{border-color:var(--rubric); color:var(--rubric);}

/* ── 15. CONCORDANCE ────────────────────────────────────────────────────────────── */

.lx-search{border-bottom:2px solid var(--ink); transition:border-color .2s, box-shadow .2s;}
.lx-search:focus-within{border-bottom-color:var(--ox); box-shadow:0 2px 0 0 var(--ox);}
.lx-search input{width:100%; font-family:var(--text); font-style:italic; font-size:max(1.4rem,16px); color:var(--ink); background:none; border:0; border-radius:0; padding:.6rem 0; min-height:56px; outline:none; text-overflow:ellipsis;}
.lx-stat{color:var(--ink-faint); margin:var(--s4) 0 var(--s6); text-transform:none; letter-spacing:.02em; font-size:.92rem;}
.lx-h{color:var(--ink-soft); margin:0 0 .4rem; padding-bottom:.5rem; border-bottom:1px solid var(--rule);}
.lx-chips{display:block; columns:3; column-gap:2.4rem;}
.lx-chip{display:flex; align-items:baseline; gap:var(--s2); border:0; border-bottom:1px dotted var(--rule); background:none; padding:.55rem 0; min-height:44px; break-inside:avoid; transition:transform .15s;}
.lx-chip:active{transform:scale(.99);}
.lx-chip:hover .lx-t{color:var(--rubric);}
.lx-chip .lx-s{font-size:.72rem; letter-spacing:.08em; color:var(--ink-faint); min-width:3.6rem;}
.lx-chip .lx-t{font-family:var(--text); font-style:italic; color:var(--ink); font-size:1.15rem; flex:1; transition:color .15s;}
.lx-chip .lx-n{font-size:.78rem; color:var(--rubric); font-weight:600;}
.lx-head{border-bottom:1px solid var(--rule); padding:0 0 1.4rem; margin:0 0 1.6rem;}
.lx-lemma{font-family:var(--hebrew),var(--greek),var(--display); font-size:clamp(3rem,1.8rem + 5vw,5.8rem); color:var(--ink); line-height:1.08; margin:0;}
.lx-lemma.rtl{direction:rtl;}
.lx-sub{font-size:.98rem; color:var(--ink-soft); margin:.6rem 0 0;} .lx-sub b{color:var(--rubric); font-weight:600;} .lx-sub i{color:var(--ink);}
.lx-def{font-size:1.3rem; line-height:1.45; color:var(--ink); margin:1rem 0 0; text-wrap:pretty; font-style:italic;}
.lx-note{font-size:.85rem; color:var(--ink-faint); margin:1rem 0 0; font-style:italic;}
.lx-block{margin:0 0 1.6rem;}
.lx-unit{display:inline-flex; align-items:center; min-height:44px; font-size:1.45rem; font-weight:600; color:var(--rubric); border-bottom:1px solid var(--gold-tint); margin:0 0 var(--s1);}
.lx-unit:hover{border-color:var(--rubric);} .lx-unit.pending{color:var(--slate-soft); border-color:var(--slate-bd); border-style:dotted;}
.lx-occ{display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem .9rem; padding:.45rem 0 .45rem 1rem; border-left:1px solid var(--rule); margin:0 0 .2rem;}
.lx-occ .lx-ref{font-size:.76rem; letter-spacing:.06em; color:var(--ink-faint); min-width:7rem; font-variant-numeric:tabular-nums lining-nums;}
.lx-occ .lx-w{font-family:var(--hebrew),var(--greek),serif; font-size:1.3rem; color:var(--ink);} .lx-occ .lx-w.rtl{direction:rtl;}
.lx-occ .lx-g{font-style:italic; color:var(--ink-soft); font-size:.95rem;}
.lx-more{font-size:.88rem; color:var(--ink-faint); margin:1.2rem 0 0; font-style:italic;}
.canon{max-width:760px; margin:0;}
.ucard{display:block; color:var(--ink); border:0; border-bottom:1px solid var(--rule); background:none; padding:1.1rem 0; margin:0;}
.uref{font-size:1.7rem; color:var(--rubric); display:block; font-weight:600;}
.utitle{font-family:var(--text); font-style:italic; font-size:1.2rem; color:var(--ink); display:block; margin:.15rem 0 .4rem;}
.umeta{font-size:.8rem; color:var(--ink-faint);} .await{color:var(--slate); margin-left:.5rem;}
.coverage{font-size:.85rem; color:var(--ink-faint); margin:var(--s5) 0 var(--s6);} .coverage b{color:var(--gold-ink);}

/* ── 16. SEARCH OVERLAY, APPEARANCE PANEL, LIBRARY, PARALLEL ────────────────────── */

.fssb-ov{position:fixed; inset:0; z-index:200; display:none; align-items:flex-start; justify-content:center; background:var(--scrim); backdrop-filter:blur(6px); padding:10vh 1rem 2rem;}
.fssb-ov.open{display:flex; animation:fssbfade .18s ease-out both;}
@keyframes fssbfade{from{opacity:0}to{opacity:1}}
.fssb-ov-card{width:min(700px,100%); background:var(--bg-a); border:1px solid var(--rule); box-shadow:var(--shadow-lg); overflow:hidden;}
.fssb-ov-bar{display:flex; align-items:center; gap:.8rem; padding:.5rem 1.2rem; border-bottom:2px solid var(--ink); transition:border-color .2s;}
.fssb-ov-bar:focus-within{border-color:var(--ox);}
.fssb-ov-icn{font-size:1.2rem;}
.fssb-ov-input{flex:1; background:none; border:0; outline:none; color:var(--ink); font-family:var(--text); font-style:italic; font-size:max(1.5rem,16px); min-height:56px; min-width:0; text-overflow:ellipsis;}
.fssb-ov-input::placeholder{color:var(--ink-faint);}
.fssb-ov-esc{color:var(--ink-faint);}
.fssb-ov-list{list-style:none; margin:0; padding:.35rem; max-height:54vh; overflow:auto;}
.fssb-ov-item{display:block; color:var(--ink); padding:.6rem .9rem; cursor:pointer; border:1px solid transparent; min-height:44px; font-size:.95rem;}
.fssb-ov-item .r{font-size:1.25rem; font-weight:600; color:var(--rubric);}
.fssb-ov-item .t{font-style:italic; color:var(--ink-soft); margin-left:.5rem;}
.fssb-ov-item .k{float:right; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:.4rem;}
.fssb-ov-item .snip{display:block; font-size:.88rem; color:var(--ink-faint); margin-top:.2rem; line-height:1.4;} .fssb-ov-item .snip b{color:var(--ink); font-weight:600; font-style:normal;}
.fssb-ov-item.pending{opacity:.5; cursor:default;} .fssb-ov-item.pending .r{color:var(--ink-faint);} .fssb-ov-item.pending .k{color:var(--slate);}
.fssb-ov-item.active,.fssb-ov-item:hover{background:var(--gold-tint);}
.fssb-ov-hint{padding:.6rem 1.2rem; border-top:1px solid var(--rule-soft); font-size:.82rem; color:var(--ink-faint);} .fssb-ov-hint b{color:var(--ink-soft); font-weight:600;}
.fssb-ov-empty{padding:1rem .9rem; color:var(--ink-faint); font-style:italic;}
.fssb-panel{position:fixed; top:calc(var(--bar-h) + .5rem); right:1rem; z-index:95; width:300px; max-width:calc(100vw - 2rem); background:var(--bg-a); border:1px solid var(--rule); padding:1rem 1.05rem 1.1rem; box-shadow:var(--shadow-lg); animation:fssb-pop .18s ease-out both;}
@keyframes fssb-pop{from{opacity:0; transform:translateY(-6px);}to{opacity:1; transform:none;}}
.fssb-sec{margin:0 0 1rem;} .fssb-sec:last-child{margin-bottom:0;}
.fssb-sec-h{color:var(--ink-faint); margin:0 0 .55rem;}
.fssb-grid{display:grid; gap:.5rem;} .fssb-themes{grid-template-columns:1fr 1fr;}
.fssb-sw{display:flex; align-items:center; gap:.5rem; border:1px solid var(--rule); background:none; padding:.4rem .5rem; min-height:44px; cursor:pointer; color:var(--ink-soft); transition:border-color .18s, color .18s; font-family:inherit;}
.fssb-sw:hover{border-color:var(--ox); color:var(--ink);} .fssb-sw.on{border-color:var(--rubric); color:var(--ink);}
.fssb-sw:active{transform:scale(.97);}
.fssb-chip{position:relative; width:26px; height:26px; border:1px solid; flex:none; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.fssb-chip-a{position:absolute; right:-5px; bottom:-5px; width:15px; height:15px; border-radius:50%;}
.fssb-chip-t{font-size:.72rem; font-family:var(--display); line-height:1;}
.fssb-sw-name{font-size:.9rem;}
.fssb-accents{grid-template-columns:repeat(4,1fr); gap:.5rem;}
.fssb-dot{width:100%; aspect-ratio:1/1; min-width:44px; min-height:44px; border-radius:50%; border:2px solid transparent; background:var(--c); cursor:pointer; padding:0; position:relative; box-shadow:0 0 0 1px rgba(0,0,0,.12) inset; transition:transform .15s var(--spring);}
.fssb-dot:hover{transform:scale(1.1);} .fssb-dot.on{box-shadow:0 0 0 2px var(--bg-a),0 0 0 4px var(--c);}
.fssb-seg{display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--rule); overflow:hidden;}
.fssb-seg-b{background:none; border:0; border-left:1px solid var(--rule); cursor:pointer; color:var(--ink-faint); padding:.5rem 0; min-height:44px; line-height:1; font-family:var(--display); font-optical-sizing:auto; font-variation-settings:"SOFT" 30,"WONK" 0; font-weight:600; font-size:1.05rem; transition:background .15s, color .15s;}
.fssb-seg-b:first-child{border-left:0;} .fssb-seg-b:hover{color:var(--ink);} .fssb-seg-b.on{background:var(--gold-tint); color:var(--rubric);}
.verse-unit[data-hl="gold"] .verse-en{background:var(--hl-gold); box-shadow:0 0 0 .35em var(--hl-gold);}
.verse-unit[data-hl="green"] .verse-en{background:var(--hl-green); box-shadow:0 0 0 .35em var(--hl-green);}
.verse-unit[data-hl="blue"] .verse-en{background:var(--hl-blue); box-shadow:0 0 0 .35em var(--hl-blue);}
.verse-unit[data-hl="rose"] .verse-en{background:var(--hl-rose); box-shadow:0 0 0 .35em var(--hl-rose);}
.verse-unit[data-hl="violet"] .verse-en{background:var(--hl-violet); box-shadow:0 0 0 .35em var(--hl-violet);}
.mk-btn{background:none; border:0; color:var(--ink-faint); cursor:pointer; font-size:1rem; padding:0; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; line-height:1; border-radius:50%; transition:color .18s;}
.mk-btn:hover{color:var(--rubric);}
.mk-btn:active{transform:scale(.9); color:var(--rubric);}
.verse-head .mk-flag{font-size:.8rem;}
.mk-pop{position:absolute; z-index:70; background:var(--bg-a); border:1px solid var(--rule); box-shadow:var(--shadow-lg); padding:.85rem .9rem; width:270px; max-width:calc(100vw - 2rem);}
.mk-swatches{display:flex; gap:.4rem; margin:0 0 .7rem;}
.mk-sw{width:44px; height:44px; border-radius:50%; border:2px solid var(--rule); cursor:pointer; padding:0;}
.mk-sw.on{box-shadow:0 0 0 2px var(--bg-a),0 0 0 4px var(--rubric);}
.mk-sw.none{display:flex; align-items:center; justify-content:center; color:var(--ink-faint); font-size:.9rem; background:none;}
.mk-row{display:flex; gap:.5rem; margin:0 0 .6rem;}
.mk-act{flex:1; display:flex; align-items:center; justify-content:center; gap:.35rem; border:1px solid var(--rule); background:none; color:var(--ink-soft); cursor:pointer; font-family:inherit; font-size:.9rem; padding:.4rem 0; min-height:44px;}
.mk-act.on{border-color:var(--rubric); color:var(--rubric);}
.mk-act:active{transform:scale(.97);}
.mk-note{width:100%; min-height:64px; resize:vertical; font-family:inherit; font-size:max(1rem,16px); color:var(--ink); background:none; border:1px solid var(--rule); padding:.5rem .6rem; outline:none;}
.mk-note:focus{border-color:var(--ox);}
.verse-unit .mk-noteshow{margin:.7rem 0 0; padding:.4rem 0 .4rem 1rem; border-left:2px solid var(--gold); font-size:1rem; color:var(--ink-soft); font-style:italic;}
.mk-overlay{position:fixed; inset:0; z-index:80; background:var(--scrim); display:flex; justify-content:center; align-items:flex-start; padding:5vh 1rem; overflow:auto;}
.mk-panel{background:var(--bg-a); border:1px solid var(--rule); max-width:640px; width:100%; padding:1.6rem 1.7rem; box-shadow:var(--shadow-lg);}
.mk-panel h2{font-size:2.3rem; font-weight:600; margin:0 0 .2rem; color:var(--ink); letter-spacing:-.02em;}
.mk-tabs{display:flex; gap:1.2rem; margin:1rem 0; border-bottom:1px solid var(--rule);}
.mk-tab{border:0; border-bottom:2px solid transparent; background:none; color:var(--ink-faint); cursor:pointer; font-family:inherit; font-size:.92rem; padding:.4rem 0; min-height:44px; margin-bottom:-1px;}
.mk-tab.on{border-color:var(--rubric); color:var(--rubric);}
.mk-item{display:block; color:var(--ink); border-bottom:1px dotted var(--rule); padding:.75rem 0; min-height:44px;} .mk-item:hover .mk-iref{color:var(--rubric);}
.mk-iref{font-size:1.4rem; font-weight:600; color:var(--ink);}
.mk-isnip,.mk-inote{font-size:.92rem; color:var(--ink-soft);} .mk-inote{font-style:italic; margin-top:.2rem;}
.mk-dot{display:inline-block; width:.6rem; height:.6rem; border-radius:50%; margin-right:.4rem; vertical-align:middle;}
.mk-empty{color:var(--ink-faint); text-align:center; padding:2rem 0; font-style:italic;}
.mk-x{float:right; background:none; border:0; color:var(--ink-faint); font-size:1.4rem; cursor:pointer; line-height:1; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%;} .mk-x:hover{color:var(--rubric);}
.par-sw{position:relative; width:42px; height:23px; border-radius:12px; border:1px solid var(--rule); background:none; cursor:pointer; transition:border-color .2s; padding:0;}
.par-sw::before{content:""; position:absolute; inset:-12px -13px;}
.par-sw::after{content:""; position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:var(--ink-faint); transition:transform .2s var(--spring), background .2s;}
.par-sw.on{border-color:var(--rubric);} .par-sw.on::after{transform:translateX(19px); background:var(--rubric);}
.par-lbl b{color:var(--ink-soft); font-weight:600;}
.par-kjv{margin:.6rem 0 .2rem; padding:.7rem 0 0; border-top:1px dotted var(--rule);}
.par-tag,.par-bsb-tag{font-size:var(--t-label); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 .3rem; font-weight:500;}
.par-bsb-tag{color:var(--rubric); display:none;} .parallel-on .par-bsb-tag{display:block;}
.par-kjv-txt{font-family:var(--text); font-size:clamp(1.2rem,1rem + .9vw,1.55rem); line-height:1.42; color:var(--ink-soft);}

/* ── 16b. DISCLOSURE ────────────────────────────────────────────────────────────── */

/* Every fold on the page opens by growing rather than by appearing. ::details-content is
   the only way to do this without script; where the engine has not got it, the fold still
   opens, just instantly. The chevron turn is in sections 8 and 12. */
@supports selector(::details-content) {
  .sub,.voices,.ulayer,.book,details.words{interpolate-size:allow-keywords;}
  .sub::details-content,.voices::details-content,.ulayer::details-content,
  .book::details-content,details.words::details-content{
    block-size:0; overflow-y:clip;
    transition:block-size .22s ease-out, content-visibility .22s allow-discrete;}
  .sub[open]::details-content,.voices[open]::details-content,.ulayer[open]::details-content,
  .book[open]::details-content,details.words[open]::details-content{block-size:auto;}
}

/* ── 17. RESPONSIVE ─────────────────────────────────────────────────────────────── */

@media (max-width:899px){
  .topbar{gap:var(--s2); padding:env(safe-area-inset-top) max(.6rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));}
  .topbar-brand{font-size:1.15rem; max-width:62vw;}
  .topbar-loc{display:none;}
  .book-grid{grid-template-columns:1fr 1fr; gap:0 1.8rem;}
  .pc-list,.lx-chips{columns:2; column-gap:1.8rem;}
  .verse-unit > *{grid-column:1;}
  .margin-notes{order:3;} .margin-voices{order:4;}
  /* a narrow column rags badly on long transliterated words; the margins may hyphenate */
  .margin-notes,.margin-voices,.diverge li,.wnote{hyphens:auto;}
}
@media (max-width:560px){
  .opening{padding:2rem 0 1.8rem;}
  .opening .kicker{margin-bottom:1.4rem; font-size:.62rem;}
  .opening .ref{font-size:clamp(5.6rem, 2rem + 22vw, 8rem);}
  .opening .ref .bk{margin-bottom:.8rem;}
  .opening .subt{margin-top:1rem; font-size:1.35rem;}
  .front{padding-top:1.4rem;}
  .warning{font-size:.95rem; margin-bottom:1.2rem;}
  .unit-intro{margin-bottom:1.2rem; padding-bottom:1.1rem; font-size:.95rem;}
  .vnav{margin-bottom:1rem;} .vnav a{min-height:40px; min-width:40px;}
  .verse-unit{padding:1.6rem 0 1.8rem;}
  .cover{padding-top:2.4rem;} .cover .kicker{margin-bottom:1.4rem;}
  .home-plans .pl-t{display:block;} .home-plans .pl-t span{display:block; margin-top:.25rem;}
  .book-grid{grid-template-columns:1fr;} .pc-list,.lx-chips{columns:1;}
  .toc-head{align-items:flex-start;} .cov{max-width:none; width:100%;}
  .hs-kbd{display:none;}
  .spine{width:2.75rem; height:calc(6rem + var(--h,.5) * 6rem);}
  .plan-card{grid-template-columns:1fr;} .plan-meta{grid-column:1; grid-row:auto; justify-content:flex-start; margin-top:.6rem;}
  .fssb-pager{grid-template-columns:1fr;} .fssb-pager-next{text-align:left; border-top:1px solid var(--rule);} .fssb-pager-empty{display:none;}
  .fssb-pager-home{order:3; border-top:1px solid var(--rule); padding:.7rem 0;}
  .fssb-panel{top:auto; bottom:4rem; right:1rem; left:1rem; width:auto; max-width:none;}
  .day-links{padding-left:0;}
}
@media (pointer:coarse){ .pc{min-height:44px; align-items:center; padding:.35rem 0;} .fssb-crumbs a{min-height:44px;} .spine{min-width:44px;} .lx-chip{min-height:48px;} }

@keyframes rise{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

/* Reduced motion: the lift spring, the ribbon, the disclosures, the numeral rise and the
   landing wash all stop. The bar keeps its rule, because there is no longer a scroll
   animation to draw it. */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto;}
  html{scroll-behavior:auto;}
  .ribbon{transition:none;}
  .topbar{border-bottom-color:var(--rule-soft); animation:none;}
  @supports selector(::details-content) {
    .sub::details-content,.voices::details-content,.ulayer::details-content,
    .book::details-content,details.words::details-content{block-size:auto; overflow:visible;}
    .sub:not([open])::details-content,.voices:not([open])::details-content,
    .ulayer:not([open])::details-content,.book:not([open])::details-content,
    details.words:not([open])::details-content{block-size:0;}
  }
}

/* ── 18. THE KEYS, CONTINUE, 404, PRINT ─────────────────────────────────────────── */

.verse-unit.is-landed{animation:land .9s cubic-bezier(.2,.7,.2,1) both;}
.keys{position:fixed; left:50%; bottom:max(1.2rem, env(safe-area-inset-bottom)); z-index:90; transform:translate(-50%, 12px); opacity:0; pointer-events:none;
  background:var(--bar); color:var(--ink); border:1px solid var(--rule); box-shadow:0 12px 40px rgba(0,0,0,.25); padding:var(--s4) var(--s5); min-width:16rem;
  transition:transform .22s var(--spring), opacity .18s;}
.keys.in{transform:translate(-50%, 0); opacity:1; pointer-events:auto;}
.keys-t{margin:0 0 .5rem; font-family:var(--display); font-weight:600; font-size:1.1rem; color:var(--rubric);}
.keys dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:.35rem .9rem; align-items:baseline; font-size:.92rem;}
.keys dt{margin:0; white-space:nowrap;} .keys dd{margin:0; color:var(--ink-soft);}
.keys kbd{display:inline-block; min-width:1.5em; padding:.05em .4em; border:1px solid var(--rule); border-bottom-width:2px; border-radius:.25em; font-family:var(--text); font-size:.85em; text-align:center; color:var(--ink);}
.keys-n{margin:.7rem 0 0; font-size:.82rem; color:var(--ink-faint); font-style:italic;}
@media (hover:none){ .keys{display:none;} }

.continue{display:flex; align-items:center; gap:.9rem; margin:var(--s4) 0 0; padding:var(--s3) 0; border-top:1px dotted var(--rule); color:var(--ink); text-decoration:none; transition:color .15s;}
.continue-lbl{font-size:var(--t-label); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap;}
.continue-ref{font-family:var(--display); font-weight:600; font-size:1.35rem; color:var(--rubric); line-height:1.1; transition:color .15s;}
.continue-go{margin-left:auto; color:var(--ink-faint); font-size:1.4rem; transition:transform .2s var(--spring), color .15s;}
.continue:hover .continue-ref{color:var(--ink);} .continue:hover .continue-go{transform:translateX(4px); color:var(--rubric);}
.continue:focus-visible{outline:2px solid var(--rubric); outline-offset:4px;}

.notfound{max-width:40rem; padding:var(--s8) 0 var(--s9); animation:rise .9s ease both;}
.notfound .kicker{color:var(--ink-faint);}
.notfound .ref{margin:.2em 0 .3em; font-size:clamp(5rem, 2rem + 14vw, 12rem); line-height:.9; color:var(--rubric);}
.notfound .ref .num{font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;}
.nf-lead{font-size:1.35rem; line-height:1.4; margin:0 0 .5rem; color:var(--ink);}
.nf-note{color:var(--ink-soft); margin:0 0 var(--s5); line-height:1.5;}
.nf-actions{display:flex; flex-wrap:wrap; gap:.6rem; margin:0 0 var(--s6);}
.nf-btn{display:inline-flex; align-items:center; min-height:44px; padding:0 1.1rem; border:1px solid var(--ink); background:none; color:var(--ink); font:inherit; font-size:.95rem; cursor:pointer; text-decoration:none;
  transition:transform .18s var(--spring), background .15s, color .15s;}
.nf-btn:hover{background:var(--ink); color:var(--bg-a);} .nf-btn:active{transform:scale(.97);}
.nf-btn:focus-visible{outline:2px solid var(--rubric); outline-offset:3px;}
.nf-verse{font-style:italic; color:var(--ink-soft);} .nf-verse .src{font-style:normal; color:var(--gold-ink); font-size:.9em; margin-left:.4rem;}

@media print{
  :root, [data-theme]{--bg-a:#fff; --bg-b:#fff; --bg-c:#fff; --ink:#000; --ink-soft:#222; --ink-faint:#555; --rule:#999; --rule-soft:#ccc; --bar:#fff;}
  body{background:#fff !important; color:#000;}
  .topbar,.bottombar,.ribbon,.skip-link,.vnav,.fssb-crumbs,.fssb-pager,.bloom,.keys,.vtools,.votd-share,.fssb-cog,.tb-btn,.warning .legend{display:none !important;}
  main.wrap{padding:0; max-width:none;}
  .verse-unit,.voice,.literal,.ulayer{break-inside:avoid;}
  details>summary{list-style:none;} details>summary .chev{display:none;}
  a{color:inherit; text-decoration:none;}
  .apparatus{font-size:.8rem;}
}
@media (prefers-reduced-motion:reduce){ .keys,.continue-go,.nf-btn{transition:none;} .verse-unit.is-landed,.notfound{animation:none;} }