/* ========================================================================
   ZAZA v45 — responsive production hardening
   Final non-destructive responsive layer. Desktop composition is preserved;
   this file only normalizes viewport safety, small/short screens, touch input,
   overflow, and edge cases that are hard to solve with width-only breakpoints.
   ======================================================================== */

:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --app-vh:100dvh;
  --dock-clearance:96px;
}
@supports not (height:100dvh){:root{--app-vh:calc(var(--vh,1vh)*100)}}

html,body{width:100%;max-width:100%;overflow-x:clip}
body{min-width:0}
main,section,article,header,footer,nav,div,figure{min-width:0}
img,video,canvas,iframe,svg{max-width:100%}
img,video{height:auto}
input,textarea,select,button{max-width:100%;min-width:0}
p,li,label,input,textarea,.contact-email>span{overflow-wrap:anywhere}

.site-header{
  padding-left:max(var(--pad),var(--safe-left));
  padding-right:max(var(--pad),var(--safe-right));
  top:var(--safe-top);
}
.site-dock-shell{bottom:max(12px,var(--safe-bottom))}
.menu-overlay__top{padding-left:var(--safe-left);padding-right:var(--safe-right)}

/* The fixed dock must never cover a form while the mobile keyboard is open. */
body.is-keyboard-open .site-dock-shell,
body.is-keyboard-open .site-header{opacity:0!important;pointer-events:none!important;transform:translate3d(-50%,12px,0)!important}
body.is-keyboard-open .site-header{transform:translate3d(0,-10px,0)!important}

/* Capability / trailer internals were the source of a few-pixel document width
   leak on 320–390px. Keep the artwork clipped by the scene, not the document. */
.trailers,.project-trailer,.trailer-copy,.trailer-meta,.trailer-visual,
.capability-story,.capability-demo,.responsive-story,.browser-story,.system-reel,
.post-footer-story,.pf-contact,.pf-row{max-width:100%}

@media(max-width:1100px){
  :root{--dock-clearance:102px}

  /* Make viewport-sized stages use the measured/dynamic viewport. */
  .entry-scene,.browser-story,.break-site,.landing-exit,.site-footer,
  .page-hero,.case-hero,.contact-v40-hero__sticky,.contact-bridge__sticky,
  .work-open-v38__sticky,.feature-v38__sticky,.interlude-v38__sticky,
  .other-bridge-v38__sticky{min-height:var(--app-vh)}

  .page-loader__line{bottom:max(7vh,calc(var(--safe-bottom) + 24px))}

  /* Preserve the fixed dock, but reserve its visual footprint in first-screen
     metadata so labels do not sit behind it. */
  .case-hero{padding-bottom:max(118px,calc(var(--safe-bottom) + 100px))}
  .contact-v40-hero__sticky{padding-bottom:max(118px,calc(var(--safe-bottom) + 100px))}
  .work-open-v38__hint{bottom:max(104px,calc(var(--safe-bottom) + 92px))!important}
  .hero-ui--bottom{bottom:max(94px,calc(var(--safe-bottom) + 82px))!important}
  .skip-intro{bottom:max(118px,calc(var(--safe-bottom) + 106px))!important}

  .inner-footer{padding-bottom:max(14vh,calc(var(--dock-clearance) + var(--safe-bottom) + 34px))}
  .projects-footer-v37{padding-bottom:max(132px,calc(var(--dock-clearance) + var(--safe-bottom) + 28px))!important}

  /* Mobile/tablet media can shrink without changing the desktop crop. */
  .case-hero__media,.case-gallery figure,.case-gallery figure.wide{max-width:100%}
  .case-gallery img,.case-hero__media img{max-width:100%}

  /* Keep very long live links / email content from forcing layout width. */
  .case-summary__links,.feature-v38__links,.contact-direct__links{min-width:0}
  .case-summary__links a,.feature-v38__links a,.contact-direct__links a{max-width:100%;overflow-wrap:anywhere}
}

@media(max-width:700px){
  :root{--dock-clearance:92px}

  .site-header{
    padding-left:max(18px,var(--safe-left));
    padding-right:max(18px,var(--safe-right));
  }
  .site-dock-shell{
    max-width:100vw;
    padding-left:max(8px,var(--safe-left));
    padding-right:max(8px,var(--safe-right));
  }

  /* Homepage overflow hardening. Artwork may visually crop, but its boxes no
     longer increase document.scrollWidth. */
  .project-trailer{overflow:clip!important;padding-left:20px!important;padding-right:20px!important}
  .trailer-copy,.trailer-meta{width:100%!important;max-width:100%!important}
  .trailer-copy h2,.trailer-copy p,.trailer-copy .trailer-joke{max-width:100%!important}
  .trailer-visual{width:100%!important;max-width:100%!important;overflow:clip}
  .trailer-visual--ayamen{overflow:clip!important}
  .td-floor-line{left:0!important;right:0!important;width:auto!important}
  .cap-turn--main p{width:100%!important;max-width:calc(100vw - 40px)!important}
  .demo-layer--rtl{width:auto!important}
  .pf-cta{transform:none!important}

  /* Projects collage intentionally bleeds off-canvas. Prevent that bleed from
     becoming a horizontally scrollable document. */
  .projects-v38,.work-open-v38,.work-open-v38__sticky,.work-open-v38__windows{overflow-x:clip!important;max-width:100vw}
  .work-open-v38__windows figure{max-width:58vw}
  .work-open-v38__hint{right:18px!important;left:auto!important;text-align:right;z-index:12}
  .work-open-v38__title{max-width:none;font-size:30vw!important}
  .feature-v38__device,.feature-v38__sticky--reverse .feature-v38__device{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}
  .laptop-v38{width:100%!important;max-width:100%!important}
  .feature-v38 h2{font-size:22vw!important}

  /* Keep first-screen project metadata readable above the dock. */
  .case-hero{gap:2.4vh;padding-top:calc(var(--header-h) + var(--safe-top) + 6vh)!important}
  .case-hero__top,.case-hero__bottom{gap:10px;line-height:1.35;flex-wrap:wrap}
  .case-hero__top span:last-child,.case-hero__bottom span:last-child{margin-left:auto;text-align:right}
  .case-hero__media{min-height:0}
  .case-summary__copy{min-width:0}
  .case-summary__links{align-items:flex-start}
  .case-summary__links .page-link{font-size:10px;line-height:1.35}
  .case-fact strong{overflow-wrap:anywhere}

  /* Contact first-screen footer previously sat directly behind the dock. */
  .contact-v40-hero__bottom{padding-bottom:4px;gap:14px}
  .contact-v40-hero__bottom span{max-width:46%}
  .contact-v40-hero__aside{max-width:calc(100vw - 36px)}
  .contact-message input,.contact-message textarea{min-width:0;width:100%}
  .contact-letter{overflow:hidden}
  .contact-direct{padding-bottom:max(13vh,calc(var(--dock-clearance) + var(--safe-bottom) + 32px))!important}

  /* Popup form remains reachable even with the soft keyboard open. */
  .pf-popup{max-height:calc(var(--app-vh) - var(--safe-top) - var(--safe-bottom) - 24px);overflow:auto;overscroll-behavior:contain}
  .pf-popup__body input{width:100%;font-size:16px}

  /* Essential touch targets. Small visual labels stay small, interactive
     elements receive an invisible/physical target floor. */
  .menu-button,.dock-app{min-width:43px;min-height:43px}
  .page-link,.feature-v38__links a,.case-summary__links a,.contact-direct__links a{min-height:40px;display:inline-flex;align-items:center}
}

/* Short landscape screens need a different interaction layout, not smaller
   desktop geometry. Sticky stages stay cinematic but content gets a compact
   vertical rhythm, and the gravity menu becomes a stable 2×2 launch field. */
@media(max-height:560px) and (min-width:560px){
  :root{--header-h:54px;--dock-base:40px;--dock-clearance:74px}
  .site-header{height:54px}
  .site-dock-shell{bottom:max(6px,var(--safe-bottom));padding:6px 8px 0}
  .site-dock{gap:4px;padding:5px 6px 6px;border-radius:15px;min-height:50px}
  .dock-app,.dock-app.menu-button{width:40px!important;height:40px!important;flex-basis:40px!important;min-width:40px;min-height:40px}
  .dock-app__icon{width:20px;height:20px}

  .hero-ui--top{top:calc(var(--header-h) + 6px)!important}
  .hero-ui--bottom{bottom:max(62px,calc(var(--safe-bottom) + 56px))!important}
  .skip-intro{bottom:max(68px,calc(var(--safe-bottom) + 62px))!important}

  .case-hero{padding-top:calc(var(--header-h) + 8px)!important;padding-bottom:max(92px,calc(var(--safe-bottom) + 86px))!important;gap:10px}
  .case-hero__body{grid-template-columns:.75fr 1.25fr!important;gap:3vw!important;align-items:center!important}
  .case-hero h1{font-size:clamp(62px,13vw,128px)!important;max-width:6ch}
  .case-hero__media{height:min(44vh,180px)!important}
  .case-hero__top,.case-hero__bottom{font-size:7px!important}

  .contact-v40-hero__sticky{padding-top:calc(var(--header-h) + 16px)!important;padding-bottom:max(68px,calc(var(--safe-bottom) + 60px))!important}
  .contact-v40-hero__copy{height:44vh!important}
  .contact-v40-hero__copy>span{font-size:min(17vw,22vh)!important}
  .contact-v40-hero__aside{bottom:max(76px,18vh)!important;font-size:15px!important;max-width:38vw!important}
  .contact-v40-hero__bottom{font-size:7px!important}

  .work-open-v38__meta{top:62px!important}
  .work-open-v38__title{font-size:min(26vw,42vh)!important}
  .work-open-v38__hint{bottom:max(64px,calc(var(--safe-bottom) + 58px))!important}
  .feature-v38__sticky{padding:58px 24px 70px!important;grid-template-columns:.72fr 1.28fr!important;gap:24px!important}
  .feature-v38__copy,.feature-v38__sticky--reverse .feature-v38__copy{grid-column:1!important;grid-row:1!important}
  .feature-v38__device,.feature-v38__sticky--reverse .feature-v38__device{grid-column:2!important;grid-row:1!important;width:min(58vw,70vh,720px)!important}
  .feature-v38 h2{font-size:clamp(50px,8vw,88px)!important}
  .feature-v38__copy p{font-size:15px!important}
  .feature-v38__copy small{font-size:9px!important}
  .interlude-v38__sticky,.other-bridge-v38__sticky{padding:55px 24px 66px!important}

  .about-stage,.about-machine__stage,.about-signal__sticky,.dual-system__stage,.career-tape__stage,
  .detail-problem__stage,.skill-router__stage,.human-part__stage,.about-seam__stage{min-height:var(--app-vh)!important;height:var(--app-vh)!important}
  .about-machine__top,.dual-system__head,.career-tape__head,.detail-problem__head,.skill-router__head,.about-seam__top{top:58px!important}
  .about-machine__readout,.dual-system__meter,.career-tape__yearline,.skill-router__flow{bottom:max(58px,calc(var(--safe-bottom) + 54px))!important}

  .menu-overlay--gravity .gravity-menu{
    inset:62px max(20px,var(--safe-right)) 54px max(20px,var(--safe-left))!important;
    width:auto!important;height:auto!important;
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;
    gap:8px 28px!important;overflow:visible!important;
  }
  .menu-overlay--gravity .gravity-menu__item{
    position:relative!important;left:auto!important;top:auto!important;
    width:100%!important;max-width:none!important;height:auto!important;
    transform:none!important;align-self:center!important;
    font-size:clamp(42px,7.4vw,72px)!important;line-height:.78!important;
    padding:.1em 0!important;touch-action:manipulation!important;
  }
  /* The homepage contact conversation is taller than a short landscape
     viewport. Let the form itself scroll instead of clipping its first or
     last question behind the browser chrome/dock. */
  .pf-contact{
    overflow-y:auto!important;overscroll-behavior:contain!important;
    justify-content:flex-start!important;gap:10px!important;
    padding:58px max(20px,var(--safe-right)) max(78px,calc(var(--safe-bottom) + 72px)) max(20px,var(--safe-left))!important;
  }
  .pf-row{gap:8px 12px!important;flex-wrap:wrap!important}
  .pf-text{font-size:clamp(20px,3.4vw,30px)!important;line-height:.9!important;white-space:normal!important}
  .pf-input-wrap{flex:1 1 180px!important;min-width:150px!important}
  .pf-input-wrap input{font-size:clamp(18px,2.6vw,24px)!important;padding-bottom:6px!important}
  .pf-btns{gap:7px!important;flex-wrap:wrap!important}
  .pf-btns button{min-height:42px!important;padding:0 16px!important;font-size:clamp(14px,2vw,18px)!important;border-radius:12px!important}
  .pf-send{font-size:clamp(34px,5.5vw,52px)!important;margin-top:4px!important;gap:12px!important}
  .pf-form-status{margin-top:0!important}
  .pf-popup{max-height:calc(var(--app-vh) - var(--safe-top) - var(--safe-bottom) - 16px)!important;overflow:auto!important;overscroll-behavior:contain!important}

  .menu-overlay--gravity::after{bottom:9px!important}
}

/* Phones in short landscape: keep the same static menu idea and simplify the
   most crowded first-screen metadata. */
@media(max-height:480px) and (max-width:900px){
  .site-header__meta,.site-header__edge{display:none!important}
  .contact-v40-hero__top span:last-child,.case-hero__top span:last-child{display:none}
  .contact-v40-hero__bottom span:last-child{max-width:22ch}
  .about-machine__readout span:nth-child(2),.about-machine__readout span:nth-child(3){display:none}
}

/* Touch devices: don't reserve behavior for hover. Keep hover-only decorative
   effects quiet and surface the same information without pointer precision. */
@media(hover:none),(pointer:coarse){
  body,a,button{cursor:auto!important}

  .case-system:hover{transform:none}
  .case-gallery figure:hover img{transform:none}
  .dock-app__label{display:none!important}
  .artifact-cluster-v37{cursor:grab}
}

@media(prefers-reduced-motion:reduce){
  .menu-overlay--gravity .gravity-menu__item{transform:none!important}
}