:root {
  --nav-shrink-progress: 0;
  --nav-height: 80px;
  --nav-logo-height: 32px;
  --nav-shadow-opacity: 0.08;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

#site-header {
  box-shadow: 0 8px 24px rgba(15, 39, 70, var(--nav-shadow-opacity));
  transition: box-shadow 80ms linear;
}

#site-nav {
  height: var(--nav-height);
}

#site-nav .site-logo {
  height: var(--nav-logo-height);
}

#site-nav,
#site-nav .site-logo,
#page-main {
  transition-property: height, padding-top;
  transition-duration: 80ms;
  transition-timing-function: linear;
}

#page-main {
  padding-top: var(--nav-height);
}

@media (prefers-reduced-motion: reduce) {
  #site-nav,
  #site-nav .site-logo,
  #page-main {
    transition-duration: 0ms;
  }
}