.nav {
  --height-signup: 2.9125em;
  --height-svg: 20.1625vw;

  backdrop-filter: blur(0.5em);
  -webkit-backdrop-filter: blur(0.5em);
  background: oklch(var(--lch-canvas) / 0.8);
  display: grid;
  height: var(--height-signup);
  inset: 0;
  position: absolute;
  transition:
    background var(--transition),
    box-shadow var(--transition)
  ;
  z-index: 1000;
}

.nav .nav__container {
  align-items: center;
  display: flex;
  gap: var(--space-small);
  margin-inline: auto;
  position: relative;
  width: min(100%, 48em);
}

.nav .nav__logo {
  left: var(--space-small);
  position: absolute;
}

.nav .nav__content {
  align-items: center;
  display: none;
  flex: 1;
  justify-content: center;
}

.nav .nav__content p {
  font-family: var(--font-family-scorekard);
  font-size: var(--font-size-xx-small);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-looser);
  line-height: var(--line-height-tighter);
  margin-bottom: -0.225em;
  margin-top: -0.2375em;
  max-width: 32em;
  text-align: center;
}

.nav .nav__content p a {
  display: inline-block;
  font-weight: inherit;
  text-decoration-color: oklch(var(--lch-blue-medium));
  text-decoration-style: dotted;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.2875em;
}

.nav .nav__buttons {
  display: flex;
  gap: 0.25em;
  position: absolute;
  right: var(--space-small);
}



.nav.nav--stuck {
  box-shadow: var(--box-shadow);
  position: fixed;
}



@media(hover: hover) {

  .nav .nav__content p a {
    transition:
      color var(--transition),
      text-decoration-color var(--transition),
      transform var(--transition)
    ;
    will-change: transform;
  }

  .nav .nav__content p a:focus,
  .nav .nav__content p a:hover {
    color: var(--color-ink);
    text-decoration-color: var(--color-ink);
    text-decoration-style: solid;
  }

  .nav .nav__content p a:active {
    transform: scale(0.98) translateY(0.0125em);
  }

}



@media(min-width: 48em) {

  .nav .nav__content {
    display: flex;
  }

}



@media(min-width: 64em) {

  .nav .nav__content br {
    display: none;
  }

}