/* Mobile layer for the whole portfolio. Loaded last on every page so it wins.
   Targets 390-430px phones first; 760px is the tablet-down boundary. */
@media (max-width:760px){
:root{--gap-section:var(--space-8);--dxl-size:clamp(38px,11.5vw,68px);--dl-size:clamp(26px,7.6vw,38px);--body-size:16px;--measure:38ch}
.site-top{padding-top:var(--space-4);gap:12px}
.site-name{font-size:15px}
.site-nav{gap:6px;flex:none}
.section{margin-top:var(--space-8)}
.cs-hero{padding-top:var(--space-6)}
.cs-meta{gap:var(--space-5) var(--space-6);margin-top:var(--space-5)}
.cs-meta div{max-width:none;flex:1 1 42%;min-width:0}
.grid-2,.grid-3{gap:16px}
.next-project,.case-close{padding-top:var(--space-8);padding-bottom:var(--space-8)}
.case-close .cc-next h2{font-size:clamp(34px,10vw,52px)}
.case-close .cc-next p{max-width:none}
.footer{padding-bottom:var(--space-6);gap:var(--space-5)}
/* Rails: one card per swipe, snapped, with a visible peek of the next */
.rail{gap:14px;scroll-padding-inline-start:0;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.rail>*{flex:0 0 auto;max-width:84vw;scroll-snap-align:start}
.rail-arrows{justify-content:center;gap:16px;margin-top:var(--space-5)}
.rail-arrow{width:48px;height:48px;font-size:19px}
/* Nothing bleeds sideways */
img,video,canvas,svg,image-slot{max-width:100%}
.media-frame{max-width:100%}
.retailer-marquee-track{gap:40px}
.retailer-logo{height:32px}
.retailer-logo.tall img{height:44px}
.catalogue-grid{padding:18px;gap:14px}
/* About: shelf, bag, hero */
.about-hero{padding-top:var(--space-7)}
.about-photo{height:min(56vh,340px)}
.glass-wrap{max-width:240px;margin-top:0}
.shelf{padding:56px 0 44px;perspective:900px;perspective-origin:44% 30%}
.shelf figure+figure{margin-left:-8px}
.book{width:clamp(96px,26vw,148px)}
.book .pages{width:20px}
.book .backcover{transform:translateZ(-20px)}
.shelf figure.is-open .book,.shelf figure.is-open:hover .book{transform:translate3d(0,-10px,52px) rotateY(-2deg)}
.shelf-note{min-height:66px;padding:0 var(--margin-page)}
.bag-stage{--bag-k:0.86;height:min(76vh,620px)}
.bag-center{width:min(44vw,168px)}
.bag-item{width:78px;min-width:0;max-width:none}
.bag-item figcaption{font-size:11px;margin-top:6px}
.movies,.life-grid{grid-template-columns:1fr 1fr;gap:14px}
/* UnlockU */
.crt{width:100%}
.cs-hero-aside{margin-top:var(--space-6)}
.stats,.stats[style]{grid-template-columns:1fr !important;gap:var(--space-6) !important}
.stats b{font-size:clamp(34px,10vw,46px)}
.ig-grid{gap:14px}
/* About: the scattered bag becomes a calm two-column grid on phones */
.bag-stage{position:static;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:34px 20px;align-items:start;justify-items:center;margin-top:var(--space-6)}
.bag-center{position:static;grid-column:1/-1;width:min(62vw,240px);transform:none;margin-bottom:var(--space-5)}
.bag-center .bag-btn{display:none}
.bag-item{position:static !important;transform:none !important;opacity:1 !important;transition:none !important;width:100% !important;max-width:150px !important;min-width:0 !important}
.bag-item figcaption{font-size:12px;margin-top:10px;line-height:1.45}
}
/* ---- Zonos: narrow screens. The fixed chapter index hides under 900px, so the
   200px right gutter it reserved has to go with it, and pinned screens must stop
   clipping their content. ---- */
@media (max-width:900px){
.pad{padding-left:clamp(20px,5.5vw,44px);padding-right:clamp(20px,5.5vw,44px)}
.pin{height:auto;min-height:100vh;overflow:visible;padding-top:96px;padding-bottom:64px}
.brief h2{font-size:clamp(32px,8.4vw,56px);max-width:none}
.brief .body-copy,.ph-copy .body-copy,.body-copy{max-width:none}
.brief-grid figure img{margin-left:0;max-height:34vh}
.vid-screen{padding:clamp(56px,9vh,90px) clamp(20px,5.5vw,44px)}
.vid-wrap{max-width:100%;margin:0 auto}
.origin-copy{font-size:clamp(28px,8vw,48px);max-width:none}
.origin-foot{max-width:none}
.divider .display{font-size:clamp(34px,9vw,58px);max-width:none}
.stmt p{font-size:clamp(26px,7.6vw,44px);max-width:none}
.spec-screen{padding:clamp(28px,5vh,48px) clamp(20px,5.5vw,44px)}
.spec-copy{max-width:none}
/* 06 menu board: two columns, wrapping labels, tap to reveal */
.board{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}
.dish .nm,.dish .fr{white-space:normal}
.dish .art{height:var(--h,min(150px,20vh))}
.dish{cursor:pointer}
/* 03 phone: stacked, device large enough to read */
.ph-grid{grid-template-columns:1fr;gap:26px;justify-items:center}
.device{height:auto;width:min(62vw,280px)}
.ph-copy{max-width:none;justify-self:stretch}
.ph-copy h2{font-size:clamp(26px,7.2vw,38px);margin-top:12px}
/* prototype: single column, photos sized for the phone */
:root{--proto-gutter:0px}
.proto-screen,.proto-screen.rev,.proto-pair{grid-template-columns:1fr;min-height:0;gap:20px;padding:clamp(56px,8vh,88px) clamp(20px,5.5vw,44px) clamp(36px,6vh,56px)}
.proto-screen.rev figure{order:1}
.proto-screen.rev figcaption{order:2}
.proto-screen figure img,.proto-pair img{max-height:none;width:100%}
.proto-screen figcaption,.proto-pair figcaption{max-width:none;line-height:1.7}
.proto-single{min-height:0;padding:clamp(56px,8vh,88px) clamp(20px,5.5vw,44px) clamp(36px,6vh,56px)}
.proto-single img{width:100%;max-height:none}
.proto-grid{grid-template-columns:1fr;gap:26px;padding:0 clamp(20px,5.5vw,44px) clamp(48px,7vh,80px)}
}
@media (max-width:430px){
:root{--gap-section:var(--space-7)}
.cs-meta div{flex:1 1 100%}
.movies,.life-grid{grid-template-columns:1fr}
.bag-stage{--bag-k:0.78}
.bag-item{max-width:132px !important}
.rail>*{max-width:88vw}
}