/* ==========================================================
   Free Scripture — site.css
   Scene Design System v1 (September 2026).
   Brand: one lapis accent for tappable things. Reading: Paper, White,
   and Night themes. Story and scripture text: Atkinson Hyperlegible.
   ========================================================== */

/* --- Tokens (light mode) ---
   Aligned to the real Hope for Americans shared system (tokens.css,
   consumed by digitallutheranchurch.com and luthersworld.com): one
   brand hue at four weights, not a rotating rainbow of accents.
   --gold is kept as the variable name for backward compatibility with
   the many rules already written against it, but its value is now the
   family's actual brand color — a muted plum, not literal gold. */
:root {
  /* Scene Design System v1: Paper theme (default).
     Variable names are unchanged so every page and script keeps working.
     --gold is still the name of the one brand hue; its value is now lapis. */
  --paper:       #FBF7F0;
  --paper-warm:  #F3ECDF;
  --paper-deep:  #E9DFCC;
  --ink:         #2B2118;
  --ink-soft:    #4A3F33;
  --ink-faded:   #6B5D4C;
  --ink-hint:    #756756;
  --rule:        #E0D5C2;
  --rule-soft:   #ECE4D5;
  --gold:        #2F4DA0;  /* lapis: the one brand hue, for things you can tap */
  --gold-deep:   #243C80;
  --gold-wash:   #E7EBF6;
  --gold-leaf:   #B8892B;  /* decoration only, never body text */
  --on-gold:     #FFFFFF;  /* text on filled lapis */
  --white:       #fff;
  --highlight:   #f3e2a8;

  --card-shadow:       0 0 0 1px rgba(43,33,24,.10), 0 1px 2px rgba(43,33,24,.04);
  --card-shadow-hover: 0 0 0 1px rgba(43,33,24,.16), 0 3px 10px rgba(43,33,24,.08);

  --g-narrative: #A8481F;
  --g-poetry:    #5B6A8C;
  --g-wisdom:    #8A6D1F;
  --g-law:       #5A6638;
  --g-letters:   #3F6F66;
  --g-prophecy:  #75384B;

  /* Source Serif 4 + Source Sans 3 — the family's actual fonts,
     self-hosted on DLC and Luther's World, chosen and contrast-tested
     for exactly this readership. Literata stays available as an
     opt-in Display-panel choice, but it is not the identity. */
  --font-ui:   'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Atkinson Hyperlegible', Verdana, Arial, sans-serif;
  --font-book: 'Literata', Georgia, serif;

  --measure:   40rem;
  --radius:    10px;
  --radius-sm: 8px;
}

/* --- Night theme tokens (indigo night, September 2026) ---
   Deep indigo from the brand ink instead of the old brown-black.
   Applied when the OS prefers dark and the reader hasn't pinned Paper or
   White, or when the reader picks Night in the Display panel.
   Contrast on paper: ink 15.1:1, ink-faded 7.4:1, link 9.2:1. */
@media (prefers-color-scheme: dark) {
  :root:not([data-fs-theme="light"]):not([data-fs-theme="white"]) {
    --paper:      #16182C;
    --paper-warm: #252950;
    --paper-deep: #2D3258;
    --ink:        #EEEDF6;
    --ink-soft:   #D2D1E4;
    --ink-faded:  #A7A6C2;
    --ink-hint:   #9C9BB8;
    --rule:       #2F3358;
    --rule-soft:  #232646;
    --gold:       #B3B7F5;
    --gold-deep:  #D3D6FA;
    --gold-wash:  #2C3163;
    --on-gold:    #16182C;
    --white:      #1E2140;
    --highlight:  #4A4526;
    --card-shadow:       0 0 0 1px rgba(255,255,255,.05);
    --card-shadow-hover: 0 0 0 1px rgba(255,255,255,.11);
    --g-narrative: #d4805a;
    --g-poetry:    #8fa5c8;
    --g-wisdom:    #c4a850;
    --g-law:       #8aaa60;
    --g-letters:   #5aada0;
    --g-prophecy:  #b07080;
  }
}
:root[data-fs-theme="dark"] {
  --paper:      #16182C;
  --paper-warm: #252950;
  --paper-deep: #2D3258;
  --ink:        #EEEDF6;
  --ink-soft:   #D2D1E4;
  --ink-faded:  #A7A6C2;
  --ink-hint:   #9C9BB8;
  --rule:       #2F3358;
  --rule-soft:  #232646;
  --gold:       #B3B7F5;
  --gold-deep:  #D3D6FA;
  --gold-wash:  #2C3163;
  --on-gold:    #16182C;
  --white:      #1E2140;
  --highlight:  #4A4526;
  --card-shadow:       0 0 0 1px rgba(255,255,255,.05);
  --card-shadow-hover: 0 0 0 1px rgba(255,255,255,.11);
  --g-narrative: #d4805a;
  --g-poetry:    #8fa5c8;
  --g-wisdom:    #c4a850;
  --g-law:       #8aaa60;
  --g-letters:   #5aada0;
  --g-prophecy:  #b07080;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* View Transitions: crossfade between page loads so multi-page
   navigation feels instant, like Mama Shepherd's client-side routing,
   without the 100vh scroll trap or single-page architecture. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.15s;
  animation-timing-function: ease-out;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0s; }
}

body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Safe-area padding for PWA standalone on notched phones:
     content doesn't tuck under the notch or home indicator. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }

/* Focus rings: visible on keyboard nav, invisible on mouse/touch.
   Gold outline matches the accent system; rounded to soften. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- Skip link --- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper); padding: 8px 16px;
  font-size: 14px; font-weight: 600; z-index: 100; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* --- Site header --- */
.site-header {
  border-bottom: 1.5px solid var(--rule);
  background: var(--paper);
  position: sticky; top: 0; z-index: 50;
}
.site-header__inner {
  max-width: 78rem; margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.site-mark {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
}
.site-mark__icon { width: 28px; height: 19px; color: var(--ink); }
.site-mark__text {
  font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--ink);
}
.site-nav {
  display: none; gap: 16px; font-size: 14px; font-weight: 500;
}
.site-nav a { text-decoration: none; color: var(--ink-faded); }
.site-nav a:hover { color: var(--ink); }
@media (min-width: 768px) {
  .site-nav { display: flex; }
}

/* Theme toggle: sun/moon in the header. Always visible — not buried in
   a settings sheet. Clicking it toggles between light and dark directly;
   the "Auto" (follow OS) option stays in the Display panel for those
   who want it. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--rule); background: none;
  color: var(--ink-faded); cursor: pointer; flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}
.theme-toggle:hover { border-color: var(--gold); color: var(--gold); }
.theme-toggle svg { width: 16px; height: 16px; }

/* Default (light mode): show moon (offer to go dark), hide sun */
.theme-toggle__sun  { display: none; }
.theme-toggle__moon { display: block; }

/* When dark mode is active (OS preference, not overridden to light):
   show sun (offer to go light), hide moon */
@media (prefers-color-scheme: dark) {
  :root:not([data-fs-theme="light"]):not([data-fs-theme="white"]) .theme-toggle__sun  { display: block; }
  :root:not([data-fs-theme="light"]):not([data-fs-theme="white"]) .theme-toggle__moon { display: none; }
}
/* When manually set to dark: same logic */
:root[data-fs-theme="dark"] .theme-toggle__sun  { display: block; }
:root[data-fs-theme="dark"] .theme-toggle__moon { display: none; }

/* --- Tab bar (mobile) --- */
.tab-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-around;
  background: var(--paper); border-top: 1px solid var(--rule);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
}
.tab-bar__btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 9.5px; font-weight: 500; color: var(--ink-faded);
  text-decoration: none; background: none; border: none; padding: 4px 2px;
  -webkit-tap-highlight-color: transparent;
  min-width: 0; flex: 1 1 0; white-space: nowrap;
}
.tab-bar__btn svg { width: 20px; height: 20px; }
.tab-bar__btn[aria-current="page"] { color: var(--gold); }
@media (min-width: 768px) { .tab-bar { display: none; } }

/* --- Footer --- */
.site-footer {
  text-align: center; padding: 24px 20px 100px;
  background: var(--paper-warm); border-top: 1px solid var(--rule);
  font-size: 14px; color: var(--ink-faded);
}
@media (min-width: 768px) { .site-footer { padding-bottom: 32px; } }
.foot-tag { margin-bottom: 6px; }
.hfa-madein { margin-bottom: 10px; }
.hfa-heart { color: var(--gold); }
.hfa-rule { height: 1px; background: var(--rule); max-width: 80px; margin: 10px auto; }
.hfa-mark a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hfa-mark a:hover { color: var(--gold); }
.hfa-vision { font-size: 14px; color: var(--ink-hint); margin-top: 4px; }

/* --- Reading column (max-width container) --- */
.reading-column {
  max-width: var(--measure); margin: 0 auto;
  padding: 0 20px 60px;
}

/* --- Chapter nav (top bar) --- */
.chapter-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--rule-soft);
  font-size: 14px;
}
.chapter-nav a { text-decoration: none; font-weight: 600; color: var(--ink-soft); }
.chapter-nav a:hover { color: var(--ink); }
.chapter-nav__current { font-weight: 700; font-size: 15px; }
.chapter-nav__group { display: flex; gap: 12px; min-width: 70px; }
.chapter-nav__group:last-child { justify-content: flex-end; }

/* --- Translation switcher --- */
.trans-switch {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 10px 0; font-size: 14px; color: var(--ink-faded);
  border-bottom: 1px solid var(--rule-soft);
}
.trans-switch__label { margin-right: 4px; }
.trans-switch__btn {
  font-weight: 600; padding: 4px 10px; border-radius: 6px;
  font-size: 14px; text-decoration: none; color: var(--ink-soft);
  border: 1.5px solid var(--rule);
}
.trans-switch__btn:hover { border-color: var(--ink-soft); }
.trans-switch__btn--current {
  background: var(--ink); color: var(--paper);
  border-color: var(--ink);
}

/* --- Page headings (needs, genre, about, search) --- */
.page-head { padding: 20px 0 8px; }
.page-title {
  font-size: 24px; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.2; margin-bottom: 8px;
}
.page-lede {
  font-size: 15px; color: var(--ink-soft); line-height: 1.5;
}

/* --- Chapter reader --- */

/* Book context — the "what am I about to read" framing that every major
   Bible site has via editorial headings or commentary, but ours uses our
   own BOOK_INTROS/BOOK_PITCHES data instead of licensed content. */
.chapter-context {
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.65; color: var(--ink-soft);
  margin-bottom: 28px; padding: 16px 20px;
  background: var(--paper-warm); border-radius: 10px;
  border-left: 3px solid var(--gold);
  max-width: 36rem;
  font-optical-sizing: auto;
}
.chapter-context__label {
  font-family: var(--font-ui); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--gold); margin-bottom: 6px;
}

/* "Keep reading" block — cross-links after the chapter text, turning the
   dead end into a crossroads using data already in meta.json. */
.keep-reading {
  margin-top: 36px; padding-top: 20px;
  border-top: 1px solid var(--rule); max-width: 36rem;
}
.keep-reading__heading {
  font-family: var(--font-ui); font-size: 14px; font-weight: 700;
  color: var(--ink-faded); text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.keep-reading__links {
  display: flex; flex-direction: column; gap: 10px;
}
.keep-reading__link {
  display: block; text-decoration: none; padding: 12px 16px;
  border-radius: 10px; background: var(--white);
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.2s ease;
}
.keep-reading__link:hover { box-shadow: var(--card-shadow-hover); }
.keep-reading__link-label {
  font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--ink);
}
.keep-reading__link-desc {
  font-size: 14px; color: var(--ink-faded); margin-top: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .keep-reading__link { transition: none; }
}

.chapter-translation-tag {
  font-size: 14px; font-weight: 600; color: var(--gold);
  margin-top: 24px; margin-bottom: 4px;
}
.chapter-title {
  font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.chapter-title-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.chapter-title-row .chapter-title { margin-bottom: 20px; }
.reading-settings-btn {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; margin-top: 2px;
  border: 1.5px solid var(--rule); border-radius: 10px;
  background: var(--white); color: var(--ink-soft);
  font-size: 14px; font-weight: 600;
}
.reading-settings-btn:hover { border-color: var(--gold); color: var(--ink); }
.reading-settings-btn svg { width: 20px; height: 20px; }
.chapter-text {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.78;
  max-width: 36rem;
  word-spacing: 0.03em;
  /* Publisher-grade text rendering: activates Source Serif 4's optical
     size axis (opsz 8–60, loaded in the Google Fonts URL) so letterforms
     are correctly weighted at 20px, not designed-size defaults.
     font-synthesis:none prevents the browser faking bold or italic if
     an axis isn't loaded — better a visual gap than a wrong rendering. */
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  font-synthesis: none;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  hyphens: auto;
  -webkit-hyphens: auto;
  orphans: 2;
  widows: 2;
}

/* Default layout: one verse per line, number in a left gutter. */
.verse {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  column-gap: 10px;
  margin-bottom: 1em;
  scroll-margin-top: 96px;
}
.verse:last-child { margin-bottom: 0; }
.verse__num {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--gold);
  text-decoration: none;
  text-align: right;
  padding-top: 0.35em;
  line-height: 1;
}
.verse__num:hover { color: var(--ink); }
.verse__body { display: block; }
.verse:target {
  background: var(--highlight);
  border-radius: 6px;
  box-shadow: 0 0 0 6px var(--highlight);
}

/* Flowing layout (opt-in): verses run together as prose. */
[data-fs-layout="flowing"] .chapter-text { display: block; }
[data-fs-layout="flowing"] .verse {
  display: inline;
  margin: 0;
}
[data-fs-layout="flowing"] .verse__num {
  vertical-align: super;
  font-size: 15px;
  padding: 0;
  margin-right: 0.3em;
  text-align: left;
}
[data-fs-layout="flowing"] .verse__body { display: inline; }
[data-fs-layout="flowing"] .verse:target {
  box-shadow: 0 0 0 3px var(--highlight);
}

/* Chapter actions */
.chapter-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 8px 0 20px;
}
.action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; padding: 10px 16px;
  border-radius: var(--radius-sm); border: 1.5px solid var(--rule);
  background: var(--white); color: var(--ink);
  text-decoration: none;
}
.action-btn:hover { border-color: var(--ink-soft); }
.action-btn:first-child {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.action-btn__icon { width: 16px; height: 16px; }
.action-btn__text { /* inherits */ }

/* Chapter footer nav */
.chapter-foot { padding-top: 8px; }
.chapter-foot__nav {
  display: flex; gap: 10px; margin-bottom: 24px;
}
.chapter-foot__nav a, .chapter-foot__nav span {
  flex: 1; display: block; padding: 14px 16px;
  border: 1.5px solid var(--rule); border-radius: var(--radius);
  text-decoration: none; color: inherit;
}
.chapter-foot__nav a:hover { border-color: var(--ink-soft); }
.chapter-foot__nav .next { text-align: right; }
.chapter-foot__nav .arrow { font-size: 14px; color: var(--ink-faded); display: block; }
.chapter-foot__nav .label { font-weight: 700; font-size: 16px; margin-top: 2px; display: block; }

.tradition-stripe { height: 3px; background: var(--gold); }

/* --- Bookrow (the universal row component) --- */
.bookrow {
  display: flex; align-items: center;
  background: var(--white); border-radius: var(--radius); padding: 16px 18px;
  text-decoration: none; color: inherit;
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.2s ease;
}
.bookrow:hover { box-shadow: var(--card-shadow-hover); }
@media (prefers-reduced-motion: reduce) {
  .bookrow { transition: none; }
}

/* --colored modifier: activates the --rowc accent that Need and Genre
   pages set via inline style. The variable is already being written;
   this is the CSS that makes it visible. Left border + full border on
   hover, matching the accent. Adjusted padding compensates for the
   extra border width so internal alignment doesn't shift. */
.bookrow--colored {
  border-left: 3px solid var(--rowc, var(--rule));
  padding-left: 14px;
}
.bookrow--colored:hover { border-color: var(--rowc, var(--gold)); }

/* 2-column grid for famous passage rows on desktop — halves the
   scroll depth of the longest list on the homepage. */
@media (min-width: 640px) {
  .read-list--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}
@media (min-width: 860px) {
  .read-list--grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.bookrow__main {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column;
}
.bookrow__t {
  font-weight: 700; font-size: 17px; line-height: 1.25;
  letter-spacing: -0.015em;
}
.bookrow__d {
  font-size: 14px; color: var(--ink-faded); line-height: 1.45;
  margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.bookrow__chev {
  flex: 0 0 auto; color: var(--ink-faded); opacity: 0.4;
  margin-left: 12px; width: 9px; height: 15px;
}

/* Promoted row (translation cards on home) */
.bookrow--primary {
  background: var(--paper-warm); padding: 20px 20px;
}
.bookrow--primary .bookrow__t { font-size: 18px; letter-spacing: -0.015em; }
.bookrow--primary .bookrow__d { font-size: 15px; color: var(--ink-soft); }

/* --- Row containers --- */
.read-list {
  display: flex; flex-direction: column; gap: 12px;
}
.book-grid {
  display: flex; flex-direction: column; gap: 10px;
}

/* --- Section dividers and labels --- */
.home-divider { height: 1px; background: var(--rule); margin: 32px 0; }
.section-label {
  font-size: 14px; font-weight: 700; color: var(--gold);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
.section-link {
  font-size: 14px; font-weight: 600; color: var(--gold); text-decoration: none;
}
.section-link:hover { text-decoration: underline; }

/* Book section labels (translation landing) */
.book-section-label {
  display: inline-block;
  font-size: 14px; font-weight: 700; color: var(--gold);
  background: var(--paper-warm); padding: 4px 10px; border-radius: 8px;
  margin: 24px 0 12px;
}
.book-section:first-of-type .book-section-label { margin-top: 0; }

/* --- Home page ---
   One card language (hcard) used for everything: quick access,
   translations, passages, and Sunday. Five different card styles
   was the visual identity problem. One consistent card is the fix.
   ============================================================== */
.home { max-width: 52rem; margin: 0 auto; padding: 0 24px 72px; }

/* Hero */
.home-hero { padding: 48px 0 28px; text-align: center; }
.home-hero__headline {
  font-family: var(--font-body); font-size: 36px; font-weight: 400;
  line-height: 1.2; color: var(--ink); letter-spacing: -0.025em;
  font-optical-sizing: auto;
  max-width: 15ch; margin: 0 auto;
  text-wrap: balance;
}
@media (min-width: 640px) { .home-hero__headline { font-size: 42px; } }
.home-hero__sub {
  font-size: 15px; color: var(--ink-faded); margin-top: 10px;
}

/* === The single primary action ===
   One clear next step instead of four equal ones. Larger than any
   card in the grid below it, with room for two lines of real text —
   because a card this size can afford to say something, rather than
   two words padded out with empty space. */
.hero-primary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 22px 24px;
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--card-shadow); text-decoration: none; color: var(--ink);
  margin: 28px 0 14px;
  transition: box-shadow 0.2s ease;
}
.hero-primary:hover { box-shadow: var(--card-shadow-hover); }
@media (prefers-reduced-motion: reduce) { .hero-primary { transition: none; } }
.hero-primary__body { display: flex; flex-direction: column; min-width: 0; }
.hero-primary__label {
  font-family: var(--font-ui); font-size: 18px; font-weight: 700;
  color: var(--ink);
}
.hero-primary__sub {
  font-family: var(--font-body); font-style: italic; font-size: 14px;
  color: var(--ink-faded); margin-top: 4px; font-optical-sizing: auto;
}
.hero-primary__arrow {
  font-size: 24px; color: var(--gold); flex-shrink: 0;
}

/* === Real search field ===
   A text input everyone already recognizes on sight, rather than a
   button labeled "Search" that has to be read and understood first. */
.hero-search {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; background: var(--white);
  border-radius: var(--radius); box-shadow: var(--card-shadow);
  margin-bottom: 20px;
}
.hero-search svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--ink-faded); }
.hero-search__input {
  flex: 1; border: none; outline: none; background: none;
  font-family: var(--font-ui); font-size: 16px; color: var(--ink);
  min-width: 0;
}
.hero-search__input::placeholder { color: var(--ink-hint); }

/* === Quiet secondary links ===
   Plain text, not boxes — a lighter-weight option for someone who
   wants a different starting point without evaluating another set
   of equally-weighted cards first. Matches DLC's own restrained
   arrow-link convention for secondary paths. */
.hero-links {
  display: flex; flex-wrap: wrap; gap: 4px 24px; margin-bottom: 8px;
}
.hero-links__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-size: 15px; font-weight: 600;
  color: var(--ink); text-decoration: none; padding: 8px 0;
}
.hero-links__link span {
  color: var(--gold); transition: transform 0.15s ease;
}
.hero-links__link:hover span { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .hero-links__link span { transition: none; }
}

/* Section headings */
.home-h2 {
  font-family: var(--font-body); font-size: 19px; font-weight: 400;
  color: var(--ink); letter-spacing: -0.01em; margin: 36px 0 14px;
  font-optical-sizing: auto;
}

/* === The one card: hcard ===
   Matches the family's actual card language (tokens.css / dlc.css):
   a plain white surface, a ring-shadow instead of a colored border,
   and a hover state that only deepens the shadow — no lift, no
   background swap, no color shift. Four separate comments in the
   family's own CSS say the lift was removed as "sensory noise for
   neurodivergent readers." That's a standing decision here too. */
.hcard {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 18px;
  background: var(--white); border-radius: var(--radius);
  text-decoration: none; color: var(--ink);
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.2s ease;
}
.hcard:hover { box-shadow: var(--card-shadow-hover); }
@media (prefers-reduced-motion: reduce) { .hcard { transition: none; } }

/* The label */
.hcard__label {
  font-family: var(--font-ui); font-size: 16px; font-weight: 600;
  color: var(--ink); display: block;
}
/* Sub-line — smaller, muted */
.hcard__sub {
  font-size: 14px; color: var(--ink-faded); margin-top: 3px; display: block;
}
.hcard__sub--italic {
  font-family: var(--font-body); font-style: italic; font-optical-sizing: auto;
}
/* Passage ref — slightly larger weight */
.hcard__ref {
  font-family: var(--font-ui); font-size: 15px; font-weight: 700;
  color: var(--ink); display: block;
}
/* Tag (Good place to start) — the one brand hue, same as the arrow */
.hcard__tag { color: var(--gold); font-style: normal; }
/* Body wrapper for cards with both label and sub */
.hcard__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
/* The arrow — brand plum, matching DLC's .link-card .lc-arrow convention */
.hcard__arrow {
  font-size: 20px; color: var(--gold); flex-shrink: 0; line-height: 1;
}

/* === Row layouts ===
   hcard-row--4: the quick-access row (equal 4-up)
   hcard-row--3: the passages grid (3-up on desktop, 2-up on tablet)
   hcard-row--col: stacked full-width column (translations)          */
.hcard-row { display: grid; gap: 14px; margin-bottom: 8px; }
.hcard-row--4 { grid-template-columns: repeat(4, 1fr); margin-bottom: 40px; }
.hcard-row--3 { grid-template-columns: repeat(3, 1fr); }
.hcard-row--col { grid-template-columns: 1fr; }

/* Quick-access cards are taller, label top-left, arrow bottom-right —
   the same right-edge landmark the wide cards use, so both card
   shapes read as one consistent system rather than two conventions. */
.hcard-row--4 .hcard {
  flex-direction: column; align-items: flex-start; justify-content: space-between;
  padding: 20px 20px 18px; min-height: 108px;
}
.hcard-row--4 .hcard__arrow { align-self: flex-end; }
/* Wide cards (translations, Sunday) keep their label and sub in a body wrapper */
.hcard--wide { align-items: center; }

/* Accented card (This Sunday) — gold left border */
.hcard--accented { border-left: 3px solid var(--gold); }

/* Responsive breakpoints */
@media (max-width: 639px) {
  .hcard-row--4 { grid-template-columns: 1fr 1fr; }
  .hcard-row--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 399px) {
  .hcard-row--4 { grid-template-columns: 1fr; }
  .hcard-row--3 { grid-template-columns: 1fr; }
}

/* --- Passage cards (need pages) --- */
.passage-list { display: flex; flex-direction: column; gap: 14px; padding: 12px 0 28px; }
.passage {
  background: var(--white); border: 1.5px solid var(--rule);
  border-radius: var(--radius); padding: 18px; overflow: hidden;
}
.passage__ref {
  font-weight: 700; font-size: 14px; color: var(--gold); margin-bottom: 4px;
}
.passage__frame {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 15px; color: var(--ink-soft); line-height: 1.55;
  margin-bottom: 12px;
  font-optical-sizing: auto;
}
.passage__verse {
  font-family: var(--font-body); font-size: 19px; line-height: 1.72;
  color: var(--ink); padding: 14px 18px;
  background: var(--paper-warm); border-radius: var(--radius-sm);
  margin: 0 0 14px; quotes: none;
  font-optical-sizing: auto; font-synthesis: none;
}
.passage__acts { display: flex; gap: 8px; }
.rbtn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; padding: 10px 16px;
  border: 1.5px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--white); color: var(--ink); text-decoration: none;
}
.rbtn:hover { border-color: var(--ink-soft); }
.rbtn--subtle {
  font-size: 14px; padding: 7px 12px;
  color: var(--ink-faded); border-color: transparent; background: none;
  cursor: pointer;
}
.rbtn--subtle:hover { color: var(--ink); border-color: var(--rule); }

/* --- Translation landing --- */
.trans-landing { max-width: var(--measure); margin: 0 auto; padding: 0 20px 60px; }
.trans-landing__head { padding: 20px 0 16px; }
.trans-landing__title {
  font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px;
}
.trans-landing__desc { font-size: 15px; color: var(--ink-soft); line-height: 1.5; }

/* --- Book landing --- */
.book-landing { }
.book-head { padding: 20px 0 8px; }
.book-title {
  font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px;
}
.book-intro { font-size: 15px; color: var(--ink-soft); line-height: 1.5; }
.book-chapters-label {
  font-size: 14px; font-weight: 700; color: var(--gold); margin: 20px 0 12px;
}
.chapter-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 8px; list-style: none;
}
.chapter-grid li a {
  display: flex; align-items: center; justify-content: center;
  height: 48px; font-weight: 600; font-size: 16px;
  border: 1.5px solid var(--rule); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--ink); background: var(--white);
}
.chapter-grid li a:hover { border-color: var(--gold); background: var(--paper-warm); }

/* --- Genre hub/page --- */
.genre-hub, .genre-page { }
.genre-section { margin-bottom: 16px; }
.genre-section__title { font-weight: 700; font-size: 18px; margin-bottom: 4px; }
.genre-section__desc { font-size: 14px; color: var(--ink-faded); margin-bottom: 12px; }

/* --- Needs hub --- */
.needs-hub { }

/* --- Card-list pages (need hub, need detail, parables hub):
   wider container matches Stories catalog at all viewport sizes. --- */
.reading-column.needs-hub,
.reading-column.need-page,
.reading-column.parables-hub {
  max-width: 78rem;
}
@media (min-width: 900px) {
  .reading-column.needs-hub,
  .reading-column.need-page,
  .reading-column.parables-hub {
    padding: 0 48px 64px;
  }
}
/* Hub pages: two-column book-row lists at medium screens */
@media (min-width: 600px) {
  .reading-column.needs-hub .read-list,
  .reading-column.parables-hub .read-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  /* Cap the parables search input width */
  .reading-column.parables-hub .parable-filter {
    max-width: 520px;
  }
}

/* --- Search page --- */
.search-page { }
.search-box { margin: 16px 0; }
.search-trans { display: block; margin-bottom: 10px; font-size: 14px; }
.search-trans select {
  font-family: var(--font-ui); font-size: 15px; padding: 8px 12px;
  border: 1.5px solid var(--rule); border-radius: 8px;
  background: var(--white); color: var(--ink); margin-left: 8px;
}
.search-input {
  width: 100%; font-family: var(--font-ui); font-size: 16px;
  padding: 12px 14px; border: 1.5px solid var(--rule);
  border-radius: 12px; background: var(--white); color: var(--ink);
  outline: none;
}
.search-input:focus { border-color: var(--gold); }
.search-results { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }

/* Search: stories and passages found by familiar name, above the verses */
.search-shortcuts { margin-top: 18px; }
.search-shortcuts:empty { display: none; }
.search-shortcuts__title {
  font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-faded); margin: 0 0 10px;
}
.search-shortcuts__title--verses { margin: 22px 0 0; }
.search-shortcuts__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.search-hit {
  display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--rule); border-radius: var(--radius);
  padding: 12px 16px; min-height: 44px;
}
.search-hit:hover, .search-hit:focus-visible { border-color: var(--gold); }
.search-hit__kind { font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--gold); }
.search-hit__title { font-family: var(--font-ui); font-size: 18px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.search-hit__line { font-size: 15px; color: var(--ink-faded); line-height: 1.45; }
.search-hit__note { font-size: 14px; color: var(--ink-faded); font-style: italic; }

.search-status {
  font-size: 14px; color: var(--ink-faded); margin-top: 12px; min-height: 1.2em;
}
.search-result {
  background: var(--white); border: 1.5px solid var(--rule);
  border-radius: var(--radius); padding: 14px 16px;
}
.search-result__ref { margin-bottom: 6px; }
.search-result__ref a {
  font-family: var(--font-ui); font-size: 14px; font-weight: 700;
  color: var(--gold); text-decoration: none;
}
.search-result__ref a:hover { text-decoration: underline; }
.search-result__text {
  font-family: var(--font-body); font-size: 19px; line-height: 1.6; color: var(--ink);
  font-optical-sizing: auto; font-synthesis: none;
}
.search-result__text mark,
.search-result__text .hl {
  background: var(--highlight); color: inherit; border-radius: 2px; padding: 0 1px;
}
.search-empty {
  font-size: 16px; color: var(--ink-faded); line-height: 1.6;
  padding: 16px 0;
}
.search-empty em { font-style: normal; font-weight: 600; color: var(--ink-soft); }

/* --- Back to top --- */
.back-to-top {
  position: fixed;
  right: 16px;
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 40;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  border: 1.5px solid var(--rule); border-radius: 999px;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  box-shadow: 0 2px 12px rgba(26, 23, 20, 0.15);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top svg { width: 20px; height: 20px; }
@media (min-width: 768px) {
  .back-to-top { bottom: 24px; right: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity 0.2s ease; transform: none; }
  .back-to-top.is-visible { transform: none; }
}

/* --- About page --- */
.about-page .prose {
  font-size: 17px; line-height: 1.65; color: var(--ink);
}
.about-page .prose p { margin-bottom: 1em; }
.about-page .prose a { color: var(--gold); }
.about-page .prose h2 {
  font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
  margin: 1.5em 0 0.5em; color: var(--ink);
}

/* --- Not found --- */
.notfound-page { }

/* --- Attribution (chapter footer) --- */
.attribution {
  font-size: 14px; color: var(--ink-hint); line-height: 1.5;
  padding: 16px 0; border-top: 1px solid var(--rule-soft);
}

/* --- Reading preferences (applied via data attributes on <html>) ---
   Applies to every place readers meet running scripture text: the
   chapter reader, Need-page passage cards, and search results — not
   just .chapter-text. A reader who sets "Largest" or OpenDyslexic
   should never see it silently drop on a different page. */
[data-fs-size="large"] .chapter-text,
[data-fs-size="large"] .passage__verse,
[data-fs-size="large"] .search-result__text { font-size: 21px; }
[data-fs-size="xlarge"] .chapter-text,
[data-fs-size="xlarge"] .passage__verse,
[data-fs-size="xlarge"] .search-result__text { font-size: 24px; }
[data-fs-leading="loose"] .chapter-text,
[data-fs-leading="loose"] .passage__verse,
[data-fs-leading="loose"] .search-result__text { line-height: 2; }
[data-fs-leading="tight"] .chapter-text,
[data-fs-leading="tight"] .passage__verse,
[data-fs-leading="tight"] .search-result__text { line-height: 1.55; }
[data-fs-font="lexend"] .chapter-text,
[data-fs-font="lexend"] .passage__verse,
[data-fs-font="lexend"] .search-result__text { font-family: 'Lexend', var(--font-body); }
[data-fs-font="opendyslexic"] .chapter-text,
[data-fs-font="opendyslexic"] .passage__verse,
[data-fs-font="opendyslexic"] .search-result__text { font-family: 'OpenDyslexic', var(--font-body); }
[data-fs-font="literata"] .chapter-text,
[data-fs-font="literata"] .passage__verse,
[data-fs-font="literata"] .search-result__text {
  font-family: 'Literata', var(--font-body);
  font-optical-sizing: auto;
}

/* --- Reading progress: thin, quiet, tracks position within the
   passage text itself. Deliberately no percentage number and no
   color-change celebration — a plain line, not a game mechanic. */
.reading-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 3px;
  z-index: 200; pointer-events: none; background: transparent;
}
.reading-progress__bar {
  height: 100%; width: 0%; background: var(--gold); opacity: 0.55;
  transition: width 0.15s linear;
}
@media (prefers-reduced-motion: reduce) {
  .reading-progress__bar { transition: none; }
}

/* --- Chapter meta row: read-time on the left, jump-to-verse (only
   rendered for longer chapters) on the right --- */
.chapter-meta-row {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px; margin-top: -12px; margin-bottom: 20px;
}
.chapter-meta { font-size: 14px; color: var(--ink-faded); margin: 0; }
.chapter-jump { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-faded); }
.chapter-jump select {
  font-family: var(--font-ui); font-size: 14px; padding: 4px 8px;
  border: 1.5px solid var(--rule); border-radius: 8px;
  background: var(--white); color: var(--ink);
}

/* --- End-of-chapter acknowledgment: one quiet sentence, not a badge
   or a checkmark — matches the site's understated tone. --- */
.chapter-complete {
  font-style: italic; color: var(--ink-faded); font-size: 15px;
  margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--rule);
}

/* --- Inline segmented toggles above the chapter text (Lines/Flowing,
   Normal/Focus) — surfaced here rather than buried in the Display
   panel. .chapter-toggles holds one or more .layout-toggle groups. */
.chapter-toggles {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px;
}
.layout-toggle {
  display: inline-flex; gap: 2px; margin: 0;
  border: 1.5px solid var(--rule); border-radius: 10px; padding: 3px;
  background: var(--paper-warm);
}
.layout-toggle__btn {
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  padding: 6px 14px; border: none; border-radius: 7px;
  background: none; color: var(--ink-soft);
}
.layout-toggle__btn.is-active { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(26,23,20,0.12); }
.layout-toggle__btn:hover:not(.is-active) { color: var(--ink); }

/* --- Focus mode: hides surrounding chrome so only the passage,
   the exit control, and the reading actions remain. The toggle that
   turns it on lives inside .chapter-toggles, which is NOT hidden here,
   so it doubles as the exit control once focus mode is on. */
[data-fs-focus="on"] .site-header,
[data-fs-focus="on"] .tab-bar,
[data-fs-focus="on"] .chapter-nav,
[data-fs-focus="on"] .trans-switch,
[data-fs-focus="on"] .site-footer { display: none !important; }
[data-fs-focus="on"] body { padding-bottom: 0; }

/* Floating exit bar — pinned to bottom center, only visible in focus mode.
   This is the obvious exit. The Normal/Focus toggle in .chapter-toggles
   also still works, but this is what a disoriented reader will find. */
.focus-exit { display: none; }
[data-fs-focus="on"] .focus-exit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 300; padding: 10px 22px; border-radius: 24px;
  background: var(--ink); color: var(--paper); font-family: var(--font-ui);
  font-size: 14px; font-weight: 600; border: none;
  box-shadow: 0 4px 16px rgba(26,23,20,0.25);
  cursor: pointer; opacity: 0.92;
  transition: opacity 0.15s;
}
[data-fs-focus="on"] .focus-exit:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-fs-focus="on"] .focus-exit { transition: none; }
}

/* --- Reading settings panel --- */
.prefs-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(26, 23, 20, 0.4);
  display: flex; align-items: flex-end; justify-content: center;
}
.prefs-overlay[hidden] { display: none; }
.prefs-panel {
  background: var(--paper); width: 100%; max-width: 32rem;
  border-radius: 20px 20px 0 0; padding: 20px 20px calc(24px + env(safe-area-inset-bottom));
  max-height: 88vh; overflow-y: auto;
  box-shadow: 0 -8px 40px rgba(26, 23, 20, 0.18);
}
@media (min-width: 768px) {
  .prefs-overlay { align-items: center; }
  .prefs-panel { border-radius: 20px; }
}
.prefs-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.prefs-title { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.prefs-close {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  border: none; background: var(--paper-warm); color: var(--ink);
}
.prefs-close:hover { background: var(--paper-deep); }
.prefs-row { margin-bottom: 20px; }
.prefs-label {
  font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 10px;
}
.prefs-choices {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px;
}
.prefs-choice {
  min-height: 52px; padding: 12px 8px;
  border: 1.5px solid var(--rule); border-radius: 12px;
  background: var(--white); color: var(--ink);
  font-size: 15px; font-weight: 600; line-height: 1.2;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.prefs-choice:hover { border-color: var(--ink-soft); }
.prefs-choice.is-active {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.prefs-reset {
  width: 100%; min-height: 48px; margin-top: 4px;
  border: none; background: none; color: var(--gold);
  font-size: 15px; font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px;
}
.prefs-reset:hover { color: var(--ink); }

/* --- Desktop --- */
@media (min-width: 768px) {
  .site-nav { display: flex; font-size: 14px; gap: 24px; }
  .chapter-title { font-size: 32px; }
  .chapter-foot__nav a { padding: 18px 20px; }
  .chapter-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
}

/* --- Print --- */
@media print {
  .site-header, .tab-bar, .site-footer,
  .chapter-nav, .chapter-actions, .chapter-foot__nav,
  .trans-switch, .tradition-stripe { display: none; }
  .reading-column { max-width: none; padding: 0; }
  .chapter-text { font-size: 12pt; line-height: 1.6; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Body padding for tab bar on mobile */
body { padding-bottom: 72px; }
@media (min-width: 768px) { body { padding-bottom: 0; } }

/* ==========================================================
   Parables
   Organized by theme rather than book order, because a person
   looking for the Prodigal Son is not looking for "Luke 15."
   ========================================================== */

/* --- Filter --- */
.parable-filter { margin-bottom: 28px; }
.parable-filter__input {
  width: 100%; font-family: var(--font-ui); font-size: 16px;
  padding: 13px 16px; border: 1.5px solid var(--rule);
  border-radius: var(--radius); background: var(--white); color: var(--ink);
}
.parable-filter__input::placeholder { color: var(--ink-hint); }
.parable-filter__input:focus { outline: none; border-color: var(--gold); }
.parable-filter__count {
  font-size: 14px; color: var(--ink-faded); margin-top: 8px; min-height: 1em;
}

/* --- Theme sections on the index --- */
.parable-theme { margin-bottom: 36px; }
.parable-theme[hidden] { display: none; }
.parable-theme__head {
  margin-bottom: 14px; padding-left: 12px;
  border-left: 3px solid var(--rowc, var(--gold));
}
.parable-theme__title {
  font-size: 19px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink); margin-bottom: 3px;
}
.parable-theme__blurb {
  font-family: var(--font-body); font-style: italic;
  font-size: 15px; line-height: 1.5; color: var(--ink-faded);
  font-optical-sizing: auto;
}

/* Reference line inside a parable row — quiet, last thing you read */
.parable-row__ref {
  display: block; font-size: 14px; font-weight: 600;
  color: var(--ink-hint); margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.parable-empty {
  font-family: var(--font-body); font-size: 16px; color: var(--ink-faded);
  text-align: center; padding: 32px 20px;
}
.parable-empty[hidden] { display: none; }

/* --- Individual parable page --- */
.parable-head { padding: 20px 0 8px; }
.parable-head__theme {
  font-family: var(--font-ui); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--rowc, var(--gold)); margin-bottom: 8px;
}
.parable-title {
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.15; margin-bottom: 8px;
}
.parable-also {
  font-size: 14px; color: var(--ink-faded); margin-bottom: 12px;
}
.parable-line {
  font-family: var(--font-body); font-size: 18px; line-height: 1.6;
  color: var(--ink-soft); font-optical-sizing: auto;
}

/* The hinge. Deliberately not styled as a pull quote or a sermon box —
   it is a margin note, the kind a pastor writes in their own Bible. */
.parable-turn {
  margin: 24px 0 28px; padding: 16px 20px;
  background: var(--paper-warm); border-radius: var(--radius-sm);
  border-left: 3px solid var(--rowc, var(--gold));
  max-width: 36rem;
}
.parable-turn__label {
  font-family: var(--font-ui); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--rowc, var(--gold)); margin-bottom: 6px;
}
.parable-turn p {
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  color: var(--ink-soft); font-optical-sizing: auto;
}

/* --- The passage itself --- */
.parable-passage { margin-bottom: 32px; }
.parable-passage__ref {
  font-family: var(--font-ui); font-size: 14px; font-weight: 700;
  color: var(--gold); margin-bottom: 14px;
}
.parable-passage__ref a { text-decoration: none; }
.parable-passage__ref a:hover { text-decoration: underline; }
.parable-passage__trans {
  font-size: 14px; color: var(--ink-faded); margin-top: 16px;
  max-width: 36rem;
}
.parable-passage__trans a { color: var(--gold); text-decoration: none; font-weight: 600; }
.parable-passage__trans a:hover { text-decoration: underline; }

/* --- Parallel accounts --- */
.parable-parallels {
  margin: 32px 0; padding-top: 24px;
  border-top: 1px solid var(--rule); max-width: 36rem;
}
.parable-parallels__heading {
  font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 6px;
}
.parable-parallels__note {
  font-family: var(--font-body); font-style: italic; font-size: 15px;
  line-height: 1.55; color: var(--ink-faded); margin-bottom: 16px;
  font-optical-sizing: auto;
}
.parable-parallel {
  border: 1.5px solid var(--rule); border-radius: var(--radius-sm);
  margin-bottom: 10px; overflow: hidden;
}
.parable-parallel summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; cursor: pointer; list-style: none;
  font-family: var(--font-ui);
}
.parable-parallel summary::-webkit-details-marker { display: none; }
.parable-parallel__ref { font-size: 15px; font-weight: 600; color: var(--ink); }
.parable-parallel__open { font-size: 14px; font-weight: 600; color: var(--gold); }
.parable-parallel[open] .parable-parallel__open { color: var(--ink-faded); }
.parable-parallel[open] summary { border-bottom: 1px solid var(--rule); }
.parable-parallel .chapter-text { padding: 16px; font-size: 18px; }
.parable-parallel .parable-passage__trans { padding: 0 16px 16px; margin-top: 0; }

@media (min-width: 768px) {
  .parable-title { font-size: 34px; }
}

/* ==========================================================
   Keyboard shortcuts, help overlay, and the first-visit tip.
   These exist because everything built into this site so far
   (focus mode, swipe, jump-to-verse, dark mode) was invisible
   to a first-time user. This is the discoverability layer.
   ========================================================== */

.shortcuts-btn {
  display: none; /* desktop only — mobile has no keyboard */
  align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--rule); background: none;
  color: var(--ink-faded); font-family: var(--font-ui);
  font-size: 14px; font-weight: 700; cursor: pointer; flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}
.shortcuts-btn:hover { border-color: var(--gold); color: var(--gold); }
@media (min-width: 768px) {
  .shortcuts-btn { display: inline-flex; }
}

.shortcuts-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26, 23, 20, 0.4); padding: 20px;
}
.shortcuts-modal[hidden] { display: none; }
.shortcuts-modal__card {
  background: var(--paper); border-radius: var(--radius);
  border: 1px solid var(--rule); padding: 24px;
  max-width: 380px; width: 100%;
  box-shadow: 0 12px 32px rgba(26, 23, 20, 0.2);
}
.shortcuts-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.shortcuts-modal__head h2 { font-size: 18px; font-weight: 700; }
.shortcuts-modal__head button {
  background: none; border: none; font-size: 22px; line-height: 1;
  color: var(--ink-faded); cursor: pointer; padding: 4px 8px;
}
.shortcuts-modal__head button:hover { color: var(--ink); }
.shortcuts-list > div {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--rule-soft);
  font-size: 14px;
}
.shortcuts-list > div:last-child { border-bottom: none; }
.shortcuts-list dt {
  font-family: var(--font-ui); font-weight: 700; color: var(--ink);
  background: var(--paper-warm); padding: 3px 9px; border-radius: 6px;
  border: 1px solid var(--rule); min-width: 20px; text-align: center;
}
.shortcuts-list dd { color: var(--ink-faded); }

/* First-visit chapter navigation tip */
.nav-tip {
  position: fixed; bottom: 76px; left: 50%; transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-ui); font-size: 14px;
  padding: 10px 10px 10px 16px; border-radius: 24px;
  box-shadow: 0 4px 16px rgba(26, 23, 20, 0.25);
  max-width: calc(100vw - 40px);
}
.nav-tip[hidden] { display: none; }
.nav-tip button {
  background: none; border: none; color: var(--paper); opacity: 0.7;
  font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px;
  flex-shrink: 0;
}
.nav-tip button:hover { opacity: 1; }
@media (min-width: 768px) {
  .nav-tip { bottom: 24px; }
}


/* --- Row icons: a visual anchor at the lead of a bookrow, for
   recognition-based scanning. Large enough to find by shape,
   full opacity, vertically centered with the first line of text. --- */
.bookrow__icon {
  width: 32px; height: 32px; flex-shrink: 0; margin-right: 14px;
  color: var(--rowc, var(--gold));
  align-self: center;
}
.bookrow__icon svg { width: 100%; height: 100%; }

/* ==========================================================
   Verse disambiguation page (/verse/[chapter]-[verse]/)
   Built for a bare "3:22"-style search: honest about ambiguity,
   canonical-first match shown in full, everything else listed
   plainly below rather than guessed away.
   ========================================================== */
.verse-disambig-head { padding: 20px 0 8px; }
.verse-disambig-head__label {
  font-family: var(--font-body); font-size: 34px; font-weight: 400;
  letter-spacing: -0.02em; color: var(--ink); font-optical-sizing: auto;
}
.verse-disambig-head__note {
  font-size: 15px; color: var(--ink-faded); margin-top: 10px; line-height: 1.55;
  max-width: 36rem;
}

.verse-disambig-primary {
  margin: 24px 0 32px; padding: 22px 24px;
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--card-shadow); max-width: 36rem;
}
.verse-disambig-primary__ref {
  font-family: var(--font-ui); font-size: 15px; font-weight: 700;
  color: var(--gold); text-decoration: none;
}
.verse-disambig-primary__ref:hover { text-decoration: underline; }
.verse-disambig-primary__text {
  display: block; font-family: var(--font-body); font-size: 20px;
  line-height: 1.6; color: var(--ink); margin: 14px 0;
  font-optical-sizing: auto;
}
.verse-disambig-primary__more {
  font-size: 14px; font-weight: 600; color: var(--gold); text-decoration: none;
}
.verse-disambig-primary__more:hover { text-decoration: underline; }

.verse-disambig-rest { margin-bottom: 32px; }
.verse-disambig-rest__heading {
  font-family: var(--font-body); font-size: 19px; font-weight: 400;
  color: var(--ink); letter-spacing: -0.01em; margin-bottom: 14px;
  font-optical-sizing: auto;
}


/* ==========================================================
   Scene Design System v1 — layer
   Loaded last so it refines the components above without renaming
   anything the templates or scripts depend on.
   ========================================================== */

/* --- White theme (reader-selectable) --- */
:root[data-fs-theme="white"] {
  --paper:      #FFFFFF;
  --paper-warm: #F5F5F7;
  --paper-deep: #EBEBEF;
  --ink:        #1E1F24;
  --ink-soft:   #3A3C44;
  --ink-faded:  #5C5E66;
  --ink-hint:   #6B6D75;
  --rule:       #E2E2E7;
  --rule-soft:  #EEEEF1;
  --gold:       #2F4DA0;
  --gold-deep:  #243C80;
  --gold-wash:  #E7EBF6;
  --white:      #FFFFFF;
  --highlight:  #FCEFB4;
  --card-shadow:       0 0 0 1px rgba(30,31,36,.10), 0 1px 2px rgba(30,31,36,.04);
  --card-shadow-hover: 0 0 0 1px rgba(30,31,36,.16), 0 3px 10px rgba(30,31,36,.08);
}

body { letter-spacing: 0.005em; }

/* --- App shell: header --- */
.site-header {
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  padding-top: env(safe-area-inset-top);
}
.site-header__inner { max-width: 78rem; margin: 0 auto; padding: 10px 20px; gap: 12px; }
/* Desktop: header padding matches app container */
@media (min-width: 900px) { .site-header__inner { padding: 14px 48px; } }
.site-mark__icon { color: var(--gold); }
.site-mark__text { font-weight: 800; font-size: 18px; letter-spacing: -0.03em; }
.site-nav { margin-left: auto; }
@media (min-width: 900px) { .site-nav { gap: 8px; } }
.site-nav a { font-weight: 700; color: var(--ink-faded); padding: 6px 10px; border-radius: 8px; }
.site-nav a:hover { color: var(--ink); background: var(--paper-warm); }
.site-nav a[aria-current="page"] { color: var(--gold-deep); background: var(--gold-wash); }
.header-actions { display: flex; align-items: center; gap: 4px; }
@media (min-width: 900px) { .header-actions { gap: 8px; } }
.icon-btn, .theme-toggle, .shortcuts-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  border: 0; background: transparent; color: var(--ink-soft);
  font-family: var(--font-ui); font-weight: 800; font-size: 15px;
  text-decoration: none; cursor: pointer; flex-shrink: 0;
  transition: background .15s, color .15s;
}
.icon-btn:hover, .theme-toggle:hover, .shortcuts-btn:hover { background: var(--paper-warm); color: var(--ink); border: 0; }
.icon-btn svg { width: 20px; height: 20px; }
.theme-toggle svg { width: 18px; height: 18px; }
.icon-btn--display { width: auto; padding: 0 12px; font-family: var(--font-ui); font-size: 14px; font-weight: 600; border-radius: 999px; }
.shortcuts-btn { display: none; }
@media (min-width: 768px) { .shortcuts-btn { display: inline-flex; } }

/* --- App shell: tab bar (four tabs) --- */
.tab-bar {
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid var(--rule);
  padding: 6px 8px calc(4px + env(safe-area-inset-bottom));
}
.tab-bar__btn {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  color: var(--ink-hint); gap: 3px; padding: 4px 2px 2px; min-height: 48px;
  justify-content: center;
}
.tab-bar__btn svg { width: 24px; height: 24px; }
.tab-bar__btn[aria-current="page"] { color: var(--gold); }
body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { body { padding-bottom: 0; } }

/* --- Footer --- */
.site-footer { background: var(--paper-warm); font-family: var(--font-ui); }
.hfa-heart { color: var(--gold-leaf); }
.site-footer__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 12px; font-weight: 700; }
.site-footer__links a { text-decoration: none; color: var(--ink-soft); }
.site-footer__links a:hover { color: var(--gold); }

/* --- Labels: sentence case, no shouting --- */
.chapter-context__label,
.keep-reading__heading,
.section-label,
.parable-head [class*="label"],
.book-section-label {
  text-transform: none; letter-spacing: 0;
}
.chapter-context__label { color: var(--ink-faded); font-size: 14px; }
.keep-reading__heading { font-size: 15px; color: var(--ink); }

/* --- Page titles --- */
.page-title, .book-title, .parable-title { font-family: var(--font-ui); font-weight: 800; letter-spacing: -0.025em; }

/* --- Chapter reader --- */
.chapter-nav a { font-family: var(--font-ui); font-weight: 700; color: var(--gold); }
.chapter-nav a:hover { color: var(--gold-deep); }
.trans-switch__btn { border: 0; background: var(--paper-warm); color: var(--ink-soft); padding: 6px 12px; border-radius: 8px; font-weight: 700; }
.trans-switch__btn:hover { background: var(--paper-deep); color: var(--ink); }
.trans-switch__btn--current { background: var(--gold-wash); color: var(--gold-deep); }
.chapter-translation-tag { color: var(--ink-faded); font-weight: 700; }
.chapter-title { font-family: var(--font-ui); font-weight: 800; letter-spacing: -0.03em; font-size: 28px; line-height: 1.15; }
@media (min-width: 768px) { .chapter-title { font-size: 34px; } }
.reading-settings-btn { border: 0; background: var(--paper-warm); color: var(--ink); border-radius: 12px; font-weight: 700; min-height: 40px; }
.reading-settings-btn:hover { background: var(--paper-deep); color: var(--ink); border: 0; }

/* Book intro: hairline and label, no tinted slab */
.chapter-context {
  background: none; border-left: 2px solid var(--rule); border-radius: 0;
  padding: 2px 0 2px 16px; font-size: 16px; line-height: 1.6;
}

/* Scripture text: left-aligned, no hyphenation, comfortable measure */
.chapter-text {
  font-family: var(--font-body);
  font-size: 20px; line-height: 1.7; max-width: 34em;
  text-align: left; hyphens: manual; -webkit-hyphens: manual;
  word-spacing: 0.04em; letter-spacing: 0.005em;
}
.verse__num { color: var(--ink-hint); font-weight: 700; font-size: 15px; }
.verse__num:hover { color: var(--gold); }
.verse--highlight, .verse:target { background: var(--highlight); }

/* Italics are harder for many dyslexic readers: use upright text */
.chapter-complete, .hcard__sub--italic, .parable-line { font-style: normal; }
.chapter-complete { font-family: var(--font-ui); font-weight: 700; color: var(--ink-faded); }

/* Layout toggles and Display panel choices */
.layout-toggle__btn[aria-pressed="true"], .layout-toggle__btn.is-active,
.prefs-choice.is-active {
  background: var(--gold-wash); color: var(--gold-deep); border-color: var(--gold);
}
.prefs-panel { font-family: var(--font-ui); }
.prefs-title { font-weight: 800; letter-spacing: -0.02em; }

/* One filled accent per screen: Listen */
.action-btn { font-family: var(--font-ui); font-weight: 700; border: 0; background: var(--paper-warm); }
.action-btn:hover { background: var(--paper-deep); border: 0; }
.action-btn:first-child { background: var(--gold); color: var(--on-gold); }
.action-btn:first-child:hover { background: var(--gold-deep); }

.chapter-foot__nav a, .chapter-foot__nav span { border: 0; background: var(--white); box-shadow: var(--card-shadow); }
.chapter-foot__nav a:hover { box-shadow: var(--card-shadow-hover); border: 0; }
.chapter-foot__nav span:empty { background: none; box-shadow: none; }
.chapter-foot__nav .label { font-family: var(--font-ui); font-weight: 800; }
.chapter-foot__nav .arrow { color: var(--gold); font-weight: 700; }

/* Reading font options */
[data-fs-font="literata"] .chapter-text,
[data-fs-font="literata"] .passage__verse,
[data-fs-font="literata"] .search-result__text { font-family: var(--font-book); }
[data-fs-font="lexend"] .chapter-text,
[data-fs-font="lexend"] .passage__verse,
[data-fs-font="lexend"] .search-result__text { font-family: 'Lexend', var(--font-body); }

/* --- Stories (Scene by Scene) index --- */
/* stories-page: old 44rem removed, see brand section */
.stories-hero { padding: 28px 0 8px; }
.stories-eyebrow { font-size: 14px; font-weight: 700; color: var(--gold); }
.stories-title { font-size: clamp(28px, 6vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin: 6px 0 10px; }
.stories-lede { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--ink-soft); max-width: 34em; }
.stories-section { margin-top: 36px; }
.stories-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.stories-section__title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.stories-section__link { font-size: 14px; font-weight: 700; color: var(--gold); text-decoration: none; }
.story-list { display: flex; flex-direction: column; gap: 10px; }
.story-row {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 14px;
  background: var(--white); box-shadow: var(--card-shadow);
  text-decoration: none; color: inherit; transition: box-shadow .2s ease;
}
a.story-row:hover { box-shadow: var(--card-shadow-hover); }
.story-row__body { flex: 1; min-width: 0; }
.story-row__name { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.story-row__desc { font-family: var(--font-body); font-size: 15px; color: var(--ink-faded); line-height: 1.5; margin-top: 2px; }
.story-row__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--ink-hint); }
.badge { display: inline-block; font-size: 14px; font-weight: 700; padding: 2px 9px; border-radius: 7px; background: var(--gold-wash); color: var(--gold-deep); }
.badge--quiet { background: var(--paper-warm); color: var(--ink-faded); }
.story-row__chev { color: var(--ink-hint); flex-shrink: 0; }
.story-row--soon { box-shadow: none; background: var(--paper-warm); }

/* Calm header: the thick brand stripe is replaced by the header hairline */
.tradition-stripe { display: none; }

/* One display control per screen: chapter pages keep their labeled
   "Display" button, so the header "Aa" steps aside there. */
/* Display now always lives in the header, so the header never shifts between pages. */

/* Night: keep the frosted header opaque enough that text never shows through */
.site-header, .tab-bar { background: color-mix(in srgb, var(--paper) 97%, transparent); }

/* Home hero in the app voice */
.home-hero__headline { font-family: var(--font-ui); font-weight: 800; letter-spacing: -0.035em; }

/* Upright text everywhere readers read (italics are harder for many dyslexic readers) */
.hero-primary__sub, .passage__ref, .parable-theme__title, .parable-parallels__heading { font-style: normal; }

/* ==========================================================
   Scene by Scene story page
   ========================================================== */
.story-page { max-width: 40rem; margin: 0 auto; padding: 0 20px 56px; }
.story-crumb { padding: 14px 0 0; }
.story-crumb a { font-weight: 700; font-size: 14px; color: var(--gold); text-decoration: none; }
.story-head { padding: 18px 0 6px; }
.story-eyebrow { font-size: 14px; font-weight: 700; color: var(--ink-faded); }
.story-title { font-size: clamp(32px, 7vw, 44px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; margin: 6px 0 12px; }
.story-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 14px; font-weight: 700; color: var(--ink-hint); }
.story-preview-note { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--ink-faded); background: var(--paper-warm); border-radius: 10px; padding: 10px 14px; }

.story-note { margin: 18px 0 4px; padding: 14px 16px; border-radius: 12px; background: var(--paper-warm); }
.story-note__label { display: block; font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.story-note p { font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--ink-soft); }

.story-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 8px; }
.story-tools .action-btn { background: var(--gold); color: var(--on-gold); }
.story-tools .action-btn:hover { background: var(--gold-deep); }
.story-tools .reading-settings-btn { margin-top: 0; }
.story-tools__note { flex-basis: 100%; font-size: 14px; color: var(--ink-hint); }

/* Zones */
.zone { margin-top: 28px; border-top: 1px solid var(--rule); }
.zone__head {
  display: flex; align-items: center; gap: 14px; padding: 20px 0 6px;
  font-family: var(--font-ui); list-style: none; cursor: default;
}
details.zone > summary { cursor: pointer; padding-bottom: 20px; }
details.zone > summary::-webkit-details-marker { display: none; }
details.zone[open] > summary { padding-bottom: 6px; }
.zone__num {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold-wash); color: var(--gold-deep); font-weight: 800; font-size: 16px;
}
.zone__text { flex: 1; display: flex; flex-direction: column; }
.zone__title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); line-height: 1.2; }
.zone__q { font-size: 14px; font-weight: 700; color: var(--ink-hint); }
.zone__chev { flex: none; color: var(--gold); transition: transform .2s ease; }
details.zone[open] .zone__chev { transform: rotate(180deg); }
details.zone > summary:hover .zone__title { color: var(--gold-deep); }
details.zone > summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 8px; }

/* Boxes */
.story-box { margin-top: 26px; }
.story-box__title { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; letter-spacing: -0.015em; margin-bottom: 12px; color: var(--ink); }
.story-box__emoji { font-size: 18px; line-height: 1; }
.story-box p, .story-box li { font-family: var(--font-body); font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.story-box p + p { margin-top: 12px; }
.story-box strong { color: var(--ink); font-weight: 700; }
.story-box em { font-style: normal; }
.story-label { font-family: var(--font-ui) !important; font-size: 14px !important; font-weight: 800; color: var(--ink-faded) !important; margin: 14px 0 6px !important; }
.story-label strong { color: inherit; }
.story-list-plain { padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.story-cast { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.story-cast li { padding: 10px 14px; background: var(--white); border-radius: 12px; box-shadow: var(--card-shadow); font-size: 16px; }

/* Before the Story: each point on its own card-free row with a hairline */
.story-box--before-the-story p { padding-left: 14px; border-left: 2px solid var(--rule); }

/* Map: tappable scene list */
.story-table-wrap { overflow-x: auto; }
.story-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.story-table th { text-align: left; font-family: var(--font-ui); font-size: 14px; font-weight: 800; color: var(--ink-faded); padding: 8px 10px; border-bottom: 1px solid var(--rule); }
.story-table td { font-family: var(--font-body); padding: 10px; border-bottom: 1px solid var(--rule-soft); color: var(--ink-soft); vertical-align: top; line-height: 1.5; }
.story-table td:first-child { font-family: var(--font-ui); font-weight: 700; color: var(--ink); }
.story-table--map td:first-child a { color: var(--gold); text-decoration: none; }
.story-table--map td:first-child a:hover { text-decoration: underline; text-underline-offset: 3px; }
.story-table--map td:nth-child(2) { font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--ink-hint); white-space: nowrap; }
@media (max-width: 600px) {
  .story-table thead { display: none; }
  .story-table, .story-table tbody, .story-table tr, .story-table td { display: block; width: 100%; }
  .story-table tr { padding: 12px 14px; margin-bottom: 8px; background: var(--white); border-radius: 12px; box-shadow: var(--card-shadow); }
  .story-table td { border: 0; padding: 2px 0; }
  .story-table--map td:nth-child(2) { order: -1; }
}

/* Retelling: the reading surface */
.story-text { max-width: 34em; }
.story-text p { font-size: inherit; line-height: inherit; color: var(--ink); margin: 0 0 1em; }
.story-text p + p { margin-top: 0; }
.story-scene { display: flex; flex-direction: column; gap: 2px; margin: 36px 0 12px; scroll-margin-top: 88px; font-family: var(--font-ui); }
.story-scene:first-child { margin-top: 8px; }
.story-scene__num { font-size: 14px; font-weight: 700; color: var(--ink-hint); }
.story-scene__title { font-size: 1.2em; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); line-height: 1.25; }
.story-imagine { margin: 1.6em 0; padding: 2px 0 2px 16px; border-left: 2px solid var(--rule); }
.story-imagine__label { display: block; font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--ink-faded); margin-bottom: 4px; }
.story-imagine__label strong { color: inherit; }
.story-imagine p { color: var(--ink-faded) !important; margin: 0 !important; }

/* Hymn and other quotes */
.story-quote { margin: 12px 0; padding: 14px 18px; background: var(--paper-warm); border-radius: 12px; }
.story-quote__line { display: block; font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--ink); }
.story-quote__line em { font-style: normal; }

/* Read It */
.story-passage { display: grid; gap: 10px; }
@media (min-width: 560px) { .story-passage { grid-template-columns: 1fr 1fr; } }
.story-passage__link { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 12px; background: var(--white); box-shadow: var(--card-shadow); text-decoration: none; transition: box-shadow .2s ease; }
.story-passage__link:hover { box-shadow: var(--card-shadow-hover); }
.story-passage__title { font-family: var(--font-ui); font-weight: 800; color: var(--gold); }
.story-passage__sub { font-family: var(--font-ui); font-size: 14px; color: var(--ink-hint); }

/* Good News gets a quiet emphasis */
.story-box--good-news { padding: 18px 18px 20px; border-radius: 14px; background: var(--white); box-shadow: var(--card-shadow); }

/* Big Idea */
.big-idea { margin: 36px 0 8px; padding: 24px 22px; border-radius: 16px; background: var(--gold-wash); }
.big-idea__label { font-size: 14px; font-weight: 800; color: var(--gold-deep); margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.big-idea__text { font-family: var(--font-ui); font-size: clamp(20px, 4.6vw, 24px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; color: var(--ink); }

.story-care { margin: 20px 0 8px; font-size: 14px; color: var(--ink-faded); }

.story-foot { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; margin: 24px 0; }
.story-foot a { display: block; padding: 14px 16px; border-radius: var(--radius); background: var(--white); box-shadow: var(--card-shadow); text-decoration: none; color: inherit; }
.story-foot a:hover { box-shadow: var(--card-shadow-hover); }
.story-foot .next { text-align: right; }
.story-foot .arrow { display: block; font-size: 14px; font-weight: 700; color: var(--gold); }
.story-foot .label { display: block; font-weight: 800; font-size: 15px; margin-top: 2px; }
.story-foot__all { text-align: center; }

.story-credit { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-faded); line-height: 1.6; }
.story-credit a { color: var(--ink-soft); }
.story-credit__verse { margin-top: 6px; color: var(--ink-soft); }

[data-fs-focus="on"] .story-crumb, [data-fs-focus="on"] .story-tools, [data-fs-focus="on"] .story-foot { display: none !important; }

@media print {
  .story-tools, .story-crumb, .story-foot, .chapter-actions, .reading-progress { display: none !important; }
  details.zone > summary .zone__chev { display: none; }
  .story-box--good-news, .story-cast li, .story-passage__link { box-shadow: none; border: 1px solid #ccc; }
}
@media (prefers-reduced-motion: reduce) { .zone__chev { transition: none; } }

/* A full bold sentence (like the last line of Good News) is the key line */
.story-box .story-key { font-family: var(--font-ui); font-size: 19px; line-height: 1.35; margin-top: 16px; color: var(--ink); }
.story-box .story-key strong { font-weight: 800; }


/* ==========================================================
   Design system v1 audit fixes (September 2026)
   ========================================================== */

/* Rule: lapis marks what you can tap. Non-tappable labels use ink. */
.section-label, .book-section-label, .book-chapters-label, .hcard__tag,
.passage__ref, .stories-eyebrow, .parable-passage__ref:not(a) { color: var(--ink-faded); }

/* Rule: stories and books have no color codes. The old genre rainbow
   (orange, blue, olive, teal, rose) becomes one neutral hairline. */
[style*="--rowc"] { --rowc: var(--rule) !important; }
.bookrow--colored:hover { border-color: var(--ink-hint); }
.parable-head__theme, .parable-turn__label { color: var(--ink-faded) !important; }

/* Rule: no italics, no shouting */
.parable-theme__blurb, .passage__frame { font-style: normal; }
.parable-head__theme, .parable-turn__label { text-transform: none; letter-spacing: 0; }

/* Brand: gold leaf is the logo mark and the Big Idea marker */
.site-mark__icon { color: var(--gold-leaf); }
.zone__num { background: var(--paper-warm); color: var(--ink-soft); }
.big-idea { background: var(--white); box-shadow: var(--card-shadow); position: relative; padding-top: 30px; }
.big-idea::before { content: ""; position: absolute; top: 18px; left: 22px; width: 32px; height: 4px; border-radius: 2px; background: var(--gold-leaf); }
.big-idea__label { color: var(--ink-faded); margin-top: 6px; }

/* Type scale: scene titles 27px at the standard 20px story size */
.story-scene__title { font-size: 1.35em; }

/* ==========================================================
   Live review fixes (September 21, 2026)
   ========================================================== */

/* Leftover genre stripes: now that they're neutral, they only add a
   double edge to every card. Cards rely on their ring shadow alone. */
.bookrow--colored, .bookrow--colored:hover { border-left: 0; }
.parable-theme__head { border-left: 0; padding-left: 0; }

/* One chevron size and color everywhere, visible in every theme */
.bookrow__chev, .story-row__chev { width: 18px; height: 18px; color: var(--ink-hint); opacity: 1; flex-shrink: 0; }
.bookrow:hover .bookrow__chev { color: var(--gold); }

/* Section labels are headings, not buttons: no pill background */
.book-section-label {
  background: none; padding: 0; border-radius: 0;
  font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em;
}

/* ==========================================================
   Homepage and remaining pages (design review, September 21)
   ========================================================== */

/* Homepage: left-aligned, one primary action, three short shelves */
.home2 { max-width: 40rem; margin: 0 auto; padding: 0 20px 64px; }
.home2-hello { padding: 28px 0 18px; }
.home2-title { font-size: clamp(28px, 7vw, 40px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; color: var(--ink); }
.home2-sub { margin-top: 8px; font-size: 15px; font-weight: 700; color: var(--ink-faded); }
.home2-section { margin-top: 36px; }
.home2-note { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--ink-faded); }
.home2-sunday { margin-top: 14px; }

/* The one filled accent on the homepage */
.quick-start {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 22px; border-radius: 16px;
  background: var(--gold); color: var(--on-gold); text-decoration: none;
  transition: background .15s ease;
}
.quick-start:hover { background: var(--gold-deep); }
.quick-start:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; }
.quick-start__body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.quick-start__label { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.quick-start__sub { font-family: var(--font-body); font-size: 15px; line-height: 1.45; opacity: .9; }
.quick-start__chev { flex: none; }
.hero-search { margin-top: 12px; }

/* Verse for the moment: a 2 by 2 grid of short choices */
.need-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.need-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 16px; border-radius: 14px; background: var(--white); box-shadow: var(--card-shadow); text-decoration: none; transition: box-shadow .2s ease; }
.need-tile:hover { box-shadow: var(--card-shadow-hover); }
.need-tile__name { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); line-height: 1.25; }
.need-tile__desc { font-family: var(--font-body); font-size: 13.5px; line-height: 1.4; color: var(--ink-faded); }

/* Passages: compact list rows */
.passage-rows { display: flex; flex-direction: column; border-radius: 14px; background: var(--white); box-shadow: var(--card-shadow); overflow: hidden; }
.passage-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "ref chev" "line chev"; align-items: center; column-gap: 12px; padding: 13px 16px; text-decoration: none; border-top: 1px solid var(--rule-soft); }
.passage-row:first-child { border-top: 0; }
.passage-row:hover { background: var(--paper-warm); }
.passage-row__ref { grid-area: ref; font-size: 16px; font-weight: 800; color: var(--ink); }
.passage-row__line { grid-area: line; font-family: var(--font-body); font-size: 14.5px; color: var(--ink-faded); }
.passage-row .story-row__chev { grid-area: chev; }

/* Bible index: jump to a section instead of scrolling past 66 books */
.jump-bar {
  position: sticky; top: calc(61px + env(safe-area-inset-top)); z-index: 20;
  display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; margin: 4px 0 8px;
  background: var(--paper); scrollbar-width: none;
}
.jump-bar::-webkit-scrollbar { display: none; }
.jump-bar a { flex: none; font-size: 14px; font-weight: 700; color: var(--ink-soft); background: var(--paper-warm); padding: 8px 14px; border-radius: 10px; text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; }
.jump-bar a:hover { background: var(--gold-wash); color: var(--gold-deep); }
.book-section { scroll-margin-top: 130px; }

/* Verse lookup: headings in the app voice */
.verse-disambig-head__label { font-family: var(--font-ui); font-weight: 800; letter-spacing: -0.03em; }
.verse-disambig-rest__heading { font-family: var(--font-ui); font-weight: 800; letter-spacing: -0.02em; }
.hcard .story-row__chev { flex: none; }

/* Solid header and tab bar: no text ghosting through while scrolling */
.site-header, .tab-bar { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
.stories-section__link { white-space: nowrap; flex: none; }

/* Section shortcuts read as a toolbar, edge to edge with a hairline */
.jump-bar { margin: 4px -20px 12px; padding: 10px 20px; border-bottom: 1px solid var(--rule); }

/* ==========================================================
   Paged reading (Display → Reading → Pages)
   ========================================================== */
.pg{position:fixed;inset:0;z-index:1200;background:var(--paper);display:flex;flex-direction:column}
.pg__bar{flex:none;background:var(--paper);transition:transform .3s ease}
.pg__bar--top{border-bottom:1px solid var(--rule);padding-top:env(safe-area-inset-top,0px)}
.pg__bar--bottom{border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom,0px)}
.pg[data-chrome="off"] .pg__bar--top{transform:translateY(-110%);position:absolute;left:0;right:0;top:0}
.pg[data-chrome="off"] .pg__bar--bottom{transform:translateY(110%);position:absolute;left:0;right:0;bottom:0}
.pg__bar-in{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:10px}
.pg__crumb{display:flex;flex-direction:column;min-width:0}
.pg__crumb-title{font-family:var(--font-ui);font-size:15px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg__crumb-sub{font-family:var(--font-ui);font-size: 14px;font-weight:700;color:var(--ink-hint)}
.pg__spacer{flex:1}
.pg__icon{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;border:0;background:none;font-family:var(--font-ui);font-weight:800;font-size:15px;color:var(--ink-soft);cursor:pointer}
.pg__icon:hover{background:var(--paper-warm);color:var(--ink)}
.pg__done{min-height:44px;padding:0 16px;border-radius:12px;border:0;background:var(--gold);color:var(--on-gold);font-family:var(--font-ui);font-weight:800;font-size:14px;cursor:pointer}
.pg__done:hover{background:var(--gold-deep)}
.pg__stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.pg__book{position:relative;display:flex;perspective:2400px}
.pg__page{position:relative;background:var(--white);border-radius:4px;overflow:hidden}
.pg[data-spread="1"] .pg__page{box-shadow:0 1px 2px rgba(0,0,0,.05),0 12px 34px rgba(0,0,0,.10)}
.pg[data-spread="1"] .pg__page--l{border-radius:10px 2px 2px 10px}
.pg[data-spread="1"] .pg__page--r{border-radius:2px 10px 10px 2px}
.pg[data-spread="1"] .pg__page--l::after,.pg[data-spread="1"] .pg__page--r::after{content:"";position:absolute;top:0;bottom:0;width:26px;pointer-events:none}
.pg[data-spread="1"] .pg__page--l::after{right:0;background:linear-gradient(to right,transparent,rgba(43,33,24,.09))}
.pg[data-spread="1"] .pg__page--r::after{left:0;background:linear-gradient(to left,transparent,rgba(43,33,24,.09))}
.pg__vp{position:absolute;inset:0;overflow:hidden}
.pg__flow{position:absolute;top:0;left:0;column-fill:auto;max-width:none}
.pg__flow .verse{break-inside:avoid-column}
.pg__folio{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-family:var(--font-ui);font-size: 14px;font-weight:700;color:var(--ink-hint)}
.pg__zone{position:absolute;top:0;bottom:0;z-index:5;border:0;background:none;cursor:pointer}
.pg__zone--prev{left:0;width:25%}
.pg__zone--next{right:0;width:45%}
.pg__nav{width:44px;height:44px;border-radius:12px;border:0;background:none;color:var(--gold);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.pg__nav svg{width:22px;height:22px}
.pg__nav:disabled{opacity:.3;cursor:default}
.pg__track{flex:1;cursor:pointer;display:flex;flex-direction:column;gap:5px;justify-content:center;min-height:40px}
.pg__rail{height:4px;border-radius:4px;background:var(--rule);overflow:hidden}
.pg__fill{height:100%;background:var(--gold);width:0;transition:width .3s ease}
.pg__label{font-family:var(--font-ui);font-size: 14px;font-weight:700;color:var(--ink-hint);text-align:center}

/* the leaf */
.pg__leaf{position:absolute;top:0;z-index:20;transform-style:preserve-3d;pointer-events:none;will-change:transform}
.pg__leaf-face{position:absolute;inset:0;overflow:hidden;background:var(--white);backface-visibility:hidden}
.pg__leaf-back{position:absolute;inset:0;overflow:hidden;background:var(--white);transform:rotateY(180deg);backface-visibility:hidden;border-radius:10px 2px 2px 10px}
.pg__leaf-backwrap{position:absolute;inset:0;overflow:hidden}
.pg__leaf-back::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to left,rgba(43,33,24,.13),transparent 50%)}
.pg__leaf-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to left,rgba(43,33,24,.22),transparent 55%);opacity:0}
.pg__leaf.is-turning .pg__leaf-shade{opacity:1;transition:opacity .5s}
.pg-out{animation:pgOut .26s cubic-bezier(.4,0,.2,1) forwards}
.pg-in{animation:pgIn .26s cubic-bezier(.4,0,.2,1) forwards}
@keyframes pgOut{to{transform:translateX(-14%);opacity:0}}
@keyframes pgIn{from{transform:translateX(14%);opacity:0}}

/* end of chapter */
.pg__end{break-inside:avoid-column;margin-top:1.4em;padding-top:1.2em;border-top:1px solid var(--rule);font-family:var(--font-ui)}
.pg__end-label{font-size: 14px;font-weight:700;color:var(--ink-hint);margin-bottom:10px}
.pg__end-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:12px;background:var(--gold);color:var(--on-gold);font-size:15px;font-weight:800;text-decoration:none}

/* first-time coach marks */
.pg__coach{position:absolute;left:50%;bottom:92px;transform:translateX(-50%) translateY(8px);z-index:40;width:min(420px,calc(100% - 32px));
  background:var(--ink);color:var(--paper);border-radius:16px;padding:16px 18px;box-shadow:0 12px 40px rgba(0,0,0,.28);opacity:0;transition:opacity .3s,transform .3s}
.pg__coach.is-on{opacity:1;transform:translateX(-50%) translateY(0)}
.pg__coach-row{font-family:var(--font-ui);font-size:14.5px;font-weight:600;line-height:1.45}
.pg__coach-row + .pg__coach-row{margin-top:8px}
.pg__coach-btn{margin-top:14px;width:100%;min-height:44px;border-radius:12px;border:0;background:var(--paper);color:var(--ink);font-family:var(--font-ui);font-weight:800;font-size:15px;cursor:pointer}

/* Display panel must sit above the reader */
.prefs-overlay{z-index:2000}
/* Paged reading hides the page behind it; keep the scroll page intact */
:root[data-fs-reading="pages"] body{overflow:hidden}
@media (prefers-reduced-motion: reduce){.pg__leaf{transition:none!important}}

/* ==========================================================
   Homepage: a map a first-time reader can take in quickly
   ========================================================== */
.section-lede { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--ink-faded); margin: -6px 0 14px; max-width: 34em; }

/* Three ways in */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 28px; }
.door { display: flex; flex-direction: column; gap: 2px; padding: 16px 14px 16px; border-radius: 14px; background: var(--white); box-shadow: var(--card-shadow); text-decoration: none; transition: box-shadow .2s ease; }
.door:hover { box-shadow: var(--card-shadow-hover); }
.door__count { font-family: var(--font-ui); font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--gold); line-height: 1.1; }
.door__name { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.door__line { font-family: var(--font-body); font-size: 14px; line-height: 1.45; color: var(--ink-faded); }
@media (max-width: 560px) { .doors { grid-template-columns: 1fr; } .door { flex-direction: row; align-items: baseline; gap: 12px; flex-wrap: wrap; } .door__count { font-size: 22px; } .door__line { flex-basis: 100%; } }

/* A retelling looks like a retelling */
.sbs-card { display: flex; align-items: center; gap: 12px; padding: 18px 18px 18px 20px; border-radius: 16px; background: var(--white); box-shadow: var(--card-shadow); text-decoration: none; color: inherit; transition: box-shadow .2s ease; }
.sbs-card:hover { box-shadow: var(--card-shadow-hover); }
.sbs-card__body { flex: 1; min-width: 0; }
.sbs-card__kicker { font-size: 14px; font-weight: 800; color: var(--gold); letter-spacing: .02em; }
.sbs-card__name { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 2px 0 4px; line-height: 1.2; }
.sbs-card__desc { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--ink-faded); }
.sbs-card__meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--ink-hint); }

.sbs-soon { padding: 18px 20px 20px; border-radius: 16px; background: var(--paper-warm); }
.sbs-soon__label { font-size: 14px; font-weight: 800; color: var(--ink-faded); margin-bottom: 10px; }
.sbs-soon__list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sbs-soon__list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
.sbs-soon__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.sbs-soon__name { font-size: 15px; font-weight: 700; color: var(--ink); }
.sbs-soon__ref { font-size: 14px; font-weight: 700; color: var(--ink-hint); white-space: nowrap; }
.sbs-soon__note { font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: var(--ink-faded); margin-top: 12px; }

/* Theme chips */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 10px; background: var(--paper-warm); font-size: 14px; font-weight: 700; color: var(--ink-soft); text-decoration: none; }
.chip:hover { background: var(--gold-wash); color: var(--gold-deep); }

/* A parable looks like a pointer into the text */
.parable-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 18px; border-radius: 14px; background: var(--white); box-shadow: var(--card-shadow); text-decoration: none; color: inherit; transition: box-shadow .2s ease; }
.parable-row:hover { box-shadow: var(--card-shadow-hover); }
.parable-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.parable-row__name { font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.parable-row__line { font-family: var(--font-body); font-size: 14px; line-height: 1.45; color: var(--ink-faded); }
.parable-row__ref { font-size: 14px; font-weight: 700; color: var(--ink-hint); white-space: nowrap; }
@media (max-width: 520px) {
  .parable-row { flex-wrap: wrap; }
  .parable-row__ref { order: 3; flex-basis: 100%; margin-top: 2px; }
}

/* Books by kind */
.kind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 720px) { .kind-grid { grid-template-columns: repeat(3, 1fr); } }
.kind { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--white); box-shadow: var(--card-shadow); text-decoration: none; transition: box-shadow .2s ease; }
.kind:hover { box-shadow: var(--card-shadow-hover); }
.kind__name { font-size: 15px; font-weight: 800; color: var(--ink); }
.kind__line { font-family: var(--font-body); font-size: 13.5px; color: var(--ink-faded); line-height: 1.4; }

/* ==========================================================
   Shelf update (September 2026)
   Bookshelf homepage, story covers, side-by-side reading,
   plain translation names, and a 14px floor for readable text.
   ========================================================== */

/* Tab labels: large enough to read without squinting */
.tab-bar__btn { font-size: 13px; }

/* --- Homepage: side-by-side sample --- */
.sbs-demo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule); border-radius: 14px; overflow: hidden;
  box-shadow: var(--card-shadow); text-decoration: none; color: inherit;
}
.sbs-demo__col { background: var(--white); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.sbs-demo__col:first-child { background: var(--paper-warm); }
.sbs-demo__tag { font-family: var(--font-ui); font-size: 14px; font-weight: 800; color: var(--gold); }
.sbs-demo__col:first-child .sbs-demo__tag { color: var(--g-narrative); }
.sbs-demo__text { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--ink); }
.sbs-demo__foot {
  grid-column: 1 / -1; background: var(--white);
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--ink-faded);
}
.sbs-demo__go { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); }
.sbs-demo:hover .sbs-demo__go { color: var(--gold-deep); }
.sbs-demo:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.home2 .hero-search { margin: 4px 0 14px; }
.home2 .home2-sunday { margin-top: 14px; }

/* --- Side by side reader --- */
.cmp-page { max-width: 78rem; margin: 0 auto; padding: 0 20px 64px; }
.cmp-head { padding: 20px 0 12px; }
.cmp-title { font-family: var(--font-ui); font-size: clamp(24px, 5vw, 32px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.cmp-lede { margin-top: 8px; max-width: 40rem; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.cmp-controls {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end;
  padding: 14px; border-radius: 14px; background: var(--paper-warm);
}
@media (max-width: 600px) { .cmp-controls { grid-template-columns: 1fr; } }
.cmp-pick { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cmp-pick__label { font-family: var(--font-ui); font-size: 14px; font-weight: 800; color: var(--ink-soft); }
.cmp-pick select, .cmp-pick input {
  width: 100%; min-height: 48px; padding: 0 12px;
  font-family: var(--font-ui); font-size: 16px; font-weight: 600; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--rule); border-radius: 10px;
}
.cmp-pick select:focus-visible, .cmp-pick input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.cmp-swap {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 0 16px; border: 0; border-radius: 10px;
  background: var(--white); color: var(--gold); box-shadow: var(--card-shadow);
  font-family: var(--font-ui); font-size: 15px; font-weight: 800; cursor: pointer;
}
.cmp-swap:hover { color: var(--gold-deep); }
.cmp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0 6px; }
.cmp-col { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; border-top: 3px solid var(--gold); }
.cmp-col--retelling { border-top-color: var(--g-narrative); }
.cmp-col__name { font-family: var(--font-ui); font-size: 16px; font-weight: 800; color: var(--ink); }
.cmp-col__note { font-size: 14px; color: var(--ink-faded); }
.cmp-row { padding: 14px 0; border-top: 1px solid var(--rule-soft); }
.cmp-row--scene { padding: 20px 0 16px; }
.cmp-row__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.cmp-row__title { font-family: var(--font-ui); font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.cmp-row__sub { font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--ink-faded); }
.cmp-row__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .cmp-row__pair { grid-template-columns: 1fr; gap: 10px; } .cmp-cols { display: none; } }
.cmp-cell {
  padding: 12px 16px 14px; border-radius: 12px; background: var(--white); box-shadow: var(--card-shadow);
  font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--ink);
}
[data-fs-size="large"] .cmp-cell { font-size: 19px; }
[data-fs-size="xlarge"] .cmp-cell { font-size: 22px; }
.cmp-cell--retelling { background: var(--paper-warm); box-shadow: inset 3px 0 0 var(--g-narrative); }
.cmp-cell__tag { display: block; margin-bottom: 4px; font-family: var(--font-ui); font-size: 14px; font-weight: 800; color: var(--gold); }
.cmp-cell--retelling .cmp-cell__tag { color: var(--g-narrative); }
.cmp-num { font-family: var(--font-ui); font-size: 0.7em; font-weight: 700; color: var(--ink-hint); margin-right: 3px; }
.cmp-retell p + p, .cmp-retell p + ul, .cmp-retell ul + p { margin-top: .7em; }
.cmp-retell ul { padding-left: 1.2em; }
.cmp-retell blockquote { margin: .7em 0; padding-left: 12px; border-left: 3px solid var(--rule); color: var(--ink-soft); }
.cmp-imagine { display: block; margin: .7em 0; padding: 10px 12px; border-radius: 8px; background: var(--gold-wash); font-size: 15px; line-height: 1.5; }
.cmp-gap { font-style: italic; font-size: 15px; color: var(--ink-faded); }
.cmp-open { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.cmp-fine { margin-top: 10px; font-size: 14px; color: var(--ink-hint); }
.cmp-foot { margin-top: 32px; }
.cmp-go { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.cmp-go .cmp-pick { flex: 1 1 200px; }
.cmp-go .cmp-pick--num { flex: 0 0 120px; }
.cmp-go .rbtn { min-height: 48px; }

/* --- Chapter reader additions --- */
.trans-switch__abbr { font-size: 12px; font-weight: 600; opacity: .7; margin-left: 2px; }
.trans-switch__btn { min-height: 36px; display: inline-flex; align-items: center; }
.trans-switch__cmp {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  padding: 0 12px; border-radius: 8px; font-family: var(--font-ui); font-size: 14px; font-weight: 800;
  color: var(--gold); background: var(--gold-wash); text-decoration: none;
}
.trans-switch__cmp:hover { color: var(--gold-deep); }
.chapter-story {
  display: flex; flex-direction: column; gap: 12px; margin: 0 0 20px; padding: 16px 18px;
  border-radius: 12px; background: var(--white); box-shadow: inset 3px 0 0 var(--g-narrative), var(--card-shadow); max-width: 36rem;
}
.chapter-story__text { display: flex; flex-direction: column; gap: 2px; }
.chapter-story__name { font-family: var(--font-ui); font-size: 16px; font-weight: 800; color: var(--ink); }
.chapter-story__line { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.chapter-story__acts { display: flex; flex-wrap: wrap; gap: 8px; }
details.chapter-context { padding: 12px 18px; }
details.chapter-context > summary { cursor: pointer; margin-bottom: 0; min-height: 28px; display: list-item; }
details.chapter-context[open] > summary { margin-bottom: 8px; }
.chapter-focus-btn { border: 1.5px solid var(--rule); background: var(--paper-warm); min-height: 40px; border-radius: 10px; }
[data-fs-focus="on"] .chapter-toggles,
[data-fs-focus="on"] .chapter-story { display: none; }

/* --- Story page additions --- */
.story-versions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.story-versions__label { font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--ink-faded); }
.story-tools__cmp { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; text-decoration: none; }
.stories-cmp { margin-top: 32px; font-size: 15px; color: var(--ink-soft); }
.stories-cmp a { color: var(--gold); font-weight: 700; }
.trans-switch__abbr { margin-left: 5px; }
@media (max-width: 480px) { .trans-switch__label { display: none; } }
.chapter-story .rbtn:first-child { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.chapter-story .rbtn:first-child:hover { background: var(--gold-deep); border-color: var(--gold-deep); }


/* ==========================================================
   Parchment & Indigo (September 2026)
   Brand system approved for neurodivergent readers and young adults.
   Lexend for anything you scan (titles, buttons, labels).
   Atkinson Hyperlegible for anything you read.
   Light parchment, one indigo, sage for the parables series.
   ========================================================== */
:root {
  --paper:      #F0EFEA;
  --paper-warm: #E6E3D8;
  --paper-deep: #DCD7C8;
  --ink:        #1C1B2E;
  --ink-soft:   #34334A;
  --ink-faded:  #48465E;
  --ink-hint:   #5E5C76;
  --rule:       #DCD7C8;
  --rule-soft:  #E6E3D8;
  --gold:       #404279;
  --gold-deep:  #2F3160;
  --gold-wash:  #E3E3EF;
  --on-gold:    #FFFFFF;
  --white:      #FAF8F3;
  --spine-story:   #404279;
  --spine-parable: #3B574B;
  --ledge:      #CFCABB;
  --card-shadow:       0 0 0 1px rgba(28,27,46,.10), 0 1px 2px rgba(28,27,46,.04);
  --card-shadow-hover: 0 0 0 1px rgba(28,27,46,.18), 0 4px 12px rgba(28,27,46,.08);
  --font-ui: 'Lexend', system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-fs-theme="light"]):not([data-fs-theme="white"]) {
    --spine-story: #9DA2E6; --spine-parable: #8DBBA4; --ledge: #33375C;
  }
}
:root[data-fs-theme="dark"] { --spine-story: #9DA2E6; --spine-parable: #8DBBA4; --ledge: #33375C; }

/* App container: one width, one padding, everywhere */
.app-container {
  max-width: 78rem; margin: 0 auto;
  padding-left: 20px; padding-right: 20px;
}
@media (min-width: 900px) {
  .app-container { padding-left: 48px; padding-right: 48px; }
}

/* No orphaned words in headings; tidy last lines in paragraphs */
h1, h2, h3, .cover__title, .cover__line, .tile__title, .tile__line { text-wrap: balance; }
p { text-wrap: pretty; }

/* --- Logo mark --- */
.site-mark__fs {
  width: 38px; height: 38px; border-radius: 9px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold); color: var(--on-gold);
}
.site-mark__text { font-family: var(--font-ui); font-weight: 600; letter-spacing: -0.025em; }

/* --- Page frame --- */
.home3 { max-width: 78rem; margin: 0 auto; padding: 0 20px 24px; }
@media (min-width: 900px) { .home3 { padding: 0 48px 24px; } }
.home3-section { margin-top: 64px; }
@media (min-width: 900px) { .home3-section { margin-top: 96px; } }
.home3-lede { margin: -8px 0 18px; max-width: 40rem; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--ink-faded); }
.stories-page { max-width: 78rem; margin: 0 auto; }

/* --- Hero --- */
.hero { display: grid; gap: 20px; padding-top: 20px; align-items: center; }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 48px; padding-top: 32px; }
  .hero--solo { grid-template-columns: minmax(0, 1fr); }
}
.hero__text { display: flex; flex-direction: column; gap: 14px; }
.hero__title {
  font-family: var(--font-ui); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1;
  font-size: clamp(32px, 8.4vw, 60px); color: var(--ink);
}
.hero__lede { max-width: 34rem; font-family: var(--font-body); font-size: clamp(17px, 2.2vw, 20px); line-height: 1.6; color: var(--ink-faded); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 6px; }
.hero-cta {
  display: inline-flex; align-items: center; min-height: 56px; padding: 0 28px; border-radius: 12px;
  background: var(--gold); color: var(--on-gold); text-decoration: none;
  font-family: var(--font-ui); font-weight: 600; font-size: 17px;
}
.hero-cta:hover { background: var(--gold-deep); }
.hero-cta:focus-visible, .hero-link:focus-visible, .hero__display:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.hero-link { font-family: var(--font-ui); font-weight: 600; font-size: 16px; color: var(--gold); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.hero-link:hover { color: var(--gold-deep); text-decoration: underline; }
.hero-hint { font-family: var(--font-body); font-size: 15px; color: var(--ink-hint); }

/* The open book */
.hero__display {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 0; text-decoration: none;
}
@media (min-width: 900px) { .hero__display { min-height: 0; padding: 0; } }
.spread {
  width: 100%; max-width: 380px; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: 6px; background: var(--white); overflow: hidden;
  box-shadow: 0 14px 32px rgba(28,27,46,.12), 0 2px 6px rgba(28,27,46,.08), inset 0 0 0 1px var(--rule);
}
.spread__page { display: flex; flex-direction: column; padding: 26px 18px 22px 22px; }
.spread__page--left { box-shadow: inset -14px 0 18px -14px rgba(28,27,46,.22); }
.spread__page--right { padding: 26px 22px 22px 18px; box-shadow: inset 14px 0 18px -14px rgba(28,27,46,.22); }
.spread__story { font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: var(--gold); }
.spread__rule { height: 1px; margin: 12px 0 16px; background: var(--gold); opacity: .25; }
.spread__scene { font-family: var(--font-ui); font-weight: 500; font-size: 14px; color: var(--ink-hint); }
.spread__title { margin-top: 4px; font-family: var(--font-ui); font-weight: 600; font-size: clamp(19px, 5vw, 24px); line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.spread__mark { height: 2px; width: 28px; margin: 14px 0; background: var(--gold); }
.spread__ref { margin-top: auto; font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--ink); }
.spread__text { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.spread__folio { margin-top: auto; padding-top: 12px; align-self: flex-end; font-family: var(--font-body); font-size: 14px; color: var(--ink-hint); }
.hero__caption { font-family: var(--font-body); font-size: 14px; color: var(--ink-hint); }

/* --- Shelves --- */
.shelf { margin-top: 48px; }
@media (min-width: 900px) { .shelf { margin-top: 56px; } }
.shelf__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.shelf__title { font-family: var(--font-ui); font-weight: 600; font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.025em; line-height: 1.2; color: var(--ink); }
.shelf__more { flex: none; font-family: var(--font-ui); font-weight: 600; font-size: 16px; color: var(--gold); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.shelf__more:hover { text-decoration: underline; }
.shelf__row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 210px; gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  margin: 0 -20px; padding: 4px 20px 0; scroll-padding-left: 20px; scrollbar-width: none;
}
.shelf__row::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
  .shelf__row { grid-auto-columns: calc((100% - 96px) / 5); gap: 24px; margin: 0; padding: 4px 0 0; scroll-padding-left: 0; }
}
.shelf__ledge { height: 10px; border-radius: 2px; background: var(--ledge); box-shadow: 0 6px 12px rgba(28,27,46,.10); }

/* --- The cover template: every zone has a fixed height --- */
.cover {
  --spine: var(--spine-story);
  scroll-snap-align: start; position: relative;
  display: flex; flex-direction: column; box-sizing: border-box;
  height: 288px; padding: 16px 16px 16px 26px;
  border-radius: 3px 12px 12px 3px; background: var(--white); color: var(--ink); text-decoration: none;
  box-shadow: inset 10px 0 0 var(--spine), inset 0 0 0 1px var(--rule), 0 6px 16px rgba(28,27,46,.10);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cover--parable { --spine: var(--spine-parable); }
.cover:hover { transform: translateY(-3px); box-shadow: inset 10px 0 0 var(--spine), inset 0 0 0 1px var(--rule), 0 10px 22px rgba(28,27,46,.14); }
.cover:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.cover__top { height: 20px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; white-space: nowrap; }
.cover__num { font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: var(--spine); }
.cover__status { font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--ink-hint); }
.cover__rule { flex: none; height: 1px; margin: 10px 0 12px; background: var(--spine); opacity: .28; }
.cover__title { flex: none; height: 50px; overflow: hidden; font-family: var(--font-ui); font-weight: 600; font-size: 18px; line-height: 25px; letter-spacing: -0.02em; color: var(--ink); }
.cover__mark { flex: none; height: 2px; width: 28px; margin: 12px 0; background: var(--spine); }
.cover__line { flex: none; height: 60px; overflow: hidden; font-family: var(--font-body); font-size: 14px; line-height: 20px; color: var(--ink-faded); }
.cover__foot { margin-top: auto; display: flex; flex-direction: column; gap: 1px; font-family: var(--font-body); font-size: 14px; line-height: 19px; font-weight: 700; }
.cover__ref { color: var(--ink); }
.cover__act { color: var(--spine); }
@media (min-width: 900px) {
  .cover { height: 300px; padding: 18px 16px 18px 26px; }
  .cover__title { height: 52px; font-size: 19px; line-height: 26px; }
}
@media (prefers-reduced-motion: reduce) { .cover, .cover:hover { transition: none; transform: none; } }

/* --- Side-by-side band --- */
.band { margin-top: 64px; background: var(--paper-warm); border-radius: 24px; }
@media (min-width: 900px) { .band { margin-top: 96px; } }
.band__inner { display: grid; gap: 28px; padding: 32px 20px; }
@media (min-width: 900px) { .band__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; padding: 56px; align-items: start; } }
.band__intro { display: flex; flex-direction: column; gap: 14px; }
.band__title { font-family: var(--font-ui); font-weight: 600; font-size: clamp(24px, 3vw, 32px); line-height: 1.2; letter-spacing: -0.025em; color: var(--ink); }
.band__lede { font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--ink-faded); }
.band__link { font-family: var(--font-ui); font-weight: 600; font-size: 16px; color: var(--gold); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.band__link:hover { text-decoration: underline; }
.band__pair { display: grid; gap: 16px; }
@media (min-width: 640px) { .band__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.pagecard {
  --spine: var(--ink-hint);
  display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; border-radius: 14px;
  background: var(--white); box-shadow: inset 4px 0 0 var(--spine), inset 0 0 0 1px var(--rule);
}
.pagecard--story { --spine: var(--spine-story); }
.pagecard__tag { font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: var(--spine); }
.pagecard__head { font-family: var(--font-ui); font-weight: 600; font-size: 18px; letter-spacing: -0.015em; color: var(--ink); }
.pagecard__text { font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--ink); }

/* --- Tiles: fixed title zone so every description starts at the same height --- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.tiles--kinds { margin-top: 16px; }
@media (min-width: 900px) { .tiles--kinds { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tile {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 20px; border-radius: 14px;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--rule); text-decoration: none; color: var(--ink);
  transition: box-shadow .2s ease;
}
.tile:hover { box-shadow: inset 0 0 0 1.5px var(--gold); }
.tile:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.tile__title { height: 72px; display: flex; align-items: flex-start; font-family: var(--font-ui); font-weight: 600; font-size: 17px; line-height: 24px; letter-spacing: -0.015em; color: var(--ink); overflow: hidden; }
.tile__line { font-family: var(--font-body); font-size: 15px; line-height: 21px; color: var(--ink-faded); }
.tile--kind .tile__title { height: 24px; }
@media (min-width: 900px) { .tiles:not(.tiles--kinds) .tile__title { height: 48px; } }
.tile--wide { margin-top: 16px; }
.tile--wide .tile__title { height: auto; }
.home3 .hero-search { margin: 0; }

/* Phones: the open book becomes one readable page, and verse tiles
   become one full-width column so every title fits on one line. */
@media (max-width: 559px) {
  .spread { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .spread__page--left { box-shadow: none; padding-bottom: 0; }
  .spread__page--left .spread__ref { margin-top: 0; }
  .spread__page--right { box-shadow: none; padding: 16px 22px 22px; }
  .spread__folio { display: none; }
  .spread__text { font-size: 16px; line-height: 1.6; }
  .tiles:not(.tiles--kinds) { grid-template-columns: minmax(0, 1fr); }
  .tiles:not(.tiles--kinds) .tile__title { height: auto; }
}

/* --- Stories page: featured card and planned grid --- */
.stories-page { max-width: 78rem; margin: 0 auto; padding: 0 20px 24px; }
@media (min-width: 900px) { .stories-page { padding: 0 48px 24px; } }
.stories-hero { padding-top: 32px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
@media (min-width: 900px) { .stories-hero { padding-top: 48px; } }
.stories-lede { max-width: 40rem; font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--ink-faded); }

/* Featured card: when only one story is ready, it gets a proper introduction */
.stories-featured { margin-top: 40px; }
@media (min-width: 900px) { .stories-featured { margin-top: 56px; } }
.featured-card {
  margin-top: 22px; display: grid; gap: 28px; padding: 28px; border-radius: 18px;
  background: var(--paper-warm); align-items: center;
}
@media (min-width: 700px) { .featured-card { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; padding: 36px; } }
.featured-card__body { display: flex; flex-direction: column; gap: 12px; }
.featured-card__flag { font-family: var(--font-ui); font-weight: 600; font-size: 15px; color: var(--gold); }
.featured-card__title {
  font-family: var(--font-ui); font-weight: 600; font-size: clamp(28px, 4vw, 36px);
  line-height: 1.15; letter-spacing: -0.025em; color: var(--ink);
}
.featured-card__desc { font-family: var(--font-body); font-size: 18px; line-height: 1.55; color: var(--ink-faded); max-width: 36rem; }
.featured-card__meta { font-family: var(--font-body); font-size: 15px; color: var(--ink-hint); }
.featured-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 6px; }
.featured-card__cover { width: 230px; flex: none; }
@media (max-width: 699px) { .featured-card__cover { display: none; } }
.featured-card__cover .cover { width: 100%; height: 300px; }

/* Planned grid: always visible, never scrolling off-screen on desktop */
.stories-planned { margin-top: 48px; }
@media (min-width: 900px) { .stories-planned { margin-top: 64px; } }
.stories-planned__note {
  margin: 8px 0 20px; max-width: 40rem; font-family: var(--font-body);
  font-size: 16px; line-height: 1.55; color: var(--ink-faded);
}
.stories-planned__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px;
}
@media (min-width: 900px) {
  .stories-planned__grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
}
.stories-planned__grid .cover { width: 100%; height: 288px; }
@media (min-width: 900px) { .stories-planned__grid .cover { height: 300px; } }

.stories-cmp { margin-top: 48px; font-size: 16px; color: var(--ink-faded); }
.stories-cmp a { color: var(--gold); font-weight: 700; }

/* All page containers: desktop padding matches the header */
@media (min-width: 900px) {
  .stories-page, .cmp-page { padding-left: 48px; padding-right: 48px; }
}


/* ==========================================================
   Rebuild, September 2026
   Home · Stories · Full Bible · Memorize, and the 4-step story.
   Written for every reader: young adults, neurodivergent readers,
   and people learning English. Large tap targets (44px), one idea
   per line, no color-only meaning, balanced headline breaks.
   ========================================================== */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
h1, h2, h3, .cat-card__title, .pv__title, .area__title, .start-card__title, .finish__name { text-wrap: balance; hyphens: none; overflow-wrap: normal; }
p, li { text-wrap: pretty; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent;
  font-family: var(--font-ui); font-weight: 600; font-size: 16px; line-height: 1.2;
  text-decoration: none; cursor: pointer; text-align: center;
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--gold); color: var(--on-gold); }
.btn--primary:hover { background: var(--gold-deep); color: var(--on-gold); }
.btn--line { background: var(--white); color: var(--gold); border-color: var(--gold); }
.btn--line:hover { background: var(--gold-wash); }
.btn--quiet { background: transparent; color: var(--ink-faded); }
.btn--quiet:hover { color: var(--ink); background: var(--paper-warm); }
.btn--wide { width: 100%; }
.btn:focus-visible, .link-btn:focus-visible, .chip-btn:focus-visible, .seg__btn:focus-visible,
.vchip:focus-visible, .term:focus-visible, .area:focus-visible, .cat-card:focus-visible,
.feel-chip:focus-visible, .steps__btn:focus-visible, .tool-btn:focus-visible, .next-row:focus-visible,
.finish__card:focus-visible, .chip-active:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.link-btn { background: none; border: 0; padding: 8px 4px; min-height: 44px; font-family: var(--font-ui); font-weight: 600; font-size: 15px; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn {
  min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ledge, var(--rule)); background: var(--white); color: var(--ink);
  font-family: var(--font-ui); font-weight: 500; font-size: 16px;
}
.chip-btn[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.chip-btn.is-used { border-style: dashed; background: transparent; color: var(--ink-hint); cursor: default; }
.seg { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: 12px; background: var(--paper-warm); }
.seg__btn { min-height: 44px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-faded); font-family: var(--font-ui); font-weight: 600; font-size: 14px; cursor: pointer; padding: 0 6px; }
.seg__btn[aria-pressed="true"] { background: var(--white); color: var(--ink); box-shadow: var(--card-shadow); }

.status { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-family: var(--font-ui); font-size: 12px; font-weight: 700; white-space: nowrap; }
.status--new { background: var(--gold-wash); color: var(--gold-deep); }
.status--soon { border: 1px dashed var(--ink-hint); color: var(--ink-faded); }
.badge--new { background: var(--gold-wash); color: var(--gold-deep); }

/* --- Header nav: four places --- */
.site-nav a { white-space: nowrap; }
@media (min-width: 768px) and (max-width: 899px) {
  .site-nav { gap: 2px; }
  .site-nav a { padding: 6px 8px; font-size: 14px; }
  .shortcuts-btn { display: none; }
}
.tab-bar__btn span { font-size: 11px; }

/* ================= HOME ================= */
.home4 { max-width: 78rem; margin: 0 auto; padding: 0 20px 40px; }
@media (min-width: 900px) { .home4 { padding: 0 48px 56px; } }
.home4-hero { display: grid; gap: 24px; padding-top: 28px; }
@media (min-width: 1000px) { .home4-hero { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; padding-top: 56px; align-items: center; } }
.home4-hero__text { display: flex; flex-direction: column; gap: 14px; }
.home4-title { font-family: var(--font-ui); font-weight: 600; font-size: clamp(34px, 8vw, 58px); line-height: 1.08; letter-spacing: -0.03em; color: var(--ink); max-width: 14ch; }
.home4-lede { font-family: var(--font-body); font-size: clamp(17px, 2.2vw, 20px); line-height: 1.6; color: var(--ink-faded); max-width: 34rem; }
.home4-hero__side { display: flex; flex-direction: column; gap: 20px; }
.home4-section { margin-top: 48px; }
@media (min-width: 900px) { .home4-section { margin-top: 72px; } }
.home4-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
@media (min-width: 900px) { .home4-head { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 24px; } }
.home4-h2 { font-family: var(--font-ui); font-weight: 600; font-size: clamp(21px, 3vw, 26px); letter-spacing: -0.02em; color: var(--ink); }
.home4-note { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--ink-faded); }

.start-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 18px; background: var(--white); box-shadow: var(--card-shadow), 0 6px 20px rgba(28,27,46,.05); }
@media (min-width: 900px) { .start-card { padding: 24px; } }
.start-card__kicker { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--gold); }
.start-card__title { font-family: var(--font-ui); font-weight: 600; font-size: clamp(21px, 2.6vw, 24px); line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); }
.start-card__story { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.start-card__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.start-card__steps li { display: flex; gap: 10px; align-items: flex-start; font-family: var(--font-body); font-size: 16px; line-height: 1.45; color: var(--ink); }
.start-card__n { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--gold-wash); color: var(--gold-deep); font-family: var(--font-ui); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

.next-step { display: flex; flex-direction: column; gap: 10px; }
.next-step__list { display: flex; flex-direction: column; gap: 10px; }
.next-row { display: flex; flex-direction: column; gap: 2px; padding: 14px 44px 14px 16px; position: relative; border-radius: 14px; background: var(--white); box-shadow: var(--card-shadow); text-decoration: none; color: var(--ink); min-height: 64px; }
.next-row::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: translateY(-50%) rotate(-45deg); }
.next-row:hover { box-shadow: var(--card-shadow-hover); }
.next-row__kicker { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--ink-hint); }
.next-row__title { font-family: var(--font-ui); font-size: 17px; font-weight: 600; }
.next-row__meta { font-family: var(--font-body); font-size: 15px; color: var(--ink-faded); }

.area-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.area { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 20px; border-radius: 16px; background: var(--white); box-shadow: var(--card-shadow); text-decoration: none; color: var(--ink); }
.area:hover { box-shadow: var(--card-shadow-hover); }
.area__count { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--gold); }
.area__title { font-family: var(--font-ui); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.area__line { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--ink-faded); flex-grow: 1; }
.area__opens { font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.area--wide { max-width: 40rem; }

.feel-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.feel-chip { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--ledge, var(--rule)); background: var(--white); color: var(--ink); text-decoration: none; font-family: var(--font-ui); font-weight: 500; font-size: 16px; }
.feel-chip:hover { border-color: var(--gold); color: var(--gold-deep); }
.feel-chip--plain { background: transparent; border-style: dashed; }

/* ================= STORIES LIST ================= */
.cat-page, .mem-page { max-width: 78rem; margin: 0 auto; padding: 0 20px 48px; }
@media (min-width: 900px) { .cat-page, .mem-page { padding: 0 48px 64px; } }
.mem-page { max-width: 40rem; }
@media (min-width: 900px) { .mem-page { padding: 0 20px 64px; } }
.cat-head { padding: 28px 0 8px; display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 900px) { .cat-head { padding-top: 48px; } }
.cat-title { font-family: var(--font-ui); font-weight: 600; font-size: clamp(32px, 6vw, 44px); letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.cat-lede { font-family: var(--font-body); font-size: 17px; line-height: 1.55; color: var(--ink-faded); max-width: 40rem; }
.cat-tools { display: flex; gap: 10px; align-items: center; margin: 16px 0 10px; flex-wrap: wrap; }
.cat-search { flex: 1 1 260px; max-width: 30rem; display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--ledge, var(--rule)); background: var(--white); color: var(--ink-hint); }
.cat-search svg { width: 20px; height: 20px; flex-shrink: 0; }
.cat-search input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--font-body); font-size: 16px; color: var(--ink); outline: none; }
.cat-search:focus-within { outline: 3px solid var(--gold); outline-offset: 2px; }
.cat-filter-btn { min-height: 50px; }
@media (min-width: 1000px) { .cat-filter-btn { display: none !important; } }
.cat-active { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 8px; }
.chip-active { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--gold); color: var(--on-gold); font-family: var(--font-ui); font-weight: 500; font-size: 15px; cursor: pointer; }
.chip-active svg { width: 14px; height: 14px; }
.cat-count { font-family: var(--font-ui); font-size: 15px; font-weight: 500; color: var(--ink-soft); margin: 4px 0 12px; }

.cat-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1000px) { .cat-layout { grid-template-columns: 250px minmax(0, 1fr) 340px; } }
@media (min-width: 1200px) { .cat-layout { grid-template-columns: 260px minmax(0, 1fr) 380px; } }

/* filters: a column on desktop, a bottom sheet on phones and tablets */
.cat-filters { display: flex; flex-direction: column; }
.cat-filters__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cat-filters__title { flex-grow: 1; font-family: var(--font-ui); font-size: 18px; font-weight: 600; color: var(--ink); }
.cat-filters__close { display: none; width: 44px; height: 44px; border: 0; border-radius: 10px; background: var(--paper-warm); color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
.cat-filters__close svg { width: 18px; height: 18px; }
.cat-filters__foot { display: none; }
.fgroup { border: 0; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.fgroup legend { font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 6px; padding: 0; }
.fgroup__hint { font-family: var(--font-body); font-size: 14px; color: var(--ink-hint); margin: -2px 0 6px; }
.fopt { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 8px; border-radius: 8px; cursor: pointer; font-family: var(--font-body); font-size: 16px; color: var(--ink); }
.fopt:hover { background: var(--paper-warm); }
.fopt input { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--gold); margin: 0; }
.fopt__label { flex-grow: 1; display: flex; flex-direction: column; line-height: 1.3; }
.fopt__help { font-size: 13px; color: var(--ink-hint); }
.fopt__n { font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--ink-hint); min-width: 1.5em; text-align: right; }
.fopt.is-zero { color: var(--ink-hint); }
@media (max-width: 999px) {
  html.has-cat-js .cat-filters {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; max-height: 88vh;
    background: var(--white); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(28,27,46,.2);
    transform: translateY(105%); visibility: hidden; transition: transform .25s ease, visibility .25s;
  }
  html.has-cat-js .cat-filters.is-open { transform: none; visibility: visible; }
  html.has-cat-js .cat-filters__head { padding: 14px 20px 4px; }
  html.has-cat-js .cat-filters__close { display: inline-flex; }
  html.has-cat-js .cat-filters__body { overflow-y: auto; padding: 4px 20px 8px; }
  html.has-cat-js .cat-filters__foot { display: block; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); }
  html:not(.has-cat-js) .cat-filters { display: none; }
}
@media (min-width: 1000px) { .cat-filters { position: sticky; top: 88px; max-height: calc(100vh - 100px); overflow-y: auto; padding-right: 4px; } }

.cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cat-card { display: flex; border-radius: 14px; overflow: hidden; background: var(--white); box-shadow: var(--card-shadow); text-decoration: none; color: var(--ink); }
.cat-card:hover { box-shadow: var(--card-shadow-hover); }
.cat-item.is-picked .cat-card { box-shadow: 0 0 0 2px var(--gold); }
.cat-card__spine { width: 8px; flex-shrink: 0; background: var(--spine-story, var(--gold)); }
.cat-card--parable .cat-card__spine { background: var(--spine-parable, #3B574B); }
.cat-card--verses .cat-card__spine { background: var(--ledge, var(--rule)); }
.cat-card--prayer .cat-card__spine { background: var(--spine-prayer, #6B4E7A); }
.cat-card.is-soon .cat-card__spine { background: transparent; border-right: 2px dashed var(--ledge, var(--rule)); }
.cat-card__body { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px; min-width: 0; flex-grow: 1; }
.cat-card__top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.cat-card__kind { font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--ink-faded); }
.cat-card__title { font-family: var(--font-ui); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.cat-card__sub { font-family: var(--font-ui); font-size: 14px; font-weight: 500; color: var(--gold-deep); }
.cat-card__desc { font-family: var(--font-body); font-size: 16px; line-height: 1.45; color: var(--ink-faded); }
.cat-card__meta { font-family: var(--font-ui); font-size: 13px; color: var(--ink-soft); }
.cat-card__note { font-family: var(--font-body); font-size: 14px; color: var(--ink-soft); }
.cat-empty { padding: 24px; border-radius: 14px; border: 1px dashed var(--ledge, var(--rule)); background: var(--white); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; font-family: var(--font-body); font-size: 16px; color: var(--ink-faded); }
.cat-empty__title { font-family: var(--font-ui); font-weight: 600; font-size: 18px; color: var(--ink); }

/* preview: a column on desktop, a bottom sheet on phones and tablets */
.cat-preview { display: none; }
@media (min-width: 1000px) {
  .cat-preview { display: block; position: sticky; top: 88px; }
  .cat-preview__head { display: none; }
}
.cat-preview__inner { padding: 22px; border-radius: 16px; background: var(--white); box-shadow: var(--card-shadow); }
.cat-preview__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cat-preview__label { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--ink-hint); }
.cat-preview__close { width: 44px; height: 44px; border: 0; border-radius: 10px; background: var(--paper-warm); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.cat-preview__close svg { width: 18px; height: 18px; }
.cat-preview__empty { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--ink-faded); }
@media (max-width: 999px) {
  .cat-preview {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; max-height: 88vh; overflow-y: auto;
    transform: translateY(105%); visibility: hidden; transition: transform .25s ease, visibility .25s;
  }
  .cat-preview.is-open { transform: none; visibility: visible; }
  .cat-preview__inner { border-radius: 20px 20px 0 0; padding: 14px 20px calc(24px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(28,27,46,.2); }
}
.pv { display: flex; flex-direction: column; gap: 10px; }
.pv__top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.pv__kind { font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--ink-faded); }
.pv__title { font-family: var(--font-ui); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
.pv__sub { font-family: var(--font-ui); font-size: 15px; font-weight: 500; color: var(--gold-deep); margin-top: -4px; }
.pv__desc { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.pv__meta { font-family: var(--font-ui); font-size: 14px; color: var(--ink-soft); }
.pv__note { font-family: var(--font-body); font-size: 15px; line-height: 1.45; padding: 10px 12px; border-radius: 10px; background: var(--paper-warm); }
.pv__inside { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--rule); }
.pv__inside-title { font-family: var(--font-ui); font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.pv__inside ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-family: var(--font-body); font-size: 15px; line-height: 1.45; color: var(--ink); }

/* shared bottom-sheet backdrop */
.verse-backdrop { position: fixed; inset: 0; z-index: 85; background: rgba(28,27,46,.34); }
body.sheet-open { overflow: hidden; }

/* ================= STORY, 4 STEPS ================= */
.story-page.story-v2 { max-width: 40rem; }
@media (min-width: 1200px) { .story-page.story-v2 { max-width: 70rem; padding: 0 48px 64px; } .story-v2 .story-head, .story-v2 .story-note, .story-v2 .story-tools, .story-v2 .listen-bar, .story-v2 .first-tip, .story-v2 .steps, .story-v2 .story-crumb { max-width: 70rem; } }
.story-subtitle { font-family: var(--font-body); font-size: 19px; line-height: 1.45; color: var(--ink-soft); margin: -4px 0 12px; }
.story-v2 .story-title { font-family: var(--font-ui); font-weight: 600; letter-spacing: -0.03em; }
.story-v2 .story-note__label::before { content: "! "; }

.tool-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ledge, var(--rule)); background: var(--white); color: var(--ink); font-family: var(--font-ui); font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; }
.tool-btn svg { width: 18px; height: 18px; }
.tool-btn:hover { border-color: var(--gold); color: var(--gold-deep); }
.tool-btn[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }

.listen-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 10px; padding: 10px 12px; border-radius: 14px; background: var(--gold-wash); }
.listen-bar[hidden] { display: none; }
.listen-bar__btn, .listen-bar__stop { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; font-family: var(--font-ui); font-weight: 600; font-size: 15px; cursor: pointer; }
.listen-bar__btn { background: var(--gold); color: var(--on-gold); }
.listen-bar__stop { background: var(--white); color: var(--ink); }
.listen-bar__speed { display: flex; gap: 4px; }
.listen-bar__speed button { min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--ink-soft); font-family: var(--font-ui); font-weight: 500; font-size: 14px; cursor: pointer; }
.listen-bar__speed button[aria-pressed="true"] { background: var(--white); border-color: var(--gold); color: var(--gold-deep); font-weight: 700; }
.listen-bar__status { flex-basis: 100%; font-family: var(--font-body); font-size: 14px; color: var(--ink-soft); }
.is-reading { background: color-mix(in srgb, var(--gold-leaf, #B8892B) 22%, transparent); border-radius: 8px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold-leaf, #B8892B) 22%, transparent); }

.first-tip { margin: 8px 0 12px; padding: 16px 18px; border-radius: 14px; background: var(--white); box-shadow: var(--card-shadow); display: flex; flex-direction: column; gap: 10px; }
.first-tip[hidden] { display: none; }
.first-tip__title { font-family: var(--font-ui); font-weight: 600; font-size: 16px; color: var(--ink); }
.first-tip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-family: var(--font-body); font-size: 16px; line-height: 1.45; }
.first-tip__ok { align-self: flex-start; min-height: 44px; padding: 0 18px; border-radius: 10px; border: 0; background: var(--gold); color: var(--on-gold); font-family: var(--font-ui); font-weight: 600; font-size: 15px; cursor: pointer; }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 16px 0 8px; }
.steps__btn { display: flex; flex-direction: column; gap: 7px; justify-content: flex-end; min-height: 48px; padding: 0 0 4px; text-decoration: none; color: var(--ink-hint); font-family: var(--font-ui); font-size: 14px; font-weight: 500; text-align: center; }
.steps__bar { height: 6px; border-radius: 3px; background: var(--rule); }
.steps__btn.is-done .steps__bar { background: var(--gold); }
.steps__btn[aria-current="step"] { color: var(--ink); font-weight: 700; }
.steps__num { display: none; }
@media (min-width: 640px) { .steps__num { display: inline; color: var(--ink-hint); font-weight: 500; } }

.story-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 1200px) { .story-layout { grid-template-columns: minmax(0, 40rem) minmax(0, 1fr); gap: 48px; align-items: start; } }
.step { padding-top: 12px; }
.story-v2:not(.js) .step + .step { margin-top: 40px; border-top: 1px solid var(--rule); }
.step__head { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 6px; }
.step__num { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--gold); }
.step__title { font-family: var(--font-ui); font-size: clamp(26px, 5vw, 32px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.step__q { font-family: var(--font-body); font-size: 17px; color: var(--ink-faded); }
.step__hint { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--ink-soft); margin: 8px 0 4px; }
.step__next { margin-top: 28px; width: 100%; }
@media (min-width: 640px) { .step__next { width: auto; } }

/* retelling paragraphs, verse numbers, word help */
.story-v2 .rp { cursor: pointer; border-radius: 8px; transition: background .15s; }
.story-v2 .rp.is-selected { background: var(--gold-wash); box-shadow: 0 0 0 6px var(--gold-wash); }
.vchip {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 8px; margin-left: 2px;
  border-radius: 8px; border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); background: var(--gold-wash); color: var(--gold-deep);
  font-family: var(--font-ui); font-size: 13px; font-weight: 700; line-height: 1; vertical-align: 0.1em; cursor: pointer; white-space: nowrap;
}
.vchip:hover { background: var(--gold); color: var(--on-gold); }
.vchip--demo { cursor: default; }
.term { display: inline; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; line-height: inherit; cursor: help; text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--gold); }
.term--demo { cursor: default; }
:root[data-fs-words="off"] .term:not(.term--demo) { text-decoration: none; cursor: inherit; pointer-events: none; }
.word-bubble { position: absolute; z-index: 95; padding: 12px 14px; border-radius: 12px; background: var(--white); box-shadow: 0 0 0 1px var(--rule), 0 10px 30px rgba(28,27,46,.18); display: flex; flex-direction: column; gap: 4px; }
.word-bubble[hidden] { display: none; }
.word-bubble__word { font-family: var(--font-ui); font-weight: 700; font-size: 15px; color: var(--gold-deep); }
.word-bubble__meaning { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--ink); }
.ref-link { color: var(--gold-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.story-imagine__label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.story-imagine__tag { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--ink-hint); color: var(--ink-faded); }

/* verse panel: a column on desktop, a bottom sheet on phones and tablets */
.verse-panel__inner { padding: 20px; border-radius: 16px; background: var(--white); box-shadow: var(--card-shadow); }
.verse-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.verse-panel__title { font-family: var(--font-ui); font-size: 18px; font-weight: 600; color: var(--ink); }
.verse-panel__close { display: none; width: 44px; height: 44px; border: 0; border-radius: 10px; background: var(--paper-warm); color: var(--ink); align-items: center; justify-content: center; cursor: pointer; }
.verse-panel__close svg { width: 18px; height: 18px; }
.verse-panel__body { display: flex; flex-direction: column; gap: 14px; }
.verse-panel__empty { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--ink-faded); }
.verse-panel__story { padding: 10px 12px; border-radius: 10px; background: var(--gold-wash); }
.verse-panel__kicker, .verse-panel__ref { display: block; font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--gold-deep); margin-bottom: 4px; }
.verse-panel__story p { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.verse-panel__verse { padding-left: 14px; border-left: 3px solid var(--gold-leaf, #B8892B); }
.verse-panel__verse p { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--ink); }
.verse-panel__foot { margin-top: 14px; font-family: var(--font-body); font-size: 13px; color: var(--ink-hint); }
@media (min-width: 1200px) { .verse-panel { position: sticky; top: 96px; } }
@media (max-width: 1199px) {
  .story-v2:not(.js) .verse-panel { display: none; }
  .story-v2.js .verse-panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; max-height: 80vh; overflow-y: auto;
    transform: translateY(105%); visibility: hidden; transition: transform .25s ease, visibility .25s;
  }
  .story-v2.js .verse-panel.is-open { transform: none; visibility: visible; }
  .story-v2.js .verse-panel__inner { border-radius: 20px 20px 0 0; padding: 16px 20px calc(24px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(28,27,46,.2); }
  .story-v2.js .verse-panel__close { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) { .cat-filters, .cat-preview, .verse-panel { transition: none !important; } }

/* memorize */
.mem { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.mem__intro { font-family: var(--font-body); font-size: 17px; line-height: 1.55; color: var(--ink-soft); }
.mem__card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 16px; background: var(--gold); color: var(--on-gold); }
.mem__ref { font-family: var(--font-ui); font-size: 13px; font-weight: 600; opacity: .85; }
.mem__ref a { color: inherit; }
.mem__line { font-family: var(--font-body); font-size: clamp(21px, 4.5vw, 25px); line-height: 1.4; font-weight: 700; min-height: 1.4em; }
.mem__line.is-letters { letter-spacing: 0.08em; }
.mem__blank { display: inline-block; min-width: 4.5em; border-bottom: 3px solid currentColor; opacity: .7; text-align: center; }
.mem__blank.is-filled { opacity: 1; min-width: 0; }
.mem__placeholder { font-weight: 400; opacity: .8; font-size: .8em; }
.mem__practice { display: flex; flex-direction: column; gap: 12px; }
.mem__practice[hidden] { display: none; }
.mem__practice > div + * { margin-top: 4px; }
.mem__how { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--ink); margin-top: 6px; }
.mem__check { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--ink-soft); padding: 10px 12px; border-radius: 10px; background: var(--paper-warm); }
.mem__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.mem__save { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; border: 1px solid var(--rule); }
.mem__save[hidden] { display: none; }
.mem__save-q { font-family: var(--font-ui); font-weight: 600; font-size: 16px; }
.mem__save-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.mem__save-btns[hidden] { display: none; }
.mem__saved { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.mem__saved:empty { display: none; }

.finish { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 14px; }
.finish__title { font-family: var(--font-ui); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.finish__cards { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .finish__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.finish__card { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 14px; background: var(--white); box-shadow: var(--card-shadow); text-decoration: none; color: var(--ink); }
.finish__card:hover { box-shadow: var(--card-shadow-hover); }
.finish__kicker { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--gold); }
.finish__name { font-family: var(--font-ui); font-size: 18px; font-weight: 600; }
.finish__meta { font-family: var(--font-body); font-size: 15px; color: var(--ink-faded); }
.finish__share { align-self: flex-start; }

/* memorize page */
.mem-page__private { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 15px; color: var(--ink-hint); }
.mem-page__private svg { width: 16px; height: 16px; }
.mem-empty { margin-top: 16px; padding: 24px; border-radius: 16px; border: 1px dashed var(--ledge, var(--rule)); background: var(--white); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--ink-faded); }
.mem-empty[hidden] { display: none; }
.mem-empty__title { font-family: var(--font-ui); font-size: 18px; font-weight: 600; color: var(--ink); }
.mem-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.mem-item { display: flex; flex-direction: column; gap: 10px; }
.mem-item__due { font-family: var(--font-ui); font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.mem-item__btns { display: flex; flex-wrap: wrap; gap: 10px; }

@media print {
  .story-v2 .step[hidden] { display: block !important; }
  .steps, .story-tools, .listen-bar, .first-tip, .verse-panel, .step__next, .mem__practice, .mem__save, .finish { display: none !important; }
  .vchip { border: 0; background: none; padding: 0; }
}

/* Before the page scripts are ready, show the story's first step only and
   hold the Stories list, so nothing jumps. Without JavaScript, js-on is
   never set and everything shows. */
html.js-on .story-v2:not(.js) .step:not(#step-story) { display: none; }
html.js-on .cat-page:not(.cat-ready) .cat-list { visibility: hidden; }
@media (max-width: 360px) {
  .story-v2 .story-scene__title { font-size: 21px; }
  .steps__btn { font-size: 13px; }
  .steps { gap: 4px; }
}

/* "hidden" always wins over a component's own display setting. */
[hidden] { display: none !important; }

/* ================= STORIES: shelves (browse) and list (filter) =================
   Browsing shows covers facing out on shelves, like a library display.
   Filtering or searching switches to the plain list, which is faster to scan. */
.cat-page:not(.is-filtering) .cat-list,
.cat-page:not(.is-filtering) .cat-empty { display: none !important; }
.cat-page.is-filtering .shelves { display: none; }
html:not(.js-on) .cat-list, html:not(.js-on) .cat-quick, html:not(.js-on) .cat-filters { display: none !important; }

.cat-quick { display: flex; gap: 8px; margin: 2px -20px 10px; padding: 2px 20px 6px; overflow-x: auto; scrollbar-width: none; }
.cat-quick::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .cat-quick { flex-wrap: wrap; margin: 2px 0 12px; padding: 0; overflow: visible; } }
.quick-chip { flex-shrink: 0; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ledge, var(--rule)); background: var(--white); color: var(--ink); font-family: var(--font-ui); font-weight: 500; font-size: 15px; cursor: pointer; white-space: nowrap; }
.quick-chip:hover { border-color: var(--gold); }
.quick-chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.quick-chip:focus-visible, .cover2:focus-visible, .pile__book:focus-visible, .shelf2__all:focus-visible, .shelf2__scroll:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.shelves { display: flex; flex-direction: column; gap: 36px; }
.shelf2 { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.shelf2__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.shelf2__title { font-family: var(--font-ui); font-size: clamp(19px, 2.4vw, 22px); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.shelf2__all { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--gold); text-decoration: none; white-space: nowrap; padding: 10px 0; }
.shelf2__all:hover { text-decoration: underline; text-underline-offset: 3px; }
.shelf2__rowwrap { position: relative; margin: 0 -20px; }
@media (min-width: 1000px) { .shelf2__rowwrap { margin: 0; } }
.shelf2__row { list-style: none; margin: 0; padding: 6px 20px 2px; display: flex; gap: 14px; align-items: flex-end; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.shelf2__row::-webkit-scrollbar { display: none; }
@media (min-width: 1000px) { .shelf2__row { padding: 10px 6px 2px; } }
.shelf2__row > li { flex-shrink: 0; scroll-snap-align: start; }
.shelf2__ledge { height: 10px; border-radius: 3px; background: var(--ledge, #CFCABB); box-shadow: 0 3px 0 color-mix(in srgb, var(--ledge, #CFCABB) 80%, #000 12%); margin: 0 -8px; }
@media (min-width: 1000px) { .shelf2__ledge { margin: 0; } }
.shelf2__scroll { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule); background: var(--white); color: var(--ink); box-shadow: 0 4px 12px rgba(28,27,46,.14); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.shelf2__scroll svg { width: 20px; height: 20px; }
.shelf2__scroll--left { left: -8px; }
.shelf2__scroll--right { right: -8px; }

/* one strict cover template: same zones at the same heights on every book */
.cover2 { display: flex; width: 138px; height: 198px; border-radius: 3px 10px 10px 3px; overflow: hidden; background: var(--white); box-shadow: 0 0 0 1px rgba(28,27,46,.12), 0 6px 14px rgba(28,27,46,.10); text-decoration: none; color: var(--ink); transition: transform .15s ease, box-shadow .15s ease; }
.cover2:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(28,27,46,.16), 0 10px 20px rgba(28,27,46,.14); }
.cover2.is-picked { box-shadow: 0 0 0 3px var(--gold), 0 10px 20px rgba(28,27,46,.16); transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) { .cover2, .cover2:hover, .cover2.is-picked { transition: none; transform: none; } }
.cover2__spine { width: 12px; flex-shrink: 0; background: var(--spine-story, #404279); box-shadow: inset -2px 0 0 rgba(0,0,0,.18); }
.cover2--parable .cover2__spine { background: var(--spine-parable, #3B574B); }
.cover2--verses .cover2__spine { background: #8A7A5C; }
.cover2--prayer .cover2__spine { background: var(--spine-prayer, #6B4E7A); }
.cover2__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 11px 11px 10px; min-width: 0; flex-grow: 1; }
.cover2__top { display: flex; justify-content: space-between; align-items: center; gap: 4px; height: 16px; }
.cover2__kind { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faded); }
.cover2__new { padding: 1px 6px; border-radius: 999px; background: var(--gold-wash); color: var(--gold-deep); font-family: var(--font-ui); font-size: 10px; font-weight: 700; }
.cover2__rule { height: 1px; background: var(--rule); }
.cover2__title { font-family: var(--font-ui); font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; height: 58px; overflow: hidden; text-wrap: balance; }
.cover2__sub { font-family: var(--font-body); font-size: 13px; line-height: 1.35; color: var(--ink-faded); flex-grow: 1; overflow: hidden; }
.cover2__time { font-family: var(--font-ui); font-size: 12px; font-weight: 500; color: var(--ink-soft); height: 15px; }

/* books still being written lie flat in a stack, spine text reads normally */
.pile { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.pile__title { font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.pile__stack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; }
.pile__stack > li { margin-left: var(--shift, 0); margin-top: -1px; }
.pile__book { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: min(280px, calc(100vw - 80px)); min-height: 44px; padding: 0 14px 0 16px; border: 1px dashed color-mix(in srgb, var(--ink-hint) 55%, transparent); border-left: 6px solid color-mix(in srgb, var(--spine-story, #404279) 45%, var(--paper)); border-radius: 3px; background: var(--paper-warm); box-shadow: 0 2px 0 var(--rule); text-decoration: none; color: var(--ink); }
.pile__book:hover { background: var(--white); }
.pile__book.is-picked { outline: 3px solid var(--gold); outline-offset: 1px; }
.pile__name { font-family: var(--font-ui); font-size: 15px; font-weight: 600; }
.pile__soon { font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--ink-faded); white-space: nowrap; }
/* review fixes */
.cover2 { width: 152px; }
.cover2__title { font-size: 15.5px; }
.shelf2__row { scroll-padding-inline: 20px; }
@media (min-width: 1000px) { .shelf2__row { scroll-padding-inline: 6px; } .cat-preview__head { display: none; } .cat-quick { display: none; } }
.pile__book { width: min(300px, calc(100vw - 80px)); }
.shelf2__scroll--left { left: 6px; }
.shelf2__scroll--right { right: 6px; }
@media (min-width: 1000px) { .shelf2__scroll--left { left: -10px; } .shelf2__scroll--right { right: -10px; } }
@media (min-width: 1200px) { .cat-layout { grid-template-columns: 250px minmax(0, 1fr) 340px; } }

/* ================= THE BIG STORY: 7 parts, in Bible order =================
   A vertical timeline. Parts with stories have an outlined dot, parts still
   being written have a dashed dot (shape, not only color). Each part opens
   like a drawer, so it works with or without JavaScript. */
.bigstory { display: flex; flex-direction: column; gap: 10px; }
.bigstory__lede { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--ink-faded); margin-top: -4px; }
.acts { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.act { position: relative; padding-left: 46px; }
.act::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: -2px; width: 2px; background: var(--ledge, var(--rule)); }
.act:last-child::before { display: none; }
.act__details { padding-bottom: 10px; }
.act__summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 0; cursor: pointer; }
.act__summary::-webkit-details-marker { display: none; }
.act__summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
.act__dot { position: absolute; left: 0; top: 10px; width: 34px; height: 34px; border-radius: 50%; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-size: 14px; font-weight: 700; background: var(--paper); color: var(--ink-hint); border: 2px dashed var(--ink-hint); }
.act--has .act__dot { border: 2px solid var(--gold); color: var(--gold-deep); background: var(--gold-wash); }
.act__details[open] .act__dot { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.act__text { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.act__name { font-family: var(--font-ui); font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.act__meta { font-family: var(--font-body); font-size: 14px; color: var(--ink-faded); }
.act__chev { width: 20px; height: 20px; color: var(--gold); flex-shrink: 0; transition: transform .15s; }
.act__details[open] .act__chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .act__chev { transition: none; } }
.act__body { display: flex; flex-direction: column; gap: 10px; padding: 2px 0 8px; min-width: 0; }
.act__line { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.act__row { margin: 0 -20px 0 -6px; padding: 8px 20px 2px 6px; }
.act__shelf { display: flex; flex-direction: column; min-width: 0; }
.act__shelf + .act__shelf { margin-top: 6px; }
.act__shelf-title {
  font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-faded); margin: 6px 0 0;
}
@media (min-width: 1000px) { .act__row { margin: 0; padding: 8px 6px 2px; } }
.act .shelf2__ledge { margin: 0; }
.act__links { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.act__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 8px 14px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--ink-hint) 60%, transparent); font-family: var(--font-ui); font-size: 15px; font-weight: 500; color: var(--ink-soft); text-decoration: none; }
.act__link::after { content: "›"; font-size: 20px; color: var(--gold); }
.act__link:hover { background: var(--white); }
.act__link--strong { border-style: solid; border-color: var(--rule); background: var(--white); font-weight: 600; color: var(--gold-deep); }
.act__link:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* "Where this story fits" strip on story pages */
.bigstrip { margin: 14px 0 4px; padding: 14px 16px; border-radius: 14px; background: var(--paper-warm); display: flex; flex-direction: column; gap: 8px; }
.bigstrip__bar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bigstrip__seg { height: 6px; border-radius: 3px; background: var(--rule); }
.bigstrip__seg.is-past { background: color-mix(in srgb, var(--gold) 45%, var(--paper)); }
.bigstrip__seg.is-here { background: var(--gold); }
.bigstrip__label { font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--ink); }
.bigstrip__label a { color: inherit; text-decoration: none; }
.bigstrip__label a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bigstrip__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bigstrip__link { display: flex; flex-direction: column; gap: 2px; min-height: 48px; padding: 8px 10px; border-radius: 10px; background: var(--white); text-decoration: none; color: var(--ink); }
.bigstrip__link--after { text-align: right; }
.bigstrip__link:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.bigstrip__dir { font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--gold); }
.bigstrip__name { font-family: var(--font-ui); font-size: 14px; font-weight: 600; }
.bigstrip__soon { font-family: var(--font-body); font-size: 12px; color: var(--ink-hint); }
span.bigstrip__link { background: transparent; border: 1px dashed var(--rule); }
.bigstrip__kicker { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--gold); }
.bigstrip__kicker a { color: inherit; text-decoration: none; }
.bigstrip__kicker a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ===== Review round: drawers, your turn, breaks ===== */
.drawer { margin: 8px 0 22px; border: 1px solid var(--rule); border-radius: 14px; background: var(--white); }
.drawer__sum { list-style: none; cursor: pointer; padding: 14px 44px 14px 16px; position: relative; display: block; min-height: 44px; }
.drawer__sum::-webkit-details-marker { display: none; }
.drawer__sum::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--ink-faded); border-bottom: 2px solid var(--ink-faded); transform: rotate(45deg); transition: transform .15s; }
.drawer[open] > .drawer__sum::after { transform: rotate(-135deg); margin-top: -2px; }
.drawer__title { display: block; font-family: var(--font-ui); font-weight: 700; font-size: 16px; color: var(--ink); }
.drawer__sub { display: block; font-family: var(--font-ui); font-size: 14px; color: var(--ink-faded); margin-top: 2px; }
.drawer__body { padding: 0 16px 8px; border-top: 1px solid var(--rule); }
.drawer__body .story-box { margin-top: 18px; }
.drawer__note { font-family: var(--font-ui); font-size: 14px; color: var(--ink-faded); margin: 18px 0 10px; }
.drawer--leaders { margin-top: 28px; background: var(--paper-warm); }
.drawer__sum:focus-visible { outline: 3px solid var(--gold, #b8860b); outline-offset: 2px; border-radius: 14px; }

.picks { display: grid; gap: 8px; margin: 10px 0 6px; }
.pick { border: 1.5px solid var(--rule); border-radius: 12px; background: var(--white); }
.pick[open] { border-color: var(--ink-faded); }
.pick__opt { list-style: none; cursor: pointer; padding: 12px 14px; min-height: 44px; font-family: var(--font-ui); font-size: 16px; font-weight: 600; color: var(--ink); display: flex; align-items: center; }
.pick__opt::-webkit-details-marker { display: none; }
.pick__opt::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink-faded); margin-right: 12px; }
.pick[open] .pick__opt::before { background: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--white); }
.pick__ans { margin: 0 !important; padding: 0 14px 14px 42px; font-size: 16px; line-height: 1.55; }
.story-box--your-turn .story-key, .story-box--your-turn .story-label { font-family: var(--font-ui); font-size: 17px; margin-top: 18px; }

.story-break { margin: 30px 0 22px; padding: 14px 16px; border-radius: 12px; background: var(--gold-wash); text-align: center; }
.story-break__title { display: block; font-family: var(--font-ui); font-weight: 700; font-size: 15px; color: var(--ink); }
.story-break__text { display: block; font-family: var(--font-ui); font-size: 14px; color: var(--ink-faded); margin-top: 2px; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
@media print { .drawer { border: 0; } .drawer__sum::after { display: none; } }
.icon-btn--display { box-shadow: inset 0 0 0 1.5px var(--rule); height: 36px; }
@media (max-width: 380px) {
  .header-actions .icon-btn, .header-actions .theme-toggle { width: 36px; }
  .header-actions .icon-btn--display { width: auto; padding: 0 9px; font-size: 13px; }
  .site-mark__text { font-size: 16px; }
}
.icon-btn--display { gap: 6px; }
.icon-btn--display svg { width: 18px; height: 18px; }
@media (max-width: 479px) {
  .header-actions .icon-btn--display { width: 40px; padding: 0; box-shadow: none; }
  .icon-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Keep the "Being written" pile inside narrow timelines. */
.pile__stack > li { width: min(300px, calc(100% - var(--shift, 0px))); }
.pile__stack > li > .pile__book { width: 100%; }
.pile__name { min-width: 0; }
@media (max-width: 420px) { .pile__soon { display: none; } }
@media (max-width: 380px) { .site-mark__text { white-space: nowrap; font-size: 15px; } }
.nowrap { white-space: nowrap; }

/* ===== Reading paths ===== */
.path-card { display: block; margin: 4px 0 28px; padding: 18px 18px 16px; border-radius: 16px; background: var(--white); box-shadow: var(--card-shadow); text-decoration: none; color: var(--ink); border-left: 6px solid var(--gold); }
.path-card:hover { box-shadow: var(--card-shadow-hover); }
.path-card__kicker { display: block; font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--gold-deep); }
.path-card__title { display: block; font-family: var(--font-ui); font-size: 22px; font-weight: 800; margin-top: 4px; }
.path-card__line { display: block; font-size: 16px; color: var(--ink-soft); margin-top: 4px; }
.path-card__list { display: block; font-family: var(--font-ui); font-size: 14px; color: var(--ink-faded); margin-top: 10px; }

.path-page { padding-bottom: 40px; }
.path-head { margin: 8px 0 18px; }
.path-head__kicker { display: block; font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--gold-deep); }
.path-head__title { font-family: var(--font-ui); font-size: clamp(32px, 7vw, 44px); line-height: 1.1; margin: 6px 0 10px; }
.path-head__q { font-size: 19px; line-height: 1.5; margin: 0 0 8px; color: var(--ink); }
.path-head__lede { font-size: 16px; line-height: 1.55; margin: 0 0 6px; color: var(--ink-soft); }
.path-head__meta { font-family: var(--font-ui); font-size: 14px; color: var(--ink-faded); margin: 0; }

.path-progress { margin: 0 0 16px; }
.path-progress__bar { display: flex; gap: 6px; }
.path-progress__seg { flex: 1; height: 8px; border-radius: 4px; background: var(--rule); }
.path-progress__seg.is-done { background: var(--gold); }
.path-progress__text { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--ink-soft); margin: 8px 0 0; }

.path-steps { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.path-step__link { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 14px; background: var(--white); box-shadow: var(--card-shadow); text-decoration: none; color: var(--ink); border: 2px solid transparent; }
.path-step__link:hover { box-shadow: var(--card-shadow-hover); }
.path-step__n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-ui); font-weight: 800; background: var(--paper-warm); color: var(--ink); }
.path-step__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.path-step__title { font-family: var(--font-ui); font-weight: 800; font-size: 18px; }
.path-step__shows { font-size: 16px; line-height: 1.45; color: var(--ink-soft); }
.path-step__meta { font-family: var(--font-ui); font-size: 13px; color: var(--ink-faded); }
.path-step__status { font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--gold-deep); }
.path-step__status:empty { display: none; }
.path-step.is-done .path-step__n { background: var(--gold); color: var(--on-gold, #fff); }
.path-step.is-next .path-step__link { border-color: var(--gold); }
.path-go { margin-top: 4px; }
.path-after { margin-top: 24px; padding: 18px; border-radius: 14px; background: var(--gold-wash); }
.path-after__title { font-family: var(--font-ui); font-size: 20px; margin: 0 0 6px; }
.path-after p { margin: 0 0 12px; }

.path-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: var(--gold-wash); text-decoration: none; color: var(--ink); }
.path-bar__kicker { font-family: var(--font-ui); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gold-deep); width: 100%; }
.path-bar__title { font-family: var(--font-ui); font-size: 15px; font-weight: 700; }
.path-bar__dots { display: inline-flex; gap: 6px; margin-left: auto; }
.path-bar__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rule); }
.path-bar__dot.is-done { background: var(--gold); }
.path-bar__dot.is-here { box-shadow: 0 0 0 2px var(--ink); }
.finish__card--path { border: 2px solid var(--gold); }
.story-head .path-bar { margin: 16px 0 0; }
.path-care { margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; background: var(--paper-warm); border-left: 4px solid var(--gold-deep); }
.path-care__label { display: block; font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.path-care p { margin: 0; font-size: 16px; line-height: 1.55; }
.path-step__note { font-family: var(--font-ui); font-size: 13px; line-height: 1.45; color: var(--ink-soft); background: var(--paper-warm); border-radius: 8px; padding: 6px 8px; margin-top: 4px; }
.paths-shelf { margin-bottom: 28px; scroll-margin-top: 80px; }
.paths-shelf__list { display: grid; gap: 12px; }
@media (min-width: 900px) { .paths-shelf__list { grid-template-columns: 1fr 1fr; } }
.paths-shelf .path-card { margin: 0; }

/* ================= BIBLE TIMELINE (/timeline/, September 2026) =================
   The whole Bible story in 4 parts, drawn to scale. The same colored band
   shows small in each timeline panel and on every story page.
   Part colors are muted and always come with a written name. */
:root {
  --tl-t1: #D8C8A2; --tl-t2: #CFA88C; --tl-t3: #A7AEBD; --tl-t4: #8F93C9;
  --tl-line: #B4AE9E;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-fs-theme="light"]):not([data-fs-theme="white"]) {
    --tl-t1: #9C8A62; --tl-t2: #A0785F; --tl-t3: #6C7894; --tl-t4: #7C82CC; --tl-line: #545A86;
  }
}
:root[data-fs-theme="dark"] { --tl-t1: #9C8A62; --tl-t2: #A0785F; --tl-t3: #6C7894; --tl-t4: #7C82CC; --tl-line: #545A86; }
.tl-t1, .tl-p1 { --tl-tint: var(--tl-t1); } .tl-t2, .tl-p2 { --tl-tint: var(--tl-t2); }
.tl-t3, .tl-p3 { --tl-tint: var(--tl-t3); } .tl-t4, .tl-p4 { --tl-tint: var(--tl-t4); }

/* The band */
.tl-band { position: relative; height: 18px; }
.tl-band > span { position: absolute; top: 0; height: 100%; }
.tl-band__fade-l { left: 0; background: linear-gradient(to right, transparent, var(--tl-t1)); }
.tl-band__fade-r { right: 0; background: linear-gradient(to right, var(--tl-t4), transparent); }
.tl-band__part { background: var(--tl-tint); }
.tl-band__stip { background-image: radial-gradient(var(--paper) 1.3px, transparent 1.6px); background-size: 6px 6px; }
.tl-band__here, .tl-here { top: 50% !important; height: auto !important; width: 12px; aspect-ratio: 1; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--paper); }
.tl-band--mini { height: 8px; border-radius: 4px; }
.tl-band--mini .tl-band__stip { background-size: 5px 5px; background-image: radial-gradient(var(--paper) 1px, transparent 1.3px); }
.tl-band--mini .tl-band__here { width: 10px; margin: -5px 0 0 -5px; box-shadow: 0 0 0 2px var(--white); }

/* Page */
.tl-page { padding-bottom: 56px; }
.tl-intro { padding-block: 28px 20px; }
.tl-kicker { font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--gold); margin: 0; }
.tl-title { font-family: var(--font-ui); font-weight: 700; font-size: clamp(30px, 6vw, 44px); line-height: 1.1; letter-spacing: -0.025em; margin: 6px 0 10px; color: var(--ink); }
.tl-lede { font-family: var(--font-body); font-size: 18px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 6px; max-width: 38em; }
.tl-hint { font-size: 15px; color: var(--ink-faded); margin: 0; }

.tl-overview { position: relative; }
.tl-scale { position: relative; height: 22px; }
.tl-tick { position: absolute; bottom: 4px; transform: translateX(-50%); font-family: var(--font-ui); font-size: 12px; color: var(--ink-faded); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tl-tick::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 5px; background: var(--tl-line); }
.tl-tick--wide { display: none; }
.tl-strip { position: relative; height: 18px; }
.tl-strip .tl-band { position: absolute; inset: 0; }
.tl-seg { position: absolute; top: 0; height: 18px; border-left: 2px solid var(--paper); }
.tl-seg.is-on { box-shadow: inset 0 0 0 2px var(--ink); }
.tl-here { position: absolute; transition: left .35s ease; pointer-events: none; }
.tl-here[hidden] { display: none; }
.tl-funnel { display: none; width: 100%; height: 44px; }
.tl-funnel__part { fill: var(--tl-tint); fill-opacity: .38; }

/* Parts and rows */
.tl-parts { display: grid; gap: 28px; margin-top: 28px; }
.tl-part__head { border-top: 6px solid var(--tl-tint); background: color-mix(in srgb, var(--tl-tint) 22%, var(--paper)); border-radius: 0 0 8px 8px; padding: 10px 14px 12px 34px; margin-bottom: 8px; }
.tl-part__n { font-family: var(--font-ui); font-size: 13px; color: var(--ink-soft); margin: 0; }
.tl-part__name { font-family: var(--font-ui); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; color: var(--ink); }
.tl-part__years { font-size: 14px; color: var(--ink-soft); margin: 2px 0 0; }
.tl-list { list-style: none; margin: 0; padding: 0; }
.tl-row { position: relative; padding-left: 34px; }
.tl-row::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: var(--tl-line); }
.tl-row--gap::before { background: repeating-linear-gradient(to bottom, var(--tl-line) 0 5px, transparent 5px 10px); }
.tl-row:first-child::before { top: 20px; }
.tl-row:last-child::before { bottom: auto; height: 20px; }
.tl-list--end .tl-row:last-child::before { height: auto; bottom: 0; background: linear-gradient(to bottom, var(--tl-line), transparent); }
.tl-row__btn { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 9px 0 11px; text-decoration: none; color: var(--ink); }
.tl-row__dot { position: absolute; left: -31px; top: 13px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2.5px solid var(--gold); }
.tl-row--mark .tl-row__dot { left: -33px; top: 11px; width: 18px; height: 18px; border-width: 3px; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--tl-tint); }
.tl-row--gap .tl-row__dot { left: -30px; width: 12px; height: 12px; top: 14px; border: 2px dashed var(--ink-faded); }
.tl-row.is-on .tl-row__dot { background: var(--gold); border-style: solid; border-color: var(--gold); }
.tl-row__date { font-family: var(--font-ui); font-size: 13px; color: var(--ink-faded); font-variant-numeric: tabular-nums; }
.tl-row__title { font-family: var(--font-ui); font-size: 17px; font-weight: 600; line-height: 1.25; text-wrap: balance; }
.tl-row--gap .tl-row__title { font-weight: 500; color: var(--ink-soft); }
.tl-row__btn:hover .tl-row__title { text-decoration: underline; text-underline-offset: 4px; }
.tl-row.is-on .tl-row__title { color: var(--gold); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tl-row__who { font-size: 15px; color: var(--ink-soft); }
.tl-row__slot:empty { display: none; }
.tl-row__slot { padding: 2px 0 22px; margin-left: -34px; position: relative; z-index: 1; }
.tl-continues { padding: 6px 0 0 34px; max-width: 30em; font-size: 14px; line-height: 1.5; color: var(--ink-faded); margin: 0; }
.tl-legend { margin-top: 18px; display: grid; gap: 4px; }
.tl-legend p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-faded); max-width: 60em; }
.tl-showall { margin-top: 6px; background: none; border: 0; padding: 4px 0; cursor: pointer; font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--gold); }

/* Panels. Without JavaScript every panel shows, one after another. */
.tl-panels { display: grid; gap: 24px; margin-top: 32px; }
.tl-js .tl-panel { display: none; }
.tl-js .tl-panel.is-on, .tl-js.tl-all .tl-panel { display: block; }
.tl-panel { background: var(--white); border-radius: 12px; box-shadow: var(--card-shadow); overflow: hidden; scroll-margin-top: 84px; }
.tl-row { scroll-margin-top: 84px; }
.tl-panel__head { border-top: 6px solid var(--tl-tint); background: color-mix(in srgb, var(--tl-tint) 18%, var(--white)); padding: 16px 28px 18px; }
.tl-panel__partline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.tl-panel__partline .tl-band { flex: 0 1 260px; }
.tl-panel__part { font-family: var(--font-ui); font-size: 14px; color: var(--ink-soft); margin: 0; }
.tl-panel__date { font-family: var(--font-ui); font-size: 14px; color: var(--ink-faded); margin: 12px 0 2px; }
.tl-panel__title { font-family: var(--font-ui); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
.tl-panel__body { padding: 18px 28px 6px; }
.tl-panel__tools { display: flex; justify-content: flex-end; margin-bottom: 4px; min-height: 4px; }
.tl-panel__all { background: none; border: 0; padding: 4px 0; cursor: pointer; font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--gold); }
.tl-zone { font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--ink); margin: 18px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.tl-panel__col > .tl-zone:first-child { margin-top: 0; }
.tl-panel__cols { display: grid; gap: 0 48px; }
.tl-panel__col { min-width: 0; }
.tl-panel__col + .tl-panel__col { margin-top: 18px; }
.tl-panel__what { font-size: 17px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 12px; }
.tl-panel__note { font-size: 15px; line-height: 1.55; color: var(--ink-soft); background: var(--paper-warm); border-radius: 8px; padding: 12px 14px; margin: 0 0 12px; }
.tl-panel__note strong { color: var(--ink); }
.tl-reads { margin: 0 0 18px; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--rule); }
.tl-reads__hint { margin: 8px 0 0; font-size: 14px; color: var(--ink-faded); }
.tl-reads__title { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--gold); margin: 0 0 6px; }
.tl-reads__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tl-reads__list li, .tl-reads__none { font-size: 16px; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.tl-reads a { font-family: var(--font-ui); font-weight: 600; color: var(--gold); }
.tl-reads__meta { color: var(--ink-faded); font-size: 15px; white-space: nowrap; }
.tl-acc { border-bottom: 1px solid var(--rule); }
.tl-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 11px 0; font-family: var(--font-ui); font-size: 16px; font-weight: 600; color: var(--ink); }
.tl-acc > summary::-webkit-details-marker { display: none; }
.tl-acc__icon { flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-wash); color: var(--gold); font-size: 16px; font-weight: 700; line-height: 1; }
.tl-acc__icon::before { content: "+"; }
.tl-acc[open] .tl-acc__icon::before { content: "\2212"; }
.tl-acc__act { margin-left: auto; font-size: 14px; font-weight: 500; color: var(--gold); }
.tl-acc__act::before { content: "Show"; }
.tl-acc[open] .tl-acc__act::before { content: "Hide"; }
.tl-acc__body { padding: 2px 0 16px 32px; }
.tl-acc__body p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.tl-dl, .tl-books { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tl-books { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.tl-dl li, .tl-books li { font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.tl-dl b { color: var(--ink); }
.tl-books a { color: var(--gold); }
.tl-mt { list-style: none; margin: 0; padding: 0; }
.tl-mt li { position: relative; padding: 0 0 10px 22px; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.tl-mt li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--tl-tint); box-shadow: 0 0 0 1.5px var(--ink-faded); }
.tl-mt li::after { content: ""; position: absolute; left: 7.5px; top: 18px; bottom: 0; width: 1px; background: var(--tl-line); }
.tl-mt li:last-child::after { display: none; }
.tl-mt__year { display: block; font-family: var(--font-ui); font-size: 13px; color: var(--ink-faded); font-variant-numeric: tabular-nums; }
.tl-panel__label { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--gold); margin: 0 0 2px; }
.tl-panel__idea { font-size: 19px; line-height: 1.45; color: var(--gold); margin: 0 0 8px; max-width: 34em; }
.tl-panel__nav { display: flex; justify-content: space-between; gap: 16px; padding: 14px 28px 18px; border-top: 1px solid var(--rule); margin-top: 8px; }
.tl-go { display: flex; flex-direction: column; gap: 2px; flex: 0 1 48%; text-decoration: none; padding: 4px 0; }
.tl-go--next { text-align: right; margin-left: auto; align-items: flex-end; }
.tl-go__s { font-size: 13px; color: var(--ink-faded); }
.tl-go__t { font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--gold); text-wrap: balance; }
.tl-go:hover .tl-go__t { text-decoration: underline; text-underline-offset: 4px; }
.tl-row__btn:focus-visible, .tl-go:focus-visible, .tl-panel__all:focus-visible, .tl-showall:focus-visible, .tl-acc > summary:focus-visible, .tl-reads a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* A panel opened inside a row, on phones */
.tl-row__slot .tl-panel__titles { display: none; }
.tl-row__slot .tl-panel__head { padding: 12px 16px; }
.tl-row__slot .tl-panel__partline .tl-band { flex-basis: 100%; }
.tl-row__slot .tl-panel__body { padding: 14px 16px 4px; }
.tl-row__slot .tl-panel__nav { padding: 12px 16px 14px; }
.tl-row__slot .tl-acc__body { padding-left: 0; }

.tl-start { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--rule); display: grid; gap: 8px; }
.tl-start h2 { font-family: var(--font-ui); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.tl-start p { margin: 0 0 8px; color: var(--ink-soft); }
.tl-start__links { display: flex; flex-wrap: wrap; gap: 10px; }

@media (min-width: 900px) {
  .tl-tick--wide { display: block; }
  .tl-funnel { display: block; }
  .tl-parts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 0; align-items: start; }
}
@media (min-width: 1000px) { .tl-panel__cols { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } .tl-panel__col + .tl-panel__col { margin-top: 0; } }
@media (max-width: 899px) { .tl-js:not(.tl-all) .tl-panels { margin-top: 0; } .tl-start { margin-top: 32px; } }
@media (prefers-reduced-motion: reduce) { .tl-here { transition: none; } }

/* The same band on story pages: where this story fits */
.bigstrip .tl-band { height: 10px; border-radius: 5px; }
.bigstrip .tl-band__here { width: 12px; margin: -6px 0 0 -6px; box-shadow: 0 0 0 2px var(--paper-warm); }
.bigstory__timeline { margin: 2px 0 8px; }
html.tl-pre .tl-panel { display: none; }

/* ================= READING FRAME (September 2026) =================
   One frame on every page: the same 78rem width as the header.
   Reading pages split it into a rail (finding your way and tools), the
   text, and a margin for notes. The rail is in the same place on every
   reading page. Below 1200px the rail sits above the text as a compact
   toolbar. Spacing: 8 and 16px inside a group, 24 to 32px between groups. */
:root { --rail-w: 208px; --text-w: 600px; --frame-gap: 36px; }

.rail { display: grid; gap: 16px; margin: 4px 0 28px; min-width: 0; }
.rail__crumb { margin: 0; }
.rail__crumb a { font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--gold); text-decoration: none; }
.rail__crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rail .bigstrip { margin: 0; }
.rail__label { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--ink-faded); margin: 0 0 6px; }
.rail__trans { display: none; }
.rail__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.rail-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border: 0; border-radius: 10px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--rule);
  font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer;
}
.rail-btn:hover { box-shadow: inset 0 0 0 1.5px var(--gold); color: var(--gold); }
.rail-btn:focus-visible, .trans-list__item:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.rail-btn svg { flex: none; }
.chapter-focus-btn.rail-btn { border: 0; background: var(--white); }
.rail-jump select { font: inherit; font-weight: 700; color: var(--gold); border: 0; background: transparent; padding: 0 2px; cursor: pointer; }
details.trans-menu { position: relative; }
details.trans-menu > summary { list-style: none; }
details.trans-menu > summary::-webkit-details-marker { display: none; }
details.trans-menu > summary::after { content: "\25BE"; font-size: 13px; color: var(--ink-faded); }
.trans-menu__list { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 230px; margin: 0; padding: 6px; list-style: none; background: var(--white); border-radius: 10px; box-shadow: var(--card-shadow-hover), 0 10px 28px rgba(0,0,0,.14); display: grid; gap: 2px; }
.trans-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.trans-list__item { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 8px; font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
a.trans-list__item:hover { background: var(--paper-warm); }
.trans-list__item.is-on { background: var(--gold); color: var(--on-gold); }
.trans-list__check { width: 14px; flex: none; text-align: center; }
.trans-list__abbr { font-size: 12px; font-weight: 600; opacity: .75; margin-left: auto; }
.rail-btn .trans-list__abbr { margin-left: 0; }

.chapter-story.rail-card {
  display: grid; gap: 6px; max-width: none; margin: 0; padding: 14px 16px 16px;
  border-radius: 10px; background: var(--white); box-shadow: var(--card-shadow); border-top: 4px solid var(--gold);
}
.rail-card__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--ink-faded); }
.rail-card__title { margin: 0; font-family: var(--font-ui); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.rail-card__line { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.rail-card__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.rail-card__acts .btn { min-height: 40px; padding: 0 14px; font-size: 15px; }
.rail details.chapter-context { padding: 0; margin: 0; border-left: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none; }
.rail details.chapter-context > summary { display: flex; min-height: 0; margin: 0; }
.rail .chapter-context .tl-acc__body { padding-left: 0; }
.rail .story-tools, .rail .story-versions { margin: 0; }
.rail .path-bar { margin: 0; }
.rail-text > header { margin-bottom: 24px; }
.rail-text .chapter-title { margin: 2px 0 6px; }
[data-fs-focus="on"] .rail { display: none; }

@media (min-width: 1200px) {
  .reading-column, .mem-page, .trans-landing, .story-page.story-v2 {
    max-width: 78rem; margin: 0 auto; padding: 24px 48px 64px;
    display: grid; grid-template-columns: var(--rail-w) minmax(0, var(--text-w)) minmax(0, 1fr);
    column-gap: var(--frame-gap); align-content: start;
  }
  .reading-column > *, .mem-page > *, .trans-landing > *, .story-page.story-v2 > * { grid-column: 2; min-width: 0; max-width: none; }
  .reading-column > .rail, .story-page.story-v2 > .rail, .reading-column > .chapter-nav, .reading-column > .story-crumb {
    grid-column: 1; grid-row: 1 / span 60; align-self: start; margin: 0;
    position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; scrollbar-width: thin;
  }
  .reading-column > .chapter-nav { flex-direction: column; align-items: flex-start; gap: 8px; border: 0; padding: 0; }
  .reading-column > .chapter-nav .chapter-nav__group { justify-content: flex-start; }
  .rail { gap: 24px; padding-bottom: 8px; }
  .rail__trans { display: block; }
  details.trans-menu { display: none; }
  .rail__tools { flex-direction: column; align-items: stretch; }
  .rail-btn { width: 100%; }
  .rail .story-tools { flex-direction: column; align-items: stretch; }
  .rail .story-tools .tool-btn { width: 100%; justify-content: flex-start; }
  .rail-card__acts .btn { width: 100%; justify-content: center; }
  .rail .bigstrip__nav { grid-template-columns: minmax(0, 1fr); }
  .rail .bigstrip__link--after { text-align: left; }
  .story-page.story-v2 > .story-layout { grid-column: 2 / 4; grid-template-columns: minmax(0, var(--text-w)) minmax(0, 1fr); column-gap: var(--frame-gap); }
  .story-page.story-v2 > .story-credit { grid-column: 2; }
}
@media (min-width: 1200px) {
  /* Rail and text start on the same line */
  .reading-column > .rail + *, .reading-column > .chapter-nav + *, .reading-column > .story-crumb + *,
  .story-page.story-v2 > .rail + * { margin-top: 0; }
  .rail-text > header > :first-child, .reading-column > .rail + * > :first-child,
  .reading-column > .chapter-nav + * > :first-child { margin-top: 0; }
  .reading-column > .chapter-nav .chapter-nav__current { display: none; }
}
@media (min-width: 1200px) {
  .reading-column > .page-head, .reading-column > .parable-head, .reading-column > .path-head,
  .reading-column > .story-crumb, .mem-page > .cat-head { padding-top: 0; }
}
@media (min-width: 1200px) {
  .reading-column > .chapter-nav + .trans-switch, .story-page.story-v2 > .story-head, .rail .story-crumb { padding-top: 0; }
}
/* Below 1200px: title first, then the compact toolbar, then the text. */
@media (max-width: 1199px) {
  .reading-column--rail, .story-page.story-v2 { display: flex; flex-direction: column; }
  .reading-column--rail > .rail, .reading-column--rail > .rail-text, .story-page.story-v2 > .rail { display: contents; }
  .reading-column--rail .rail-text > *, .story-page.story-v2 > * { order: 3; }
  .reading-column--rail .rail > *, .story-page.story-v2 > .rail > * { order: 2; margin: 0 0 16px; }
  .reading-column--rail .rail > .rail__crumb, .story-page.story-v2 > .rail > .rail__crumb { order: 0; margin: 4px 0 12px; }
  .reading-column--rail .rail-text > header, .story-page.story-v2 > .story-head { order: 1; margin-bottom: 16px; }
  .reading-column--rail .rail > details.chapter-context { margin-bottom: 24px; }
}
@media (max-width: 699px) {
  .rail-card__line { display: none; }
}
.rail details.chapter-context { width: 100%; max-width: none; }

/* ================= HOME: shelf, timeline, paths (Sept 2026) ================= */
.home4-more { font-family: var(--font-ui); font-size: 16px; font-weight: 600; color: var(--gold-deep); text-decoration: none; white-space: nowrap; }
.home4-more::after { content: " \2192"; }
.home4-more:hover { text-decoration: underline; }
@media (min-width: 600px) { .home4-head:has(.home4-more) { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 16px; } }
.home4-note--under { margin: -8px 0 16px; }
.home-shelf { margin: 0 -20px; }
.home-shelf .shelf2__ledge { margin: 0 12px; }
.home-shelf__hint { margin-top: 12px; font-size: 15px; }
@media (min-width: 900px) { .home-shelf { margin: 0; } .home-shelf .shelf2__ledge { margin: 0; } }
@media (min-width: 1000px) {
  .home-shelf__row { justify-content: space-between; overflow: visible; padding: 10px 4px 2px; }
  .home-shelf__row .cover2 { width: 136px; }
  .home-shelf__hint { display: none; }
}
@media (min-width: 1200px) { .home-shelf__row .cover2 { width: 160px; } }

.home-tl { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 18px; background: var(--white); box-shadow: var(--card-shadow); text-decoration: none; color: var(--ink); }
@media (min-width: 900px) { .home-tl { padding: 24px 28px; } }
.home-tl:hover { box-shadow: var(--card-shadow-hover); }
.home-tl__kicker { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--gold); }
.home-tl__title { font-family: var(--font-ui); font-weight: 600; font-size: clamp(21px, 3vw, 26px); letter-spacing: -0.02em; line-height: 1.2; }
.home-tl .tl-band { height: 14px; border-radius: 7px; overflow: hidden; }
.home-tl__parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
@media (min-width: 760px) { .home-tl__parts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.home-tl__part { display: flex; flex-direction: column; gap: 1px; padding-left: 10px; border-left: 4px solid var(--tl-tint); }
.home-tl__n { font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--ink-hint); }
.home-tl__name { font-family: var(--font-ui); font-size: 16px; font-weight: 600; line-height: 1.25; }
.home-tl__years { font-family: var(--font-body); font-size: 14px; color: var(--ink-faded); }
.parable-story { display: flex; flex-direction: column; gap: 4px; margin: 16px 0 8px; padding: 16px 44px 16px 18px; position: relative; border-radius: 14px; background: var(--white); box-shadow: var(--card-shadow); border-left: 6px solid var(--spine-parable, #3B574B); text-decoration: none; color: var(--ink); }
.parable-story::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: translateY(-50%) rotate(-45deg); }
.parable-story:hover { box-shadow: var(--card-shadow-hover); }
.parable-story__kicker { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--gold); }
.parable-story__title { font-family: var(--font-ui); font-size: 18px; font-weight: 600; }
.parable-story__line { font-family: var(--font-body); font-size: 15px; line-height: 1.45; color: var(--ink-faded); }
.parable-story__opens { font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.search-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 14px; font-family: var(--font-ui); font-size: 14px; color: var(--ink-hint); }
.search-try a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ledge, var(--rule)); background: var(--white); color: var(--ink); text-decoration: none; font-weight: 500; }
.search-try a:hover { border-color: var(--gold); color: var(--gold-deep); }
.search-box .search-trans { margin: 4px 0 0; }
/* Chapter pages: story cards sit in the empty right margin on wide screens,
   so they are always in view instead of hidden at the bottom of the rail. */
.rail-margin { display: none; }
@media (min-width: 1200px) {
  .rail-card--in-rail { display: none !important; }
  .reading-column > .rail-margin { display: grid; gap: 12px; grid-column: 3; grid-row: 1 / span 60; align-self: start; position: sticky; top: 88px; max-width: 300px; }
  [data-fs-focus="on"] .rail-margin { display: none; }
}

/* ================= FULL BIBLE: book list (Sept 2026) ================= */
.bible-home { max-width: 78rem; margin: 0 auto; padding: 0 20px 56px; }
@media (min-width: 900px) { .bible-home { padding: 0 48px 72px; } }
.bible-home__head { padding: 28px 0 8px; display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 900px) { .bible-home__head { padding-top: 48px; } }
.bible-home__kicker { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--gold); margin: 0; }
.bible-home__title { font-family: var(--font-ui); font-weight: 600; font-size: clamp(30px, 6vw, 44px); letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); margin: 0; }
.bible-home__desc { font-family: var(--font-body); font-size: 17px; line-height: 1.55; color: var(--ink-faded); max-width: 44rem; margin: 0; }
.bible-vers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.bible-vers__label { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--ink-faded); margin-right: 2px; }
.bible-vers__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 10px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--rule); font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.bible-vers__btn abbr { text-decoration: none; font-size: 12px; opacity: .7; }
a.bible-vers__btn:hover { box-shadow: inset 0 0 0 1.5px var(--gold); color: var(--gold-deep); }
.bible-vers__btn.is-on { background: var(--gold); color: var(--on-gold); box-shadow: none; }

.bible-jump { display: flex; flex-direction: column; gap: 8px; margin: 20px 0 8px; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.bible-jump__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.bible-jump a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--paper-warm); color: var(--ink-soft); font-family: var(--font-ui); font-size: 14px; font-weight: 600; text-decoration: none; }
.bible-jump a:hover { color: var(--gold-deep); }
.bible-jump a.bible-jump__test { background: transparent; padding-left: 0; color: var(--ink); font-weight: 700; min-width: 8.5rem; }

.bible-test { scroll-margin-top: 90px; margin-top: 32px; }
.bible-test__title { font-family: var(--font-ui); font-weight: 600; font-size: clamp(24px, 3.4vw, 30px); letter-spacing: -0.02em; color: var(--ink); margin: 0 0 4px; }
.bible-test__title span { font-size: 15px; font-weight: 600; color: var(--ink-hint); letter-spacing: 0; margin-left: 6px; }
.bible-test__note { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--ink-faded); max-width: 44rem; margin: 0 0 8px; }
.bible-group { font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--ink-faded); margin: 22px 0 10px; }
.bible-books { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .bible-books { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .bible-books { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.bible-book { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px 14px 18px; border-radius: 12px; background: var(--white); box-shadow: var(--card-shadow), inset 4px 0 0 var(--rowc, var(--rule)); text-decoration: none; color: var(--ink); }
.bible-book:hover { box-shadow: var(--card-shadow-hover), inset 4px 0 0 var(--rowc, var(--gold)); }
.bible-book__name { font-family: var(--font-ui); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.bible-book__desc { font-family: var(--font-body); font-size: 15px; line-height: 1.45; color: var(--ink-faded); flex-grow: 1; }
.bible-book__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--ink-soft); margin-top: 2px; }
.bible-book__stories { padding: 2px 8px; border-radius: 999px; background: var(--gold-wash); color: var(--gold-deep); font-weight: 700; font-size: 12px; }
.book-stories { margin: 8px 0 24px; }
.book-stories__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .book-stories__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================= MEMORIZE PAGE (Sept 2026): practice right here ================= */
.mem2 { max-width: 64rem; margin: 0 auto; padding: 0 20px 56px; }
@media (min-width: 900px) { .mem2 { padding: 0 48px 72px; } }
.mem2__head { padding: 28px 0 4px; display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 900px) { .mem2__head { padding-top: 48px; } }
.mem2 > section { margin-top: 32px; }
@media (min-width: 900px) { .mem2 > section { margin-top: 48px; } }
.mem2 .mem2__mine[hidden] { display: none; }
.mem2__mine .mem-list { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .mem2__mine .mem-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mem-item:not(.is-ready) .mem__card { background: var(--white); color: var(--ink); box-shadow: var(--card-shadow); }
.mem-item.is-ready .mem-item__due { color: var(--gold-deep); font-weight: 700; }

.mem2__how { padding: 18px 20px; border-radius: 16px; background: var(--paper-warm); }
.mem2__how-title { font-family: var(--font-ui); font-size: 18px; font-weight: 600; color: var(--ink); margin: 0 0 10px; }
.mem2__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .mem2__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.mem2__steps li { display: flex; gap: 10px; align-items: flex-start; font-family: var(--font-body); font-size: 16px; line-height: 1.45; color: var(--ink); }

.mline-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .mline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.mline { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: 16px; background: var(--white); box-shadow: var(--card-shadow); border-top: 4px solid var(--gold); }
.mline__ref { font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--gold); margin: 0; }
.mline__text { font-family: var(--font-body); font-size: 20px; line-height: 1.4; font-weight: 700; color: var(--ink); margin: 0; }
.mline__text.is-letters { letter-spacing: 0.08em; }
.mline__from { font-family: var(--font-body); font-size: 15px; color: var(--ink-faded); margin: 0; flex-grow: 1; }
.mline__from a { color: var(--gold-deep); }
.mline__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.mline__btns .btn { min-height: 44px; }
.mline__on[hidden], .mline__btns [hidden] { display: none; }
.mline__practice { padding-top: 6px; border-top: 1px solid var(--rule); }
.mline__save { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--paper-warm); }
.mline__save[hidden] { display: none; }
.mline__save-q { font-family: var(--font-ui); font-weight: 600; font-size: 15px; margin: 0; }
.mline__saved { font-family: var(--font-body); font-size: 15px; color: var(--ink-soft); margin: 0; }
.mline__saved:empty { display: none; }

.mem2__parts { display: flex; flex-direction: column; gap: 10px; }
.mem2__part { border-radius: 14px; background: var(--white); box-shadow: var(--card-shadow); }
.mem2__part > summary { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 18px; cursor: pointer; list-style: none; font-family: var(--font-ui); }
.mem2__part > summary::-webkit-details-marker { display: none; }
.mem2__part > summary::after { content: "+"; margin-left: auto; font-size: 22px; font-weight: 500; color: var(--gold); }
.mem2__part[open] > summary::after { content: "\2212"; }
.mem2__part-bar { width: 6px; align-self: stretch; margin: 14px 0; border-radius: 3px; background: var(--tl-tint); }
.mem2__part-name { font-size: 17px; font-weight: 600; color: var(--ink); }
.mem2__part-count { font-size: 14px; font-weight: 500; color: var(--ink-hint); }
.mem2__part > .mline-grid { padding: 4px 14px 16px; }
.mem2__part .mline { box-shadow: 0 0 0 1px var(--rule); }
.mem2__mine .mem-list { align-items: start; }
.mem2__mine .mem-item { padding: 12px 12px 14px; border-radius: 18px; background: var(--white); box-shadow: var(--card-shadow); }
.mem2__mine .mem-item .mem__card { box-shadow: none; }
.mem2__mine .mem-item:not(.is-ready) .mem__card { background: var(--paper-warm); }
.mem2__mine .mem-item__due, .mem2__mine .mem-item__btns { padding: 0 6px; }
.bible-vers--book { margin: 4px 0 8px; }
@media (max-width: 759px) {
  .bible-jump { gap: 6px; }
  .bible-jump__row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -20px; padding-right: 20px; }
  .bible-jump__row::-webkit-scrollbar { display: none; }
  .bible-jump a { flex: none; }
  .bible-jump a.bible-jump__test { min-width: 0; }
  .bible-vers__btn { min-height: 38px; padding: 0 12px; font-size: 14px; }
}

/* ==========================================================================
   Layout and line breaks, on purpose (UI review, September 26, 2026)
   ========================================================================== */

/* One site width. Wide pages (Home, Stories, Timeline, Full Bible, Memorize)
   all use the same 78rem frame as the header, so their left edge lines up
   with the logo. Reading pages keep the narrower reading column. */
.mem2 { max-width: 78rem; }

/* Every block of text avoids a lonely last word where the browser can
   ("pretty"). Headlines, titles, and short labels are also balanced, so
   their lines are about the same length. Intro paragraphs and descriptions
   are NOT balanced: balancing a paragraph squeezes it narrower than the
   column, which looks accidental next to other pages. */
body { text-wrap: pretty; }
h1, h2, h3, h4, summary, figcaption, th, dt, label, button, .btn,
.cover2__title, .cover2__sub, .cat-card__title, .pv__title,
.path-card__title, .path-card__kicker, .area__title,
.bookrow__t, .home-tl__name, .mem2__part-name, .bigstrip__name, .bigstrip__label,
.rail-card__kicker, .rail-card__title, .drawer__title, .fopt__help,
.story-subtitle, .story-eyebrow, .finish__name, .tl-row__title, .tl-go__t,
.hcard__title, .next-row__title, .path-step__title { text-wrap: balance; }

/* Pieces that must stay together: "About 19 min", "1 Samuel 17",
   a story title inside a "→" list. Lines break only at "·" or "→". */
.keep { white-space: nowrap; }

/* Small book covers: long words get a smaller size instead of being cut. */
.cover2__title--sm { font-size: 14px; letter-spacing: -0.015em; }
.cover2__sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }

/* Stories page: the "Reading paths" intro had no room before the cards. */
.paths-shelf .bigstory__lede { margin: 2px 0 14px; }

/* Feelings stay inside Filters only (decided September 2026), on every
   screen size. They were still showing as a chip row on phones. */
.cat-quick { display: none !important; }

/* Parable and topic rows showed two lines and then "…", cutting the
   sentence off mid-thought. Show the whole line; the rows are short. */
.bookrow__d { display: block; -webkit-line-clamp: unset; overflow: visible; }

/* Parable and topic rows showed two lines and then "…", cutting the
   sentence off mid-thought. Show the whole line; the rows are short. */
.bookrow__d { display: block; -webkit-line-clamp: unset; overflow: visible; }
/* The timeline label is a sentence in a narrow side panel; make it a block
   so its lines balance ("Part 4 of 4: The King Arrives · Jesus"). */
.bigstrip__label { display: block; }
/* If the title font hasn't loaded, a long word hyphenates instead of being cut. */
.cover2__title--sm { hyphens: auto; }

/* ==========================================================================
   Headings: one system for every page (content design review, Sept 26 2026)

   Every page opens the same way:
     eyebrow  (optional) what kind of page this is: "Story · 1 Samuel 17"
     H1       the name people know and search for
     lede     one or two plain sentences: what's here, or what happens
   Then two heading sizes inside the page:
     section  h2 for parts of a page ("Stories you may already know")
     card     h2 inside a card or panel ("How it works")
   Eyebrows are grey, not lapis: lapis is only for things you can tap.
   ========================================================================== */
.ph-eyebrow.ph-eyebrow {
  display: block; margin: 0 0 8px;
  font-family: var(--font-ui); font-size: 14px; font-weight: 700; line-height: 1.35;
  letter-spacing: 0.01em; text-transform: none; color: var(--ink-faded);
}
.ph-eyebrow a { color: inherit; }
.ph-title.ph-title {
  margin: 0;
  font-family: var(--font-ui); font-weight: 600;
  font-size: clamp(32px, 1.35rem + 2.6vw, 44px);
  line-height: 1.1; letter-spacing: -0.03em; color: var(--ink);
  text-wrap: balance; max-width: 22ch;
}
.ph-title--home.ph-title--home {
  font-size: clamp(30px, 8.8vw, 56px); line-height: 1.05; max-width: none;
}
.ph-line { display: block; white-space: nowrap; }
@media (max-width: 340px) { .ph-line { white-space: normal; } }
.ph-lede.ph-lede {
  margin: 12px 0 0; max-width: 38rem;
  font-family: var(--font-body); font-size: clamp(17px, 1rem + 0.25vw, 19px);
  font-weight: 400; font-style: normal; line-height: 1.55; color: var(--ink-soft);
  text-wrap: pretty;
}
/* Pages that had their own spacing between title and lede */
.home4-hero__text { gap: 0; }
.cat-head { gap: 0; }
.story-v2 .story-subtitle.ph-lede { margin-bottom: 12px; }
.parable-also { margin-top: 8px; }

/* Home: the headline sits at the top of its column, level with the
   "New here?" card, instead of floating in the middle. */
@media (min-width: 1000px) { .home4-hero { align-items: start; } .home4-hero__text { padding-top: 24px; } }

/* Section headings: the same size and weight on every page. */
.home4-h2.home4-h2, .shelf2__title.shelf2__title, .stories-section__title.stories-section__title,
.parable-theme__title.parable-theme__title, .bible-test__title.bible-test__title,
.step__title.step__title, .verse-disambig-rest__h.verse-disambig-rest__h,
.about-page .prose h2, .tl-intro ~ section h2:not([class]) {
  font-family: var(--font-ui); font-weight: 600;
  font-size: clamp(22px, 1.2rem + 0.6vw, 26px);
  line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); text-transform: none;
}
/* Card and panel headings */
.start-card__title.start-card__title, .verse-panel__title.verse-panel__title,
.mem2__how-title.mem2__how-title, .cat-filters__title.cat-filters__title, .pv__title.pv__title,
.cmp-row__head.cmp-row__head {
  font-family: var(--font-ui); font-weight: 600;
  font-size: clamp(18px, 1rem + 0.3vw, 21px); line-height: 1.25; letter-spacing: -0.01em;
}
/* Small list labels ("Chapters", "For a hard day") */
.book-section-label.book-section-label, .book-chapters-label.book-chapters-label {
  font-family: var(--font-ui); font-size: 14px; font-weight: 700; letter-spacing: 0.01em;
  text-transform: none; color: var(--ink-faded);
}
.story-box__title.story-box__title { font-weight: 600; }

/* Space between every page head and the content under it */
.page-head { padding-bottom: 24px; }
.book-head, .parable-head { padding-bottom: 20px; }
/* A section heading and its one-line intro read as a pair */
.stories-section__title + .section-lede, .home4-h2 + p, .shelf2__title + p { margin-top: 6px; }
/* Timeline strip: "Part 4 of 4: The King Arrives" on one line, the era on
   the next, instead of breaking wherever the "·" fell. */
.bigstrip__era { display: block; font-weight: 500; color: var(--ink-soft); }
/* The kicker was a flex row, which put uneven gaps around each "·". */
.rail-card__kicker.rail-card__kicker { display: block; }
.rail-card__kicker .badge { margin-left: 4px; vertical-align: 1px; }

/* ---------- Section by Section: letters and prophets ----------
   Same page as a Scene by Scene story. Letters and prophecies get their
   own spine color on covers and cards, a "Read it side by side" callout
   at the top of the Read step, and "Follow the thread" notes that show
   how one section leads to the next. */
:root { --spine-letter: #2F5E6E; --spine-prophecy: #8A4A2F; }
@media (prefers-color-scheme: dark) {
  :root:not([data-fs-theme="light"]):not([data-fs-theme="white"]) { --spine-letter: #8FC3D1; --spine-prophecy: #E3A585; }
}
:root[data-fs-theme="dark"] { --spine-letter: #8FC3D1; --spine-prophecy: #E3A585; }
.cover2--letter .cover2__spine, .cat-card--letter .cat-card__spine { background: var(--spine-letter); }
.cover2--prophecy .cover2__spine, .cat-card--prophecy .cat-card__spine { background: var(--spine-prophecy); }

.side-callout { display: flex; align-items: center; gap: 14px; margin: 12px 0 6px; padding: 14px 16px; min-height: 44px; border-radius: 12px; background: var(--gold-wash); color: var(--ink); text-decoration: none; box-shadow: var(--card-shadow); transition: box-shadow .2s ease; }
.side-callout:hover { box-shadow: var(--card-shadow-hover); }
.side-callout:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.side-callout__icon { flex-shrink: 0; display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 10px; background: var(--gold); color: var(--on-gold); }
.side-callout__icon svg { width: 22px; height: 22px; }
.side-callout__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.side-callout__title { font-family: var(--font-ui); font-size: 17px; font-weight: 700; color: var(--gold-deep); }
.side-callout__sub { font-family: var(--font-body); font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.guide-note { font-family: var(--font-ui); font-size: 14px; line-height: 1.5; color: var(--ink-faded); margin: 8px 0 0; }

.story-thread { margin: 1.4em 0; padding: 12px 14px 12px 16px; border-left: 4px solid var(--gold); border-radius: 0 10px 10px 0; background: var(--paper-warm); }
.story-thread__label { display: block; font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--gold-deep); margin-bottom: 4px; }
.story-thread p { margin: 0 !important; font-size: 17px; line-height: 1.55; }
.cmp-thread { display: block; margin: .7em 0; padding: 10px 12px; border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; background: var(--paper-warm); font-size: 15px; line-height: 1.5; }
@media print { .side-callout { display: none; } .story-thread { background: none; border-left-color: #999; } }

/* Using this at church (2026-09-30): story and parable pages.
   Filled, not bordered, like the family cards on DLC and Luther's World. */
.church-use { margin: 32px 0 8px; padding: 20px 22px; background: var(--paper-warm); border-radius: var(--radius); }
.church-use__title { font-family: var(--font-book); font-size: 22px; line-height: 1.25; margin: 0 0 12px; color: var(--ink); }
.church-use__label { font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faded); margin: 16px 0 6px; }
.church-use__sundays { list-style: none; margin: 0; padding: 0; }
.church-use__sundays li { padding: 8px 0; border-top: 1px solid var(--rule); font-size: 16px; line-height: 1.5; color: var(--ink); }
.church-use__sundays a, .church-use__more a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.church-use__sunday { font-weight: 700; }
.church-use__reading { display: block; font-size: 14.5px; color: var(--ink-faded); }
.church-use__box { background: var(--paper); border-radius: var(--radius); padding: 14px 16px; }
.church-use__line { margin: 0 0 10px; font-size: 16px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; user-select: all; }
.church-use__copy { min-height: 44px; }
.church-use__more { margin: 14px 0 0; font-size: 16px; }
@media print { .church-use__copy { display: none; } }

/* --- Card-list pages at 1200px+: override the 3-column reading grid --- */
@media (min-width: 1200px) {
  /* Hub pages: simple block flow instead of rail + content + empty columns */
  .reading-column.needs-hub,
  .reading-column.parables-hub {
    display: block;
    padding: 28px 48px 64px;
  }
  /* Need detail pages: keep chapter-nav in the sticky rail column,
     but span the page head and verse cards across columns 2–3 */
  .reading-column.need-page {
    padding: 24px 48px 64px;
  }
  .reading-column.need-page > .page-head,
  .reading-column.need-page > .passage-list {
    grid-column: 2 / 4;
  }
  /* Two-column passage cards on wide screens */
  .reading-column.need-page .passage-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* --- Need pages: a working left rail (v60) ---
   Desktop: sticky rail with the verses on this page (the one you are
   reading is marked), a Send button, and the other feelings so you can
   move sideways. Below 1200px the rail shrinks to the back link and the
   other feelings appear as buttons after the verses. Neutral colors, per
   the design system: lapis only marks what you can tap or where you are. */
.passage { scroll-margin-top: 96px; }

.need-rail .need-toc, .need-rail .need-rail__send, .need-rail .need-others { display: none; }
.need-toc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.need-others__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.need-toc__link {
  display: grid; gap: 1px; padding: 6px 8px 6px 12px; border-radius: 0 8px 8px 0;
  border-left: 3px solid var(--rule); text-decoration: none; color: var(--ink);
  transition: background .15s, border-color .15s;
}
.need-toc__link:hover { background: var(--paper-warm); }
html[data-toc-on="p1"] [data-toc-link="p1"], html[data-toc-on="p2"] [data-toc-link="p2"], html[data-toc-on="p3"] [data-toc-link="p3"], html[data-toc-on="p4"] [data-toc-link="p4"], html[data-toc-on="p5"] [data-toc-link="p5"], html[data-toc-on="p6"] [data-toc-link="p6"], html[data-toc-on="p7"] [data-toc-link="p7"], html[data-toc-on="p8"] [data-toc-link="p8"] { border-left-color: var(--gold); background: var(--white); }
.need-toc__ref { font-family: var(--font-ui); font-size: 15px; font-weight: 700; }
html[data-toc-on="p1"] [data-toc-link="p1"] .need-toc__ref, html[data-toc-on="p2"] [data-toc-link="p2"] .need-toc__ref, html[data-toc-on="p3"] [data-toc-link="p3"] .need-toc__ref, html[data-toc-on="p4"] [data-toc-link="p4"] .need-toc__ref, html[data-toc-on="p5"] [data-toc-link="p5"] .need-toc__ref, html[data-toc-on="p6"] [data-toc-link="p6"] .need-toc__ref, html[data-toc-on="p7"] [data-toc-link="p7"] .need-toc__ref, html[data-toc-on="p8"] [data-toc-link="p8"] .need-toc__ref { color: var(--gold); }
.need-toc__frame {
  font-size: 13.5px; line-height: 1.35; color: var(--ink-faded);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.need-rail__send { width: 100%; }
.need-others__sub { margin-top: 12px; }
.need-others__link {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px;
  background: var(--white); box-shadow: inset 0 0 0 1.5px var(--rule);
  font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.need-others__link:hover { box-shadow: inset 0 0 0 1.5px var(--gold); color: var(--gold); }
.need-others__link.is-on { background: var(--gold); color: var(--on-gold); box-shadow: none; }
.need-toc__link:focus-visible, .need-others__link:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.need-more { padding: 8px 0 12px; }
.need-more .book-section-label { margin-bottom: 12px; }
.need-more .need-others__link { min-height: 44px; padding: 0 16px; font-size: 15px; }
@media (max-width: 1199px) { .need-rail { margin-bottom: 8px; } }

@media (min-width: 1200px) {
  .need-rail .need-toc, .need-rail .need-others { display: block; }
  .need-rail .need-rail__send { display: inline-flex; }
  .reading-column.need-page > .need-more { display: none; }
  /* A little wider than the standard 208px rail: the verse cards span the
     rest of the frame, and the rail carries summaries and tags. */
  .reading-column.need-page { grid-template-columns: 248px minmax(0, 1fr); }
  .reading-column.need-page > .page-head,
  .reading-column.need-page > .passage-list { grid-column: 2 / -1; }
  .reading-column.need-page > .need-rail { gap: 20px; padding: 2px 4px 12px 2px; }
}
[data-fs-focus="on"] .need-more { display: none; }
@media print { .need-rail, .need-more { display: none; } }
.no-webshare [data-share-verse] { display: none; }
@media (min-width: 1200px) and (max-height: 780px) { .need-toc__frame { display: none; } }

/* Chevron drawn in CSS (same shape and color as the inline SVG). Used on
   long repeated lists, like the verse lookup pages, to keep pages light. */
.chev-css {
  display: inline-block; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}

/* --- Search page: same wide frame as the other list pages (v62) ---
   The search box stays a comfortable width; results use two columns on
   wider screens. The top "Open" suggestion spans the full width. */
.reading-column.search-page { max-width: 78rem; }
.search-page .search-box { max-width: 720px; }
.search-go { max-width: 720px; margin-bottom: 18px; }
.search-hit--go { border-color: var(--gold); box-shadow: inset 4px 0 0 var(--gold); }
.search-hit--go .search-hit__kind::after { content: "  \2192  press Enter"; font-weight: 600; color: var(--ink-faded); }
@media (hover: none) { .search-hit--go .search-hit__kind::after { content: "  \2192"; } }
@media (min-width: 600px) {
  .search-page .search-shortcuts__list,
  .search-page .search-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
  .search-page .search-results > .search-empty { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .reading-column.search-page { padding: 0 48px 64px; }
}
@media (min-width: 1200px) {
  .reading-column.search-page { display: block; padding: 28px 48px 64px; }
}

/* --- Phones: get to the Bible text sooner (v62) ---
   Chapter and story pages stack the timeline, tools, and story card above
   the text. On phones they are tighter so verse 1 shows on the first
   screen. Nothing is removed except the story card's second button, which
   repeats the "Side by side" tool right above it. */
@media (max-width: 699px) {
  .bigstrip { padding: 10px 12px; gap: 6px; margin-top: 8px; }
  .bigstrip__kicker { display: none; }
  .bigstrip__label { font-size: 14px; }
  .bigstrip__era { display: inline; margin-left: 6px; font-size: 13px; }
  .bigstrip__nav { gap: 8px; }
  .bigstrip__link { min-height: 44px; padding: 6px 10px; }

  .reading-column--rail .rail__tools { gap: 8px; }
  .reading-column--rail .rail-btn { min-height: 40px; padding: 0 12px; font-size: 14px; }
  .reading-column--rail .rail-jump > span:first-child { display: none; }
  /* Row 1: Translation and Verse. Row 2: Side by side and Focus. */
  .reading-column--rail .trans-menu > summary .trans-list__abbr { display: none; }
  .reading-column--rail .rail__tools > .rail-jump { order: 1; }
  .reading-column--rail .rail__tools > .rail-btn:not(.rail-jump) { order: 2; }

  .reading-column--rail .chapter-story.rail-card { padding: 12px 14px; gap: 4px; }
  .reading-column--rail .rail-card__acts .btn--line { display: none; }
  .reading-column--rail .rail-card__acts .btn { min-height: 44px; }
}

/* --- Verse lookup pages (/verse/11-55/): same frame as the need pages (v63) ---
   Wide screens: a left column with "Look up another verse" and links to
   every book on the page; results in two columns, grouped by Testament.
   Phones: the lookup box sits at the top, then the results. */
.reading-column.lookup-page { max-width: 78rem; }
.lookup-rail .lookup-jump { display: none; }
.lookup-form { margin: 0; }
.lookup-form__row { display: flex; gap: 8px; }
.lookup-form__input {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: 10px;
  border: 1.5px solid var(--rule); background: var(--white); color: var(--ink);
  font-family: var(--font-ui); font-size: 16px;
}
.lookup-form__input:focus { outline: none; border-color: var(--gold); }
.lookup-form__go { min-height: 44px; flex: none; }
.lookup-group { margin-top: 18px; }
.lookup-group__label { font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--ink-faded); margin: 0 0 10px; }
.lookup-grid .hcard { scroll-margin-top: 96px; }
.lookup-grid .hcard:target { border-color: var(--gold); box-shadow: inset 4px 0 0 var(--gold); }
@media (max-width: 1199px) { .lookup-rail { margin-bottom: 4px; } }
@media (min-width: 700px) {
  .lookup-page .lookup-form { max-width: 420px; }
  .lookup-page .lookup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (min-width: 900px) {
  .reading-column.lookup-page { padding: 0 48px 64px; }
}
@media (min-width: 1200px) {
  .reading-column.lookup-page { padding: 24px 48px 64px; grid-template-columns: 248px minmax(0, 1fr); }
  .reading-column.lookup-page > *:not(.lookup-rail) { grid-column: 2 / -1; }
  .reading-column.lookup-page > .lookup-rail { gap: 20px; padding: 2px 4px 12px 2px; }
  .lookup-rail .lookup-jump { display: block; }
  .lookup-page .lookup-form { max-width: none; }
  .lookup-page .verse-disambig-primary { max-width: 760px; }
}
/* Keep the lookup column inside its 248px: the text box's default width
   was pushing it wider, which cut off the book links. */
.lookup-rail { grid-template-columns: minmax(0, 1fr); }
.lookup-form__input { width: 100%; }
.lookup-rail .lookup-form__go { width: auto; padding: 0 16px; }