/* Shared public-site sizing: touch layouts keep the same visible navigation. */
:root{--gallery-columns:5;--related-columns:6;--gallery-gap:24px;--header-height:78px}
@media(min-width:1700px){:root{--gallery-columns:6}}
@media(max-width:1150px){
 :root{--gallery-columns:4;--related-columns:4;--gallery-gap:20px}
 .site-header{gap:20px;min-height:78px}
 .header-left{gap:20px}
 .site-header nav{gap:20px}
 .search{width:180px;min-height:44px}
 .search input{font-size:16px}
 .instagram{width:44px;height:44px;flex-shrink:0}
 .header-right{gap:12px}
 .brand,.brand:is(:hover,:focus-visible){width:44px;height:44px;background:none}
 .brand::after{display:none}
 .logo-alien{left:10px;top:6px}
 .brand:is(:hover,:focus-visible) .logo-alien{opacity:1}
 .brand:is(:hover,:focus-visible) .logo-wordmark{width:0;opacity:0}
 .site-header nav>a{display:flex;align-items:center;min-height:44px}
 body>main:not(.detail-page):not(.about-page){padding:12px 20px 24px}
 .detail-layout{grid-template-columns:minmax(0,1fr) 320px;min-height:calc(100svh - 160px)}
 .detail-stage{padding:72px 32px 40px}
 .detail-info{padding:40px 28px 28px}
 .detail-back{width:44px;height:44px;top:16px;left:20px}
 .detail-share>*,.detail-share .like-button{min-height:44px}
 .share-options>*{min-height:44px}
 .more-section{padding:28px 20px 72px}
 #back-to-top{min-height:44px;right:20px;bottom:calc(20px + env(safe-area-inset-bottom))}
}
@media(max-width:950px){
 :root{--gallery-columns:3;--related-columns:3;--gallery-gap:18px;--header-height:108px}
 .site-header{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:52px 48px;column-gap:20px;row-gap:0;padding:8px 20px 0;min-height:108px}
 .header-left{display:contents}
 .brand{grid-column:1;grid-row:1}
 .header-right{position:static;grid-column:2;grid-row:1;width:auto;justify-content:flex-end;gap:12px}
 .search{width:clamp(160px,32vw,260px);padding:10px 14px}
 .site-header nav{grid-column:1/-1;grid-row:2;justify-content:space-between;width:100%;gap:12px;margin:0}
 .site-header nav>a{justify-content:center;font-size:16px;padding:0 6px;min-width:44px}
 .detail-layout{display:block;min-height:0}
 .detail-stage{padding:72px 32px 32px}
 #detail-media img,#detail-media video{max-height:60svh;max-width:100%;object-fit:contain}
 .detail-info{border-left:0;border-top:1px solid #ececea;padding:28px 32px 32px}
 .detail-info h1{font-size:28px;margin:12px 0 18px}
 .detail-info>p{max-width:65ch;font-size:16px;line-height:1.6;color:#686863}
 #detail-facts{font-size:13px;line-height:1.5;gap:6px 14px;margin-bottom:24px}
 .detail-actions{margin-top:0}
 .share-status:empty{display:none}
 .about-layout{display:block;min-height:0}
 .about-stage{min-height:0;height:clamp(300px,56vw,480px)}
 .about-stage img{object-position:center}
 .about-info{border:0;padding:36px max(32px,calc((100vw - 680px)/2)) 52px}
 .about-info h1{margin-bottom:24px}
 .about-bio{font-size:16px;line-height:1.7;color:#686863}
 .about-bio p{margin-bottom:24px}
}
@media(max-width:600px){
 :root{--gallery-columns:2;--related-columns:2;--gallery-gap:12px}
 .site-header{padding:8px 16px 0;column-gap:12px}
 .header-right{gap:6px}
 .search{width:clamp(160px,48vw,210px);min-height:44px;padding:10px 12px}
 .search input{font-size:16px}
 .site-header nav{gap:0}
 .site-header nav>a{font-size:15px;padding:0 5px}
 body>main:not(.detail-page):not(.about-page){padding:12px 12px 24px}
 .detail-stage{padding:66px 16px 24px}
 #detail-media img,#detail-media video{max-height:58svh}
 .detail-back{left:16px;top:12px}
 .detail-info{padding:24px 20px 28px}
 .detail-info h1{font-size:26px}
 .detail-info>p{font-size:15px}
 .detail-kicker{font-size:12px}
 .more-section{padding:24px 12px 80px}
 .more-section h2{margin-bottom:20px}
 #back-to-top{right:12px;bottom:calc(12px + env(safe-area-inset-bottom));padding:11px 15px;font-size:13px;gap:7px}
 .about-stage{height:clamp(240px,80vw,400px)}
 .about-info{padding:28px 20px 40px}
 .about-bio{font-size:16px;line-height:1.65}
}
/* A touchscreen has no hover; the alien remains a stable home link. */
@media(hover:none),(pointer:coarse){
 .brand,.brand:is(:hover,:focus-visible){width:44px;height:44px;background:none}
 .brand::after{display:none}
 .logo-alien{left:10px;top:6px}
 .brand:is(:hover,:focus-visible) .logo-alien{opacity:1}
 .brand:is(:hover,:focus-visible) .logo-wordmark{width:0;opacity:0}
 .video-preview::after{content:'';position:absolute;right:8px;bottom:8px;width:24px;height:24px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 6 9 6-9 6Z' fill='%23151515'/%3E%3C/svg%3E") center/16px no-repeat;z-index:2;pointer-events:none}
}
@media(max-height:500px) and (max-width:950px){
 #detail-media img,#detail-media video{max-height:75svh}
}
/* Preserve the complete About artwork on smaller screens. */
@media(max-width:950px){
 .about-stage{height:auto;min-height:0}
 .about-stage img{position:static;width:100%;height:auto;max-height:52svh;object-fit:contain}
}

@media(hover:none),(pointer:coarse){
 .site-header nav>a{min-height:44px;display:flex;align-items:center}
 .instagram{width:44px;height:44px}
 .search input{font-size:16px}
 .detail-back{width:44px;height:44px}
 .detail-share>*,.detail-share .like-button,.share-options>*{min-height:44px}
}

/* Static compact signature and two-row navigation on phones and tablets. */
.compact-wordmark,.header-alien{display:none}
/* Instagram lives beside Shop in the document; retain its desktop position. */
.site-header nav .instagram{position:absolute;right:24px;top:23px}
.header-right{padding-right:52px}
@media(max-width:1150px), (hover:none) and (pointer:coarse){
 :root{--header-height:108px}
 .site-header{display:grid;grid-template-columns:175px minmax(0,1fr) 44px;grid-template-rows:52px 48px;gap:0 20px;min-height:108px;padding:8px 20px 0}
 .header-left,.header-right{display:contents}
 .brand,.brand:is(:hover,:focus-visible){grid-column:1;grid-row:1;width:175px;height:44px;transition:none}
 .brand>.logo-alien,.brand>.logo-wordmark{display:none}
 .compact-wordmark{display:flex;align-items:flex-end;gap:5px;position:absolute;left:0;top:50%;transform:translateY(-50%);height:24px}
 .compact-wordmark>span{display:block;position:relative;overflow:hidden}
 .compact-name{width:132px;height:24px}
 .compact-name img{position:absolute;width:222px;max-width:none;height:auto;left:-9.5px;top:-11.7px}
 .compact-studio{width:38px;height:13px;margin-bottom:1px}
 .compact-studio img{position:absolute;width:120px;max-width:none;height:auto;left:-77.4px;top:-7.7px}
 .header-alien{position:relative;display:block;grid-column:3;grid-row:1;width:44px;height:44px;mix-blend-mode:multiply}
 .header-alien .logo-alien{left:10px;top:6px;opacity:1}
 .site-header .search{grid-column:2;grid-row:1;width:100%;max-width:440px;min-width:0;justify-self:center;min-height:44px;padding:10px 14px}
 .site-header nav{grid-column:1/-1;grid-row:2;display:flex;width:100%;gap:clamp(12px,3vw,28px);justify-content:flex-start;margin:0}
 .site-header nav>a{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;font-size:16px;padding:0 4px}
 .site-header nav .instagram{position:static;width:44px;height:44px;flex:0 0 44px;padding:10px;margin:0}
 .site-header nav .instagram svg{width:20px;height:20px}
}
@media(max-width:600px){
 .site-header{grid-template-columns:128px minmax(0,1fr) 36px;column-gap:10px;padding:8px 16px 0}
 .brand,.brand:is(:hover,:focus-visible){width:128px}
 .compact-wordmark{gap:3px;height:18px}
 .compact-name{width:96px;height:18px}
 .compact-name img{width:162px;left:-7px;top:-8.5px}
 .compact-studio{width:29px;height:10px;margin-bottom:1px}
 .compact-studio img{width:90px;left:-58px;top:-5.8px}
 .header-alien{width:36px}
 .header-alien .logo-alien{left:6px}
 .site-header .search{padding:10px;gap:7px;min-height:44px}
 .site-header .search svg{width:15px;height:15px}
 .site-header nav{gap:0;justify-content:space-between}
 .site-header nav>a{font-size:15px;padding:0 2px;min-width:40px}
 .site-header nav .instagram{width:36px;flex-basis:36px;padding:8px}
}
@media(max-width:360px){
 .site-header{padding-left:12px;padding-right:12px;grid-template-columns:118px minmax(0,1fr) 32px;column-gap:7px}
 .brand,.brand:is(:hover,:focus-visible){width:118px}
 .compact-wordmark{transform:translateY(-50%) scale(.92);transform-origin:left center}
 .header-alien{width:32px}.header-alien .logo-alien{left:4px}
 .site-header nav>a{font-size:14px;min-width:38px;padding:0 1px}
}
@media(min-width:1151px) and (pointer:coarse){
 .site-header nav .instagram{top:17px}.header-right{padding-right:68px}
}