/* Interactive layout: codex on the left, the view on the right, the scripture plate beneath it. (Film capture stays full-frame.) */
#stage.gallery { background: radial-gradient(ellipse at 70% 40%, #17110b 0%, #0a0806 60%, #050403 100%); }
#stage.gallery #ui > :is(.wordmark, .scroll, .caption, .hold, .sensory, .nav), #stage.gallery .titlecard { display: none; }   /* the full-frame overlays are not used here */
.viewport { position: absolute; left: 568px; top: 44px; width: 1312px; height: 738px; background: #000;
  box-shadow: 0 0 0 1px rgba(240,201,138,.28), 0 0 0 6px rgba(10,8,6,.9), 0 0 0 7px rgba(240,201,138,.14), 0 30px 80px rgba(0,0,0,.8); }
.viewport canvas { width: 100% !important; height: 100% !important; }
.viewport .loading { position: absolute; left: 0; right: 0; bottom: 40%; text-align: center; font: 600 18px var(--display); letter-spacing: .5em; color: var(--sand); }

/* the codex: an illuminated table of contents */
.codex { position: absolute; left: 0; top: 0; bottom: 0; width: 520px; display: flex; flex-direction: column; pointer-events: auto;
  background: linear-gradient(90deg, #120d08 0%, #16100a 80%, #1a130c 100%); border-right: 1px solid rgba(240,201,138,.25); color: var(--sand); }
.codex::after { content: ''; position: absolute; top: 0; bottom: 0; right: 10px; width: 1px; background: rgba(240,201,138,.12); }
.codex header { padding: 42px 48px 22px; border-bottom: 1px solid rgba(240,201,138,.18); }
.codex header .ao { font: 500 18px var(--display); letter-spacing: .3em; color: var(--amber); }
.codex header .nm { font: 600 38px var(--display); letter-spacing: .12em; color: var(--ivory); margin: 4px 0 2px; }
.codex header .sb { font: italic 500 20px var(--italic); color: var(--dim); }
.codex .contents { list-style: none; margin: 0; padding: 14px 0 60px; overflow-y: auto; flex: 1; scrollbar-width: none;
  mask-image: linear-gradient(180deg, transparent 0, #000 24px, #000 calc(100% - 60px), transparent 100%); }
.codex .contents::-webkit-scrollbar { display: none; }
.codex .sec { font: 600 15px var(--display); letter-spacing: .34em; color: var(--amber); padding: 22px 48px 8px; text-transform: uppercase; }
.codex .sec .rn { display: inline-block; min-width: 46px; font: italic 600 20px var(--italic); letter-spacing: 0; color: rgba(240,201,138,.7); }
.codex .entry { display: grid; grid-template-columns: 46px 1fr auto; align-items: baseline; gap: 0 10px; padding: 7px 40px 7px 48px; cursor: pointer; position: relative;
  transition: background .3s, color .3s; color: rgba(233,220,195,.7); }
.codex .entry .n { font: 500 15px var(--display); color: rgba(168,153,126,.8); }
.codex .entry .t { font: 500 23px/1.15 var(--display); }
.codex .entry .r { font: 500 12px var(--sans); letter-spacing: .1em; color: rgba(168,153,126,.75); white-space: nowrap; }
.codex .entry:hover { color: var(--ivory); background: rgba(240,201,138,.05); }
.codex .entry.on { color: var(--ivory); background: linear-gradient(90deg, rgba(240,201,138,.16), rgba(240,201,138,0)); }
.codex .entry.on::before { content: ''; position: absolute; left: 22px; top: 8px; bottom: 8px; width: 3px; background: var(--amber); box-shadow: 0 0 12px var(--amber); }
.codex .entry.on .t::first-letter { font: 600 34px var(--display); color: var(--amber); }
.codex .entry.going .n::after { content: ' ·'; color: var(--amber); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.codex footer { display: flex; gap: 10px; padding: 16px 40px 10px 48px; border-top: 1px solid rgba(240,201,138,.18); }
.codex button { font: 600 15px var(--display); letter-spacing: .2em; color: var(--sand); background: rgba(10,8,6,.6); border: 1px solid rgba(240,201,138,.35);
  border-radius: 22px; padding: 10px 16px; cursor: pointer; }
.codex button.wide { flex: 1; text-transform: uppercase; }
.codex button:hover { border-color: var(--amber); color: #fff; }
.codex button.snd.off, .codex button.voice.off { opacity: .45; }
.codex button.snd.off { text-decoration: line-through; }
.codex .keys { padding: 0 48px 18px; font: 500 12px var(--sans); letter-spacing: .12em; color: rgba(168,153,126,.6); }

/* the plate under the view: the key verse first, the details beneath */
.plate { position: absolute; left: 568px; top: 804px; width: 1312px; height: 262px; color: var(--sand); transition: opacity .4s; pointer-events: auto; }
.plate .kv { cursor: pointer; min-height: 138px; }
.plate .kv.in { animation: verse .9s ease-out; }
@keyframes verse { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.plate .q { font: italic 500 31px/1.3 var(--italic); color: var(--ivory); margin: 0; max-width: 1240px; }
.plate .ref { font: 600 14px var(--display); letter-spacing: .4em; color: var(--amber); margin-top: 10px; }
.plate .dots { display: flex; gap: 10px; margin: 8px 0 14px; }
.plate .dots i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(240,201,138,.6); cursor: pointer; }
.plate .dots i.on { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.plate .details { display: flex; align-items: baseline; gap: 22px; border-top: 1px solid rgba(240,201,138,.18); padding-top: 14px; }
.plate .k { font: 600 12px var(--display); letter-spacing: .38em; color: var(--dim); }
.plate h2 { font: 600 26px/1 var(--display); color: var(--parchment); margin: 0; }
.plate h2::first-letter { color: var(--amber); }
.plate .sense { display: flex; gap: 18px; }
.plate .sense em { font: 600 11px var(--display); font-style: normal; letter-spacing: .34em; color: rgba(159,231,238,.75); }
.plate .sense em::before { content: '•'; margin-right: 8px; color: var(--mist); }
.plate .st { margin-left: auto; font: 600 12px var(--display); letter-spacing: .4em; color: var(--amber); }
.plate .prog { position: absolute; left: 0; right: 0; top: -18px; height: 2px; background: rgba(240,201,138,.12); }
.plate .prog i { display: block; height: 100%; width: 0; background: var(--amber); box-shadow: 0 0 8px var(--amber); }

/* loading screen (shown by index.html before any script runs) */
#loader { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #0a0806; color: var(--sand); text-align: center; padding: 24px; transition: opacity .8s; }
#loader.done { opacity: 0; pointer-events: none; }
#loader .ao { font: 500 18px var(--display); letter-spacing: .3em; color: var(--amber); }
#loader .nm { font: 600 clamp(28px, 6vw, 52px) var(--display); letter-spacing: .14em; color: var(--ivory); }
#loader p { font: italic 500 clamp(18px, 3vw, 26px) var(--italic); color: var(--parchment); margin: 24px 0 0; max-width: min(700px, 88vw); }
#loader .ref { font: 600 12px var(--display); letter-spacing: .4em; color: var(--amber); }
#loader .bar { width: min(420px, 70vw); height: 2px; background: rgba(240,201,138,.15); margin-top: 30px; }
#loader .bar i { display: block; height: 100%; width: 4%; background: var(--amber); box-shadow: 0 0 8px var(--amber); transition: width .6s; }
#loader .st { font: 600 11px var(--display); letter-spacing: .36em; color: var(--dim); text-transform: uppercase; }

/* keyboard focus is always visible */
.codex .entry:focus-visible, .codex button:focus-visible, .plate .dots i:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* portrait / phone layout: a 1080 × 1920 stage — view, verse, then the codex */
#stage.gallery.portrait { --stage-w: 1080px; --stage-h: 1920px; }
.portrait .viewport { left: 0; top: 0; width: 1080px; height: 608px; box-shadow: none; }
.portrait .plate { left: 48px; top: 640px; width: 984px; height: 420px; }
.portrait .plate .q { font-size: 40px; }
.portrait .plate .details { flex-wrap: wrap; }
.portrait .plate .sense { display: none; }
.portrait .plate h2 { font-size: 34px; }
.portrait .codex { top: 1090px; width: 1080px; border-right: 0; border-top: 1px solid rgba(240,201,138,.25); }
.portrait .codex header { display: none; }
.portrait .codex .entry .t { font-size: 34px; }
.portrait .codex .entry { padding: 14px 48px; }
.portrait .codex .sec { font-size: 20px; }
.portrait .codex button { font-size: 22px; padding: 18px 22px; }
.portrait .codex .keys { display: none; }

/* controls inside the view */
.viewport .vbtn, .viewport .vafter button { font: 600 16px var(--display); letter-spacing: .28em; text-transform: uppercase; color: var(--ivory); background: rgba(10,8,6,.62);
  border: 1px solid rgba(240,201,138,.55); border-radius: 28px; padding: 14px 26px; cursor: pointer; pointer-events: auto; backdrop-filter: blur(4px); }
.viewport .vbtn:hover, .viewport .vafter button:hover { background: rgba(240,201,138,.2); border-color: var(--amber); }
.viewport .enter { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 26px rgba(240,201,138,.45); } }
.viewport .vafter { position: absolute; left: 0; right: 0; bottom: 15%; display: flex; justify-content: center; gap: 16px; animation: verse .8s ease-out; }
.viewport [hidden] { display: none !important; }
.viewport canvas { cursor: pointer; }
.portrait .viewport .vbtn, .portrait .viewport .vafter button { font-size: 26px; padding: 20px 30px; }