@font-face{font-family:Display;src:url('assets/display.ttf') format('truetype');font-weight:900;font-display:swap}@font-face{font-family:Body;src:url('assets/body.ttf') format('truetype');font-weight:400 700;font-display:swap}
:root{--ink:#130f11;--paper:#f7eedc;--red:#e93438;--gold:#f1c55e;--body:Body,Arial,sans-serif;--display:Display,Impact,'Arial Narrow',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:104px}body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);font-size:15px}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:6px}.skip{position:fixed;top:-80px;left:20px;z-index:99;background:var(--paper);color:var(--ink);padding:15px}.skip:focus{top:15px}.masthead{height:82px;position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:0 4%;background:linear-gradient(#130f11ed,#130f11a8);border-bottom:1px solid #ffffff22;backdrop-filter:blur(12px)}.brand{display:flex;gap:10px;align-items:center;font:900 30px var(--display);letter-spacing:-1px}.brand img{width:38px;height:38px;object-fit:cover;object-position:50% 42%;border-radius:50%;border:1px solid #f7eedc77}.brand-dot{color:var(--red)}.film-label,.sound,.chapter-nav,.location,.chapter-stamp,.scene-bottom,.dialogue>span,.caption>span,.next-link,.start-button,.reading-progress,.keyboard-hint,.rich-stamp>span,.rich-stamp small,.credit-line{font-size:10px;font-weight:700;letter-spacing:1.7px}.film-label{display:flex;align-items:center;gap:10px;color:#d4c7bc}.red-dot{width:6px;height:6px;border-radius:100%;background:var(--red);box-shadow:0 0 15px var(--red)}.sound{display:flex;align-items:center;gap:12px;background:none;border:0;cursor:pointer;padding:12px 0}.sound-bars{color:var(--gold);letter-spacing:1px}.chapter-nav{position:fixed;z-index:29;left:50%;top:98px;transform:translateX(-50%);display:flex;background:#171316d9;border:1px solid #ffffff33;border-radius:3px;backdrop-filter:blur(16px);padding:6px;white-space:nowrap}.chapter-nav a{padding:12px 21px;font-size:9px;color:#b7aaa4;transition:background .2s,color .2s}.chapter-nav a span{margin-right:8px;opacity:.6}.chapter-nav a.active{background:var(--red);color:#fff}.scene{min-height:920px;height:100svh;position:relative;isolation:isolate;overflow:hidden;border-bottom:3px solid var(--ink)}.scene-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:67% center;z-index:-3;will-change:transform}.scene-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#110c10f5 0%,#170d12da 24%,#170c1270 47%,#170c1208 72%),linear-gradient(0deg,#130f1199,transparent 30%,transparent 75%,#130f1144)}.grain{pointer-events:none;position:absolute;inset:0;opacity:.055;z-index:4;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.scene-copy{width:min(630px,52%);padding:210px 0 110px;margin-left:8%;position:relative;z-index:5}.chapter-stamp{display:flex;gap:18px;align-items:center;margin-bottom:25px;font-size:8px;letter-spacing:1.1px;color:#f1c8b2}.chapter-stamp>span:first-child{background:var(--red);color:#fff;padding:6px 8px;transform:rotate(-3deg)}.location{color:#c4b7af;margin:0 0 24px;font-size:9px;letter-spacing:1.6px;line-height:1.8}.location>span{display:block;color:var(--gold);margin-bottom:5px}h1,h2{font-family:var(--display);font-weight:900;letter-spacing:-2px;line-height:.88;margin:0;font-stretch:condensed;text-transform:uppercase;text-shadow:0 4px 24px #0005}h1{font-size:clamp(80px,8.6vw,142px)}h2{font-size:clamp(66px,7vw,116px)}h1 em,h2 em{font-style:italic;color:var(--red)}.title-period{color:var(--red)}.dek{color:#ded0c5;font-size:16px;line-height:1.7;margin:25px 0 28px}.start-button{display:inline-flex;align-items:center;gap:30px;background:var(--red);border:1px solid #ff6d65;padding:19px 23px;box-shadow:5px 5px 0 #0009;transition:transform .2s;font-size:10px;letter-spacing:1px}.start-button:hover{transform:translate(2px,2px)}.start-button span{font-size:22px;line-height:1}.dialogue{position:absolute;right:7%;bottom:16%;z-index:6;padding:19px 24px;background:var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:6px 7px 0 var(--ink);font:900 23px/1.12 var(--display);transform:rotate(-3deg);max-width:330px}.dialogue::after{content:'';position:absolute;right:32px;top:-17px;width:23px;height:24px;transform:skewY(40deg);background:var(--paper);border-left:3px solid var(--ink);z-index:-1}.dialogue>span{display:block;color:#9b3732;margin-bottom:9px;font-family:var(--body);font-size:8px;letter-spacing:1px}.opening-dialogue{right:8%;bottom:17%}.scene-bottom{position:absolute;bottom:29px;left:4%;right:4%;display:flex;align-items:center;justify-content:space-between;font-size:8px;color:#d4c7bc}.scroll-arrow{font-size:22px;animation:float 2s ease-in-out infinite}.frame-number{position:absolute;right:3%;top:160px;opacity:.16;font:italic 900 130px var(--display);-webkit-text-stroke:1px var(--paper);color:transparent;pointer-events:none}.intertitle{padding:50px 8%;display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--paper);color:var(--ink);border-block:6px solid var(--ink)}.intertitle>span{font-size:9px;max-width:140px;letter-spacing:2px;font-weight:700;line-height:1.6}.intertitle p{font:900 34px/.95 var(--display);margin:0;transform:rotate(-2deg)}.intertitle em{color:#9b3936;font-style:normal}.intertitle>span:last-child{font-size:36px}.crash{background:#3c0c16}.crash .scene-shade{background:linear-gradient(90deg,#21070ff5 0%,#21070fdc 24%,#21070f77 48%,transparent 75%)}.caption{border-left:3px solid var(--red);padding-left:18px;margin-top:30px;max-width:345px}.caption>span{font-size:8px;line-height:1.8;color:var(--gold);display:block}.caption p{font-size:13px;line-height:1.8;color:#e3d5c9;margin:12px 0}.next-link{display:inline-flex;align-items:center;gap:24px;margin-top:25px;font-size:9px;border-bottom:1px solid #ffffff66;padding-bottom:10px}.next-link span{font-size:23px}.comic-sfx{position:absolute;right:17%;top:20%;font:italic 900 80px var(--display);color:var(--gold);transform:rotate(10deg);-webkit-text-stroke:2px #190b0c;text-shadow:5px 5px #190b0c}.ticker{overflow:hidden;background:var(--red);border-block:4px solid var(--ink);padding:16px 0;position:relative;z-index:7}.ticker>div{white-space:nowrap;width:max-content;font:italic 900 36px var(--display);animation:marquee 28s linear infinite;letter-spacing:1px}.ticker span{padding:0 40px;color:var(--gold)}.getaway .scene-shade{background:linear-gradient(90deg,#081c22f7 0%,#081c22db 23%,#081c2280 46%,transparent 75%)}.getaway h2 em{color:#66dad0}.getaway .location>span{color:#66dad0}.getaway .caption{border-color:#66dad0}.paradise .scene-shade{background:linear-gradient(90deg,#292016fa 0%,#292016dc 23%,#29201688 47%,transparent 74%)}.paradise h2 em{color:var(--gold)}.paradise .caption{border-color:var(--gold);margin-top:23px}.paradise .scene-copy{padding-top:185px}.paradise .dialogue{bottom:14%}.rich-stamp{margin-top:25px;display:inline-flex;flex-direction:column;border:1px solid #eccc7b77;padding:14px 20px;transform:rotate(-2deg);background:#271b12a8;box-shadow:4px 4px #0005}.rich-stamp>span{color:#eccc7b;font-size:8px}.rich-stamp strong{font:900 37px var(--display);color:var(--gold);letter-spacing:0;line-height:1.25}.rich-stamp small{font-size:7px;letter-spacing:1px;color:#dfcdb5}.credits{text-align:center;padding:90px 8% 24px;background:#130f11}.end-mark{font:900 100px/.9 var(--display);letter-spacing:-2px}.end-mark em{color:var(--red)}.end-mark>span{display:block;font:700 9px var(--body);letter-spacing:3px;margin:22px 0 32px}.credits>p{max-width:700px;margin:40px auto;color:#a99d96;font-size:10px;line-height:1.9}.credit-line{display:flex;justify-content:space-between;border-top:1px solid #ffffff20;padding-top:22px;font-size:7px;color:#a99d96}.reading-progress{position:fixed;left:25px;top:48%;z-index:20;font-size:8px;color:#bfae9e;display:flex;flex-direction:column;gap:12px;align-items:center}.reading-progress>div{height:140px;width:1px;background:#ffffff40;position:relative}.reading-progress i{position:absolute;top:0;left:0;width:2px;height:0;background:var(--red)}.keyboard-hint{position:fixed;right:26px;bottom:25px;font-size:7px;color:#efe2ca88;z-index:10}.reveal{transition:opacity .7s,transform .7s}.reveal.entering{opacity:.25;transform:translateY(25px)}@keyframes float{50%{transform:translateY(6px)}}@keyframes marquee{to{transform:translateX(-33.333%)}}
@media(min-width:1600px){.scene-copy{margin-left:11%}.scene-art{object-position:center center}}
@media(max-height:900px) and (min-width:901px){.scene{min-height:790px}.scene-copy{padding-top:175px}.chapter-stamp{margin-bottom:18px}h1{font-size:102px}h2{font-size:92px}.paradise .scene-copy{padding-top:175px}.paradise h2{font-size:78px}.dek{margin:18px 0;font-size:14px}.caption{margin-top:20px}.caption p{font-size:12px;line-height:1.6}.rich-stamp{margin-top:14px}.rich-stamp strong{font-size:30px}}
@media(max-width:900px){.film-label{display:none}.scene-copy{margin-left:7%;width:60%}.chapter-nav a{padding:11px 15px}.dialogue{right:5%;font-size:21px;bottom:11%;max-width:270px}.reading-progress{left:14px}.scene-art{object-position:65% center}h1{font-size:105px}h2{font-size:85px}.scene{min-height:930px}.paradise h2{font-size:81px}.comic-sfx{font-size:60px;right:5%;top:24%}}
@media(max-width:600px){html{scroll-padding-top:115px}.masthead{height:66px;padding:0 5%}.brand{font-size:25px}.brand img{width:32px;height:32px}.sound{font-size:8px;letter-spacing:1px;gap:8px}.chapter-nav{top:78px;width:90%;justify-content:space-between;padding:4px}.chapter-nav a{padding:10px 7px;font-size:7px;letter-spacing:.6px}.chapter-nav a span{margin-right:4px}.scene{height:auto;min-height:980px;display:flex;align-items:flex-end}.scene-art{height:59%;object-fit:cover;object-position:70% center}.scene-shade,.crash .scene-shade,.getaway .scene-shade,.paradise .scene-shade{background:linear-gradient(0deg,#130f11 0%,#130f11 37%,#130f11df 47%,#130f1120 69%,#130f1144 100%)}.scene-copy,.paradise .scene-copy{padding:470px 0 80px;margin:0 7%;width:86%}.chapter-stamp{font-size:7px;gap:10px;margin-bottom:20px}.location{font-size:8px;letter-spacing:1.2px;margin-bottom:16px}.location>span{display:inline;margin-right:12px}h1{font-size:94px;letter-spacing:-2px}h2{font-size:74px;letter-spacing:-1.5px}.dek{font-size:14px;margin:20px 0}.start-button{padding:16px 18px;font-size:9px;gap:24px}.dialogue,.opening-dialogue,.paradise .dialogue{bottom:auto;top:320px;right:6%;font-size:18px;padding:13px 17px;max-width:235px;border-width:2px;box-shadow:4px 5px var(--ink)}.dialogue>span{font-size:7px;margin-bottom:6px}.scene-bottom{bottom:20px;left:7%;right:7%;font-size:6px;letter-spacing:1px}.scene-bottom>span:last-child{display:none}.frame-number{top:146px;font-size:80px;right:6%;opacity:.5}.reading-progress,.keyboard-hint{display:none}.intertitle{padding:30px 7%;gap:15px}.intertitle>span:first-child{max-width:75px;font-size:7px;letter-spacing:1px}.intertitle p{font-size:26px}.intertitle>span:last-child{font-size:24px}.caption{margin-top:24px;max-width:100%}.caption p{font-size:13px;line-height:1.75}.caption>span{font-size:7px}.next-link{font-size:8px;margin-top:18px}.crash,.getaway{min-height:1030px}.comic-sfx{top:165px;right:8%;font-size:50px}.ticker{padding:12px 0}.ticker>div{font-size:27px}.paradise{min-height:1130px}.paradise h2{font-size:74px}.paradise .scene-art{height:52%}.paradise .scene-copy{padding-top:475px}.rich-stamp strong{font-size:34px}.credits{padding:70px 7% 22px}.end-mark{font-size:80px}.credits>p{font-size:9px}.credit-line{flex-direction:column;gap:12px;line-height:1.8}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.scene-art{transform:none!important}.reveal.entering{opacity:1;transform:none}}
/* Let long captions determine frame height rather than clipping their last line. */
.scene{height:auto;min-height:max(920px,100svh)}
@media(max-height:900px) and (min-width:901px){.scene{min-height:max(790px,100svh)}}
@media(max-width:600px){.scene{min-height:980px}.crash,.getaway{min-height:1030px}.paradise{min-height:1130px}.scene-art,.paradise .scene-art{top:112px;height:370px;object-position:80% center}}