/* Approved mobile layout. Hand is the supplied DK Abysmal Gaze font. */
.menu-toggle{display:none}
.mobile-flow{display:contents}
@media(max-width:560px){
 body{padding:0;background:#fff}
 .stage{height:var(--mobile-height,100dvh);min-height:100dvh;width:100%;max-width:none;aspect-ratio:auto}
 .masthead{inset:25px 0 auto;height:60px;display:flex;justify-content:space-between;align-items:flex-start;padding:0 6%;gap:10px;background:none;z-index:80}
 .site-name{font-size:7.8cqw;line-height:1.15;width:auto;padding-top:7px}
 .menu-toggle{display:flex;align-items:center;justify-content:center;gap:3px;min-width:64px;min-height:46px;padding:0;position:relative;z-index:2}
 .menu-toggle-label{font:22px/1 Hand,cursive}
 .menu-toggle svg{width:32px;height:34px;stroke-width:1.7}
 .menu-stroke{transform-origin:center;transition:transform .2s,opacity .15s}
 .menu-open .menu-stroke.top{transform:translateY(10px) rotate(42deg)}
 .menu-open .menu-stroke.middle{opacity:0}
 .menu-open .menu-stroke.bottom{transform:translateY(-10px) rotate(-42deg)}
 .menu-open .menu-toggle{color:var(--red)}
 .masthead nav{position:absolute;top:58px;left:5%;right:5%;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding:20px 16px;background:#fff;border:1px solid #111;box-shadow:2px 3px 0 #111;visibility:hidden;opacity:0;transform:translateY(-5px) rotate(-.5deg);transition:opacity .15s,transform .15s,visibility .15s}
 .masthead nav::before{content:'';position:absolute;inset:3px -3px -4px 2px;border:1px solid #111;transform:rotate(.65deg);pointer-events:none}
 .menu-open nav{visibility:visible;opacity:1;transform:translateY(0) rotate(-.5deg)}
 .masthead .nav-item{min-height:46px;font-size:14px;text-align:left;padding:4px 6px;white-space:normal}
 .masthead .nav-item[aria-current=page]::after{left:6px;right:20%;bottom:3px;background:var(--red)}
 .masthead .nav-item:hover span,.masthead .nav-item:focus-visible span,.masthead .nav-item[aria-current=page] span{font-family:Hand,cursive;font-size:27px}

 .mobile-flow{display:flex;flex-direction:column;position:relative;padding:92px 7% 80px;width:100%;box-sizing:border-box}
 .home-scene .sun{position:relative;order:0;top:auto;bottom:auto;left:auto;right:auto;width:min(86%,36dvh);max-width:300px;aspect-ratio:auto;margin:0 auto 16px;transform:none}
 .home-writing{position:relative;order:1;top:auto;left:auto;width:100%;margin:0}
 .home-writing .scene-title{font-size:12cqw;margin:0 0 14px;line-height:1.1}
 .home-writing h3{font-size:18px}
 #home-posts{max-height:none;overflow:visible;font-size:15px;padding:0}
 .home-writing .empty-writing{font-size:15px}
 .home-writing .soon-writing{margin-top:12px}
 .home-writing .ink-rule{margin:10px 0 17px}
 .home-scene .mobile-flow{padding-bottom:80px}

 .about-photo{position:relative;top:auto;left:auto;width:100%;margin:0 0 24px}
 .about-photo figcaption{font-size:10px;line-height:1.6;margin-top:10px}
 .about-copy{position:relative;top:auto;left:auto;width:100%;height:auto;display:block}
 .about-copy .scene-title{font-size:12cqw;margin:0 0 22px;line-height:1.1}
 .about-bio{height:auto;max-height:none;overflow:visible;overscroll-behavior:auto;padding:0;font-size:15px;line-height:1.75}
 .about-bio p+p{margin-top:1em}
 .about-scene .mobile-flow{padding-bottom:150px}
 .stage[data-page=about] .cake-player{width:40%}

 .blog-scene .mobile-flow{padding:110px 7% 0;min-height:100dvh}
 .blog-title{position:relative;order:0;top:auto;left:auto;max-width:100%;font-size:13cqw;margin:0 0 22px}
 .blog-writing{position:relative;order:1;top:auto;left:auto;bottom:auto;width:100%;max-height:none;overflow:visible;font-size:15px;padding:0;min-height:36px;margin-bottom:18px}
 .galaxy-art{position:relative;order:2;left:-60%;bottom:auto;width:220%;margin-top:auto;margin-bottom:-22px;transform:none;-webkit-mask-image:url('assets/galaxy-edge-mask.svg');mask-image:url('assets/galaxy-edge-mask.svg');-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
 .galaxy-art img{width:100%;height:auto}

 .cake-player{width:43%;max-width:210px;right:-2%;bottom:-1.5%;z-index:40}
 .track-label{font-size:clamp(7px,1.8cqw,10px)}
 .player-controls{height:5%;top:56.5%;left:26%;width:49%}
 .player-controls button{position:relative;min-width:0;min-height:24px;height:100%;font-size:11px}
 .player-controls button::before{content:'';position:absolute;inset:-5px -2px}
 .player-time{font-size:9px}
 .bury-cake{top:65%;font-size:4.7cqw;min-height:0}
 .floor{width:230%;left:-65%;bottom:-2px;height:auto;aspect-ratio:1581/123;z-index:70}
 .bottom-mail{right:4%;bottom:15px;z-index:75;gap:5px}
 .bottom-mail>span:first-child{display:none}
 .mail-strip{font-size:10px;padding:4px 5px}
 .restore-cake{bottom:62px;right:5%;width:17%;z-index:76}
 .cake-buried .cake-player{transform:translate(25%,110%) rotate(8deg)}

 .contact-copy{top:120px}
 .newsletter{top:225px;width:72%;padding:12px}
 .photos-title{top:100px}
 .gallery-main{top:28%;height:28%}
 .gallery-thumbnails{top:58%;height:19%;width:61%}
 .gallery-navigation{top:81%;width:58%}
 .youtube-title{top:120px}
 .youtube-tv{top:32%;bottom:auto;width:104%;left:-2%}
 .labs-copy{top:190px}
 .post-reader{max-width:calc(100vw - 30px);width:calc(100vw - 30px)}
}
@media(prefers-reduced-motion:reduce){.menu-stroke,.masthead nav{transition:none}}

@media(max-width:560px){
 .entrance{gap:22px;padding:60px 0 90px}
 .entrance-name{top:auto;font-size:9cqw}
 .entrance-universe{top:auto;left:auto;width:min(88%,70dvh)}
 .language-picker{top:auto}
 .home-writing .scene-title{margin-bottom:9px}
 .home-writing .soon-writing{font-size:13px}
 .home-scene .sun{margin-bottom:12px}
 .player-controls svg{width:11px;height:11px}
 .player-time{font-size:8px}
 .newsletter{top:31%}
 .contact-copy{top:16%}
}