:root{color-scheme:dark;--night:#080d17;--gold:#edc68d;--white:#fff9ec;--muted:#e2d9ca;--header:70px;--safe-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto;scroll-padding-top:0;overflow-x:clip}
body{margin:0;background:var(--night);color:var(--white);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:clip;-webkit-font-smoothing:antialiased}
button,a,summary{touch-action:manipulation}button{font:inherit;cursor:pointer}a{color:inherit}img{display:block;max-width:100%}[hidden]{display:none!important}
:focus-visible{outline:3px solid #f4d395;outline-offset:4px}
.skip{position:fixed;z-index:300;left:18px;top:-180px;padding:12px;background:#f7dfaf;color:#101721}.skip:focus{top:12px}
.global-progress{height:3px;position:fixed;inset:0 0 auto;z-index:220;pointer-events:none;background:linear-gradient(90deg,#b77e41,#ffdd9a);transform:scaleX(0);transform-origin:left}
.topbar{height:var(--header);position:fixed;inset:0 0 auto;z-index:200;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));background:linear-gradient(180deg,rgba(3,7,15,.94),rgba(3,7,15,.6) 74%,transparent)}
.brand{display:flex;gap:10px;align-items:center;color:var(--white);background:none;border:0;padding:10px 0;font-weight:750;letter-spacing:.15em;font-size:11px;white-space:nowrap}.brand-mark{font-size:25px;color:var(--gold);line-height:1}.brand em{font-style:normal;color:var(--gold)}
.top-actions{display:flex;align-items:center;gap:12px}.top-actions button{border:0;color:#fff7e8;background:transparent;font-size:12px;padding:10px 8px;white-space:nowrap}.top-actions .nav-trigger{padding:11px 15px;border:1px solid #eac48855;background:#080d17ad;border-radius:28px}.top-actions .nav-trigger span{color:var(--gold)}
.menu-panel{position:fixed;z-index:230;top:calc(var(--header) - 3px);right:14px;width:min(470px,calc(100vw - 28px));max-height:calc(100dvh - var(--header) - 16px);overflow-y:auto;background:#0d1523f7;border:1px solid #e9c68a50;border-radius:14px;box-shadow:0 18px 80px #000b;padding:18px;color:#fff9ed}
.menu-head{display:flex;justify-content:space-between;align-items:center;letter-spacing:.13em;color:var(--gold);font-size:12px;margin:0 0 16px}.menu-head button{background:none;color:#fff9ed;border:0;font-size:27px;padding:0 6px}.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.menu-grid button{display:flex;gap:10px;align-items:center;min-width:0;background:#ffffff09;color:#fff9ed;border:1px solid #ffffff0c;text-align:left;border-radius:6px;padding:12px 10px;font-size:12px;line-height:1.35}.menu-grid button small{color:var(--gold);font-size:12px}.menu-grid button.active{background:#e8c48820;border-color:#e8c48866}.menu-panel>a{display:block;margin-top:18px;font-size:13px;color:var(--gold)}
.story{position:relative;isolation:isolate;background:#080d17;scroll-margin-top:0}
.film-track{position:relative;height:calc(100svh + var(--travel,45svh))}
.film-stage{height:100svh;min-height:480px;position:sticky;top:0;isolation:isolate;overflow:hidden;background:#080d17;contain:paint}
.film-media{position:absolute;inset:0;overflow:hidden;background:#060a11}
.film-image{position:absolute;inset:0;opacity:0;pointer-events:none;will-change:auto}
.film-image:first-child{opacity:1}.film-image picture,.film-image img{position:absolute;inset:0;width:100%;height:100%}.film-image img{object-fit:cover;object-position:var(--focus-d,50% 50%);transform:scale(var(--zoom,1.045)) translate3d(0,var(--drift,0px),0);backface-visibility:hidden}
.film-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(5,9,17,.93) 0%,rgba(5,9,17,.82) 18%,rgba(5,9,17,.38) 44%,rgba(5,9,17,0) 78%),linear-gradient(0deg,rgba(4,8,13,.43),transparent 36%,rgba(5,9,16,.13) 90%)}
.film-light{position:absolute;z-index:3;inset:0;opacity:0;pointer-events:none;background:radial-gradient(ellipse at 55% 49%,#ffedb967,transparent 70%)}
.film-copy{position:absolute;z-index:5;left:clamp(35px,6vw,105px);bottom:clamp(70px,14svh,150px);max-width:min(620px,46vw);color:#fff9ed;text-shadow:0 2px 18px #000b}
.film-kicker{font-size:12px;letter-spacing:.19em;text-transform:uppercase;color:#f4d49e;font-weight:750;display:block;margin-bottom:14px}
.film-title{font:400 clamp(43px,5.6vw,91px)/1.04 Georgia,"Times New Roman",serif;letter-spacing:-.045em;margin:0 0 18px;text-wrap:balance;overflow-wrap:break-word}
.film-tagline{font:400 clamp(19px,2vw,29px)/1.33 Georgia,serif;color:#f4d9b1;margin:0 0 15px;text-wrap:pretty}
.film-refs{font:600 12px/1.7 system-ui,sans-serif;color:#e7d8be;max-width:52ch;margin:0;overflow-wrap:anywhere}
.start-button{display:inline-flex;gap:18px;align-items:center;background:linear-gradient(140deg,#ffe5af,#d9aa68);color:#111b29;font-weight:750;font-size:13px;border:0;border-radius:30px;padding:13px 19px;margin-top:23px;text-shadow:none}
.film-count{position:absolute;bottom:22px;right:clamp(20px,3vw,50px);z-index:5;color:#eed8b5;font-size:11px;letter-spacing:.18em}.film-count span{color:#ffffff94}
.film-sequence{position:absolute;z-index:5;top:calc(var(--header) + 14px);right:clamp(20px,3vw,50px);font:700 10px/1 system-ui,sans-serif;letter-spacing:.14em;color:#eed8b5}
.film-indicator{position:absolute;z-index:6;inset:auto 0 0;height:3px;background:#ffffff25}.film-indicator span{display:block;width:100%;height:100%;background:var(--gold);transform:scaleX(var(--scene-progress,0));transform-origin:left}
.chapter-reading{background:linear-gradient(180deg,#080d17,#111b2a);border-bottom:1px solid #ebcc8e24;position:relative;z-index:8}
.reading-inner{width:min(820px,calc(100% - 52px));margin:auto;padding:clamp(50px,7vw,84px) 0 clamp(55px,7vw,88px)}
.reading-label{font-size:11px;font-weight:800;letter-spacing:.19em;color:var(--gold);margin:0 0 18px}
.reading-summary{font:400 clamp(22px,2.35vw,33px)/1.54 Georgia,serif;color:#fcf2e3;margin:0 0 30px;text-wrap:pretty}
.bible-details{border-top:1px solid #e6c28b44}.bible-details summary{padding:21px 0;list-style:none;display:flex;gap:10px;justify-content:space-between;align-items:center;color:var(--gold);font-weight:750;font-size:14px;cursor:pointer}.bible-details summary::-webkit-details-marker{display:none}.bible-details summary span{font-size:20px}.bible-details[open] summary span{transform:rotate(45deg)}.detail-body{font-size:16px;line-height:1.8;color:#e6dac9}.detail-body p{max-width:740px}.detail-body .references{color:#f0cc94;font-size:13px;font-weight:700}.detail-note{color:#c1b4a1;font-size:12px!important}
.story-footer{text-align:center;padding:120px 22px 90px;background:radial-gradient(ellipse at 50% 0,#253c43,#0d1521 58%,#060b13)}.story-footer .star{font-size:38px;color:var(--gold)}.story-footer h2{font:400 clamp(46px,7vw,96px)/1.05 Georgia,serif;margin:12px 0 20px}.story-footer>p{max-width:700px;margin:0 auto 30px;line-height:1.8;color:#e4d8c8}.footer-buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}.footer-buttons button,.footer-buttons a{border-radius:24px;border:1px solid #ecc78a60;padding:13px 18px;color:#efc991;background:transparent;text-decoration:none}.guide{max-width:690px;margin:55px auto 30px;padding:27px;border:1px solid #ecc78a39;border-radius:13px;text-align:left}.guide h3{font:400 27px Georgia,serif;color:var(--gold);margin:0 0 10px}.guide p{font-size:14px;line-height:1.7;color:#ded3c3}.story-footer small{color:#b5aa98;line-height:1.6;display:block}
body.reading-mode .film-track{height:auto!important}body.reading-mode .film-stage{height:410px;min-height:0;position:relative}body.reading-mode .film-image:not(:first-child){opacity:0!important}body.reading-mode .film-image:first-child{opacity:1!important}body.reading-mode .film-copy{bottom:30px}body.reading-mode .film-title{font-size:clamp(36px,4vw,56px)}body.reading-mode .film-tagline{font-size:18px}body.reading-mode .film-light,body.reading-mode .film-sequence,body.reading-mode .film-indicator{display:none}
@media(max-width:767px){
 :root{--header:66px}
 html{scroll-padding-top:0}
 .topbar{padding-left:calc(12px + env(safe-area-inset-left,0px));padding-right:calc(12px + env(safe-area-inset-right,0px));gap:4px}
 .brand{gap:6px;letter-spacing:.08em;font-size:10px}.brand-mark{font-size:20px}.top-actions{gap:1px}.top-actions button{font-size:11px;padding:11px 6px}.top-actions .nav-trigger{padding:10px 11px}.menu-panel{top:64px;right:8px;width:calc(100vw - 16px);max-height:calc(100dvh - 74px)}
 .film-stage{min-height:0;height:100svh}
 .film-image img{object-position:var(--focus-m,50% 46%)}
 /* The upper part of each portrait remains photographic; a strong lower wash guarantees contrast without touching faces. */
 .film-shade{background:linear-gradient(180deg,rgba(3,7,14,.35) 0%,rgba(3,7,14,.10) 18%,transparent 37%,rgba(3,7,14,.26) 52%,rgba(4,8,15,.90) 69%,#070d17 95%)}
 .film-copy{left:calc(22px + env(safe-area-inset-left,0px));right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(25px + env(safe-area-inset-bottom,0px));max-width:none;width:auto;text-shadow:0 2px 16px #000e}
 .film-kicker{font-size:10px;line-height:1.4;letter-spacing:.14em;margin-bottom:9px}
 .film-title{font-size:clamp(32px,9vw,47px);line-height:1.02;letter-spacing:-.045em;margin-bottom:11px;max-width:15ch;text-wrap:balance}
 .film-tagline{font-size:clamp(16px,4.3vw,21px);line-height:1.29;margin-bottom:9px;max-width:30ch}
 .film-refs{font-size:11px;line-height:1.5;max-width:95%;color:#f2e2c8}
 .start-button{margin-top:14px;padding:11px 14px;font-size:12px}
 .film-count{display:none}.film-sequence{right:20px;top:calc(var(--header) + 5px);font-size:9px;color:#f8dfa9c9}
 .reading-inner{width:calc(100% - 42px);padding:42px 0 52px}.reading-summary{font-size:clamp(21px,5.4vw,27px);line-height:1.48}.detail-body{font-size:15px;line-height:1.7}
 .story-footer{padding:75px 20px 58px}.story-footer h2{font-size:clamp(44px,12vw,70px)}.story-footer>p{font-size:14px}.guide{padding:19px}
 body.reading-mode .film-stage{height:340px}body.reading-mode .film-copy{bottom:20px}body.reading-mode .film-title{font-size:28px}body.reading-mode .film-tagline{font-size:14px}body.reading-mode .film-refs{font-size:10px}
}
@media(max-width:390px) and (max-height:740px){.film-title{font-size:clamp(29px,8.1vw,35px)}.film-tagline{font-size:15px}.film-copy{bottom:19px}.film-kicker{font-size:9px;margin-bottom:7px}.film-refs{font-size:10px;line-height:1.35}.start-button{margin-top:10px}}
@media(orientation:landscape) and (max-height:580px){.film-title{font-size:clamp(30px,6.6vh,58px)}.film-tagline{font-size:15px}.film-copy{bottom:18px}.film-kicker{margin-bottom:6px}.film-refs{font-size:10px}.start-button{margin-top:8px}.film-stage{min-height:0}.film-shade{background:linear-gradient(90deg,#080d17e8,#080d17bc 35%,transparent 80%)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.film-track{height:100svh!important}.film-image:not(:first-child){opacity:0!important}.film-image:first-child{opacity:1!important}.film-image img{transform:none!important}.film-light{display:none!important}*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}