/* Phone layout and low-cost rendering. Desktop composition is retained. */
.theme-cycle{display:none}
body{overflow-x:clip}
.tab-hidden *,.tab-hidden *:before,.tab-hidden *:after{animation-play-state:paused!important}
@media(hover:none) and (pointer:coarse){html{scroll-snap-type:none!important}.chapter{scroll-snap-align:none}}
@media(max-width:767px), (max-width:950px) and (max-height:500px){
 :root{--mobile-header:calc(72px + env(safe-area-inset-top,0px));--mobile-dock:calc(120px + env(safe-area-inset-bottom,0px))}
 html{scroll-padding-top:var(--mobile-header);scroll-padding-bottom:var(--mobile-dock);scroll-snap-type:none}
 .scenery{position:fixed;inset:0;width:100%;height:100lvh;transform:translateZ(0)}
 .scene-still{background-image:var(--scene-url,url('../assets/images/morning-small.webp?v=7'))}
 .site-shell{padding-top:calc(8px + env(safe-area-inset-top,0px))}
 .topbar{position:sticky;top:calc(8px + env(safe-area-inset-top,0px));left:auto;right:auto;margin:0 12px;height:56px;padding:0 12px;width:auto;border-radius:16px;z-index:30}
 .brand{font-size:25px}.brand-dot{font-size:28px}.top-caption,.top-right>.live-dot,.top-right>.micro{display:none}
 .top-right{gap:4px;font-size:11px}.top-right .icon-button{width:44px;height:44px;min-width:44px;margin:0;font-size:20px}
 .theme-cycle{display:inline-grid;position:relative}
 .theme-cycle[data-auto=true]:after{content:"A";position:absolute;right:4px;bottom:1px;font:8px Arial,sans-serif;color:var(--nav-muted)}
 .bottom-controls{display:none}
 body{font-size:16px}
 .chapter{min-height:100svh;scroll-snap-align:none;padding:36px 20px var(--mobile-dock);scroll-margin-top:0;align-items:flex-start}
 .intro{min-height:100svh;padding-top:34px;overflow:visible}
 .intro-layout{display:block;margin:0;width:100%}
 .hero-copy{max-width:100%;width:100%}
 .intro:before,:root[data-theme=evening] .intro:before,:root[data-theme=night] .intro:before{background:linear-gradient(90deg,color-mix(in srgb,var(--loader-bg) 76%,transparent),color-mix(in srgb,var(--loader-bg) 52%,transparent) 75%,transparent);mask-image:linear-gradient(#000 85%,transparent);-webkit-mask-image:linear-gradient(#000 85%,transparent)}
 .hero-copy h1{font-size:clamp(2.5rem,11vw,3.5rem);line-height:1.06;letter-spacing:-.045em}
 .hero-copy .hello{font-size:16px;margin:20px 0 16px}
 .hero-copy .hero-description{font-size:16px;line-height:1.7;margin-top:24px}
 .hero-copy .hero-actions{display:flex;gap:12px;margin-top:24px;align-items:stretch}
 .hero-copy .hero-actions .button{min-height:48px;padding:12px 16px;font-size:16px;flex:1;gap:12px}
 .hero-copy .hero-foot{font-size:10px;line-height:1.6;flex-wrap:wrap;gap:8px;margin-top:20px}
 .about-grid,.about-side,.project-grid,.notes-grid{grid-template-columns:minmax(0,1fr)}
 .about-story p,.focus-card p,.featured-note>p,.project-body p,.note-content,.split>p,.connect-panel>p:not(.eyebrow),dialog>p:not(.eyebrow){font-size:16px;line-height:1.7}
 .project-link,.section-end-link,.social-links,.email-line,.section-heading .button{font-size:16px}
 .email-line{overflow-wrap:anywhere;word-break:break-word}.email-line a{max-width:100%}
 .social-links a,.button,.text-button,.project-link{min-height:44px}
 .section-heading{max-width:100%;padding:22px}.section-heading h2{font-size:clamp(32px,8vw,42px)}
 .project-card{display:block}.project-art{height:200px;min-height:0}.project-body{padding:18px 22px 24px}
 .chapter-footer{display:none}.connect-panel{padding:28px 22px}.connect-panel h2{font-size:clamp(38px,10vw,52px)}
 .arc-dock{--radius:280px;--band:56px;--cx:50%;--cy:314px;--base:-90deg;width:min(100%,430px);height:96px;top:auto;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);transform:translateX(-50%)}
 .dock-orbit{width:100%;touch-action:pan-y}
 .arc-dock a{width:48px;height:48px;margin:-24px;touch-action:pan-y;transform:rotate(calc(var(--base) + var(--angle))) translateX(calc(var(--radius) + 8px)) rotate(calc(-1 * (var(--base) + var(--angle))))}
 .arc-dock a:before{inset:2px}.arc-dock a svg{width:20px;height:20px}
 .dock-label{left:50%;top:50px;transform:translateX(-50%);font-size:11px;line-height:14px;max-width:110px;overflow:hidden;text-overflow:ellipsis}
 .dock-count{font-size:10px;right:12px;left:auto;bottom:1px}
 .toast{bottom:var(--mobile-dock);left:16px;right:16px}
 button,a,summary{scroll-margin-block:var(--mobile-header) var(--mobile-dock)}
 /* Only the header and masked band blur. The active ball uses its glass fill. */
 *,*:before,*:after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transition-property:transform,opacity!important}
 .topbar,.dock-band{backdrop-filter:blur(11px) saturate(150%)!important;-webkit-backdrop-filter:blur(11px) saturate(150%)!important}
 .glass:not(.topbar),.section-heading,.project-card,.note{background:color-mix(in srgb,var(--loader-bg) 82%,transparent)}
 .load-track span{transition:none!important}
}
@media(max-width:419px){.hero-copy .hero-actions{flex-direction:column}.hero-copy .hero-actions .button{width:100%}}
@media(max-width:399px){.dock-count{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation:none!important;transition:none!important}}
html:not(.js) .theme-cycle{display:none}