/* Sticky navigation and restrained motion; no layout-size changes on scroll. */
html { scroll-padding-top: 190px; }
body > header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: white;
  transition: box-shadow 200ms ease;
}
body > header.is-scrolled { box-shadow: 0 5px 20px #17191c24; }
.skip { position: fixed; z-index: 100; }
.motion-item {
  opacity: 1;
  translate: 0 0;
  transition: opacity 450ms ease var(--reveal-delay, 0ms), translate 450ms ease var(--reveal-delay, 0ms), transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.motion-pending { opacity: 0; translate: 0 14px; }
.motion-pending:focus-within { opacity: 1; translate: 0 0; }
.menu-button[aria-expanded="true"] { background: #fff0f1; border-color: var(--interactive-red); }
@media (max-width: 760px) {
  html { scroll-padding-top: 150px; }
  nav.open { max-height: min(55vh, 400px); overflow-y: auto; overscroll-behavior: contain; animation: menu-enter 180ms ease-out; }
}
@keyframes menu-enter { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .motion-item, .motion-pending { opacity: 1; translate: none; transition: none; }
  nav.open { animation: none; }
  body > header { transition: none; }
}