/* Keep subpage content clear of the desktop section capsule and its label. */
@media (min-width: 681px) {
  body:has(.page-shell):has([data-section-nav]) :is(.page-shell, .footer) {
    --gutter: max(clamp(22px, 4.2vw, 80px), calc(max(clamp(8px, 1.8vw, 24px), env(safe-area-inset-right, 0px)) + 108px));
  }
  body:has([data-section-nav]) .organization-page.page-shell {
    width: min(1740px, calc(100% - 2 * var(--gutter)));
  }
  body:has(.page-shell):has([data-section-nav]) .footer__inner {
    width: min(1560px, calc(100% - 2 * var(--gutter)));
  }
}

/* Tablet content needs less reserved space than a persistent desktop label.
   Grow the gutter continuously back to the desktop reservation. Organization
   owns a separate responsive layout and deliberately keeps its current rules. */
@media (min-width: 681px) and (max-width: 1100px) {
  body:has(.page-shell):not(:has(.organization-page)):has([data-section-nav]) :is(.page-shell, .footer) {
    --gutter: clamp(52px, calc(20vw - 84px), 128px);
  }
  body:has(.page-shell):not(:has(.organization-page)) .section-nav__current {
    padding: 6px 10px;
    border: 1px solid var(--design-line);
    border-radius: var(--radius-small);
    background: var(--paper);
    color: var(--ink);
    opacity: 0;
    visibility: hidden;
  }
  body:has(.page-shell):not(:has(.organization-page)):has(.section-nav:is(:hover, :focus-within)) .section-nav__current.is-visible {
    opacity: 1;
    visibility: visible;
  }
  body:has(.page-shell):not(:has(.organization-page)) .footer__inner {
    flex-direction: column;
    gap: 32px;
  }
  body:has(.page-shell):not(:has(.organization-page)) .footer-nav {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}