/* The compact header leaves the hero only after its bottom exits the viewport. */
@media (max-width: 1279px) {
 .skip-link:focus { z-index: 30; }
 .header.mobile-header {
  --mobile-header-height: 82px;
  position: fixed; z-index: 20; top: 0; left: 0; right: 0;
  height: calc(var(--mobile-header-height) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(var(--edge), env(safe-area-inset-left, 0px));
  padding-right: max(var(--edge), env(safe-area-inset-right, 0px));
  border: 0; isolation: isolate; animation: none;
  color: var(--mobile-header-ink, var(--ivory));
  opacity: var(--mobile-header-opacity, 1);
  transform: translateY(var(--mobile-header-shift, 0px));
  transition: opacity 460ms cubic-bezier(.22,.61,.36,1);
 }
 .header.mobile-header.mobile-header--hero { position: absolute; transition: none; }
 .header.mobile-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ivory); opacity: var(--mobile-header-bg, 0);
  transition: opacity 320ms cubic-bezier(.22,.61,.36,1); pointer-events: none;
 }
 .header.mobile-header::after {
  content: ""; position: absolute; bottom: 0;
  left: max(var(--edge), env(safe-area-inset-left, 0px));
  right: max(var(--edge), env(safe-area-inset-right, 0px));
  height: 1px; background: currentColor;
  opacity: var(--mobile-header-rule, .45); pointer-events: none;
 }
 .header.mobile-header .menu-open { color: inherit; }
 .header.mobile-header[inert] { pointer-events: none; }
 .header.mobile-header[data-header-hidden="true"] { visibility: hidden; transition: visibility 0s 320ms, opacity 320ms cubic-bezier(.22,.61,.36,1); }
 .header.mobile-header.header-instant, .header.mobile-header.header-instant::before { transition: none; }
 .header.mobile-header[data-header-tone="dark"] :focus-visible { outline-color: var(--espresso); }
}
@media (max-width: 1279px) and (max-height: 540px) and (orientation: landscape) {
 .header.mobile-header { --mobile-header-height: 62px; }
}
@media (prefers-reduced-motion: reduce) {
 .header.mobile-header, .header.mobile-header.mobile-header--hero { position: absolute; transition: none; }
 .header.mobile-header::before { transition: none !important; }
}

@media (max-width: 1279px) and (max-height: 540px) and (orientation: landscape) {
 .header.mobile-header { --mobile-header-height: var(--low-header-height); }
}