/* An opaque viewport-edge header lets Safari extend its own toolbar tint.
   Keep browser/sensor insets inside the header, never in its top offset. */
:root {
  --site-safe-top: env(safe-area-inset-top, 0px);
  --site-safe-right: env(safe-area-inset-right, 0px);
  --site-safe-bottom: env(safe-area-inset-bottom, 0px);
  --site-safe-left: env(safe-area-inset-left, 0px);
  --site-page-gutter: 1.25rem;
}

html {
  background-color: var(--color-ink);
  scroll-padding-block-start: calc(var(--header-height) + var(--site-safe-top) + var(--space-4) + 1px);
}

.site-header,
.site-header.is-scrolled {
  background-color: var(--color-ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-header {
  padding-block-start: var(--site-safe-top);
  padding-inline-start: var(--site-safe-left);
  padding-inline-end: var(--site-safe-right);
}

/* viewport-fit=cover also exposes the sides on landscape phones.
   Preserve existing gutters within that safe rectangle, including asymmetric
   insets; at zero insets this is the original width and centering. */
.container {
  inline-size: min(calc(100% - var(--site-safe-left) - var(--site-safe-right) - 2 * var(--site-page-gutter)), var(--container));
  margin-inline-start: calc(var(--site-safe-left) + max(var(--site-page-gutter), (100% - var(--site-safe-left) - var(--site-safe-right) - var(--container)) / 2));
  margin-inline-end: calc(var(--site-safe-right) + max(var(--site-page-gutter), (100% - var(--site-safe-left) - var(--site-safe-right) - var(--container)) / 2));
}

/* The header's own padding has already reserved the horizontal safe area.
   It also makes its container queries respond to the usable header width. */
.site-header > .container {
  --site-safe-left: 0px;
  --site-safe-right: 0px;
}

.mobile-menu {
  block-size: max(0px, calc(100dvh - var(--header-height) - var(--site-safe-top)));
}

.mobile-menu__panel {
  padding-inline-start: calc(var(--space-6) + var(--site-safe-left));
  padding-inline-end: calc(var(--space-6) + var(--site-safe-right));
  padding-block-end: calc(var(--space-10) + var(--site-safe-bottom));
}

.mobile-cta {
  inset-inline-start: calc(var(--space-3) + var(--site-safe-left));
  inset-inline-end: calc(var(--space-3) + var(--site-safe-right));
}

.skip-link {
  inset-block-start: calc(var(--space-4) + var(--site-safe-top));
  inset-inline-start: calc(var(--space-4) + var(--site-safe-left));
}

@media (max-width: 42rem) {
  :root { --site-page-gutter: .75rem; }
}

@media print {
  :root {
    --site-safe-top: 0px;
    --site-safe-right: 0px;
    --site-safe-bottom: 0px;
    --site-safe-left: 0px;
  }
  html { background-color: white; }
}