Redesign Scripture Index with BSB verse text and row layout; v1.2.1

- Replace cramped auto-fill grid with full-width row layout (reference | verse text | arrow)
- Fetch BSB passage text from bible.helloao.org, grouped by chapter to minimize API calls
- Display 2-line italic excerpt of each passage beneath the lesson title
- Hover state reveals arrow and highlights row in gold
- Mobile-responsive collapse to single column

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/App.css

@@ -12349,14 +12349,23 @@
 /* ── Scripture index page ────────────────────────────────────────────────── */
 .scripture-index-main { padding: 3rem 1.5rem 5rem; }
 .scripture-index-note { color: var(--brand-muted, #b0a48c); margin: 2rem 0; }
-.scripture-study-group { margin-bottom: 3rem; }
-.scripture-study-title { font-family: var(--brand-font-heading, 'Cormorant Garamond', serif); font-size: 1.6rem; font-weight: 600; color: var(--brand-gold, #c9a84c); margin: 0 0 1.25rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--brand-border, #2a2518); }
-.scripture-entry-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.25rem 1.5rem; }
-.scripture-entry { margin: 0; }
-.scripture-entry-link { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.4rem 0; color: var(--brand-warm-white, #f0ead8); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.15s, border-color 0.15s; }
-.scripture-entry-link:hover { color: var(--brand-gold, #c9a84c); border-bottom-color: var(--brand-gold, #c9a84c); }
-.scripture-entry-ref { font-family: var(--brand-font-body, 'EB Garamond', serif); font-size: 0.95rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
-.scripture-entry-title { font-size: 0.82rem; color: var(--brand-muted, #b0a48c); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.scripture-study-group { margin-bottom: 4rem; }
+.scripture-study-title { font-family: var(--brand-font-heading, 'Cormorant Garamond', serif); font-size: 1.6rem; font-weight: 600; color: var(--brand-gold, #c9a84c); margin: 0 0 0; padding-bottom: 0.75rem; border-bottom: 2px solid var(--brand-gold, #c9a84c); }
+.scripture-entry-table { display: flex; flex-direction: column; }
+.scripture-entry-row { display: grid; grid-template-columns: 130px 1fr 20px; gap: 0 1.5rem; align-items: start; padding: 1rem 0.75rem; border-bottom: 1px solid var(--brand-border, #2a2518); text-decoration: none; color: inherit; transition: background 0.15s; border-radius: 4px; }
+.scripture-entry-row:hover { background: rgba(201,168,76,0.06); }
+.scripture-entry-ref { font-family: var(--brand-font-body, 'EB Garamond', serif); font-size: 1rem; font-weight: 700; color: var(--brand-gold, #c9a84c); white-space: nowrap; padding-top: 0.1rem; }
+.scripture-entry-body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
+.scripture-entry-verse { font-family: var(--brand-font-body, 'EB Garamond', serif); font-size: 0.925rem; line-height: 1.55; color: var(--brand-warm-white, #f0ead8); font-style: italic; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.scripture-entry-lesson { font-size: 0.75rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--brand-muted, #b0a48c); margin-top: 0.15rem; }
+.scripture-entry-arrow { color: var(--brand-gold, #c9a84c); opacity: 0.35; font-size: 1rem; padding-top: 0.1rem; transition: opacity 0.15s, transform 0.15s; }
+.scripture-entry-row:hover .scripture-entry-arrow { opacity: 1; transform: translateX(3px); }
+@media (max-width: 600px) {
+  .scripture-entry-row { grid-template-columns: 1fr 20px; }
+  .scripture-entry-ref { grid-column: 1; font-size: 0.9rem; }
+  .scripture-entry-body { grid-column: 1; }
+  .scripture-entry-arrow { grid-column: 2; grid-row: 1 / 3; align-self: center; }
+}
 
 /* ── Admin status messages ───────────────────────────────────────────────── */
 .admin-save-ok { color: #6ebd7c; font-size: 0.85rem; margin: 0; }