/* Gold Thread of Christ: shared styles for every page. Colours and fonts are set once, here. */

/* Fonts are hosted with the site (assets/fonts, SIL Open Font License; see the OFL-*.txt files there).
   Each file is a variable font covering every weight. The latin-ext files only load for accented text. */
@font-face { font-family: 'Crimson Pro'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(/assets/fonts/crimsonpro-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Crimson Pro'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(/assets/fonts/crimsonpro-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Crimson Pro'; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url(/assets/fonts/crimsonpro-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Crimson Pro'; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url(/assets/fonts/crimsonpro-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(/assets/fonts/playfairdisplay-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(/assets/fonts/playfairdisplay-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url(/assets/fonts/playfairdisplay-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url(/assets/fonts/playfairdisplay-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --gold: #e6c07a;
  --gold-soft: #f4d9a8;
  --ink: #ece4d4;
  --text: #cfd6e2;
  --muted: #9ea8b8;
  --line: rgba(230, 192, 122, .22);
  --faint: rgba(230, 192, 122, .12);
  --panel: rgba(13, 16, 25, .55);
  --page: rgba(9, 11, 17, .82);
  --serif: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --display: 'Playfair Display', Georgia, serif;
}

* { box-sizing: border-box; }
html { background: #0b0d14 url(/_papyrus.jpg) center / cover fixed; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--page);
       font: 400 18px/1.7 var(--serif); color: var(--ink); }
a { color: inherit; }
img { max-width: 100%; }
.sc { font-variant: small-caps; letter-spacing: .1em; }
h1, h2, h3 { text-wrap: balance; }
p, li, blockquote { text-wrap: pretty; }
::selection { background: rgba(230, 192, 122, .35); color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── Motion ───────────────────────────────────────────────────────────── */
/* Gentle, never bouncy: colours ease, things fade and rise a few pixels as they appear.
   Nothing moves for anyone whose device asks for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  a, button, select, input, textarea, summary, .entry b, .v {
    transition: color .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease, opacity .22s ease; }
  .btn:active, .pick:active, .link-btn:active { transform: translateY(1px); }

  /* A page settles in as it opens; in the reader, each chapter (or search) as it is shown. */
  .article, .hub, .pray { animation: gt-rise .5s cubic-bezier(.2, .7, .3, 1) backwards; }
  /* The reader only fades: it measures verse positions to keep your place, so nothing may shift. */
  .reader > * { animation: gt-fade .35s ease-out both; }
  .hub .court { animation: gt-rise .6s .08s cubic-bezier(.2, .7, .3, 1) backwards; }

  /* Things that open in place. */
  .r-note, .r-intro, .r-ref, .part details[open] p, .n-form, .ask-done, .prayer[open] .body, #todays-verse {
    animation: gt-open .24s ease-out both; }
  .selbar { animation: gt-up .26s cubic-bezier(.2, .7, .3, 1) both; }
}
@keyframes gt-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes gt-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes gt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gt-up   { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }

/* ── Menu ─────────────────────────────────────────────────────────────── */
.site-nav { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
            column-gap: 1.6rem; padding: .3rem 1.25rem; background: rgba(9, 11, 17, .96); border-bottom: 1px solid var(--line); }
.site-nav .side { display: flex; gap: 1.1rem; white-space: nowrap; }
.site-nav .left { justify-self: end; }
.site-nav .right { justify-self: start; }
.site-nav .home { display: block; padding: .1rem; border-radius: 10px; }
.site-nav .home img { display: block; width: 34px; height: 34px; }
.site-nav a.item { text-decoration: none; color: var(--muted); }
.site-nav a.item:hover, .site-nav a.item[aria-current="page"] { color: var(--gold-soft); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer { margin-top: auto; border-top: 1px solid var(--line); padding: .8rem 1.25rem .9rem; text-align: center;
               color: var(--muted); font-size: .95rem; background: rgba(9, 11, 17, .6); }
.site-footer .links { margin: 0; }
.site-footer a { color: var(--muted); text-decoration: none; border-bottom: 1px solid rgba(158, 168, 184, .3); }
.site-footer a:hover { color: var(--gold-soft); }
.site-footer .credit { margin: .35rem auto 0; max-width: 760px; font-size: .82rem; }

/* ── Text pages (About, Theological Basis, My Studies, Canon…) ────────── */
.article { flex: 1 0 auto; width: 100%; max-width: 760px; margin: 0 auto; padding: 2rem 2.4rem 2.6rem;
           border-left: 1px solid var(--faint); border-right: 1px solid var(--faint); }
.article .back { margin: 0 0 .2rem; font-size: .98rem; }
.article .back a { color: var(--muted); text-decoration: none; }
.article .back a:hover { color: var(--gold-soft); }
.article h1 + :not(.standfirst) { margin-top: 1.1rem; }
.article h1 { margin: .1rem 0 .4rem; font: 700 2.3rem/1.15 var(--display); color: var(--gold-soft); }
.article .standfirst { margin: 0 0 1.2rem; font-size: 1.14rem; font-style: italic; color: var(--text); }
.article .toc { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; margin: 0 0 1.6rem; padding: .7rem 0;
                border-top: 1px solid var(--faint); border-bottom: 1px solid var(--faint); font-size: .98rem; }
.article .toc span { color: var(--muted); }
.article .toc a { color: var(--gold); text-decoration: none; }
.article .toc a:hover { color: var(--gold-soft); }
.article h2 { margin: 2.1rem 0 .6rem; font: 600 1.4rem/1.25 var(--display); color: var(--gold-soft); scroll-margin-top: 4.5rem; }
.article h2::before { content: ""; display: block; width: 44px; height: 2px; margin-bottom: .7rem; border-radius: 2px;
                      background: var(--gold); opacity: .7; }
.article h3 { margin: 1.6rem 0 .5rem; font: 600 1.15rem var(--display); color: var(--gold-soft); }
.article p, .article li { color: var(--text); }
.article p { margin: 0 0 1rem; }
.article a { color: var(--gold); }
.article blockquote { margin: 1.4rem 0; padding: .2rem 0 .2rem 1.1rem; border-left: 2px solid var(--gold);
                      font-size: 1.08rem; font-style: italic; }
.article blockquote p { color: var(--ink); margin: 0 0 .7rem; }
.article blockquote p:last-child { margin-bottom: 0; }
.article blockquote cite { display: block; margin-top: .2rem; font-size: .95rem; font-style: normal; color: var(--muted); }
.article .epigraph { margin: 0 0 1.6rem; padding: .85rem 1.1rem; border: 1px solid var(--faint); border-radius: 12px; border-left-width: 1px;
                     text-align: center; background: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(244, 217, 168, .07), transparent 70%), var(--panel); }
.article .epigraph p { margin: 0; font: italic 600 1.2rem/1.5 var(--display); color: var(--gold-soft); }
.article .epigraph cite { display: block; margin-top: .45rem; font: normal 400 .95rem var(--serif); color: var(--muted); }
.article h1 + .epigraph { margin-top: .9rem; }
.article .notebox { margin: 0 0 1.6rem; padding: .7rem .95rem; border: 1px solid var(--faint); border-radius: 12px;
                    background: var(--panel); font-size: 1rem; }
.article .notebox p { margin: 0 0 .7rem; }
.article .notebox p:last-child { margin-bottom: 0; }
.dag { color: var(--gold); font-weight: 600; }

/* Lists of studies or texts */
.entries { border-top: 1px solid var(--faint); }
.entry { display: block; padding: .65rem 0; border-bottom: 1px solid var(--faint); text-decoration: none; }
.entry b { display: block; font: 600 1.15rem var(--display); color: var(--gold-soft); }
.entry span { color: var(--text); font-size: 1rem; }
.entry small { display: block; margin-top: .15rem; color: var(--muted); font-size: .88rem; }
a.entry:hover b { color: var(--gold); }

/* Deeper Waters: the list of texts */
.article p.era { margin-bottom: .6rem; color: var(--muted); }
.works { margin: 0 0 1rem; border-top: 1px solid var(--faint); }
.work { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; align-items: baseline; padding: .6rem 0;
        border-bottom: 1px solid var(--faint); text-decoration: none; }
.work b { font: 600 1.15rem var(--display); color: var(--gold-soft); }
.work .alt { margin-left: .4rem; font: italic 400 .95rem var(--serif); color: var(--muted); }
.work p { grid-column: 1 / -1; margin: 0; color: var(--text); font-size: 1rem; }
.work .status { font-size: .95rem; white-space: nowrap; color: var(--gold); }
.work.soon .status { color: var(--muted); }
a.work:hover b { color: var(--gold); }


/* Canon: the seven parts */
/* Canon list: a box per group, packed down two columns at their own height. */
.parts { columns: 2; column-gap: 1.1rem; margin: .7rem 0 1rem; }
.part { position: relative; break-inside: avoid; margin: 0 0 .9rem; padding: .65rem .9rem .6rem;
        border: 1px solid var(--faint); border-radius: 12px; background: var(--panel); }
.part h3 { margin: 0 0 .4rem; font-size: 1.04rem; }
.part ul { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 1rem; margin: 0; padding: 0; list-style: none; }
.part li { margin: 0; }
.part li a { text-decoration: none; border-bottom: 1px solid var(--faint); }
.part li a:hover { color: var(--gold-soft); }
.part .dag a, .part a .dag { border: 0; }
/* A book's † note: a small pop-up under the mark, its pointer aimed at the †. */
.part li { position: relative; }
.part details { display: inline; }
.part details summary { display: inline; padding: 0 .25rem; border-radius: 4px; cursor: pointer; list-style: none; color: var(--gold); font-weight: 600; }
.part details summary:hover, .part details[open] summary { background: rgba(230, 192, 122, .14); }
.part details summary::-webkit-details-marker { display: none; }
.part details[open] p { position: absolute; top: calc(100% + .6rem); left: 0; z-index: 6; width: min(19rem, calc(100vw - 2.5rem));
                        margin: 0; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 10px;
                        background: #141a29; color: var(--text); font-size: .92rem; line-height: 1.55;
                        box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }
.part details[open] p.flip { left: auto; right: 0; }
.part details[open] p::before { content: ""; position: absolute; top: -6px; left: var(--caret, 1.5rem); width: 10px; height: 10px;
                                background: #141a29; border-left: 1px solid var(--line); border-top: 1px solid var(--line);
                                transform: translateX(-50%) rotate(45deg); }
/* The epilogue straight after Revelation: in the sequence, but outside the canon (dashed). */
.part.epilogue { border: 1px dashed var(--line); background: none; }
.part.epilogue ul { grid-template-columns: 1fr; }
.part.epilogue a { font-weight: 600; color: var(--gold); }
.part.epilogue p { margin: .3rem 0 0; color: var(--muted); font-size: .95rem; }

/* Embedded demo (Chashmal) */
.demo { margin: 0 0 1.6rem; }
.demo iframe { display: block; width: 100%; aspect-ratio: 1 / 1; border: 0; border-radius: 14px; }

/* ── Hub (home) ───────────────────────────────────────────────────────── */
.hub { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 1.25rem 1.6rem; }
.hub .title { padding: 1.4rem 0 1rem; text-align: center; }
.hub .hub-seal { display: block; width: 64px; height: 64px; margin: 0 auto .65rem; }
.hub .title h1 { margin: 0; font: 700 2.2rem/1.15 var(--display); color: var(--gold-soft); }
.hub .title .tagline { margin: .35rem auto 0; max-width: 680px; color: var(--text); }
.hub .title .note { margin: .2rem 0 0; color: var(--muted); font-size: .95rem; font-style: italic; }
/* The court: the menu's pages either side of the Bible picker. */
.court { display: grid; grid-template-columns: 1fr minmax(0, 1.55fr) 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.court > * { padding: .95rem 1.2rem 1rem; }
.court > * + * { border-left: 1px solid var(--line); }
.court .entry b { font-size: 1.12rem; }
.court .entry span { font-size: .96rem; color: var(--text-secondary, #b9c1ce); }
.court .entry:last-child { border-bottom: none; }
.court .side { display: flex; flex-direction: column; justify-content: center; }  /* a shorter column sits centred */
.picker { text-align: center;
          background: radial-gradient(ellipse 75% 50% at 50% 0%, rgba(244, 217, 168, .08), transparent 75%), rgba(13, 16, 25, .55); }
.picker h2 { margin: 0 0 .9rem; font: 600 1.5rem var(--display); color: var(--gold-soft); }
.pick-row { display: flex; gap: .55rem; }
.pick-row select { flex: 2; min-width: 0; padding: .4rem 1.9rem .4rem .8rem; border: 1px solid var(--line); border-radius: 10px;
                   appearance: none; color-scheme: dark; color: var(--ink); font: inherit; font-size: 1rem; cursor: pointer;
                   background: rgba(15, 20, 34, .85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M0 0h10L5 7z' fill='%23f4d9a8'/%3E%3C/svg%3E") no-repeat right .8rem center; }
.pick-row select + select { flex: 1; }
.pick-row select option, .pick-row select optgroup { background: #0f1422; color: var(--text); }
.picker .random { margin: .8rem 0 0; }
.link-btn { padding: .1rem .2rem; border: 0; background: none; color: var(--gold); font: inherit; font-size: 1rem;
            text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--gold-soft); }
.picker .or { margin: 1rem 0 .5rem; color: var(--muted); font-size: .95rem; }
.picker .jump { max-width: none; margin: 0; }
.hub .epigraph-line { margin: 1.2rem auto 0; max-width: 700px; text-align: center; font-style: italic; color: var(--text); }
.hub .epigraph-line cite { display: block; font-style: normal; color: var(--muted); font-size: .92rem; }
.jump { display: flex; gap: .5rem; max-width: 420px; margin: 0 auto .9rem; }
.jump input { flex: 1; min-width: 0; padding: .4rem .8rem; border: 1px solid var(--line); border-radius: 10px;
              background: rgba(15, 20, 34, .85); color: var(--ink); font: inherit; font-size: 1rem; }
.btn { display: inline-block; padding: .4rem 1rem; border: none; border-radius: 10px; background: var(--gold); color: #14110a;
       font: 600 1rem var(--serif); text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn:hover { background: var(--gold-soft); }

/* ── Bible reader ─────────────────────────────────────────────────────── */
/* The bar under the menu: book, chapter, search, translation. Its panels drop down from it. */
.rbar { position: sticky; top: var(--nav-h, 47px); z-index: 15; background: rgba(9, 11, 17, .96); border-bottom: 1px solid var(--faint); }
.rbar .in { max-width: 760px; margin: 0 auto; padding: .4rem 1rem; display: flex; align-items: center; gap: .5rem; }
.rbar button, .rbar input, .rbar select { font: inherit; }
/* Every control in the bar one height, whatever its text size. */
.rbar .pick, .rbar .find input { height: 2.125rem; line-height: 1; }
/* The translation list, and the Original button beside it (gold while on). */
.rbar select.pick { appearance: none; color-scheme: dark; padding-right: 1.7rem; font-size: .9rem;
                    background: rgba(15, 20, 34, .85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0h9L4.5 6z' fill='%23f4d9a8'/%3E%3C/svg%3E") no-repeat right .65rem center; }
.rbar select.pick option { background: #0f1422; color: var(--text); }
.rbar #orig-btn { font-size: .9rem; }
.rbar #orig-btn[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #14110a; font-weight: 600; }
.rbar .pick { padding: .24rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(15, 20, 34, .85);
              color: var(--gold-soft); cursor: pointer; white-space: nowrap; }
.rbar .pick:hover, .rbar .pick[aria-expanded="true"] { border-color: rgba(230, 192, 122, .5); }
.rbar .find { flex: 1; min-width: 0; margin: 0; }
.rbar .find input { width: 100%; padding: .24rem .7rem; border: 1px solid var(--line); border-radius: 10px;
                    background: rgba(15, 20, 34, .85); color: var(--ink); font-size: .95rem; }
.rbar .find input::placeholder { color: var(--muted); }
.pill { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-size: .9rem; }
.pill button { padding: .24rem .65rem; border: 0; background: none; font: inherit; color: var(--text); cursor: pointer; }
.pill button[aria-pressed="true"] { background: var(--gold); color: #14110a; font-weight: 600; }

/* The reading column */
.reader { flex: 1 0 auto; width: 100%; max-width: 760px; margin: 0 auto; padding: 1.6rem 2.4rem 2.2rem;
          border-left: 1px solid var(--faint); border-right: 1px solid var(--faint); }
.reader .loading { color: var(--muted); font-style: italic; }
.reader .loading a { color: var(--gold); }
.r-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; margin-bottom: 1.1rem; padding-bottom: .9rem;
          border-bottom: 1px solid var(--faint); }
.r-head h1 { margin: 0; font: 700 2.1rem/1.15 var(--display); color: var(--gold-soft); }
.r-head .ch { color: var(--muted); font-size: 1.15rem; }
.link, .intro-link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.intro-link { margin-left: auto; color: var(--gold); font-size: .95rem; border-bottom: 1px solid var(--line); }
.intro-link:hover { color: var(--gold-soft); }
.link { color: var(--muted); font-size: .92rem; text-decoration: underline; text-decoration-color: rgba(158, 168, 184, .4); text-underline-offset: 2px; }
.link:hover { color: var(--gold-soft); }
.r-intro { margin: -.3rem 0 1.2rem; padding: .7rem .95rem; border: 1px solid var(--faint); border-radius: 12px; background: var(--panel);
           color: var(--text); font-size: 1rem; }
.r-intro p { margin: 0 0 .7rem; }
.r-intro p:last-child { margin-bottom: 0; }
.r-title { margin: 0 0 .7rem; padding-left: 2.9rem; color: var(--text); font-style: italic; font-size: 1rem; }
.r-sec { margin: 1.5rem 0 .3rem 2.9rem; font: 600 1rem var(--serif); font-variant: small-caps; letter-spacing: .1em; color: var(--gold); }
.r-sec:first-child { margin-top: 0; }

.v { position: relative; display: flex; gap: .6rem; margin: .2rem 0; padding: .05rem .5rem .05rem .4rem; border-left: 2px solid transparent;
     font-size: 1.12rem; line-height: 1.75; color: var(--text); scroll-margin-top: calc(var(--stick, 100px) + .8rem); }
.v.para { margin-top: 1rem; }
.v .n { flex: 0 0 1.8rem; padding-top: .36rem; text-align: right; font-size: .85rem; font-weight: 600; color: var(--gold); }
.v .t { flex: 1; min-width: 0; }
.j { color: var(--gold-soft); }
/* The Original view: the toggle sits at the right of the chapter heading; Hebrew reads right to left. */
.r-head .pill { margin-left: auto; align-self: center; }
.r-head .intro-link + .pill { margin-left: 0; }
.v[lang="hbo"] .t { font-family: 'SBL Hebrew', 'Ezra SIL', 'Noto Serif Hebrew', 'Times New Roman', serif; font-size: 1.3rem; line-height: 1.9; }
.v[lang="grc"] .t { font-family: 'Gentium Plus', 'Gentium Book Plus', 'Noto Serif', 'Palatino Linotype', 'Times New Roman', serif; font-size: 1.08rem; }
.v[dir="rtl"] .omit { direction: ltr; unicode-bidi: isolate; }
.v[lang="syc"] .t { font-family: 'Estrangelo Edessa', 'Noto Sans Syriac', 'Noto Sans Syriac Estrangela', 'Segoe UI Historic', serif; font-size: 1.3rem; line-height: 1.9; }
.r-ref p[lang="hbo"] { font-family: 'SBL Hebrew', 'Ezra SIL', 'Noto Serif Hebrew', 'Times New Roman', serif; font-size: 1.15rem; }
.v .omit { color: var(--muted); font-size: .95rem; font-style: italic; }
.r-pro { margin: 0 0 1.4rem; padding: .7rem .95rem; border: 1px solid var(--faint); border-radius: 12px; background: var(--panel);
         color: var(--text); font-size: 1rem; }
.r-pro h2 { margin: .3rem 0 .4rem; font: 600 1.05rem var(--display); color: var(--gold-soft); }
.r-pro p { margin: 0 0 .8rem; }
.r-pro p:last-child { margin-bottom: 0; }
.v .spk { display: block; font-size: .95rem; font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--gold); }
.v.hl { border-left-color: var(--gold); background: rgba(230, 192, 122, .09); border-radius: 0 6px 6px 0; }
.v.lit { border-left-color: var(--gold); background: rgba(230, 192, 122, .06); }
.v.hl + .v.hl, .v.lit + .v.lit { margin-top: 0; padding-top: .25rem; }  /* a highlighted passage reads as one block */
.mark { padding: 0 .2rem; border: 0; border-radius: 4px; background: none; font: inherit; font-weight: 600; color: var(--gold); cursor: pointer; }
.mark:hover { background: rgba(230, 192, 122, .15); }
.mark.ot { margin-left: .15rem; padding: .05rem .15rem; line-height: 1; vertical-align: -.15em; }
.mark.ot img { display: block; width: auto; height: 1.3em; }

.r-note { margin: .1rem 0 .9rem 2.4rem; padding: .55rem .85rem; border-left: 2px solid var(--gold); border-radius: 0 8px 8px 0;
          background: rgba(230, 192, 122, .08); font-size: 1rem; }
.r-note .k, .r-ref .k { font-size: .9rem; color: var(--gold); }
.r-note p { margin: .25rem 0 .5rem; color: var(--text); }
.r-note blockquote { margin: .6rem 0; padding-left: .9rem; border-left: 2px solid var(--line); font-style: italic; }
.r-note a { color: var(--gold); }
.r-ref { position: absolute; z-index: 5; top: 100%; left: 2.6rem; width: min(380px, calc(100% - 2.6rem)); max-height: 60vh; overflow-y: auto;
         padding: .6rem .85rem .55rem; border: 1px solid rgba(230, 192, 122, .45); border-radius: 10px; background: rgba(10, 13, 21, .99);
         box-shadow: 0 16px 40px rgba(0, 0, 0, .6); font-size: .98rem; line-height: 1.55; }
.r-ref h3 { margin: .05rem 0 .35rem; font: 600 1.05rem var(--display); color: var(--gold-soft); }
.r-ref p { margin: 0 0 .45rem; color: var(--text); }
.r-ref p b { margin-right: .3rem; font-size: .78rem; color: var(--gold); }
.r-ref .row { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; }
.r-ref .row a { color: var(--gold); text-decoration: none; }
.r-ref .row a:hover { color: var(--gold-soft); }
.r-legend { margin: 1.2rem 0 0; color: var(--muted); font-size: .92rem; }
.r-pn { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; padding-top: .9rem; border-top: 1px solid var(--faint); }
.r-pn a { color: var(--gold); text-decoration: none; }
.r-pn a:hover { color: var(--gold-soft); }

/* Search results */
.r-back { margin: -.4rem 0 .6rem; }
.r-back a { color: var(--muted); text-decoration: none; }
.r-back a:hover { color: var(--gold-soft); }
.r-count { color: var(--text); }
.hits { margin: 0 0 1rem; padding: 0; list-style: none; border-top: 1px solid var(--faint); }
.hits li { border-bottom: 1px solid var(--faint); }
.hits a { display: block; padding: .45rem 0; color: var(--ink); text-decoration: none; }
.hits b { display: block; font-size: .95rem; font-weight: 600; color: var(--gold); }
.hits a:hover b { color: var(--gold-soft); }
.hits mark { border-radius: 2px; background: rgba(230, 192, 122, .25); color: inherit; }

/* ── Prayer page: quieter and darker, with light at the top ───────────── */
body:has(.pray) { background: radial-gradient(ellipse 720px 280px at 50% 0, rgba(244, 217, 168, .11), transparent 70%), rgba(6, 7, 11, .9); }
.pray { flex: 1 0 auto; width: 100%; max-width: 640px; margin: 0 auto; padding: 2.6rem 1.25rem 2.8rem; text-align: center; }
.pray h1 { margin: 0; font: 600 1.2rem var(--serif); color: var(--gold); }
.pray .intro { margin: .2rem 0 2rem; color: var(--muted); font-style: italic; }
.pray h2 { margin: 0 0 .9rem; font: 600 1.05rem var(--serif); color: var(--gold); }
.pray .request > p { margin: 0 0 1.1rem; color: var(--text); }
.orn { display: flex; align-items: center; gap: .9rem; margin: 2.4rem 0 2rem; }
.orn::before, .orn::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.orn img { width: 22px; height: 22px; opacity: .85; }

.ask { display: grid; gap: .9rem; text-align: left; }
.ask[hidden] { display: none; }  /* hidden once sent (display: grid would otherwise keep it showing) */
.ask label { display: grid; gap: .3rem; color: var(--text); font-size: 1rem; }
.ask label small { color: var(--muted); font-size: inherit; }
.ask input, .ask textarea { width: 100%; padding: .42rem .75rem; border: 1px solid var(--line); border-radius: 10px;
                            background: rgba(15, 20, 34, .85); color: var(--ink); font: inherit; font-size: 1rem; }
.ask textarea { min-height: 8rem; resize: vertical; }
.ask input:hover, .ask textarea:hover, .ask input:focus, .ask textarea:focus { border-color: rgba(230, 192, 122, .5); }
.ask .btn { justify-self: center; padding: .42rem 2rem; }
.ask .btn:disabled { opacity: .6; cursor: wait; }
.ask-error { margin: 0; color: var(--gold-soft); text-align: center; }
.ask-done { margin: 0; padding: .95rem; border: 1px solid var(--faint); border-radius: 12px; background: var(--panel); color: var(--text); }
.pray .ask-alt { margin: 1rem 0 0; color: var(--muted); font-size: .95rem; }
.ask-alt a { color: var(--gold); }

/* Notes from readers (notes.js): published notes, then "Leave a note on …" and its form. */
.notes { margin-top: 2.6rem; }
.r-notes { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--faint); }
.r-notes h2 { margin: 0 0 .7rem; font: 600 1.1rem var(--display); color: var(--gold-soft); }
.n-open { margin: 0 0 .8rem; color: var(--muted); font-size: .95rem; }
.n-open .link { color: var(--gold); text-decoration-color: var(--line); }
.n-list { margin: .6rem 0 1.2rem; padding: 0; list-style: none; }
.n-list li { margin: 0 0 .9rem; padding: .6rem .85rem; border: 1px solid var(--faint); border-radius: 12px; background: var(--panel); }
.c-meta { display: flex; flex-wrap: wrap; gap: .1rem .7rem; align-items: baseline; margin: 0 0 .3rem; font-size: .92rem; }
.c-meta b { color: var(--gold-soft); font-weight: 600; }
.c-meta span { color: var(--muted); }
.c-text p, .c-reply p { margin: 0 0 .5rem; }
.c-text p:last-child, .c-reply p:last-child { margin-bottom: 0; }
.c-reply { margin-top: .7rem; padding-left: .9rem; border-left: 2px solid var(--gold); }
/* The comment form: a small bubble by the button that opened it. */
.n-bubble { position: fixed; z-index: 30; width: min(19rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 1.5rem); overflow-y: auto;
            padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 10px; background: #141a29;
            box-shadow: 0 10px 28px rgba(0, 0, 0, .5); text-align: left; }
.n-bubble .ask { gap: .45rem; font-size: .95rem; }
.n-bubble .ask-done { padding: 0; border: 0; background: none; }
.n-bubble .n-passage { max-height: 4rem; font-size: .9rem; }
.n-bubble input:not([type=checkbox]) { padding: .26rem .6rem; }
.n-bubble textarea { height: 4.8rem; min-height: 0; padding: .3rem .6rem; line-height: 1.45; }
.n-about { margin: 0; color: var(--muted); font-size: .95rem; }
.n-about b { color: var(--gold-soft); font-weight: 600; }
.n-passage { margin: 0; padding: .4rem .9rem; max-height: 11rem; overflow-y: auto; border-left: 2px solid var(--gold);
             color: var(--text); font-size: .98rem; }
.n-passage p { margin: 0 0 .3rem; }
.ask label.n-private { grid-template-columns: auto 1fr; align-items: center; gap: .6rem; font-size: .95rem; }
.n-private input { width: 1.05rem; height: 1.05rem; accent-color: var(--gold); }
.n-row { display: flex; align-items: center; gap: 1.2rem; }
.ask .n-row .btn { justify-self: auto; }

/* Selected verses, and the bar that appears at the bottom while any are selected. */
.v.sel { background: rgba(230, 192, 122, .1); border-radius: 6px; }
.v.sel .t { text-decoration: underline dotted rgba(230, 192, 122, .75); text-decoration-thickness: 1px; text-underline-offset: .3em; }
.selbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding-bottom: env(safe-area-inset-bottom);
          background: rgba(9, 11, 17, .97); border-top: 1px solid var(--line); }
.selbar .in { max-width: 760px; margin: 0 auto; padding: .42rem 1rem; display: flex; align-items: center; gap: .5rem; }
.selbar .ref { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gold-soft); font-weight: 600; }
.selbar .pick { padding: .24rem .75rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(15, 20, 34, .85);
                font: inherit; font-size: .92rem; color: var(--gold-soft); cursor: pointer; white-space: nowrap; }
.selbar .pick:hover { border-color: rgba(230, 192, 122, .5); }
.selbar .x { padding: .24rem .55rem; color: var(--muted); }
body.has-sel .reader { padding-bottom: 4.5rem; }

.pray .verse { font: italic 600 1.45rem/1.45 var(--display); color: var(--gold-soft); }
.pray .verse cite { display: block; margin-top: .5rem; font: normal 400 .95rem var(--serif); color: var(--muted); }
.pray .pill { width: max-content; margin: -.3rem auto 1rem; }
.reading .loading { color: var(--muted); font-style: italic; }
.reading .sup { margin: 0 0 .9rem; color: var(--muted); font-size: .95rem; font-style: italic; }
.reading .text { margin: 0; text-align: left; color: var(--text); font-size: 1.12rem; line-height: 1.8; }
.reading sup { margin-right: .25rem; font-size: .76em; font-weight: 600; color: var(--gold); }
.reading .more { display: inline-block; margin-top: .9rem; color: var(--gold); text-decoration: none; }
.reading .more:hover { color: var(--gold-soft); }
.prayers { text-align: left; border-top: 1px solid var(--faint); }
.prayer { border-bottom: 1px solid var(--faint); }
.prayer summary { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem .2rem;
                  list-style: none; cursor: pointer; }
.prayer summary::-webkit-details-marker { display: none; }
.prayer summary b { font: 600 1.08rem var(--display); color: var(--gold-soft); }
.prayer summary span { color: var(--muted); font-size: .95rem; white-space: nowrap; }
.prayer summary:hover b { color: var(--gold); }
.prayer .body { margin: 0; padding: 0 .2rem .9rem; color: var(--text); font-size: 1.08rem; font-style: italic; line-height: 1.75; }

/* ── Printing: black on white, no menu, Scripture credit kept ─────────── */
@media print {
  *, *::before { animation: none !important; transition: none !important; }
  @page { margin: 2cm; }
  html, body { background: #fff !important; }
  body { font-size: 12pt; line-height: 1.5; }
  * { color: #000 !important; background: none !important; box-shadow: none !important; text-shadow: none !important; }
  .site-nav, .site-footer .links, .picker, .demo { display: none !important; }
  .rbar, .mark, .r-ref, .r-pn, .intro-link, .r-note .link, .more { display: none !important; }
  .pray .request, .pray .pill, .orn { display: none !important; }
  .selbar, .n-open, .n-slot { display: none !important; }
  .v.sel { background: none; }
  .v.sel .t { text-decoration: none; }
  .pray { max-width: none; padding: 0; }
  .article, .hub, .reader { max-width: none; padding: 0; border: 0; }
  .v.hl, .v.lit, .r-note { border-left-color: #000; }
  .article h2::before { background: #000 !important; opacity: 1; }
  .article blockquote, .part details[open] p { border-left-color: #000; }
  .article .epigraph, .article .notebox, .part { border: 1px solid #999; }
  a { text-decoration: underline; }
  h1, h2, h3 { break-after: avoid; }
  blockquote, .epigraph, .notebox, .part, .entry { break-inside: avoid; }
  .site-footer { margin-top: 1.5rem; padding: .6rem 0 0; border-top: 1px solid #999; text-align: left; }
}

/* ── Small screens ────────────────────────────────────────────────────── */
/* Home below 1000px: the picker first, then the two columns (narrower, the book list gets too tight). */
@media (max-width: 1000px) {
  .court { grid-template-columns: 1fr; }
  .court > * + * { border-left: none; border-top: 1px solid var(--line); }
  .court .picker { order: -1; }
  .hub .hub-seal { width: 52px; height: 52px; }
}
/* Menu on narrow screens: the seal on its own row, the items centred under it. */
@media (max-width: 880px) {
  .site-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem 1.05rem; padding: .35rem .9rem .4rem; }
  .site-nav::before { content: ""; flex-basis: 100%; }  /* ends the seal's row */
  .site-nav .home { order: -1; }
  .site-nav .home img { width: 30px; height: 30px; }
  .site-nav .side { display: contents; }
}
/* Phones: the menu scrolls away with the page rather than taking a strip of the screen. */
@media (max-width: 560px) {
  .site-nav { position: static; }
  .pick-row { flex-wrap: wrap; }
  .pick-row .btn { flex-basis: 100%; }
}
@media (max-width: 1000px) {
}
@media (max-width: 760px) {
  .article { padding: 1.4rem 1.1rem 1.8rem; border: none; }
  .article h1 { font-size: 1.9rem; }
  .article h2 { font-size: 1.22rem; }
  .parts { columns: 1; }
  /* Reader on phones: the menu scrolls away and only the reading bar stays, in two rows. */
  .site-nav:has(~ .rbar) { position: static; }
  .rbar { top: 0; }
  .rbar .in { flex-wrap: wrap; padding: .45rem .9rem; }
  .rbar .find { order: 3; flex-basis: 100%; }
  .rbar #book-select { flex: 1 1 0; min-width: 0; }  /* shrinks so the four lists share one row */
  .reader { padding: 1.1rem 1rem 1.6rem; border: none; }
  .r-head h1 { font-size: 1.7rem; }
  .v { padding-left: .1rem; padding-right: .2rem; }
  .r-title, .r-sec { padding-left: 0; margin-left: 2.6rem; }
  .r-note { margin-left: 1rem; }
  .r-ref { left: .2rem; width: calc(100% - .4rem); }
}