/* ── Skip to content ── */
    .skip-to-content {
      position: absolute;
      top: -100px;
      left: 16px;
      z-index: 1000;
      padding: 12px 24px;
      background: var(--gold-mid);
      color: var(--deep-brown);
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
      border-radius: 2px;
      transition: top 0.2s;
    }

    .skip-to-content:focus {
      top: 12px;
    }

    /* ── Scripture-mode layout ── iOS-aligned: sticky scripture-bar at the top,
       single content column underneath. The global site-nav is hidden
       on /scriptures.html via body.scripture-mode (set by nav.js). */
    body.scripture-mode .site-nav { display: none !important; }

    .scripture-app {
      display: block;
      min-height: 100vh;
      /* compensates for the sticky .scripture-bar height + iOS top inset */
      padding-top: calc(56px + env(safe-area-inset-top, 0px));
    }

    /* ── Scripture-mode top bar ── */
    .scripture-bar {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 80;
      display: flex;
      align-items: center;
      gap: 8px;
      height: 56px;
      padding: 0 14px;
      padding-top: env(safe-area-inset-top, 0px);
      background: rgba(10, 8, 5, 0.86);
      backdrop-filter: blur(18px) saturate(120%);
      -webkit-backdrop-filter: blur(18px) saturate(120%);
      border-bottom: 1px solid rgba(168, 116, 42, 0.14);
      transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    /* Focus mode — the bar slips away as you read down, returns on scroll-up. */
    .scripture-bar.is-hidden { transform: translateY(-100%); }

    /* Reading-progress hairline — a thin gold fill at the very top. */
    .reading-progress {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 3px;
      z-index: 90;
      pointer-events: none;
      background: transparent;
    }
    .reading-progress__fill {
      display: block;
      height: 100%;
      width: 0;
      /* Warm bronze KodeshGold — deep to mid, no thin yellow. */
      background: linear-gradient(to right, #8a6320, #A8742A);
      box-shadow: 0 0 8px rgba(168, 116, 42, 0.5);
      transition: width 0.1s linear;
    }
    @media (prefers-reduced-motion: reduce) {
      .scripture-bar { transition: none; }
      .scripture-bar.is-hidden { transform: none; }
      .reading-progress__fill { transition: none; }
    }

    /* ── Persistent chapter index — always-visible chapter nav ────────────
       Mobile: a sticky horizontal strip just under the top bar (rides up with
       it in focus mode). Desktop: a fixed vertical rail in the left margin. */
    .chapter-index {
      position: sticky;
      top: 56px;
      z-index: 70;
      display: flex;
      gap: 4px;
      overflow-x: auto;
      padding: 7px 14px;
      background: rgba(10, 8, 5, 0.9);
      backdrop-filter: blur(14px) saturate(120%);
      -webkit-backdrop-filter: blur(14px) saturate(120%);
      border-bottom: 1px solid rgba(168, 116, 42, 0.12);
      scrollbar-width: none;
      transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .chapter-index::-webkit-scrollbar { display: none; }
    .chapter-index.is-hidden { transform: translateY(calc(-100% - 56px)); }
    .chapter-index[hidden] { display: none; }
    .chapter-index__item {
      flex: 0 0 auto;
      min-width: 30px;
      text-align: center;
      padding: 5px 8px;
      border-radius: 6px;
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      line-height: 1;
      color: var(--amber-dim);
      text-decoration: none;
      transition: color 0.15s ease, background 0.15s ease;
    }
    .chapter-index__item:hover { color: var(--gold-light); }
    .chapter-index__item.is-current {
      color: var(--deep-brown);
      background: var(--gold-mid);
      font-weight: 600;
    }

    @media (min-width: 1180px) {
      .chapter-index {
        position: fixed;
        top: 88px;
        left: clamp(16px, 4vw, 56px);
        bottom: 28px;
        width: 64px;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        gap: 1px;
        padding: 6px 10px 6px 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        border-right: 1px solid rgba(168, 116, 42, 0.14);
      }
      .chapter-index.is-hidden { transform: none; }  /* rail stays on desktop */
      .chapter-index__item { min-width: 0; padding: 3px 8px; text-align: right; font-size: 12.5px; }
    }

    /* In-chapter section index — desktop-only right rail, shown only when the
       chapter has >=2 section-markers; scrollspy-highlights as you read. */
    .section-index { display: none; }
    @media (min-width: 1180px) {
      .section-index:not([hidden]) {
        display: flex;
        flex-direction: column;
        gap: 2px;
        position: fixed;
        top: 88px;
        right: clamp(16px, 4vw, 56px);
        bottom: 28px;
        width: 168px;
        overflow-y: auto;
        overflow-x: hidden;
        border-left: 1px solid rgba(168, 116, 42, 0.14);
        padding-left: 12px;
      }
      .section-index__item {
        font-family: 'Inter', sans-serif;
        font-size: 11.5px;
        line-height: 1.35;
        color: var(--amber-dim);
        text-decoration: none;
        padding: 4px 0 4px 9px;
        margin-left: -1px;
        border-left: 2px solid transparent;
        transition: color 0.15s ease, border-color 0.15s ease;
      }
      .section-index__item:hover { color: var(--gold-light); }
      .section-index__item.is-current { color: var(--parchment); border-left-color: var(--gold-mid); }
    }
    .scripture-bar__home {
      flex: 0 0 auto;
      width: 38px; height: 38px;
      display: inline-flex;
      align-items: center; justify-content: center;
      border-radius: 50%;
      color: var(--amber-dim);
      text-decoration: none;
      transition: color 0.18s ease, background 0.18s ease;
    }
    .scripture-bar__home:hover {
      color: var(--gold-mid);
      background: rgba(168, 116, 42, 0.08);
    }
    .scripture-bar__pill {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px 7px 14px;
      background: transparent;
      border: 1px solid rgba(168, 116, 42, 0.22);
      border-radius: 999px;
      color: var(--parchment);
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.01em;
      cursor: pointer;
      max-width: min(60vw, 260px);
      transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
    }
    .scripture-bar__pill:hover, .scripture-bar__pill:focus-visible {
      border-color: var(--gold-mid);
      background: rgba(168, 116, 42, 0.06);
    }
    .scripture-bar__pill:focus-visible {
      outline: 2px solid var(--gold-mid);
      outline-offset: 2px;
    }
    .scripture-bar__pill-name {
      font-weight: 500;
      letter-spacing: 0.01em;
      color: var(--parchment);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .scripture-bar__pill.is-reading .scripture-bar__pill-num {
      display: inline-block;
      font-family: 'Inter', sans-serif;
      font-style: normal;
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.18em;
      padding: 2px 7px;
      border-radius: 6px;
      background: rgba(168, 116, 42, 0.18);
      color: var(--gold-light);
    }
    .scripture-bar__pill-num:empty { display: none; }
    .scripture-bar__pill-chev {
      flex: 0 0 auto;
      opacity: 0.55;
      transition: transform 0.2s ease;
    }
    .scripture-bar__pill:hover .scripture-bar__pill-chev { transform: translateY(1px); }
    .scripture-bar__eyebrow {
      flex: 1 1 auto;
      min-width: 0;
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--amber-dim);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .scripture-bar__spacer { flex: 1 1 auto; }
    .scripture-bar__icon {
      flex: 0 0 auto;
      width: 38px; height: 38px;
      border: 0;
      background: transparent;
      color: var(--amber-dim);
      border-radius: 50%;
      cursor: pointer;
      display: inline-flex;
      align-items: center; justify-content: center;
      transition: color 0.18s ease, background 0.18s ease;
    }
    .scripture-bar__icon:hover, .scripture-bar__icon:focus-visible {
      color: var(--gold-mid);
      background: rgba(168, 116, 42, 0.08);
    }
    .scripture-bar__icon:focus-visible {
      outline: 2px solid var(--gold-mid);
      outline-offset: 2px;
    }
    .scripture-bar__aa {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px; height: 18px;
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: -0.01em;
      line-height: 1;
    }
    @media (max-width: 540px) {
      .scripture-bar { gap: 4px; padding: 0 8px; }
      .scripture-bar__eyebrow { display: none; }
      .scripture-bar__pill { font-size: 15px; padding: 6px 10px 6px 12px; max-width: 50vw; }
      .scripture-bar__icon { width: 36px; height: 36px; }
    }

    /* ── Sheets / overlays — shared base ── */
    body.scripture-overlay-open { overflow: hidden; }

    .scripture-sheet {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }
    .scripture-sheet[hidden] { display: none; }
    @media (min-width: 720px) {
      .scripture-sheet { align-items: center; }
    }
    .scripture-sheet__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(8, 6, 3, 0.7);
      backdrop-filter: blur(10px) saturate(120%);
      -webkit-backdrop-filter: blur(10px) saturate(120%);
      opacity: 0;
      transition: opacity 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .scripture-sheet[data-state="open"] .scripture-sheet__backdrop { opacity: 1; }
    .scripture-sheet[data-state="closing"] .scripture-sheet__backdrop { opacity: 0; }
    .scripture-sheet__panel {
      position: relative;
      width: 100%;
      max-height: 88vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      /* Liquid-glass sheet — chrome material echoing the iOS app. Warm gold
         halo layered over the translucent glass tint; degrades to the opaque
         --glass-solid-strong on unsupported / reduced-transparency clients. */
      background:
        radial-gradient(ellipse at 100% 0%, rgba(168,116,42,0.14) 0%, transparent 60%),
        var(--glass-tint-strong, #100c07);
      backdrop-filter: var(--glass-blur, blur(20px) saturate(135%));
      -webkit-backdrop-filter: var(--glass-blur, blur(20px) saturate(135%));
      border-top: 1px solid var(--glass-border, rgba(196, 144, 64, 0.22));
      border-radius: 18px 18px 0 0;
      box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.55), var(--glass-highlight, inset 0 1px 0 rgba(255,226,170,0.10));
      transform: translateY(100%);
      transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    @media (min-width: 720px) {
      .scripture-sheet__panel {
        max-width: 560px;
        max-height: 80vh;
        border-radius: 18px;
        border: 1px solid var(--glass-border, rgba(196, 144, 64, 0.22));
        transform: scale(0.96) translateY(-8px);
        opacity: 0;
        transition:
          transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
          opacity 0.22s ease;
      }
      .scripture-sheet[data-state="open"] .scripture-sheet__panel {
        transform: scale(1) translateY(0);
        opacity: 1;
      }
      .scripture-sheet[data-state="closing"] .scripture-sheet__panel {
        transform: scale(0.97) translateY(-6px);
        opacity: 0;
      }
    }
    @media (max-width: 719px) {
      .scripture-sheet[data-state="open"] .scripture-sheet__panel { transform: translateY(0); }
      .scripture-sheet[data-state="closing"] .scripture-sheet__panel { transform: translateY(100%); }
    }
    .scripture-sheet__handle {
      width: 40px; height: 4px;
      background: rgba(168, 116, 42, 0.32);
      border-radius: 2px;
      margin: 10px auto 4px;
      flex: 0 0 auto;
    }
    @media (min-width: 720px) { .scripture-sheet__handle { display: none; } }
    .scripture-sheet__head {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 16px 14px;
      border-bottom: 1px solid rgba(168, 116, 42, 0.14);
    }
    .scripture-sheet__title {
      flex: 1 1 auto;
      margin: 0;
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--gold-mid);
      font-weight: 500;
    }
    .scripture-sheet__search {
      flex: 1 1 auto;
      background: rgba(0, 0, 0, 0.25);
      border: 1px solid rgba(168, 116, 42, 0.18);
      border-radius: 999px;
      padding: 8px 14px;
      color: var(--parchment);
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      transition: border-color 0.18s ease;
    }
    .scripture-sheet__search:focus { border-color: var(--gold-mid); }
    .scripture-sheet__search:focus-visible {
      outline: 2px solid var(--gold-mid);
      outline-offset: 2px;
    }
    .scripture-sheet__search::placeholder { color: var(--amber-dim); }
    .scripture-sheet__search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
    .scripture-sheet__search::-webkit-search-decoration { -webkit-appearance: none; }
    .scripture-sheet__close {
      flex: 0 0 auto;
      width: 32px; height: 32px;
      border-radius: 50%;
      border: 1px solid rgba(168, 116, 42, 0.22);
      background: transparent;
      color: var(--amber-dim);
      font-size: 18px;
      cursor: pointer;
      line-height: 1;
    }
    .scripture-sheet__close:hover { color: var(--gold-mid); border-color: var(--gold-mid); }
    .scripture-sheet__tabs {
      display: flex;
      gap: 6px;
      padding: 10px 16px 12px;
      border-bottom: 1px solid rgba(168, 116, 42, 0.10);
      flex: 0 0 auto;
    }
    .scripture-sheet__tab {
      flex: 0 0 auto;
      padding: 6px 14px;
      background: transparent;
      border: 1px solid rgba(168, 116, 42, 0.20);
      border-radius: 999px;
      color: var(--amber-dim);
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      cursor: pointer;
      transition: color 0.18s, border-color 0.18s, background 0.18s;
    }
    .scripture-sheet__tab:hover { color: var(--gold-light); border-color: var(--gold-light); }
    .scripture-sheet__tab.is-active {
      color: var(--gold-mid);
      border-color: var(--gold-mid);
      background: rgba(168, 116, 42, 0.10);
    }
    .scripture-sheet__body {
      flex: 1 1 auto;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 8px 16px 24px;
    }
    .scripture-sheet__section { margin-top: 14px; }
    .scripture-sheet__section:first-child { margin-top: 4px; }
    .scripture-sheet__section-title {
      margin: 0 0 6px;
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--amber-dim);
      font-weight: 500;
    }
    .scripture-sheet__books {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .scripture-sheet__book-btn {
      display: flex;
      align-items: baseline;
      gap: 10px;
      width: 100%;
      padding: 10px 12px;
      background: transparent;
      border: 0;
      border-radius: 8px;
      color: var(--parchment);
      cursor: pointer;
      text-align: left;
      transition: background 0.15s ease;
      font-family: 'Inter', sans-serif;
    }
    .scripture-sheet__book-btn:hover {
      background: rgba(168, 116, 42, 0.08);
    }
    .scripture-sheet__book.is-expanded > .scripture-sheet__book-btn {
      background: rgba(168, 116, 42, 0.10);
      color: var(--gold-light);
    }
    .scripture-sheet__book-heb {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 15px;
      flex: 0 0 auto;
      color: var(--gold-mid);
    }
    .scripture-sheet__book-name {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      flex: 1 1 auto;
      color: var(--sand);
    }
    .scripture-sheet__book-count {
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      letter-spacing: 0.18em;
      color: var(--amber-dim);
      flex: 0 0 auto;
    }
    /* Sheet two-pane: books view + chapter-grid view, swap by [hidden] */
    .scripture-sheet__view {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      animation: sheet-view-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .scripture-sheet__view[hidden] { display: none; }
    @keyframes sheet-view-in {
      from { opacity: 0; transform: translateX(8px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    .scripture-sheet__view--books {
      animation-name: sheet-view-in-back;
    }
    @keyframes sheet-view-in-back {
      from { opacity: 0; transform: translateX(-8px); }
      to   { opacity: 1; transform: translateX(0); }
    }

    .scripture-sheet__head--drill {
      gap: 12px;
    }
    .scripture-sheet__back {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 6px 8px 6px 4px;
      background: transparent;
      border: 0;
      color: var(--gold-mid);
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.005em;
      border-radius: 6px;
      transition: color 0.15s, background 0.15s;
    }
    .scripture-sheet__back:hover { color: var(--gold-light); background: rgba(168,116,42,0.06); }
    .scripture-sheet__drill-title {
      flex: 1 1 auto;
      margin: 0;
      text-align: center;
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 8px;
      min-width: 0;
    }
    .scripture-sheet__drill-heb {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 17px;
      color: var(--gold-mid);
    }
    .scripture-sheet__drill-en {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 500;
      color: var(--parchment);
    }

    .scripture-sheet__body--grid {
      padding: 18px 16px 22px;
    }

    .scripture-sheet__chapter-btn {
      padding: 0;
      width: 100%;
      aspect-ratio: 1 / 1;
      background: rgba(0, 0, 0, 0.30);
      border: 1px solid rgba(168, 116, 42, 0.16);
      border-radius: 8px;
      color: var(--sand);
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.12s;
    }
    .scripture-sheet__chapter-btn:hover {
      color: var(--gold-mid);
      border-color: var(--gold-mid);
      background: rgba(168, 116, 42, 0.10);
    }
    .scripture-sheet__chapter-btn:active { transform: scale(0.96); }
    .scripture-sheet__body--grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
      gap: 6px;
    }

    .scripture-sheet__book-chev {
      flex: 0 0 auto;
      opacity: 0.45;
      color: var(--amber-dim);
    }
    .scripture-sheet__book-btn:hover .scripture-sheet__book-chev {
      opacity: 0.85;
      color: var(--gold-mid);
    }
    .scripture-sheet__empty {
      padding: 28px 8px;
      text-align: center;
      color: var(--amber-dim);
      font-family: 'Inter', sans-serif;
      font-size: 13px;
    }

    /* Font sheet specifics */
    .scripture-sheet--font .scripture-sheet__panel { max-width: 480px; }
    .font-sheet__row {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 18px 22px 6px;
    }
    .font-sheet__a {
      flex: 0 0 auto;
      font-family: 'Cormorant Garamond', serif;
      color: var(--amber-dim);
      line-height: 1;
    }
    .font-sheet__a--small { font-size: 14px; }
    .font-sheet__a--large { font-size: 22px; }
    .font-sheet__slider {
      flex: 1 1 auto;
      -webkit-appearance: none;
      appearance: none;
      background: transparent;
      height: 28px;
    }
    .font-sheet__slider::-webkit-slider-runnable-track {
      height: 3px;
      border-radius: 2px;
      background: linear-gradient(to right, rgba(168,116,42,0.4), rgba(168,116,42,0.18));
    }
    .font-sheet__slider::-moz-range-track {
      height: 3px;
      border-radius: 2px;
      background: linear-gradient(to right, rgba(168,116,42,0.4), rgba(168,116,42,0.18));
    }
    .font-sheet__slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 18px; height: 18px;
      border-radius: 50%;
      background: var(--gold-mid);
      border: 2px solid rgba(20, 14, 8, 0.9);
      box-shadow: 0 2px 6px rgba(168,116,42,0.4);
      margin-top: -8px;
      cursor: pointer;
    }
    .font-sheet__slider::-moz-range-thumb {
      width: 18px; height: 18px;
      border-radius: 50%;
      background: var(--gold-mid);
      border: 2px solid rgba(20, 14, 8, 0.9);
      box-shadow: 0 2px 6px rgba(168,116,42,0.4);
      cursor: pointer;
    }
    .font-sheet__preview {
      margin: 4px 22px 18px;
      padding: 14px 16px;
      background: rgba(0, 0, 0, 0.22);
      border: 1px solid rgba(168, 116, 42, 0.12);
      border-radius: 10px;
      font-family: 'Lora', Georgia, serif;
      font-size: 20px;
      line-height: 1.65;
      color: var(--parchment);
      transition: font-size 0.15s ease;
    }
    .font-sheet__group { padding: 0 22px 16px; }
    .font-sheet__group-label {
      display: block;
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--amber-dim);
      margin-bottom: 8px;
    }
    .font-sheet__check {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      color: var(--sand);
    }
    .font-sheet__check input { accent-color: var(--gold-mid); }
    .font-sheet__width-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 6px;
    }
    .font-sheet__width {
      padding: 10px 0;
      background: rgba(0, 0, 0, 0.25);
      border: 1px solid rgba(168, 116, 42, 0.18);
      border-radius: 8px;
      color: var(--amber-dim);
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background 0.15s;
    }
    .font-sheet__width:hover { color: var(--gold-light); border-color: var(--gold-light); }
    .font-sheet__width.is-active {
      color: var(--gold-mid);
      border-color: var(--gold-mid);
      background: rgba(168, 116, 42, 0.10);
    }

    /* Search overlay specifics */
    .scripture-sheet--search .scripture-sheet__panel { max-width: 720px; }
    .scripture-search-overlay__filters {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 12px 16px 8px;
      border-bottom: 1px solid rgba(168, 116, 42, 0.10);
    }
    .scripture-search-overlay__opts {
      display: flex;
      flex-wrap: wrap;
      gap: 14px 18px;
      align-items: center;
      padding: 12px 16px;
      border-bottom: 1px solid rgba(168, 116, 42, 0.10);
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      color: var(--sand);
    }
    .scripture-search-overlay__opts label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
    }
    .scripture-search-overlay__opts input { accent-color: var(--gold-mid); }
    .scripture-search-overlay__hint {
      margin-left: auto;
      color: var(--amber-dim);
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }
    .scripture-search-overlay__history { padding: 12px 16px 18px; }
    .scripture-search-overlay__history:empty { display: none; }
    .scripture-search-overlay__history-label {
      display: block;
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--amber-dim);
      margin-bottom: 8px;
    }
    .scripture-search-overlay__history-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .scripture-search-overlay__history-pill {
      padding: 5px 11px;
      background: rgba(0, 0, 0, 0.25);
      border: 1px solid rgba(168, 116, 42, 0.18);
      border-radius: 999px;
      color: var(--sand);
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s, background 0.15s;
    }
    .scripture-search-overlay__history-pill:hover {
      color: var(--gold-mid);
      border-color: var(--gold-mid);
      background: rgba(168, 116, 42, 0.08);
    }

    /* Overflow menu specifics */
    .scripture-sheet--overflow .scripture-sheet__panel { max-width: 380px; }
    .overflow-menu__list {
      list-style: none;
      padding: 8px 8px 16px;
      margin: 0;
    }
    .overflow-menu__item {
      display: flex;
      align-items: center;
      gap: 14px;
      width: 100%;
      padding: 12px 14px;
      background: transparent;
      border: 0;
      border-radius: 8px;
      color: var(--parchment);
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      cursor: pointer;
      text-align: left;
      transition: background 0.15s ease;
    }
    .overflow-menu__item:hover { background: rgba(168, 116, 42, 0.08); }
    .overflow-menu__icon {
      flex: 0 0 auto;
      width: 24px;
      text-align: center;
      color: var(--gold-mid);
      font-family: 'Cormorant Garamond', serif;
      font-size: 16px;
    }
    .overflow-menu__label { flex: 1 1 auto; }

    /* Reader-width modes — written to body[data-reading-width] by font sheet */
    body[data-reading-width="narrow"]       #chapterContent { max-width: 560px; }
    body[data-reading-width="comfortable"]  #chapterContent { max-width: 720px; }
    body[data-reading-width="wide"]         #chapterContent { max-width: 920px; }

    /* Welcome screen CTA row */
    .welcome-cta-row {
      display: flex;
      gap: 12px;
      justify-content: center;
      margin-top: 24px;
      flex-wrap: wrap;
    }
    .welcome-cta {
      padding: 12px 22px;
      background: transparent;
      border: 1px solid rgba(168, 116, 42, 0.32);
      border-radius: 999px;
      color: var(--sand);
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      cursor: pointer;
      transition: color 0.18s, border-color 0.18s, background 0.18s;
    }
    .welcome-cta--primary {
      background: var(--gold-mid);
      color: var(--deep-brown);
      border-color: var(--gold-mid);
    }
    .welcome-cta--primary:hover {
      background: var(--gold-light);
      border-color: var(--gold-light);
    }
    .welcome-cta:not(.welcome-cta--primary):hover {
      color: var(--gold-mid);
      border-color: var(--gold-mid);
    }

    /* ── Chapter hero (iOS port) ─────────────────────────────── */
    .chapter-hero {
      max-width: 720px;
      margin: 16px auto 40px;
      padding: 0 20px;
      text-align: center;
    }

    /* Top progress strip — Ch X / N · bar · ~Y min */
    .chapter-hero__progress {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 28px;
    }
    .chapter-hero__pos {
      flex: 0 0 auto;
      font-family: 'Inter', sans-serif;
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: 0.20em;
      text-transform: uppercase;
      color: var(--gold-mid);
    }
    .chapter-hero__sep {
      opacity: 0.45;
      margin: 0 1px;
    }
    .chapter-hero__bar {
      flex: 1 1 auto;
      height: 1px;
      background: rgba(168, 116, 42, 0.20);
      border-radius: 1px;
      position: relative;
      overflow: hidden;
    }
    .chapter-hero__bar-fill {
      position: absolute;
      left: 0; top: 0; bottom: 0;
      background: var(--gold-mid);
      transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .chapter-hero__time {
      flex: 0 0 auto;
      font-family: 'Inter', sans-serif;
      font-size: 10.5px;
      font-weight: 500;
      letter-spacing: 0.06em;
      color: var(--amber-dim);
      font-style: italic;
    }

    .chapter-hero__eyebrow {
      display: block;
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold-mid);
      margin-bottom: 12px;
    }
    .chapter-hero__title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: clamp(40px, 7vw, 64px);
      line-height: 1.05;
      color: var(--parchment);
      margin: 0 0 16px;
      letter-spacing: -0.005em;
    }
    .chapter-hero__sub {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: clamp(17px, 2.4vw, 21px);
      line-height: 1.4;
      color: var(--gold-light);
      margin: 0 0 18px;
      max-width: 28em;
      margin-left: auto;
      margin-right: auto;
    }
    .chapter-hero__connection {
      position: relative;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: clamp(15px, 2vw, 18px);
      line-height: 1.55;
      color: var(--sand);
      margin: 0 auto;
      padding: 22px 0;
      max-width: 32em;
    }
    /* Diamond rule ornament above + below — matches iOS KodeshWayDiamondRule. */
    .chapter-hero__connection::before,
    .chapter-hero__connection::after {
      content: '\2756';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-family: Georgia, 'Cormorant Garamond', serif;
      font-size: 14px;
      font-style: normal;
      color: var(--gold-mid);
      line-height: 1;
    }
    .chapter-hero__connection::before { top: 0; }
    .chapter-hero__connection::after  { bottom: 0; }

    /* ── Inline section markers ──
       Diamond-rule canon (iOS KodeshWayDiamondTitleRule):
       ──── ❖ HEADING ❖ ────  with 0.5pt gold hairlines @ 45% alpha. */
    .verse-list .section-marker {
      list-style: none;
      margin: 36px 0 24px;
      padding: 0;
      text-align: center;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }
    .section-marker__heading {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold-mid);
      max-width: 26em;
    }
    .section-marker__rule {
      width: 56px;
      height: 1px;
      background: rgba(168, 116, 42, 0.45);
    }
    .section-marker__diamond {
      font-family: Georgia, 'Cormorant Garamond', serif;
      font-size: 13px;
      color: var(--gold-mid);
      line-height: 1;
    }
    .section-marker__desc {
      flex: 1 0 100%;
      margin: 6px auto 0;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 15px;
      line-height: 1.55;
      color: var(--amber-dim);
      max-width: 32em;
      padding: 0 12px;
    }

    /* ── Before You Read (iOS + print parity) ──
       Gold hairline border, no fill (parchment shows through), left-aligned
       groups (Setting / What's Happening / Pay Attention To), Lumen attrib
       bottom-right in ember red (#8B3A14 — same token as print). */
    .before-you-read {
      display: block;
      max-width: 640px;
      margin: 0 auto 36px;
      padding: 18px 20px 14px;
      border: 1px solid rgba(168, 116, 42, 0.45);
      border-radius: 4px;
      position: relative;
    }
    .before-you-read__group {
      margin-bottom: 14px;
    }
    .before-you-read__group:last-of-type {
      margin-bottom: 6px;
    }
    .before-you-read__eyebrow {
      display: block;
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold-mid);
      margin-bottom: 6px;
    }
    .before-you-read__line {
      margin: 0 0 2px;
      font-family: 'Lora', Georgia, serif;
      font-size: 14.5px;
      line-height: 1.55;
      color: var(--parchment);
    }
    .before-you-read__line--quiet {
      font-style: italic;
      color: var(--sand);
    }
    .before-you-read__list {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .before-you-read__list li {
      font-family: 'Lora', Georgia, serif;
      font-size: 14.5px;
      line-height: 1.55;
      color: var(--parchment);
      padding-left: 16px;
      position: relative;
      margin-bottom: 3px;
    }
    .before-you-read__list li::before {
      content: '•';
      color: var(--gold-mid);
      position: absolute;
      left: 2px;
      top: 0;
    }
    .before-you-read__attrib {
      display: block;
      text-align: right;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 13px;
      color: #8B3A14;
      margin-top: 8px;
      letter-spacing: 0.01em;
    }

    /* ── Chapter closer (Leave You With This — print spec §3d) ──
       Gold rule, Inter caps eyebrow, Lora italic reflection, Cormorant gold
       caps carry centred, KodeshGold dot ornament. Every reflection +
       every carry names Yeshua directly (authored set, 1,189 chapters). */
    .chapter-closer {
      display: block;
      max-width: 640px;
      margin: 40px auto 32px;
      padding: 0 4px;
      text-align: left;
    }
    .chapter-closer__rule {
      display: block;
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(168, 116, 42, 0.55) 18%, rgba(168, 116, 42, 0.55) 82%, transparent);
      margin: 0 0 18px;
    }
    .chapter-closer__eyebrow {
      display: block;
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold-mid);
      margin-bottom: 14px;
    }
    .chapter-closer__reflection {
      margin: 0 0 18px;
      font-family: 'Lora', Georgia, serif;
      font-style: italic;
      font-size: 15.5px;
      line-height: 1.65;
      color: var(--parchment);
    }
    .chapter-closer__carry {
      margin: 0 auto 16px;
      max-width: 78%;
      text-align: center;
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: 17px;
      line-height: 1.4;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--gold-mid);
    }
    .chapter-closer__ornament {
      display: block;
      text-align: center;
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      color: var(--gold-mid);
      letter-spacing: 0.18em;
    }

    /* ── Book frontispiece landing (iOS + print parity) ──
       Big Hebrew-name title, ❖ rule, HaSippur narrative, Key Themes list,
       Main Figures interpunct line, dot rule, "Begin Perek 1" CTA. */
    .book-frontispiece {
      max-width: 640px;
      margin: 32px auto 64px;
      padding: 0 24px;
      text-align: left;
    }
    .book-frontispiece__head {
      text-align: center;
      margin-bottom: 30px;
    }
    .book-frontispiece__title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: clamp(46px, 8vw, 72px);
      line-height: 1.05;
      color: var(--parchment);
      margin: 0 0 22px;
      letter-spacing: -0.01em;
    }
    .book-frontispiece__rule,
    .book-frontispiece__dotrule {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin: 0 auto;
    }
    .book-frontispiece__rule-line {
      flex: 0 1 90px;
      height: 1px;
      background: rgba(168, 116, 42, 0.45);
    }
    .book-frontispiece__rule-diamond {
      font-family: Georgia, 'Cormorant Garamond', serif;
      font-size: 16px;
      color: var(--gold-mid);
      line-height: 1;
    }
    .book-frontispiece__rule-dot {
      font-family: Georgia, serif;
      font-size: 14px;
      color: var(--gold-mid);
      line-height: 1;
    }
    .book-frontispiece__dotrule {
      margin: 28px auto 28px;
    }
    .book-frontispiece__group {
      margin-bottom: 28px;
    }
    .book-frontispiece__eyebrow {
      display: block;
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold-mid);
      margin-bottom: 10px;
    }
    .book-frontispiece__story {
      margin: 0 0 10px;
      font-family: 'Lora', Georgia, serif;
      font-size: 16px;
      line-height: 1.65;
      color: var(--parchment);
    }
    .book-frontispiece__list {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .book-frontispiece__list li {
      font-family: 'Lora', Georgia, serif;
      font-size: 15.5px;
      line-height: 1.55;
      color: var(--parchment);
      padding-left: 18px;
      position: relative;
      margin-bottom: 6px;
    }
    .book-frontispiece__list li::before {
      content: '•';
      color: var(--gold-mid);
      position: absolute;
      left: 2px;
      top: 0;
    }
    .book-frontispiece__figures {
      margin: 0;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 17px;
      line-height: 1.6;
      color: var(--sand);
    }
    .book-frontispiece__cta {
      display: block;
      width: max-content;
      max-width: 100%;
      margin: 0 auto;
      padding: 12px 26px;
      border: 1px solid var(--gold-mid);
      border-radius: 4px;
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold-mid);
      text-decoration: none;
      transition: background 0.18s ease, color 0.18s ease;
    }
    .book-frontispiece__cta:hover,
    .book-frontispiece__cta:focus-visible {
      background: var(--gold-mid);
      color: var(--ink);
    }
    .book-frontispiece__cta--quiet {
      margin-top: 10px;
      border-color: rgba(168, 116, 42, 0.40);
      color: var(--amber-dim);
      font-size: 10px;
      padding: 8px 18px;
      letter-spacing: 0.16em;
    }
    .book-frontispiece__cta--quiet:hover,
    .book-frontispiece__cta--quiet:focus-visible {
      background: transparent;
      color: var(--gold-mid);
      border-color: var(--gold-mid);
    }

    /* ── Sidebar ── */
    .scripture-sidebar {
      width: 280px;
      flex-shrink: 0;
      border-right: 1px solid rgba(180,130,60,0.1);
      background: rgba(12,10,7,0.6);
      overflow-y: auto;
      /* When the wheel reaches the sidebar's top/bottom, stop the
         scroll instead of bubbling up and scrolling the chapter. */
      overscroll-behavior: contain;
      position: fixed;
      top: 64px;
      left: 0;
      bottom: 0;
      z-index: 50;
      transition: transform 0.3s ease;
    }

    .sidebar-header {
      padding: 24px 20px 16px;
      border-bottom: 1px solid rgba(180,130,60,0.1);
    }

    .sidebar-title {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 10px;
      letter-spacing: 0.3em;
      color: var(--gold-mid);
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .sidebar-search {
      width: 100%;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(180,130,60,0.15);
      border-radius: 2px;
      padding: 10px 14px;
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      color: var(--parchment);
      transition: border-color 0.3s;
    }

    .sidebar-search:focus {
      border-color: rgba(180,130,60,0.4);
    }
    .sidebar-search:focus-visible {
      outline: 2px solid var(--gold-mid);
      outline-offset: 2px;
    }

    .sidebar-search::placeholder {
      color: var(--amber-dim);
    }

    .testament-group {
      padding: 16px 0 8px;
    }

    .testament-label {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 9px;
      letter-spacing: 0.25em;
      color: var(--amber-dim);
      text-transform: uppercase;
      padding: 0 20px;
      margin-bottom: 8px;
    }

    .section-label-sidebar {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 8px;
      letter-spacing: 0.2em;
      color: rgba(180,130,60,0.35);
      text-transform: uppercase;
      padding: 12px 20px 4px;
    }

    .book-item {
      position: relative;
      display: block;
      padding: 8px 20px;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      color: var(--sand);
      cursor: pointer;
      text-decoration: none;
      font-weight: 300;
      border-left: 2px solid transparent;
      transition:
        color 0.18s ease,
        background 0.18s ease,
        border-left-color 0.18s ease,
        transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .book-item:hover {
      color: var(--parchment);
      background: rgba(180,130,60,0.06);
      border-left-color: rgba(180,130,60,0.3);
    }

    /* Subtle press feedback — slight inward nudge + dim */
    .book-item:active {
      transform: translateX(2px) scale(0.99);
      opacity: 0.85;
    }
    .book-item.is-tapped {
      animation: book-tap-pulse 0.55s cubic-bezier(0.2, 0.7, 0.1, 1) 1;
    }
    @keyframes book-tap-pulse {
      0%   { background: rgba(168, 116, 42, 0.05); }
      30%  { background: rgba(168, 116, 42, 0.18); border-left-color: var(--gold-mid); }
      100% { background: rgba(168, 116, 42, 0.05); }
    }
    @media (prefers-reduced-motion: reduce) {
      .book-item:active { transform: none; }
      .book-item.is-tapped { animation: none; }
    }

    .book-item.active {
      color: var(--gold-light);
      background: rgba(180,130,60,0.1);
      border-left-color: var(--gold-mid);
      font-weight: 400;
    }

    .book-item .book-chapters {
      font-size: 11px;
      color: var(--amber-dim);
      margin-left: 4px;
    }

    /* ── Main Reader ── single column, sheet-based picker means no sidebar */
    .scripture-reader {
      flex: 1;
      margin: 0 auto;
      padding: 0 20px 120px;
      max-width: 720px;
      width: 100%;
    }
    @media (min-width: 720px) {
      .scripture-reader { padding: 0 24px 140px; }
    }

    /* ── Breadcrumb ── */
    .breadcrumb {
      padding: 16px 0 8px;
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      color: var(--amber-dim);
      font-weight: 300;
    }

    .breadcrumb a {
      color: var(--gold-mid);
      text-decoration: none;
      transition: color 0.2s;
    }

    .breadcrumb a:hover {
      color: var(--gold-light);
    }

    .breadcrumb span {
      margin: 0 6px;
      opacity: 0.5;
    }

    /* ── Reader Controls ── */
    .reader-controls {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 0;
      border-bottom: 1px solid rgba(180,130,60,0.08);
      margin-bottom: 8px;
    }

    .font-size-btn {
      font-family: 'Inter', sans-serif;
      color: var(--sand);
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(180,130,60,0.12);
      border-radius: 2px;
      cursor: pointer;
      transition: all 0.2s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
    }

    .font-size-btn:hover {
      background: rgba(180,130,60,0.1);
      border-color: rgba(180,130,60,0.3);
    }

    .font-size-label {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      color: var(--amber-dim);
      font-weight: 300;
      margin-right: 4px;
    }

    .controls-sep {
      width: 1px;
      height: 20px;
      background: rgba(180,130,60,0.1);
      margin: 0 8px;
    }

    .red-letter-toggle {
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      color: var(--amber-dim);
      cursor: pointer;
      font-weight: 300;
    }

    .red-letter-toggle input {
      accent-color: var(--gold-mid);
    }

    /* ── Chapter Navigation ── */
    .chapter-nav {
      padding: 24px 0;
      border-bottom: 1px solid rgba(180,130,60,0.1);
      margin-bottom: 32px;
    }

    .chapter-book-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(36px, 6vw, 56px);
      font-weight: 300;
      color: var(--parchment);
      line-height: 1.1;
      margin-bottom: 4px;
    }

    .chapter-book-name em {
      font-style: italic;
      color: var(--gold-light);
    }

    .chapter-subtitle {
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      color: var(--amber-dim);
      font-weight: 300;
      margin-bottom: 20px;
    }

    .chapter-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .chapter-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 36px;
      height: 36px;
      padding: 0 10px;
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      color: var(--sand);
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(180,130,60,0.1);
      border-radius: 2px;
      cursor: pointer;
      transition: all 0.2s;
      text-decoration: none;
      font-weight: 300;
    }

    .chapter-pill:hover {
      color: var(--parchment);
      background: rgba(180,130,60,0.1);
      border-color: rgba(180,130,60,0.3);
    }

    .chapter-pill.active {
      color: var(--deep-brown);
      background: var(--gold-mid);
      border-color: var(--gold-mid);
      font-weight: 500;
    }

    /* ── Verses ── */
    .chapter-heading {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 11px;
      letter-spacing: 0.25em;
      color: var(--gold-mid);
      text-transform: uppercase;
      margin-top: 0;
      margin-bottom: 32px;
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
    }

    .verse-list {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      max-width: 100%;
    }

    .verse-item {
      padding: 8px 0;
      transition: background 0.3s;
      border-radius: 2px;
      position: relative;
    }
    /* Chapter content fades + lifts in when a chapter binds. The skeleton
       fades out cleanly first via its own fade rule. */
    #chapterContent.is-fading-in .verse-item {
      animation: verse-bind-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
      animation-delay: calc(var(--bind-i, 0) * 0.012s);
    }
    @keyframes verse-bind-in {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      #chapterContent.is-fading-in .verse-item { animation: none; }
    }

    .verse-item:target,
    .verse-item.highlighted {
      background: rgba(180,130,60,0.12);
      padding-left: 12px;
      padding-right: 12px;
      margin-left: -12px;
      margin-right: -12px;
      border-left: 2px solid var(--gold-mid);
    }

    /* ── Divine Speech (Yahweh / Father / Tanakh divine voice → gold) ── */
    /* Ecosystem red-letter rule: this is one of two voices. The other is
       Yeshua's words (.verse-item.yeshua → crimson, below). Both are now
       always-on; the legacy .red-letter-active toggle previously gated only
       the divine voice and is being retired in favour of the rule. */
    .verse-item.divine {
      padding-left: 12px;
      margin-left: -12px;
      border-left: 2px solid rgba(180,130,60,0.3);
    }

    .verse-item.divine .verse-text {
      color: var(--gold-light);
      font-weight: 500;
      letter-spacing: 0.2px;
    }

    .verse-item.divine .verse-num {
      color: var(--gold-light);
      opacity: 0.6;
    }

    .verse-item.divine.highlighted,
    .verse-item.divine:target {
      background: rgba(180,130,60,0.18);
      border-left: 2px solid var(--gold-mid);
    }

    /* ── Yeshua's words (Gospels → crimson #CD4623) ── */
    .verse-item.yeshua {
      padding-left: 12px;
      margin-left: -12px;
      border-left: 2px solid rgba(205,70,35,0.35);
    }

    .verse-item.yeshua .verse-text {
      color: #CD4623;
      font-weight: 500;
      letter-spacing: 0.2px;
    }

    .verse-item.yeshua .verse-num {
      color: #CD4623;
      opacity: 0.65;
    }

    .verse-item.yeshua.highlighted,
    .verse-item.yeshua:target {
      background: rgba(205,70,35,0.14);
      border-left: 2px solid #CD4623;
    }

    .verse-num {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 500;
      color: var(--gold-mid);
      vertical-align: super;
      margin-right: 4px;
      cursor: pointer;
      opacity: 0.7;
      transition: opacity 0.2s;
    }

    .verse-num:hover {
      opacity: 1;
    }

    .verse-text {
      /* Lora is a screen-optimized serif designed for sustained reading —
         heavier strokes than Cormorant, larger x-height, better at body sizes. */
      font-family: 'Lora', 'Cormorant Garamond', Georgia, serif;
      font-size: var(--verse-font-size, 20px);
      font-weight: 400;
      color: var(--parchment);
      line-height: 1.85;
      letter-spacing: 0.01em;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

    /* ── Illuminated chapter opening ──────────────────────────────────────
       Verse 1's first letter becomes a gold drop-cap, replacing its "1" —
       the classic Bible chapter-opener. Scoped to #chapterContent so the
       comparison sheet is unaffected. */
    #chapterContent .verse-item#v1 > .verse-num { display: none; }
    #chapterContent .verse-item#v1 .verse-text::first-letter {
      float: left;
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-weight: 600;
      font-size: 3.6em;
      line-height: 0.74;
      padding: 0.02em 0.14em 0 0;
      margin: 0.06em 0.02em 0 0;
      /* Gilded KodeshGold — warm bronze, not the thin yellow of plain
         --gold-light. A light highlight falls to a deep bronze, like leaf. */
      color: #A8742A; /* fallback if background-clip:text unsupported */
      background: linear-gradient(165deg, #C8943E 0%, #A8742A 55%, #7E5519 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    @media (prefers-reduced-motion: no-preference) {
      #chapterContent.is-fading-in .verse-item#v1 .verse-text::first-letter { opacity: 1; }
    }

    /* ── Selection Popup ── */
    .selection-popup {
      position: absolute;
      display: none;
      align-items: center;
      gap: 2px;
      background: var(--deep-brown);
      border: 1px solid rgba(180,130,60,0.3);
      border-radius: 3px;
      padding: 4px;
      z-index: 80;
      box-shadow: 0 8px 24px rgba(0,0,0,0.5);
      animation: popIn 0.15s ease;
    }

    .selection-popup.visible {
      display: flex;
    }

    @keyframes popIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .selection-popup-btn {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 400;
      color: var(--parchment);
      background: none;
      border: none;
      padding: 8px 14px;
      cursor: pointer;
      transition: all 0.15s;
      border-radius: 2px;
      white-space: nowrap;
    }

    .selection-popup-btn:hover {
      background: rgba(180,130,60,0.15);
      color: var(--gold-light);
    }

    .selection-popup-divider {
      width: 1px;
      height: 20px;
      background: rgba(180,130,60,0.15);
    }

    .selection-popup-toast {
      position: fixed;
      bottom: 32px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--gold-mid);
      color: var(--deep-brown);
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      font-weight: 500;
      padding: 10px 24px;
      border-radius: 2px;
      z-index: 100;
      opacity: 0;
      transition: opacity 0.3s;
      pointer-events: none;
    }

    .selection-popup-toast.visible {
      opacity: 1;
    }

    /* ── Share tooltip ── */
    .verse-share-tooltip {
      position: absolute;
      top: -36px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--gold-mid);
      color: var(--deep-brown);
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 500;
      padding: 6px 12px;
      border-radius: 2px;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s;
      z-index: 10;
    }

    .verse-share-tooltip.visible {
      opacity: 1;
    }

    /* ── Chapter Footer Nav ── */
    .chapter-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 64px;
      padding-top: 24px;
      border-top: 1px solid rgba(180,130,60,0.1);
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
    }

    .chapter-footer-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 11px;
      letter-spacing: 0.15em;
      color: var(--gold-mid);
      text-decoration: none;
      padding: 12px 20px;
      border: 1px solid rgba(180,130,60,0.2);
      border-radius: 2px;
      transition: all 0.2s;
    }

    .chapter-footer-btn:hover {
      background: rgba(180,130,60,0.1);
      border-color: rgba(180,130,60,0.4);
      color: var(--gold-light);
    }

    .chapter-footer-btn.disabled {
      opacity: 0.3;
      pointer-events: none;
    }

    /* ── Parables-in-this-chapter chip row ── */
    .chapter-chips--parables {
      flex-direction: column;
      align-items: center;
      gap: 10px;
      margin-top: 36px;
      margin-bottom: 24px;
      padding-top: 0;
      border-top: 0;
    }
    .chapter-chips__label {
      font-family: 'Inter', sans-serif;
      font-size: 10.5px;
      font-weight: 500;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--gold-mid);
    }
    .chip--parable {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      background: rgba(168, 116, 42, 0.06);
      border: 1px solid rgba(168, 116, 42, 0.28);
      border-radius: 999px;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 14px;
      letter-spacing: 0.005em;
      text-transform: none;
      color: var(--parchment);
      text-decoration: none;
      transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.15s ease;
    }
    .chip--parable:hover {
      color: var(--gold-light);
      border-color: var(--gold-mid);
      background: rgba(168, 116, 42, 0.12);
      transform: translateY(-1px);
    }
    .chip--parable .chip__range {
      font-family: 'Inter', sans-serif;
      font-style: normal;
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--amber-dim);
      padding-left: 6px;
      border-left: 1px solid rgba(168, 116, 42, 0.22);
      margin-left: 2px;
    }

    /* ── Per-verse share icon (appears on hover) ── */
    .verse-item {
      position: relative;
    }
    .verse-share {
      position: absolute;
      right: -32px;
      top: 8px;
      width: 26px; height: 26px;
      background: transparent;
      border: 1px solid rgba(168, 116, 42, 0.18);
      border-radius: 50%;
      color: var(--amber-dim);
      cursor: pointer;
      display: inline-flex;
      align-items: center; justify-content: center;
      opacity: 0;
      transform: scale(0.85);
      transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
      z-index: 2;
    }
    .verse-item:hover .verse-share,
    .verse-share:focus-visible {
      opacity: 1;
      transform: scale(1);
    }
    .verse-share:hover {
      color: var(--gold-mid);
      border-color: var(--gold-mid);
      background: rgba(168, 116, 42, 0.10);
    }
    /* Tablet+: pop the icon to the right of the verse so it doesn't
       overlap the text. On narrow screens it sits inline at the end. */
    @media (max-width: 760px) {
      .verse-share {
        position: static;
        opacity: 1;             /* always visible on touch — no hover */
        transform: none;
        margin-left: 6px;
        vertical-align: middle;
      }
    }

    /* ── Per-verse prophecy badge ──
       Inline gold link icon appearing on verses that participate in a
       Tanakh ↔ Brit Chadashah prophecy/fulfilment pair. Tapping opens the
       side-by-side comparison sheet so the reader doesn't have to navigate
       away to see both witnesses. Always visible (not hover-gated) since
       the badge IS the affordance to discover the connection. */
    .verse-prophecy {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      vertical-align: 0.06em;
      width: 22px; height: 22px;
      margin-left: 6px;
      background: rgba(168, 116, 42, 0.10);
      border: 1px solid rgba(168, 116, 42, 0.28);
      border-radius: 6px;
      color: var(--gold-mid);
      cursor: pointer;
      transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    }
    .verse-prophecy:hover,
    .verse-prophecy:focus-visible {
      color: var(--gold-light, #d4a050);
      border-color: rgba(168, 116, 42, 0.55);
      background: rgba(168, 116, 42, 0.18);
    }
    .verse-prophecy:focus-visible {
      outline: 2px solid var(--gold-mid);
      outline-offset: 2px;
    }
    @media (max-width: 760px) {
      .verse-prophecy {
        width: 24px; height: 24px;   /* slightly larger tap target on phone */
      }
    }

    /* ── Chapter-top parallel pill ──
       Appears between the hero header and the verse list when this chapter
       is one witness of an event recorded in other Gospels. Echoes the iOS
       reader's bottom ribbon — eyebrow + Hebrew gospel names. */
    .parallel-pill {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      width: max-content;
      max-width: 100%;
      margin: 0 auto 24px;
      padding: 10px 18px;
      background: rgba(168, 116, 42, 0.06);
      border: 1px solid rgba(168, 116, 42, 0.25);
      border-radius: 8px;
      color: var(--sand);
      cursor: pointer;
      transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    }
    .parallel-pill:hover,
    .parallel-pill:focus-visible {
      background: rgba(168, 116, 42, 0.12);
      border-color: rgba(168, 116, 42, 0.45);
      transform: translateY(-1px);
    }
    .parallel-pill:focus-visible {
      outline: 2px solid var(--gold-mid);
      outline-offset: 2px;
    }
    .parallel-pill__eyebrow {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold-mid);
    }
    .parallel-pill__names {
      font-family: 'Cormorant Garamond', Lora, Georgia, serif;
      font-style: italic;
      font-size: 14px;
      color: var(--parchment);
    }

    /* ── Comparison sheet (prophecy + parallel) ──
       Phone: bottom sheet sliding up; tablet+: centered modal. Two-column
       body when exactly two passages are selected, vertical stack on phone
       so a Tanakh prophecy + its fulfilment read clearly without horizontal
       cramming. */
    .scripture-sheet--comparison .scripture-sheet__panel--comparison {
      max-width: 920px;
      max-height: 92vh;
      display: flex;
      flex-direction: column;
      padding: 0;
    }
    .comparison-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 22px 4px;
      gap: 12px;
    }
    .comparison-eyebrow {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--gold-mid);
    }
    .comparison-title-block {
      text-align: center;
      padding: 6px 22px 14px;
    }
    .comparison-title {
      font-family: 'Cormorant Garamond', Lora, Georgia, serif;
      font-weight: 500;
      font-size: clamp(20px, 3vw, 26px);
      line-height: 1.25;
      color: var(--sand);
      margin: 0 0 6px 0;
    }
    .comparison-subtitle {
      font-family: 'Lora', Georgia, serif;
      font-style: italic;
      font-size: 13px;
      color: var(--amber-dim);
      margin: 0;
    }
    .comparison-chooser {
      padding: 0 22px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .comparison-chooser__label {
      font-family: 'Inter', sans-serif;
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold-mid);
      align-self: flex-start;
    }
    .comparison-chooser__pills {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 6px;
    }
    .comparison-chooser__pill {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 8px 6px;
      background: rgba(168, 116, 42, 0.06);
      border: 1px solid rgba(168, 116, 42, 0.20);
      border-radius: 6px;
      color: var(--amber-dim);
      cursor: pointer;
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    }
    .comparison-chooser__pill:hover { border-color: rgba(168, 116, 42, 0.45); }
    .comparison-chooser__pill.is-active {
      background: rgba(168, 116, 42, 0.18);
      border-color: var(--gold-mid);
      color: var(--sand);
    }
    .comparison-chooser__pill-name {
      font-family: 'Inter', sans-serif;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }
    .comparison-chooser__pill-ref {
      font-family: 'Lora', Georgia, serif;
      font-style: italic;
      font-size: 10px;
    }
    .comparison-chooser__pill-role {
      font-family: 'Inter', sans-serif;
      font-size: 8px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold-mid);
    }
    .comparison-body {
      flex: 1 1 auto;
      overflow-y: auto;
      padding: 4px 18px 22px;
    }
    .comparison-loading {
      text-align: center;
      padding: 32px 0;
      color: var(--amber-dim);
      font-family: 'Lora', serif;
      font-style: italic;
    }
    .comparison-columns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    @media (max-width: 720px) {
      .comparison-columns { grid-template-columns: 1fr; }
    }
    .comparison-column {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 14px 16px 16px;
      background: rgba(168, 116, 42, 0.04);
      border: 1px solid rgba(168, 116, 42, 0.18);
      border-radius: 10px;
      text-decoration: none;
      color: inherit;
      cursor: pointer;
      transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
    }
    .comparison-column:hover {
      border-color: rgba(168, 116, 42, 0.45);
      background: rgba(168, 116, 42, 0.08);
      transform: translateY(-1px);
    }
    .comparison-column__head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
    }
    .comparison-column__book {
      font-family: 'Cormorant Garamond', Lora, Georgia, serif;
      font-weight: 500;
      font-size: 15px;
      color: var(--sand);
    }
    .comparison-column__range {
      font-family: 'Inter', sans-serif;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--gold-mid);
    }
    .comparison-column__verses {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .comparison-verse {
      display: flex;
      align-items: baseline;
      gap: 6px;
      margin: 0;
      font-family: 'Lora', Georgia, serif;
      font-size: 14.5px;
      line-height: 1.55;
      color: var(--parchment);
    }
    .comparison-verse__num {
      flex: 0 0 auto;
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      font-weight: 500;
      color: var(--gold-mid);
      padding-top: 3px;
    }
    .comparison-verse__text {
      flex: 1 1 auto;
    }
    .comparison-column__empty {
      font-family: 'Lora', serif;
      font-style: italic;
      font-size: 13px;
      color: var(--amber-dim);
      margin: 6px 0;
    }
    .comparison-column__cta {
      align-self: flex-start;
      margin-top: 4px;
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--amber-dim);
      transition: color 0.18s ease;
    }
    .comparison-column:hover .comparison-column__cta { color: var(--gold-mid); }

    /* Print: hide the new prophecy/parallel UI alongside the existing
       cross-refs (already handled below). */
    @media print {
      .verse-prophecy,
      .parallel-pill,
      .scripture-sheet--comparison { display: none !important; }
    }

    /* ── Chapter footer chips — KWS / CC0 / .org / shortcuts ── */
    .chapter-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      margin: 56px auto 0;
      padding-top: 32px;
      border-top: 1px solid rgba(168, 116, 42, 0.10);
    }
    .chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      background: rgba(0, 0, 0, 0.25);
      border: 1px solid rgba(168, 116, 42, 0.16);
      border-radius: 999px;
      font-family: 'Inter', sans-serif;
      font-size: 10.5px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--amber-dim);
      text-decoration: none;
      transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    }
    .chip:hover {
      color: var(--gold-mid);
      border-color: var(--gold-mid);
      background: rgba(168, 116, 42, 0.08);
    }
    .chip__dot {
      width: 4px; height: 4px;
      border-radius: 50%;
      background: var(--gold-mid);
      display: inline-block;
      flex: 0 0 auto;
    }
    .chip kbd {
      font-family: 'SF Mono', ui-monospace, monospace;
      font-size: 9.5px;
      padding: 1px 5px;
      background: rgba(168, 116, 42, 0.18);
      border-radius: 3px;
      letter-spacing: 0;
      color: var(--gold-light);
    }
    .chip__glyph {
      width: 13px;
      height: 13px;
      color: var(--gold-mid);
      flex: 0 0 auto;
    }
    .chip:hover .chip__glyph { color: var(--gold-light); }

    /* Hide the legacy breadcrumb visually — the Scriptures-bar pill already
       conveys the location. Keep markup for screen readers. */
    .breadcrumb {
      position: absolute;
      width: 1px; height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }

    /* ── Welcome state ── */
    .scripture-welcome {
      text-align: center;
      padding: 80px 24px;
    }

    .welcome-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(36px, 6vw, 56px);
      font-weight: 300;
      color: var(--parchment);
      line-height: 1.2;
      margin-bottom: 16px;
    }

    .welcome-title em {
      font-style: italic;
      color: var(--gold-light);
    }

    .welcome-sub {
      font-family: 'Cormorant Garamond', serif;
      font-size: 18px;
      font-style: italic;
      color: var(--sand);
      margin-bottom: 32px;
      max-width: 480px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.6;
    }

    .welcome-verse {
      font-family: 'Cormorant Garamond', serif;
      font-size: 14px;
      font-style: italic;
      color: var(--amber-dim);
      letter-spacing: 0.05em;
      margin-bottom: 32px;
    }

    /* ── Continue Reading ── */
    .continue-reading {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 24px;
      padding: 14px 28px;
      background: rgba(180,130,60,0.08);
      border: 1px solid rgba(180,130,60,0.2);
      border-radius: 2px;
      cursor: pointer;
      transition: all 0.2s;
      text-decoration: none;
    }

    .continue-reading:hover {
      background: rgba(180,130,60,0.15);
      border-color: rgba(180,130,60,0.4);
    }

    .continue-reading-label {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 10px;
      letter-spacing: 0.2em;
      color: var(--amber-dim);
      text-transform: uppercase;
    }

    .continue-reading-ref {
      font-family: 'Cormorant Garamond', serif;
      font-size: 18px;
      color: var(--gold-light);
      font-weight: 400;
    }

    /* ── Random Verse Button ── */
    .random-verse-btn {
      display: inline-block;
      margin-top: 16px;
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 11px;
      letter-spacing: 0.15em;
      color: var(--gold-mid);
      background: none;
      border: 1px solid rgba(180,130,60,0.2);
      padding: 10px 24px;
      border-radius: 2px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .random-verse-btn:hover {
      background: rgba(180,130,60,0.1);
      border-color: rgba(180,130,60,0.4);
    }

    /* ── Hebrew name tap-gloss ── */
    .hebrew-gloss {
      cursor: help;
      border-bottom: 1px dotted rgba(168, 116, 42, 0.45);
      transition: color 0.2s, border-color 0.2s;
    }
    .hebrew-gloss:hover, .hebrew-gloss:focus-visible {
      color: var(--gold-light);
      border-bottom-color: var(--gold-mid);
    }
    .hebrew-gloss:focus-visible {
      outline: 2px solid var(--gold-mid);
      outline-offset: 2px;
    }
    .verse-item.divine .hebrew-gloss {
      border-bottom-color: rgba(196, 144, 64, 0.6);
    }

    .hebrew-gloss-popover {
      position: absolute;
      z-index: 100;
      max-width: 320px;
      padding: 14px 18px;
      background: var(--card-surface);
      border: 1px solid rgba(168, 116, 42, 0.45);
      border-radius: var(--radius-md);
      box-shadow: 0 12px 36px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.4);
      color: var(--parchment);
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.15s ease, transform 0.15s ease;
      pointer-events: auto;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .hebrew-gloss-popover.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .hebrew-gloss-popover__name {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: 18px;
      font-weight: 500;
      color: var(--gold-light);
      letter-spacing: 0.005em;
      line-height: 1.1;
    }
    .hebrew-gloss-popover__he {
      font-family: 'SBL Hebrew', 'Ezra SIL', 'Cardo', 'Times New Roman', serif;
      font-size: 22px;
      line-height: 1.3;
      color: var(--parchment);
      letter-spacing: 0;
    }
    .hebrew-gloss-popover__meaning {
      font-family: 'Lora', Georgia, serif;
      font-style: italic;
      font-size: 14px;
      color: var(--sand);
      line-height: 1.4;
    }
    .hebrew-gloss-popover__note {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 11.5px;
      letter-spacing: 0.04em;
      color: var(--amber-dim);
      line-height: 1.5;
      padding-top: 6px;
      margin-top: 2px;
      border-top: 1px solid rgba(168, 116, 42, 0.18);
    }

    /* ── Listen button + audio bar ── */
    .listen-btn {
      background: rgba(168,116,42,0.12);
      border: 1px solid rgba(168,116,42,0.32);
      color: var(--gold-mid);
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      padding: 7px 14px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }
    .listen-btn:hover, .listen-btn:focus-visible {
      background: rgba(168,116,42,0.2);
      border-color: var(--gold-mid);
      color: var(--gold-light);
    }
    .listen-btn.is-active {
      background: var(--gold-mid);
      color: var(--deep-brown);
      border-color: var(--gold-mid);
    }

    /* ── Audio player — KodeshWay iOS player port ────────────
       Bottom-fixed bar with three layers: utility row (ref + voice
       pills + close), waveform (one bar per verse, click to seek,
       active bar pulses), transport row (prev verse · −15s · play
       · +15s · next verse). 56px gold play button with halo. */

    .audio-bar {
      position: fixed;
      left: 0; right: 0; bottom: 0;
      z-index: 90;
      background:
        radial-gradient(ellipse at 50% 0%, rgba(168,116,42,0.10) 0%, transparent 60%),
        rgba(10,8,5,0.94);
      backdrop-filter: blur(18px) saturate(120%);
      -webkit-backdrop-filter: blur(18px) saturate(120%);
      border-top: 1px solid rgba(168,116,42,0.18);
      box-shadow: 0 -12px 36px rgba(0,0,0,0.55);
      /* Slide-up + fade enter, slide-down + fade exit */
      transform: translateY(100%);
      opacity: 0;
      transition:
        transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.24s ease;
      will-change: transform, opacity;
    }
    .audio-bar[data-state="open"] {
      transform: translateY(0);
      opacity: 1;
    }
    .audio-bar[data-state="closing"] {
      transform: translateY(100%);
      opacity: 0;
    }
    @media (prefers-reduced-motion: reduce) {
      .audio-bar { transition: opacity 0.2s ease; transform: none !important; }
    }
    .audio-bar__inner {
      max-width: 720px;
      margin: 0 auto;
      padding: 14px 22px 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Utility row */
    .audio-bar__top {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .audio-bar__ref {
      flex: 1 1 auto;
      min-width: 0;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 17px;
      color: var(--parchment);
      line-height: 1.2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .audio-bar__voice-row {
      flex: 0 0 auto;
      display: inline-flex;
      gap: 6px;
    }
    .audio-bar__voice {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 9.5px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--amber-dim);
      background: transparent;
      border: 1px solid rgba(168,116,42,0.22);
      border-radius: 100px;
      padding: 4px 11px;
      cursor: pointer;
      transition: color 0.2s, border-color 0.2s, background 0.2s;
    }
    .audio-bar__voice[aria-pressed="true"] {
      color: var(--gold-mid);
      border-color: var(--gold-mid);
      background: rgba(168,116,42,0.10);
    }
    .audio-bar__voice:hover { color: var(--gold-light); border-color: var(--gold-light); }
    .audio-bar__close {
      flex: 0 0 auto;
      width: 28px; height: 28px;
      border-radius: 50%;
      background: transparent;
      border: 1px solid rgba(168,116,42,0.22);
      color: var(--amber-dim);
      font-size: 17px;
      line-height: 1;
      cursor: pointer;
      transition: color 0.2s, border-color 0.2s;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .audio-bar__close:hover { color: var(--gold-mid); border-color: var(--gold-mid); }

    /* "Follow" pill sits next to ANDREW / EMMA — same pill style; the
       voice-row CSS already handles the aria-pressed gold treatment. A
       hairline divider hints at the role separation. */
    .audio-bar__voice--follow {
      margin-left: 4px;
      padding-left: 13px;
      position: relative;
    }
    .audio-bar__voice--follow::before {
      content: '';
      position: absolute;
      left: -4px;
      top: 30%;
      bottom: 30%;
      width: 1px;
      background: rgba(168, 116, 42, 0.22);
    }

    /* Waveform — one bar per verse */
    .audio-bar__waveform {
      display: flex;
      align-items: flex-end;
      gap: 3px;
      height: 32px;
      padding: 0 2px;
      cursor: pointer;
      user-select: none;
    }
    .audio-bar__bar {
      flex: 1 1 0;
      background: rgba(168,116,42,0.20);
      border-radius: 1.5px;
      transition: background 0.15s ease;
      min-height: 35%;
    }
    .audio-bar__bar.is-played {
      background: var(--gold-mid);
    }
    .audio-bar__bar.is-active {
      background: var(--gold-light);
      animation: audio-bar-pulse 1.1s ease-in-out infinite alternate;
    }
    @keyframes audio-bar-pulse {
      from { opacity: 0.55; }
      to   { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .audio-bar__bar.is-active { animation: none; opacity: 1; }
    }

    /* Transport row */
    .audio-bar__transport {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 26px;
    }
    .audio-bar__nav,
    .audio-bar__skip {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px; height: 38px;
      background: transparent;
      border: 0;
      color: var(--gold-mid);
      cursor: pointer;
      border-radius: 50%;
      transition: color 0.18s, background 0.18s, transform 0.12s;
    }
    .audio-bar__nav:hover,
    .audio-bar__skip:hover {
      color: var(--gold-light);
      background: rgba(168,116,42,0.08);
    }
    .audio-bar__nav:active,
    .audio-bar__skip:active { transform: scale(0.92); }
    .audio-bar__skip-num {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, calc(-50% + 1px));
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 8.5px;
      font-weight: 600;
      letter-spacing: 0.04em;
      pointer-events: none;
    }

    /* Play/pause — 56px gold seal with halo */
    .audio-bar__play {
      flex-shrink: 0;
      width: 56px; height: 56px;
      border-radius: 50%;
      border: 0;
      background: var(--gold-mid);
      color: var(--deep);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow:
        0 6px 18px rgba(168,116,42,0.35),
        inset 0 -2px 4px rgba(0,0,0,0.18),
        inset 0 1px 1px rgba(255,220,180,0.30);
      transition: background 0.25s, transform 0.12s, box-shadow 0.25s;
    }
    .audio-bar__play:hover {
      background: var(--gold-light);
      box-shadow:
        0 8px 22px rgba(196,144,64,0.45),
        inset 0 -2px 4px rgba(0,0,0,0.18),
        inset 0 1px 1px rgba(255,220,180,0.32);
    }
    .audio-bar__play:active { transform: scale(0.95); }
    .audio-bar__play-icon { display: none; }
    /* Default = play; data-state="paused" also = play */
    .audio-bar__play .audio-bar__play-icon--play { display: block; transform: translateX(1px); }
    .audio-bar__play[data-state="playing"] .audio-bar__play-icon--play { display: none; }
    .audio-bar__play[data-state="playing"] .audio-bar__play-icon--pause { display: block; transform: none; }

    @media (max-width: 480px) {
      .audio-bar__inner { padding: 12px 16px 14px; gap: 10px; }
      .audio-bar__transport { gap: 16px; }
      .audio-bar__nav, .audio-bar__skip { width: 34px; height: 34px; }
      .audio-bar__play { width: 50px; height: 50px; }
    }

    /* Currently-playing verse highlight */
    .verse-item.is-playing {
      background: linear-gradient(90deg,
        rgba(168,116,42,0.10) 0%,
        rgba(168,116,42,0.04) 100%);
      border-left: 3px solid var(--gold-mid);
      padding-left: calc(20px - 3px);
    }
    /* When the audio bar is showing, give the page bottom padding so the
       footer/nav don't sit underneath the bar. */
    body.audio-bar-open #chapterContent { padding-bottom: 220px; }

    /* ── Loading / candle-light skeleton ──
       Ports KodeshWaySkeletonView.swift to CSS: each placeholder bar
       is a warm dark parchment surface with a kodeshWayGold @ 10% fill
       overlay and a kodeshWayGold @ 22% → 0% radial halo, both pulsing
       opacity 0 → 1 on a 3.6s ease-in-out alternate cycle. Rows stagger
       0.18s so the column reads as a row of candles catching light. */
    .loading {
      padding: 32px 24px;
    }
    .loading-skeleton {
      max-width: 720px;
      margin: 0 auto;
    }
    .loading-skeleton__heading,
    .loading-skeleton__num,
    .loading-skeleton__line {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      background: #17130b;            /* kodeshWayCardSurface */
      border-radius: 4px;
    }
    .loading-skeleton__heading::before,
    .loading-skeleton__num::before,
    .loading-skeleton__line::before,
    .loading-skeleton__heading::after,
    .loading-skeleton__num::after,
    .loading-skeleton__line::after {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      animation: candle-pulse 3.6s ease-in-out infinite alternate;
      animation-delay: var(--candle-delay, 0s);
      will-change: opacity;
    }
    /* Warm fill — kodeshWayGold #A8742A @ 10% */
    .loading-skeleton__heading::before,
    .loading-skeleton__num::before,
    .loading-skeleton__line::before {
      background: rgba(168, 116, 42, 0.10);
      z-index: 0;
    }
    /* Radial halo — kodeshWayGold @ 22% → 0% */
    .loading-skeleton__heading::after,
    .loading-skeleton__num::after,
    .loading-skeleton__line::after {
      background: radial-gradient(
        ellipse at 50% 50%,
        rgba(168, 116, 42, 0.22) 0%,
        rgba(168, 116, 42, 0) 70%);
      z-index: 1;
    }
    @keyframes candle-pulse {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    .loading-skeleton__heading {
      width: 40%;
      height: 1.6rem;
      border-radius: 8px;
      margin: 0 auto 32px;
      --candle-delay: 0s;
    }
    .loading-skeleton__verse {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      margin-bottom: 18px;
    }
    /* Stagger each verse-row by index so they catch light in sequence. */
    .loading-skeleton__verse:nth-child(2)  { --candle-delay: 0.18s; }
    .loading-skeleton__verse:nth-child(3)  { --candle-delay: 0.36s; }
    .loading-skeleton__verse:nth-child(4)  { --candle-delay: 0.54s; }
    .loading-skeleton__verse:nth-child(5)  { --candle-delay: 0.72s; }
    .loading-skeleton__verse:nth-child(6)  { --candle-delay: 0.90s; }
    .loading-skeleton__verse:nth-child(7)  { --candle-delay: 1.08s; }
    .loading-skeleton__verse:nth-child(8)  { --candle-delay: 1.26s; }
    .loading-skeleton__verse:nth-child(9)  { --candle-delay: 1.44s; }
    .loading-skeleton__verse:nth-child(10) { --candle-delay: 1.62s; }
    .loading-skeleton__num {
      flex-shrink: 0;
      width: 18px;
      height: 1rem;
      margin-top: 4px;
    }
    .loading-skeleton__lines {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .loading-skeleton__line { height: 0.95rem; }
    /* Vary line widths so each row breathes its own width. */
    .loading-skeleton__line:nth-child(1) { width: 92%; }
    .loading-skeleton__line:nth-child(2) { width: 86%; }
    .loading-skeleton__line:nth-child(3) { width: 64%; }
    .loading-skeleton__verse:nth-child(odd) .loading-skeleton__line:nth-child(1) { width: 88%; }
    .loading-skeleton__verse:nth-child(odd) .loading-skeleton__line:nth-child(2) { width: 72%; }
    .loading-skeleton__verse:nth-child(even) .loading-skeleton__line:nth-child(3) { width: 80%; }

    @media (prefers-reduced-motion: reduce) {
      .loading-skeleton__heading::before, .loading-skeleton__num::before, .loading-skeleton__line::before,
      .loading-skeleton__heading::after,  .loading-skeleton__num::after,  .loading-skeleton__line::after {
        animation: none;
        opacity: 0.5;
      }
    }

    .loading-text {
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      color: var(--amber-dim);
      font-weight: 300;
      text-align: center;
      opacity: 0.7;
    }

    /* ── Search panel flash on ⌘K focus ── */
    .search-panel-flash {
      animation: search-panel-flash 1.1s cubic-bezier(0.2, 0.7, 0.1, 1) 1;
      border-radius: 8px;
    }
    @keyframes search-panel-flash {
      0%   { box-shadow: 0 0 0 0 rgba(168, 116, 42, 0); }
      18%  { box-shadow: 0 0 30px 2px rgba(168, 116, 42, 0.45); }
      100% { box-shadow: 0 0 0 0 rgba(168, 116, 42, 0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .search-panel-flash { animation: none; }
    }

    /* ── Verse of the day card ── */
    .verse-of-day {
      max-width: 540px;
      margin: 32px auto 28px;
      padding: 28px 32px 26px;
      background:
        radial-gradient(ellipse at 100% 0%, rgba(168,116,42,0.16) 0%, transparent 60%),
        var(--card-surface, #17130b);
      border: 1px solid var(--card-border, rgba(180,130,60,0.22));
      border-radius: 16px;
      box-shadow:
        0 12px 32px rgba(0,0,0,0.32),
        inset 0 1px 0 rgba(255,220,180,0.04);
      text-align: left;
      animation: verse-of-day-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
    @keyframes verse-of-day-in {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .verse-of-day__eyebrow {
      display: block;
      font-family: 'Inter', sans-serif;
      font-size: 0.65rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--gold-mid);
      margin-bottom: 14px;
      font-weight: 500;
    }
    .verse-of-day__text {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: clamp(1.2rem, 2.4vw, 1.5rem);
      line-height: 1.5;
      color: var(--parchment);
      margin: 0 0 14px;
    }
    .verse-of-day__ref {
      font-family: 'Inter', sans-serif;
      font-size: 0.7rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold-light);
      text-decoration: none;
      border-bottom: 1px solid rgba(196,144,64,0.4);
      padding-bottom: 1px;
      transition: color 0.18s, border-bottom-color 0.18s;
    }
    .verse-of-day__ref:hover {
      color: var(--gold-mid);
      border-bottom-color: var(--gold-mid);
    }
    @media (prefers-reduced-motion: reduce) {
      .verse-of-day { animation: none; }
    }

    /* ── Verse flash on j/k jump ── */
    .verse-item.verse-flash {
      animation: verse-flash 1.4s cubic-bezier(0.2, 0.7, 0.1, 1) 1;
    }
    @keyframes verse-flash {
      0%   { box-shadow: 0 0 0 0 rgba(168, 116, 42, 0); }
      18%  { box-shadow: 0 0 36px 2px rgba(168, 116, 42, 0.45); }
      100% { box-shadow: 0 0 0 0 rgba(168, 116, 42, 0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .verse-item.verse-flash { animation: none; }
    }

    /* ── Keyboard cheatsheet ── */
    .keyboard-cheatsheet {
      position: fixed; inset: 0;
      background: rgba(8, 6, 3, 0.78);
      backdrop-filter: blur(14px) saturate(120%);
      -webkit-backdrop-filter: blur(14px) saturate(120%);
      z-index: 9998;
      display: flex; align-items: center; justify-content: center;
      padding: 1.5rem;
      animation: cheatsheet-fade 0.18s ease;
    }
    @keyframes cheatsheet-fade { from { opacity: 0; } to { opacity: 1; } }
    .keyboard-cheatsheet__panel {
      position: relative;
      max-width: 360px;
      width: 100%;
      background:
        radial-gradient(ellipse at 100% 0%, rgba(168,116,42,0.22) 0%, transparent 55%),
        var(--card-surface, #17130b);
      border: 1px solid var(--card-border, rgba(180,130,60,0.22));
      border-radius: 16px;
      padding: 1.4rem 1.6rem 1.5rem;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
      color: var(--parchment);
    }
    .keyboard-cheatsheet__title {
      font-family: 'Inter', sans-serif;
      font-size: 0.7rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--gold-mid);
      margin: 0 0 1rem;
      font-weight: 500;
    }
    .keyboard-cheatsheet__list {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 0.6rem 1.1rem;
      align-items: baseline;
      margin: 0;
    }
    .keyboard-cheatsheet__list dt {
      display: flex; gap: 0.3rem; flex-wrap: wrap;
    }
    .keyboard-cheatsheet__list kbd {
      display: inline-block;
      font-family: 'SF Mono', ui-monospace, monospace;
      font-size: 0.7rem;
      padding: 0.12rem 0.42rem;
      border: 1px solid var(--card-border, rgba(180,130,60,0.22));
      border-radius: 4px;
      color: var(--gold-light);
      background: rgba(0,0,0,0.3);
    }
    .keyboard-cheatsheet__list dd {
      margin: 0;
      font-family: 'Inter', sans-serif;
      font-size: 0.85rem;
      color: var(--sand);
    }
    .keyboard-cheatsheet__close {
      position: absolute;
      top: 0.85rem; right: 0.85rem;
      width: 26px; height: 26px;
      border-radius: 50%;
      border: 1px solid rgba(168,116,42,0.22);
      background: transparent;
      color: var(--amber-dim);
      font-size: 16px;
      line-height: 1;
      cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .keyboard-cheatsheet__close:hover {
      color: var(--gold-mid);
      border-color: var(--gold-mid);
    }

    /* ── Print stylesheet — strip chrome, keep the Word ── */
    @media print {
      .site-nav,
      .site-footer,
      .audio-bar,
      .app-banner,
      #breadcrumb,
      #continueReading,
      #searchBox,
      .nav-search,
      [data-print-hide],
      .reader-toolbar,
      .keyboard-cheatsheet { display: none !important; }
      body {
        background: #fff !important;
        color: #111 !important;
      }
      #chapterContent {
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
      }
      .verse-item {
        background: none !important;
        border-left: none !important;
        padding-left: 0 !important;
        page-break-inside: avoid;
      }
      .verse-item.is-playing {
        background: none !important;
        border-left: none !important;
      }
      .verse-num {
        color: #888 !important;
        font-weight: 400;
      }
      h1, h2, h3 { color: #111 !important; }
      a { color: inherit !important; text-decoration: none !important; }
      @page { margin: 1.6cm 1.4cm; }
    }

    @keyframes shimmer {
      0% { opacity: 0.3; }
      50% { opacity: 0.7; }
      100% { opacity: 0.3; }
    }

    /* ── Back to Top ── */
    .back-to-top {
      display: none;
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 60;
      width: 42px;
      height: 42px;
      background: rgba(180,130,60,0.15);
      border: 1px solid rgba(180,130,60,0.25);
      border-radius: 50%;
      color: var(--gold-mid);
      font-size: 18px;
      cursor: pointer;
      backdrop-filter: blur(8px);
      transition: all 0.3s;
      align-items: center;
      justify-content: center;
    }

    .back-to-top.visible {
      display: flex;
    }

    .back-to-top:hover {
      background: rgba(180,130,60,0.25);
      border-color: rgba(180,130,60,0.5);
      color: var(--gold-light);
    }

    /* ── Mobile sidebar toggle ── */
    .sidebar-toggle {
      display: none;
      position: fixed;
      bottom: 24px;
      left: 24px;
      z-index: 60;
      width: 48px;
      height: 48px;
      background: var(--gold-mid);
      border: none;
      border-radius: 50%;
      color: var(--deep-brown);
      font-size: 20px;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(0,0,0,0.4);
      transition: transform 0.2s;
    }

    .sidebar-toggle:hover {
      transform: scale(1.1);
    }

    .sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      z-index: 45;
    }

    /* ── Open in app banner ── */
    .app-banner {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 90;
      padding: 16px 24px;
      background: linear-gradient(to top, rgba(12,10,7,0.98), rgba(12,10,7,0.95));
      border-top: 1px solid rgba(180,130,60,0.15);
      backdrop-filter: blur(12px);
      text-align: center;
    }

    .app-banner-text {
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      color: var(--sand);
      margin-bottom: 10px;
      font-weight: 300;
    }

    .app-banner-btn {
      display: inline-block;
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 11px;
      letter-spacing: 0.15em;
      color: var(--deep-brown);
      background: var(--gold-mid);
      padding: 10px 28px;
      border-radius: 2px;
      text-decoration: none;
      transition: background 0.2s;
    }

    .app-banner-btn:hover {
      background: var(--gold-light);
    }

    .app-banner-dismiss {
      position: absolute;
      top: 12px;
      right: 16px;
      background: none;
      border: none;
      color: var(--amber-dim);
      font-size: 18px;
      cursor: pointer;
    }

    /* ── Responsive ── */
    @media (min-width: 1200px) {
      .scripture-reader {
        padding: 0 40px 120px;
      }
    }

    @media (min-width: 1600px) {
      .scripture-reader {
        padding: 0 60px 120px;
      }
    }

    @media (max-width: 900px) {
      .scripture-sidebar {
        transform: translateX(-100%);
        width: 300px;
        background: var(--deep);
      }

      .scripture-sidebar.open {
        transform: translateX(0);
      }

      .sidebar-overlay.open {
        display: block;
      }

      .scripture-reader {
        margin-left: 0;
        padding: 0 20px 120px;
      }

      .sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .verse-text {
        font-size: 18px;
      }

      .chapter-book-name {
        font-size: 32px;
      }

      .app-banner {
        display: block;
      }

      .search-bar {
        flex-direction: column;
      }

      .search-filters {
        gap: 6px;
      }

      .reader-controls {
        flex-wrap: wrap;
      }
    }

    @media (min-width: 901px) {
      .app-banner {
        display: none !important;
      }
    }

    /* ── Scrollbar for sidebar ── */
    .scripture-sidebar::-webkit-scrollbar { width: 4px; }
    .scripture-sidebar::-webkit-scrollbar-track { background: transparent; }
    .scripture-sidebar::-webkit-scrollbar-thumb { background: rgba(180,130,60,0.2); border-radius: 2px; }

    /* ── Search Panel ── */
    .search-panel {
      padding: 32px 0 24px;
      border-bottom: 1px solid rgba(180,130,60,0.1);
      margin-bottom: 0;
    }

    .search-bar {
      display: flex;
      gap: 12px;
      margin-bottom: 16px;
    }

    .search-input {
      flex: 1;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(180,130,60,0.2);
      border-radius: 2px;
      padding: 14px 18px;
      font-family: 'Cormorant Garamond', serif;
      font-size: 18px;
      color: var(--parchment);
      transition: border-color 0.3s;
    }

    .search-input:focus {
      border-color: rgba(180,130,60,0.5);
    }
    .search-input:focus-visible {
      outline: 2px solid var(--gold-mid);
      outline-offset: 2px;
    }

    .search-input::placeholder {
      color: var(--amber-dim);
      font-style: italic;
    }

    .search-btn {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 11px;
      letter-spacing: 0.15em;
      color: var(--deep-brown);
      background: var(--gold-mid);
      border: none;
      padding: 14px 28px;
      border-radius: 2px;
      cursor: pointer;
      transition: background 0.2s;
      white-space: nowrap;
    }

    .search-btn:hover {
      background: var(--gold-light);
    }

    .search-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .filter-label {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      color: var(--amber-dim);
      font-weight: 400;
      letter-spacing: 0.05em;
      margin-right: 4px;
    }

    .filter-pill {
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      color: var(--sand);
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(180,130,60,0.12);
      border-radius: 2px;
      padding: 6px 14px;
      cursor: pointer;
      transition: all 0.2s;
      font-weight: 300;
    }

    .filter-pill:hover {
      background: rgba(180,130,60,0.08);
      border-color: rgba(180,130,60,0.25);
    }

    .filter-pill.active {
      color: var(--deep-brown);
      background: var(--gold-mid);
      border-color: var(--gold-mid);
      font-weight: 500;
    }

    .filter-sep {
      width: 1px;
      height: 20px;
      background: rgba(180,130,60,0.15);
      margin: 0 4px;
    }

    .search-options {
      display: flex;
      gap: 16px;
      margin-top: 12px;
      align-items: center;
      flex-wrap: wrap;
    }

    .search-option {
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      color: var(--amber-dim);
      cursor: pointer;
      font-weight: 300;
    }

    .search-option input[type="checkbox"] {
      accent-color: var(--gold-mid);
    }

    .search-history {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-top: 10px;
      flex-wrap: wrap;
    }

    .search-history-label {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      color: var(--amber-dim);
      font-weight: 300;
    }

    .search-history-item {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      color: var(--sand);
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(180,130,60,0.1);
      border-radius: 2px;
      padding: 4px 10px;
      cursor: pointer;
      transition: all 0.2s;
      font-weight: 300;
    }

    .search-history-item:hover {
      background: rgba(180,130,60,0.08);
      border-color: rgba(180,130,60,0.25);
      color: var(--parchment);
    }

    /* ── Search Results ── */
    .search-results-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
      padding-top: 24px;
    }

    .search-results-count {
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      color: var(--amber-dim);
      font-weight: 300;
    }

    .search-results-count strong {
      color: var(--gold-light);
      font-weight: 500;
    }

    .search-clear {
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      color: var(--gold-mid);
      background: none;
      border: 1px solid rgba(180,130,60,0.2);
      padding: 6px 16px;
      border-radius: 2px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .search-clear:hover {
      background: rgba(180,130,60,0.1);
      border-color: rgba(180,130,60,0.4);
    }

    /* ── Word frequency chart ── */
    .freq-chart {
      margin-bottom: 32px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(180,130,60,0.08);
      border-radius: 2px;
      overflow: hidden;
    }

    .freq-chart-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      cursor: pointer;
      transition: background 0.2s;
      user-select: none;
    }

    .freq-chart-header:hover {
      background: rgba(180,130,60,0.04);
    }

    .freq-chart-title {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 10px;
      letter-spacing: 0.2em;
      color: var(--amber-dim);
      text-transform: uppercase;
    }

    .freq-chart-toggle {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      color: var(--amber-dim);
      transition: transform 0.3s;
    }

    .freq-chart.collapsed .freq-chart-toggle {
      transform: rotate(-90deg);
    }

    .freq-chart-body {
      padding: 0 20px 20px;
      transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
      max-height: 600px;
      opacity: 1;
      overflow: hidden;
    }

    .freq-chart.collapsed .freq-chart-body {
      max-height: 0;
      opacity: 0;
      padding: 0 20px;
    }

    .freq-bar-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
    }

    .freq-bar-label {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      color: var(--sand);
      width: 120px;
      text-align: right;
      flex-shrink: 0;
      font-weight: 300;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .freq-bar-track {
      flex: 1;
      height: 16px;
      background: rgba(255,255,255,0.02);
      border-radius: 1px;
      overflow: hidden;
    }

    .freq-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--gold-mid), rgba(180,130,60,0.4));
      border-radius: 1px;
      transition: width 0.5s ease;
    }

    .freq-bar-count {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      color: var(--amber-dim);
      width: 36px;
      font-weight: 300;
    }

    .search-result {
      padding: 16px 0;
      border-bottom: 1px solid rgba(180,130,60,0.06);
      cursor: pointer;
      transition: background 0.2s;
    }

    .search-result:hover {
      background: rgba(180,130,60,0.04);
      margin: 0 -12px;
      padding-left: 12px;
      padding-right: 12px;
      border-radius: 2px;
    }

    .search-result-ref {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 11px;
      letter-spacing: 0.12em;
      color: var(--gold-mid);
      margin-bottom: 6px;
    }

    .search-result-text {
      font-family: 'Cormorant Garamond', serif;
      font-size: 18px;
      color: var(--sand);
      line-height: 1.7;
      font-weight: 300;
    }

    .search-result-text mark {
      background: rgba(180,130,60,0.25);
      color: var(--gold-light);
      padding: 1px 2px;
      border-radius: 1px;
    }

    .search-loading {
      text-align: center;
      padding: 60px 24px;
    }

    .search-loading-text {
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      color: var(--amber-dim);
      font-weight: 300;
      animation: shimmer 1.5s ease-in-out infinite;
    }

    .load-more-btn {
      display: block;
      margin: 32px auto;
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 11px;
      letter-spacing: 0.15em;
      color: var(--gold-mid);
      background: none;
      border: 1px solid rgba(180,130,60,0.2);
      padding: 12px 32px;
      border-radius: 2px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .load-more-btn:hover {
      background: rgba(180,130,60,0.1);
      border-color: rgba(180,130,60,0.4);
    }

    /* ── Related-verses panel — card grid, iOS-aligned ── */
    .cross-ref-panel {
      margin: 56px auto 0;
      padding: 0;
      background: transparent;
      border: 0;
      max-width: 720px;
    }
    .cross-ref-head {
      text-align: center;
      margin-bottom: 22px;
    }
    .cross-ref-eyebrow {
      display: inline-block;
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--gold-mid);
      margin-bottom: 8px;
    }
    .cross-ref-title {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 400;
      font-size: clamp(18px, 2.4vw, 22px);
      line-height: 1.35;
      color: var(--sand);
      margin: 0;
    }
    .cross-ref-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 12px;
    }
    .cross-ref-card {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 16px 18px 18px;
      background:
        radial-gradient(ellipse at 100% 0%, rgba(168,116,42,0.10) 0%, transparent 60%),
        var(--card-surface, #17130b);
      border: 1px solid var(--card-border, rgba(180,130,60,0.18));
      border-radius: 12px;
      text-decoration: none;
      color: inherit;
      cursor: pointer;
      transition:
        transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
    }
    .cross-ref-card:hover {
      transform: translateY(-2px);
      border-color: rgba(168, 116, 42, 0.45);
      box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(168, 116, 42, 0.18);
    }
    .cross-ref-card__ref {
      display: inline-block;
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold-mid);
    }
    .cross-ref-card__text {
      font-family: 'Lora', Georgia, serif;
      font-size: 14.5px;
      font-weight: 400;
      font-style: normal;
      line-height: 1.55;
      color: var(--parchment);
      margin: 0;
      /* Limit to 4 lines so cards stay roughly the same height */
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .cross-ref-card__cta {
      align-self: flex-start;
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--amber-dim);
      margin-top: auto;
      transition: color 0.18s ease;
    }
    .cross-ref-card:hover .cross-ref-card__cta { color: var(--gold-mid); }
    @media (max-width: 540px) {
      .cross-ref-grid { grid-template-columns: 1fr; }
    }

    /* ── Print stylesheet — clean book-style page on paper.
       The KWS is CC0; people can legitimately print and give it away.
       This makes File → Print produce something worth handing to someone. */
    @media print {
      /* Hide all chrome: nav, sidebar, controls, breadcrumb, audio bar,
         banners, footers, search, popups, toasts, etc. */
      .site-nav,
      .scripture-sidebar,
      .reader-controls,
      .breadcrumb,
      .chapter-pills,
      .chapter-footer,
      .chapter-nav,
      #searchResults,
      #welcome,
      .scripture-welcome,
      .selection-popup,
      .verse-share-tooltip,
      .audio-bar,
      #audioBar,
      .app-banner,
      .back-to-top,
      .skip-to-content,
      .listen-btn,
      .font-size-btn,
      .controls-sep,
      .red-letter-toggle,
      script,
      noscript {
        display: none !important;
      }

      /* Reset to ink-on-paper — black serif on white. */
      html, body {
        background: white !important;
        color: black !important;
        font-family: 'Lora', 'Cormorant Garamond', Georgia, serif !important;
        font-size: 11pt !important;
        line-height: 1.6 !important;
      }

      /* Reader fills the page; no fixed sidebar offset. */
      .scripture-app { display: block !important; padding: 0 !important; }
      .scripture-reader { margin: 0 !important; padding: 0 !important; max-width: 100% !important; }
      #chapterContent { padding: 0 !important; }

      /* Chapter heading — small uppercase tracked label, doesn't dominate. */
      .chapter-heading {
        font-family: 'Inter', sans-serif !important;
        font-size: 9pt !important;
        letter-spacing: 0.22em !important;
        color: #555 !important;
        text-transform: uppercase !important;
        text-align: center !important;
        margin: 0 0 18pt 0 !important;
      }

      /* Verse list — clean prose flow. */
      .verse-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
      .verse-item {
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 0 0 6pt 0 !important;
        page-break-inside: avoid;
        display: inline !important;
      }
      .verse-text {
        font-family: 'Lora', 'Cormorant Garamond', Georgia, serif !important;
        font-size: 11pt !important;
        color: black !important;
        line-height: 1.6 !important;
        font-weight: 400 !important;
      }
      .verse-num {
        font-family: 'Inter', sans-serif !important;
        font-size: 7pt !important;
        color: #888 !important;
        font-weight: 600 !important;
        vertical-align: super !important;
        margin-right: 2pt !important;
        opacity: 1 !important;
      }
      /* Divine speech in print: italic + slightly heavier, no gold. */
      .verse-item.divine .verse-text {
        font-style: italic !important;
        color: black !important;
        font-weight: 500 !important;
      }
      .verse-item.divine .verse-num { color: #888 !important; }
      .verse-item.divine { border: 0 !important; padding: 0 !important; }

      /* Page break between chapters when printing multiple. */
      .chapter-heading + .verse-list { page-break-before: avoid; }

      /* Translation badge becomes a small footer credit on every page. */
      .translation-badge {
        font-family: 'Inter', sans-serif !important;
        font-size: 7pt !important;
        color: #888 !important;
        text-align: center !important;
        margin-top: 18pt !important;
        padding-top: 6pt !important;
        border-top: 0.5pt solid #ccc !important;
      }

      /* Hide cross-references and other rich interactive panels. */
      #crossRefs, .cross-refs { display: none !important; }

      /* Remove highlights — print doesn't need a "you tapped this" indicator. */
      .verse-item.highlighted { background: transparent !important; border: 0 !important; padding: 0 !important; }

      /* Hyperlinks: underline removed for cleaner reading. */
      a, a:visited { color: inherit !important; text-decoration: none !important; }
      /* But scripture cross-references that show as anchors — also clean. */

      /* Page setup. */
      @page {
        margin: 0.75in;
        size: letter;
      }
    }