/* One scene per view. Motion is triggered by navigation, never by scrolling. */
:root{color-scheme:dark;--paper:#f4ead3;--gold:#ba9e66;--ink:#171b17;--rule:#ffffff20}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--ink);color:var(--paper);font-family:Arial,sans-serif}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
button{font:inherit;cursor:pointer;color:var(--paper)}
.skip{position:fixed;top:-100px;left:20px;z-index:100;background:var(--paper);color:var(--ink);padding:12px}.skip:focus{top:12px}
.masthead{position:relative;z-index:20;display:flex;align-items:center;gap:22px;padding:16px 4vw;border-bottom:1px solid var(--rule);background:var(--ink);flex:none}
.wordmark{font:800 24px 'Arial Narrow',Impact,sans-serif;letter-spacing:1px;white-space:nowrap}
.header-actions{display:flex;align-items:center;gap:20px;margin-left:auto}.edition{display:none}
.reading-progress,.progress,.chapter-nav,.next-beat,.scene-meta,.phase-anchor,.cover-number,.silent-beat{display:none}
.eyebrow{font-size:10px;letter-spacing:2px;color:var(--gold);font-weight:bold}
.cover{position:relative;min-height:400px;overflow:hidden;display:flex;align-items:center;width:100%}
.cover-art,.cover-shade{position:absolute;inset:0;pointer-events:none}.cover-art svg{display:block;width:100%;height:100%}
.cover-shade{background:linear-gradient(90deg,#101510e8,#10151055),linear-gradient(0deg,var(--ink),transparent 45%)}
.cover-content{position:relative;margin:35px 8vw}.cover h1{font:400 clamp(64px,9vw,130px)/.92 Georgia,serif;letter-spacing:-4px;margin:28px 0}.cover h1 em{font-weight:400}
.begin{display:inline-flex;align-items:center;gap:20px;font-size:14px;padding:14px 0;border-top:1px solid var(--rule)}.begin span{font-size:22px}
.chapter{--scene-ratio:1.5;position:relative}
.stage{display:flex;align-items:center;justify-content:center;padding:18px 4vw}
.scene-frame{flex:none;position:relative;width:min(1100px,100%,calc((100svh - 205px)*var(--scene-ratio)));aspect-ratio:var(--scene-ratio);overflow:hidden;border:1px solid #bc9e6538;box-shadow:0 18px 60px #0004;background:#22271f;isolation:isolate}
.scene-art,.illustration{display:block;width:100%;height:100%;overflow:hidden;transform:translateX(var(--art-x,0px));transform-origin:center}
.scene-shade{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 30px #0002}
.dialogue{position:absolute;left:var(--bubble-left,3%);top:var(--bubble-top,3%);width:var(--bubble-width,43%);z-index:3;margin:0;padding:52px 20px 20px;color:#211e17;filter:drop-shadow(0 4px 7px #0004);opacity:0;transition:opacity 450ms ease}
.dialogue::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--bubble-image) center/100% 100% no-repeat;transform:var(--bubble-flip,none)}
.speaker{display:block;font:700 12px/1.25 Arial,sans-serif;letter-spacing:.5px;text-transform:uppercase;margin-bottom:8px;color:#695c43}
blockquote{margin:0;font:400 clamp(17px,1.5vw,20px)/1.35 Georgia,serif}
.closed-caption{position:absolute;left:50%;bottom:3%;transform:translateX(-50%);z-index:4;margin:0;padding:7px 12px;max-width:90%;width:max-content;color:white;background:#080808;font:400 clamp(16px,1.5vw,19px)/1.4 Arial,sans-serif;text-align:center;opacity:0;transition:opacity 450ms ease}
footer{border-top:1px solid var(--rule);padding:40px 8vw;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:20px}
.end-actions{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;font-size:14px;color:#c6baa2}.end-actions a{border-bottom:1px solid var(--rule);padding-bottom:6px}
/* JavaScript selects a single view; ordinary page links remain available without it. */
html.deck-ready body{display:flex;flex-direction:column;height:100svh;min-height:440px}
html.deck-ready main{position:relative;flex:1;min-height:0;overflow:auto;display:flex}
html.deck-ready .story{display:contents}
html.deck-ready .cover,html.deck-ready .chapter,html.deck-ready footer{display:none}
html.deck-ready .deck-active{display:flex;width:100%;min-height:0;flex:1}
html.deck-ready .chapter .stage{width:100%;min-height:0;flex:1}
html.deck-ready .cover{min-height:0}
html.deck-ready footer{border:0}
.deck-controls{flex:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px max(4vw,16px);border-top:1px solid var(--rule);background:var(--ink)}
.deck-controls button{min-height:48px;min-width:125px;padding:12px 20px;border:1px solid #ba9e6655;border-radius:3px;background:#111611;font-size:15px;letter-spacing:0}
.deck-controls button:hover:enabled{border-color:var(--gold)}.deck-controls button:disabled{opacity:.3;cursor:default}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:700px){
 .masthead{padding:12px 16px;flex-wrap:wrap;gap:10px 18px}.wordmark{font-size:20px}.header-actions{width:100%;margin:0}
 .stage{padding:12px}.scene-frame{width:100%;aspect-ratio:auto;padding-top:var(--lettering-height,0px)}
 .scene-art,.illustration{height:auto;aspect-ratio:var(--scene-ratio)}
 .dialogue{left:12px;top:10px;width:calc(100% - 24px);padding:16px 18px 40px;--bubble-flip:none!important}
 .chapter:has(.closed-caption) .dialogue::before{transform:scaleX(-1)}
 .speaker{font-size:12px;letter-spacing:.3px;margin-bottom:7px}blockquote{font-size:18px;line-height:1.4}
 .closed-caption{font-size:16px;bottom:10px;padding:6px 10px;max-width:94%}
 .cover-content{margin:24px 7vw}.cover h1{font-size:clamp(50px,16vw,90px);letter-spacing:-3px}.eyebrow{font-size:10px;letter-spacing:1.5px}
 .deck-controls{padding:10px 12px;gap:12px}.deck-controls button{min-width:120px;min-height:48px}
 footer{padding:24px 18px}.end-actions{gap:20px}
}
/* Overflow on very short screens stays readable; it never controls the timeline. */
@media(max-width:700px) and (max-height:650px){html.deck-ready .stage{align-items:flex-start}.cover h1{font-size:52px;margin:18px 0}}
@media print{.masthead,.deck-controls,.cover,.end-actions{display:none!important}html.deck-ready body{display:block;height:auto}html.deck-ready main{display:block;overflow:visible}html.deck-ready .chapter{display:block!important;break-inside:avoid}.dialogue,.closed-caption{opacity:1!important}.stage{padding:20px}.scene-frame{width:100%;max-width:700px}body{background:white;color:black}}