.site-nav {
  background: var(--nav-bg);
  color: var(--nav-text);
}

.site-nav.nav-sticky {
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-nav.nav-glass {
  background: color-mix(in srgb, var(--nav-bg) 82%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.site-nav.nav-bordered {
  border-bottom: 1px solid var(--site-accent);
}

.site-nav.nav-floating {
  margin: 12px clamp(12px, 2vw, 32px);
  border: 1px solid color-mix(in srgb, var(--nav-text) 15%, transparent);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgb(0 0 0 / 12%);
}

.site-nav.nav-floating.nav-sticky { top: 12px; }
.site-nav.nav-spacing-compact { padding-block: 12px; }
.site-nav.nav-spacing-spacious { padding-block: 34px; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.site-brand-text { overflow: hidden; text-overflow: ellipsis; }
.site-logo { display: block; flex: none; height: var(--nav-logo-height); width: auto; max-width: 200px; object-fit: contain; }
.site-nav.nav-links-underline nav a { border-bottom: 1px solid currentColor; padding-bottom: 5px; }
.site-nav.nav-links-pill nav a { border: 1px solid currentColor; border-radius: 999px; padding: 9px 14px; }
.site-nav.nav-sticky ~ main .site-section { scroll-margin-top: 100px; }

@media (max-width: 760px) {
  .site-nav { gap: 12px; }
  .site-brand { font-size: 1.2rem; }
  .site-logo { max-width: 100px; }
  .site-nav nav { flex-wrap: wrap; justify-content: flex-end; }
  .site-nav nav a { font-size: .66rem; letter-spacing: .08em; }
  .site-nav.nav-spacing-spacious { padding-block: 24px; }
  .site-nav.nav-links-pill nav a { padding: 7px 9px; }
}