/* SAFE-AREA-1 — viewport-fit=cover + env(safe-area-inset-*) sitewide */

: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);
}

/* Landscape / portrait shell padding (widths in site-system.css) */
.home-main,
body.legal-page,
body.admin-page {
  padding-left: max(var(--sz-pad-x, 24px), calc(20px + var(--safe-left)));
  padding-right: max(var(--sz-pad-x, 24px), calc(20px + var(--safe-right)));
  box-sizing: border-box;
}

/* Top zones — notch / Dynamic Island */
.topbar,
.project-topbar,
.tool-head,
.page-head,
.legal-header,
.admin-top,
.admin-site-header {
  padding-top: max(18px, calc(12px + var(--safe-top)));
}

body.home-page .audio-hero {
  padding-top: max(clamp(40px, 6.5vh, 76px), calc(12px + var(--safe-top)));
}

body.home-page .hero-copy {
  margin-left: 0;
  width: min(var(--content-w), 100%);
}

/* SAFE-AREA-2 — mobile portrait content grid (keep landscape insets) */
@media (max-width: 760px) and (orientation: portrait) {
  body.home-page .home-main {
    padding-left: max(22px, calc(18px + var(--safe-left)));
    padding-right: max(22px, calc(18px + var(--safe-right)));
    box-sizing: border-box;
  }

  body.home-page .audio-hero {
    overflow: visible;
    padding-left: max(22px, calc(18px + var(--safe-left)));
    padding-right: max(22px, calc(18px + var(--safe-right)));
    box-sizing: border-box;
  }

  body.home-page .hero-copy {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  body.home-page .hero-title,
  body.home-page .hero-brand {
    max-width: 100%;
    overflow: visible;
    font-size: clamp(64px, 18vw, 96px);
    line-height: 0.88;
    letter-spacing: -0.075em;
  }

  body.home-page .hero-signal-text,
  body.home-page .hero-tagline {
    max-width: 100%;
  }

  body.home-page .projects {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 760px) and (orientation: landscape) {
  body.home-page .audio-hero {
    overflow: visible;
    padding-left: max(22px, calc(18px + var(--safe-left)));
    padding-right: max(22px, calc(18px + var(--safe-right)));
    box-sizing: border-box;
  }

  body.home-page .hero-copy {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
  }
}

/* Floating / sticky controls — home indicator */
.utility-process-float,
.floating-action,
.sticky-dock {
  bottom: max(18px, calc(14px + var(--safe-bottom)));
}

.site-footer {
  padding-bottom: max(34px, calc(14px + var(--safe-bottom)));
}

body.admin-page.admin-login-page {
  min-height: 100vh;
  min-height: 100svh;
  padding:
    max(16px, calc(12px + var(--safe-top)))
    max(16px, calc(12px + var(--safe-right)))
    max(16px, calc(12px + var(--safe-bottom)))
    max(16px, calc(12px + var(--safe-left)));
  box-sizing: border-box;
}

body.admin-page.admin-panel-page .admin-top {
  padding-left: max(1rem, calc(0.75rem + var(--safe-left)));
  padding-right: max(1rem, calc(0.75rem + var(--safe-right)));
}

body.admin-page.admin-panel-page main {
  padding-left: max(1rem, calc(1rem + var(--safe-left)));
  padding-right: max(1rem, calc(1rem + var(--safe-right)));
  padding-bottom: max(1rem, calc(1rem + var(--safe-bottom)));
}

body.admin-page.admin-panel-page {
  padding-left: 0;
  padding-right: 0;
}

body.legal-page {
  overflow-x: clip;
}

@media (max-width: 760px) {
  body.home-page .audio-hero {
    padding-top: max(38px, calc(12px + var(--safe-top)));
  }

  body.home-page .hero-copy {
    margin-left: 0;
    width: 100%;
  }

  .site-footer {
    padding-bottom: max(22px, calc(14px + var(--safe-bottom)));
  }
}