/* ==========================================================================
   UECF.NET తెలుగు స్టడీ బైబిల్ — Telugu Study Bible (NKJV Study Bible, Telugu edition)
   Shares its whole architecture (layout, app-shell, mobile bottom tabs) with
   /study-bible/'s stylesheet -- this file is that base plus a Telugu
   typography layer (Noto Sans Telugu / Suranna, taller line-height so vowel
   signs and conjunct/vattu consonants never clip) and Telugu-specific
   spacing tweaks. Keep the two files' shared rules in sync by hand; there
   are only a few net-new rules below the "TELUGU TYPOGRAPHY" marker.
   ========================================================================== */

:root {
  /* UECF.NET brand tokens (from public_html/index.html) */
  --ink: #101B31;
  --ink-soft: #2C3E60;
  --gold: #C79A3D;
  --gold-soft: #E4C685;
  --maroon: #8B3A42;
  --teal: #2F5D62;

  /* Reading surface (light) */
  --paper: #FAF6EC;
  --paper-2: #F0E7D5;
  --paper-3: #E9DFC8;
  --text: #201A10;
  --text-2: #4A4239;
  --text-3: #7A6F61;
  --line: #E2D8C0;
  --line-2: #CFC2A0;
  --note-bg: #F3ECDA;
  --note-border: var(--teal);
  --xref-bg: #F7EFE0;
  --focus: #1d4ed8;
  --shadow: 0 1px 2px rgba(16,27,49,.08), 0 8px 24px rgba(16,27,49,.10);
  --shadow-lg: 0 4px 12px rgba(16,27,49,.14), 0 24px 56px rgba(16,27,49,.20);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-scripture: 'Merriweather', 'Noto Serif', Georgia, 'Times New Roman', serif;
  /* Telugu script stack: Noto Sans Telugu first (complete, well-hinted
     coverage of vowel signs and conjuncts at UI sizes), Suranna as the
     more traditional/display-leaning fallback, then generic sans-serif.
     Applied to the whole document below -- Telugu book names, UI chrome,
     and the Scripture/notes text all read better in a script-native face
     than forced into the Latin display/body fonts above. */
  --font-telugu: 'Noto Sans Telugu', 'Suranna', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fs: 1.0625rem;
  --wrap: 1280px;
  --radius: 10px;
  color-scheme: light;
}

[data-theme="dark"] {
  --paper: #12100C;
  --paper-2: #1A1712;
  --paper-3: #241F17;
  --text: #EFE8D8;
  --text-2: #C9BFA9;
  --text-3: #978C77;
  --line: #35301F;
  --line-2: #443C28;
  --note-bg: #1D2620;
  --xref-bg: #211C13;
  --gold-soft: #E8C765;
  --ink: #0B1220;
  --ink-soft: #182238;
  --focus: #93c5fd;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
  --shadow-lg: 0 4px 12px rgba(0,0,0,.55), 0 24px 56px rgba(0,0,0,.55);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 7.5rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs);
  line-height: 1.6;
}

img { max-width: 100%; height: auto; }
a { color: var(--maroon); }
[data-theme="dark"] a { color: var(--gold-soft); }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--gold); color: var(--ink); padding: 10px 18px; z-index: 300; font-weight: 700; border-radius: 0 0 6px 0; }
.skip-link:focus { left: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0 0 .4em; line-height: 1.2; color: var(--text); }
button { font: inherit; }

/* ---------------------------------------------------------------- header */
.sb-header { background: var(--ink); color: #fff; position: sticky; top: 0; z-index: 200; border-bottom: 3px solid var(--gold); }
.sb-header-inner { display: flex; align-items: center; gap: 16px; justify-content: space-between; max-width: var(--wrap); margin: 0 auto; padding: 8px 16px; }
.sb-brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.sb-brand:hover { text-decoration: none; }
.sb-brand img { width: 38px; height: 38px; flex: none; }
.sb-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.sb-brand-text strong { font-family: var(--font-display); font-size: 1.05rem; }
.sb-brand-text small { color: var(--gold-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.sb-header-nav { display: flex; align-items: center; gap: 4px; font-size: .88rem; }
.sb-header-nav a { color: #fff; padding: 8px 10px; border-radius: 5px; }
.sb-header-nav a:hover { background: rgba(228,198,133,.15); color: var(--gold-soft); text-decoration: none; }

/* ------------------------------------------------------- mobile app bar
   Same app-shell pattern as /study-bible/: replaces .sb-header on narrow
   viewports with a Home icon, the current chapter title, and a "More" menu
   for the sister Bible editions. See the 760px breakpoint below. */
.sb-mobile-bar { display: none; }
.sb-mobile-home {
  flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #fff; border-radius: 8px; text-decoration: none;
}
.sb-mobile-home:hover { background: rgba(228,198,133,.15); text-decoration: none; }
.sb-mobile-title {
  flex: 1; min-width: 0; text-align: center; font-family: var(--font-telugu); font-weight: 600;
  font-size: 1rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-mobile-more {
  flex: none; width: 36px; height: 36px; border-radius: 8px; border: none; background: none;
  color: #fff; font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.sb-mobile-more:hover, .sb-mobile-more[aria-expanded="true"] { background: rgba(228,198,133,.15); color: var(--gold-soft); }

/* --------------------------------------------------------------- toolbar */
.sb-toolbar { background: var(--paper-2); border-bottom: 1px solid var(--line); position: sticky; top: 55px; z-index: 190; }
.sb-toolbar-inner { max-width: var(--wrap); margin: 0 auto; padding: 8px 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sb-select, .sb-input {
  font-family: var(--font-body); font-size: .9rem; color: var(--text);
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 7px;
  padding: 8px 10px; min-height: 40px;
}
.sb-select:focus, .sb-input:focus { border-color: var(--gold); }
.sb-nav-btns { display: flex; gap: 4px; }
.sb-btn {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2);
  background: var(--paper); color: var(--text); border-radius: 7px; padding: 8px 12px;
  cursor: pointer; min-height: 40px; min-width: 40px; justify-content: center;
}
.sb-btn:hover { border-color: var(--gold); color: var(--maroon); }
.sb-btn[aria-pressed="true"] { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.sb-search-wrap { position: relative; flex: 1 1 220px; min-width: 180px; }
.sb-search-wrap input { width: 100%; }
.sb-tool-group { display: flex; gap: 4px; margin-left: auto; }
.sb-progress { height: 3px; background: var(--paper-3); }
.sb-progress span { display: block; height: 100%; width: 0; background: var(--gold); transition: width .1s linear; }

/* ----------------------------------------------------------------- layout */
.sb-layout { max-width: var(--wrap); margin: 0 auto; padding: 20px 16px 80px; display: grid; grid-template-columns: 260px minmax(0,1fr) 300px; gap: 24px; align-items: start; }
.sb-side { position: sticky; top: 116px; max-height: calc(100vh - 132px); overflow-y: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.sb-side h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--teal); margin-bottom: 10px; }
.sb-book-list { display: grid; gap: 2px; }
.sb-book-list a, .sb-book-list button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 7px 8px; border-radius: 6px; color: var(--text-2); font-size: .92rem; cursor: pointer; }
.sb-book-list a:hover, .sb-book-list button:hover { background: var(--paper-2); text-decoration: none; color: var(--text); }
.sb-book-list a[aria-current="true"], .sb-book-list button[aria-current="true"] { background: var(--gold-soft); color: var(--ink); font-weight: 600; }
.sb-testament-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--maroon); margin: 12px 0 4px; }
.sb-testament-label:first-child { margin-top: 0; }
.sb-chapter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px,1fr)); gap: 4px; margin-top: 8px; }
.sb-chapter-grid a { display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 6px; background: var(--paper-2); color: var(--text-2); font-size: .85rem; border: 1px solid var(--line); }
.sb-chapter-grid a:hover { border-color: var(--gold); color: var(--maroon); text-decoration: none; }
.sb-chapter-grid a[aria-current="true"] { background: var(--gold); color: var(--ink); border-color: var(--gold); font-weight: 700; }

.sb-main { min-width: 0; }
.sb-chapter-head { text-align: center; padding-bottom: 12px; border-bottom: 2px solid var(--line); margin-bottom: 18px; }
.sb-chapter-head .kicker { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--teal); font-weight: 700; }
.sb-chapter-head h1 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); margin: .2em 0; }
.sb-chapter-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 10px; }
.sb-chapter-nav .sb-btn { flex: none; }

.sb-scripture { font-family: var(--font-scripture); font-size: 1.08em; line-height: 1.85; color: var(--text); }
.sb-scripture.reading-mode { max-width: 46rem; margin: 0 auto; }
.sb-verse { display: block; margin-bottom: .15em; scroll-margin-top: 8rem; border-radius: 6px; }
.sb-verse:target, .sb-verse.sb-verse-highlight { background: var(--gold-soft); animation: sb-flash 2.4s ease-out; }
[data-theme="dark"] .sb-verse:target, [data-theme="dark"] .sb-verse.sb-verse-highlight { background: #4a3a12; }
@keyframes sb-flash { from { background: var(--gold-soft); } to { background: transparent; } }
.sb-vnum { font-family: var(--font-body); font-weight: 700; color: var(--maroon); font-size: .78em; vertical-align: super; margin-right: .15em; cursor: pointer; }
[data-theme="dark"] .sb-vnum { color: var(--gold-soft); }
.sb-vtext { font-family: var(--font-telugu); }
/* NKJV English reference line shown under each Telugu verse -- secondary,
   visually distinct from the primary Telugu text (see renderScripture in
   study-bible-te.js), never the other way around: Telugu is this edition's
   primary reading text, English is the cross-reference aid. */
.sb-vtext-en { display: block; font-family: var(--font-body); font-size: .82em; font-style: italic; color: var(--text-3); margin: .1em 0 .5em 1.7em; line-height: 1.5; }
[data-theme="dark"] .sb-vtext-en { color: var(--text-3); }
.sb-section-heading { font-family: var(--font-display); font-weight: 600; color: var(--teal); font-size: 1.05em; margin: 1.4em 0 .5em; }
.sb-section-heading:first-child { margin-top: 0; }
.sb-superscription { font-style: italic; color: var(--ink-soft, #6b6258); font-size: .92em; margin: 0 0 1em; }
.sb-note-marker { display: inline-flex; align-items: center; justify-content: center; width: 1.05em; height: 1.05em; font-size: .65em; border-radius: 50%; background: var(--teal); color: #fff; vertical-align: super; margin-left: .1em; cursor: pointer; text-decoration: none; }
.sb-note-marker:hover { background: var(--maroon); text-decoration: none; }

/* study notes, distinctly styled from Scripture text */
.sb-note {
  font-family: var(--font-body); font-size: .92em; line-height: 1.55; color: var(--text-2);
  background: var(--note-bg); border-left: 4px solid var(--note-border);
  border-radius: 0 8px 8px 0; padding: 10px 14px; margin: .4em 0 1em;
}
.sb-note .sb-note-ref { font-weight: 700; color: var(--teal); margin-right: .4em; }
[data-theme="dark"] .sb-note .sb-note-ref { color: var(--gold-soft); }
.sb-note-label { display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--teal); background: rgba(47,93,98,.12); padding: 1px 7px; border-radius: 10px; margin-bottom: 4px; }

/* cross references panel */
.sb-xref-panel { background: var(--xref-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.sb-xref-panel h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--maroon); margin-bottom: 8px; }
.sb-xref-list { display: grid; gap: 6px; font-size: .88rem; }
.sb-xref-list a { display: flex; gap: 6px; color: var(--text-2); }
.sb-xref-list a::before { content: "→"; color: var(--gold); font-weight: 700; }
.sb-xref-list a:hover { color: var(--maroon); }
.sb-xref-list a[data-unavailable="true"] { color: var(--text-3); cursor: default; }
.sb-xref-list a[data-unavailable="true"]:hover { text-decoration: none; }
.sb-xref-empty { color: var(--text-3); font-size: .88rem; font-style: italic; }

/* book intro / outline */
.sb-intro-grid { display: grid; gap: 10px; margin: 1em 0; }
.sb-intro-field { border-bottom: 1px dashed var(--line); padding-bottom: 8px; }
.sb-intro-field h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--teal); margin-bottom: 4px; }
.sb-intro-field p { margin: 0; color: var(--text-2); line-height: 1.6; }
.sb-outline-list { margin: 0; padding-left: 1.2em; color: var(--text-2); }
.sb-outline-list li { margin-bottom: .35em; }

/* study images: maps / charts / tables */
.sb-figure { margin: 1.4em 0; text-align: center; }
.sb-figure img { border-radius: 8px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.sb-figure figcaption { font-size: .85rem; color: var(--text-3); margin-top: 6px; }

/* verse action bar */
.sb-verse-actions { position: fixed; left: 50%; transform: translate(-50%, 8px); bottom: 20px; background: var(--ink); color: #fff; border-radius: 30px; padding: 6px; display: flex; gap: 4px; box-shadow: var(--shadow-lg); z-index: 150; opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.sb-verse-actions.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.sb-verse-actions button { background: none; border: none; color: #fff; padding: 8px 12px; border-radius: 20px; font-size: .82rem; cursor: pointer; }
.sb-verse-actions button:hover { background: rgba(228,198,133,.2); color: var(--gold-soft); }

/* search modal */
.sb-modal { position: fixed; inset: 0; background: rgba(16,27,49,.55); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px; z-index: 400; }
.sb-modal[hidden] { display: none; }
.sb-modal-panel { background: var(--paper); border-radius: var(--radius); max-width: 640px; width: 100%; max-height: 78vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.sb-modal-field { display: flex; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); }
.sb-modal-field input { flex: 1; border: none; background: none; font-size: 1.05rem; color: var(--text); outline: none; }
.sb-modal-status { padding: 8px 14px; font-size: .82rem; color: var(--text-3); }
.sb-modal-results { overflow-y: auto; padding: 0 6px 10px; }
.sb-modal-results li { list-style: none; }
.sb-modal-results a { display: block; padding: 10px 10px; border-radius: 8px; color: var(--text); }
.sb-modal-results a:hover { background: var(--paper-2); text-decoration: none; }
.sb-modal-results .where { font-size: .76rem; color: var(--teal); font-weight: 700; margin-bottom: 2px; }
.sb-modal-results .snippet { font-size: .9rem; color: var(--text-2); }
.sb-modal-results mark { background: var(--gold-soft); color: var(--ink); border-radius: 2px; }

/* back to top */
.sb-to-top { position: fixed; right: 20px; bottom: 20px; width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: var(--ink); border: none; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .2s ease; font-size: 1.1rem; z-index: 140; }
.sb-to-top.show { opacity: 1; pointer-events: auto; }

/* footer */
.sb-footer { background: var(--ink); color: #E1E6F0; padding: 28px 16px; text-align: center; font-size: .85rem; }
.sb-footer a { color: var(--gold-soft); }

/* ------------------------------------------------ fixed bottom app tab bar
   Mobile-only, thumb-reachable navigation (Books / Cross Refs / More),
   replacing the old inline pills that used to push the Scripture text down
   the page. Hidden on desktop, where the sidebar and xref panel are always
   visible and the header nav already lists the sister editions. */
.sb-bottom-tabs { display: none; }
.sb-tab-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; color: var(--text-2); padding: 7px 4px 6px;
  font-family: var(--font-body); font-size: .68rem; cursor: pointer;
}
.sb-tab-btn span:first-child { font-size: 1.2rem; line-height: 1; }
.sb-tab-btn[aria-expanded="true"], .sb-tab-btn.sb-tab-active { color: var(--maroon); }
[data-theme="dark"] .sb-tab-btn[aria-expanded="true"], [data-theme="dark"] .sb-tab-btn.sb-tab-active { color: var(--gold-soft); }

/* "More" bottom sheet: sister Bible editions + Home, opened from either the
   mobile app bar's ⋯ or the bottom tab bar's ⋯ (same panel, two triggers). */
.sb-sheet-backdrop { position: fixed; inset: 0; background: rgba(16,27,49,.5); z-index: 420; }
.sb-sheet-backdrop[hidden] { display: none; }
.sb-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 430; max-width: var(--wrap); margin: 0 auto;
  background: var(--paper); border-radius: 16px 16px 0 0; box-shadow: var(--shadow-lg);
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0));
}
.sb-sheet[hidden] { display: none; }
.sb-sheet-handle { width: 36px; height: 4px; background: var(--line-2); border-radius: 2px; margin: 4px auto 14px; }
.sb-sheet h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--teal); margin-bottom: 8px; }
.sb-sheet-links { display: grid; gap: 2px; margin-bottom: 14px; }
.sb-sheet-links a, .sb-sheet-current {
  display: flex; align-items: center; gap: 10px; padding: 12px 10px; border-radius: 8px; font-size: .98rem;
}
.sb-sheet-links a { color: var(--text); }
.sb-sheet-links a:hover { background: var(--paper-2); text-decoration: none; }
.sb-sheet-current { color: var(--text-3); }
.sb-sheet-current small { color: var(--text-3); }

/* -------------------------------------------------------------- reading modes */
body.sb-reading-mode .sb-side,
body.sb-reading-mode .sb-xref-panel-col { display: none; }
body.sb-reading-mode .sb-layout { grid-template-columns: 1fr; }
body.sb-reading-mode .sb-scripture { max-width: 46rem; margin: 0 auto; }

/* --------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .sb-layout { grid-template-columns: 240px minmax(0,1fr); }
  .sb-xref-panel-col { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  /* App-shell mode: swap the full church header for the compact home/title/
     more bar, and move primary navigation to a fixed bottom tab bar -- see
     .sb-mobile-bar / .sb-bottom-tabs above. Frees real vertical space for
     the actual Scripture text on a phone screen. */
  .sb-header { display: none; }
  .sb-mobile-bar {
    display: flex; align-items: center; gap: 6px; position: sticky; top: 0; z-index: 210;
    background: var(--ink); border-bottom: 3px solid var(--gold); padding: 8px 10px;
  }
  html { scroll-padding-top: 6.5rem; }
  .sb-verse, .sb-side, .sb-xref-panel-col { scroll-margin-top: 6.5rem; }

  .sb-layout { grid-template-columns: 1fr; padding-top: 12px; padding-bottom: 84px; }
  .sb-side, .sb-xref-panel-col { position: static; max-height: none; }
  .sb-side, .sb-xref-panel-col { display: none; }
  .sb-side.sb-open, .sb-xref-panel-col.sb-open { display: block; }

  .sb-bottom-tabs {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 210;
    background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -2px 10px rgba(16,27,49,.1);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .sb-verse-actions { bottom: 78px; }
  .sb-to-top { bottom: 78px; }

  .sb-toolbar { top: 52px; }
  .sb-toolbar-inner { padding: 6px 10px; }
  .sb-select, .sb-input, .sb-btn { min-height: 38px; padding: 6px 9px; font-size: .85rem; }
  .sb-brand-text small { display: none; }
}
/* Note: .sb-header itself (brand logo/name + nav links: UECF.NET, KJV Study
   Bible, Telugu-English Parallel Bible, Telugu Study Bible) is only ever
   shown above the 760px breakpoint -- see ".sb-header { display: none; }"
   above -- so it no longer needs its own phone-width wrapping rules; the
   compact .sb-mobile-bar / .sb-bottom-tabs app-shell takes over below that. */

/* ------------------------------------------------------------------ print */
@media print {
  .sb-header, .sb-mobile-bar, .sb-toolbar, .sb-side, .sb-xref-panel-col, .sb-verse-actions, .sb-to-top, .sb-footer, .sb-bottom-tabs, .sb-sheet, .sb-sheet-backdrop { display: none !important; }
  .sb-layout { grid-template-columns: 1fr; padding: 0; max-width: none; }
  .sb-scripture { font-size: 12pt; }
  a { color: inherit; text-decoration: none; }
  body { background: #fff; color: #000; }
}

/* review-flag banner for uncertain/garbled source content */
.sb-flag { background: #fdf6e3; border: 1px solid #e3ca8f; color: #6b551f; border-radius: 6px; padding: 8px 12px; font-size: .82rem; margin: .6em 0; }
[data-theme="dark"] .sb-flag { background: #2b2410; border-color: #6b551f; color: #e8c765; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ==========================================================================
   TELUGU TYPOGRAPHY
   The Noto Sans Telugu + Suranna imports live in index.html's <head> as a
   <link> to fonts.googleapis.com (matching how /study-bible/ loads Fraunces
   / Source Sans 3 / Merriweather -- a single upfront request beats a CSS
   @import, which blocks on its own extra round trip before the browser even
   discovers it). --font-telugu is already defined in :root above; the rules
   below apply it everywhere Telugu script actually appears, and give it
   enough line-height that vowel signs (matras) above/below the baseline and
   sub-joined/conjunct consonants (vattulu) never get clipped by a tight
   line box -- the single most common way Telugu web type goes wrong at UI
   font sizes.
   ========================================================================== */
html[lang="te"] body,
.sb-scripture, .sb-side, .sb-xref-panel, .sb-note, .sb-sheet, .sb-modal,
.sb-header-nav, .sb-brand-text, .sb-book-list, .sb-chapter-head, .sb-superscription {
  font-family: var(--font-telugu);
}
.sb-scripture, .sb-verse, .sb-vtext, .sb-note {
  line-height: 1.95;
}
.sb-scripture { font-size: 1.15rem; text-rendering: optimizeLegibility; }
/* Headings and nav labels: generous but not doubled line-height (these are
   short strings, not reading paragraphs) and no letter-spacing -- tracking
   telugu conjuncts apart visually separates characters that are supposed to
   stack/join, which is the opposite of what tracking is normally used for. */
.sb-chapter-head h1, .sb-side h2, .sb-book-list button, .sb-sheet h2 {
  font-family: var(--font-telugu);
  letter-spacing: 0;
  line-height: 1.5;
}
/* Numerals (verse numbers, chapter grid, Ctrl/⌘K hint) stay on the Latin
   body font -- Noto Sans Telugu's digits are fine, but the UI's existing
   numeral rhythm (verse superscripts etc.) was tuned against --font-body,
   and digits are unaffected by the vattu-clipping problem this section
   exists to fix. */
.sb-vnum, .sb-chapter-grid a, kbd { font-family: var(--font-body); }