/* Self-hosted webfont declarations.
   Place legally obtained WOFF2 files in /assets/fonts/ using the filenames below.
   These rules intentionally precede the typography variables so the same family
   names are used throughout the reader with no downstream CSS changes. */
@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/EBGaramond-Variable.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/assets/fonts/EBGaramond-Italic-Variable.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/CormorantGaramond-Variable.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/CormorantGaramond-Italic-Variable.woff2") format("woff2");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --paper: #fbfaf6;
  --ink: #16130f;
  --muted: #6b6257;
  --rule: #d8cdbd;
  --accent: #5e3f1f;
  --accent-2: #8b6f47;
  --panel: #fffdf8;
  --shadow: 0 18px 60px rgba(54, 38, 20, .12);
  --measure: 76ch;
  --head: "Cormorant Garamond", "EB Garamond", Garamond, serif;
  --body: "EB Garamond", Garamond, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --safe-x: max(1rem, env(safe-area-inset-left));
  --safe-y: max(1rem, env(safe-area-inset-bottom));
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
  background: radial-gradient(circle at 50% -10%, #fff 0, #fbfaf6 40%, #f3ede2 100%);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(18px, 1.2vw, 21px);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(90, 55, 24, .035) 1px, transparent 1px),
    linear-gradient(rgba(90, 55, 24, .025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

a {
  color: var(--accent);
  text-decoration-thickness: .06em;
  text-underline-offset: .16em;
}

a:hover { text-decoration-thickness: .12em; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid rgba(94, 63, 31, .38);
  outline-offset: 3px;
}

img, svg { max-width: 100%; height: auto; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 1rem;
  z-index: 20;
  background: var(--ink);
  color: white;
  padding: .5rem 1rem;
  border-radius: .45rem;
  font-family: var(--sans);
}
.skip-link:focus { left: 1rem; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(.7rem, 2vw, 1rem);
  padding: .85rem clamp(1rem, 4vw, 3rem);
  background: rgba(251, 250, 246, .9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}

@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: rgba(251, 250, 246, .98); }
}

.brand { min-width: 0; }
.brand a {
  display: grid;
  max-width: min(72vw, 38rem);
  color: var(--ink);
  line-height: 1.05;
  text-decoration: none;
}

.eyebrow {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.sacred-name {
  font-family: var(--head);
  font-size: clamp(1.05rem, 3.2vw, 1.55rem);
  letter-spacing: .08em;
  text-transform: none;
  color: var(--accent);
}

.site-title {
  font-family: var(--head);
  font-size: clamp(1.55rem, 3.2vw, 2.35rem);
  font-weight: 600;
  letter-spacing: .015em;
  overflow-wrap: anywhere;
}

.site-subtitle {
  margin-top: .18rem;
  color: var(--muted);
  font-family: var(--sans);
  font-size: .74rem;
  overflow-wrap: anywhere;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .45rem;
}

.site-nav a,
.menu-toggle {
  min-height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .45rem .75rem;
  background: rgba(255, 253, 248, .72);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .86rem;
  line-height: 1;
  text-decoration: none;
}

.menu-toggle { display: none; cursor: pointer; }

.hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 7rem) clamp(1rem, 4vw, 3rem) 2rem;
  text-align: center;
}

.hero h1 {
  margin: .2rem 0;
  font-family: var(--head);
  font-size: clamp(3rem, 8vw, 7.5rem);
  font-weight: 600;
  line-height: .88;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.hero p {
  max-width: 60ch;
  margin: 1rem auto;
  color: var(--muted);
  font-size: clamp(1.03rem, 1.4vw, 1.13rem);
}

.search-card {
  max-width: 900px;
  margin: 1.2rem auto 0;
  padding: 1rem;
  border: 1px solid var(--rule);
  border-radius: 1.2rem;
  background: rgba(255, 253, 248, .84);
  box-shadow: var(--shadow);
}

.search-row { display: flex; gap: .6rem; }

.search-input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .85rem 1rem;
  background: #fff;
  color: var(--ink);
  font: 1rem var(--sans);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  border: 0;
  border-radius: 999px;
  padding: .85rem 1.15rem;
  background: var(--accent);
  color: #fff;
  font: 600 .95rem var(--sans);
  text-decoration: none;
  cursor: pointer;
}

.layout {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.6rem);
  padding: clamp(1rem, 4vw, 3rem);
}

.toc {
  position: sticky;
  top: 6rem;
  align-self: start;
  max-height: calc(100vh - 7rem);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1rem;
  border: 1px solid var(--rule);
  border-radius: 1rem;
  background: rgba(255, 253, 248, .72);
}

.toc h2 {
  margin: 0 0 .75rem;
  color: var(--muted);
  font-family: var(--sans);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.toc a {
  display: block;
  border-radius: .35rem;
  padding: .28rem .35rem;
  color: var(--ink);
  font-family: var(--sans);
  font-size: .88rem;
  line-height: 1.25;
  text-decoration: none;
}
.toc a:hover, .toc a[aria-current="page"] { background: #efe4d1; }

.reader {
  width: 100%;
  max-width: var(--measure);
  min-width: 0;
  margin: 0 auto;
}

.book-title {
  margin: 1rem 0 .1rem;
  font-family: var(--head);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
}

.book-meta {
  margin-bottom: 2rem;
  color: var(--muted);
  font-family: var(--sans);
  font-size: .88rem;
}

.chapter {
  content-visibility: auto;
  contain-intrinsic-size: 900px;
  margin: 0 0 3rem;
  padding-top: 1rem;
}

.chapter-title {
  margin: 2.4rem 0 1.2rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.2rem;
  font-family: var(--head);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 500;
}

.verse-block {
  position: relative;
  margin: 0 0 1.22rem;
  padding-left: clamp(3.9rem, 8vw, 5.8rem);
  break-inside: avoid;
}

.verse-ref {
  position: absolute;
  left: 0;
  top: .08rem;
  width: clamp(3.4rem, 7vw, 5.15rem);
  color: var(--muted);
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: .015em;
  line-height: 1.25;
  white-space: nowrap;
}

.scl-clause {
  display: block;
  max-width: 64ch;
  margin: .02rem 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
.scl-clause.core { padding-left: 0; }
.scl-clause.asymmetric { padding-left: 1.35rem; color: #312b24; }

.bracket { color: #5c4c3b; font-style: italic; }
.ref-anchor { position: absolute; margin-top: -7rem; }

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: .75rem;
  max-width: 1100px;
  margin: 2rem auto;
}

.book-card {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--rule);
  border-radius: 1rem;
  background: rgba(255, 253, 248, .82);
  box-shadow: 0 8px 28px rgba(60, 42, 21, .06);
  color: var(--ink);
  text-decoration: none;
}
.book-card strong {
  display: block;
  font-family: var(--head);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.05;
}
.book-card span { color: var(--muted); font-family: var(--sans); font-size: .78rem; }

.section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem clamp(1rem, 4vw, 3rem);
}

.section h2, .search-page h1 {
  font-family: var(--head);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 500;
  line-height: 1.02;
}

.search-page {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 3rem);
}

.results { margin-top: 1.5rem; }
.result { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.result a { font-family: var(--head); font-size: 1.35rem; text-decoration: none; }
.result small { display: block; margin-bottom: .25rem; color: var(--muted); font-family: var(--sans); }
.mark { background: #fff1b8; padding: 0 .08em; }

.to-top {
  position: fixed;
  right: var(--safe-x);
  bottom: var(--safe-y);
  z-index: 9;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(255, 253, 248, .92);
  box-shadow: var(--shadow);
  font-size: 1.25rem;
  opacity: 0;
  transform: translateY(.5rem);
  pointer-events: none;
  transition: .2s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }

.site-footer {
  padding: 2rem clamp(1rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-family: var(--sans);
  font-size: .78rem;
  text-align: center;
}
.site-footer p { max-width: 72ch; margin: .12rem auto; }
.site-footer strong { color: var(--ink); font-weight: 650; }

code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }

@media (max-width: 1100px) {
  .layout { grid-template-columns: minmax(168px, 220px) minmax(0, 1fr); }
  .toc a { font-size: .82rem; }
}

@media (max-width: 900px) {
  .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .brand a { max-width: none; }
  .menu-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: calc(100% + .35rem);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    max-height: min(70vh, 32rem);
    overflow: auto;
    padding: .75rem;
    border: 1px solid var(--rule);
    border-radius: 1rem;
    background: var(--panel);
    box-shadow: var(--shadow);
  }
  .site-nav.open { display: flex; }
  .site-nav a { width: 100%; }
  .layout { display: block; }
  .toc {
    position: relative;
    top: auto;
    max-height: min(42vh, 24rem);
    margin-bottom: 1rem;
  }
  .hero { text-align: left; }
  .hero p { margin-left: 0; }
  .hero h1 { font-size: clamp(3rem, 15vw, 5.4rem); }
}

@media (max-width: 640px) {
  body { font-size: clamp(17px, 4.55vw, 19px); line-height: 1.58; }
  body::before { background-size: 42px 42px; }
  .site-header { padding: .7rem 1rem; }
  .site-title { font-size: clamp(1.35rem, 7vw, 2rem); }
  .site-subtitle { font-size: .68rem; }
  .hero { padding: 2.25rem 1rem 1.25rem; }
  .hero h1 { line-height: .92; }
  .search-card { border-radius: 1rem; padding: .8rem; }
  .search-row { flex-direction: column; }
  .button, .search-input { width: 100%; }
  .section, .search-page, .layout { padding-left: 1rem; padding-right: 1rem; }
  .book-grid { grid-template-columns: 1fr; gap: .6rem; }
  .book-title { font-size: clamp(2.55rem, 15vw, 4.25rem); }
  .chapter { margin-bottom: 2.25rem; contain-intrinsic-size: 700px; }
  .chapter-title { font-size: clamp(1.85rem, 10vw, 2.65rem); }
  .verse-block { padding-left: 0; margin-bottom: 1.05rem; }
  .verse-ref {
    position: relative;
    display: block;
    width: auto;
    margin-bottom: .12rem;
    font-size: .64rem;
  }
  .scl-clause { max-width: none; }
  .scl-clause.asymmetric { padding-left: .95rem; }
  .site-footer { text-align: left; }
  .site-footer p { margin-left: 0; }
}

@media (max-width: 380px) {
  .eyebrow { letter-spacing: .12em; }
  .site-subtitle { display: none; }
  .hero h1 { font-size: clamp(2.65rem, 18vw, 3.4rem); }
  .book-card { padding: .85rem; }
  .toc { padding: .85rem; }
  .to-top { width: 2.75rem; height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

@media print {
  .site-header, .toc, .to-top, .site-footer, .search-card { display: none; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
  .layout { display: block; padding: 0; }
  .reader { max-width: none; }
  .chapter { content-visibility: visible; }
  .verse-ref { color: #000; }
}



/* Direct Book + Chapter picker */
.reader-jump {
  position: sticky;
  top: var(--header-height, 4.75rem);
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(10rem, 1.2fr) minmax(8rem, .8fr) auto;
  gap: .55rem;
  align-items: end;
  max-width: 980px;
  margin: .8rem auto 0;
  padding: .65rem .75rem;
  border: 1px solid rgba(216, 205, 189, .92);
  border-radius: 1rem;
  background: rgba(255, 253, 248, .94);
  box-shadow: 0 10px 32px rgba(54, 38, 20, .08);
  backdrop-filter: blur(12px);
}

.reader-jump label {
  display: grid;
  gap: .18rem;
  min-width: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}

.reader-jump select {
  width: 100%;
  min-height: 2.55rem;
  min-width: 0;
  border: 1px solid var(--rule);
  border-radius: .7rem;
  padding: .4rem .65rem;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .95rem;
}

.reader-jump .button {
  min-height: 2.55rem;
  padding-inline: 1rem;
}

@media (min-width: 901px) {
  .reader-jump {
    display: none;
  }
}

@media (max-width: 900px) {
  .reader-jump {
    margin: .65rem 1rem 0;
  }
  .toc {
    display: none;
  }
}

@media (max-width: 520px) {
  .reader-jump {
    grid-template-columns: minmax(0, 1fr) minmax(6.8rem, .62fr);
    gap: .45rem;
    padding: .55rem;
    border-radius: .85rem;
  }
  .reader-jump .button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media print {
  .reader-jump {
    display: none;
  }
}


/* Reader Preface title spacing guard */
@media (max-width: 640px) {
  .edition-hero h1 {
    line-height: 1.04;
    margin-bottom: .82rem;
  }
  .edition-subtitle {
    line-height: 1.35;
  }
}


/* Per-book accessible chapter jump */
.book-chapter-jump {
  margin: 1.1rem 0 2rem;
  padding: .85rem;
  border: 1px solid rgba(216, 205, 189, .92);
  border-radius: 1rem;
  background: rgba(255, 253, 248, .78);
  box-shadow: 0 8px 28px rgba(60, 42, 21, .055);
}

.book-chapter-jump label {
  display: block;
  margin: 0 0 .32rem;
  color: var(--muted);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
}

.chapter-jump-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .55rem;
  align-items: center;
}

.book-chapter-select {
  width: 100%;
  min-height: 2.65rem;
  border: 1px solid var(--rule);
  border-radius: .75rem;
  padding: .45rem .7rem;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .96rem;
}

.chapter:focus {
  outline: 3px solid rgba(94, 63, 31, .24);
  outline-offset: .35rem;
  border-radius: .35rem;
}

@media (min-width: 901px) {
  .book-chapter-jump {
    position: sticky;
    top: 6rem;
    z-index: 5;
    backdrop-filter: blur(10px);
  }
}

@media (max-width: 520px) {
  .book-chapter-jump {
    margin: .9rem 0 1.6rem;
    padding: .7rem;
  }
  .chapter-jump-row {
    grid-template-columns: 1fr;
  }
  .chapter-jump-row .button {
    width: 100%;
  }
}

/* Mobile chapter index stability
   Mirrors the FFT principle: do not navigate into lazily contained chapter
   geometry on responsive layouts. Desktop keeps lazy chapter rendering. */
.chapter {
  scroll-margin-top: 8rem;
}

@media (max-width: 900px) {
  .chapter {
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
    scroll-margin-top: 10.5rem;
  }
}

@media (max-width: 640px) {
  .chapter {
    scroll-margin-top: 11rem;
  }
}


.search-note { margin: .7rem 0 1rem; color: var(--muted); font-family: var(--sans); font-size: .9rem; }
.search-note code { font-family: var(--sans); }

/* UQA v4.53 — Reader-Experience CSS Refinement Gate
   Scope: presentation-only refinement drawn from the Jonah sample review.
   Scripture text, search index, catalog, book/chapter markup, and the existing
   elegant Chapter-heading implementation are intentionally untouched. */
:root {
  --reader-ref-quiet: rgba(22, 19, 15, .30);
  --reader-ref-quiet-hover: rgba(22, 19, 15, .48);
}

@media (min-width: 901px) {
  body {
    font-size: clamp(20px, 1.28vw, 22px);
    line-height: 1.60;
  }
  .reader {
    max-width: min(var(--measure), 70rem);
  }
  .verse-block {
    padding-left: clamp(4.35rem, 7vw, 5.85rem);
    margin-bottom: 1.30rem;
  }
  .verse-ref {
    top: .20rem;
    width: clamp(3.55rem, 6.5vw, 5.25rem);
    padding-right: .48rem;
    text-align: right;
    color: var(--reader-ref-quiet);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .01em;
  }
  .verse-block:hover .verse-ref {
    color: var(--reader-ref-quiet-hover);
  }
  .toc a {
    color: rgba(22, 19, 15, .54);
  }
  .toc a:hover,
  .toc a[aria-current="page"] {
    color: var(--ink);
  }
}

/* Programmatic chapter jumps should not draw a visible frame around the sacred text.
   Interactive controls retain their normal focus-visible treatment above. */
.chapter:focus,
.chapter:focus-visible {
  outline: none;
  border-radius: 0;
}

@media (max-width: 640px) {
  .verse-ref {
    color: rgba(22, 19, 15, .34);
    font-weight: 500;
  }
}

/* UQA v4.53a — Verse Reference Baseline Alignment Patch
   Scope: presentation-only refinement. Low-contrast marginal refs are lowered
   slightly on desktop so each reference visually aligns with the first Scripture
   line instead of floating above it. Scripture text, book HTML, search data,
   catalog data, and Chapter-heading design are intentionally untouched. */
@media (min-width: 901px) {
  .verse-ref {
    top: .34rem;
    line-height: 1;
  }
}


/* UQA v4.53c — Select-On-Change Navigation Cleanup
   Scope: interface-only refinement. Chapter/book selects now navigate on change
   across the global reader picker and per-book picker; redundant Go buttons were
   removed from generated book pages. Scripture text, search data, catalog data,
   router behavior, and Chapter-heading design are intentionally untouched. */
.reader-jump {
  grid-template-columns: minmax(10rem, 1.2fr) minmax(8rem, .8fr);
}
.chapter-jump-row {
  grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 520px) {
  .reader-jump {
    grid-template-columns: minmax(0, 1fr) minmax(6.8rem, .62fr);
  }
  .chapter-jump-row {
    grid-template-columns: 1fr;
  }
}

/* UQA v4.53d — Long-Chapter Dropdown Landing Stabilization
   Scope: navigation/layout-only repair. Programmatic chapter jumps now force
   preceding lazy chapter boxes to render before scroll measurement, preventing
   long prior chapters from expanding after the scroll and leaving the selected
   chapter behind the viewport. Scripture text, search data, catalog data,
   Chapter-heading design, and select-on-change behavior are untouched. */
.chapter.route-materialized {
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}