/* ===== responsive layer for phones and tablets (shared by every page) ===== */
html{-webkit-text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* menu panel never grows taller than the screen: it scrolls inside itself instead */
.list{height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.list::-webkit-scrollbar{display:none}
.sheet{padding:16px;overflow:auto}
.sheet .box{max-height:calc(var(--vh)*100 - 32px);overflow:auto}
/* comfortable tap target for the small arrow */
.arrow{position:relative}.arrow::before{content:"";position:absolute;inset:-14px}


/* contact: the character is shown whole (feet included) on every screen */
body[data-page=contact]{--ih:calc(var(--vh)*96)}
body[data-page=contact] .stage img,body[data-page=contact] .stage video{top:auto;bottom:0;left:50%;width:calc(var(--ih)*1248/704);height:var(--ih);aspect-ratio:auto;transform:translateX(-50%);transform-origin:50% 100%}
body[data-page=contact] .hero{top:calc((12px + (var(--vh)*100 - .78*var(--ih)))/2);transform:translateY(-50%)}

/* ---------- tablets ---------- */
@media (max-width:900px){
 body .nav{right:24px}
}

/* ---------- phones ---------- */
@media (max-width:700px){
 body .nav{right:14px;top:calc(14px + env(safe-area-inset-top,0px))}
 body .brand{left:16px;top:calc(16px + env(safe-area-inset-top,0px));max-width:calc(100vw - 110px)}
 body .brand .t,body .brand a{font-size:20px;margin-bottom:8px}
 body .brand span:not(.t){font-size:12.5px}
 body .card{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));max-width:none;padding:12px 14px 14px;border-radius:18px}
 body .card h1{font-size:20px}
 body .card p{font-size:13px;margin:4px 0 10px}
 body .links a{font-size:12.5px;padding:6px 12px}
 body .sheet .box h2{font-size:20px;padding-right:50px}
 body .sheet .box{--p:22px;border-radius:24px}
 body .box h2{font-size:23px}
 body .box p{font-size:15.5px}
 body .copy{left:16px;bottom:calc(14px + env(safe-area-inset-bottom,0px));font-size:12px}
}

/* ---------- portrait screens: keep the character big and centred, give the card room ---------- */
@media (orientation:portrait){
 body[data-page=home] .stage{top:calc(var(--vh)*-7);transform:translateX(-50%);width:calc(var(--vh)*112*1248/704)}
 body[data-page=home] .hi{--d:clamp(84px,26vw,130px)}
 /* contact: character stands lower, the heading sits between the brand and his head */
 body[data-page=contact]{--ih:calc(var(--vh)*70)}
 body[data-page=contact] .stage img,body[data-page=contact] .stage video{top:auto;bottom:calc(var(--vh)*6);width:calc(var(--ih)*1248/704);height:var(--ih);aspect-ratio:auto;transform:translateX(-50%) scale(1.05);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 96%,transparent 100%),linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 96%,transparent 100%),linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%);mask-composite:intersect;}
 body[data-page=contact] .hero{top:calc((clamp(100px,16*var(--vh),160px) + (var(--vh)*94 - .78*var(--ih)))/2);transform:translateY(-50%);padding:0 18px}
 body[data-page=contact] .hero h1{font-size:clamp(30px,8vw,62px)}
 body[data-page=contact] .hero p{font-size:clamp(15px,3.4vw,24px);max-width:30em;margin-left:auto;margin-right:auto}
}

/* ---------- low landscape screens (phones turned sideways) ---------- */
@media (orientation:landscape) and (max-height:600px){
 body .brand span:not(.t){display:none}
 body .brand .t,body .brand a{font-size:18px;margin-bottom:0}
 body .card{max-width:270px;padding:10px 12px 12px;border-radius:16px;left:16px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
 body .card h1{font-size:18px}
 body .card p{font-size:12px;margin:3px 0 8px}
 body .links a{font-size:12px;padding:5px 11px}
 body .hi{--d:clamp(78px,22*var(--vh),110px)}
 body .list{padding:16px 20px 25px 40px}
 body .list button{padding:4px 0}
 body .list .grp{margin:6px 0 0}
 body .list .lg-btn{margin-top:10px}
 body[data-page=contact]{--ih:calc(var(--vh)*86)}
 body[data-page=contact] .stage img,body[data-page=contact] .stage video{top:auto;bottom:0;width:calc(var(--ih)*1248/704);height:var(--ih);aspect-ratio:auto;transform:translateX(-50%) scale(1.05);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 96%,transparent 100%),linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 96%,transparent 100%),linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%);mask-composite:intersect;}
 body[data-page=contact] .hero{top:calc((12px + (var(--vh)*100 - .78*var(--ih)))/2);transform:translateY(-50%);padding:0 clamp(150px,24vw,220px)}
 body[data-page=contact] .hero h1{font-size:clamp(24px,6.4*var(--vh),40px)}
 body[data-page=contact] .hero p{font-size:clamp(12.5px,3.2*var(--vh),18px);margin-top:4px}
}

/* ===== Android hardening: fixed layers follow the real visible height (address bar / gesture bar) ===== */
html,body{height:calc(var(--vh,1vh)*100);max-height:calc(var(--vh,1vh)*100);overscroll-behavior:none}
.nav,.brand,.card,.side,.copy,.sheet,.loader,.wipe{max-width:100vw}
.sheet{height:calc(var(--vh,1vh)*100);inset:0 0 auto 0}
.wipe,.loader{height:calc(var(--vh,1vh)*100);inset:0 0 auto 0}
img{-webkit-user-drag:none;user-select:none}
button,a{-webkit-tap-highlight-color:transparent}
.nav{will-change:width,height}
@media (max-width:700px){
 body .card{bottom:calc(12px + env(safe-area-inset-bottom,0px));max-height:calc(var(--vh,1vh)*40);overflow:auto}
 body .nav{max-width:calc(100vw - 28px)}
 body .nav.open{width:min(212px,calc(100vw - 28px))}
 body .list{width:100%;padding-right:16px}
}

/* Android Chrome widens (and zooms out) the layout viewport when anything overflows: clip everything to the screen */
html{overflow:hidden;width:100%;position:fixed;inset:0}
body{position:fixed;left:0;top:0;width:100%;overflow:hidden;contain:paint}

/* contact: the animation is stretched over the whole screen. Its edges melt into a matching background, so no rectangle is visible */
body[data-page=contact] .stage img,body[data-page=contact] .stage video{transform:translateX(-50%) scale(1.06);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 97%,transparent 100%),linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 97%,transparent 100%),linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);mask-composite:intersect}