/* CRUDO / cutout-aware safe-area system
   Safari exposes the real usable area through env(safe-area-inset-*).
   JS adds data-cutout="none|compact|large" only to tune the spacing profile. */
: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);
  --cutout-bonus: 0px;
  --mobile-nav-row: 60px;
  --mobile-nav-row-scrolled: 56px;
  --mobile-nav-total: calc(var(--mobile-nav-row) + var(--safe-top) + var(--cutout-bonus));
  --mobile-nav-total-scrolled: calc(var(--mobile-nav-row-scrolled) + var(--safe-top) + var(--cutout-bonus));
}
html[data-cutout="compact"]{--cutout-bonus:2px}
html[data-cutout="large"]{--cutout-bonus:6px}

/* Keep content away from rounded display corners in landscape as well. */
@media (max-width:850px){
  html{scroll-padding-top:var(--mobile-nav-total)!important}

  .site-nav{
    top:0!important;
    height:var(--mobile-nav-total)!important;
    align-items:flex-end!important;
    padding-top:calc(var(--safe-top) + var(--cutout-bonus))!important;
    padding-bottom:0!important;
    padding-left:max(20px,calc(var(--safe-left) + 14px))!important;
    padding-right:max(20px,calc(var(--safe-right) + 14px))!important;
  }
  .site-nav.nav-scrolled,.project-page .site-nav{
    height:var(--mobile-nav-total-scrolled)!important;
  }
  .site-nav>.nav-brand,.site-nav>.nav-menu,.site-nav>.nav-contact{
    min-height:var(--mobile-nav-row-scrolled);
    display:flex;
    align-items:center;
  }

  .mobile-menu{
    top:var(--mobile-nav-total)!important;
    max-height:calc(100dvh - var(--mobile-nav-total))!important;
    padding-left:max(20px,calc(var(--safe-left) + 14px))!important;
    padding-right:max(20px,calc(var(--safe-right) + 14px))!important;
    padding-bottom:calc(28px + var(--safe-bottom))!important;
  }
  .site-nav.nav-scrolled + .mobile-menu,
  .project-page .site-nav + .mobile-menu{
    top:var(--mobile-nav-total-scrolled)!important;
    max-height:calc(100dvh - var(--mobile-nav-total-scrolled))!important;
  }

  /* FRONT */
  .hero{
    padding-top:calc(var(--mobile-nav-total) + 12px)!important;
    padding-left:max(14px,calc(var(--safe-left) + 10px))!important;
    padding-right:max(14px,calc(var(--safe-right) + 10px))!important;
  }

  /* Standard project page */
  .project-sheet{padding-top:var(--mobile-nav-total-scrolled)!important}

  /* LAB index */
  .experimental-index .orbit-stage{
    padding-top:calc(var(--mobile-nav-total) + 18px)!important;
    padding-left:max(20px,calc(var(--safe-left) + 14px))!important;
    padding-right:max(20px,calc(var(--safe-right) + 14px))!important;
  }

  /* LAB project cover */
  .experiment-cover{
    padding-top:var(--mobile-nav-total)!important;
  }
  .project-back{
    top:calc(var(--mobile-nav-total) + 18px)!important;
    left:max(20px,calc(var(--safe-left) + 14px))!important;
  }
  .project-ledger-dark{
    top:calc(var(--mobile-nav-total) + 18px)!important;
    left:max(20px,calc(var(--safe-left) + 14px))!important;
    right:max(20px,calc(var(--safe-right) + 14px))!important;
  }
  .project-cover-copy,
  .project-cover-meta{
    left:max(20px,calc(var(--safe-left) + 14px))!important;
    right:max(20px,calc(var(--safe-right) + 14px))!important;
  }
  .project-cover-meta{bottom:calc(24px + var(--safe-bottom))!important}

  footer,
  .orbit-footer{
    padding-left:max(20px,calc(var(--safe-left) + 14px))!important;
    padding-right:max(20px,calc(var(--safe-right) + 14px))!important;
    padding-bottom:calc(24px + var(--safe-bottom))!important;
  }
}

/* Dynamic-Island / large-cutout tuning: slightly more breathing room below the sensor area. */
@media (max-width:600px){
  html[data-cutout="large"] .site-nav>.nav-brand,
  html[data-cutout="large"] .site-nav>.nav-menu{transform:translateY(2px)}
  html[data-cutout="large"] .experimental-index .orbit-kicker{margin-top:4px}
  html[data-cutout="large"] .hero-reel{margin-top:2px!important}
}

/* Landscape iPhones expose large left/right safe areas instead of a tall top inset. */
@media (max-height:520px) and (orientation:landscape){
  :root{--mobile-nav-row:52px;--mobile-nav-row-scrolled:50px}
  .site-nav{
    padding-left:max(24px,calc(var(--safe-left) + 12px))!important;
    padding-right:max(24px,calc(var(--safe-right) + 12px))!important;
  }
  .hero,.experimental-index .orbit-stage{
    padding-left:max(24px,calc(var(--safe-left) + 12px))!important;
    padding-right:max(24px,calc(var(--safe-right) + 12px))!important;
  }
}

/* Non-supporting browsers simply resolve env() to zero and use the normal mobile layout. */
@supports not (padding-top: env(safe-area-inset-top)){
  :root{--safe-top:0px;--safe-right:0px;--safe-bottom:0px;--safe-left:0px;--cutout-bonus:0px}
}