/* V4.88 — responsive refinement only. No visual redesign.
   Safe areas, fold/tablet widths, short landscape screens and touch ergonomics. */
: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);
}

/* Preserve the existing gutter system while respecting notches/rounded display edges. */
.shell{
  padding-left:max(var(--gutter),var(--safe-left));
  padding-right:max(var(--gutter),var(--safe-right));
}
.topbar{padding-left:var(--safe-left);padding-right:var(--safe-right)}
.film-mode .film-controls{
  padding-left:max(var(--gutter),var(--safe-left));
  padding-right:max(var(--gutter),var(--safe-right));
  padding-bottom:max(18px,var(--safe-bottom));
}
.modal{
  padding-left:max(clamp(12px,4vw,48px),var(--safe-left));
  padding-right:max(clamp(12px,4vw,48px),var(--safe-right));
  padding-bottom:max(clamp(18px,4vw,48px),var(--safe-bottom));
}
.director-toolbar,.hs-gallery-top,.voice-gallery-top,.stills-gallery-top,.stills-viewer header{
  padding-left:max(18px,var(--safe-left));
  padding-right:max(18px,var(--safe-right));
}
.director-content,.hs-gallery-body,.voice-gallery-body,.stills-gallery-content{
  padding-left:max(18px,var(--safe-left));
  padding-right:max(18px,var(--safe-right));
}
.stills-viewer footer{
  padding-left:max(12px,var(--safe-left));
  padding-right:max(12px,var(--safe-right));
  padding-bottom:max(12px,var(--safe-bottom));
}
#mf-contact-finale .cf-body{
  padding-left:max(16px,var(--safe-left));
  padding-right:max(16px,var(--safe-right));
}

/* Touch devices: improve hit areas without changing the visual language. */
@media (pointer:coarse){
  button,a,.portrait-cinema,.stills-triptych{touch-action:manipulation}
  .portrait-cinema,.stills-triptych,.hs-view-stage,.stills-view-stage,#marvin-timeline-concept .mt-stage{touch-action:pan-y pinch-zoom}
  .menu-toggle,.director-toggle,.film-transport button,.stills-viewer button{min-width:44px;min-height:44px}
  .nav a,.action,.director-actions a,.director-actions button,.filmography-filters button,.voice-filters button,.hs-enter,.stills-enter,#mf-contact-finale .cf-submit{min-height:44px}
  /* Prevent iOS-style focus zoom in forms while retaining the same field treatment. */
  #mf-contact-finale .cf-field input,#mf-contact-finale .cf-field select,#mf-contact-finale .cf-field textarea{font-size:16px}
}

/* Phone and closed-fold safe-area adjustments. */
@media (max-width:767px){
  .topbar{padding-top:max(14px,calc(var(--safe-top) + 8px))}
  .hero-inner{padding-top:max(78px,calc(var(--safe-top) + 58px));padding-bottom:max(18px,var(--safe-bottom))}
  .nav{
    top:calc(72px + var(--safe-top));
    left:max(12px,calc(var(--safe-left) + 8px));
    right:max(12px,calc(var(--safe-right) + 8px));
    max-height:calc(100svh - 88px - var(--safe-top) - var(--safe-bottom));
  }
  .film-mode .scene-scroll{padding-bottom:calc(105px + var(--safe-bottom))}
  .film-mode .hero-inner{padding-bottom:calc(100px + var(--safe-bottom))}
  .director-toolbar,.hs-gallery-top,.voice-gallery-top,.stills-gallery-top{
    padding-top:max(14px,calc(var(--safe-top) + 8px));
  }
  .director-content,.hs-gallery-body,.voice-gallery-body,.stills-gallery-content{
    padding-bottom:max(28px,calc(var(--safe-bottom) + 18px));
  }
  .stills-gallery,.stills-viewer,.hs-gallery-page,.voice-gallery-page,.director-view{height:100svh;height:100dvh}
  .modal{padding-top:max(70px,calc(var(--safe-top) + 58px));padding-bottom:max(18px,var(--safe-bottom))}
}

/* Extra-narrow phones / closed foldables. Keeps the existing composition, just avoids collisions. */
@media (max-width:359px){
  :root{--gutter:12px}
  .brand{font-size:16px}
  .availability{font-size:6.5px;letter-spacing:.035em;gap:4px}
  .menu-toggle,.topbar .director-toggle{width:40px;height:40px;flex-basis:40px}
  .hero-title{font-size:20.2vw}
  .hero-stage{min-height:345px}
  .hero-bottom{gap:10px}
  .hero-bottom p{font-size:10px;max-width:150px}
  .film-mode .hero-actions{gap:10px}
  .film-controls .film-position{min-width:52px}
  .director-actions{grid-template-columns:1fr}
  .director-actions .director-primary{grid-column:1}
  .director-intro h2{font-size:50px}
  .facts{grid-template-columns:1fr;gap:14px}
  .facts .fact:last-child{grid-column:1}
  .stills-stage{margin-left:-12px;margin-right:-12px}
}

/* Unfolded Fold / compact tablet portrait range. Reflow only where desktop columns become cramped. */
@media (min-width:700px) and (max-width:980px) and (pointer:coarse){
  :root{--gutter:clamp(24px,4vw,36px)}
  .hero-stage{min-height:clamp(440px,58dvh,620px)}
  .portrait-wrap{right:5vw;width:min(34vw,370px)}
  .hero-bottom{gap:20px}
  .director-content{width:calc(100% - max(48px,calc(var(--safe-left) + var(--safe-right) + 32px)))}
  .director-intro{grid-template-columns:minmax(0,1fr) minmax(210px,240px);gap:28px}
  .director-intro h2{font-size:clamp(52px,7.2vw,72px)}
  .director-facts{flex-wrap:wrap;row-gap:18px}
  .director-contact-grid{grid-template-columns:1fr 1fr;gap:24px 28px}
  .director-credit{grid-template-columns:48px minmax(0,1.15fr) minmax(0,.85fr);gap:10px 18px}
  .director-credit .year{grid-row:1 / span 2}
  .director-credit .project{grid-column:2}
  .director-credit .role{grid-column:2}
  .director-credit .meta{grid-column:3;grid-row:1 / span 2}
  .filmography-heading{gap:20px}
  .filmography-heading p{max-width:220px}
  .stills-shell{width:min(940px,100%)}
}

/* Larger tablets retain desktop composition but get more comfortable touch controls. */
@media (min-width:981px) and (max-width:1366px) and (pointer:coarse){
  .nav{gap:clamp(14px,1.7vw,24px)}
  .nav a{display:flex;align-items:center;min-height:44px}
  .hero-stage{min-height:clamp(470px,61dvh,650px)}
  .portrait-wrap{width:min(31vw,400px)}
  .director-contact-grid{gap:18px}
}

/* Short landscape phones, flip devices and compact Fold landscape views. */
@media (pointer:coarse) and (min-width:540px) and (max-height:540px){
  :root{--section-y:56px;--gutter:clamp(16px,3vw,28px)}
  .topbar{padding-top:max(8px,calc(var(--safe-top) + 5px));padding-bottom:8px}
  .brand{font-size:16px}
  .availability{font-size:8px}
  .menu-toggle,.topbar .director-toggle{width:38px;height:38px;flex-basis:38px}
  .nav{top:calc(58px + var(--safe-top));max-height:calc(100svh - 68px - var(--safe-top) - var(--safe-bottom))}
  .hero-inner{padding-top:max(58px,calc(var(--safe-top) + 46px));padding-bottom:max(10px,var(--safe-bottom))}
  .hero-stage{min-height:285px}
  .hero-title{font-size:clamp(54px,11.2vw,112px);top:4%}
  .portrait-wrap{width:min(26vw,225px);right:4vw;top:50%;translate:0 -50%}
  .hero-bottom{margin-top:2px;gap:12px}
  .hero-bottom p{font-size:10px;line-height:1.4;max-width:260px}
  .hero-shortcut{min-height:32px;font-size:8px}
  .play-pill{min-height:42px}
  .film-mode .film-controls{min-height:64px;padding-top:7px;padding-bottom:max(7px,var(--safe-bottom));gap:8px}
  .film-mode .scene-scroll{padding-top:calc(var(--nav-offset,58px) + 10px);padding-bottom:76px}
  .film-mode .hero-inner{padding-bottom:72px}
  .film-transport button{width:38px;height:38px;min-width:38px;min-height:38px}
  .film-position span:last-child{font-size:9px}
  .film-chapters a{min-height:34px}
  .hs-portal .hs-main img{max-height:48dvh}
  .voice-portal .voice-hero{height:72dvh;min-height:285px}
  .voice-portal .voice-hero-copy{padding:16px 20px}
  .voice-portal h2{font-size:clamp(42px,9vw,64px);margin:10px 0}
  .stills-stage{min-height:300px}
  .stills-triptych img{height:min(52vh,220px)}
  .stills-shell h2{margin-bottom:8px}
  .director-toolbar{padding-top:max(8px,calc(var(--safe-top) + 5px));padding-bottom:8px}
  .director-content{padding-top:20px}
  .director-intro{gap:20px}
  .director-intro h2{font-size:clamp(44px,8vw,62px)}
  .director-summary{margin-top:12px;line-height:1.45}
  .modal{padding-top:max(52px,calc(var(--safe-top) + 44px));padding-bottom:max(8px,var(--safe-bottom))}
  .reel-player-shell{width:min(100%,calc((100dvh - 104px) * 16 / 9))}
  #contact.contact-finale .scene-scroll{padding-top:calc(var(--nav-offset,58px) + 6px)}
  #mf-contact-finale .cf-top{padding-bottom:2px}
  #mf-contact-finale .cf-face{width:150px;height:138px}
  #mf-contact-finale .cf-name{margin:-8px 0 10px;font-size:9px}
  #mf-contact-finale .cf-headline{font-size:clamp(42px,8.2cqw,66px)}
  #mf-contact-finale .cf-caption{margin:6px 0 8px}
  #mf-contact-finale .cf-contact{margin-top:7px;gap:24px}
  #mf-contact-finale .cf-footer{margin-top:12px}
}

/* Dual-screen/fold APIs are progressive enhancement only; unsupported browsers ignore this. */
@media (device-posture:folded){
  .hero,.film-mode .film-scene,.director-view,.hs-gallery-page,.voice-gallery-page,.stills-gallery,.stills-viewer{max-width:100vw}
}

@media (prefers-reduced-motion:reduce){
  .portrait-cinema,.stills-triptych,#marvin-timeline-concept .mt-stage{scroll-behavior:auto}
}