/* Mobile content and instrument share document coordinates. The footer follows
   the complete dial; browser chrome changes cannot separate it from the copy. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}
.catalog-loading .section-heading .index,.catalog-loading .work-filters{visibility:hidden}
.loading-status{font-size:13px;color:var(--muted);padding:24px 0}
@media(max-width:800px){
 html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:auto}
 body:not(.browsing){position:relative;min-height:max(100svh,var(--landing-height))}
 header,body:not(.browsing) header{height:calc(118px + var(--safe-top));padding-top:calc(25px + var(--safe-top));padding-left:max(23px,var(--safe-left));padding-right:max(23px,var(--safe-right))}
 .brand-meta{top:calc(78px + var(--safe-top));left:max(23px,var(--safe-left))}
 body:not(.browsing) .landing-copy{position:relative;top:auto;left:auto;width:auto;margin:22px max(24px,var(--safe-right)) 0 max(24px,var(--safe-left));transform:none}
 body:not(.browsing) .landing-copy h1{margin:17px 0 20px}
 body:not(.browsing) .landing-copy p{margin:14px 0 0}
 body:not(.browsing) #navigator{position:absolute;top:0;bottom:auto;height:var(--landing-height)}
 body:not(.browsing) footer{position:absolute;top:var(--mobile-footer-top);bottom:auto;padding:18px max(24px,var(--safe-right)) calc(22px + var(--safe-bottom)) max(24px,var(--safe-left));gap:14px;flex-wrap:wrap}
 /* Keep the full image swing clear of the rail and its focus ring. */
 .project-card .image{width:calc(100% - 12px);margin-inline:auto}
 .card-caption h2{overflow:visible;display:block;-webkit-line-clamp:unset;overflow-wrap:normal}
 .card-caption{min-height:0;padding:12px 4px 0}
 .project-list{row-gap:30px}
 .browsing #content{margin-bottom:32px}
 .browsing footer{padding-bottom:calc(24px + var(--safe-bottom))}
 .drawer-open.rail-scrolls #navigator{top:max(12px,var(--safe-top));bottom:calc(12px + var(--safe-bottom))}
 #project-drawer,.drawer-scrim{top:max(12px,var(--safe-top));bottom:calc(8px + var(--safe-bottom))}
 #project-drawer{left:calc(var(--rail-x) + var(--rail-width) + 10px);right:max(8px,var(--safe-right));max-height:calc(min(100dvh,var(--visual-height,100dvh)) - 24px - var(--safe-top) - var(--safe-bottom))}
 .drawer-scrim{left:calc(var(--rail-x) + var(--rail-width) + 4px)}
 .drawer-toolbar{padding:8px 10px;gap:6px}
 .drawer-close{min-height:44px;min-width:65px;padding:6px 8px}
 .drawer-context{font-size:7px}
 .drawer-scroll{padding:16px 13px 24px}
 #project-drawer .detail-title{font-size:clamp(22px,6.5vw,28px);overflow-wrap:break-word}
 #project-drawer .project-info p{font-size:13px}
}
@media(max-width:359px){
 .wordmark{font-size:17px}.header-right{gap:8px;font-size:8px}.beta{font-size:6px}
 .brand-meta{gap:14px}.brand-meta>span{font-size:6px}.all-work-link{font-size:10px}
 .drawer-context{display:none}.drawer-toolbar{justify-content:flex-end}
}
@media(max-height:500px){
 .drawer-open.rail-scrolls #navigator{top:max(12px,var(--safe-top));bottom:calc(12px + var(--safe-bottom))}
 #project-drawer,.drawer-scrim{top:max(12px,var(--safe-top));bottom:calc(8px + var(--safe-bottom))}
}