.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__container {
    align-items: center;
    display: flex;
    gap: var(--space-small);
    margin-inline: auto;
    position: relative;
    width: min(100%, 48em);
  }

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

  .nav__content {

    align-items: center;
    display: none;
    flex: 1;
    justify-content: center;

    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;

      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__buttons {
    display: flex;
    gap: 0.25em;
    position: absolute;
    right: var(--space-small);
  }

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

  @media(hover: hover) {

    .nav__content p a {

      transition:
        color var(--transition),
        text-decoration-color var(--transition),
        transform var(--transition)
      ;
      will-change: transform;

      &:focus,
      &:hover {
        color: var(--color-ink);
        text-decoration-color: var(--color-ink);
        text-decoration-style: solid;
      }

      &:active {
        transform: scale(0.98) translateY(0.0125em);
      }

    }

  }

  @media(min-width: 48em) {

    .nav__content {
      display: flex;
    }

  }

  @media(min-width: 64em) {

    .nav__content {

      br {
        display: none;
      }

    }

  }

}