:root{--ink:#000;--paper:#fff;--veil:.86;--sans:'Helvetica Neue',Helvetica,Arial,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);overflow:hidden}
a{color:inherit;text-decoration:none}
.stage{position:fixed;inset:0;overflow:hidden}
.bg{position:absolute;inset:0;z-index:0}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.8s ease}
.slide.on{opacity:1}
.veil{position:absolute;inset:0;z-index:1;background:var(--paper);opacity:var(--veil,.86);transition:opacity .5s ease}
.stage.view .veil{opacity:calc(var(--veil,.86) + .06)}
.id{position:absolute;left:5vw;top:45vh;z-index:6}
.id h1{font-size:30px;font-weight:700;letter-spacing:.005em;line-height:1.15}
.id .sub{font-size:19px;font-weight:400;line-height:1.35}
.toggle{font-size:19px;margin-top:16px;padding-left:2.2em;letter-spacing:.01em}
.toggle a,.menu a{cursor:pointer}
.toggle a:hover,.menu a:hover{opacity:.55}
.navitem.active{text-decoration:underline;text-underline-offset:5px}
.menu{position:absolute;left:5vw;top:73vh;z-index:6;display:flex;flex-direction:column;gap:7px;font-size:19px}
.menu a{width:max-content}
#contactRow{display:flex;align-items:baseline}
#mailtoWrap{opacity:0;transform:translateX(-6px);transition:all .35s ease;pointer-events:none;margin-left:16px}
#mailtoWrap.on{opacity:1;transform:none;pointer-events:auto}
#mailtoWrap a{border-bottom:1px solid currentColor;padding-bottom:1px}
.panel{position:absolute;z-index:4;opacity:0;pointer-events:none;transition:opacity .3s ease}
.panel.on{opacity:1;pointer-events:auto}
#bio{inset:0}
#bio .port{position:absolute;left:19vw;top:7vh;width:19vw;max-width:290px;min-width:170px;aspect-ratio:4/5;background:#e9e9e9;border:1px solid #dcdcdc;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(12px);transition:all .55s ease;overflow:hidden}
#bio.on .port{opacity:1;transform:none}
#bio .port span{font-size:10.5px;color:#9a9a9a;text-align:center;padding:0 14px;line-height:1.9;letter-spacing:.04em;text-transform:uppercase}
#bio .port img{width:100%;height:100%;object-fit:cover}
#bio .txt{position:absolute;left:44vw;top:13vh;width:48vw;max-height:80vh;overflow:auto}
#bio .txt p{font-size:clamp(15px,1.45vw,18px);line-height:1.5;max-width:54ch;opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
#bio.on .txt p{opacity:1;transform:none}
#bio.on .txt p:nth-child(1){transition-delay:.4s}
#bio.on .txt p:nth-child(2){transition-delay:.55s}
#bio.on .txt p:nth-child(3){transition-delay:.7s}
#bio .txt p+p{margin-top:16px}
#motion{left:42vw;top:0;right:0;bottom:0;padding:9vh 5vw 6vh 0;overflow-y:auto}
.vid{display:block;margin-bottom:30px}
#motion.on .vid{animation:rise .55s both}
#motion.on .vid:nth-child(2){animation-delay:.06s}
#motion.on .vid:nth-child(3){animation-delay:.12s}
#motion.on .vid:nth-child(4){animation-delay:.18s}
.vthumb{position:relative;aspect-ratio:16/9;background:#141414;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;overflow:hidden}
.vthumb .play{color:#fff;font-size:18px;opacity:.85;z-index:2;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.vthumb .vt{position:absolute;left:14px;bottom:12px;color:#fff;font-size:13px;font-weight:500;max-width:82%;line-height:1.2;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.vmeta{display:flex;justify-content:space-between;font-size:10.5px;color:#666;margin-top:8px;text-transform:uppercase;letter-spacing:.07em}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
#stills{left:37vw;top:0;right:0;bottom:0;padding:8vh 4vw 5vh 0;overflow-y:auto}
#stills .brick{columns:3;column-gap:14px}
#stills figure{break-inside:avoid;margin-bottom:14px;background:#ededed}
#stills.on figure{animation:fadein .6s both}
#stills img{width:100%;display:block}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ---------- MOBILE / narrow (≤ 862px) ---------- */
@media(max-width:862px){
 html,body{height:auto}
 body{overflow-y:auto;overflow-x:hidden}
 .stage{position:relative;min-height:100vh;overflow:visible}
 .bg,.veil{position:fixed}
 /* keep position (so z-index still works) — this is what was broken */
 .id{position:relative;z-index:6;left:auto;top:auto;padding:13vh 8vw 0}
 .id h1{font-size:34px}
 .id .sub{font-size:17px}
 .toggle{font-size:18px;padding-left:0;margin-top:20px}
 .toggle a{padding:2px 0}
 .menu{position:relative;z-index:6;left:auto;top:auto;padding:26px 8vw 9vh;font-size:19px;gap:14px}
 #contactRow{flex-wrap:wrap}
 #mailtoWrap{margin-left:0;margin-top:4px;font-size:15px;flex-basis:100%}
 .panel{position:relative;z-index:5;inset:auto;left:auto;right:auto;top:auto;bottom:auto;opacity:1;pointer-events:auto;transition:none;background:var(--paper);min-height:70vh}
 .panel:not(.on){display:none}
 #motion,#stills{padding:7vw;max-height:none;overflow:visible}
 #bio{padding:7vw}
 #bio .port,#bio .txt{position:static;inset:auto;left:auto;right:auto;top:auto;bottom:auto;width:auto;max-height:none;overflow:visible}
 #bio .port{width:62vw;max-width:260px;margin:0 auto 3vh;transform:none;opacity:1}
 #bio .txt{margin-top:1vh}
 #bio .txt p{opacity:1;transform:none;max-width:none;font-size:16px}
 #stills .brick{columns:2}
 #motion .vid{animation:none;margin-bottom:24px}
}
@media(max-width:460px){
 #stills .brick{columns:1}
 .id h1{font-size:30px}
}