/* ============================================================
   Saulved · Faith & Writing — shared stylesheet
   Reverent, readable typographic theme (parchment / Garamond)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Cormorant+Garamond:wght@500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root{
  --ink:        #2a2420;
  --ink-soft:   #4d463f;
  --parchment:  #f7f3ea;
  --paper:      #fffdf8;
  --rule:       #e3dac8;
  --gold:       #9a7b3f;
  --gold-soft:  #bfa06a;
  --quote-bg:   #f2ecdd;
  --maxw:       720px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'EB Garamond', Georgia, 'Times New Roman', serif;
  font-size:1.18rem;
  line-height:1.72;
  color:var(--ink);
  background:var(--parchment);
  -webkit-font-smoothing:antialiased;
}

/* ---- sticky top bar ---- */
.topbar{
  border-bottom:1px solid var(--rule);
  background:rgba(255,253,248,0.9);
  backdrop-filter:saturate(120%) blur(4px);
  position:sticky; top:0; z-index:10;
}
.topbar-inner{
  max-width:var(--maxw); margin:0 auto;
  padding:0.85em 1.4em;
  display:flex; align-items:center; justify-content:space-between; gap:1em;
}
.topbar a.brand{
  font-family:'Cormorant Garamond', serif;
  font-weight:700; font-size:1.25rem; letter-spacing:0.02em;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.topbar nav{display:flex; gap:1.3em; align-items:center;}
.topbar nav a{
  font-size:0.92rem; color:var(--gold); text-decoration:none; letter-spacing:0.03em;
  white-space:nowrap;
}
.topbar nav a:hover, .topbar nav a.active{color:var(--ink);}

/* ---- page wrap ---- */
main{max-width:var(--maxw); margin:0 auto; padding:3.5em 1.4em 5em;}

header.doc{ text-align:center; margin-bottom:2.8em; }
.eyebrow{
  font-family:'Cormorant Garamond', serif;
  text-transform:uppercase; letter-spacing:0.32em;
  font-size:0.82rem; color:var(--gold); font-weight:600;
  display:block; margin-bottom:1.1em;
}
header.doc h1{
  font-family:'Cormorant Garamond', serif;
  font-weight:700; font-size:2.9rem; line-height:1.12;
  margin:0 0 0.35em; color:var(--ink);
}
header.doc .subtitle{
  font-style:italic; font-size:1.22rem; color:var(--ink-soft); margin:0;
}

.ornament{
  text-align:center; color:var(--gold-soft);
  letter-spacing:0.6em; font-size:1.1rem; margin:2.2em 0;
}

/* ---- body type ---- */
p{margin:0 0 1.25em;}
.lede::first-letter{
  font-family:'Cormorant Garamond', serif;
  font-size:3.4rem; line-height:0.8; font-weight:700;
  float:left; margin:0.08em 0.1em 0 0; color:var(--gold);
}

h2{
  font-family:'Cormorant Garamond', serif;
  font-weight:700; font-size:1.95rem; line-height:1.2;
  margin:2.4em 0 0.7em; color:var(--ink);
  padding-bottom:0.25em; border-bottom:1px solid var(--rule);
}
h3{
  font-family:'Cormorant Garamond', serif;
  font-weight:700; font-size:1.35rem; margin:1.8em 0 0.5em; color:var(--ink);
}

a{color:var(--gold);}
a:hover{color:var(--ink);}

/* scripture reference links (biblehub) */
a.ref{
  color:var(--gold); text-decoration:none;
  border-bottom:1px dotted var(--gold-soft); white-space:nowrap;
}
a.ref:hover{ color:var(--ink); border-bottom-color:var(--ink); }
/* Words of Christ (red-letter), in deep purple */
.woc{ color:#7a00c8; }
/* Words of the Spirit, in baby blue (deepened tint — pure #89CFF0 is illegible on the cream) */
.wos{ color:#2C7AB8; }
/* The divine Name (LORD, GOD, God, Jehovah), gilded (deepened gold — bright gilt is illegible inline on the cream) */
.wog{ color:#A67C00; font-weight:600; }
/* God's narrative spoken words + the angel of the LORD: the fancy old-Bible blackletter, gilt gold */
.wog-fancy{
  font-family:'Playfair Display','Cormorant Garamond',serif; font-weight:700; font-size:1.15em;
  background:linear-gradient(176deg,#C99B33 0%,#B07E12 46%,#8A6209 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#9A7212;
}
/* God's reported speech through a prophet: the same gilt, on the normal reading serif
   (it shines, it does not blaze — Playfair is reserved for God in person). listen.js wraps the letters. */
.wog-gild{ font-weight:600; color:#9A7212; }
/* IndLetter: each letter gilded top-to-dark on its own (listen.js wraps letters in .glyph).
   God in person (.wog-fancy) blazes on Playfair; the prophet's word (.wog-gild) shines on the
   normal serif; both share the one deepened gilt. Color/font only — no letter changed. */
.wog-fancy .glyph, .sg-fancy .glyph, .wog-gild .glyph{
  display:inline-block;
  background:linear-gradient(176deg,#C99B33 0%,#B07E12 46%,#8A6209 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#9A7212;
}
/* Christ's words: the luminous purple gild (the Names-of-Christ look), gilded per-letter like the gold.
   listen.js wraps each letter in .glyph. Color/font only — no letter changed. */
.woc-gild{ font-family:'Cormorant Garamond','EB Garamond',serif; font-weight:700; color:#7a00c8; }
.woc-gild .glyph{
  display:inline-block;
  background:linear-gradient(176deg,#B23BDD 0%,#7a00c8 42%,#3E0070 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#7a00c8;
  filter:drop-shadow(0 1px 1px rgba(40,0,60,0.5));
}
[data-theme="dark"] .woc-gild .glyph{
  background:linear-gradient(176deg,#E6B8FF 0%,#C290F0 42%,#9B5BD6 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:#C290F0; filter:none;
}
/* God's gilt on dark: a brighter deepened gold so it reads on the dark parchment */
[data-theme="dark"] .wog-fancy .glyph,
[data-theme="dark"] .sg-fancy .glyph,
[data-theme="dark"] .wog-gild .glyph{
  background:linear-gradient(176deg,#F2D267 0%,#E0B22C 46%,#C18E1C 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:#E6B83A;
}

/* study-the-passages list */
ul.study{ list-style:none; padding:0; margin:1.2em 0; column-width:220px; column-gap:2em; }
ul.study li{ margin:0 0 0.5em; padding-left:1.1em; text-indent:-1.1em; }
ul.study li::before{ content:"\1F4D6"; margin-right:0.45em; }

/* ---- numbered points ---- */
ol.points{ list-style:none; counter-reset:pt; padding:0; margin:1.5em 0; }
ol.points li{
  counter-increment:pt; position:relative; padding:0 0 0 2.6em; margin:0 0 1.15em;
}
ol.points li::before{
  content:counter(pt);
  position:absolute; left:0; top:0.05em;
  font-family:'Cormorant Garamond', serif; font-weight:700; font-size:1.05rem;
  color:var(--paper); background:var(--gold);
  width:1.7em; height:1.7em; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
ol.points li b{ color:var(--ink); }

/* ---- parallel scripture comparison ---- */
.parallel{ display:grid; grid-template-columns:1fr 1fr; gap:1.1em; margin:1.8em 0; }
.parallel .col{
  background:var(--paper); border:1px solid var(--rule);
  border-top:3px solid var(--gold-soft);
  padding:1.3em 1.4em; border-radius:3px;
}
.parallel .cite{
  font-family:'Cormorant Garamond', serif; font-weight:700;
  font-size:1.05rem; letter-spacing:0.04em; color:var(--gold);
  text-transform:uppercase; margin-bottom:0.6em; display:block;
}
.parallel p{ font-size:1.04rem; line-height:1.6; margin:0; font-style:italic; }

/* ---- single scripture quote ---- */
blockquote.scripture{
  background:var(--quote-bg); border-left:3px solid var(--gold);
  margin:1.6em 0; padding:1.1em 1.4em; border-radius:0 3px 3px 0;
}
blockquote.scripture .cite{
  display:block; font-family:'Cormorant Garamond', serif; font-weight:700;
  font-size:1rem; letter-spacing:0.04em; color:var(--gold);
  text-transform:uppercase; margin-bottom:0.45em;
}
blockquote.scripture p{ font-style:italic; margin:0; font-size:1.06rem; line-height:1.62; }

/* quote with attribution beneath (witness blocks) */
blockquote.vq{
  background:var(--quote-bg); border-left:3px solid var(--gold);
  margin:1.5em 0; padding:1em 1.3em; border-radius:0 3px 3px 0;
}
blockquote.vq p{ font-style:italic; margin:0 0 0.5em; font-size:1.05rem; line-height:1.62; color:var(--ink); }
blockquote.vq cite{
  display:block; font-style:normal; font-family:'Cormorant Garamond', serif; font-weight:700;
  font-size:0.92rem; letter-spacing:0.03em; color:var(--gold);
}

/* ---- callout box ---- */
.callout{
  background:var(--paper); border:1px solid var(--rule); border-left:4px solid var(--gold);
  padding:1.2em 1.5em; margin:1.8em 0; border-radius:0 4px 4px 0;
}
.callout .label{
  font-family:'Cormorant Garamond', serif; font-weight:700; text-transform:uppercase;
  letter-spacing:0.06em; font-size:0.92rem; color:var(--gold); display:block; margin-bottom:0.4em;
}
.callout p:last-child{margin-bottom:0;}

/* "The teaching addressed" — the actual modern claim a page answers, quoted briefly */
.addressed{
  background:var(--quote-bg); border:1px solid var(--rule); border-left:4px solid var(--gold-soft);
  padding:1.1em 1.4em; margin:1.9em 0; border-radius:0 4px 4px 0;
}
.addressed .label{
  font-family:'Cormorant Garamond',serif; font-weight:700; text-transform:uppercase;
  letter-spacing:0.06em; font-size:0.9rem; color:var(--gold); display:block; margin-bottom:0.5em;
}
.addressed blockquote{ margin:0 0 0.55em; font-style:italic; font-size:1.08rem; line-height:1.55; }
.addressed blockquote .src{ display:block; font-style:normal; font-size:0.9rem; color:var(--ink-soft); margin-top:0.45em; }
.addressed p:last-child{ margin:0; font-size:0.98rem; color:var(--ink-soft); }

/* ---- simple data table (dating, etc.) ---- */
table.data{
  width:100%; border-collapse:collapse; margin:1.6em 0; font-size:1.02rem;
  background:var(--paper); border:1px solid var(--rule);
}
table.data caption{
  font-family:'Cormorant Garamond', serif; font-weight:600; font-style:italic;
  color:var(--ink-soft); text-align:left; padding:0 0 0.5em; font-size:0.98rem;
}
table.data th, table.data td{ text-align:left; padding:0.6em 0.9em; border-bottom:1px solid var(--rule); vertical-align:top; }
table.data thead th{
  font-family:'Cormorant Garamond', serif; color:var(--gold); text-transform:uppercase;
  letter-spacing:0.04em; font-size:0.86rem; border-bottom:2px solid var(--gold-soft);
}
table.data tbody tr:last-child td{border-bottom:none;}

/* ---- "dig deeper" link cards ---- */
.deeper{ display:grid; grid-template-columns:1fr 1fr; gap:1.1em; margin:1.4em 0; }
.deeper a.card{
  display:block; text-decoration:none; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-top:3px solid var(--gold);
  padding:1.3em 1.4em; border-radius:3px; transition:box-shadow .15s ease, transform .15s ease;
}
.deeper a.card:hover{ box-shadow:0 6px 22px rgba(120,90,40,0.13); transform:translateY(-2px); }
.deeper a.card .ttl{
  font-family:'Cormorant Garamond', serif; font-weight:700; font-size:1.3rem;
  display:block; margin-bottom:0.3em; color:var(--ink);
}
.deeper a.card .desc{ font-size:1rem; line-height:1.5; color:var(--ink-soft); }
.deeper a.card .go{ color:var(--gold); font-size:0.95rem; display:inline-block; margin-top:0.5em; }

/* ---- colophon / footer ---- */
.colophon{
  margin-top:3.5em; padding-top:1.4em; border-top:1px solid var(--rule);
  font-size:0.98rem; font-style:italic; color:var(--ink-soft); text-align:center;
}
footer.site{
  text-align:center; padding:2.5em 1.4em; border-top:1px solid var(--rule);
  font-size:0.9rem; color:var(--ink-soft);
}
footer.site a{ color:var(--gold); text-decoration:none; }
footer.site a:hover{ color:var(--ink); }
/* silent identifier: the circles mark, small and faint, on every page */
.footer-mark{ display:block; width:30px; height:30px; margin:0 auto 0.7em; opacity:0.55; }

/* "Listen" button (device text-to-speech) */
#listen-btn{
  position:fixed; bottom:1.1em; right:1.1em; z-index:50;
  font-family:'Cormorant Garamond', serif; font-weight:700; font-size:1.05rem;
  background:var(--gold); color:var(--paper); border:none;
  padding:0.6em 1.15em; border-radius:2em; cursor:pointer; letter-spacing:0.02em;
  box-shadow:0 4px 14px rgba(120,90,40,0.35);
}
#listen-btn:hover{ background:var(--ink); color:var(--paper); }
@media print{ #listen-btn{ display:none; } }

/* ============================================================
   BOOK reader (full text of 1 Enoch)
   ============================================================ */
.book-intro{ max-width:var(--maxw); margin:0 auto 2em; font-style:italic; color:var(--ink-soft); }

.toc{
  background:var(--paper); border:1px solid var(--rule); border-radius:4px;
  padding:1.4em 1.6em; margin:2em 0;
}
.toc h2{ margin-top:0; border:none; padding:0; font-size:1.4rem; }
.toc .toc-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(70px,1fr));
  gap:0.3em 0.6em; margin-top:0.8em;
}
.toc .toc-grid a{
  text-decoration:none; color:var(--gold); font-size:0.98rem; padding:0.15em 0.3em;
  border-radius:3px; text-align:center;
}
.toc .toc-grid a:hover{ background:var(--quote-bg); color:var(--ink); }

.section-head{
  font-family:'Cormorant Garamond', serif; font-weight:700; color:var(--gold);
  text-transform:uppercase; letter-spacing:0.14em; font-size:0.95rem;
  text-align:center; margin:3em 0 0.5em;
}

h3.chapter{
  font-family:'Cormorant Garamond', serif; font-weight:700; font-size:1.55rem;
  color:var(--ink); margin:2.2em 0 0.6em; scroll-margin-top:70px;
  border-bottom:1px solid var(--rule); padding-bottom:0.2em;
}
h3.chapter .toplink{
  float:right; font-size:0.72rem; font-family:'EB Garamond',serif; font-weight:400;
  text-transform:none; letter-spacing:normal; color:var(--gold-soft);
}
.prose{ margin:0 0 1.1em; }
.poetry{
  margin:0 0 1.1em 1.2em; padding-left:1em; border-left:2px solid var(--rule);
  line-height:1.5;
}
.poetry .pl{ display:block; padding-left:1.2em; text-indent:-1.2em; }

.legend{
  font-size:0.95rem; color:var(--ink-soft); background:var(--quote-bg);
  border-radius:4px; padding:0.9em 1.2em; margin:1.5em 0;
}
.legend code{ font-family:'EB Garamond',serif; font-style:normal; }

/* ============================================================
   Verse pop-up (tap a scripture reference; KJV + commentary,
   BibleHub kept as "read further")
   ============================================================ */
.vp-backdrop{ position:fixed; inset:0; background:rgba(30,24,18,0.40); z-index:100; }
.vp-card{
  position:fixed; z-index:101; left:50%; transform:translateX(-50%);
  bottom:2.2vh; width:min(540px,94vw); max-height:82vh; overflow:auto;
  background:var(--paper); border:1px solid var(--rule); border-top:4px solid var(--gold);
  border-radius:6px; box-shadow:0 12px 44px rgba(60,40,15,0.38);
  padding:1.15em 1.35em 1.35em;
}
@media (min-width:680px){ .vp-card{ top:50%; bottom:auto; transform:translate(-50%,-50%); } }
.vp-close{
  position:absolute; top:0.35em; right:0.55em; border:none; background:none;
  font-size:1.35rem; line-height:1; color:var(--ink-soft); cursor:pointer; padding:0.2em 0.3em;
}
.vp-close:hover{ color:var(--ink); }
.vp-ref{
  font-family:'Cormorant Garamond',serif; font-weight:700; color:var(--gold);
  text-transform:uppercase; letter-spacing:0.05em; font-size:0.95rem; margin:0 1.6em 0.55em 0;
}
.vp-verses{ font-size:1.08rem; line-height:1.6; margin:0 0 0.6em; }
.vp-verses p{ margin:0 0 0.5em; }
.vp-vn{ color:var(--gold-soft); font-weight:700; font-size:0.68em; vertical-align:super; margin-right:0.18em; }
.vp-src{ border-top:1px solid var(--rule); padding:0.55em 0 0.2em; }
.vp-src summary{
  cursor:pointer; font-family:'Cormorant Garamond',serif; font-weight:700;
  color:var(--ink); font-size:1.04rem; list-style:none; outline:none;
}
.vp-src summary::-webkit-details-marker{ display:none; }
.vp-src summary::before{ content:"\25B8\00a0"; color:var(--gold); }
.vp-src[open] summary::before{ content:"\25BE\00a0"; }
.vp-src .vp-body{ font-size:0.97rem; line-height:1.56; color:var(--ink-soft); padding:0.45em 0 0.3em; }
.vp-src .vp-body p{ margin:0 0 0.6em; }
.vp-src .vp-attr{ font-style:italic; color:var(--gold); font-size:0.9rem; }
/* grouped popup sections: top-level "section" vs indented nested sources */
.vp-count{ color:var(--ink-soft); font-weight:400; font-size:0.8rem; opacity:0.65; }
.vp-group{ padding-left:0.15em; }
.vp-sub{ border-top:1px dotted var(--rule); padding:0.3em 0 0.05em; margin-left:0.75em; }
.vp-sub summary{ font-size:0.95rem; font-weight:600; }
/* word study cards (PD lexicon glosses) */
.vp-word{ padding:0.1em 0 0.55em; }
.vp-word + .vp-word{ border-top:1px dotted var(--rule); padding-top:0.55em; }
.vp-term{ font-family:'Cormorant Garamond',serif; font-weight:700; color:var(--ink); font-size:1.08rem; margin-bottom:0.3em !important; }
.vp-strongs{ font-family:inherit; font-weight:400; font-size:0.78rem; color:var(--gold-soft); letter-spacing:0.02em; }
.vp-gloss-label{ font-weight:600; color:var(--gold); }
.vp-bh{
  display:block; margin-top:0.7em; padding-top:0.65em; border-top:1px solid var(--rule);
  color:var(--gold); text-decoration:none; font-weight:600;
}
.vp-bh:hover{ color:var(--ink); }
.vp-related, .vd-related{ margin-top:0.7em; padding-top:0.6em; border-top:1px solid var(--rule); line-height:1.8; }
.vp-rel-label, .vd-rel-label{ display:block; font-family:'Cormorant Garamond',serif; font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:0.05em; font-size:0.85rem; margin-bottom:0.15em; }
.vp-rel-src, .vd-rel-src{ display:block; margin-top:0.35em; font-size:0.76rem; font-style:italic; color:var(--gold-soft); }
.vp-addressed, .vd-addressed{ margin:0.2em 0 0.7em; padding:0.55em 0.85em; background:var(--paper); border:1px solid var(--rule); border-left:3px solid var(--gold-soft); border-radius:0 4px 4px 0; }
.vp-addressed p, .vd-addressed p{ margin:0.2em 0 0; font-style:italic; font-size:0.97rem; line-height:1.5; }
.vp-addr-by, .vd-addr-by{ display:block; font-style:normal; font-size:0.85rem; color:var(--ink-soft); margin-top:0.3em; }
body.vp-open{ overflow:hidden; }
@media print{ .vp-backdrop, .vp-card{ display:none; } }

/* ---- inline drop-down variant (expands in place, no modal) ---- */
.vd-panel{
  margin:0.6em 0 1.1em; padding:0.85em 1.1em;
  background:var(--paper); border:1px solid var(--rule); border-left:3px solid var(--gold);
  border-radius:0 4px 4px 0;
}
.vd-ref{
  font-family:'Cormorant Garamond',serif; font-weight:700; color:var(--gold);
  text-transform:uppercase; letter-spacing:0.05em; font-size:0.9rem; margin:0 0 0.4em;
}
.vd-close{ float:right; cursor:pointer; color:var(--ink-soft); border:none; background:none; font-size:1.05rem; line-height:1; padding:0 0 0 0.5em; }
.vd-close:hover{ color:var(--ink); }
.vd-verses{ line-height:1.6; margin:0 0 0.4em; font-size:1.02rem; }
.vd-verses p{ margin:0 0 0.4em; }
.vd-vn{ color:var(--gold-soft); font-weight:700; font-size:0.68em; vertical-align:super; margin-right:0.15em; }
.vd-src{ border-top:1px solid var(--rule); padding:0.45em 0 0.1em; }
.vd-src summary{
  cursor:pointer; font-family:'Cormorant Garamond',serif; font-weight:700;
  color:var(--ink); font-size:1.0rem; list-style:none; outline:none;
}
.vd-src summary::-webkit-details-marker{ display:none; }
.vd-src summary::before{ content:"\25B8\00a0"; color:var(--gold); }
.vd-src[open] summary::before{ content:"\25BE\00a0"; }
.vd-src .vd-body{ font-size:0.95rem; line-height:1.55; color:var(--ink-soft); padding:0.4em 0 0.2em; }
.vd-src .vd-body p{ margin:0 0 0.55em; }
.vd-src .vd-attr{ font-style:italic; color:var(--gold); font-size:0.88rem; }
.vd-bh{ display:inline-block; margin-top:0.5em; color:var(--gold); text-decoration:none; font-weight:600; }
.vd-bh:hover{ color:var(--ink); }
.vd-deepdive{ display:block; margin:0.2em 0 0.8em; padding:0.6em 0.85em; background:linear-gradient(0deg,var(--paper),var(--paper)) padding-box, var(--gold-soft); background:var(--paper); border:1px solid var(--gold); border-left:4px solid var(--gold); border-radius:0 4px 4px 0; color:var(--ink); text-decoration:none; font-size:0.97rem; line-height:1.45; }
.vd-deepdive:hover{ background:#fbf6ea; }
.vd-dd-tag{ display:inline-block; font-family:'Cormorant Garamond',serif; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; font-size:0.78rem; color:var(--gold); margin-right:0.5em; }
a.ref.vd-active{ color:var(--ink); border-bottom-style:solid; }
@media print{ .vd-panel{ border-left-color:var(--rule); } }

/* ---- responsive ---- */
@media (max-width:620px){
  body{font-size:1.1rem;}
  header.doc h1{font-size:2.2rem;}
  .parallel, .deeper{grid-template-columns:1fr;}
  main{padding:2.5em 1.2em 4em;}
  /* Header nav: long page titles (e.g. "What I Want You to Know") overflow the
     row on phones and slide the whole page sideways. Let the nav scroll
     horizontally by itself (swipe it); the brand stays put, the page is locked. */
  .topbar nav{ gap:0.9em; overflow-x:auto; min-width:0; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .topbar nav::-webkit-scrollbar{ display:none; }
  /* the toggles (bigger text + dark/light) move to the FRONT of the scrolling nav on
     phones, so an older reader sees them on load without swiping sideways. */
  #textsize-toggle{ order:-2; }
  #theme-toggle{ order:-1; }
  /* Listen button: smaller, clears the phone home-bar, slightly see-through
     so the body text underneath stays readable on long reading pages. */
  #listen-btn{
    bottom:calc(0.7em + env(safe-area-inset-bottom));
    right:0.7em;
    font-size:0.95rem;
    padding:0.5em 0.95em;
    opacity:0.93;
  }
}

/* ====================== Dark mode ======================
   Light/dark switch (button injected by listen.js, theme saved in localStorage).
   The stylesheet is variable-driven, so the base theme is just an override of
   the :root colors; a few reserved colors and the inline-coloured landing stones
   get their own dark treatment. */
[data-theme="dark"]{
  --ink:        #e9e1d2;
  --ink-soft:   #b3a692;
  --parchment:  #17140f;
  --paper:      #221d16;
  --rule:       #3a3328;
  --gold:       #c9a356;
  --gold-soft:  #d8bd84;
  --quote-bg:   #221d16;
}
[data-theme="dark"] .topbar{ background:rgba(28,24,18,0.92); }
[data-theme="dark"] .woc{ color:#C290F0; }     /* Christ's purple, lifted for the dark */
[data-theme="dark"] .wos{ color:#7BC2EE; }     /* the Spirit's blue, glowing on dark */
[data-theme="dark"] .wog,
[data-theme="dark"] .sg{ color:#E2B73E; }      /* God's gold, brighter on dark */
[data-theme="dark"] .vd-deepdive:hover{ background:#2a241a; }
/* the landing/index stones carry inline colours; brighten them so each reads on dark */
[data-theme="dark"] main > h2.grp,
[data-theme="dark"] main > h2.idx-group,
[data-theme="dark"] .deeper a.card .ttl,
[data-theme="dark"] .deeper a.card .go,
[data-theme="dark"] .idx li a{ filter:brightness(1.55) saturate(1.08); }
[data-theme="dark"] header.doc h1,
[data-theme="dark"] .topbar nav a,
[data-theme="dark"] main p a:not(.ref){ filter:brightness(1.7) saturate(1.05); }

/* larger-text mode (for older readers): scale the root so the whole site grows proportionally.
   Three steps cycled by the A+ button: normal -> larger -> largest -> normal. */
html[data-textsize="large"]{ font-size:120%; }
html[data-textsize="xlarge"]{ font-size:142%; }

/* the light/dark + text-size toggle buttons in the top bar */
#theme-toggle, #textsize-toggle{
  background:transparent; border:1px solid var(--gold-soft); color:var(--gold);
  font-size:0.9rem; line-height:1; padding:0.32em 0.5em; border-radius:6px;
  cursor:pointer; margin-left:0.2em;
}
#textsize-toggle{ font-weight:700; }
#theme-toggle:hover, #textsize-toggle:hover{ border-color:var(--gold); }