/* 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;border-radius:5px;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}
/* A quiet floating control, with touch-size arrows and scene progress. */
.deck-controls{flex:none;align-self:center;display:flex;align-items:center;justify-content:center;gap:20px;width:max-content;max-width:calc(100% - 24px);padding:6px;margin:8px auto 18px;border:1px solid #ba9e6630;border-radius:999px;background:linear-gradient(180deg,#30372dd9,#171d16ee);box-shadow:0 8px 26px #0003,inset 0 1px 0 #ffffff0b}
.deck-controls button{display:grid;place-items:center;min-height:48px;min-width:48px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--paper);transition:background .18s,transform .18s,color .18s;touch-action:manipulation}
.deck-controls button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.deck-controls button:hover:enabled{background:#ba9e661c;color:#ffe6ac;transform:scale(1.06)}.deck-controls button:active:enabled{transform:scale(.92);background:#ba9e6630}.deck-controls button:disabled{opacity:.2;cursor:default}.deck-controls button:focus-visible{outline-offset:0}
.scene-dots{display:flex;align-items:center;gap:8px;padding:0 4px}.scene-dots i{display:block;width:5px;height:5px;border-radius:50%;background:#ba9e6640;transition:background .3s,transform .3s}.scene-dots i.active{background:var(--gold);transform:scale(1.35);box-shadow:0 0 8px #ba9e6633}
.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{gap:16px;margin:8px auto 14px}.deck-controls button{min-width:48px;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}}

/* The homepage supplies the site header around the current episode. */
html.deck-embedded .masthead{display:none}
html.deck-embedded .scene-frame{width:min(1100px,100%,calc((100svh - 110px)*var(--scene-ratio)))}
html.deck-embedded blockquote{font-size:clamp(15px,1.2vw,18px)}
@media(max-width:700px){html.deck-embedded .scene-frame{width:100%}html.deck-embedded blockquote{font-size:18px}}


/* Integrated art sits in the same military-green setting as the rest of the site. */
:root{color-scheme:dark;--paper:#f3ead6;--ink:#17271f;--gold:#c9b985;--rule:#eee0b52b}
body{color:var(--paper);background:#17271f;background-image:radial-gradient(ellipse at 80% 0,#4b5b393b,transparent 65%),radial-gradient(#ddca9410 .65px,transparent .9px);background-size:auto,6px 6px}
.scene-frame{border:1px solid #ded0a84d;border-radius:4px;box-shadow:0 16px 45px #07110ba0;background:#28392a}.scene-shade{box-shadow:none}
.deck-controls{gap:18px;padding:5px;margin:7px auto 14px;border:1px solid #d3c49b44;background:#112019;box-shadow:0 8px 24px #07110b66,inset 0 1px 0 #ffffff0b}.deck-controls button{color:var(--paper)}.deck-controls button:hover:enabled{background:#8a9b6538;color:#ffe6ac;transform:translateY(-1px)}.deck-controls button:active:enabled{transform:scale(.90);background:#8a9b6555}.scene-dots i{background:#f3ead638}.scene-dots i.active{background:#edc88a;box-shadow:0 0 8px #edc88a35}.deck-controls button:focus-visible{outline-color:#edc88a}
html.deck-embedded body{background:#17271f}html.deck-embedded .stage{padding:8px 5px 10px}html.deck-embedded .scene-frame{width:min(1100px,100%,calc((100svh - 95px)*var(--scene-ratio)))}
@media(max-width:700px){.scene-frame{border-color:#ded0a84d}.stage{padding:12px}html.deck-embedded .scene-frame{width:100%}html.deck-embedded .stage{padding:8px 4px 10px}.deck-controls{margin:7px auto 12px;gap:15px}}
@media(min-width:701px){html.deck-embedded .dialogue{padding-top:32px;padding-left:16px;padding-right:16px}html.deck-embedded blockquote{font-size:clamp(14px,1.1vw,18px)}}