@font-face{font-family:Elite;src:url('assets/special-elite.ttf') format('truetype');font-display:swap}
@font-face{font-family:Ink;src:url('assets/rock-salt.ttf') format('truetype');font-display:swap}
:root{color-scheme:light;--red:#ed1726;--ink:#101010;--paper:#fff}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#101010}body{font-family:Elite,'Courier New',monospace;color:var(--ink);display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:100svh;padding:22px 24px 10px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:2px dashed var(--red);outline-offset:5px}button:disabled{cursor:default}button:hover,a:hover{color:var(--red)}h1,h2,h3,p{margin:0}button,h1,h2{line-height:1.2}.skip{position:fixed;z-index:200;top:-70px;left:20px;background:white;padding:12px}.skip:focus{top:10px}
.stage{position:relative;isolation:isolate;overflow:hidden;width:min(1200px,calc((100svh - 76px)*1.578947));max-width:100%;aspect-ratio:1200/760;background:white;container-type:inline-size;border:1px solid #323232}
.crop{position:absolute;overflow:hidden;pointer-events:none}.crop img{position:absolute;max-width:none;display:block;height:auto;user-select:none}.top-strip{left:0;top:0;width:100%;height:3.55%;z-index:60}.floor{bottom:-.15%;left:0;width:100%;height:12.4%;z-index:45;mix-blend-mode:multiply;pointer-events:none}
.wordmark{font-family:Elite,Georgia,serif;font-weight:900;letter-spacing:-.065em;line-height:.95;color:#090909;text-decoration:none;text-shadow:.7px .2px currentColor,-.4px .4px currentColor}.wordmark span{letter-spacing:-.1em}.entrance{position:absolute;inset:0;z-index:30;background:white;transition:transform .95s cubic-bezier(.72,0,.18,1),opacity .45s .1s}.entrance-name{position:absolute;top:9.7%;left:0;right:0;text-align:center;font-size:6cqw}.entrance-universe{width:48%;aspect-ratio:755/490;left:26%;top:21%;transform-origin:50% 50%;animation:paper-breath 12s ease-in-out infinite}.language-picker{position:absolute;top:72%;width:100%;text-align:center}.language-picker>p{font-size:clamp(12px,1.45cqw,18px);letter-spacing:.015em}.language-picker>p span{white-space:nowrap}.language-options{display:flex;align-items:center;justify-content:center;gap:4cqw;margin-top:2cqw}.scribble{font-family:Ink,'Bradley Hand',cursive;font-weight:400}.language{position:relative;font-size:3.2cqw;line-height:1.3;padding:0 1cqw 1.1cqw}.language::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red);clip-path:polygon(0 45%,75% 0,100% 45%,80% 75%,4% 100%);transform:rotate(-1.5deg);transition:transform .18s}.language:hover{color:var(--ink);transform:rotate(-2deg)}.language:hover::after{transform:rotate(1deg) scaleX(1.06)}.language-slash{font-family:Ink,cursive;font-size:4cqw}.english-status{color:var(--red);min-height:20px;margin-top:1.3cqw;font-size:1.2cqw!important}
.site{position:absolute;inset:0;opacity:0;transform:translateX(13%);transition:transform 1.1s cubic-bezier(.22,.8,.2,1),opacity .6s}.stage[data-mode=site] .entrance{transform:translateX(-105%);opacity:0;pointer-events:none}.stage[data-mode=site] .site{opacity:1;transform:none}.masthead{height:14%;position:absolute;inset:3.6% 0 auto;z-index:55;display:flex;align-items:flex-start;padding:2% 2.4% 0;gap:3%;background:linear-gradient(white 65%,#ffffff00)}.site-name{font-size:3.45cqw;width:29%;white-space:nowrap}.masthead nav{display:flex;align-items:center;justify-content:space-between;flex:1;gap:.7cqw;padding-top:.8cqw}.nav-item{position:relative;min-height:30px;white-space:nowrap;font-family:Georgia,'Times New Roman',serif;font-size:clamp(11px,1.15cqw,14px);letter-spacing:.025em;padding:0 .3cqw}.nav-item span{display:inline-block;transition:transform .15s}.nav-item:hover span,.nav-item:focus-visible span,.nav-item[aria-current=page] span{font-family:Ink,cursive;font-size:clamp(12px,1.45cqw,18px);color:#000;transform:rotate(-7deg) scale(1.03)}.nav-item[aria-current=page]::after{content:'';position:absolute;left:0;right:0;bottom:-.3cqw;height:1px;background:#151515;transform:rotate(-3deg)}.future{color:#333}
.panorama{position:absolute;inset:0;overflow:hidden;outline:none}.scene-track{position:absolute;inset:0;display:flex;transform:translateX(0);transition:transform 1.55s cubic-bezier(.67,.015,.2,1);will-change:transform}.stage .scene-track{transform:translateX(var(--scene-offset,0%))}.scene{position:relative;width:100%;height:100%;flex-shrink:0;overflow:hidden}.home-writing{position:absolute;top:18%;left:5%;width:28%;z-index:8}.scene-title{font-size:6.2cqw;transform:rotate(-6deg);margin:0 0 2cqw -.7cqw;line-height:1.8}.home-writing h3{font-size:1.65cqw;line-height:1.3;font-weight:normal}.ink-rule{height:2px;width:88%;margin:.7cqw 0 1.6cqw;background:#171717;transform:rotate(-1deg);clip-path:polygon(0 30%,80% 0,100% 40%,65% 75%,0 100%)}.empty-writing{color:var(--red);font-size:clamp(13px,1.4cqw,17px);line-height:1.7}.soon-writing{font-size:clamp(12px,1.2cqw,15px);margin-top:2cqw}.moon{left:32%;top:11.8%;width:38.9%;aspect-ratio:615/214;mix-blend-mode:multiply}.sun{left:35%;bottom:4%;width:28.2%;aspect-ratio:445/355;mix-blend-mode:multiply;clip-path:polygon(0 0,100% 0,100% 87%,80% 87%,80% 93%,63% 93%,63% 100%,36% 100%,36% 93%,20% 93%,20% 87%,0 87%)}.quote-place{position:absolute;left:67%;top:30%;width:19%;transform:rotate(-7deg);z-index:8}.quote-place p{font-family:Ink,cursive;font-size:2.35cqw;line-height:1.7}.red-star{position:absolute;right:0;top:-.6cqw;color:var(--red);font-size:4cqw;font-family:Georgia,serif}.trees{left:-1%;bottom:-2.5%;width:83%;aspect-ratio:1270/842;mix-blend-mode:multiply;clip-path:polygon(0 34%,29% 34%,29% 0,100% 0,100% 100%,0 100%)}.contact-copy{position:absolute;top:19%;left:5%;z-index:10;max-width:42%}.contact-copy h2{font-family:Georgia,serif;font-size:2.35cqw;letter-spacing:.025em;font-weight:400;color:var(--red);margin-bottom:1cqw}.contact-copy p{font-size:clamp(12px,1.4cqw,17px);line-height:1.5;margin-bottom:1.3cqw}.email-address{font-size:clamp(12px,1.38cqw,17px);text-decoration-thickness:1px;text-underline-offset:5px}.open-mail{display:block;width:max-content;font-size:clamp(12px,1.3cqw,16px);line-height:2;margin-top:1.15cqw;text-underline-offset:4px}.open-mail span{display:inline-block;font-size:1.8cqw;margin-left:1.2cqw;transition:transform .2s}.open-mail:hover span{transform:translateX(8px)}.envelope{position:relative;display:block;pointer-events:auto;margin-top:1.3cqw;width:10cqw;aspect-ratio:155/90;mix-blend-mode:multiply;transition:transform .2s}.envelope:hover{transform:rotate(-5deg)}
.cake-player{position:absolute;z-index:40;right:-1.2%;bottom:2.3%;width:24%;aspect-ratio:2/3;mix-blend-mode:normal}.cake-art{display:block;width:100%;height:auto;user-select:none;clip-path:polygon(38% 5%,55% 5%,55% 12%,60% 16%,60% 29%,56% 32%,56% 37%,63% 37%,66% 39%,69% 44%,68% 47%,74% 47%,75% 57%,82% 60%,83% 71%,90% 74%,91% 85%,96% 90%,92% 94%,78% 96%,50% 97%,20% 96%,7% 93%,6% 88%,12% 84%,13% 75%,19% 73%,19% 61%,26% 58%,26% 47%,37% 45%,38% 31%,32% 29%,32% 17%,38% 13%)}.player-controls{position:absolute;left:24%;top:65%;width:51.7%;height:5.8%;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:2%;padding:0 1%;}.player-controls button{display:flex;justify-content:center;align-items:center;min-width:21%;height:100%;padding:0;font:900 1.2cqw/1 Arial,sans-serif}.previous span{border-left:2px solid currentColor;line-height:1}.next span{border-right:2px solid currentColor;line-height:1}.player-time{font-family:Arial,sans-serif;font-size:1.3cqw;margin-left:.3cqw;font-weight:bold}.player-message{position:absolute;bottom:31%;right:7%;background:white;border:1px solid black;padding:.7cqw;width:90%;font-size:1.1cqw;line-height:1.5;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;pointer-events:none}.player-message.shown{opacity:1;transform:none}.frog-touch{position:absolute;z-index:3;left:51%;top:34%;width:17%;height:14%;border-radius:50%}.frog-touch:hover{outline:1px dashed var(--red);outline-offset:2px}.cake-player.greeting .cake-art{animation:paper-shiver .32s steps(2,end) 2}.bottom-mail{position:absolute;right:2%;bottom:1.9%;display:flex;align-items:center;gap:.6cqw;z-index:65;color:white;text-decoration:none}.bottom-mail>span:first-child{font-family:Ink,cursive;font-size:1.35cqw;transform:rotate(-5deg)}.mail-strip{padding:.55cqw .7cqw .35cqw;background:white;color:black;font-size:.95cqw}.mail-arrow{color:var(--red);font-size:2.4cqw}.bottom-mail:hover .mail-strip{color:var(--red)}.notice{position:absolute;z-index:90;left:50%;bottom:15%;transform:translate(-50%,8px);background:white;border:1px solid #111;padding:12px 18px;font-size:14px;line-height:1.4;max-width:85%;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;text-align:center}.notice.shown{opacity:1;transform:translate(-50%,0)}.outside-controls{width:min(1200px,100%);display:flex;justify-content:space-between;min-height:28px;margin-top:9px;gap:20px}.outside-controls button{color:#aaa;font-size:12px;padding:3px 0}.outside-controls button:hover{color:white}#motion-toggle{margin-left:auto}
@keyframes paper-breath{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-.45cqw) rotate(.4deg)}}@keyframes paper-shiver{0%,100%{transform:rotate(0)}30%{transform:rotate(-.7deg)}65%{transform:rotate(.7deg)}}
.scene h2[tabindex]:focus{outline:none}
.motion-off *,.motion-off *::before,.motion-off *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){body:not(.motion-active) *,body:not(.motion-active) *::before,body:not(.motion-active) *::after{animation:none!important;transition:none!important}}
@media(max-width:560px){body{padding:0;justify-content:flex-start;background:white}.stage{width:100%;max-width:none;min-height:920px;height:calc(100svh - 36px);aspect-ratio:auto;border:none}.top-strip{height:20px}.floor{width:200%;left:-50%;height:auto;aspect-ratio:1581/123}.entrance-name{top:14%;font-size:9cqw}.entrance-universe{width:94%;left:3%;top:31%;}.language-picker{top:68%;padding:0 18px}.language-picker>p{font-size:14px;line-height:1.8}.language-picker>p span{display:block}.language-options{gap:16px;margin-top:28px}.language{font-size:6.5cqw;padding-bottom:12px}.language-slash{font-size:7cqw}.english-status{font-size:13px!important;margin-top:20px}.masthead{inset:30px 0 auto;padding:0 6%;display:block;height:135px;background:linear-gradient(white 80%,#ffffff00)}.site-name{font-size:9cqw;width:auto;display:block}.masthead nav{display:grid;grid-template-columns:repeat(3,1fr);gap:9px 12px;padding-top:20px}.nav-item{font-size:14px;min-height:28px;padding:0;}.nav-item:hover span,.nav-item:focus-visible span,.nav-item[aria-current=page] span{font-size:16px}.nav-item[aria-current=page]::after{left:20%;right:20%;bottom:-3px}.home-writing{top:190px;left:7%;width:62%}.scene-title{font-size:11cqw;line-height:1.5;margin-bottom:20px}.home-writing h3{font-size:18px}.ink-rule{margin:10px 0 20px;width:88%}.empty-writing{font-size:16px;line-height:1.7}.soon-writing{font-size:14px;margin-top:18px}.moon{top:180px;left:60%;width:42%;}.sun{left:4%;bottom:9%;width:48%;}.quote-place{left:8%;top:51%;width:44%;}.quote-place p{font-size:5cqw;line-height:1.7}.red-star{font-size:9cqw;right:-8%;top:0}.cake-player{width:43%;right:-3%;bottom:3.7%;}.player-controls{left:23%;width:54%;}.player-controls button{font-size:2.5cqw;min-height:20px}.player-time{font-size:2.4cqw}.player-message{font-size:12px;line-height:1.4;padding:8px;width:120%;right:8%}.bottom-mail{right:4%;bottom:2.3%;gap:7px}.bottom-mail>span:first-child{font-size:14px}.mail-strip{font-size:11px;padding:5px 6px}.mail-arrow{font-size:25px}.contact-copy{top:210px;left:7%;max-width:89%}.contact-copy h2{font-size:27px;margin-bottom:14px}.contact-copy p{font-size:15px;margin-bottom:16px}.email-address{font-size:16px}.open-mail{font-size:14px;margin-top:10px}.open-mail span{font-size:26px;margin-left:8px}.envelope{width:86px;margin-top:14px}.trees{width:158%;left:-38%;bottom:0%;clip-path:polygon(0 35%,29% 35%,29% 0,100% 0,100% 100%,0 100%)}.outside-controls{background:#101010;padding:8px 15px;margin:0;min-height:36px}.notice{bottom:12%}}

/* Layered paper motion and small Flash-era hover marks. */
.entrance-universe{position:absolute;animation:none;overflow:visible}
.universe-layer{inset:0;mix-blend-mode:multiply}
[data-depth]{will-change:translate}
.ink-hover{pointer-events:auto}
.ink-hover img{pointer-events:none}
.language-picker{top:75%}
.language-options{gap:2.3cqw;margin-top:0}
.language{font-family:Georgia,'Times New Roman',serif;font-size:clamp(12px,1.3cqw,16px);font-weight:400;letter-spacing:.17em;line-height:1.5;padding:12px 8px;min-height:44px;transition:color .15s}
.language::after{height:2px;bottom:6px;left:8px;right:8px;opacity:0;transform:rotate(-3deg) scaleX(.6)}
.language:hover,.language:focus-visible{color:var(--red);transform:none}
.language:hover::after,.language:focus-visible::after{opacity:1;transform:rotate(-3deg) scaleX(1)}
.language-slash{font:12px Georgia,serif;color:#777}
.nav-item{text-transform:uppercase;letter-spacing:.07em}
.moon,.sun,.trees,.quote-place{transition:transform 1.8s cubic-bezier(.22,.75,.22,1)}
.moon{transform:translateX(0)}
.sun{transform:translateX(0)}
.stage[data-page=email] .moon{transform:translateX(-100px)}
.stage:not([data-page=home]) .sun{transform:translateX(-220px)}
.stage[data-page=email] .quote-place{transform:translateX(-65px) rotate(-7deg)}
.trees{transform:translateX(130px)}
.stage[data-page=email] .trees{transform:translateX(0)}
.eye-cross{position:absolute;z-index:2;width:11%;height:7%;opacity:0;pointer-events:none;transform:rotate(-8deg)}
.eye-cross::before,.eye-cross::after{content:'';position:absolute;inset:42% -6% auto;height:16%;background:var(--red);clip-path:polygon(0 35%,35% 0,80% 20%,100% 0,94% 75%,56% 100%,15% 70%);transform:rotate(29deg)}
.eye-cross::after{transform:rotate(-38deg);height:20%}
.sun .eye-left{left:38%;top:44%}.sun .eye-right{left:54%;top:46%}
.sun-layer .eye-cross{width:7%;height:5%}.sun-layer .eye-left{left:40.5%;top:62%}.sun-layer .eye-right{left:51%;top:64%}
.red-scratch{position:absolute;left:29%;bottom:23%;width:42%;height:5%;z-index:3;opacity:0;pointer-events:none;background:var(--red);clip-path:polygon(0 51%,48% 7%,100% 0,91% 48%,23% 95%,7% 100%);transform:rotate(-4deg)}
.quote-place .red-scratch{left:4%;bottom:-9%;width:78%;height:6%}
.ink-hover:hover .eye-cross,.ink-touched .eye-cross,.ink-hover:hover .red-scratch,.ink-touched .red-scratch{opacity:1;animation:ink-jitter .24s steps(2,end) 2}
.ink-hover:hover img,.ink-touched img{animation:ink-nudge .32s steps(2,end) 1}
@keyframes ink-jitter{0%,100%{translate:0 0}30%{translate:1px -1px}70%{translate:-1px 1px}}
@keyframes ink-nudge{0%,100%{margin:0}35%{margin:-1px 1px}70%{margin:1px -1px}}
.cake-player{transition:transform .9s cubic-bezier(.65,0,.3,1);transform-origin:80% 100%}
.bury-cake{position:absolute;top:78%;left:22%;width:62%;height:10%;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:2.1cqw;transform:rotate(-5deg);z-index:5;white-space:nowrap}
.bury-cake:hover{color:var(--red);text-decoration:line-through;text-decoration-thickness:2px}
.cake-buried .cake-player{transform:translate(14%,94%) rotate(8deg)}
.restore-cake{position:absolute;right:3%;bottom:10.5%;z-index:66;color:var(--red);font:italic 1.7cqw Georgia,serif;padding:8px 13px;background:#fff;transform:rotate(-6deg);text-decoration:underline;text-underline-offset:4px}
.restore-cake[hidden]{display:none}
.restore-cake span{display:inline-block;margin-left:5px}
.restore-cake:hover span{transform:translateY(-3px)}
.frog-touch:hover{outline:0}
.frog-touch::after{content:'✶';position:absolute;color:var(--red);left:0;top:-22%;font-size:2cqw;opacity:0;transform:rotate(-12deg)}
.frog-touch:hover::after,.frog-touch:focus-visible::after{opacity:1}
@media(max-width:560px){.language-options{gap:24px;margin-top:0}.language{font-size:13px;padding:12px 8px}.language-slash{font-size:12px}.language-picker{top:68%}.bury-cake{font-size:4.2cqw}.restore-cake{font-size:19px;bottom:10%}.frog-touch::after{font-size:4cqw}}
/* Keep contact text readable when branches drift underneath it. */
.contact-copy p{width:max-content;max-width:100%}
.contact-copy p,.email-address,.open-mail{background:#fff;box-shadow:0 0 0 3px #fff}

/* Transparent artwork: every moving object has its own alpha silhouette. */
@font-face{font-family:Scratch;src:url('assets/lacquer.ttf') format('truetype');font-display:swap}
.scene-title,.contact-copy h2{font-family:Scratch,Ink,cursive;font-weight:400;text-transform:uppercase;letter-spacing:-.065em}
.scene-title{font-size:7.1cqw;line-height:1.2;margin-bottom:2.5cqw;transform:rotate(-7deg) skewY(-2deg)}
.contact-copy h2{font-size:4.1cqw;transform:rotate(-4deg);transform-origin:left center;line-height:1.15;margin-bottom:1.2cqw;color:#101010}
.nav-item:hover span,.nav-item:focus-visible span,.nav-item[aria-current=page] span{font-family:Scratch,Ink,cursive;font-size:clamp(15px,2.05cqw,25px);letter-spacing:-.065em;transform:rotate(-8deg) skewY(-2deg)}
.nav-item[aria-current=page]::after{display:none}
.moon,.sun,.universe-layer,.forest-layer{position:absolute;mix-blend-mode:normal;pointer-events:none}
.moon img,.sun img,.universe-layer img,.forest-layer img,.envelope img,.restore-cake img{display:block;width:100%;height:auto;user-select:none;pointer-events:none}
.moon.ink-hover,.sun.ink-hover,.universe-layer.ink-hover{pointer-events:auto}
.entrance-universe{width:49%;left:25.5%;top:21%;aspect-ratio:755/490}
.universe-layer{inset:auto;overflow:visible}
.orbit-layer{width:100%;left:0;top:5%}
.cloud-layer{width:83%;left:8.5%;top:-2%;z-index:2}
.sun-layer{width:58%;left:22%;top:37%;z-index:3}
.sun-layer .eye-cross,.sun .eye-cross{width:12%;height:7%}
.sun-layer .eye-left,.sun .eye-left{left:38%;top:44.5%}
.sun-layer .eye-right,.sun .eye-right{left:54%;top:45.5%}
.moon{width:41%;left:32%;top:12%;aspect-ratio:auto;z-index:3}
.sun{width:27%;left:36%;bottom:3%;aspect-ratio:auto;clip-path:none}
.quote-place{margin:0;left:36.5%;top:36%;width:38%;transform:rotate(-3deg);z-index:8}
.quote-place blockquote{margin:0}
.quote-place p{font-family:Georgia,'Times New Roman',serif;font-size:1.36cqw;font-style:italic;line-height:1.5;letter-spacing:.035em}
.quote-place figcaption{font-family:Georgia,'Times New Roman',serif;font-size:1.05cqw;font-style:italic;letter-spacing:.07em;margin-top:1.1cqw;text-align:right}
.quote-place .red-star{font-size:2.5cqw;top:-1.8cqw;right:-1cqw}
.quote-place .red-scratch{height:2px;bottom:-.8cqw;width:39%;left:61%}
.stage[data-page=email] .quote-place{transform:translateX(-65px) rotate(-3deg)}
.forest{position:absolute;inset:0;pointer-events:none}
.forest-layer{bottom:0;transition:transform 1.9s cubic-bezier(.22,.75,.22,1)}
.forest-back{width:75%;left:13%;bottom:3%;opacity:.5;transform:translateX(60px)}
.forest-middle{width:50%;left:30%;bottom:-7%;transform:translateX(155px);z-index:2}
.forest-front{width:43%;left:-15%;bottom:-18%;transform:translateX(250px) rotate(12deg);z-index:4}
.forest-right{width:50%;left:47%;bottom:-10%;transform:translateX(195px) scaleX(-1);z-index:3}
.stage[data-page=email] .forest-back,.stage[data-page=email] .forest-middle{transform:translateX(0)}
.stage[data-page=email] .forest-front{transform:translateX(0) rotate(12deg)}
.stage[data-page=email] .forest-right{transform:translateX(0) scaleX(-1)}
.contact-copy{max-width:38%;top:20%}
.contact-copy p,.email-address,.open-mail{background:transparent;box-shadow:none}
.envelope{width:11cqw;aspect-ratio:auto;mix-blend-mode:normal;overflow:visible}
.cake-art{clip-path:none}
.player-controls{background:transparent;top:66%;height:5.8%}
.bury-cake{top:80%}
.restore-cake{right:2.7%;bottom:10.5%;width:7.5%;min-width:54px;min-height:44px;padding:0;background:transparent;transform:rotate(-7deg);text-decoration:none}
.restore-cake:hover img{animation:ink-jitter .24s steps(2,end) 2}
@media(max-width:560px){
 .scene-title{font-size:15cqw;margin-bottom:25px;line-height:1.1}
 .nav-item:hover span,.nav-item:focus-visible span,.nav-item[aria-current=page] span{font-size:23px}
 .entrance-universe{width:94%;left:3%;top:30%}
 .moon{top:165px;left:57%;width:47%}
 .home-writing{width:63%}
 .quote-place{left:8%;top:47%;width:79%;transform:rotate(-3deg)}
 .quote-place p{font-size:3.6cqw;line-height:1.55;letter-spacing:.01em}
 .quote-place figcaption{font-size:2.9cqw;margin-top:13px}
 .quote-place .red-star{font-size:6cqw;right:0;top:-21px}
 .sun{left:2%;bottom:5%;width:48%}
 .contact-copy{top:205px;max-width:88%}
 .contact-copy h2{font-size:11cqw;margin-bottom:18px}
 .forest-back{width:130%;left:-5%;bottom:2%}
 .forest-middle{width:106%;left:8%;bottom:-3%}
 .forest-front{width:80%;left:-42%;bottom:-6%}
 .forest-right{width:95%;left:36%;bottom:-6%}
 .envelope{width:100px}
 .restore-cake{width:17%;right:5%;bottom:10%}
}
/* Keep the poem readable in a narrow desktop preview and give contact its own clear air. */
@media(min-width:561px){
 .quote-place{top:35%}
 .quote-place p{font-size:clamp(9.5px,1.36cqw,17px)}
 .quote-place figcaption{font-size:clamp(8px,1.05cqw,13px)}
 .sun{width:24%;left:38%;bottom:2%}
 .forest-middle{width:44%;left:42%;bottom:-7%}
 .forest-front{width:34%;left:-13%;bottom:-15%}
 .forest-back{width:70%;left:20%;bottom:-8%;opacity:.7}
}
.language-picker{z-index:10}
@media(min-width:561px){.sun-layer{width:53%;left:24%;top:35%}}

/* Paper theatre: complete cutouts cross the stage, without panel-edge clipping. */
.scene{overflow:visible}
.sun{width:45%;left:32%;bottom:5%}
.forest-layer{opacity:1;filter:none}
.forest-back{width:27%;left:22%;bottom:0;opacity:1;filter:none}
.forest-middle{width:44%;left:42%;bottom:-7%}
.forest-front{width:34%;left:-13%;bottom:-15%}
.forest-right{width:24%;left:67%;bottom:-3%}
@media(max-width:560px){
 .sun{width:80%;left:0;bottom:13%}
 .forest-back{width:58%;left:-4%;bottom:0;opacity:1}
 .forest-middle{width:106%;left:8%;bottom:-3%}
 .forest-front{width:80%;left:-42%;bottom:-6%}
 .forest-right{width:56%;left:57%;bottom:-4%}
}

/* Chosen with the user: loose pen handwriting, without dripping brush forms. */
@font-face{font-family:Hand;src:url('assets/abysmal-gaze.ttf') format('truetype');font-display:swap}
.scene-title,.contact-copy h2{font-family:Hand,cursive;letter-spacing:-.025em;font-weight:400}
.scene-title{font-size:10.2cqw;line-height:1;transform:rotate(-7deg)}
.contact-copy h2{font-size:6cqw;line-height:1;transform:rotate(-5deg)}
.nav-item:hover span,.nav-item:focus-visible span,.nav-item[aria-current=page] span{font-family:Hand,cursive;font-size:clamp(19px,2.8cqw,34px);letter-spacing:-.03em;transform:rotate(-8deg)}
@media(max-width:560px){.scene-title{font-size:19cqw}.contact-copy h2{font-size:15cqw}.nav-item:hover span,.nav-item:focus-visible span,.nav-item[aria-current=page] span{font-size:29px}}

/* Restore the selected dense grove composition as separate stage scenery. */
.forest-middle{width:65%;height:90%;left:21%;bottom:-8%}
.forest-middle img{width:100%;height:100%}
.forest-front{width:36%;left:-3%;bottom:-5%}
.forest-right{width:32%;height:48%;left:49%;bottom:0}
.forest-right img{width:100%;height:100%}
.forest-back{width:20%;left:19%;bottom:0}
.forest-ink{width:85%;left:-1%;bottom:-2%;z-index:6;transform:translateX(280px)}
.stage[data-page=email] .forest-ink{transform:translateX(0)}
.contact-copy{max-width:33%;top:19%;left:5%}
.contact-copy h2{color:var(--red);font-size:5cqw}
.cake-float{position:relative;width:100%;transform-origin:50% 96%;animation:cake-sway 7s ease-in-out infinite}
.cake-buried .cake-float{animation-play-state:paused}
@keyframes cake-sway{0%,100%{transform:rotate(-.65deg) translateY(0)}50%{transform:rotate(.65deg) translateY(-.32cqw)}}
@media(max-width:560px){
 .forest-middle{width:135%;height:56%;left:-4%;bottom:-3%}
 .forest-front{width:72%;left:-16%;bottom:-3%}
 .forest-right{width:69%;height:28%;left:47%;bottom:0}
 .forest-back{width:52%;left:5%;bottom:0}
 .forest-ink{width:160%;left:-28%;bottom:-1%}
 .contact-copy{top:205px;max-width:88%;left:7%}
 .contact-copy h2{font-size:15cqw}
}
@media(min-width:561px){
 .forest-middle{width:61%;left:26%}
 .forest-front{width:34%;left:-3%;bottom:-8%}
 .contact-copy p{font-size:clamp(10px,1.4cqw,17px)}
 .email-address{font-size:clamp(10px,1.38cqw,17px)}
 .open-mail{font-size:clamp(10px,1.3cqw,16px)}
}

/* The supplied Abysmal Gaze face and the galaxy portrait scene. */
.scribble,.bottom-mail>span:first-child{font-family:Hand,cursive}
.scene-title{font-size:8cqw;letter-spacing:0;line-height:1.15}
.contact-copy h2{font-size:4.7cqw;letter-spacing:0}
.nav-item:hover span,.nav-item:focus-visible span,.nav-item[aria-current=page] span{font-size:clamp(18px,2.2cqw,27px);letter-spacing:0}
.galaxy-art{position:absolute;left:0;bottom:0;width:100%;mix-blend-mode:multiply;transform:translateX(100px);transition:transform 1.8s cubic-bezier(.22,.75,.22,1);pointer-events:none}
.galaxy-art img{display:block;width:100%;height:auto;user-select:none}
.stage[data-page=blog] .galaxy-art{transform:translateX(0)}
.stage[data-page=email] .galaxy-art{transform:translateX(-100px)}
.blog-title{position:absolute;left:5%;top:50%;z-index:8;max-width:30%;font-size:6.5cqw}
@media(max-width:560px){
 .stage{height:100svh}
 .scene-title{font-size:15cqw}
 .contact-copy h2{font-size:12cqw}
 .nav-item:hover span,.nav-item:focus-visible span,.nav-item[aria-current=page] span{font-size:25px}
 .galaxy-art{width:190%;left:-45%;bottom:5%}
 .blog-title{top:210px;left:7%;max-width:85%;font-size:13cqw}
}

/* Photo and biography, with fine imperfect ink borders like the Band reference. */
.about-photo{position:absolute;top:17%;left:5%;width:68%;margin:0;z-index:5}
.photo-window{position:relative;height:26cqw;padding:5px;background:white}
.photo-window>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 17%}
.photo-frame{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);color:#141414;pointer-events:none;overflow:visible}
.about-photo figcaption{margin-top:1cqw;font:clamp(9px,1cqw,12px)/1.5 Elite,monospace;text-align:right}
.about-photo figcaption a{text-underline-offset:3px}
.about-photo figcaption span{padding:0 .5em;color:var(--red)}
.about-copy{position:absolute;left:5%;top:64%;width:68%;height:24%;display:grid;grid-template-columns:27% 1fr;gap:4%;align-items:start;z-index:7}
.about-copy .scene-title{font-size:5.2cqw;line-height:1.1;margin:0;max-width:100%;transform:rotate(-6deg)}
.about-bio{height:100%;overflow-y:auto;overscroll-behavior:contain;padding:0 1cqw 1.2cqw 0;scrollbar-width:thin;scrollbar-color:#999 transparent;font-size:clamp(11px,1.2cqw,15px);line-height:1.6}
.about-bio p+p{margin-top:.7em}
.about-bio:focus-visible{outline:1px dashed var(--red);outline-offset:4px}
.labs-copy{position:absolute;left:12%;top:33%;width:57%;text-align:center}
.labs-copy .scene-title{font-size:9cqw;margin:0 0 2cqw}
.labs-copy p{color:var(--red);font-family:Georgia,serif;font-style:italic;font-size:2.3cqw;letter-spacing:.04em}
.labs-site{display:inline-block;padding:12px 4px;min-height:44px;font:clamp(14px,1.8cqw,28px)/1.5 Elite,'Courier New',monospace;letter-spacing:0;text-decoration:underline;text-underline-offset:6px}
.labs-site:hover{color:var(--ink)}
.labs-scratch{display:block;width:45%;height:5px;background:var(--red);margin:1.3cqw auto;transform:rotate(-4deg);clip-path:polygon(0 75%,37% 21%,100% 0,85% 68%,5% 100%)}
.youtube-title{position:absolute;top:17%;left:5%;font-size:6.3cqw;margin:0;z-index:5}
.youtube-tv{position:absolute;width:66%;left:5%;bottom:5%;pointer-events:none;transform:translateX(90px);transition:transform 1.8s cubic-bezier(.22,.75,.22,1)}
.youtube-tv img{width:100%;display:block;height:auto;user-select:none}
.stage[data-page=youtube] .youtube-tv{transform:translateX(0)}
@media(max-width:560px){
 .about-photo{top:190px;left:7%;width:86%}
 .photo-window{height:58cqw}
 .about-photo figcaption{font-size:10px;margin-top:12px}
 .about-copy{top:490px;left:7%;width:86%;height:215px;display:block}
 .about-copy .scene-title{font-size:11cqw;margin-bottom:20px}
 .about-bio{height:150px;font-size:13px;padding-right:12px}
 .labs-copy{left:8%;top:32%;width:84%}
 .labs-copy .scene-title{font-size:17cqw;margin-bottom:30px}
 .labs-copy p{font-size:23px}
 .youtube-title{top:205px;left:7%;font-size:13cqw}
 .youtube-tv{width:108%;left:-5%;bottom:29%}
}

/* Let props finish their exit, then hide the departed scenery completely. */
.scene[aria-hidden="true"]{visibility:hidden;transition:visibility 0s 1.95s}
.scene[aria-hidden="false"]{visibility:visible;transition:visibility 0s}

/* Full photograph: its natural proportions, with the biography beside it. */
.about-photo{top:18%;width:57%;left:5%}
.photo-window{height:auto}
.photo-window>img{height:auto;object-fit:contain;object-position:center}
.about-copy{left:66%;top:21%;width:29%;height:61%;display:block}
.about-copy .scene-title{font-size:5.1cqw;margin:0 0 2.2cqw}
.about-bio{height:75%;font-size:clamp(11px,1.25cqw,15px)}
.contact-copy{max-width:56%;top:20%}
.contact-copy h2{font:400 clamp(13px,2.15cqw,26px)/1.4 Elite,monospace;text-transform:none;letter-spacing:-.035em;transform:rotate(-2deg);margin-bottom:1cqw;color:var(--red)}
.contact-copy h2 a{text-decoration:none}
.contact-copy h2 a:hover{text-decoration:underline;text-underline-offset:5px}
.newsletter{position:absolute;top:19%;right:5%;width:25%;z-index:12;margin:0;padding:1.2cqw;background:#fff;transform:rotate(1deg)}
.newsletter h3{font:400 3.4cqw/1.15 Hand,cursive}
.newsletter .newsletter-soon{font:italic clamp(10px,1.1cqw,14px)/1.5 Georgia,serif;color:var(--red);margin:.3cqw 0 1cqw}
.newsletter label{display:block;font-size:clamp(10px,1.1cqw,14px);margin:.7cqw 0 .3cqw}
.newsletter input{display:block;width:100%;min-width:0;border:0;border-bottom:1px solid #222;border-radius:0;background:white;color:#111;padding:.45cqw .2cqw;font:clamp(11px,1.2cqw,15px)/1.4 Elite,monospace}
.newsletter input:focus-visible{outline:1px dashed var(--red);outline-offset:3px}
.newsletter button{font:italic clamp(11px,1.3cqw,16px)/1.5 Georgia,serif;margin-top:1cqw;padding:0;opacity:.6;cursor:default}
.newsletter button span{color:var(--red);margin-left:.5em}
.youtube-soon{position:absolute;left:16%;top:38%;width:49%;text-align:center;font:italic 2.7cqw/1.4 Georgia,serif;color:white;background:#090909;padding:.7cqw .2cqw;transform:rotate(-3deg)}
@media(max-width:560px){
 .about-photo{top:190px;left:7%;width:86%}
 .about-copy{top:calc(240px + 57cqw);left:7%;width:86%;height:225px}
 .about-copy .scene-title{font-size:11cqw;margin-bottom:20px}
 .about-bio{height:150px;font-size:13px}
 .contact-copy{top:200px;left:7%;max-width:89%}
 .contact-copy h2{font-size:5cqw}
 .newsletter{top:330px;left:7%;right:auto;width:68%;padding:15px;transform:rotate(-1deg)}
 .newsletter h3{font-size:10cqw}
 .newsletter .newsletter-soon{font-size:13px;margin:5px 0 12px}
 .newsletter label{font-size:13px;margin:12px 0 4px}
 .newsletter input{font-size:16px;padding:7px 2px}
 .newsletter button{font-size:16px;margin-top:15px}
 .youtube-soon{font-size:5cqw;padding:2cqw .5cqw}
}

.photo-credit-label{padding:0!important;color:inherit!important}

.track-label{position:absolute;top:56.8%;left:23%;width:55%;margin:0;text-align:center;font:clamp(6px,.75cqw,9px)/1.2 Elite,monospace;color:#111;pointer-events:none}
.track-label span{display:block;white-space:nowrap}
#track-title{color:var(--red)}
@media(max-width:560px){.track-label{font-size:1.6cqw}}

/* Approved handwriting stays shared across every scene, including Photos. */
.scene-title,.scribble{font-family:Hand,cursive;font-weight:400}
.masthead{gap:2%}.site-name{width:28%}.masthead nav{gap:.3cqw}
.nav-item{font-size:clamp(10px,1.03cqw,13px);padding:0 .2cqw}
.portrait-touch{position:absolute;left:33%;top:4%;width:26%;height:43%;z-index:4;padding:0}
.portrait-touch:hover{transform:rotate(-2deg)}
.portrait-touch::after{content:'';position:absolute;left:22%;top:11%;width:58%;height:2px;background:var(--red);transform:rotate(-14deg);opacity:0}
.portrait-touch:hover::after,.portrait-touch:focus-visible::after{opacity:1}
.track-label{top:51.5%;left:28%;width:44%;font-family:Arial,sans-serif;font-size:clamp(6px,.73cqw,9px);line-height:1.2;text-transform:uppercase;color:#111}
.track-label span{white-space:normal;overflow-wrap:normal}
#track-artist{font-size:.88em;letter-spacing:.015em}
#track-title{font-weight:800;color:var(--red);font-size:1.17em;margin-top:.2em}
.player-controls{top:57.5%;left:28%;width:45%;height:3.8%;background:transparent;padding:0}
.player-controls button{font-size:.85cqw;min-width:18%}
.player-time{font-size:.86cqw;margin-left:.15cqw}
.bury-cake{top:68%;left:24%;width:55%;font-size:2.2cqw;transform:rotate(-6deg)}
.cake-ribbon{position:absolute;right:10%;top:85%;width:25%;height:4%;background:var(--red);transform:rotate(-22deg);clip-path:polygon(0 75%,27% 29%,100% 0,94% 58%,30% 83%,3% 100%);pointer-events:none}
.photos-title{position:absolute;top:16%;left:5%;margin:0;z-index:6;font-size:7.6cqw}
.gallery-main{position:absolute;left:5%;top:29%;width:55%;height:min(44%,calc(60% - 9cqw));display:flex;align-items:center;justify-content:center;z-index:5;container-type:size}
.gallery-photo{position:relative;display:flex;align-items:center;justify-content:center;margin:0;padding:5px;background:white;max-width:100%;max-height:100%}
/* Fit the photograph inside its reserved area, including its drawn frame.
   Width alone cannot bound its height on a wide, short screen. */
.gallery-photo>img{display:block;max-width:calc(100cqw - 16px);max-height:calc(100cqh - 16px);width:auto;height:auto;object-fit:contain}
.gallery-photo .photo-frame{inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px)}
.gallery-thumbnails{position:absolute;left:63%;top:29%;width:29%;height:min(44%,calc(60% - 9cqw));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:2.5cqw 2cqw;z-index:6}
.film-thumbnail{position:relative;min-width:0;min-height:0;padding:0;transform:rotate(-1.3deg)}
.film-thumbnail:nth-child(even){transform:rotate(1.2deg)}
.film-thumbnail[hidden]{display:none}
.film-frame{position:absolute;inset:0 0 1.1cqw;display:flex;align-items:center;justify-content:center;background:#111;border:2px solid #111;outline:1px solid #111;outline-offset:2px;padding:.35cqw 1cqw}
.film-frame::before,.film-frame::after{content:'';position:absolute;top:4%;bottom:4%;width:.45cqw;background:repeating-linear-gradient(to bottom,#fff 0 .6cqw,transparent .6cqw 1.2cqw)}
.film-frame::before{left:.15cqw}.film-frame::after{right:.15cqw}
.film-frame img{width:100%;height:100%;object-fit:contain}
.film-number{position:absolute;bottom:-.8cqw;left:0;right:0;color:var(--red);font:1.2cqw Elite,monospace;text-align:center}
.film-thumbnail[aria-pressed=true]::after{content:'';position:absolute;inset:-8% -9% 0;border:1.5px solid var(--red);border-radius:48% 51% 47% 52%;transform:rotate(-13deg);pointer-events:none}
.film-thumbnail[aria-pressed=true]::before{content:'';position:absolute;z-index:3;inset:-5% -7% 3%;border:1px solid var(--red);border-radius:53% 45% 51% 46%;transform:rotate(7deg);pointer-events:none}
.film-thumbnail:hover .film-frame{outline-color:var(--red);transform:rotate(-1deg)}
.gallery-film{position:absolute;left:3%;bottom:7%;width:23%;z-index:6;pointer-events:none}.gallery-film img{display:block;width:100%;height:auto}
.gallery-navigation{position:absolute;left:29%;bottom:11%;width:41%;z-index:8;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1cqw}
.gallery-navigation button{font:2.25cqw Hand,cursive;white-space:nowrap;padding:.35cqw 0}
.gallery-navigation button>span[aria-hidden]{font:2.4cqw Georgia,serif;vertical-align:middle}
.gallery-navigation output{font:1cqw Elite,monospace;white-space:nowrap}
#gallery-source{grid-column:1/-1;justify-self:center;font:1cqw Elite,monospace;text-underline-offset:4px;margin-top:.4cqw}
@media(max-width:560px){
 .masthead nav{grid-template-columns:repeat(4,1fr);gap:8px 6px;padding-top:20px}.site-name{width:auto}.nav-item{font-size:11px;min-height:30px}
 .nav-item:hover span,.nav-item:focus-visible span,.nav-item[aria-current=page] span{font-size:23px}
 .track-label{font-size:1.5cqw}.player-controls button{font-size:1.9cqw;min-height:0}.player-time{font-size:1.7cqw}.bury-cake{font-size:4.3cqw}
 .photos-title{top:185px;left:7%;font-size:15cqw}
 .gallery-main{top:265px;left:7%;width:86%;height:280px}
 .gallery-thumbnails{top:585px;left:7%;width:66%;height:190px;gap:25px 18px}
 .film-frame{bottom:15px;padding:3px 9px}.film-frame::before,.film-frame::after{width:4px;background:repeating-linear-gradient(to bottom,#fff 0 5px,transparent 5px 10px)}.film-frame::before{left:1px}.film-frame::after{right:1px}
 .film-number{font-size:11px;bottom:0}
 .gallery-film{display:none}.gallery-navigation{top:795px;bottom:auto;left:7%;width:65%;gap:8px}.gallery-navigation button{font-size:24px}.gallery-navigation button>span[aria-hidden]{font-size:25px}.gallery-navigation output,#gallery-source{font-size:11px}
}
/* Hash links must not scroll the clipped theatre in addition to its scene transform. */
.stage,.panorama{overflow:clip}

/* The theatre fills the browser; artwork retains its original proportions. */
html{overflow-x:clip;background:#fff}
body{display:block;padding:0;min-height:100dvh;background:#fff}
.stage{width:100%;max-width:none;height:100dvh;aspect-ratio:auto;border:0;contain:layout paint}
.entrance{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:50px 0 85px}
.entrance-name{position:relative;top:auto;left:auto;right:auto;font-size:min(6cqw,9dvh)}
.entrance-universe{position:relative;top:auto;left:auto;width:min(78%,72dvh);aspect-ratio:755/700;flex-shrink:0}
.language-picker{position:relative;top:auto;padding:0;flex-shrink:0}
.english-status:empty{display:none}
.bury-cake{top:65%;height:9%;display:flex;align-items:center;justify-content:center;padding:0}
.player-controls{gap:0;left:26%;top:56%;width:49%;height:5%}
.player-controls button{flex:1 1 0;min-width:0}
.player-controls svg{display:block;width:1em;height:1em;fill:currentColor}
.player-controls .pause-icon,.play[aria-pressed=true] .play-icon{display:none}
.play[aria-pressed=true] .pause-icon{display:block}
.player-time{flex:0 0 auto;white-space:nowrap;letter-spacing:-.04em}
@media(min-width:561px){
 .cake-player{width:min(24%,42dvh)}
 .sun{width:min(45%,73dvh)}
 .entrance-universe{width:min(49%,72dvh)}
}