/* Header motion: keep document geometry still; animate only painted layers. */
.site-header.motion-ready {
  --nav-shift: 0px;
  --nav-scale: 1;
  --nav-surface-scale: 1;
  --nav-shadow: 0;
  background: transparent;
  border-bottom-color: transparent;
  margin-bottom: 0;
  transition: none;
  isolation: isolate;
  pointer-events: none;
}
.site-header.motion-ready::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transform: scaleY(var(--nav-surface-scale));
  transform-origin: center top;
  will-change: transform;
  pointer-events: auto;
}
.site-header.motion-ready::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  box-shadow: 0 6px 18px -12px var(--ink);
  transform: scaleY(var(--nav-surface-scale));
  transform-origin: center top;
  opacity: var(--nav-shadow);
  pointer-events: none;
}
.site-header.motion-ready .top-bar { pointer-events: auto; }
.site-header.motion-ready .header-main {
  position: relative;
  transform: translate3d(0, calc(-1 * var(--nav-shift)), 0);
  transition: none;
  will-change: transform;
}
.site-header.motion-ready .header-main > * { pointer-events: auto; }
.site-header.motion-ready .logo img {
  transform: scale(var(--nav-scale));
  transform-origin: left center;
  transition: none;
  will-change: transform;
}
/* The menu attaches to the visible bottom edge, not the expanded layout box. */
@media (width <= 1024px) {
  .site-header.motion-ready .header-main { flex-wrap: nowrap; }
  .js .site-header.motion-ready .main-nav {
    position: absolute;
    top: calc(100% - var(--nav-shift));
    inset-inline: 0;
    width: auto;
    max-height: max(44px, calc(100dvh - var(--nav-menu-offset, 180px) + var(--nav-shift) * 2));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 6px 18px -12px var(--ink);
  }
}
@media (width <= 359px) {
  .site-header.motion-ready .header-main .logo img { width: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header.motion-ready::before,
  .site-header.motion-ready .header-main,
  .site-header.motion-ready .logo img { will-change: auto; }
}