/* BOM Hieratic — site styles
   Layout: a scribe's desk. One wide reading surface (the rendered hieratic pages,
   landscape, right-to-left) with a narrow left rail of books and chapters.
   Colour comes from the pages themselves: papyrus cream, iron-gall ink,
   the blue the pages use for English, and an ochre for pronunciation.
   No red/green pairs carry meaning anywhere (colour-blind safe). */
:root {
  --paper: #f6efe1;
  --paper-2: #efe5d2;
  --card: #fdf8ee;
  --ink: #1f1a14;
  --ink-2: #5d5547;
  --ink-3: #8c8372;
  --rule: #d8cbb3;
  --lapis: #2a5699;
  --lapis-soft: #dfe7f5;
  --ochre: #a9772a;
  --ochre-soft: #f1e4c8;
  --shadow: 0 1px 2px rgba(60, 40, 10, .08), 0 8px 24px rgba(60, 40, 10, .08);
  --display: "Cardo", "Gentium Plus", "Times New Roman", serif;
  --body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --glyph: "Noto Sans Egyptian Hieroglyphs", "Segoe UI Historic", sans-serif;
  --translit: "Cardo", "Gentium Plus", "Noto Serif", serif;
  --maxw: 1240px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #15120d; --paper-2: #1d1913; --card: #221d16;
    --ink: #ece3d1; --ink-2: #b3a894; --ink-3: #7f7664; --rule: #3a3327;
    --lapis: #8fb0ea; --lapis-soft: #1f2a40; --ochre: #d9a650; --ochre-soft: #3a2e18;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #15120d; --paper-2: #1d1913; --card: #221d16;
  --ink: #ece3d1; --ink-2: #b3a894; --ink-3: #7f7664; --rule: #3a3327;
  --lapis: #8fb0ea; --lapis-soft: #1f2a40; --ochre: #d9a650; --ochre-soft: #3a2e18;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  color-scheme: dark;
}

@font-face { font-family: "Noto Sans Egyptian Hieroglyphs"; src: local("Noto Sans Egyptian Hieroglyphs"), url("../fonts/NotoSansEgyptianHieroglyphs-Regular.ttf") format("truetype"); font-display: swap; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--lapis); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
label.eyebrow { display: block; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.15; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); }
h3 { font-size: 1.3rem; }
p { margin: 0; }
.glyph { font-family: var(--glyph); font-size: 1.35em; line-height: 1.2; }
.translit { font-family: var(--translit); font-style: italic; }
.eyebrow { font-family: var(--body); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.muted { color: var(--ink-2); }
.small { font-size: .92rem; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--lapis); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* ---- top bar ---- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); }
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.top .wrap { display: flex; align-items: center; gap: 1.2rem; min-height: 58px; padding-block: .4rem; }
.brand { display: flex; align-items: baseline; gap: .6rem; color: var(--ink); font-family: var(--display); font-size: 1.25rem; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand .glyph { font-size: 1.4rem; color: var(--ink-2); }
.nav { display: flex; gap: .2rem; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.nav a { color: var(--ink-2); padding: .35rem .7rem; border-radius: 999px; font-weight: 600; font-size: .95rem; }
.nav a:hover { background: var(--paper-2); text-decoration: none; color: var(--ink); }
.nav a[aria-current="page"] { background: var(--ink); color: var(--paper); }
@media (max-width: 720px) {
  .top .wrap { flex-wrap: wrap; gap: .4rem .8rem; padding-block: .5rem; }
  .brand { font-size: 1.1rem; }
  .brand .glyph { font-size: 1.15rem; }
  .theme-btn { margin-left: auto; }
  .nav { order: 3; width: 100%; margin-left: 0; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nav a { white-space: nowrap; font-size: .9rem; padding: .25rem .6rem; }
}
.theme-btn { border: 1px solid var(--rule); background: var(--card); color: var(--ink-2); border-radius: 999px; width: 34px; height: 34px; cursor: pointer; font-size: 1rem; line-height: 1; }
.theme-btn:hover { color: var(--ink); }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border-radius: 999px; font-weight: 600; font-size: .98rem; border: 1px solid var(--rule); background: var(--card); color: var(--ink); cursor: pointer; }
.btn:hover { text-decoration: none; border-color: var(--ink-3); }
.btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.primary:hover { background: var(--lapis); border-color: var(--lapis); }
.btn.small { padding: .35rem .75rem; font-size: .88rem; }

/* ---- footer ---- */
.foot { border-top: 1px solid var(--rule); margin-top: 4rem; padding-block: 2rem 3rem; color: var(--ink-2); font-size: .9rem; }
.foot .wrap { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .foot .wrap { grid-template-columns: 1fr; } }
.foot p + p { margin-top: .4rem; }

/* ---- home ---- */
.hero { padding-block: 3rem 2.5rem; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem; align-items: center; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; padding-block: 2rem 1.5rem; } }
.hero .glyph-title { font-family: var(--glyph); font-size: clamp(2.2rem, 5vw, 3.6rem); color: var(--ink-2); line-height: 1.1; direction: rtl; unicode-bidi: isolate; }
.hero .translit-line { font-family: var(--translit); font-size: 1.35rem; color: var(--ink-2); margin-top: .4rem; }
.hero p.lede { font-size: 1.15rem; margin-top: 1.2rem; max-width: 34em; color: var(--ink-2); }
.hero .actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; }
.page-shot { border: 1px solid var(--rule); box-shadow: var(--shadow); background: #f6efe1; border-radius: 4px; overflow: hidden; }
.page-shot img { width: 100%; }
.page-shot figcaption { font-size: .85rem; color: var(--ink-3); padding: .5rem .8rem; border-top: 1px solid var(--rule); background: var(--card); }

.section { padding-block: 2.5rem; border-top: 1px solid var(--rule); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.section-head p { color: var(--ink-2); max-width: 44em; }

.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem; }
.book-card { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem; background: var(--card); border: 1px solid var(--rule); border-radius: 6px; color: var(--ink); }
.book-card:hover { text-decoration: none; border-color: var(--lapis); }
.book-card .name { font-family: var(--display); font-size: 1.25rem; }
.book-card .meta { font-size: .85rem; color: var(--ink-3); }

.name-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; }
.name-card { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: 1rem; color: var(--ink); display: grid; gap: .25rem; }
.name-card:hover { text-decoration: none; border-color: var(--lapis); }
.name-card .glyph { font-size: 1.7rem; color: var(--ink-2); }
.name-card .nm { font-family: var(--display); font-size: 1.35rem; }
.name-card .rd { font-family: var(--translit); font-style: italic; color: var(--lapis); }
.name-card .mn { font-size: .9rem; color: var(--ink-2); }

.godhead { width: 100%; border-collapse: collapse; font-size: 1rem; }
.godhead th, .godhead td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.godhead th { font-family: var(--body); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.godhead .glyph { font-size: 1.5rem; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }
.callout { background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--ochre); border-radius: 6px; padding: 1.1rem 1.3rem; }
.callout h3 { margin-bottom: .4rem; }
.callout p + p { margin-top: .6rem; }

/* ---- reader ---- */
.reader { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 1.5rem; padding-block: 1.2rem 3rem; }
@media (max-width: 900px) { .reader { grid-template-columns: 1fr; } }
.rail { position: sticky; top: calc(58px + env(safe-area-inset-top, 0px) + 12px); max-height: calc(100vh - 90px); overflow: auto; padding-right: .3rem; }
@media (max-width: 900px) { .rail { position: static; max-height: none; } }
.rail h2 { font-size: 1.1rem; margin-bottom: .5rem; }
.search { display: block; width: 100%; padding: .55rem .8rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--card); color: var(--ink); font: inherit; font-size: .95rem; }
.book-list { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: 2px; }
.book-list > li > button { all: unset; display: flex; justify-content: space-between; width: 100%; padding: .4rem .6rem; border-radius: 5px; cursor: pointer; color: var(--ink); font-family: var(--display); font-size: 1.05rem; }
.book-list > li > button:hover { background: var(--paper-2); }
.book-list > li.open > button { background: var(--paper-2); }
.book-list .count { color: var(--ink-3); font-family: var(--body); font-size: .8rem; }
.chap-grid { display: none; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 3px; padding: .4rem .3rem .7rem; }
.book-list > li.open .chap-grid { display: grid; }
.chap-grid a { display: block; text-align: center; padding: .25rem 0; border-radius: 4px; font-size: .85rem; color: var(--ink-2); background: var(--card); border: 1px solid var(--rule); }
.chap-grid a:hover { border-color: var(--lapis); text-decoration: none; }
.chap-grid a.cur { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.chapter-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.2rem; margin-bottom: .8rem; }
.chapter-head h1 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.chapter-head .pager { margin-left: auto; display: flex; gap: .4rem; }
.verse-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 1rem; }
.verse-pills a { font-size: .8rem; padding: .15rem .5rem; border-radius: 999px; background: var(--card); border: 1px solid var(--rule); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.verse-pills a:hover { border-color: var(--lapis); text-decoration: none; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; font-size: .9rem; color: var(--ink-2); }
.toolbar .spacer { flex: 1; }
.zoom { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; }
.zoom button { all: unset; padding: .3rem .7rem; cursor: pointer; color: var(--ink-2); font-size: .85rem; }
.zoom button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.pages { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
.vpage { scroll-margin-top: calc(58px + env(safe-area-inset-top, 0px) + 12px); min-width: 0; }
.vpage .label { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .35rem; min-width: 0; overflow: hidden; }
.vpage .label a { white-space: nowrap; }
.vpage .label a { font-family: var(--display); font-size: 1.1rem; color: var(--ink); }
.vpage .label .en { color: var(--ink-2); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sheet { position: relative; background: #f6efe1; border: 1px solid var(--rule); box-shadow: var(--shadow); border-radius: 3px; overflow-x: auto; overflow-y: hidden; }
.sheet canvas { display: block; }
.sheet .ph { aspect-ratio: 1008 / 684; display: grid; place-items: center; color: var(--ink-3); font-size: .9rem; }
.findings { background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--ochre); border-radius: 6px; padding: 1.2rem 1.4rem; margin-top: 1.6rem; }
.findings h2 { font-size: 1.3rem; margin-bottom: .6rem; }
.findings dl { margin: 0; display: grid; gap: .7rem; }
.findings dt { font-weight: 600; }
.findings dd { margin: 0; color: var(--ink-2); font-size: .95rem; }
.results { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; margin-top: .6rem; max-height: 50vh; overflow: auto; }
.results a { display: block; padding: .5rem .7rem; border-bottom: 1px solid var(--rule); color: var(--ink); font-size: .9rem; }
.results a:last-child { border-bottom: 0; }
.results a b { color: var(--lapis); font-weight: 600; }
.results .none { padding: .6rem .8rem; color: var(--ink-3); font-size: .9rem; }
mark { background: var(--ochre-soft); color: inherit; padding: 0 .1em; border-radius: 2px; }
.legend { font-size: .85rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .6rem; }
.legend .sw { display: inline-block; width: .8em; height: .8em; border-radius: 2px; vertical-align: -1px; margin-right: .35em; border: 1px solid var(--rule); }
.notice { background: var(--lapis-soft); border-radius: 6px; padding: .8rem 1rem; font-size: .92rem; color: var(--ink); }

/* ---- names ---- */
.names-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 1.5rem; padding-block: 1.2rem 3rem; }
@media (max-width: 900px) { .names-layout { grid-template-columns: 1fr; } }
.names-list { list-style: none; margin: .6rem 0 0; padding: 0; max-height: 70vh; overflow: auto; border: 1px solid var(--rule); border-radius: 6px; background: var(--card); }
@media (max-width: 900px) { .names-list { max-height: 36vh; } }
.names-list li a { display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; padding: .45rem .7rem; border-bottom: 1px solid var(--rule); color: var(--ink); align-items: baseline; }
.names-list li:last-child a { border-bottom: 0; }
.names-list li a:hover { background: var(--paper-2); text-decoration: none; }
.names-list li a.cur { background: var(--lapis-soft); }
.names-list .nm { font-family: var(--display); font-size: 1.05rem; }
.names-list .rd { font-family: var(--translit); font-style: italic; color: var(--lapis); font-size: .95rem; text-align: right; }
.names-list .gl { grid-column: 1 / -1; font-family: var(--glyph); color: var(--ink-3); font-size: 1.1rem; }
.filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.chip { border: 1px solid var(--rule); background: var(--card); color: var(--ink-2); border-radius: 999px; padding: .2rem .7rem; font-size: .82rem; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.name-detail { background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 1.6rem 1.8rem; box-shadow: var(--shadow); }
@media (max-width: 600px) { .name-detail { padding: 1.1rem 1rem; } }
.name-detail .head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.2rem; }
.name-detail h1 { font-size: clamp(2rem, 4vw, 3rem); }
.name-detail .big-glyph { font-family: var(--glyph); font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--ink-2); line-height: 1.1; margin-top: .4rem; }
.name-detail .reading { font-family: var(--translit); font-size: 1.5rem; color: var(--lapis); }
.name-detail .say { color: var(--ochre); font-weight: 600; }
.name-detail .tag { margin-top: .4rem; font-family: var(--display); font-size: 1.25rem; font-style: italic; color: var(--ink-2); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.fact { border-top: 2px solid var(--rule); padding-top: .6rem; }
.fact .eyebrow { margin-bottom: .3rem; }
.fact ul { margin: 0; padding-left: 1.1rem; font-size: .95rem; color: var(--ink-2); }
.pics { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem; }
@media (max-width: 520px) { .pics { grid-template-columns: 1fr; } }
.pics figure { margin: 0; }
.pics img { width: 100%; aspect-ratio: 1.08; object-fit: cover; border-radius: 6px; border: 1px solid var(--rule); background: var(--paper-2); }
.pics figcaption { font-size: .85rem; color: var(--ink-2); margin-top: .4rem; }
.pics figcaption b { color: var(--ink); font-weight: 600; }
.story { margin-top: 1.4rem; max-width: 62ch; }
.story p + p { margin-top: .8rem; }
.verse-quote { margin-top: 1.4rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 1rem 1.2rem; }
.verse-quote .ref { font-family: var(--display); font-size: 1.05rem; margin-bottom: .3rem; }
.verse-quote p { color: var(--ink-2); }
.glyph-table { margin-top: 1.4rem; display: grid; gap: .3rem; }
.glyph-row { display: grid; grid-template-columns: 3.2rem 1fr; gap: .6rem; align-items: center; font-size: .95rem; color: var(--ink-2); border-bottom: 1px solid var(--rule); padding: .25rem 0; }
.glyph-row .glyph { font-size: 1.6rem; color: var(--ink); text-align: center; }
.steps { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; align-items: stretch; }
.step { flex: 1 1 180px; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: .7rem .9rem; }
.step .a { font-family: var(--translit); font-size: 1.15rem; }
.step .b { font-size: .85rem; color: var(--ink-2); margin-top: .2rem; }
.step-arrow { align-self: center; color: var(--ink-3); font-size: 1.4rem; }
.grade { display: inline-block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-2); }
.grade.STRONG, .grade.DECK { background: var(--lapis-soft); color: var(--lapis); border-color: transparent; }
.grade.MODERATE { background: var(--ochre-soft); color: var(--ochre); border-color: transparent; }
.grade.WEAK, .grade.PHONETIC { background: var(--paper-2); }

/* ---- method ---- */
.prose { max-width: 68ch; }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: .9rem; }
.prose ul { padding-left: 1.2rem; }
.prose li + li { margin-top: .3rem; }
.prose h2 { margin-top: 2.4rem; margin-bottom: .8rem; }
.prose h3 { margin-top: 1.6rem; margin-bottom: .5rem; }
.ttable { width: 100%; border-collapse: collapse; font-size: .95rem; }
.ttable th, .ttable td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ttable th { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.scroll-x { overflow-x: auto; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.stat { border-top: 2px solid var(--ink); padding-top: .5rem; }
.stat .n { font-family: var(--display); font-size: 2.2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .l { font-size: .88rem; color: var(--ink-2); margin-top: .3rem; }

/* ---- v2: Scripture Witness structure ---- */
.top .wrap { flex-wrap: wrap; row-gap: .2rem; padding-block: .6rem .2rem; }
.brand { align-items: center; gap: .8rem; }
.brand .mark { font-size: 1.7rem; color: var(--ink-2); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--display); font-size: 1.45rem; }
.brand-sub { font-family: var(--body); font-size: .78rem; color: var(--ink-3); letter-spacing: .02em; }
.top .begin { margin-left: auto; }
.top .theme-btn { margin-left: .4rem; }
.top .nav { order: 5; width: 100%; margin-left: 0; justify-content: center; border-top: 1px solid var(--rule); margin-top: .4rem; padding-top: .25rem; gap: .1rem .3rem; }
.top .nav a { font-family: var(--display); font-weight: 400; font-size: 1.05rem; padding: .3rem .8rem; border-radius: 4px; }
@media (max-width: 720px) {
  .top .wrap { padding-block: .5rem .2rem; }
  .brand-name { font-size: 1.15rem; }
  .brand-sub { display: none; }
  .top .begin { display: none; }
  .top .nav { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; }
  .top .nav a { font-size: .98rem; white-space: nowrap; }
}
.rail { top: calc(104px + env(safe-area-inset-top, 0px) + 12px); max-height: calc(100vh - 136px); }
.vpage { scroll-margin-top: calc(104px + env(safe-area-inset-top, 0px) + 12px); }
.rule { text-align: center; color: var(--ink-3); font-size: 1.6rem; padding-block: .4rem; position: relative; }
.rule::before, .rule::after { content: ""; position: absolute; top: 50%; width: calc(50% - 2.2rem); border-top: 1px solid var(--rule); }
.rule::before { left: 0; } .rule::after { right: 0; }
.page-head { padding-block: 2.2rem 1.2rem; max-width: 60rem; }
.page-head h1 { margin-top: .3rem; }
.page-head .lede { margin-top: .9rem; font-size: 1.12rem; color: var(--ink-2); max-width: 40em; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .9rem; }
.feature { display: block; background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: 1.1rem 1.2rem; color: var(--ink); }
.feature:hover { text-decoration: none; border-color: var(--lapis); }
.feature h3 { font-size: 1.3rem; margin-bottom: .35rem; }
.feature p { font-size: .93rem; color: var(--ink-2); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; padding-block: 2.2rem; border-top: 1px solid var(--rule); }
.stats .stat { border-top: 2px solid var(--ochre); padding-top: .5rem; }
.works { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; }
.works article h3 { font-size: 1.45rem; margin-bottom: .5rem; }
.works article p { color: var(--ink-2); font-size: .98rem; }
.works article > a { display: inline-block; margin-top: .6rem; font-weight: 600; }
.foundation { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.foundation li { display: grid; grid-template-columns: 2rem 1fr; gap: .6rem; align-items: start; }
.foundation .fn { font-family: var(--display); font-size: 1.2rem; color: var(--ochre); font-variant-numeric: tabular-nums; }
.foundation p { font-size: .98rem; }
.foundation a { font-size: .85rem; }
.legend-list { display: grid; gap: .5rem; }
.legend-item { display: grid; grid-template-columns: 6rem 1fr; gap: .6rem; align-items: start; color: var(--ink-2); font-size: .9rem; }
.legend-item:hover { text-decoration: none; color: var(--ink); }
.foot .emblem { text-align: center; font-size: 1.6rem; color: var(--ink-3); margin-bottom: 1.2rem; }
.foot .wrap { display: block; }
.foot-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; } }
.grade-sec { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: 1.1rem 1.3rem; margin-top: 1rem; }
.grade-sec h3 { display: flex; align-items: center; gap: .7rem; font-family: var(--body); font-size: 1rem; color: var(--ink-2); }
.grade-sec h3 .grade { font-size: .85rem; padding: .2rem .7rem; }
.grade-sec p { margin-top: .6rem; }
.grade-sec ul.ex { margin: .8rem 0 .6rem; padding-left: 1.1rem; font-size: .95rem; }
.grade-sec li + li { margin-top: .35rem; }
.chapters { padding-bottom: 3rem; }
.ch-book h2 { margin: 2rem 0 .7rem; }
.ch-list { display: grid; gap: .5rem; }
details.ch { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; }
details.ch summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .7rem 1rem; }
details.ch summary::-webkit-details-marker { display: none; }
details.ch summary::before { content: "›"; color: var(--ink-3); font-size: 1.3rem; line-height: 1; transition: transform .15s; }
details.ch[open] summary::before { transform: rotate(90deg); }
details.ch .ch-title { font-family: var(--display); font-size: 1.15rem; }
details.ch summary .btn { margin-left: auto; }
details.ch dl { margin: 0; padding: .2rem 1.2rem 1rem 2.4rem; display: grid; gap: .6rem; }
details.ch dt { font-weight: 600; }
details.ch dd { margin: 0; color: var(--ink-2); font-size: .95rem; }
.lib-results { padding-bottom: 3rem; display: grid; gap: 1.6rem; }
.lib-group h2 { font-size: 1.4rem; margin-bottom: .6rem; }
.hit { display: block; padding: .6rem .8rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--card); color: var(--ink); margin-bottom: .4rem; font-size: .95rem; }
.hit:hover { text-decoration: none; border-color: var(--lapis); }
.hit b { color: var(--lapis); }
.hit .src { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-left: .4rem; }

/* ---- v3: Book of Mormon Translator identity ---- */
:root { --display: "Cinzel", "Cardo", "Times New Roman", serif; --serif: "Cardo", "Gentium Plus", Georgia, serif; --night: #15110b; --gold: #c9a24a; }
h1, h2, .brand-name, .nav a, .feature h3, .works article h3, .book-card .name, .stat .n, .ch-title, .name-detail h1, .chapter-head h1 { font-family: var(--display); letter-spacing: .01em; }
h1 { font-weight: 500; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.12; }
h2 { font-weight: 500; font-size: clamp(1.35rem, 2.4vw, 1.9rem); }
.feature h3, .works article h3 { font-weight: 500; font-size: 1.1rem; letter-spacing: .04em; text-transform: uppercase; }
.book-card .name { font-size: 1.05rem; letter-spacing: .03em; }
.top .nav a { font-size: .92rem; letter-spacing: .08em; text-transform: uppercase; }
.brand-name { font-size: 1.25rem; letter-spacing: .04em; }
.name-card .nm, .names-list .nm, .vpage .label a, .findings h2, .rail h2, .book-list > li > button, .fact .eyebrow, .verse-quote .ref, .tag, .step .a { font-family: var(--serif); }
.lede, .page-head .lede, p.lede { font-family: var(--serif); font-size: 1.22rem; line-height: 1.5; }
.hero-dark { position: relative; background: var(--night); color: #f1e8d4; overflow: hidden; }
.hero-art { position: absolute; inset: 0; background-size: cover; background-position: 62% 50%; opacity: .95; }
.hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21,17,11,.96) 0%, rgba(21,17,11,.86) 38%, rgba(21,17,11,.35) 70%, rgba(21,17,11,.15) 100%), linear-gradient(0deg, rgba(21,17,11,.9) 0%, rgba(21,17,11,0) 35%); }
.hero-inner { position: relative; max-width: var(--maxw); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 4.5rem 2.5rem; }
.hero-inner > * { max-width: 44rem; }
.hero-dark h1 { color: #f6eedb; font-size: clamp(2rem, 4.6vw, 3.6rem); margin-top: .5rem; }
.hero-dark .glyph-title { font-family: var(--glyph); font-size: clamp(2rem, 4.4vw, 3.2rem); color: var(--gold); line-height: 1.1; margin-top: 1rem; direction: rtl; unicode-bidi: isolate; text-align: left; }
.eyebrow.light { color: var(--gold); }
.translit-line.light { font-family: var(--serif); font-size: 1.3rem; color: #d9cdb2; margin-top: .4rem; }
.lede.light { color: #d9cdb2; margin-top: 1.2rem; }
.hero-dark .actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #1a1409; }
.btn.gold:hover { background: #dcb65f; border-color: #dcb65f; }
.btn.ghost { background: transparent; border-color: rgba(241,232,212,.45); color: #f1e8d4; }
.btn.ghost:hover { border-color: var(--gold); color: var(--gold); }
.caractors-band { position: relative; margin-top: 2.5rem; background: #e8c86a; border-top: 1px solid rgba(0,0,0,.25); }
.caractors-band img { width: 100%; height: clamp(60px, 7vw, 110px); object-fit: cover; object-position: left center; display: block; filter: saturate(.9); }
.band-caption { position: relative; max-width: var(--maxw); margin: 0 auto; padding: .5rem max(16px, env(safe-area-inset-left, 0px)) 1rem; font-size: .82rem; color: #b8ac92; font-family: var(--serif); }
.hero-page { max-width: var(--maxw); margin: -1.2rem auto 0; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); position: relative; }
.hero-page .page-shot { margin-top: 1.4rem !important; }
.strip-rule { margin: 2.4rem 0 .4rem; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; background: #e8c86a; }
.strip-rule img { width: 100%; height: 46px; object-fit: cover; object-position: left center; display: block; opacity: .95; }
.head-strip { width: 100%; height: 54px; object-fit: cover; object-position: left center; border-radius: 3px; border: 1px solid var(--rule); margin-bottom: 1.2rem; background: #e8c86a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .strip-rule img, :root:not([data-theme="light"]) .head-strip { filter: brightness(.85); } }
:root[data-theme="dark"] .strip-rule img, :root[data-theme="dark"] .head-strip { filter: brightness(.85); }

/* ---- v4: Story Hero art ---- */
.feature { padding: 0 0 1rem; overflow: hidden; }
.feature-img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: block; border-bottom: 1px solid var(--rule); margin-bottom: .8rem; }
.feature h3, .feature p { padding-inline: 1.1rem; }
.head-banner { width: 100%; aspect-ratio: 16 / 5; object-fit: cover; object-position: center 40%; border-radius: 6px; border: 1px solid var(--rule); display: block; margin-bottom: .8rem; box-shadow: var(--shadow); }
.page-head { max-width: none; }
.page-head > .eyebrow, .page-head > h1, .page-head > .lede, .page-head > .search, .page-head > .filters { max-width: 60rem; }
.godhead-img { width: min(100%, 360px); border-radius: 8px; border: 1px solid var(--rule); box-shadow: var(--shadow); margin: .6rem 0 1rem; }
.hero-art { background-position: 70% 40%; }
.hero-art::after { background: linear-gradient(90deg, rgba(21,17,11,.94) 0%, rgba(21,17,11,.78) 40%, rgba(21,17,11,.2) 72%, rgba(21,17,11,.05) 100%), linear-gradient(0deg, rgba(21,17,11,.85) 0%, rgba(21,17,11,0) 40%); }
@media (max-width: 720px) { .hero-art::after { background: rgba(21,17,11,.78); } }
@media (max-width: 720px) {
  .brand { flex: 1 1 auto; min-width: 0; white-space: normal; gap: .5rem; }
  .brand .mark { font-size: 1.2rem; flex: none; }
  .brand-name { font-size: .98rem; line-height: 1.15; }
  .top .theme-btn { flex: none; margin-left: .4rem; }
}