@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{color-scheme:dark;--cyan:#9cffff;--red:#ff543b}*{box-sizing:border-box}html{background:#030709}body{margin:0;height:650vh;color:#e9eee9;font-family:'DM Sans',sans-serif}#stage{position:fixed;inset:0}canvas{display:block;width:100%;height:100%}button,a{-webkit-tap-highlight-color:transparent}button{font:11px 'IBM Plex Mono',monospace;letter-spacing:1px;color:inherit;border:1px solid #ffffff40;background:#071318a6;padding:15px 20px;cursor:pointer;transition:.25s}button:hover{background:#b8ffff;color:#041014;border-color:#b8ffff}button:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}header{position:fixed;z-index:10;left:4%;right:4%;top:30px;display:flex;justify-content:space-between;align-items:center}.brand{font-weight:900;letter-spacing:3px;font-size:19px;color:#fff;text-decoration:none}.brand span{font-weight:400}.brand small{display:block;font:8px 'IBM Plex Mono';letter-spacing:2px;margin-top:8px;color:#9bb0b7}.edition{font:11px 'IBM Plex Mono';letter-spacing:5px}.edition i{color:var(--cyan);font-style:normal;margin:0 15px}#sound{border:0;background:none;font-size:10px}#sound span{color:var(--cyan);margin-left:10px}.leftcode{position:fixed;left:20px;top:44%;writing-mode:vertical-rl;transform:rotate(180deg);font:8px 'IBM Plex Mono';letter-spacing:2px;display:flex;gap:20px;opacity:.5}.overlay{position:fixed;left:8%;top:26%;pointer-events:none;transition:opacity .5s,transform .8s}.eyebrow{font:10px 'IBM Plex Mono';letter-spacing:3px;color:var(--cyan);margin:0 0 22px}h1{font:900 clamp(80px,13vw,200px)/.78 'Barlow Condensed',Impact,sans-serif;letter-spacing:-3px;margin:0 0 25px;text-shadow:0 10px 60px #0008}h1>span:not(.dot){color:transparent;-webkit-text-stroke:1px #d4ffff}h1 .dot{color:var(--red);font-size:.7em}.sub{font:600 clamp(17px,2.1vw,30px)/1.15 'Barlow Condensed';letter-spacing:3px}em{font-style:normal;color:var(--cyan)}.intro-bottom{display:flex;align-items:center;gap:36px;margin-top:35px}.intro-bottom p,.overlay>p:not(.eyebrow):not(.sub){font-size:13px;line-height:1.8;color:#b0c2c5}.intro-bottom button{pointer-events:auto;border-color:#b3edec88}button span{margin-left:24px}h2{font:700 clamp(40px,5.4vw,80px)/.98 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.5px;margin:0 0 25px}.hidden{opacity:0!important;pointer-events:none!important;transform:translateY(15px)}#approach{left:8%;top:35%;max-width:38%}#citytitle{top:29%;text-shadow:0 3px 30px #000}#citytitle h2{font-size:clamp(70px,10vw,140px)}#reading{position:fixed;right:7%;top:27%;width:340px;padding:26px;border-left:1px solid #85efff;background:linear-gradient(90deg,#041017e8,#04101788);transition:opacity .6s,transform .8s}#reading h2{font-size:50px}#reading p:not(.eyebrow){font-size:16px;line-height:1.8}#reading .author{font:9px 'IBM Plex Mono';letter-spacing:2px;color:#a5c2c5}#reading button{margin-top:20px}#end{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#02090b77;transition:.8s}#end h2{font-size:clamp(35px,5vw,70px)}#end>p:not(.eyebrow){font-size:13px;color:#b5c9cc}#end button{margin-top:30px}footer{position:fixed;z-index:10;bottom:23px;left:4%;right:4%;font:9px 'IBM Plex Mono';letter-spacing:1.4px}footer>div:first-child{display:flex;justify-content:space-between;margin-bottom:12px}footer b{font-weight:400}.track{height:1px;background:#ffffff26}.track i{display:block;background:var(--cyan);height:1px;width:0;box-shadow:0 0 10px cyan}.controls{display:flex;justify-content:space-between;align-items:center;padding-top:12px;color:#a5b8bd}.controls button{border:0;background:none;padding:6px;font-size:9px}.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 58% 45%,transparent 30%,#0008 100%)}.grain{position:fixed;z-index:5;inset:0;pointer-events:none;opacity:.045;background: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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.8' filter='url(%23n)'/%3E%3C/svg%3E")}#flash{position:fixed;inset:0;background:#b5ffff;pointer-events:none;opacity:0;mix-blend-mode:screen}dialog{position:fixed;max-width:730px;width:90%;max-height:85vh;overflow:auto;background:#071016;border:1px solid #51818c;padding:50px;color:#dde7e9}dialog::backdrop{background:#000b;backdrop-filter:blur(12px)}dialog h2{font-size:55px}dialog p{font-size:17px;line-height:1.9}dialog img{width:100%;margin:10px 0}dialog small{color:#99b1b7}#close{float:right;font-size:26px;border:0;background:none;padding:0 0 10px 20px}#loading{position:fixed;inset:0;z-index:30;background:#030709;display:flex;align-items:center;justify-content:center;flex-direction:column;font:12px 'IBM Plex Mono';letter-spacing:4px}#loading span{font-size:10px;color:#80999f;letter-spacing:1px;margin-top:20px}@media(max-width:650px){header{top:20px}.edition,.leftcode,.controls>span:last-child{display:none}.brand{font-size:15px}.overlay{left:7%;top:25%}h1{font-size:24vw}.intro-bottom{display:block;margin-top:22px}.intro-bottom button{margin-top:12px}#approach{max-width:85%;top:24%}#reading{width:86%;right:7%;top:27%}#reading h2{font-size:43px}#citytitle{top:25%}#end{padding:25px}dialog{padding:24px}footer{bottom:20px}.sub{font-size:21px}}
/* Full editorial journey: camera travel between stationary reading chapters. */
body{height:auto}#story{position:relative;z-index:6;padding-top:370vh;pointer-events:none}.story-chapter{position:relative;min-height:130vh;padding:15vh 7% 45vh;display:flex;justify-content:flex-end;scroll-margin-top:90px}.story-chapter:nth-child(3n){justify-content:flex-start}.chapter-panel{pointer-events:auto;width:min(660px,58vw);padding:42px 46px;background:linear-gradient(135deg,rgba(3,13,19,.96),rgba(3,13,19,.87));border-top:2px solid #8ee6ef;border-left:1px solid #46707a55;box-shadow:0 25px 100px #0007;backdrop-filter:blur(14px)}.chapter-panel h2{font-size:clamp(35px,4vw,62px);line-height:1.03}.chapter-panel p:not(.eyebrow){font-size:17px;line-height:1.85;color:#ced9dc;margin:0 0 24px}.chapter-panel p strong{color:#fff}.chapter-panel figure{margin:28px -46px 30px}.chapter-panel figure img{width:100%;height:auto;display:block}.chapter-panel figcaption{font:10px/1.6 'IBM Plex Mono';color:#92aeb8;padding:12px 30px}.chapter-panel a{color:#9de9ed}.chapter-panel .next-chapter{margin-top:15px;width:100%;text-align:left}.story-finale{pointer-events:auto;min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:15vh 8%;background:linear-gradient(transparent,#020709dd)}.story-finale h2{font-size:clamp(48px,6vw,88px)}.story-finale>a{color:#a8f1ef;font:11px 'IBM Plex Mono';margin:25px}.story-finale small{font:9px/1.7 'IBM Plex Mono';color:#97a8b1;max-width:600px;margin-top:50px}#chapter-nav{position:fixed;z-index:15;right:4%;top:105px}#index-toggle{font-size:9px;padding:10px 13px;background:#061117dd}#chapter-list{max-height:60vh;overflow:auto;max-width:370px;background:#061117f5;border:1px solid #426675;padding:16px;margin-top:8px}#chapter-list a{display:block;color:#b4ced3;text-decoration:none;font:10px/1.6 'IBM Plex Mono';padding:10px 5px;border-bottom:1px solid #ffffff14}#chapter-list a:hover{color:#fff;background:#17404c}header,footer{z-index:12;background:linear-gradient(#030709aa,transparent)}footer{background:linear-gradient(transparent,#030709e8);padding-top:20px}.overlay{z-index:7}#reading,#end{display:none!important}.story-chapter{transition:filter .5s}.story-chapter:not(.current){filter:saturate(.65)}.story-chapter.current .chapter-panel{border-top-color:#beffff}@media(max-width:650px){.story-chapter{padding:10vh 5% 30vh}.chapter-panel{width:100%;padding:26px 24px;background:#031019ed}.chapter-panel p:not(.eyebrow){font-size:16px;line-height:1.8}.chapter-panel figure{margin:25px -24px}.chapter-panel figcaption{padding:12px 24px}#chapter-nav{top:80px}.story-finale h2{font-size:48px}.story-finale{padding-bottom:150px}.controls>span:first-child{font-size:7px;letter-spacing:.5px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
#flash{z-index:4}.chapter-panel .author{font-size:11px}dialog[open]{z-index:50}