/* ==========================================================================
   DIFFERENT - First Peter 3:15
   Core Stylesheet & 14 Curated Themes
   Layout: hero banner > sticky bar (parts + tools) > chapter header > text > pager
   Compatible with PHP 7.3, Ubuntu Nginx, Cloudflare/RocketLoader
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Root Scaling & Reset
   -------------------------------------------------------------------------- */
:root {
    --font-base: 16px;
    --font-scale: 1;

    /* Base Layout & Radius Variables */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 9999px;
        --transition-speed: 0.25s;
    --measure: 42rem;

    /* Derived from the active theme (resolved on <html>, so every theme gets them) */
    --c-glow: color-mix(in srgb, var(--c-primary) 15%, transparent);
    --bar-bg: color-mix(in srgb, var(--c-panel) 88%, transparent);

    /* Theme: 1. Midnight Sky Blue (Default Dark Theme) */
    --c-bg: #070d19;
    --c-text: #ecf3ff;
    --c-text-muted: #9ab4d6;
    --c-primary: #38bdf8;
    --c-secondary: #818cf8;
    --c-accent: #f59e0b;
    --c-panel: #0f1c33;
    --c-panel-header: #152644;
    --c-border: #1e3a63;
    --c-shadow: rgba(0, 0, 0, 0.65);
    --c-link: #60a5fa;
    --c-link-hover: #93c5fd;
    --c-tab-bg: #13243f;
    --c-tab-text: #9ab4d6;
    --c-tab-active-bg: #2563eb;
    --c-tab-active-text: #ffffff;
    --c-btn-bg: #193155;
    --c-btn-text: #f0f6ff;
    --c-btn-hover: #234372;
    --c-quote-bg: #0c182c;
    --c-quote-border: #38bdf8;
    --c-info-bg: #0c2340;
    --c-info-border: #2563eb;
    --c-info-text: #bfdbfe;
    --c-warn-bg: #321f08;
    --c-warn-border: #d97706;
    --c-warn-text: #fed7aa;
    --c-success-bg: #08291a;
    --c-success-border: #10b981;
    --c-success-text: #a7f3d0;
}

/* --------------------------------------------------------------------------
   1. The 14 Curated Themes
   (7 Dark Themes, then 7 Light Themes)
   -------------------------------------------------------------------------- */

/* DARK THEME 1: Midnight Sky Blue (Default) */
html.theme-midnight,
.swatch-dot.theme-midnight {
    --c-bg: #070d19;
    --c-text: #ecf3ff;
    --c-text-muted: #9ab4d6;
    --c-primary: #38bdf8;
    --c-secondary: #818cf8;
    --c-accent: #f59e0b;
    --c-panel: #0f1c33;
    --c-panel-header: #152644;
    --c-border: #1e3a63;
    --c-shadow: rgba(0, 0, 0, 0.65);
    --c-link: #60a5fa;
    --c-link-hover: #93c5fd;
    --c-tab-bg: #13243f;
    --c-tab-text: #9ab4d6;
    --c-tab-active-bg: #2563eb;
    --c-tab-active-text: #ffffff;
    --c-btn-bg: #193155;
    --c-btn-text: #f0f6ff;
    --c-btn-hover: #234372;
    --c-quote-bg: #0c182c;
    --c-quote-border: #38bdf8;
    --c-info-bg: #0c2340;
    --c-info-border: #2563eb;
    --c-info-text: #bfdbfe;
    --c-warn-bg: #321f08;
    --c-warn-border: #d97706;
    --c-warn-text: #fed7aa;
    --c-success-bg: #08291a;
    --c-success-border: #10b981;
    --c-success-text: #a7f3d0;
}

/* DARK THEME 2: Auburn Night (Deep red intensity) */
html.theme-auburn,
.swatch-dot.theme-auburn {
    --c-bg: #160808;
    --c-text: #ffecec;
    --c-text-muted: #d99c9c;
    --c-primary: #ef4444;
    --c-secondary: #f87171;
    --c-accent: #fbbf24;
    --c-panel: #260f0f;
    --c-panel-header: #331515;
    --c-border: #521c1c;
    --c-shadow: rgba(0, 0, 0, 0.75);
    --c-link: #f87171;
    --c-link-hover: #fca5a5;
    --c-tab-bg: #2d1313;
    --c-tab-text: #d99c9c;
    --c-tab-active-bg: #b91c1c;
    --c-tab-active-text: #ffffff;
    --c-btn-bg: #3b1717;
    --c-btn-text: #ffecec;
    --c-btn-hover: #501f1f;
    --c-quote-bg: #200b0b;
    --c-quote-border: #ef4444;
    --c-info-bg: #162438;
    --c-info-border: #3b82f6;
    --c-info-text: #bfdbfe;
    --c-warn-bg: #382109;
    --c-warn-border: #f59e0b;
    --c-warn-text: #fde68a;
    --c-success-bg: #0a2618;
    --c-success-border: #10b981;
    --c-success-text: #a7f3d0;
}

/* DARK THEME 3: Art Deco (Classic gold luxury) */
html.theme-artdeco,
.swatch-dot.theme-artdeco {
    --c-bg: #121314;
    --c-text: #f6edd9;
    --c-text-muted: #c7b99c;
    --c-primary: #e5c158;
    --c-secondary: #c99e32;
    --c-accent: #38bdf8;
    --c-panel: #1e2022;
    --c-panel-header: #282a2d;
    --c-border: #443c29;
    --c-shadow: rgba(0, 0, 0, 0.8);
    --c-link: #f3d47c;
    --c-link-hover: #faebd7;
    --c-tab-bg: #242629;
    --c-tab-text: #c7b99c;
    --c-tab-active-bg: #c99e32;
    --c-tab-active-text: #121314;
    --c-btn-bg: #2c2920;
    --c-btn-text: #f6edd9;
    --c-btn-hover: #3d392b;
    --c-quote-bg: #17181a;
    --c-quote-border: #e5c158;
    --c-info-bg: #122436;
    --c-info-border: #38bdf8;
    --c-info-text: #bae6fd;
    --c-warn-bg: #33240d;
    --c-warn-border: #e5c158;
    --c-warn-text: #fef3c7;
    --c-success-bg: #10261b;
    --c-success-border: #34d399;
    --c-success-text: #d1fae5;
}

/* DARK THEME 4: Acid High Energy (Hyper-neon green) */
html.theme-acid,
.swatch-dot.theme-acid {
    --c-bg: #050805;
    --c-text: #eaffea;
    --c-text-muted: #8eed8e;
    --c-primary: #22c55e;
    --c-secondary: #4ade80;
    --c-accent: #38bdf8;
    --c-panel: #0d170d;
    --c-panel-header: #142414;
    --c-border: #1b381b;
    --c-shadow: rgba(0, 0, 0, 0.85);
    --c-link: #4ade80;
    --c-link-hover: #86efac;
    --c-tab-bg: #111e11;
    --c-tab-text: #8eed8e;
    --c-tab-active-bg: #16a34a;
    --c-tab-active-text: #ffffff;
    --c-btn-bg: #152615;
    --c-btn-text: #eaffea;
    --c-btn-hover: #1f3b1f;
    --c-quote-bg: #080f08;
    --c-quote-border: #22c55e;
    --c-info-bg: #0b2230;
    --c-info-border: #0ea5e9;
    --c-info-text: #bae6fd;
    --c-warn-bg: #2d2406;
    --c-warn-border: #eab308;
    --c-warn-text: #fef08a;
    --c-success-bg: #0b2914;
    --c-success-border: #22c55e;
    --c-success-text: #bbf7d0;
}

/* DARK THEME 5: Vaporwave Sunset (Nostalgic 80s gradients) */
html.theme-vaporwave,
.swatch-dot.theme-vaporwave {
    --c-bg: #140924;
    --c-text: #fce7f3;
    --c-text-muted: #d8b4e2;
    --c-primary: #ec4899;
    --c-secondary: #06b6d4;
    --c-accent: #facc15;
    --c-panel: #23123d;
    --c-panel-header: #2e1850;
    --c-border: #4c2578;
    --c-shadow: rgba(0, 0, 0, 0.75);
    --c-link: #38bdf8;
    --c-link-hover: #f472b6;
    --c-tab-bg: #291547;
    --c-tab-text: #d8b4e2;
    --c-tab-active-bg: #db2777;
    --c-tab-active-text: #ffffff;
    --c-btn-bg: #351a5c;
    --c-btn-text: #fce7f3;
    --c-btn-hover: #49247e;
    --c-quote-bg: #1b0c30;
    --c-quote-border: #06b6d4;
    --c-info-bg: #10263f;
    --c-info-border: #0ea5e9;
    --c-info-text: #bae6fd;
    --c-warn-bg: #3a1c1d;
    --c-warn-border: #f43f5e;
    --c-warn-text: #fecdd3;
    --c-success-bg: #0c2b29;
    --c-success-border: #14b8a6;
    --c-success-text: #99f6e4;
}

/* DARK THEME 6: Boreal Night (Mystic aurora teals) */
html.theme-boreal,
.swatch-dot.theme-boreal {
    --c-bg: #061517;
    --c-text: #e6faf7;
    --c-text-muted: #8ed0c5;
    --c-primary: #14b8a6;
    --c-secondary: #2dd4bf;
    --c-accent: #a855f7;
    --c-panel: #0d2529;
    --c-panel-header: #13343a;
    --c-border: #1d4d54;
    --c-shadow: rgba(0, 0, 0, 0.7);
    --c-link: #2dd4bf;
    --c-link-hover: #99f6e4;
    --c-tab-bg: #102d32;
    --c-tab-text: #8ed0c5;
    --c-tab-active-bg: #0d9488;
    --c-tab-active-text: #ffffff;
    --c-btn-bg: #153b42;
    --c-btn-text: #e6faf7;
    --c-btn-hover: #1e525c;
    --c-quote-bg: #091c1f;
    --c-quote-border: #2dd4bf;
    --c-info-bg: #0d2838;
    --c-info-border: #0284c7;
    --c-info-text: #bae6fd;
    --c-warn-bg: #2e210b;
    --c-warn-border: #d97706;
    --c-warn-text: #fef3c7;
    --c-success-bg: #0a2921;
    --c-success-border: #10b981;
    --c-success-text: #a7f3d0;
}

/* DARK THEME 7: Neon Void (Sharp terminal cyan) */
html.theme-neonvoid,
.swatch-dot.theme-neonvoid {
    --c-bg: #000000;
    --c-text: #e0ffff;
    --c-text-muted: #80dede;
    --c-primary: #00ffff;
    --c-secondary: #00bfff;
    --c-accent: #ff007f;
    --c-panel: #091515;
    --c-panel-header: #0f2222;
    --c-border: #004444;
    --c-shadow: rgba(0, 255, 255, 0.12);
    --c-link: #00ffff;
    --c-link-hover: #b3ffff;
    --c-tab-bg: #0d1e1e;
    --c-tab-text: #80dede;
    --c-tab-active-bg: #008b8b;
    --c-tab-active-text: #ffffff;
    --c-btn-bg: #112828;
    --c-btn-text: #e0ffff;
    --c-btn-hover: #1b3d3d;
    --c-quote-bg: #050d0d;
    --c-quote-border: #00ffff;
    --c-info-bg: #051b29;
    --c-info-border: #00bfff;
    --c-info-text: #e0f7ff;
    --c-warn-bg: #2d1800;
    --c-warn-border: #ff8c00;
    --c-warn-text: #ffe0b2;
    --c-success-bg: #002611;
    --c-success-border: #00ff7f;
    --c-success-text: #d0f8ce;
}

/* LIGHT THEME 8: Creme and Gold (Warm ivory) */
html.theme-cremegold,
.swatch-dot.theme-cremegold {
    --c-bg: #fffdf5;
    --c-text: #3c3322;
    --c-text-muted: #73674f;
    --c-primary: #b8860b;
    --c-secondary: #d4af37;
    --c-accent: #1e3a8a;
    --c-panel: #fcf7e8;
    --c-panel-header: #f6ecd0;
    --c-border: #e8dbb9;
    --c-shadow: rgba(74, 58, 26, 0.1);
    --c-link: #9a6d05;
    --c-link-hover: #6e4e02;
    --c-tab-bg: #f5eccf;
    --c-tab-text: #594a2a;
    --c-tab-active-bg: #b8860b;
    --c-tab-active-text: #ffffff;
    --c-btn-bg: #efe2be;
    --c-btn-text: #3c3322;
    --c-btn-hover: #e5d3a5;
    --c-quote-bg: #fffbf0;
    --c-quote-border: #b8860b;
    --c-info-bg: #eff6ff;
    --c-info-border: #3b82f6;
    --c-info-text: #1e3a8a;
    --c-warn-bg: #fffbeb;
    --c-warn-border: #f59e0b;
    --c-warn-text: #78350f;
    --c-success-bg: #f0fdf4;
    --c-success-border: #22c55e;
    --c-success-text: #14532d;
}

/* LIGHT THEME 9: Ink and Paper (Refined monochrome) */
html.theme-ink,
.swatch-dot.theme-ink {
    --c-bg: #f7f7f8;
    --c-text: #1a1a1a;
    --c-text-muted: #555555;
    --c-primary: #262626;
    --c-secondary: #525252;
    --c-accent: #2563eb;
    --c-panel: #ffffff;
    --c-panel-header: #eeeeee;
    --c-border: #d4d4d4;
    --c-shadow: rgba(0, 0, 0, 0.08);
    --c-link: #1d4ed8;
    --c-link-hover: #1e40af;
    --c-tab-bg: #e5e5e5;
    --c-tab-text: #333333;
    --c-tab-active-bg: #262626;
    --c-tab-active-text: #ffffff;
    --c-btn-bg: #eaeaea;
    --c-btn-text: #1a1a1a;
    --c-btn-hover: #dcdcdc;
    --c-quote-bg: #fafafa;
    --c-quote-border: #525252;
    --c-info-bg: #f0f7ff;
    --c-info-border: #2563eb;
    --c-info-text: #1e3a8a;
    --c-warn-bg: #fefce8;
    --c-warn-border: #ca8a04;
    --c-warn-text: #713f12;
    --c-success-bg: #f0fdf4;
    --c-success-border: #16a34a;
    --c-success-text: #14532d;
}

/* LIGHT THEME 10: Forest Ethereal (Organic greens) */
html.theme-ethereal,
.swatch-dot.theme-ethereal {
    --c-bg: #f1f6f1;
    --c-text: #18331d;
    --c-text-muted: #49634d;
    --c-primary: #2d6a36;
    --c-secondary: #42824c;
    --c-accent: #b45309;
    --c-panel: #e4eee4;
    --c-panel-header: #d6e5d6;
    --c-border: #bed2bf;
    --c-shadow: rgba(24, 51, 29, 0.1);
    --c-link: #24572c;
    --c-link-hover: #17381d;
    --c-tab-bg: #d7e6d7;
    --c-tab-text: #2c5432;
    --c-tab-active-bg: #2d6a36;
    --c-tab-active-text: #ffffff;
    --c-btn-bg: #cadfca;
    --c-btn-text: #18331d;
    --c-btn-hover: #b9d5b9;
    --c-quote-bg: #eaf3ea;
    --c-quote-border: #2d6a36;
    --c-info-bg: #f0f9ff;
    --c-info-border: #0284c7;
    --c-info-text: #075985;
    --c-warn-bg: #fffbeb;
    --c-warn-border: #d97706;
    --c-warn-text: #78350f;
    --c-success-bg: #edfbf0;
    --c-success-border: #16a34a;
    --c-success-text: #14532d;
}

/* LIGHT THEME 11: Denim Wash (Soft cotton blue) */
html.theme-denim,
.swatch-dot.theme-denim {
    --c-bg: #f1f5f9;
    --c-text: #1e293b;
    --c-text-muted: #475569;
    --c-primary: #3b82f6;
    --c-secondary: #60a5fa;
    --c-accent: #d97706;
    --c-panel: #e2e8f0;
    --c-panel-header: #cbd5e1;
    --c-border: #94a3b8;
    --c-shadow: rgba(30, 41, 59, 0.1);
    --c-link: #1d4ed8;
    --c-link-hover: #1e3a8a;
    --c-tab-bg: #cbd5e1;
    --c-tab-text: #334155;
    --c-tab-active-bg: #2563eb;
    --c-tab-active-text: #ffffff;
    --c-btn-bg: #d4deec;
    --c-btn-text: #1e293b;
    --c-btn-hover: #bfd0e4;
    --c-quote-bg: #e9eff7;
    --c-quote-border: #3b82f6;
    --c-info-bg: #eff6ff;
    --c-info-border: #3b82f6;
    --c-info-text: #1e3a8a;
    --c-warn-bg: #fffbeb;
    --c-warn-border: #f59e0b;
    --c-warn-text: #78350f;
    --c-success-bg: #f0fdf4;
    --c-success-border: #22c55e;
    --c-success-text: #14532d;
}

/* LIGHT THEME 12: Peach Fuzz (Velvet warmth pastels) */
html.theme-peach,
.swatch-dot.theme-peach {
    --c-bg: #fff6f2;
    --c-text: #4a281c;
    --c-text-muted: #805040;
    --c-primary: #e07a5f;
    --c-secondary: #f28482;
    --c-accent: #3d5a80;
    --c-panel: #fde8e1;
    --c-panel-header: #fcd9ce;
    --c-border: #f4bead;
    --c-shadow: rgba(74, 40, 28, 0.08);
    --c-link: #c0563b;
    --c-link-hover: #8f341d;
    --c-tab-bg: #fcd9ce;
    --c-tab-text: #593122;
    --c-tab-active-bg: #d6684d;
    --c-tab-active-text: #ffffff;
    --c-btn-bg: #f8cbbd;
    --c-btn-text: #4a281c;
    --c-btn-hover: #f3b8a6;
    --c-quote-bg: #fef0ea;
    --c-quote-border: #e07a5f;
    --c-info-bg: #f0f7ff;
    --c-info-border: #3b82f6;
    --c-info-text: #1e3a8a;
    --c-warn-bg: #fef9c3;
    --c-warn-border: #ca8a04;
    --c-warn-text: #713f12;
    --c-success-bg: #f0fdf4;
    --c-success-border: #16a34a;
    --c-success-text: #14532d;
}

/* LIGHT THEME 13: Sahara Sand (Desert sun clarity) */
html.theme-sahara,
.swatch-dot.theme-sahara {
    --c-bg: #fcf6eb;
    --c-text: #3d2f1f;
    --c-text-muted: #756049;
    --c-primary: #b47834;
    --c-secondary: #c99355;
    --c-accent: #0f766e;
    --c-panel: #f5e9d3;
    --c-panel-header: #ebd9bd;
    --c-border: #d6bf9c;
    --c-shadow: rgba(61, 47, 31, 0.09);
    --c-link: #945d20;
    --c-link-hover: #693e0f;
    --c-tab-bg: #ebd9bd;
    --c-tab-text: #543f29;
    --c-tab-active-bg: #b47834;
    --c-tab-active-text: #ffffff;
    --c-btn-bg: #e2ccaa;
    --c-btn-text: #3d2f1f;
    --c-btn-hover: #d5bd96;
    --c-quote-bg: #f9f1e1;
    --c-quote-border: #b47834;
    --c-info-bg: #f0f9ff;
    --c-info-border: #0284c7;
    --c-info-text: #0369a1;
    --c-warn-bg: #fef2f2;
    --c-warn-border: #ef4444;
    --c-warn-text: #991b1b;
    --c-success-bg: #f0fdf4;
    --c-success-border: #16a34a;
    --c-success-text: #14532d;
}

/* LIGHT THEME 14: Lavender Mist (Ethereal violet serenity) */
html.theme-lavendermist,
.swatch-dot.theme-lavendermist {
    --c-bg: #faf7ff;
    --c-text: #2e1d44;
    --c-text-muted: #6b5585;
    --c-primary: #8b5cf6;
    --c-secondary: #a78bfa;
    --c-accent: #d97706;
    --c-panel: #f1e9fe;
    --c-panel-header: #e6d7fd;
    --c-border: #cdb4fb;
    --c-shadow: rgba(46, 29, 68, 0.08);
    --c-link: #6d28d9;
    --c-link-hover: #4c1d95;
    --c-tab-bg: #e6d7fd;
    --c-tab-text: #483168;
    --c-tab-active-bg: #7c3aed;
    --c-tab-active-text: #ffffff;
    --c-btn-bg: #ddc7fc;
    --c-btn-text: #2e1d44;
    --c-btn-hover: #ceb0f9;
    --c-quote-bg: #f6efff;
    --c-quote-border: #8b5cf6;
    --c-info-bg: #eff6ff;
    --c-info-border: #3b82f6;
    --c-info-text: #1e3a8a;
    --c-warn-bg: #fffbeb;
    --c-warn-border: #f59e0b;
    --c-warn-text: #78350f;
    --c-success-bg: #f0fdf4;
    --c-success-border: #16a34a;
    --c-success-text: #14532d;
}

/* --------------------------------------------------------------------------
   2. Base & Unified REM Font Scaling
   CRITICAL REQUIREMENT: NO PX font sizes on text anywhere!
   html font-size is the single source of scaling truth.
   The site chrome (hero, sticky bar, splash) counter-scales with
   calc(1rem / var(--font-scale)) so it stays a constant size while the
   reading text grows; everything inside it is sized in em.
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: calc(var(--font-base) * var(--font-scale));
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: var(--c-text);
    background-color: var(--c-bg);
    line-height: 1.7;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--font-base) * 4.5);
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: inherit;
    color: inherit;
    font-size: 1rem;
    overflow-x: clip;
}

img {
    max-width: 100%;
}

:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 3px;
    border-radius: 4px;
}

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

/* The hidden attribute always wins, even over a class that sets display (install button, dialogs) */
[hidden] {
    display: none !important;
}

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 100000;
    padding: 0.6rem 1rem;
    background: var(--c-primary);
    color: #000000;
    font-weight: 700;
    border-radius: var(--radius-sm);
    transform: translateY(-200%);
    transition: transform 0.2s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

/* Headings: Gabriela ships in a single (regular) weight, so never ask for bold. */
h1, h2, h3, h4, h5, h6,
.chapter-title,
.section-heading {
    font-family: 'Gabriela', Georgia, 'Times New Roman', serif;
    font-weight: 400;
    color: var(--c-text);
    margin-top: 1.6rem;
    margin-bottom: 0.8rem;
    line-height: 1.2;
    letter-spacing: -0.005em;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.85rem; }
h3 { font-size: 1.45rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

/* Paragraphs: fully justified, with automatic hyphenation (html lang="en") so lines stay even.
   Titles, ledes and other centred bits set their own text-align below. */
p,
li {
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;   /* hyphenate from 6-letter words: fewer wide gaps on narrow screens */
}

p {
    font-size: 1.125rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
    line-height: 1.85;
    overflow-wrap: break-word;
}

/* Links */
a {
    color: var(--c-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

a:hover, a:focus {
    color: var(--c-link-hover);
    text-decoration-thickness: 2px;
}

/* Bible References: dotted underline, soft highlight on hover */
a.bible-ref {
    color: var(--c-link);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px dotted var(--c-primary);
    padding: 0 0.15rem;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

a.bible-ref:hover, a.bible-ref:focus {
    color: var(--c-link-hover);
    background-color: var(--c-glow);
    border-bottom-style: solid;
}

/* Blockquotes & Pull Quotes */
blockquote, .quote-card {
    margin: 2rem 0;
    padding: 0.4rem 0 0.4rem 1.5rem;
    border-left: 3px solid var(--c-quote-border);
    font-style: italic;
}

blockquote p, .quote-card p {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: var(--c-text);
}

blockquote p:last-child, .quote-card p:last-child {
    margin-bottom: 0;
}

/* Lists */
ul, ol, .styled-list {
    margin: 1.2rem 0 1.6rem;
    padding-left: 1.6rem;
    font-size: 1.125rem;
}

li {
    margin-bottom: 0.65rem;
    line-height: 1.75;
}

/* --------------------------------------------------------------------------
   3. Hero Banner
   The artwork itself carries "First Peter 3:15" and the verse summary
   (built by scripts/make_title_image.py), so this is image only.
   -------------------------------------------------------------------------- */
.site-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 1;
    min-height: 130px;
    /* 300px on normal screens; grows a little on ultra-wide monitors so the lettering is never cropped */
    max-height: min(380px, max(300px, 15vw));
    overflow: hidden;
    background-color: #06101f;
    font-size: calc(1rem / var(--font-scale));
}

.site-hero .banner-link {
    display: block;
    height: 100%;
}

.site-hero-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 58%;
}

/* --------------------------------------------------------------------------
   4. Sticky Bar: the four parts + reading tools, in one row
   -------------------------------------------------------------------------- */
.site-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--c-panel);
    background-color: var(--bar-bg);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid var(--c-border);
    box-shadow: 0 6px 22px -10px var(--c-shadow);
    font-size: calc(1rem / var(--font-scale));
}

.site-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75em;
    max-width: 72em;
    margin: 0 auto;
    padding: 0.5em 1em;
    position: relative;
}

.progress-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    pointer-events: none;
}

.progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--c-primary), var(--c-secondary));
    transition: width 0.15s ease-out;
}

/* Tabs */
.tabs-navigation {
    display: flex;
    align-items: center;
    gap: 0.2em;
    min-width: 0;
    /* Safety net for very narrow phones: the tabs scroll sideways instead of pushing the tools off screen */
    overflow-x: auto;
    scrollbar-width: none;
}

.tabs-navigation::-webkit-scrollbar {
    display: none;
}

.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    padding: 0.45em 0.95em 0.45em 0.5em;
    background-color: transparent;
    color: var(--c-tab-text);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: 0.9em;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.tab-btn:hover {
    background-color: var(--c-btn-hover);
    color: var(--c-text);
}

.tab-btn.active {
    background-color: var(--c-tab-active-bg);
    color: var(--c-tab-active-text);
}

.tab-num {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.75em;
    height: 1.75em;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}

.tab-btn.active .tab-num {
    background-color: var(--c-tab-active-text);
    color: var(--c-tab-active-bg);
    border-color: transparent;
    opacity: 1;
}

.tab-label-short {
    display: none;
}

/* The fifth tab ("More") carries a heart in the accent colour so it reads as different from the four parts */
.tab-btn-more:not(.active) .tab-num {
    color: var(--c-accent);
}

.tab-btn-more .tab-num svg {
    display: block;
}

/* Tools */
.toolbar {
    display: flex;
    align-items: center;
    gap: 0.15em;
    flex: 0 0 auto;
    padding-left: 0.75em;
    border-left: 1px solid var(--c-border);
}

.tool-btn {
    display: inline-grid;
    place-items: center;
    width: 2.5em;
    height: 2.5em;
    padding: 0;
    background-color: transparent;
    color: var(--c-text-muted);
    border: 1px solid transparent;
    border-radius: 50%;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.tool-btn:hover,
.tool-btn[aria-expanded="true"] {
    background-color: var(--c-btn-hover);
    color: var(--c-text);
    text-decoration: none;
}

.tool-btn:active {
    transform: scale(0.94);
}

.size-glyph {
    display: inline-flex;
    align-items: baseline;
    font-family: 'Gabriela', Georgia, serif;
    line-height: 1;
}

.size-glyph span:first-child { font-size: 0.85em; }
.size-glyph span:last-child  { font-size: 1.3em; }

/* Theme picker */
.tool-menu {
    position: static;
}

.theme-menu {
    position: absolute;
    top: calc(100% + 0.35em);
    right: 1em;
    z-index: 200;
    max-width: calc(100vw - 1.5em);
    padding: 1em 1em 0.4em;
    background-color: var(--c-panel);
    border: 1px solid var(--c-border);
    border-radius: 1em;
    box-shadow: 0 22px 60px var(--c-shadow);
}

.theme-menu-label {
    margin: 0 0 0.5em 0.2em;
    text-align: left;
    font-size: 0.72em;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}

.theme-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25em;
    margin-bottom: 0.9em;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.45em 0.55em;
    background-color: transparent;
    color: var(--c-text);
    border: 1px solid transparent;
    border-radius: 0.7em;
    font-family: inherit;
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.theme-option:hover {
    background-color: var(--c-btn-hover);
}

.theme-option[aria-pressed="true"] {
    background-color: var(--c-btn-bg);
    border-color: var(--c-primary);
}

.theme-menu {
    width: 23em;
}

/* Each swatch carries its own theme class, so it previews that theme's colours */
.swatch-dot {
    flex: 0 0 auto;
    width: 1.6em;
    height: 1.6em;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-bg) 50%, var(--c-primary) 50%);
    border: 1px solid var(--c-border);
    box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.25);
}

/* --------------------------------------------------------------------------
   5. Reading Column
   -------------------------------------------------------------------------- */
.page-wrapper {
    width: 100%;
    max-width: calc(var(--measure) + 3rem);
    margin: 0 auto;
    padding: 0 1.5rem 5rem;
}

.main-content-area:focus {
    outline: none;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
    animation: fadeInTab 0.4s ease both;
}

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

/* Chapter header: eyebrow, title, one line of lead, ornament. No box. */
.chapter-head {
    position: relative;
    isolation: isolate;
    padding: 3.5rem 0 0.5rem;
    text-align: center;
}

/* A soft wash of the theme colour behind the title; it fades out before any edge. */
.chapter-head::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse 50% 100% at 50% 0%, var(--c-glow), transparent);
    pointer-events: none;
}

.chapter-eyebrow {
    margin: 0 0 0.9rem;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-align: center;
    color: var(--c-primary);
}

.chapter-title {
    margin: 0 0 1.1rem;
    font-size: clamp(2.1rem, 6vw, 3rem);
    line-height: 1.12;
    text-wrap: balance;
}

.chapter-lead {
    max-width: 32rem;
    margin: 0 auto;
    font-size: 1.2rem;
    line-height: 1.55;
    text-align: center;
    color: var(--c-text-muted);
    text-wrap: balance;
}

.chapter-rule {
    position: relative;
    display: block;
    width: 7rem;
    height: 1px;
    margin: 2.25rem auto 0;
    background: linear-gradient(90deg, transparent, var(--c-primary), transparent);
}

.chapter-rule::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.45rem;
    height: 0.45rem;
    background-color: var(--c-primary);
    transform: translate(-50%, -50%) rotate(45deg);
}

/* The text itself sits straight on the page */
.section-prose-content {
    padding-top: 2.75rem;
}

.tab-pane-content > :first-child {
    margin-top: 0;
}

/* Sub-headings inside the text */
.section-heading {
    margin: 3.25rem 0 1.1rem;
    font-size: 1.75rem;
    line-height: 1.22;
    text-align: left;
    text-wrap: balance;
}

.section-heading::before {
    content: '';
    display: block;
    width: 2.75rem;
    height: 3px;
    margin-bottom: 1rem;
    background-color: var(--c-primary);
    border-radius: 2px;
}

.tab-pane-content > .section-heading:first-child {
    margin-top: 0;
}

/* The first heading follows the centred rule under the description; no second, left-aligned line */
.tab-pane-content > .section-heading:first-child::before {
    display: none;
}

/* --------------------------------------------------------------------------
   6. Callout Boxes
   Blue for facts, amber for warnings, green for the closing word
   -------------------------------------------------------------------------- */
.callout-box {
    --cb: var(--c-border);
    margin: 2.25rem 0;
    padding: 1.2rem 1.5rem;
    border: 1px solid var(--cb);
    border: 1px solid color-mix(in srgb, var(--cb) 38%, transparent);
    border-left: 4px solid var(--cb);
    border-radius: 0.25rem var(--radius-md) var(--radius-md) 0.25rem;
}

.callout-box p {
    margin: 0;
    font-size: 1.075rem;
    line-height: 1.75;
}

.callout-info {
    --cb: var(--c-info-border);
    background-color: var(--c-info-bg);
    color: var(--c-info-text);
}

.callout-warning {
    --cb: var(--c-warn-border);
    background-color: var(--c-warn-bg);
    color: var(--c-warn-text);
}

.callout-summary {
    --cb: var(--c-success-border);
    background-color: var(--c-success-bg);
    color: var(--c-success-text);
}

/* --------------------------------------------------------------------------
   7. End of Part: completion note + Previous / Next pager
   -------------------------------------------------------------------------- */
.completion-banner {
    margin: 3.5rem 0 0;
    padding: 2.25rem 1.5rem;
    text-align: center;
    background: radial-gradient(ellipse 80% 120% at 50% 0%, var(--c-glow), transparent 80%), var(--c-panel);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
}

.completion-mark {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--c-primary);
}

.completion-banner h3 {
    margin: 0 0 0.6rem;
    font-size: 1.6rem;
}

.completion-banner p {
    max-width: 30rem;
    margin: 0 auto;
    text-align: center;
    font-size: 1.1rem;
    color: var(--c-text-muted);
}

.chapter-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 3.5rem 0 0;
    padding-top: 2.25rem;
    border-top: 1px solid var(--c-border);
}

.completion-banner + .chapter-pager {
    margin-top: 1.25rem;
    padding-top: 0;
    border-top: 0;
}

.part-explore + .chapter-pager {
    margin-top: 2rem;
}

.pager-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1.1rem 1.35rem;
    background-color: var(--c-panel);
    color: var(--c-text);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.pager-card:hover,
.pager-card:focus {
    color: var(--c-text);
    text-decoration: none;
    border-color: var(--c-primary);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -8px var(--c-shadow);
}

.pager-prev { grid-column: 1; }
.pager-next { grid-column: 2; text-align: right; }

.pager-dir {
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-primary);
}

.pager-title {
    font-family: 'Gabriela', Georgia, serif;
    font-size: 1.3rem;
    line-height: 1.25;
}

/* --------------------------------------------------------------------------
   7b. PDF handout link (top corner of each part's header)
   -------------------------------------------------------------------------- */
.pdf-link {
    position: absolute;
    top: 1rem;
    right: 0;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem 0.45rem 0.75rem;
    background-color: var(--c-panel);
    color: var(--c-primary);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.pdf-link:hover,
.pdf-link:focus-visible {
    background-color: var(--c-primary);
    color: var(--c-bg);
    border-color: var(--c-primary);
    text-decoration: none;
    transform: translateY(-1px);
}

.pdf-link svg {
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   7c. Video cards (introduction on Part 1, donation video on the More tab)
   -------------------------------------------------------------------------- */
.video-card {
    margin: 2.5rem 0 0;
}

.video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #000000;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 22px 54px -22px var(--c-shadow), 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.video-frame-portrait {
    aspect-ratio: 4 / 5;
}

.video-frame video {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000000;
    object-fit: contain;
}

.video-card figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.3rem 0.85rem;
    margin-top: 1rem;
    text-align: center;
}

.video-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-primary);
}

.video-title {
    font-family: 'Gabriela', Georgia, serif;
    font-size: 1.2rem;
    line-height: 1.3;
}

.video-length {
    padding: 0.1rem 0.65rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--c-text-muted);
}

.video-install {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0.2rem 0;
    padding: 0.55rem 1.15rem;
    background-color: var(--c-tab-active-bg);
    color: var(--c-tab-active-text);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.video-install:hover,
.video-install:focus-visible {
    color: var(--c-tab-active-text);
    filter: brightness(1.12);
    transform: translateY(-1px);
}

.video-card + .section-prose-content {
    padding-top: 2.5rem;
}

/* --------------------------------------------------------------------------
   7d. "More" tab: give, take it with you, about, contact
   -------------------------------------------------------------------------- */
.more-content {
    padding-top: 2.75rem;
}

.more-article > :first-child {
    margin-top: 0;
}

.more-heading {
    margin: 3.5rem 0 1.4rem;
    font-size: 1.6rem;
    text-align: center;
    text-wrap: balance;
}

/* Give: the warm, inviting centre of the page */
.give-card {
    --gold: #ffda79;
    --gold-deep: #f2a93b;
    position: relative;
    /* Video beside the words when there is room; the words drop below it when there isn't
       (sized in rem, so this still works at the biggest text size) */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 1.75rem;
    background:
        radial-gradient(ellipse 70% 90% at 100% 0%, rgba(255, 218, 121, 0.16), transparent 70%),
        radial-gradient(ellipse 60% 80% at 0% 100%, var(--c-glow), transparent 70%),
        var(--c-panel);
    border: 1px solid rgba(255, 218, 121, 0.45);
    border: 1px solid color-mix(in srgb, var(--gold-deep) 55%, var(--c-border));
    border-radius: var(--radius-lg);
    box-shadow: 0 26px 60px -28px var(--c-shadow), 0 0 44px -14px rgba(255, 190, 80, 0.3);
}

.give-card-solo {
    display: block;
    text-align: center;
}

.give-media {
    flex: 0 1 15rem;
    width: 15rem;
    max-width: 100%;
}

.give-media .video-frame {
    border-radius: var(--radius-md);
    border-color: rgba(255, 218, 121, 0.35);
}

.give-copy {
    flex: 1 1 20rem;
    min-width: 0;
    text-align: center;
}

.give-copy p {
    text-align: center;
}

.give-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold-deep);
}

.give-kicker svg {
    animation: heartbeat 2.6s ease-in-out infinite;
}

.give-title {
    margin: 0 0 1rem;
    font-size: clamp(1.7rem, 4.6vw, 2.2rem);
    line-height: 1.15;
    text-wrap: balance;
}

.give-copy > p:not(.give-kicker):not(.give-note) {
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
    line-height: 1.7;
}

.give-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.95rem 2.3rem;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
    color: #2a1800;
    border-radius: var(--radius-pill);
    max-width: 100%;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 12px 28px -8px rgba(242, 169, 59, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.give-button:hover,
.give-button:focus-visible {
    color: #2a1800;
    text-decoration: none;
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -8px rgba(242, 169, 59, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.give-button:active {
    transform: translateY(0) scale(0.98);
}

.give-button svg {
    width: 1.15em;
    height: 1.15em;
}

.give-note {
    max-width: 24rem;
    margin: 1rem auto 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--c-text-muted);
}

@keyframes heartbeat {
    0%, 60%, 100% { transform: scale(1); }
    70%           { transform: scale(1.22); }
    80%           { transform: scale(1); }
    90%           { transform: scale(1.14); }
}

/* Take it with you */
.more-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.more-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.6rem 1.4rem 1.5rem;
    background-color: var(--c-panel);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.more-card-wide {
    grid-column: 1 / -1;
}

.more-card-icon {
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    margin-bottom: 0.9rem;
    background-color: var(--c-glow);
    color: var(--c-primary);
    border-radius: 50%;
}

.more-card h4 {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
}

.more-card p {
    margin-bottom: 1.2rem;
    font-size: 1rem;
    line-height: 1.6;
    text-align: center;
    color: var(--c-text-muted);
}

.more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: 0.7rem 1.5rem;
    background-color: var(--c-tab-active-bg);
    color: var(--c-tab-active-text);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.more-button:hover,
.more-button:focus-visible {
    color: var(--c-tab-active-text);
    text-decoration: none;
    filter: brightness(1.12);
    transform: translateY(-1px);
}

.more-button-quiet {
    background-color: transparent;
    color: var(--c-text);
    border-color: var(--c-border);
}

.more-button-quiet:hover,
.more-button-quiet:focus-visible {
    color: var(--c-text);
    background-color: var(--c-btn-hover);
    filter: none;
}

.more-button-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: auto;
}

.more-button-row .more-button {
    margin-top: 0;
}

.pdf-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pdf-list li {
    margin: 0;
    text-align: left;
}

.pdf-list a {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    height: 100%;
    padding: 0.8rem 1rem;
    background-color: var(--c-bg);
    color: var(--c-text);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.pdf-list a:hover,
.pdf-list a:focus-visible {
    color: var(--c-text);
    text-decoration: none;
    border-color: var(--c-primary);
    transform: translateY(-1px);
}

.pdf-list-num {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-primary);
}

/* About, contact, links */
.contact-card {
    padding: 1.7rem 1.4rem;
    background-color: var(--c-panel);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.contact-card p {
    text-align: center;
}

.contact-card > p:first-child {
    max-width: 28rem;
    margin: 0 auto 1.2rem;
}

.contact-address {
    margin: 0.9rem 0 0 !important;
    font-size: 0.95rem !important;
    color: var(--c-text-muted);
}

.contact-social {
    margin-top: 1.2rem;
}

.resource-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.resource-links li {
    margin: 0;
}

.resource-links a {
    display: inline-block;
    padding: 0.55rem 1.15rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.resource-links a:hover,
.resource-links a:focus-visible {
    text-decoration: none;
    border-color: var(--c-primary);
    background-color: var(--c-btn-hover);
}

.small-print {
    margin: 3.25rem 0 0;
    font-size: 0.85rem;
    line-height: 1.6;
    text-align: center;
    color: var(--c-text-muted);
}

/* --------------------------------------------------------------------------
   7e. Dialogs: QR code and app install. Dark glass card over a blurred
   overlay, always dark so the white QR tile and gold address pop in any theme.
   -------------------------------------------------------------------------- */
html.dialog-open {
    overflow: hidden;
}

.overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.overlay.visible {
    opacity: 1;
}

.dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1001;
    width: min(23em, calc(100vw - 1.5em));
    max-height: calc(100vh - 1.5em);
    max-height: calc(100dvh - 1.5em);
    overflow-y: auto;
    padding: 2.25em 1.75em 1.75em;
    background-color: rgba(0, 0, 0, 0.9);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    text-align: center;
    font-size: calc(1rem / var(--font-scale));
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.95);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.dialog.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.dialog p,
.dialog li {
    margin: 0;
    font-size: 1em;
    line-height: 1.45;
    text-align: center;
    hyphens: manual;
    -webkit-hyphens: manual;
    color: inherit;
}

.dialog-close {
    position: absolute;
    top: 0.65em;
    right: 0.65em;
    display: grid;
    place-items: center;
    width: 2.4em;
    height: 2.4em;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 0;
    border-radius: 50%;
    font-family: inherit;
    font-size: 1.3em;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.dialog-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.dialog-icon {
    display: block;
    width: 4.5em;
    height: 4.5em;
    margin: 0 auto 0.8em;
    border-radius: 1.1em;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.dialog .dialog-title {
    margin: 0 0 0.25em;
    font-size: 1.55em;
    line-height: 1.2;
    color: #ffffff;
}

.dialog .dialog-sub {
    margin-bottom: 1.1em;
    font-size: 0.95em;
    color: rgba(255, 255, 255, 0.7);
}

.qr-big {
    display: grid;
    place-items: center;
    width: min(17.5em, 100%);
    aspect-ratio: 1;
    margin: 0 auto 1.1em;
    overflow: hidden;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
    color: #111111;
    font-size: 0.9em;
}

.qr-big svg {
    display: block;
    width: 100%;
    height: 100%;
}

.dialog .qr-link {
    display: inline-block;
    max-width: 100%;
    padding: 0.5em 1.1em;
    background-color: rgba(255, 218, 121, 0.12);
    color: #ffda79;
    border: 1px solid rgba(255, 218, 121, 0.45);
    border-radius: 999px;
    font-size: 0.95em;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.qr-scheme {
    font-weight: 400;
    opacity: 0.65;
}

.dialog-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6em;
    margin-top: 1.3em;
}

.dialog-btn {
    padding: 0.7em 1.5em;
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.95em;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.dialog-btn:hover {
    background-color: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.5);
}

.install-dialog .dialog-btn {
    background-color: #ffda79;
    color: #2a1800;
    border-color: transparent;
}

.install-dialog .dialog-btn:hover {
    background-color: #ffe39b;
}

.dialog:focus-visible,
.dialog button:focus-visible {
    outline-color: #ffda79;
}

.install-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
    text-align: left;
}

.dialog .install-steps li {
    position: relative;
    margin: 0 0 0.9em;
    padding-left: 2.7em;
    min-height: 2em;
    text-align: left;
    counter-increment: step;
}

.install-steps li::before {
    content: counter(step);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 2em;
    height: 2em;
    background-color: #ffda79;
    color: #2a1800;
    border-radius: 50%;
    font-size: 0.95em;
    font-weight: 800;
}

/* --------------------------------------------------------------------------
   8. Splash Screen
   -------------------------------------------------------------------------- */
.splash-screen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #070d19;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.6s ease, visibility 0.6s ease;
    font-size: calc(1rem / var(--font-scale));
}

.splash-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

html.seen-splash .splash-screen {
    display: none;
}

.splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25em;
    max-width: 92vw;
    max-height: 90vh;
}

.splash-img {
    display: block;
    max-width: 100%;
    max-height: 75vh;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 60px rgba(56, 189, 248, 0.18), 0 12px 40px rgba(0, 0, 0, 0.85);
}

.splash-prompt {
    padding: 0.5em 1.3em;
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-radius: var(--radius-pill);
    font-size: 0.85em;
    letter-spacing: 0.1em;
    backdrop-filter: blur(8px);
}

/* --------------------------------------------------------------------------
   9. Toast Notification (Theme & Font Changes)
   -------------------------------------------------------------------------- */
#app-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    z-index: 10001;
    transform: translateX(-50%) translateY(20px);
    padding: 0.8rem 1.6rem;
    background-color: var(--c-panel-header);
    color: var(--c-text);
    border: 1px solid var(--c-primary);
    border-radius: var(--radius-pill);
    box-shadow: 0 8px 24px var(--c-shadow);
    font-size: 0.95rem;
    font-weight: 700;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s ease;
}

#app-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
    .tab-label-full  { display: none; }
    .tab-label-short { display: inline; }
}

/* Five tabs: below this width only the open tab keeps its (short) name; the others shrink to their number */
@media (max-width: 760px) {
    .tab-btn:not(.active) {
        padding-right: 0.5em;
    }

    .tab-btn:not(.active) .tab-label {
        display: none;
    }
}

@media (max-width: 620px) {
    .site-bar-inner {
        padding: 0.4em 0.6em;
        gap: 0.4em;
    }

    .toolbar {
        padding-left: 0.3em;
    }

    .theme-menu {
        right: 0.6em;
    }

    .tool-btn {
        width: 2.3em;
        height: 2.3em;
    }

    .page-wrapper {
        padding: 0 1.15rem 4rem;
    }

    .chapter-head {
        padding: 2.5rem 0 0.25rem;
    }

    .section-prose-content {
        padding-top: 2.25rem;
    }

    p, ul, ol, .styled-list {
        font-size: 1.075rem;
    }

    .callout-box {
        padding: 1rem 1.15rem;
    }

    .chapter-pager {
        grid-template-columns: 1fr;
    }

    .pager-prev,
    .pager-next {
        grid-column: auto;
        text-align: left;
    }

    .pdf-link {
        top: 0.6rem;
        padding: 0.4rem 0.75rem 0.4rem 0.65rem;
    }

    .pdf-link-long {
        display: none;
    }

    .video-card {
        margin-top: 2rem;
    }

    .give-card {
        gap: 1.4rem;
        padding: 1.25rem;
    }

    .give-media {
        flex-basis: 17rem;
        width: min(100%, 17rem);
    }

    .give-button {
        width: 100%;
        padding: 1rem 1.5rem;
    }

    .more-heading {
        margin-top: 2.75rem;
    }

    .more-grid,
    .pdf-list {
        grid-template-columns: 1fr;
    }

    .more-card {
        padding: 1.35rem 1.15rem 1.3rem;
    }
}

@media (max-width: 480px) {
    #btn-print-page {
        display: none;
    }

    .tab-btn.active .tab-label {
        display: none;
    }

    .tab-btn,
    .tab-btn:not(.active) {
        padding: 0.4em;
    }
}

@media (max-width: 380px) {
    .site-bar-inner {
        padding-left: 0.4em;
        padding-right: 0.4em;
        gap: 0.25em;
    }

    .tab-btn,
    .tab-btn:not(.active) {
        padding: 0.3em;
    }

    .tool-btn {
        width: 2.1em;
        height: 2.1em;
    }

    .toolbar {
        padding-left: 0.2em;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------------------------
   11. Print: only the part being read, as plain text on paper
   -------------------------------------------------------------------------- */
@media print {
    .splash-screen,
    .skip-link,
    .site-hero,
    .site-bar,
    .chapter-pager,
    .part-explore,
    .completion-banner,
    .pdf-link,
    .video-card,
    .give-media,
    .give-button,
    .more-button,
    .more-card-wide,
    .overlay,
    .dialog,
    #app-toast {
        display: none !important;
    }

    .give-card,
    .more-card,
    .contact-card {
        background: none !important;
        box-shadow: none !important;
        border-color: #666666 !important;
        break-inside: avoid;
    }

    .give-card {
        display: block;
    }

    .tab-pane:not(.active) {
        display: none !important;
    }

    html, body {
        background: #ffffff !important;
        color: #000000 !important;
    }

    .page-wrapper {
        max-width: none;
        padding: 0;
    }

    .chapter-head {
        background: none;
        padding-top: 0;
    }

    .chapter-title,
    .chapter-eyebrow,
    .chapter-lead,
    .section-heading,
    p, li {
        color: #000000 !important;
    }

    .callout-box {
        background: none !important;
        color: #000000 !important;
        border-color: #666666 !important;
        break-inside: avoid;
    }

    a, a.bible-ref {
        color: #000000 !important;
        border-bottom: 0;
    }
}