/* The face close is a distinct authored keyframe, aligned with its wide shot. */
.visual picture{position:absolute;inset:0;display:block;width:100%;height:100%}
.visual .close-shot{opacity:0;pointer-events:none}
.visual img,.visual video{transform-origin:0 0!important;backface-visibility:hidden}
.visual.has-video picture{visibility:hidden}
.stage-shade{opacity:var(--face-light,1)}
.visual.visible img{will-change:transform}
.visual:not(.visible) img{will-change:auto}
.frame-control{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin:0 0 16px;font-size:14px;color:var(--gold)}
.frame-control select{background:#181c18;color:var(--paper);font:inherit;border:1px solid var(--line);padding:10px;min-height:44px}
@media(max-width:900px) and (orientation:portrait){
 body.reduced-motion .motion-button{right:3vw;gap:5px}
 body.reduced-motion .motion-button #motion-label{display:block;font-size:12px;max-width:43px;line-height:1.2;text-align:left}
}
@media print{.visual,.frame-control{display:none}}

/* The loading gate blocks wheel, touch, keys and chapter links until media is ready. */
html{scrollbar-gutter:stable}html.media-loading,html.media-loading body{overflow:hidden;overscroll-behavior:none}
.loading-gate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:auto;padding:28px;background:radial-gradient(ellipse at 50% 30%,#292819 0%,#10120e 44%,#0b0c0b 78%)}
.loading-gate[hidden],.loading-gate [hidden]{display:none!important}.loading-inner{width:min(100%,440px);text-align:center;margin:auto}.loading-cross{display:block;font:38px Georgia,serif;color:var(--gold);margin-bottom:28px}.loading-inner h2{font:400 clamp(30px,5vw,43px)/1.12 Georgia,serif;margin:15px 0 22px;letter-spacing:-.025em}.loading-inner p:not(.eyebrow){font-size:16px;line-height:1.7;color:#c5bead}.loading-inner .eyebrow{font-size:12px}.loading-inner progress{display:block;appearance:none;-webkit-appearance:none;width:100%;height:3px;margin:32px 0 16px;background:#d4b57824;border:0;color:var(--gold)}.loading-inner progress::-webkit-progress-bar{background:#d4b57824}.loading-inner progress::-webkit-progress-value{background:var(--gold)}.loading-inner progress::-moz-progress-bar{background:var(--gold)}#loading-status{font-variant-numeric:tabular-nums;min-height:28px;font-size:14px}.loading-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin-top:25px}.loading-actions button,.loading-actions a{min-height:44px;font-size:14px;display:inline-flex;align-items:center;justify-content:center;line-height:1.4}#loading-retry{border:1px solid #d4b57866;padding:10px 20px}.loading-actions a{color:#aaa696}
/* The gate hands focus to the chapter for assistive technology. Its native
   outline would sweep across the viewport at the chapter boundary. Keep the
   visible focus styles on the interactive links and buttons inside it. */
.chapter:focus{outline:none}
@media print{.loading-gate{display:none!important}html.media-loading,html.media-loading body{overflow:visible}}
/* Desktop uses one persistent decoder; no per-chapter covers or source changes. */
.story-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transform:none;backface-visibility:hidden}
body.video-mode .story-film{opacity:1}
body.video-mode #visuals{display:none!important}
.chapter,.chapter.hero,.chapter.prayer{height:var(--scroll-span,185svh)}
@media(max-width:900px) and (orientation:portrait){.story-film{height:100svh;object-fit:contain;object-position:center top}}
@media print{.story-film{display:none}}