@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=DM+Sans:wght@400;500;600&family=Caveat:wght@400;500&display=swap');
:root{--cream:#f6efdf;--ink:#34372e;--rose:#e7bfad}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#222a25;color:var(--cream);font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #d5ab81;outline-offset:6px}header{position:absolute;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:26px 5vw}.wordmark{font:500 26px 'Cormorant Garamond',Georgia,serif;letter-spacing:7px}.wordmark span{font-size:19px;color:#e4b396}.header-note{font-size:9px;letter-spacing:3px;color:#eee3cbad}#sound{position:fixed;right:24px;top:22px;z-index:30;background:#242a25ad;backdrop-filter:blur(16px);border:1px solid #f6efdf40;color:var(--cream);border-radius:28px;min-height:44px;padding:10px 15px;display:flex;align-items:center;gap:9px;font-size:10px}.equalizer{display:flex;align-items:center;gap:3px;height:14px}.equalizer i{display:block;background:#eac7a1;width:2px;height:11px;animation:equalize 1s infinite alternate}.equalizer i:nth-child(2){animation-delay:-.4s;height:6px}.equalizer i:nth-child(3){animation-delay:-.7s}.equalizer i:nth-child(4){height:8px;animation-delay:-.2s}.muted .equalizer i{animation:none;height:3px}.reading-progress{position:fixed;left:0;top:0;right:0;height:2px;z-index:50;background:#ffffff09}.reading-progress i{display:block;height:100%;background:#d5b28c;width:0}.cover{min-height:850px;height:100svh;position:relative;overflow:hidden;display:flex;align-items:center}.artwork{position:absolute;inset:-3%;background-image:url('assets/story-atlas.png');background-size:200% 200%;background-repeat:no-repeat;will-change:transform;transform:scale(1.04)}.art-0{background-position:0 0}.art-1{background-position:100% 0}.art-2{background-position:0 100%}.art-3{background-position:100% 100%}.cover-art{inset:0 0 0 28%;opacity:.85}.cover-shade{position:absolute;inset:0;background:linear-gradient(90deg,#222a25 5%,#222a25eb 27%,#222a2560 60%,#222a2510),linear-gradient(0deg,#222a25,transparent 25%)}.cover-copy{position:relative;margin-left:10vw;padding:100px 0;max-width:650px}.eyebrow{font-size:9px;letter-spacing:2.8px;line-height:1.8;font-weight:500;color:#e1c9a7}h1{font:400 clamp(65px,7.5vw,112px)/.96 'Cormorant Garamond',Georgia,serif;letter-spacing:-3px;margin:30px 0}h1 em,h2 em{font-weight:400;color:#e7bfad}.cover-sub{font-size:13px;line-height:1.9;color:#e7dfcdb8;margin:28px 0}.begin{display:inline-flex;align-items:center;justify-content:space-between;gap:55px;padding:17px 0;border-bottom:1px solid #d3c3a77a;font-size:12px}.begin span{font-size:24px}.sound-hint{font-size:9px;color:#d5cbb28c;letter-spacing:1px;margin-top:18px}.cover-credit{position:absolute;bottom:30px;left:5vw;font:italic 16px 'Cormorant Garamond',serif;color:#d4c5b4}.vertical-caption{position:absolute;right:35px;bottom:55px;writing-mode:vertical-rl;letter-spacing:3px;font-size:8px;color:#e1ceb2}.chapter{height:230svh;position:relative}.film{height:100svh;position:sticky;top:0;overflow:hidden;isolation:isolate;background:#30362f}.film>.artwork{inset:-3%;background-size:auto 200%;width:106%;height:106%}.film-shade{position:absolute;inset:0;background:linear-gradient(90deg,#101d1bcc,transparent 80%),linear-gradient(0deg,#121d1bf0 0%,#14201988 26%,transparent 67%,#111c1a33)}.film-number{position:absolute;top:40px;left:5vw;font:italic 24px 'Cormorant Garamond',serif;color:#f3e9d0}.film-number span{font:9px 'DM Sans',sans-serif;letter-spacing:2px;margin-left:14px;color:#e8dfcbac}.scene-copy{position:absolute;inset:auto auto 13% 10vw;width:min(540px,75vw);height:300px}.beat{position:absolute;left:0;bottom:0;width:100%;will-change:opacity,transform}.beat.second{opacity:0;transform:translateY(30px);pointer-events:none}h2{font:400 clamp(42px,5.5vw,76px)/1.03 'Cormorant Garamond',Georgia,serif;letter-spacing:-1.5px;margin:17px 0 23px}.beat>p:not(.eyebrow){max-width:435px;font-size:13px;line-height:1.95;color:#f4ead6d4;text-wrap:pretty}.beat strong{display:inline-block;margin-top:10px;font-weight:400;color:#fff7e6}.scene-bottom{position:absolute;bottom:28px;left:5vw;right:5vw;border-top:1px solid #f3e8d529;padding-top:17px;font-size:8px;letter-spacing:2px;color:#f3e8d59c}.letter-section{background:#f1eadc;color:var(--ink);padding:120px 25px 100px;position:relative;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 fill='%237f7154' opacity='.045' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.letter-heading{text-align:center}.letter-heading .eyebrow{color:#8e7760}.letter-heading h2{font-size:clamp(42px,5vw,65px)}.letter-heading h2 em{color:#9e6d59}.handdrawn{font:26px 'Caveat',cursive;color:#9b7566;display:block;transform:rotate(-5deg);margin:25px 0 50px}.letter-paper{max-width:610px;margin:auto;background:#fffaf0;padding:60px 65px;box-shadow:0 18px 60px #62513b13;position:relative;transform:rotate(-1deg);border:1px solid #d6cdbb88}.letter-paper:before{content:'';position:absolute;width:105px;height:30px;background:#b9ab8360;top:-14px;left:calc(50% - 52px);transform:rotate(5deg)}.letter-date{font-size:8px;letter-spacing:2px;color:#9a8d77}.letter-paper h3{font:36px 'Caveat',cursive;color:#895d50;margin:32px 0 25px}.letter-paper p{font:21px/1.65 'Cormorant Garamond',Georgia,serif;color:#5d594b}.signature{font-size:11px;line-height:2;margin-top:25px;color:#81705b}.signature span{font:43px 'Caveat',cursive;color:#8a5c4e}.signature i{font-size:20px}#keep{border:0;border-bottom:1px solid #b6a48d;background:none;color:#78634f;padding:15px 0 8px;margin-top:22px;font-size:10px}#keep span{margin-left:30px}.letter-after{text-align:center;margin:80px 0 0;font:italic 27px/1.6 'Cormorant Garamond',serif}.letter-after span{font-size:19px;color:#8b7c67}.letter-after a{display:block;margin:25px auto 0;font:30px 'DM Sans',sans-serif;width:44px}.finale{height:250svh}.finale .film-shade{background:linear-gradient(0deg,#13211bef,transparent 75%),linear-gradient(90deg,#14211c99,transparent 85%)}.final-signature{font:34px 'Caveat',cursive;color:#efd2b2;margin:25px 0}.replay{display:inline-block;font-size:10px;border-bottom:1px solid #dbc8a875;padding-bottom:7px}.rain,.motes,.petals,.bokeh{position:absolute;inset:0;pointer-events:none;overflow:hidden}.rain{opacity:.17;background-image:repeating-linear-gradient(105deg,transparent 0,transparent 95px,#c8dce4 96px,transparent 97px);background-size:140px 120px;mask-image:linear-gradient(transparent,#000);animation:rain 1.4s linear infinite}.motes i,.petals i,.bokeh i{position:absolute;left:var(--x);top:var(--y);animation:float var(--d) ease-in-out infinite alternate;animation-delay:var(--delay)}.motes i{width:3px;height:3px;border-radius:50%;background:#ffe5a3;box-shadow:0 0 15px 4px #ffe5a350}.petals i{width:9px;height:15px;border-radius:80% 0 80% 20%;background:#ecc3b3a0;animation-name:petal}.bokeh i{width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle,#ffdeb34d,#f9ca8420 65%,transparent 70%);filter:blur(3px);mix-blend-mode:screen}.reveal{opacity:0;translate:0 25px;transition:opacity 1s,translate 1s}.reveal.visible{opacity:1;translate:0 0}footer{padding:30px 6vw;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:9px;color:#b1b5a4}footer span{font:23px 'Caveat',cursive;color:#e4c8ac}@keyframes equalize{to{transform:scaleY(.3)}}@keyframes rain{to{background-position:-35px 120px}}@keyframes float{to{transform:translate3d(18px,-30px,0);opacity:.35}}@keyframes petal{to{transform:translate3d(55px,120px,0) rotate(150deg);opacity:.2}}@media(min-width:1000px){.film>.artwork{background-size:200% auto}.film .art-0{background-position:0 7%}.film .art-1{background-position:100% 7%}.film .art-2{background-position:0 93%}.film .art-3{background-position:100% 93%}}
@media(max-width:700px){header{padding:25px}.wordmark{font-size:22px}.header-note{display:none}#sound{right:17px;top:17px;font-size:9px;padding:10px 12px}.cover{height:100svh;min-height:730px;align-items:flex-end}.cover-art{inset:0;opacity:1;background-size:auto 200%;background-position:15% 0}.cover-shade{background:linear-gradient(0deg,#1b2824 0%,#1b2824dc 27%,#1b282425 78%,#18261e88)}.cover-copy{margin-left:7vw;padding:0 0 100px;max-width:88vw}.eyebrow{font-size:8px;letter-spacing:2px}h1{font-size:65px;letter-spacing:-2px;margin:20px 0;line-height:.98}.cover-sub{font-size:11px;margin:20px 0;line-height:1.8}.begin{font-size:11px;padding:9px 0;gap:40px}.sound-hint{font-size:8px}.cover-credit{left:7vw;bottom:27px;font-size:13px}.vertical-caption{display:none}.chapter{height:210svh}.film-number{top:30px;left:7vw;font-size:21px}.film-number span{font-size:7px;letter-spacing:1.2px;margin-left:8px}.film>.artwork{background-size:auto 200%;width:106%;height:106%}.film .art-0{background-position:9% 0}.film .art-1{background-position:91% 0}.film .art-2{background-position:9% 100%}.film .art-3{background-position:91% 100%}.film-shade{background:linear-gradient(0deg,#101e1afc 0%,#101e1ae8 17%,#101e1a80 43%,#101e1a00 76%,#101e1a55)}.scene-copy{left:7vw;bottom:12%;width:86vw;height:320px}h2{font-size:43px;letter-spacing:-1px;margin:15px 0 17px}.beat>p:not(.eyebrow){font-size:11px;line-height:1.9;max-width:340px}.scene-bottom{left:7vw;right:7vw;bottom:23px;font-size:6px;letter-spacing:1.1px;padding-top:13px}.letter-section{padding:80px 22px 65px}.letter-heading h2{font-size:43px}.letter-heading .eyebrow{font-size:7px;letter-spacing:1.5px}.handdrawn{font-size:24px;margin:20px 0 44px}.letter-paper{padding:38px 28px}.letter-paper p{font-size:19px;line-height:1.6}.letter-paper h3{font-size:31px}.letter-date{font-size:6px;letter-spacing:1.5px}.letter-after{margin-top:60px}.finale .scene-copy{bottom:12%}.finale h2{font-size:42px}.finale .film-shade{background:linear-gradient(0deg,#13211bfc 0%,#13211bdd 26%,#13211b22 78%,#13211b55)}.final-signature{font-size:29px;margin:18px 0}.replay{font-size:9px}footer{padding:25px;font-size:8px;line-height:1.8}footer span{white-space:nowrap;font-size:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.artwork{transform:none!important}.reveal{opacity:1;translate:none}.chapter{height:auto}.film{position:relative;height:auto;min-height:100svh}.scene-copy{position:relative;inset:auto;padding:180px 0 90px;margin-left:7vw;height:auto;width:86vw}.beat{position:relative!important;opacity:1!important;transform:none!important;pointer-events:auto!important}.beat.second{margin-top:50px}.film>.artwork{height:100%;inset:0;opacity:.5}.film-shade{background:#15211a88}.film-number{top:25px}.scene-bottom{bottom:20px}}
/* Keep each painted atlas frame square: no neighbouring frame can bleed into a scene. */
.film>.artwork{width:max(106vw,106svh);height:max(106vw,106svh);left:calc((100% - max(106vw,106svh))/2);top:calc((100% - max(106vw,106svh))/2);right:auto;bottom:auto;background-size:200% 200%}.film .art-0{background-position:0 0}.film .art-1{background-position:100% 0}.film .art-2{background-position:0 100%}.film .art-3{background-position:100% 100%}@media(prefers-reduced-motion:reduce){.film>.artwork{height:100%;width:100%;inset:0;background-size:auto 200%;transform:none!important}}
@media(max-width:700px){.film>.artwork{width:112vw;height:112vw;left:-6vw;top:7svh;background-size:200% 200%}.film-shade{background:linear-gradient(0deg,#101e1a 5%,#101e1af5 21%,#101e1a99 42%,transparent 65%,#101e1a55)}.cover-art{width:115vw;height:115vw;left:-7.5vw;top:3svh;background-size:200% 200%;background-position:0 0}.cover-shade{background:linear-gradient(0deg,#1b2824 5%,#1b2824e8 38%,#1b282422 72%,#18261e77)}.finale .film-shade{background:linear-gradient(0deg,#13211b 5%,#13211bf0 26%,#13211b66 47%,transparent 70%,#13211b55)}}
.world-window{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 65% 45%,#566a4e,#202e29 76%)}.world-window canvas{display:block;width:100%;height:100%}.has-3d .artwork{display:none}.has-3d .rain,.has-3d .motes,.has-3d .petals,.has-3d .bokeh{display:none}.has-3d .film-shade{background:linear-gradient(0deg,#14231dee,transparent 35%),linear-gradient(90deg,#14231daa,transparent 75%)}.has-3d .cover-shade{background:linear-gradient(90deg,#202e29e6,transparent 85%)}@media(max-width:700px){.world-window{top:4svh;height:62svh;bottom:auto}.has-3d .film-shade{background:linear-gradient(0deg,#14231d 5%,#14231df5 20%,#14231d30 48%,transparent 67%)}.has-3d .cover-shade{background:linear-gradient(0deg,#1b2824 0%,#1b2824ee 29%,transparent 66%)}.has-3d .cover-copy{padding-bottom:85px}.has-3d h1{font-size:59px}.has-3d .cover-sub{margin:17px 0}.has-3d .cover .world-window{top:3svh;height:57svh}}