/* Shrink navbar on scroll down; expand on scroll up / near top */
.nav-inner {
  transition:
    padding 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    min-height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    gap 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    margin-top 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.28s ease;
}

header.site-header .logo-img,
header.site-header nav a {
  transition:
    width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    font-size 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

body > main {
  transition: padding 0.28s cubic-bezier(0.4, 0, 0.2, 1), padding-top 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

body.nav-is-compact {
  --nav-float-top: 8px;
  --nav-h: calc(var(--nav-float-top) + 44px + clamp(1rem, 3vw, 1.5rem));
}

body.nav-is-compact .nav-inner {
  margin-top: var(--nav-float-top);
  padding: 0.28rem 1.35rem 0.28rem 1rem;
  min-height: 36px;
  gap: 0.85rem;
  box-shadow:
    0 2px 16px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(0, 0, 0, 0.22) inset;
}

@media (min-width: 641px) {
  body.nav-is-compact .nav-inner {
    min-width: min(620px, calc(100vw - 2rem));
  }
}

body.nav-is-compact .logo-img {
  width: 22px;
  height: 22px;
}

body.nav-is-compact nav ul {
  max-width: 32rem;
  gap: 0.15rem;
}

body.nav-is-compact nav a {
  padding: 0.28rem 0.72rem;
  font-size: 0.6875rem;
}

@media (max-width: 640px) {
  body.nav-is-compact .nav-inner {
    padding: 0.26rem 0.7rem 0.26rem 0.58rem;
    min-height: 34px;
    gap: 0.45rem;
  }

  body.nav-is-compact .logo-img {
    width: 20px;
    height: 20px;
  }

  body.nav-is-compact nav a {
    padding: 0.22rem 0.52rem;
    font-size: 0.625rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-inner,
  header.site-header .logo-img,
  header.site-header nav a,
  body > main {
    transition: none !important;
  }
}