/* Mobile-only home composition fixes. Keep the authored desktop hero untouched. */
@media (max-width:720px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important;overflow-x:clip!important}

  .shell{
    width:100%;
    max-width:100%;
    min-height:100dvh;
    padding-left:max(18px,env(safe-area-inset-left));
    padding-right:max(18px,env(safe-area-inset-right));
    padding-top:max(20px,env(safe-area-inset-top));
    padding-bottom:calc(108px + env(safe-area-inset-bottom));
  }

  main{
    width:100%;
    max-width:100%;
    min-width:0;
    padding-top:clamp(38px,6dvh,58px);
    padding-bottom:94px;
  }

  .name,
  .name span{
    max-width:100%;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
  }

  .name{
    font-size:clamp(3.25rem,17vw,4.8rem);
    line-height:.87;
    letter-spacing:-.072em;
  }

  .name span{white-space:nowrap;}

  .role{margin-top:clamp(20px,3.2dvh,28px);}
  .line,.statement-shimmer{display:block;max-width:100%;}
  .nav{width:100%;max-width:100%;margin-top:clamp(28px,4dvh,38px);}

  footer{
    width:100%;
    max-width:100%;
    min-width:0;
    padding-right:58px;
    line-height:1.55;
  }
  footer>div{
    width:100%;
    max-width:100%;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
  }
}

@media (max-width:360px){
  .shell{
    padding-left:max(15px,env(safe-area-inset-left));
    padding-right:max(15px,env(safe-area-inset-right));
  }
  .name{font-size:clamp(3rem,16.4vw,4.1rem);}
  footer{padding-right:52px;}
}

/* Phones in landscape are wide but extremely short. Do not let the desktop
   short-window rule force a 720px canvas or desktop navigation geometry. */
@media (orientation:landscape) and (max-height:520px) and (max-width:1024px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important;overflow-x:clip!important}
  body{overflow-y:auto!important}

  .shell{
    width:100%!important;
    max-width:100%!important;
    min-height:100dvh!important;
    padding-top:max(10px,env(safe-area-inset-top))!important;
    padding-left:max(18px,env(safe-area-inset-left))!important;
    padding-right:max(18px,env(safe-area-inset-right))!important;
    padding-bottom:calc(68px + env(safe-area-inset-bottom))!important;
    grid-template-rows:auto auto auto!important;
  }

  .topbar{min-width:0!important;}

  main{
    align-self:start!important;
    width:100%!important;
    max-width:100%!important;
    transform:none!important;
    padding:clamp(14px,4dvh,22px) 0 18px!important;
  }

  .name{
    max-width:100%!important;
    font-size:clamp(2.4rem,min(9.5vw,14dvh),4.2rem)!important;
    line-height:.9!important;
    letter-spacing:-.065em!important;
    white-space:normal!important;
  }
  .name span{display:inline!important;white-space:nowrap!important;margin-left:.08em;}

  .role{margin-top:10px!important;font-size:.88rem!important;}
  .line,.statement-shimmer{display:block!important;max-width:78ch!important;margin-top:6px!important;font-size:.84rem!important;line-height:1.38!important;}

  .nav{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-items:start!important;
    width:100%!important;
    max-width:100%!important;
    gap:2px 20px!important;
    margin-top:14px!important;
  }
  .nav a{min-width:0!important;padding:5px 0!important;font-size:.64rem!important;white-space:normal!important;overflow-wrap:anywhere!important;}

  footer{display:none!important;}
}