:root {
  --color-bg: #fafaf8;
  --color-surface: #fff;
  --color-field: #f1f1eb;
  --color-text: #20201e;
  --color-muted: #676761;
  --color-border: #d9d9d2;
  --color-accent: #990000;
  --color-accent-dark: #700000;
  --color-bread: #B98A52;
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --radius: .6rem;
  /* Sticky Scripture-location stack. One source of truth for every reader:
     --sticky-location-top sits below the Scripture controls row;
     --sticky-location-top-context sits below the sticky Search Context layer
     plus the controls row; --sticky-location-step is the Testament row height
     (the Book slot); --sticky-location-mask is the painted opaque surface the
     location rows carry above their text so scrolling Scripture cannot show
     through the sticky stack. */
  --sticky-location-top: 4.25rem;
  --sticky-location-top-context: 8.75rem;
  --sticky-location-step: 3.05rem;
  --sticky-location-mask: 1.5rem;
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); line-height: 1.5; }
header { padding: var(--space-3) max(var(--space-2), calc((100% - 44rem) / 2)); }
.wordmark { color: var(--color-text); font-weight: 700; letter-spacing: .09em; text-decoration: none; }
main { max-width: 44rem; margin: 12vh auto 0; padding: var(--space-2); }
h1 { max-width: 12ch; margin: 0 0 var(--space-2); font-size: clamp(2.4rem, 8vw, 4.5rem); letter-spacing: -.04em; line-height: 1.05; }
.intro { max-width: 35rem; color: var(--color-muted); font-size: 1.15rem; }
form { margin-top: 3rem; }
label { display: block; margin-bottom: var(--space-1); font-weight: 650; }
.search-row { display: flex; gap: var(--space-1); }
input, select, button { min-height: 3rem; border: 1px solid var(--color-border); border-radius: var(--radius); font: inherit; }
input { flex: 1; min-width: 0; padding: 0 var(--space-2); background: var(--color-field); }
select { width: 100%; min-width: 0; padding: 0 var(--space-2); background: var(--color-field); }
input::placeholder { color: #77776f; opacity: 1; }
input:-webkit-autofill, select:-webkit-autofill { box-shadow: 0 0 0 1000px var(--color-field) inset; -webkit-text-fill-color: var(--color-text); }
button { padding: 0 var(--space-3); background: var(--color-accent); color: #fff; }
button:hover, button:active { background: var(--color-accent-dark); }
:focus-visible { outline: 3px solid #990000; outline-offset: 3px; }
:disabled { cursor: not-allowed; opacity: .6; }
.hint { color: var(--color-muted); font-size: .9rem; }
@media (max-width: 30rem) { .search-row { align-items: stretch; flex-direction: column; } }

.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 12; padding: .65rem 1rem; background: var(--color-text); color: #fff; }
.skip-link:focus { top: 1rem; }
.site-header { max-width: 76rem; margin: auto; padding: .85rem clamp(1rem, 4vw, 3rem); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--color-border); }
.brand { display: inline-block; }
.brand img { display: block; width: clamp(12rem, 22vw, 16rem); height: auto; }
/* One navigation model at every width: the language selector stays visible and
   separate from the hamburger, and the hamburger opens the site navigation
   links only. On wide desktop the selector and the trigger share the sticky top
   region of the right contextual column; on narrow screens they sit in the
   header. The menu is the same dropdown everywhere. */
.site-menu-bar { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.site-nav { display: none; position: absolute; top: calc(100% + .5rem); right: 0; z-index: 8; flex-direction: column; align-items: stretch; gap: .15rem; padding: .5rem; border: 1px solid var(--color-border); border-radius: calc(var(--radius) * 1.5); background: var(--color-surface); box-shadow: 0 .25rem .8rem rgba(32,32,30,.12); font-size: .9rem; font-weight: 700; }
.site-nav.is-open { display: flex; }
.site-nav a { display: block; padding: .55rem .8rem; border-radius: var(--radius); color: var(--color-accent); text-decoration: none; white-space: nowrap; }
.site-nav a:hover { background: #f6eeee; }
.site-nav span[aria-hidden="true"] { display: none; }
.page-menu-toggle { display: inline-grid; place-items: center; min-width: 2.5rem; min-height: 2.5rem; padding: 0 .7rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); font-weight: 700; }
.page-menu-lines { position: relative; display: block; width: 1.15rem; height: .13rem; border-radius: 1px; background: currentColor; }
.page-menu-lines::before, .page-menu-lines::after { content: ""; position: absolute; left: 0; width: 1.15rem; height: .13rem; border-radius: 1px; background: currentColor; }
.page-menu-lines::before { top: -.36rem; }
.page-menu-lines::after { top: .36rem; }
.translation { border: 1px solid var(--color-border); border-radius: 2rem; color: var(--color-text); padding: .45rem .8rem; text-decoration: none; font-size: .84rem; font-weight: 700; }
.translation span { color: var(--color-muted); font-weight: 400; margin-left: .3rem; }
.reader-shell { max-width: 76rem; margin: 0 auto; padding: clamp(.75rem, 2vw, 1.5rem) clamp(1rem, 4vw, 3rem); }
.eyebrow { color: var(--color-accent); font-size: .75rem; font-weight: 750; letter-spacing: .14em; margin: 0 0 .65rem; text-transform: uppercase; }
.library-header h1, .chapter-header h1 { max-width: none; font-family: Georgia, serif; font-size: clamp(2.25rem, 6vw, 4.5rem); font-weight: 500; }
.library-header p:last-child, .state p, .search-instructions { color: var(--color-muted); }
.search-instructions { margin: 0 0 1.25rem; }
.question-header { margin: 0 0 1.5rem; }
.question-header h1 { max-width: none; margin: 0 0 .85rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 500; letter-spacing: -.01em; line-height: 1.15; }
.question-framing { max-width: 44rem; margin: 0; color: var(--color-muted); font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; line-height: 1.7; }
.question-exposition { max-width: 48rem; margin: 2.5rem 0 0; }
.question-exposition p { margin: 0 0 1.1rem; font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; line-height: 1.75; }
.related-questions { margin: 2.75rem 0 0; }
.related-questions h2 { margin: 0 0 .85rem; color: var(--color-accent); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.2rem, 2.1vw, 1.45rem); font-weight: 400; }
.related-questions ul { margin: 0; padding: 0; list-style: none; }
.related-questions li { margin: 0 0 .45rem; }
.related-questions a { color: var(--color-accent); }
.testaments { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 7vw, 6rem); margin-top: 3.5rem; }
.testaments h2 { font-family: Georgia, serif; font-size: 1.45rem; }
.book-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .4rem; list-style: none; padding: 0; }
.book-grid a { display: flex; flex-direction: column; padding: .75rem; border-radius: var(--radius); color: var(--color-text); text-decoration: none; }
.book-grid a:hover { background: #f6eeee; }
.book-grid small { color: var(--color-muted); }
.crumbs { display: flex; gap: .55rem; color: var(--color-muted); font-size: .85rem; }
.crumbs a, .browse-link { color: var(--color-accent); }
.chapter-header { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin: 3rem 0 2rem; }
.chapter-header h1 span { color: var(--color-muted); font-style: italic; }
.chapter-column-title { margin: 0; font-family: Georgia, serif; font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 500; line-height: 1.1; }
.chapter-column-title span { color: var(--color-muted); font-style: italic; }
/* The Chapter heading is the persistent Scripture-location reference while
   reading; it stays visible per column without changing the continuous body. */
.chapter-header { position: sticky; top: var(--sticky-location-top); z-index: 6; background: var(--color-bg); }
/* A chapter keeps SABER's contextual structure: the canonical passage that
   begins there is named and links into its Passage reading. Restrained so the
   approved chapter typography and reading flow are unchanged. */
.chapter-pericope { margin: 1.4rem 0 .35rem; font-family: Georgia,serif; font-size: 1.05rem; font-weight: 600; color: var(--color-muted); }
.chapter-pericope a { color: inherit; text-decoration: none; }
.chapter-pericope a:hover { text-decoration: underline; }
.has-search-context .chapter-header { top: var(--sticky-location-top-context); }
.chapter-compare-columns .compare-column-head { position: sticky; top: var(--sticky-location-top); z-index: 6; background: var(--color-bg); }
.has-search-context .chapter-compare-columns .compare-column-head { top: var(--sticky-location-top-context); }
.browse-link { margin-bottom: 1rem; }
.chapter-return { position: sticky; top: 1rem; z-index: 2; width: max-content; margin: 0 0 -3rem min(50rem, calc(100% - 10rem)); }
.chapter-return a { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; padding: .45rem .8rem; border: 1px solid var(--color-accent); border-radius: 2rem; background: var(--color-accent); color: #fff; font-size: .85rem; font-weight: 700; text-decoration: none; }
.chapter-return a:hover, .chapter-return a:active { border-color: var(--color-accent-dark); background: var(--color-accent-dark); color: #fff; }
.scripture { max-width: 48rem; color: #24231f; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.12rem, 2vw, 1.32rem); line-height: 1.85; }
.verse { scroll-margin-top: 1rem; }
.verse:target { background: #faecec; border-left: .18rem solid var(--color-accent); border-radius: .2rem; box-shadow: 0 0 0 .16rem #faecec; }
.verse-number { display: inline-block; min-width: 1.35em; margin-right: .3em; color: var(--color-accent); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: .85em; font-weight: 700; text-align: center; text-decoration: none; vertical-align: super; }
.scripture .verse-number, .compare-column .verse-number { min-width: 0; margin: 0 .28em 0 .5em; color: var(--color-accent); vertical-align: baseline; }
.scripture em { font-style: italic; }
.chapter-nav { max-width: 48rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3.5rem; border-top: 1px solid var(--color-border); padding-top: 1.5rem; }
.chapter-nav a { display: flex; gap: .65rem; align-items: center; color: var(--color-text); text-decoration: none; }
.chapter-nav a:last-child { justify-content: flex-end; text-align: right; }
.chapter-nav small { display: block; color: var(--color-muted); }
.state { max-width: 42rem; min-height: 45vh; }
.reader-form { max-width: 58rem; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.25rem 1rem; margin-top: 1rem; padding: clamp(1rem,3vw,2rem); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: calc(var(--radius) * 1.5); }
.reader-form > .field, .reference-fields, .edition-fields, .form-actions { grid-column: 1 / -1; }
.reader-form > .half-field { grid-column: 1; }
.reader-form > .search-advanced-toggle { grid-column: 1 / -1; justify-self: end; width: auto; min-width: 2.75rem; min-height: 2.25rem; margin: -.5rem 0; padding: .25rem .5rem; appearance: none; -webkit-appearance: none; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--color-accent); font: inherit; font-size: 1.25rem; font-weight: 700; line-height: 1; cursor: pointer; }
.reader-form > .search-advanced-toggle:hover, .reader-form > .search-advanced-toggle:active { background: none; color: var(--color-accent-dark); }
.feedback-form textarea { width: 100%; min-height: 8rem; padding: .6rem var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius); font: inherit; resize: vertical; }
.feedback-form .cf-turnstile { grid-column: 1 / -1; min-height: 65px; }
.feedback-status { margin: 1.5rem 0; font-weight: 700; }
.about-page, .mission-page { max-width: 46rem; margin: 0 auto; padding: 1rem 0 4rem; }
/* Shared editorial presentation for auxiliary/institutional pages: Mission,
   About, Feedback, How To, and reader states. One quiet H1/H2/prose/rhythm
   scale; functional components (reader-form, support form, How To demo, state
   actions) keep their own component styling, and Donate keeps its separately
   tuned typography. */
.mission-page h1, .about-page h1, .feedback-page h1, .howto-page h1, .state h1 { max-width: 24ch; margin: 0 0 1.75rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.75rem, 3.6vw, 2.35rem); font-weight: 500; letter-spacing: -.01em; line-height: 1.15; }
.about-page h2, .feedback-page h2, .howto-page h2, .state h2 { max-width: 42ch; margin: 0 0 .55rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.08rem, 1.9vw, 1.3rem); font-weight: 600; letter-spacing: 0; line-height: 1.35; text-transform: none; }
.mission-page h2 { max-width: 42ch; margin: 0 0 .55rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.2rem, 2.1vw, 1.45rem); font-weight: 400; letter-spacing: 0; line-height: 1.35; color: var(--color-accent); text-transform: none; }
.mission-page p, .about-page p { max-width: 44rem; margin: 0 0 1.25rem; font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; line-height: 1.7; }
.mission-page .mission-principle { margin: 0; }
.mission-page .mission-principle + .mission-principle { margin-top: 2.6rem; }
.about-page .about-final { margin-top: 2.4rem; font-size: 1.32rem; }
.about-page .about-signature { margin-top: 2.8rem; font-family: Georgia, "Times New Roman", serif; }
.about-page .about-signature-name { display: block; font-size: 1.08rem; font-weight: 600; line-height: 1.4; }
.about-page .about-signature-site { display: block; margin-top: .1rem; font-size: .82rem; font-weight: 400; letter-spacing: .045em; opacity: .72; }
.howto-page { max-width: 76rem; margin: 0 auto; padding: 1rem 0 4rem; }
.howto-demo { margin-top: 1.6rem; padding: clamp(.75rem, 1.5vw, 1.25rem); border: 1px solid var(--color-border); border-radius: calc(var(--radius) * 1.5); background: var(--color-surface); }
.howto-progress { display: flex; justify-content: center; gap: .5rem; margin: 0 0 .9rem; padding: 0; list-style: none; }
.howto-progress-step { width: 1.7rem; height: 1.7rem; padding: 0; border: 1px solid var(--color-border); border-radius: 50%; background: transparent; color: var(--color-muted); font-size: .72rem; font-weight: 700; line-height: 1; }
.howto-progress-step:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent); }
.howto-progress-step.is-done { border-color: var(--color-accent); color: var(--color-accent); }
.howto-progress-step[aria-current="step"] { border-color: var(--color-accent); color: var(--color-accent); box-shadow: 0 0 0 2px rgba(153, 0, 0, .16); }
.howto-view { position: relative; height: clamp(34rem, 66vh, 50rem); }
.howto-stage { position: absolute; inset: 0; display: none; overflow: hidden; padding: .25rem .15rem 0; }
.howto-stage.is-active { display: block; animation: howto-in .35s ease both; }
.howto-caption { margin: .4rem 0 .9rem; font-family: Georgia, serif; font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-weight: 500; line-height: 1.35; text-align: center; }
.howto-stage[data-howto-stage="search"] { display: none; }
.howto-stage[data-howto-stage="search"].is-active { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.howto-search { width: min(100%, 38rem); margin: 0 auto; }
.howto-search-field { display: flex; align-items: center; min-height: 3.4rem; padding: 0 1.1rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-field); color: var(--color-text); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.2rem, 2.2vw, 1.5rem); overflow-wrap: anywhere; }
.howto-caret { width: 1px; height: 1.5em; margin-left: .1rem; background: var(--color-accent); animation: howto-caret 1.1s step-end infinite; }
.howto-demo:not(.is-typing) .howto-caret { display: none; }
.howto-context { height: calc(100% - 4.8rem); max-width: none; margin: 0 auto; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); overscroll-behavior: contain; }
.howto-context-unit { padding: 1.3rem clamp(1rem, 2vw, 1.8rem) 1.5rem; scroll-margin: 0; }
.howto-context-unit h2, .howto-follow-page h2, .howto-compare h2 { margin: .1rem 0 .4rem; font-family: Georgia, serif; font-size: 1.35rem; font-weight: 500; line-height: 1.3; }
.howto-context-unit .eyebrow, .howto-follow-page .eyebrow { margin-top: 0; }
.howto-range { margin: 0 0 .9rem; color: var(--color-muted); font-size: .92rem; font-weight: 600; }
.howto-scripture { margin: 0; font-size: clamp(1.08rem, 1.7vw, 1.28rem); }
.howto-context-unit .howto-scripture { max-width: 72ch; }
.howto-follow { height: calc(100% - 7.2rem); max-width: 68rem; margin: 0 auto; display: grid; }
.howto-follow-page { display: none; grid-area: 1 / 1; margin: 0; padding: .4rem .2rem; overflow-wrap: anywhere; overflow-y: auto; }
.howto-follow-page.is-current { display: block; animation: howto-in .4s ease both; }
.howto-follow-page p { margin: 0 0 .8rem; }
.howto-follow-nav { display: flex; align-items: center; justify-content: space-between; gap: .75rem; max-width: 68rem; margin: .4rem auto 0; }
.howto-follow-count { color: var(--color-muted); font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.howto-compare { height: calc(100% - 5.2rem); max-width: none; margin: 0 auto; overflow-y: auto; align-content: start; }
.howto-compare.compare-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.howto-compare .scripture { max-width: none; font-size: clamp(1.05rem, 1.55vw, 1.24rem); }
.howto-compare p { margin: 0 0 .75rem; overflow-wrap: anywhere; }
.howto-compare .howto-range { margin-bottom: .7rem; }
.howto-end { text-align: center; }
.howto-stage.howto-end.is-active { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.howto-end-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; margin-top: 2rem; }
.howto-controls { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.howto-link-button { min-height: 2.5rem; padding: .35rem .6rem; border: 0; border-radius: var(--radius); background: transparent; color: var(--color-accent); font-weight: 700; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.howto-link-button:hover:not(:disabled) { color: var(--color-accent-dark); }
.howto-link-button:disabled { opacity: .5; }
.howto-end { text-align: center; }
.howto-end-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; margin-top: 2rem; }
.howto-controls { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.howto-link-button { min-height: 2.5rem; padding: .35rem .6rem; border: 0; border-radius: var(--radius); background: transparent; color: var(--color-accent); font-weight: 700; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.howto-link-button:hover:not(:disabled) { color: var(--color-accent-dark); }
.howto-link-button:disabled { opacity: .5; }
@keyframes howto-in { from { opacity: 0; transform: translateY(.35rem); } to { opacity: 1; transform: none; } }
@keyframes howto-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.field label, .range-fields legend, .edition-fields legend { display: block; margin-bottom: .4rem; font-size: .86rem; font-weight: 700; }
.field input, .field select { width: 100%; min-height: 2.75rem; }
.field small { display: block; color: var(--color-muted); margin-top: .35rem; }
.field-error { display: block; color: #9f2720; font-size: .84rem; margin-top: .35rem; }
.form-error { grid-column: 1 / -1; margin: 0; padding: .65rem .8rem; border-left: .25rem solid #b33a32; background: #fff2f0; color: #76201b; }
[aria-invalid="true"] { border-color: #b33a32; box-shadow: 0 0 0 1px #b33a32; }
.range-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.range-pair { display: grid; grid-template-columns: 1fr 1fr; column-gap: .65rem; row-gap: .4rem; align-items: start; }
.range-pair > .field { display: contents; }
.range-pair > .field:nth-child(odd) > * { grid-column: 1; }
.range-pair > .field:nth-child(even) > * { grid-column: 2; }
.range-pair > .field > label { grid-row: 1; margin-bottom: 0; }
.range-pair > .field > input { grid-row: 2; }
.range-pair > .field > .field-error { grid-row: 3; }
.reference-fields { min-width: 0; margin: 0; padding: 1rem 0 0; border: 0; border-top: 1px solid var(--color-border); }
.edition-fields { min-width: 0; margin: 0; padding: 0 0 1rem; border: 0; border-bottom: 1px solid var(--color-border); }
.edition-selectors { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.reference-row { display: grid; grid-template-columns: minmax(12rem,2fr) minmax(5rem,1fr) minmax(5rem,1fr); gap: .65rem; }
.form-actions { position: sticky; bottom: max(.5rem, env(safe-area-inset-bottom)); z-index: 3; display: flex; align-items: center; justify-content: space-between; margin: 0 -.5rem -.5rem; padding: .65rem .5rem; border-top: 1px solid var(--color-border); background: rgba(255,255,255,.97); box-shadow: 0 -.25rem .6rem rgba(32,32,30,.06); }
.read-action { order: 2; }
.clear-action { order: 1; border-color: var(--color-accent); background: var(--color-surface); color: var(--color-accent); }
.clear-action:hover { background: #f6eeee; color: var(--color-accent-dark); }
/* Witness/Compare navigations (Compare control, Witness switch, add-Witness)
   carry the #study-results fragment so the re-rendered comparison lands at the
   results instead of jumping to the top of the page. The target is the results
   container immediately below the selectors/Compare row in every shared view
   (Search/Results, Question evidence, Passage, Chapter); the scroll margin is
   the existing in-page sticky stack, so the landed content is never hidden
   behind the sticky toolbar/controls. */
/* In-page landings (Compare/Witness re-renders, result anchors) must clear the
   WHOLE persistent stack — Search Context, Testament and Book — so the first
   pericope heading and verse are not parked underneath it. */
#study-results { scroll-margin-top: calc(var(--sticky-location-top-context) + 2 * var(--sticky-location-step)); }
/* Static document spacing only: the sticky stack owns the offsets once the
   reader scrolls, so the entry spacing stays a normal rhythm close to the
   sticky position instead of a screen-sized gap or a visible run-up. */
.search-results { max-width: 58rem; margin-top: 0; }
/* A Question page keeps a little more air after its authored article. */
.has-question .search-results { margin-top: 1.5rem; }
.results-toolbar + .result-batch .pericope-result:first-child { margin-top: 1rem; }
.results-toolbar { position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: minmax(12rem,1fr) auto auto; gap: .7rem 1rem; align-items: center; min-height: 4rem; padding: .65rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: rgba(255,255,255,.97); box-shadow: 0 .2rem .8rem rgba(32,32,30,.09); }
.search-results .results-toolbar.search-context-toolbar { padding-bottom: .9rem; background: var(--color-surface); }
.results-toolbar + .compare-result-columns { margin-top: 1rem; }
.compare-result-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.25rem; align-items: start; }
.compare-result-column { min-width: 0; }
.comparison-result-stack { display: block; }
.comparison-control-row,
.comparison-sticky-row,
.comparison-context-row,
.comparison-verse-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.25rem; align-items: start; }
.comparison-cell { min-width: 0; }
.comparison-control-row { position: sticky; top: .75rem; z-index: 8; margin: .25rem 0 .75rem; padding: .5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: calc(var(--radius) * 1.5); box-shadow: 0 .2rem .6rem rgba(32,32,30,.08); }
.has-search-context .comparison-control-row { top: 5rem; }
.comparison-sticky-row { position: sticky; top: calc(var(--sticky-location-top) - var(--sticky-location-mask)); z-index: 6; margin: 0 0 .75rem; padding: var(--sticky-location-mask) .25rem .5rem; background: var(--color-bg); }
.has-search-context .comparison-sticky-row { top: calc(var(--sticky-location-top-context) - var(--sticky-location-mask)); }
.comparison-book-row { top: var(--sticky-location-top); }
.has-search-context .comparison-book-row { top: calc(var(--sticky-location-top-context) + var(--sticky-location-step)); }
.comparison-sticky-row h4,
.comparison-sticky-row h5 { margin: 0; }
.comparison-testament-row h4 { padding: .65rem .8rem; border-left: .2rem solid var(--color-accent); background: #f6eeee; color: var(--color-text); font-family: Georgia,serif; font-size: 1.15rem; letter-spacing: .04em; }
.comparison-book-row h5 { padding: .35rem .25rem .5rem; color: var(--color-accent); font-family: Georgia,serif; font-size: 1.1rem; }
.comparison-group { margin-top: 2rem; }
.comparison-group .comparison-context-row { margin-bottom: .75rem; }
.comparison-verse-row { margin: 0; }
.comparison-verse-row .result-verse { margin: 0; }
.comparison-verse-row + .comparison-verse-row { margin-top: .25rem; }
.passage-column-edition { position: sticky; top: 0; z-index: 4; display: block; width: 100%; min-height: 2.4rem; margin: 0 0 .35rem; padding: .3rem .45rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); font-size: .9rem; font-weight: 700; box-shadow: 0 .12rem .3rem rgba(32,32,30,.05); }
.scripture-edition-select { appearance: none; -webkit-appearance: none; width: 100%; height: 2.4rem; min-height: 2.4rem; max-height: 2.4rem; padding: 0 1.8rem 0 .55rem; border: 1px solid var(--color-border); border-radius: var(--radius); background-color: var(--color-surface); background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%), linear-gradient(135deg, var(--color-muted) 50%, transparent 50%); background-position: calc(100% - 1rem) 50%, calc(100% - .65rem) 50%; background-size: .35rem .35rem, .35rem .35rem; background-repeat: no-repeat; color: var(--color-text); font: inherit; font-size: .9rem; font-weight: 700; line-height: 1; box-sizing: border-box; }
.scripture-edition-select:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.passage-witness-header { display: flex; align-items: center; gap: .75rem; }
.reader-shell .passage-witness-header { position: sticky; top: .75rem; z-index: 8; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .25rem 0 .75rem; padding: .5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: calc(var(--radius) * 1.5); box-shadow: 0 .2rem .6rem rgba(32,32,30,.08); }
.reader-shell .passage-witness-header .passage-column-edition { position: static; min-height: 2.4rem; flex: 1 1 12rem; }
.reader-shell .passage-witness-header .passage-column-edition { height: 2.4rem; max-height: 2.4rem; padding: 0 .55rem; }
.reader-shell .passage-witness-header .passage-witness-edition { display: flex; align-items: center; justify-content: flex-start; margin: 0; }
.reader-shell .passage-witness-header .passage-add-witness { min-height: 2.4rem; flex: 0 0 auto; }
.reader-shell .passage-witness-header .passage-witness-remove { align-self: center; }
.search-context-toolbar { top: .75rem; z-index: 9; }
.search-context-refine { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: .35rem .75rem; border-radius: var(--radius); font-size: .82rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.search-context-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.has-search-context .passage-witness-header { top: 5rem; }
/* ONE Search Context instrument: Search Criteria and the edition/Compare
   controls share one very-light neutral surface with a single internal divider,
   white interactive controls and no floating-card shadows. The two DOM layers
   stay separate so the sticky stack is unchanged. */
.search-results > .results-toolbar.search-context-toolbar {
  /* 4.25rem is the height the sticky stack already assumes for this layer, so
     the controls below touch it in normal flow and in the sticky state. */
  min-height: 4.25rem;
  border: 1px solid var(--color-border);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--color-field);
  box-shadow: none;
}
.search-results > .passage-witness-header {
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--color-field);
  box-shadow: none;
}
.search-results .comparison-control-row {
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--color-field);
  box-shadow: none;
}
.compare-result-column .result-batch > .scripture-run:first-child { margin-top: 0; }
.compare-result-column .passage-witness-actions { margin-bottom: .5rem; }
.compare-result-column .pericope-identity { margin-bottom: .25rem; }
.compare-result-column .passage-witness-edition,
.compare-result-column .passage-witness-actions .passage-column-edition { display: block; height: 2.4rem; min-height: 2.4rem; max-height: 2.4rem; padding: 0 .55rem; border: 1px solid var(--color-border); border-radius: var(--radius); box-sizing: border-box; font-size: .9rem; line-height: 2.2rem; }
.compare-result-column .passage-witness-edition { display: flex; align-items: center; margin: 0; line-height: 1; }
.compare-result-column .passage-witness-header { padding: 0; margin: 0; border: 0; border-radius: 0; background: var(--color-bg); box-shadow: none; }
.has-search-context .compare-result-column .passage-witness-edition,
.has-search-context .compare-result-column .passage-witness-actions { position: sticky; top: 5rem; z-index: 7; padding: 0; margin: 0 0 .35rem; background: var(--color-bg); }
.has-search-context .compare-result-column .passage-witness-edition { height: 2.4rem; }
.passage-witness-header .passage-column-edition { flex: 1; min-width: 0; margin-bottom: 0; }
.passage-witness-header .passage-add-witness { flex: none; margin: 0; white-space: nowrap; }
.passage-witness-actions { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.passage-witness-actions select { margin-bottom: 0; }
.passage-witness-actions .passage-add-witness { flex: none; margin: 0; white-space: nowrap; }
.passage-witness-edition { display: flex; align-items: center; height: 2.4rem; min-height: 2.4rem; max-height: 2.4rem; margin: 0 0 .5rem; padding: 0 .55rem; color: var(--color-text); font-size: .9rem; font-weight: 700; line-height: 1; box-sizing: border-box; }
.passage-witness-remove { flex: none; display: inline-grid; place-items: center; min-width: 2rem; min-height: 2rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-muted); font-size: 1.1rem; line-height: 1; text-decoration: none; }
.passage-witness-remove:hover { color: var(--color-accent); border-color: var(--color-accent); }
.passage-add-witness { display: inline-flex; align-items: center; justify-content: center; min-height: 2.4rem; margin: 0; padding: 0 .85rem; border: 1px solid var(--color-accent); border-radius: var(--radius); background: var(--color-accent); color: #fff; font-size: .9rem; font-weight: 700; white-space: nowrap; text-decoration: none; cursor: pointer; }
.passage-add-witness:hover:not(:disabled) { background: #fff; border-color: var(--color-accent); color: var(--color-accent); }
.passage-add-witness:disabled { opacity: .5; cursor: not-allowed; }
/* Scripture edition/Compare controls: the static Primary field and the editable
   Witness select share one box geometry (height, padding, border, radius,
   baseline). Only the Witness keeps extra room for its disclosure arrow, and
   the independent remove control stays untouched. */
.reader-shell .passage-witness-header .passage-column-edition,
.reader-shell .passage-witness-header .passage-witness-edition,
.reader-shell .passage-witness-actions .passage-column-edition,
.compare-result-column .passage-witness-edition,
.compare-result-column .passage-witness-actions .passage-column-edition {
  display: block;
  height: 2.4rem;
  min-height: 2.4rem;
  max-height: 2.4rem;
  margin: 0;
  padding: 0 .55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  line-height: 2.2rem;
  box-sizing: border-box;
}
.reader-shell .passage-witness-header select.passage-column-edition,
.reader-shell .passage-witness-actions select.passage-column-edition,
.compare-result-column select.passage-column-edition { padding-right: 1.8rem; }
.compare-result-column .result-batch { padding-top: .5rem; }
.search-results[data-continuous-results] > .result-batch { padding-top: 0; }

.compare-result-heading { margin: 0 0 .35rem; color: var(--color-muted); font-size: .82rem; font-weight: 700; letter-spacing: .04em; }
.results-toolbar p { margin: 0; }
.criteria-summary { min-width: 0; font-size: .88rem; font-weight: 650; }
.criteria-summary .criteria-label { color: var(--color-text); }
.criteria-summary .criteria-field { color: var(--color-muted); }
.criteria-summary .criteria-value { color: var(--color-accent); }
#results-progress { color: var(--color-muted); font-size: .82rem; white-space: nowrap; }
#results-progress .semantic-count b { color: var(--color-text); font-weight: 800; }
.results-toolbar button { min-height: 2.5rem; padding: .35rem .75rem; background: var(--color-accent); color: #fff; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.results-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; border-bottom: 1px solid var(--color-border); padding-bottom: 1rem; }
.results-heading h2 { margin: 0; font-family: Georgia,serif; font-size: 2rem; }
.results-heading a, .pagination a { color: var(--color-accent); }
/* Search keeps two nested semantic sticky runs: a Testament run that bounds the
   sticky Testament row and a Book run that bounds the sticky Book row. Each
   header is released when its own run ends, so the next book replaces the
   previous book in the same slot and the next Testament replaces the previous
   Testament in the same slot — nothing accumulates. Everything inside the book
   run stays flattened so a header is never bounded by one result group. */
.search-results[data-continuous-results] .scripture-testament-run,
.search-results[data-continuous-results] .scripture-book-run { display: block; }
.search-results[data-continuous-results] .scripture-book-run > .pericope-result,
.search-results[data-continuous-results] .scripture-book-run .pericope-result > section[data-testament],
.search-results[data-continuous-results] .scripture-book-run .pericope-result section[data-testament] > section[data-book] { display: contents; }
.pericope-result { margin-top: 2rem; }
.pericope-result h3 { font-family: Georgia,serif; font-size: 1.35rem; margin-bottom: .75rem; }
.pericope-result h4 { margin: 2.75rem 0 1rem; padding: .65rem .8rem; border-left: .2rem solid var(--color-accent); background: #f6eeee; color: var(--color-text); font-family: Georgia,serif; font-size: 1.15rem; letter-spacing: .04em; }
.pericope-result h5 { font-family: Georgia,serif; font-size: 1.2rem; margin: 1.5rem 0 .6rem; }
.context-separator { height: 0; margin: 1.35rem 0 .25rem; border-top: 1px solid #990000; }
/* Shared Scripture-location heading used by Search results, the Passage reader
   and the Chapter reader, so every surface keeps the same Testament/Book (or
   Chapter) location reference. The whole sticky block carries one fully opaque
   fill, and the painted top inset is part of that fill, so text scrolling
   beneath cannot show through the text, the padding, the spacing, or the edges
   of the region. */
.scripture-location { position: sticky; top: calc(var(--sticky-location-top) - var(--sticky-location-mask)); z-index: 6; margin: 0 0 .75rem; padding: var(--sticky-location-mask) .25rem .5rem; background: var(--color-bg); }
/* Contextual location persistence depends on whether the canonical dimension can
   vary inside the navigable content: a single passage holds one Book/Testament,
   so the Passage surface does not spend sticky space on an invariant location.
   Result streams can cross books/testaments and keep the sticky rows. */
.canon-passage .scripture-location { position: static; }
.has-search-context .scripture-location { top: calc(var(--sticky-location-top-context) - var(--sticky-location-mask)); }
.scripture-location h4 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; font-weight: 500; letter-spacing: .04em; color: var(--color-text); }
.scripture-location h5 { margin: .15rem 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; font-weight: 500; color: var(--color-accent); }
/* Search results keep the same pale Testament bar and red Book line, but as two
   nested sticky rows: the Testament row is bounded by the Testament run and the
   Book row by the Book run, and both carry the opaque masking surface. */
.search-results[data-continuous-results] .scripture-location { display: block; background: var(--color-bg); }
/* The mask keeps the validated sticky geometry (no negative pull, nothing raised
   under the stack) and paints its area as the Search Context surface, so the
   space reads as the instrument's own bottom padding rather than a blank band. */
.search-results[data-continuous-results] .scripture-testament { top: calc(var(--sticky-location-top-context) - var(--sticky-location-mask)); margin: 0; padding: var(--sticky-location-mask) .25rem 0; background: var(--color-field); }
/* The comparison Testament row carries the same surface treatment; the Book row
   and its offset are untouched. */
.comparison-sticky-row.comparison-testament-row { background: var(--color-field); }
.search-results[data-continuous-results] .scripture-book { top: calc(var(--sticky-location-top-context) + var(--sticky-location-step)); margin: 0 0 .5rem; padding: 0 .25rem; }
.search-results[data-continuous-results] .scripture-testament h4 { margin: 0; padding: .65rem .8rem; border-left: .2rem solid var(--color-accent); background: #f6eeee; color: var(--color-text); font-size: 1.3rem; letter-spacing: .04em; }
.search-results[data-continuous-results] .scripture-book h5 { margin: 0; padding: .35rem .25rem .5rem; color: var(--color-accent); font-size: 1.15rem; }
/* The sticky Book level sits directly above white Scripture text, so it carries
   the design system's existing very-light neutral surface; the Testament bar and
   Chapter heading keep their own established backgrounds. */
.scripture-location.scripture-book,
.search-results[data-continuous-results] .scripture-book,
.comparison-sticky-row.comparison-book-row { background: var(--color-field); }
.canon-passage .passage-column-title { margin: .1rem 0 .75rem; }
.pericope-identity { margin: .65rem 0 .35rem; padding: .3rem .25rem; color: var(--color-accent); font-family: Georgia,serif; font-size: 1rem; font-weight: 700; }
.pericope-identity a,
.pericope-identity a:visited,
.pericope-identity a:hover,
.pericope-identity a:active,
.pericope-identity a:focus { color: var(--color-text); text-decoration: none; }
.context-note { color: var(--color-muted); font-size: .82rem; font-style: italic; }
.result-chapter { display: grid; gap: .25rem; }
.result-verse { margin: 0; scroll-margin-top: 1rem; font-family: Georgia,"Times New Roman",serif; font-size: 1.08rem; line-height: 1.65; }
.pericope-result .result-chapter:last-child .result-verse:last-child { margin-bottom: .6rem; }
.result-verse:target { background: #faecec; border-left: .18rem solid var(--color-accent); }
.result-verse a { display: grid; grid-template-columns: max-content minmax(0,1fr); column-gap: .3em; color: var(--color-text); padding: .18rem .25rem; text-decoration: none; }
.result-verse a:hover { background: #f6eeee; }
.result-reference { display: inline-block; min-width: 2.8em; color: var(--color-accent); font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size: .96em; font-weight: 700; white-space: nowrap; }
.result-verse mark { background: #FFF275; color: inherit; padding: 0 .05em; }
.result-verse mark.search-highlight-1 { background: #FFF275; }
.result-verse mark.search-highlight-2 { background: #B9FBC0; }
.result-verse mark.search-highlight-3 { background: #B8D4F5; }
.result-verse mark.search-highlight-4 { background: #F8B8C6; }
.result-verse mark.search-highlight-5 { background: #D8BBFF; }
.result-verse mark.search-highlight-6 { background: #FFD0A8; }
.result-verse mark.search-highlight-7 { background: #A8E6E6; }
.result-verse mark.search-highlight-8 { background: #D7F59A; }
.result-verse mark.search-highlight-9 { background: #F6B09D; }
.result-verse mark.search-highlight-10 { background: #C5C6F7; }
.pericope-result h3 a { color: var(--color-accent); }
.canon-passage { max-width: 48rem; }
.compare-column.canon-passage { max-width: none; }
.canon-header .canon-range { margin: 0 0 .35rem; color: var(--color-muted); font-size: clamp(1.05rem, 2vw, 1.25rem); font-weight: 700; letter-spacing: .02em; }
.canon-header { margin-top: .75rem; }
.canon-header h1 { max-width: none; margin: 0; font-family: Georgia, serif; font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
.passage-column-title { margin: 0; font-family: Georgia, serif; font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
.canon-passage .passage-verse-lines { display: grid; gap: .25rem; }
.canon-passage .result-verse { margin: 0; }
.canon-passage-compare .compare-column-head { margin-bottom: .35rem; }
.load-more { margin-top: 2rem; text-align: center; }
.load-more a, .load-more button { display: inline-block; border: 1px solid var(--color-border); border-radius: 2rem; background: var(--color-surface); color: var(--color-accent); padding: .7rem 1.2rem; text-decoration: none; }
.easter-egg-result { margin-top: 1rem; }
.nozes-page { max-width: 50rem; }
.nozes-page h1 { font-family: Georgia, serif; font-size: clamp(2.25rem, 6vw, 4rem); }
.nozes-page .lead { color: var(--color-muted); font-size: 1.1rem; }
.nozes-title { opacity: 0; animation: nozes-rise .65s ease-out forwards; }
@keyframes nozes-rise { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.nozes-video { position: relative; width: 100%; max-width: 50rem; margin: 1.5rem 0; aspect-ratio: 16 / 9; background: #000; }
.nozes-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.nozes-video-overlay { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: #000; }
.nozes-play { display: inline-grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; border: 2px solid rgba(255,255,255,.8); background: transparent; color: #fff; font-size: 1.8rem; }
.nozes-card { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 1.5rem; opacity: 0; pointer-events: none; text-align: center; background: rgba(20,20,18,.88); color: #fff; font-family: Georgia, serif; font-size: clamp(1.4rem, 4vw, 2.2rem); animation: nozes-card 1.9s ease .75s forwards; }
@keyframes nozes-card { 0%, 25% { opacity: 0; } 40%, 75% { opacity: 1; } 100% { opacity: 0; } }
.nozes-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.nozes-confetti span { position: absolute; top: -10px; display: block; width: 8px; height: 14px; opacity: .9; }
@keyframes nozes-fall { to { transform: translateY(110vh) rotate(720deg); opacity: 0; } }
.nozes-confetti span:nth-child(1) { left: 8%; background: #990000; animation: nozes-fall 1.4s .1s ease-in forwards; }
.nozes-confetti span:nth-child(2) { left: 17%; background: #F6B09D; animation: nozes-fall 1.2s .25s ease-in forwards; }
.nozes-confetti span:nth-child(3) { left: 26%; background: #B8D4F5; animation: nozes-fall 1.5s .05s ease-in forwards; }
.nozes-confetti span:nth-child(4) { left: 34%; background: #D8BBFF; animation: nozes-fall 1.1s .3s ease-in forwards; }
.nozes-confetti span:nth-child(5) { left: 43%; background: #FFD0A8; animation: nozes-fall 1.3s .15s ease-in forwards; }
.nozes-confetti span:nth-child(6) { left: 52%; background: #B9FBC0; animation: nozes-fall 1.45s .05s ease-in forwards; }
.nozes-confetti span:nth-child(7) { left: 61%; background: #F8B8C6; animation: nozes-fall 1.15s .3s ease-in forwards; }
.nozes-confetti span:nth-child(8) { left: 70%; background: #D7F59A; animation: nozes-fall 1.5s .1s ease-in forwards; }
.nozes-confetti span:nth-child(9) { left: 78%; background: #A8E6E6; animation: nozes-fall 1.25s .35s ease-in forwards; }
.nozes-confetti span:nth-child(10) { left: 86%; background: #C5C6F7; animation: nozes-fall 1.4s .2s ease-in forwards; }
.nozes-confetti span:nth-child(11) { left: 94%; background: #990000; animation: nozes-fall 1.1s .4s ease-in forwards; }
.nozes-confetti span:nth-child(12) { left: 12%; background: #D8BBFF; animation: nozes-fall 1.55s .05s ease-in forwards; }
.nozes-confetti span:nth-child(13) { left: 31%; background: #FFD0A8; animation: nozes-fall 1.2s .2s ease-in forwards; }
.nozes-confetti span:nth-child(14) { left: 48%; background: #B8D4F5; animation: nozes-fall 1.5s .1s ease-in forwards; }
.nozes-confetti span:nth-child(15) { left: 66%; background: #F6B09D; animation: nozes-fall 1.3s .3s ease-in forwards; }
.nozes-confetti span:nth-child(16) { left: 82%; background: #B9FBC0; animation: nozes-fall 1.2s .35s ease-in forwards; }
.nozes-after { color: var(--color-muted); font-size: 1.05rem; }
.nozes-laugh { display: inline-grid; place-items: center; min-width: 4rem; min-height: 4rem; font-size: 2rem; background: var(--color-surface); color: inherit; }
.nozes-cta { display: inline-block; margin-top: 1rem; padding: .55rem 1rem; border: 1px solid var(--color-accent); border-radius: 2rem; background: var(--color-surface); color: var(--color-accent); font-weight: 700; text-decoration: none; }
.nozes-cta:hover, .nozes-cta:focus { background: #f6eeee; color: var(--color-accent-dark); }
@media (prefers-reduced-motion: reduce) {
  .nozes-title { opacity: 1; animation: none; transform: none; }
  .nozes-video { display: flex; flex-direction: column; gap: 1rem; background: transparent; }
  .nozes-video iframe { position: static; aspect-ratio: 16 / 9; }
  .nozes-video-overlay { display: none; }
  .nozes-card { position: static; order: -1; opacity: 1; pointer-events: auto; padding: 0; background: none; color: var(--color-text); font-size: 1.25rem; text-align: left; animation: none; }
  .nozes-confetti { display: none; }
  .howto-stage.is-active { animation: none; }
  .howto-follow-page.is-current { animation: none; }
  .howto-caret { animation: none; }
  .howto-x-track { transition: none; }
  .howto-view { min-height: 0; }
}
@media (max-width: 52rem) {
  .howto-x-track.witnesses-1 .howto-x-window, .howto-x-window { flex-basis: 100%; }
  .howto-x-window { padding-left: 0; padding-right: 0; }
  .howto-x-nav { flex-wrap: wrap; justify-content: center; }
}
footer { max-width: 76rem; margin: auto; padding: 1.5rem clamp(1rem, 4vw, 3rem); border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: .85rem; }
@media (max-width: 44rem) {
  /* Chrome layer above the in-page sticky stack (2-9). The header owns this
     stacking context so the open mobile page menu can never be overpainted by
     the sticky results toolbar or the sticky Scripture location rows. */
  .site-header { position: relative; z-index: 11; }
  .testaments { grid-template-columns: 1fr; }
  .book-grid { grid-template-columns: 1fr 1fr; }
  .chapter-header { align-items: start; flex-direction: column; }
  .chapter-return { position: fixed; right: 1rem; bottom: 1rem; top: auto; margin: 0; }
  .chapter-nav { grid-template-columns: 1fr; }
  .chapter-nav a:last-child { grid-column: 1; }
  .reader-form { grid-template-columns: 1fr; }
  .reader-form > * { grid-column: 1 !important; }
  .edition-selectors { grid-template-columns: 1fr; }
  .results-toolbar { grid-template-columns: minmax(0,1fr) auto; width: 100%; }
  .criteria-summary { grid-column: 1 / -1; overflow-wrap: anywhere; }
  #results-progress { min-width: 0; white-space: normal; }
  .results-toolbar button { max-width: 100%; white-space: normal; }
  /* Narrow screens wrap the sticky Search Context and controls rows taller. */
  :root { --sticky-location-top: 7rem; --sticky-location-top-context: 11.25rem; }
  .results-heading { align-items: start; flex-direction: column; }
  .reference-row { grid-template-columns: 1fr 1fr; }
  .reference-row .book-field { grid-column: 1 / -1; }
}
@media (max-width: 24rem) { .book-grid { grid-template-columns: 1fr; } .translation span { display: none; } .reference-row { grid-template-columns: 1fr; } .reference-row .book-field { grid-column: 1; } .range-pair { display: block; } .range-pair > .field { display: block; margin-bottom: .8rem; } .range-pair > .field > label { margin-bottom: .4rem; } }
@media (max-width: 44rem) {
  .howto-demo { padding: 1rem; }
  .howto-view { height: clamp(34rem, 72vh, 48rem); }
  .howto-search { margin-top: 1.4rem; }
  .howto-controls { align-items: stretch; flex-direction: column-reverse; }
  .howto-controls .read-action, .howto-controls .howto-link-button { width: 100%; }
}
.passage-zero-guidance { display: grid; gap: .8rem; margin-top: 2.5rem; padding: 1rem 1.15rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.passage-zero-guidance p { margin: 0; color: var(--color-muted); }
.passage-zero-guidance .read-action { display: inline-block; width: max-content; text-align: center; border-radius: 2rem; background: var(--color-accent); color: #fff; font-weight: 700; text-decoration: none; }

.compare-toolbar, .compare-enter { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1rem 0; }
.compare-enter { justify-content: center; }
.passage-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; justify-content: space-between; margin: 1.25rem 0 .5rem; }
.passage-selectors { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; }
.passage-selector { display: grid; gap: .35rem; }
.passage-selector label { font-size: .8rem; color: var(--color-muted); }
.passage-selector select { width: auto; min-width: 15rem; }
.passage-control-actions { display: flex; gap: .5rem; }
.compare-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.compare-column { margin: 0; min-width: 0; }
.compare-column-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; border-bottom: 1px solid var(--color-border); margin-bottom: 1rem; padding-bottom: .5rem; }
.compare-column-head .eyebrow { margin: 0; }
.badge { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); white-space: nowrap; }
@media (max-width: 52rem) {
  .compare-columns { grid-template-columns: 1fr; }
  .compare-columns .compare-column + .compare-column { border-top: 1px solid var(--color-border); padding-top: 1rem; }
}
@media (max-width: 52rem) {
  .compare-result-columns { grid-template-columns: 1fr; }
  .compare-result-columns .compare-result-column + .compare-result-column { border-top: 1px solid var(--color-border); padding-top: 1rem; }
  .comparison-control-row,
  .comparison-sticky-row,
  .comparison-context-row,
  .comparison-verse-row { grid-template-columns: 1fr; }
}
.read-action, .results-toolbar button { border: 1px solid var(--color-accent); background: var(--color-accent); color: #fff; }
.read-action:hover:not(:disabled), .results-toolbar button:hover:not(:disabled) { border-color: var(--color-accent); background: #fff; color: var(--color-accent); }

/* Voluntary mission support: discreet footer CTA plus the Bible-version and
   financial-support sections that close the consolidated Feedback page. */
footer .footer-mission { margin: .7rem 0 0; }
.footer-mission-action { display: inline-block; margin-left: .35rem; padding: .35rem .9rem; border: 1px solid var(--color-accent); border-radius: 2rem; color: var(--color-accent); font-weight: 700; text-decoration: none; }
.footer-mission-action:hover, .footer-mission-action:focus-visible { background: var(--color-accent); color: #fff; }
.feedback-page .support-versions, .feedback-page .support-contribute { max-width: 40rem; }
.feedback-page .support-versions { margin: 3rem 0 0; }
.feedback-page .support-versions p, .feedback-page .support-contribute p { margin: 0 0 .9rem; font-size: 1.02rem; line-height: 1.55; }
.feedback-page .support-contribute .support-lede { font-size: 1.06rem; }
.feedback-page .support-hint, .feedback-page .support-none { color: var(--color-muted); font-size: .92rem; line-height: 1.55; }
.support-contribute { margin: 3rem 0 3.5rem; }
.support-form { margin-top: .2rem; }
.support-frequencies { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: 1fr 1fr 1.5fr 1fr; gap: .6rem 1rem; }
.support-frequency { display: flex; align-items: flex-start; gap: .5rem; }
.support-frequency input { min-height: 0; flex: none; margin: .3rem 0 0; }
.support-frequency label { min-width: 0; font-size: 1.02rem; cursor: pointer; }
@media (max-width: 46rem) { .support-frequencies { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 28rem) { .support-frequencies { grid-template-columns: 1fr; } }
.support-action { display: inline-block; width: max-content; margin-top: 1.2rem; padding: .55rem 1.2rem; text-align: center; border-radius: 2rem; font-weight: 700; }
.support-preview-action { cursor: not-allowed; opacity: .55; }
.support-note { margin-top: .9rem; color: var(--color-muted); font-size: .95rem; }
.support-divider { margin: 2rem 0 1.4rem; border: 0; border-top: 1px solid var(--color-border); }
.feedback-page .support-versions a { color: var(--color-accent); text-decoration: underline; text-underline-offset: .18em; }
.feedback-page .support-versions a:hover, .feedback-page .support-versions a:focus-visible { color: var(--color-accent-dark); }
@media (max-width: 44rem) { .feedback-page .support-action { width: 100%; } }

/* Interface-language selector. It changes only the SABER interface locale; the
   selected Bible edition travels in the query string, not in this control. */
.locale-select { display: inline-block; flex: none; width: auto; min-width: 0; max-width: 4rem; height: auto; min-height: 0; margin: 0 0 0 .1rem; padding: .1rem .7rem .1rem .2rem; border: 0; border-radius: 0; background: transparent; color: var(--color-accent); font: inherit; font-size: .8rem; font-weight: 700; letter-spacing: .02em; line-height: 1.4; vertical-align: middle; cursor: pointer; }
.locale-select:hover, .locale-select:focus-visible { color: var(--color-accent-dark); text-decoration: underline; text-underline-offset: .18em; }
@media (max-width: 44rem) { .locale-select { min-height: 2.5rem; padding: .55rem .8rem; font-size: .9rem; } }

/* Study workspace: the 76rem main study frame belongs to Primary alone until
   comparison is active. The single study column therefore spans the whole frame
   instead of leaving an unused Witness-width gap beside it; when a Witness is
   selected the frame's existing .compare-columns grid divides it into Primary
   and Witness as equal peers. This is the frame's own Primary/Witness layout,
   not a second grid, and it never changes the frame geometry or the external
   contextual rail. Font size and line height are untouched. The measures below
   only ever bound content on viewports wide enough to leave frame space unused,
   which is exactly the Witness-width gap being removed; on narrow screens the
   container is already narrower than these measures, so mobile reading is
   unchanged. The Question poll keeps its own compact editorial measure, and a
   Witness column keeps the frame's equal-peer split. */
.reader-shell .scripture,
.reader-shell .canon-passage,
.reader-shell .chapter-nav,
.reader-shell .search-results,
.reader-shell .reader-form,
.reader-shell .state,
.reader-shell .question-framing,
.reader-shell .question-exposition,
.reader-shell .question-view p,
.reader-shell .question-language-note p,
.reader-shell .question-contribute,
.reader-shell .question-contribute-body,
.reader-shell .feedback-context { max-width: none; }

/* Question editorial sections and the generic contextual References surface.
   The Question page reuses the established reading grammar: the study surface
   stays primary, and References occupies the contextual column. On a Question
   that ships further-study curation, Go Deeper is the sticky top region of that
   column and References starts beneath it. */
.inline-reference { color: var(--color-accent); font-weight: 650; text-decoration: underline; text-underline-offset: .18em; }
.inline-reference:hover, .inline-reference:focus-visible { color: var(--color-accent-dark); }
/* Bibliography with an optional commercial route: the source stays bibliographic
   first; the restrained action and the disclosure are subordinate to it. */
.question-source-action { margin-left: .4rem; color: var(--color-accent); font-size: .82em; font-weight: 650; text-decoration: underline; text-underline-offset: .18em; white-space: nowrap; }
.question-source-action:hover, .question-source-action:focus-visible { color: var(--color-accent-dark); }
.question-sources-disclosure { margin: .5rem 0 0; color: var(--color-muted); font-size: .82rem; }
/* A partial Scripture quote: the author's selected words as an inline quotation
   plus their canonical attribution. Inline by design — never a block. */
.article-quote q { font-style: italic; }
.article-quote-ref { margin-left: .3rem; color: var(--color-muted); font-size: .85em; white-space: nowrap; }
.question-sources, .question-views, .question-language-note { margin: 2.5rem 0 0; }
.question-sources h2 { max-width: none; margin: 0 0 1rem; color: var(--color-accent); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.25rem, 2.3vw, 1.6rem); font-weight: 400; }
.question-sources-list { margin: 0; padding: 0; list-style: none; }
.question-sources-list li { margin: 0 0 .65rem; font-family: Georgia, "Times New Roman", serif; font-size: 1.02rem; line-height: 1.55; }
.question-source-author { font-weight: 700; }
.question-discovery { margin: 0 0 1.5rem; padding: 1rem 1.1rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.question-discovery h2 { max-width: none; margin: 0 0 .7rem; color: var(--color-accent); font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; font-weight: 400; }
.question-discovery h2 a { color: inherit; text-decoration: none; }
.question-discovery-list, .questions-index-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.question-discovery-list a, .questions-index-list a { display: grid; gap: .12rem; color: var(--color-text); text-decoration: none; }
.question-discovery-list strong, .questions-index-list strong { font-family: Georgia, "Times New Roman", serif; font-size: 1rem; line-height: 1.3; }
.question-discovery-list span, .questions-index-list span { color: var(--color-muted); font-size: .92rem; line-height: 1.45; }
.questions-index { max-width: 48rem; margin: 2rem 0; }
.questions-index h1 { max-width: none; margin: 0 0 1.4rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 5vw, 3rem); font-weight: 500; }
.questions-index-list li { padding-bottom: .85rem; border-bottom: 1px solid var(--color-border); }
/* Discreet transition between Perspectives and the full Scripture
   evidence that follows: a short editorial note, not a card, alert, CTA
   or heading. */
.question-views-transition { max-width: 44rem; margin: 1.35rem 0 0; color: var(--color-muted); font-size: .97rem; line-height: 1.6; }
.question-poll { max-width: 44rem; margin: 1.75rem 0 0; padding: 1.25rem 1.35rem; background: #f2f2f0; border-radius: var(--radius); }
.question-views h2, .question-language-note h2 { max-width: none; margin: 0 0 1rem; color: var(--color-accent); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.25rem, 2.3vw, 1.6rem); font-weight: 400; }
.question-poll h2 { max-width: none; margin: 0 0 .7rem; color: var(--color-accent); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.1rem, 1.9vw, 1.3rem); font-weight: 400; }
.question-view { margin: 0 0 1.75rem; }
.question-views-list { margin: 0; padding: 0; list-style: none; }
.question-view:last-child { margin-bottom: 0; }
.question-view-number { margin-right: .1rem; color: var(--color-accent); font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.question-view h3, .question-language-note h3, .poll-results h3 { max-width: none; margin: 0 0 .55rem; font-family: Georgia, "Times New Roman", serif; font-size: 1.12rem; font-weight: 650; line-height: 1.35; }
.question-view p, .question-language-note p { max-width: 44rem; margin: 0 0 .85rem; font-size: 1.02rem; line-height: 1.72; }
.question-language-note { padding: 1.1rem 1.25rem; border-left: .2rem solid var(--color-accent); background: #f7f4ef; }
.question-language-note h3 { color: var(--color-text); }
.question-contribute { max-width: 44rem; margin: 1.6rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--color-border); }
.question-contribute-body { max-width: 42rem; margin: 0 0 .9rem; font-size: 1rem; line-height: 1.6; }
.question-contribute-action { display: inline-block; padding: .5rem 1.1rem; border: 1px solid var(--color-accent); border-radius: 2rem; color: var(--color-accent); font-weight: 700; text-decoration: none; }
.question-contribute-action:hover, .question-contribute-action:focus-visible { background: var(--color-accent); color: #fff; }
/* Go Deeper: optional curated further-study block. It is editorial data, not a
   storefront: a compact two-column cover grid where each cover and its title
   link to the same Amazon destination, plus a discreet affiliate disclosure. On
   narrow screens it stays in the Question study flow; at wide-desktop widths it
   becomes the sticky top region of the external contextual column, above
   References. */
.go-deeper { max-width: 44rem; margin: 2.5rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--color-border); }
.go-deeper h2 { max-width: none; margin: 0 0 1rem; color: var(--color-accent); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.25rem, 2.3vw, 1.6rem); font-weight: 400; }
.go-deeper-books { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.15rem; }
.go-deeper-book { min-width: 0; }
.go-deeper-link { display: grid; gap: .45rem; align-content: start; color: inherit; text-decoration: none; }
.go-deeper-cover { display: block; height: 10.5rem; width: auto; max-width: 100%; border: 1px solid var(--color-border); border-radius: 2px; background: #fff; }
.go-deeper-title { font-family: Georgia, "Times New Roman", serif; font-size: .9rem; font-weight: 650; line-height: 1.3; color: var(--color-text); }
.go-deeper-link:hover .go-deeper-title, .go-deeper-link:focus-visible .go-deeper-title { text-decoration: underline; }
.go-deeper-disclosure { margin: 1.1rem 0 0; max-width: 42rem; color: var(--color-muted); font-size: .78rem; line-height: 1.45; }
.poll-form { max-width: 44rem; }
.poll-form fieldset { margin: 0 0 .8rem; padding: 0; border: 0; }
.poll-option { display: flex; align-items: flex-start; gap: .5rem; margin: 0 0 .35rem; font-weight: 500; }
.poll-option:last-of-type { margin-bottom: 0; }
.poll-option input { flex: 0 0 auto; min-height: 0; margin-top: .2rem; }
.poll-error { color: var(--color-accent-dark); font-weight: 650; }
.poll-results ul { margin: 0 0 .5rem; padding: 0; list-style: none; }
.poll-results li { display: flex; justify-content: space-between; gap: 1rem; max-width: 22rem; padding: .35rem 0; border-bottom: 1px solid var(--color-border); }
.poll-result-value { color: var(--color-accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.poll-total { color: var(--color-muted); font-size: .9rem; }
.feedback-context { max-width: 44rem; margin: 0 0 1rem; padding: .6rem .8rem; border-left: .2rem solid var(--color-accent); background: #f7f4ef; color: var(--color-muted); }

.contextual-surface { position: fixed; top: 0; right: 0; bottom: 0; z-index: 21; width: min(92vw, 26rem); padding: 1rem 1.1rem 2rem; border-left: 1px solid var(--color-border); background: var(--color-surface); box-shadow: -.4rem 0 1.2rem rgba(32,32,30,.18); transform: translateX(100%); transition: transform .22s ease; overflow-y: auto; }
.contextual-surface.is-open { transform: translateX(0); }
.contextual-surface-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .75rem; }
.contextual-surface-head h2 { max-width: none; margin: 0; color: var(--color-accent); font-family: Georgia, "Times New Roman", serif; font-size: 1.3rem; font-weight: 400; }
.contextual-surface-close { min-height: 2.5rem; min-width: 2.5rem; padding: 0 .5rem; border-color: var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: 1.3rem; line-height: 1; }
.contextual-surface-close:hover, .contextual-surface-close:active { background: #f6eeee; color: var(--color-accent); }
.contextual-surface-guidance, .contextual-surface-status { color: var(--color-muted); font-size: .95rem; }
.contextual-passage h3 { max-width: none; margin: 0 0 .65rem; font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; }
.contextual-scripture { max-width: none; font-size: 1rem; line-height: 1.7; }
.contextual-scrim { position: fixed; inset: 0; z-index: 20; background: rgba(32,32,30,.35); }
@media (min-width: 104rem) {
  /* Wide desktop composition: ONE source of truth. --study-frame is the
     centered main study frame and --study-half its half width, so the frame's
     right boundary is always 50% + var(--study-half). The external contextual
     rail, the header/menu extension and the brand all derive from those two
     values instead of approximating the boundary independently. The rail starts
     at that boundary and runs to the viewport edge, so its width is
     50% - var(--study-half) - exactly the left outer gutter - and the whole
     composition is balanced (left outer area == right outer area) at every
     wide-desktop width. The frame is slightly narrower here (72rem instead of
     the 76rem base frame) so both outer regions, and with them the desktop
     menu, have room. The rail stays a fixed, full-height, independently
     scrollable column, so page scrolling is untouched. Below this width the
     viewport has no external space to give and the narrow-screen Witness
     slide-in applies instead. The rail is the single
     scroll container for the contextual column, so the documented future
     hierarchy (a sticky Go Deeper region at the top of the rail with the
     References content scrolling beneath it) works inside this structure
     without another page-layout change; Go Deeper is not implemented yet and
     no space is reserved for it. */
  :root { --study-frame: 72rem; --study-half: 36rem; --study-inner: 3rem; }
  /* The centered content frames use the composition width, so the frame's
     right edge is the shared boundary the rail and the menu region derive
     from. The sticky header band itself keeps spanning the viewport. */
  .reader-shell, .howto-page, footer { max-width: var(--study-frame); }
  .has-contextual .contextual-surface { left: calc(50% + var(--study-half)); right: 0; width: auto; max-width: none; transform: none; transition: none; box-shadow: none; padding: 1.5rem 1.5rem 2rem; }
  .contextual-surface-close, .contextual-scrim { display: none !important; }
  /* Wide desktop: ONE sticky header band spans the full viewport. The brand
     keeps the frame's content alignment; the always-visible language selector
     and the horizontal site navigation occupy the header's right-side
     continuation, the same 50% - var(--study-half) region the rail occupies
     below it, so the nav sits directly above References and never determines
     the rail's width. The region's left edge is the frame's right edge; its
     min-width floor is the nav's own content width, so a translated menu can
     never be clipped by the viewport - the region simply starts a little
     earlier when the boundary is narrower than the labels. The band's
     background and bottom rule run edge to edge, so the header, the study frame
     and the external rail read as one structure. Below this width the same
     markup is the mobile/tablet hamburger dropdown and the header is not
     sticky. */
  .site-header { position: sticky; top: 0; z-index: 12; max-width: none; margin: 0; padding: .85rem 0; background: var(--color-bg); }
  .brand { margin-left: calc(50% - var(--study-half) + var(--study-inner)); }
  /* Right-aligned in the band, so the box left edge lands on the same boundary
     the rail uses for its left edge: 100% - (50% - var(--study-half)) =
     50% + var(--study-half). No independent approximation of the rail. */
  .site-menu-bar { margin: 0; width: calc(50% - var(--study-half)); min-width: max-content; padding: 0 1.5rem; justify-content: flex-start; }
  .page-menu-toggle { display: none; }
  .site-nav { position: static; display: flex; flex-direction: row; align-items: center; gap: .3rem; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
  .site-nav span[aria-hidden="true"] { display: inline; }
  .site-nav a { display: inline; padding: 0; background: none; }
  .site-nav a:hover { background: none; text-decoration: underline; }
  /* The sticky band owns the top of the viewport at this width, so the in-page
     sticky stack (Search Context, Scripture location rows, compare column
     heads) is rebased below it, exactly as the narrow-screen block rebases the
     same variables for its taller chrome. */
  :root { --sticky-location-top: calc(var(--site-header-band, 6.5rem) + 4.25rem); --sticky-location-top-context: calc(var(--site-header-band, 6.5rem) + 8.75rem); }
  .results-toolbar { top: var(--site-header-band, 6.5rem); }
  .search-context-toolbar { top: calc(var(--site-header-band, 6.5rem) + .75rem); }
  /* The edition/Compare controls are the SECOND layer of the in-page stack:
     below the sticky header band, and below the Search Context toolbar when a
     search context is present. Without this rebase both layers stuck at the same
     offset and the toolbar painted over the selectors. */
  .reader-shell .passage-witness-header,
  .comparison-control-row { top: calc(var(--site-header-band, 6.5rem) + .75rem); }
  /* has-search-context and reader-shell are the SAME <main> element, so this
     must be a compound selector: a descendant selector would never match and the
     controls would collide with the Search Context toolbar. */
  .reader-shell.has-search-context .passage-witness-header,
  .has-search-context .comparison-control-row { top: calc(var(--site-header-band, 6.5rem) + 5rem); }
  .passage-column-edition { top: var(--site-header-band, 6.5rem); }
  .has-search-context .compare-result-column .passage-witness-actions { top: calc(var(--site-header-band, 6.5rem) + 5rem); }
  .chapter-return { top: calc(var(--site-header-band, 6.5rem) + 1rem); }
  /* References starts immediately below the sticky band, so main-page scrolling
     never leaves a gap above the rail. The band height is measured in JS
     (--site-header-band) with a static fallback. */
  .has-contextual .contextual-surface { top: var(--site-header-band, 6.5rem); }
  /* Go Deeper owns the top of the external contextual column: it is sticky
     (fixed inside the same region the rail occupies), never overlaps the
     sticky header band, and scrolls internally if the curation is long.
     References keeps its own behaviour and starts immediately beneath it; the
     measured height is published by the reader script as --go-deeper-band. */
  .go-deeper { position: fixed; left: calc(50% + var(--study-half)); right: 0; top: var(--site-header-band, 6.5rem); z-index: 11; max-width: none; margin: 0; padding: 1.2rem 1.5rem 1rem; border-top: 0; border-left: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-surface); max-height: 60vh; overflow-y: auto; }
  .go-deeper h2 { margin-bottom: .85rem; font-size: 1.3rem; }
  .go-deeper-books { gap: .95rem 1rem; }
  .go-deeper-title { font-size: .86rem; }
  .has-contextual .go-deeper { left: calc(50% + var(--study-half)); }
  .has-contextual .contextual-surface { top: calc(var(--site-header-band, 6.5rem) + var(--go-deeper-band, 0px)); }
  .question-discovery { position: fixed; left: 0; right: calc(50% + var(--study-half)); top: var(--site-header-band, 6.5rem); bottom: 0; z-index: 10; overflow-y: auto; margin: 0; padding: 1.5rem 1.5rem 2rem; border: 0; border-right: 1px solid var(--color-border); border-radius: 0; background: var(--color-bg); }
}
@media (prefers-reduced-motion: reduce) { .contextual-surface { transition: none; } }

/* Manual Advertisement host of the current public layout.
   At the wide-desktop composition it occupies the same RIGHT-SIDE region the
   contextual rail defines (the frame's right edge is 50% + --study-half), using
   that established grammar so the host sits outside the central study column
   instead of stacking beneath it. It is independent of References: it renders
   with or without the contextual surface. The contextual surface keeps priority,
   so when it is active its own bottom padding reserves the band the Advertisement
   occupies and the two never overlap. Below the wide-desktop composition the host
   is hidden: no mobile placement, no overlay, no horizontal overflow. */
.advertisement { display: none; }
@media (min-width: 104rem) {
  .advertisement {
    display: block;
    position: fixed;
    top: auto;
    right: 0;
    bottom: 1rem;
    left: calc(50% + var(--study-half));
    z-index: 20;
    padding: 0 1.5rem;
  }
  .advertisement .advertisement-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8rem;
    margin: 0;
    padding: .75rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) * 1.5);
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: .72rem;
    letter-spacing: .08em;
  }
  /* Reserve the Advertisement band while the contextual rail is active. */
  .has-contextual .contextual-surface { padding-bottom: 12rem; }
}

/* One temporary Kickstarter campaign referral on the PUBLIC 1.0 HOMEPAGE.
   ONE card, ONE DOM instance, rendered only when the homepage route sets
   .HomeLanding (so no other public page, Scriptorium surface or SABER Public 2.0
   render can carry it); only its placement is responsive.

   Mobile-first default: the card is ordinary document flow, after the reading
   column and before the footer, centred in the content column with a comfortable
   gap above it, so narrow desktop, tablet and mobile visitors reach it while
   scrolling. Never hidden, never fixed, never sticky at these widths.

   Wide desktop (the composition that gives the page its outer regions): the same
   card leaves the flow and becomes the bottom-anchored occupant of the LEFT
   outer region, mirroring the Advertisement host's grammar on the right. */
.home-referral { display: block; margin: 1.5rem 0 0; }
/* The preview card: one compact clickable unit, restrained and clearly
   subordinate to the reading column. The 800x450 asset is served locally and its
   intrinsic size is declared on the <img>, so the card never shifts. */
.referral-card { display: block; max-width: 22rem; margin: 0 auto; border: 1px solid var(--color-border); border-radius: calc(var(--radius) * 1.5); background: var(--color-surface); color: var(--color-text); text-decoration: none; overflow: hidden; }
.referral-card:hover { border-color: var(--color-accent); }
.referral-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.referral-card-media { display: block; width: 100%; height: auto; background: var(--color-bg); }
.referral-card-body { display: block; padding: .6rem .75rem .75rem; }
.referral-card-meta { display: block; margin-bottom: .25rem; color: var(--color-muted); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.referral-card-title { display: block; font-family: Georgia, "Times New Roman", serif; font-size: .95rem; font-weight: 400; line-height: 1.3; }
.referral-card-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: .3rem; color: var(--color-muted); font-size: .8rem; line-height: 1.4; }

@media (min-width: 104rem) {
  /* Wide desktop only: the card leaves the document flow for the left outer
     region and releases the in-flow gap it needed below the reading column. */
  .home-referral { position: fixed; top: auto; bottom: 1rem; left: 0; right: calc(50% + var(--study-half)); z-index: 20; margin: 0; padding: 0 1.5rem; }
}