:root {--bg-color: #111111;--text-color: #eeeeee;--accent-color: #0055aa;--font-size: 1rem;--high-contrast-bg: #000000;--high-contrast-text: #ffffff;}body {margin: 0;font-family: Arial, sans-serif;background-color: var(--bg-color);color: var(--text-color);font-size: var(--font-size);line-height: 1.6;}body.high-contrast {--bg-color: var(--high-contrast-bg);--text-color: var(--high-contrast-text);}.skip-link {position: absolute;top: -40px;left: 0;background: #000000;color: #ffffff;padding: 0.5rem 1rem;z-index: 100;text-decoration: none;}.skip-link:focus {top: 0;outline: 2px solid var(--accent-color);}.accessibility-tools {display: flex;gap: 0.5rem;align-items: center;}#fontSize {padding: 0.3rem;font-size: var(--font-size);background-color: #555555;color: #ffffff;border: none;}#contrastToggle {width: 35px;height: 35px;font-size: 1.2rem;padding: 0;background-color: transparent;border: 1px solid var(--text-color);color: var(--text-color);cursor: pointer;display: inline-flex;align-items: center;justify-content: center;}.site-header {position: sticky;top: 0;background-color: #000000;color: #ffffff;z-index: 1000;border-bottom: 1px solid #333;}.header-container {display: flex;align-items: center;justify-content: space-between;padding: 1rem;}.menu-toggle {font-size: 2rem;background: none;border: none;color: #ffffff;cursor: pointer;outline: none;}.menu-toggle:focus {outline: 2px solid var(--accent-color);}.logo-wrapper {flex-grow: 1;text-align: left;}.logo {max-height: 50px;}.main-nav {position: absolute;top: 100%;left: 0;transform: translateX(-100%);transition: transform 0.3s ease;width: 150px;background-color: rgba(17, 17, 17, 0.8);padding: 1rem 0;z-index: 1001;}.main-nav.open {transform: translateX(0);}.main-nav {display: block;}.nav-links {list-style: none;margin: 0;padding: 1rem;}.nav-links li {margin-bottom: 1rem;}.nav-links a {color: #ffffff;text-decoration: none;font-size: 1.2rem;}.nav-links a:hover, .r66 { inline-size:80%; inline-size:min(80%, 80ch); margin:0; line-height:1.5; text-wrap:balance; text-shadow:0 1px 2px rgba(0,0,0,.6);}.nav-links a:focus {text-decoration: underline;outline: none;}.nav-links a:focus {outline: 2px solid var(--accent-color);}.container {max-width: 1200px;margin: 0 auto;padding: 0 1rem;}main {margin: 0;padding: 0;}.hero {padding: 0;margin: 0;}.hero .container {padding: 2rem;background-color: #000000;color: #ffffff;background-image: url("https://studioofhope.org/images/1hand-min.webp");background-size: cover;background-repeat: no-repeat;background-position: center;min-height: 70vh;}body.high-contrast .hero {color: var(--high-contrast-text);}.mission-content {display: flex;flex-wrap: wrap;gap: 2rem;}.mission-text, .mission-image {flex: 1 1 45%;}.mission-image img {max-width: 100%;height: auto;border: 2px solid var(--text-color);}.newsletter-form {display: flex;flex-wrap: wrap;gap: 1rem;width: 80%;}.newsletter-form input {flex: 1 1 auto;padding: 0.5rem;font-size: var(--font-size-base);}.contact-grid {display: flex;flex-wrap: wrap;gap: 2rem;}.contact-info, .contact-form-container {flex: 1 1 45%;}.contact-form .form-group {margin-bottom: 1rem;}.contact-form label {display: block;margin-bottom: 0.5rem;}.contact-form input, .contact-form textarea {width: 80%;padding: 0.5rem;font-size: var(--font-size-base);}h1, h2, h3, h4, h5, h6 {}.hero h1, .mission h2, .newsletter h2, .contact h2 {font-size: 2rem;margin-bottom: 1rem;}.cta-button, .cta-button-secondary {background-color: var(--accent-color);color: #fff;border: none;padding: 1rem;font-size: 1rem;cursor: pointer;text-decoration: none;display: inline-block;}.cta-button:hover, .cta-button-secondary:hover {background-color: #003377;}.cta-button:focus, .cta-button-secondary:focus {outline: 2px solid var(--text-color);}.site-footer {background-color: var(--bg-color);color: var(--text-color);padding: 2rem;border-top: 2px solid var(--text-color);}.footer-content {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
.controls {margin: 1em 0;font-weight: bold;}#nowPlaying {font-weight: bold;margin: 1em 0;font-size: 1.2em;border: 1px solid #fff;padding: 0.5em;background: #667;}audio {width: 100%;margin-bottom: 1em;}details {margin: 0.5em 0;border: 1px solid #ccc;border-radius: 4px;padding: 0.5em;}summary {font-weight: bold;cursor: pointer;}ul {list-style: none;padding-left: 1em;}button.chapter-btn {display: block;width: 100%;text-align: left;padding: 0.4em;margin: 0.2em 0;font-size: 1em;background: #666666; border: none; border-radius: 4px; cursor: pointer; button.chapter-btn:hover,button.chapter-btn:focus {background: #666666;outline: 2px solid #fff;}.footer-content nav img {max-width: 200px;}@media (min-width: 769px) {.mission-content, .contact-grid, .footer-content {flex-direction: row;align-items: flex-start;}.newsletter-form, .contact-form input, .contact-form textarea {width: auto;}.cta-button, .cta-button-secondary, #contrastToggle {width: auto;font-size: 1rem;}.side-nav {display: none;}main {margin-left: 0; pad0ding-top: 0;}} .form-section {adding: 1rem; border-bottom: 1px solid #ccc;}label {display: block; margin-top: 0.5rem;}input, textarea { width: 100%; padding: 0.5rem; margin-top: 0.25rem; font-size: 1rem;} button {margin-top: 1rem; padding: 0.5rem 1rem; .honeypot { display: none;}
.settings-section {
    margin-top: 20px;
    border-top: 1px solid #ccc;
    padding-top: 15px;
}

.scroll-speed-controls,
.font-size-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
}
.bible-text {
    font-size: calc(1rem * var(--reader-font-size, 1.0));
}
.scroll-speed-controls button,
.font-size-controls button,
#darkModeToggleMenu {
    padding: 6px 10px;
    font-size: 1em;
}
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #111111;
color: #eeeeee
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid #ddd;
}

.menu-button {
    font-size: 1.4em;
    background: none;
    border: none;
    cursor: pointer;
    margin-right: 10px;
}

.logo {
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none;
    color: #dddddd;
}

#globalAudioPlayer {
    width: 260px;
}.acrostic {
    color: #520;
    display: block;
    font-size: 1em;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    text-decoration: none;
    margin: 1em 0
    }
.bsbheading {
    background-color: #eee;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    color: #001320;
    display: block;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.2em;
    margin-bottom: 10px;
    padding-left: 8px;
    text-align: left
    }
.calibre {
    display: block;
    font-size: 1em;
    line-height: 1.2em;
    padding-left: 0;
    padding-right: 0;
    margin: 0 5pt
    }
.calibre1 {
    display: block;
    text-align: left
    }
.calibre2 {
    display: block
    }
.calibre3 {
    display: block;
    margin: 1em 0
    }
.calibre4 {
    font-weight: bold
    }
.calibre5 {
    display: block;
    text-align: center;
    margin: 1em 0
    }
.calibre6 {
    font-style: italic
    }
.calibre7 {
    color: #001320;
    display: block;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.2em;
    margin-bottom: 8px;
    padding-bottom: 8px;
    padding-top: 13px;
    text-align: center
    }
.calibre8 {
    display: block;
    text-align: center
    }
.calibre9 {
    display: block;
    font-size: 1em;
    padding-left: 0;
    padding-right: 0;
    margin: 0 5pt
    }
.calibre10 {
    display: block;
    text-align: center;
    margin: 0;
    padding: 0
    }
.cross {
    color: #0092f2;
    display: block;
    font-style: italic;
    font-weight: 400;
    line-height: 1.2em;
    padding-top: 1px;
    text-decoration: none;
    margin: 0 0 1em
    }
.cross1 {
    color: #0092f2;
    font-style: italic;
    font-weight: 400;
    line-height: 1.2em;
    margin-top: 0;
    padding-top: 1px;
    text-decoration: none
    }
.fn {
    color: #0092f2;
    font-size: 0.58333em;
    font-style: italic;
    line-height: 14px;
    margin-left: 1px;
    vertical-align: text-top
    }
.fnv {
    font-size: 0.58333em;
    line-height: 15px;
    vertical-align: text-top
    }
.fnverse {
    color: #b34700;
    font-size: 0.58333em;
    line-height: 1.2em
    }
.footnotesbot {
    color: #0092f2;
    font-size: 0.58333em;
    line-height: 1.2em
    }
.hdg {
    display: block;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2em;
    padding-bottom: 0;
    text-decoration: none;
    margin: 1em 0 0
    }
.indent {
    display: block;
    line-height: 1.2em;
    text-indent: 0;
    margin: 0 10px 0 35px
    }
.indent1 {
    display: block;
    line-height: 1.2em;
    text-indent: 0;
    margin: 0 10px
    }
.indent1stline {
    display: block;
    line-height: 1.2em;
    text-indent: 0;
    margin: 1em 10px 0
    }
.indent1stlinered {
    color: #700;
    display: block;
    line-height: 1.2em;
    text-indent: 0;
    margin: 1em 10px 0
    }
.indentred {
    color: #700;
    display: block;
    line-height: 1.2em;
    text-indent: 0;
    margin: 0 10px 0 35px
    }
.indentred1 {
    color: #700;
    display: block;
    line-height: 1.2em;
    text-indent: 0;
    margin: 0 10px
    }
.inscrip {
    display: block;
    line-height: 1.2em;
    text-align: center;
    text-transform: uppercase;
    margin: 1em 0
    }
.inscrip1 {
    display: block;
    line-height: 1.2em;
    text-align: center;
    text-transform: uppercase
    }
.list {
    display: block;
    line-height: 1.2em;
    text-indent: 0;
    margin: 12px 10px 12px 35px
    }
.list1stline {
    display: block;
    line-height: 1.2em;
    text-indent: 0;
    margin: 12px 10px
    }
.pshdg {
    display: block;
    font-style: italic;
    line-height: 1.2em;
    text-align: center;
    margin: 1em 0
    }
.reftext {
    color: #d33700;
    font-size: 0.58333em;
    font-weight: 700;
    line-height: 14px;
    margin-left: 1px;
    margin-right: 1px;
    vertical-align: text-top
    }
.reg {
    display: block;
    line-height: 1.2em
    }
.reg1 {
    display: block;
    line-height: 1.2em;
    margin: 1em 0
    }
.selah {
    display: block;
    font-style: italic;
    line-height: 1.2em;
    padding-bottom: 0;
    padding-top: 0;
    text-align: right;
    margin: 0 10px 0 0
    }
.subhdg {
    display: block;
    font-style: italic;
    line-height: 1.2em;
    margin: 1em 0
    }
.tab1stline {
    display: block;
    line-height: 1.2em;
    margin: 1em 10px
    }
.tab1stlinered {
    color: #700;
    display: block;
    line-height: 1.2em;
    margin: 1em 10px
    }
.thinq {
    font-size: 0.41667em;
    line-height: 1.2em
    }
.vheading {
    background-color: #eee;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    color: #001320;
    display: block;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.2em;
    padding-left: 8px;
    text-align: left;
    margin: 1em 0 10px
    }
.pcalibre:link {
    color: #0092f2;
    line-height: 1.2em;
    text-decoration: none
    }
.pcalibre1:visited {
    color: #0092f2;
    line-height: 1.2em;
    text-decoration: none
    }
.pcalibre3:hover {
    color: #99D6FF;
    line-height: 1.2em;
    text-decoration: none
    }
.pcalibre2:active {
    color: #0092f2;
    line-height: 1.2em;
    text-decoration: none
    }