header {
  margin-top: 3svh;
  flex: 0 0 auto;

  & nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2svh 2svw;
  }
}

left-nav {
  display: flex;
  flex: 0 0 auto;
  align-items: center;

  & a {
    display: block;
    line-height: 0;
    transition: transform 0.3s;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);

    &:hover {
      transform: scale(1.1);
    }

    &:focus-visible {
      outline: 3px solid light-dark(var(--dark-background), var(--light-background));
      outline-offset: 3px;
    }
  }

  & img {
    display: block;
    width: min(11svh, max(6vw, 88px));
    height: auto;
  }
}

nav-button a {
  align-items: center;
  font-family: "Young Serif", serif;
  font-size: clamp(0.95rem, 2.2svh, 1.35rem);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.12em 0.4em;
  transition: all 0.1s;
  transition-timing-function: ease-in-out;

  &:hover, &:focus-visible {
    color: light-dark(var(--light-background), var(--dark-background));
    background-color: light-dark(var(--dark-background), var(--light-background));
    & header-suite img {
      filter: invert(1);
    }
  }

  &:focus-visible {
    outline: 3px solid light-dark(var(--dark-background), var(--light-background));
    outline-offset: 3px;
  }
}

right-nav {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: end;
  align-items: baseline;
  gap: 0.4rem clamp(0.6rem, 1.6vw, 1.75rem);

  & nav-button {
    & a {
      display: flex;
      font-size: 1em;
    }

    & header-suite {
      font-family: "Young Serif", serif;
      display: flex;
      transition: transform 0.3s;
      transition-timing-function: ease-in-out;
      padding-left: 0.2em;
      & img {
        height: 1em;
      }
      & img.diamonds {
        height: 1.4em;
      }
    }

    &:hover header-suite {
      transform: rotate(-15deg) scale(1.2);
    }
  }
}

right-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.2em;
}

@media (prefers-color-scheme: dark) {
  left-nav, right-nav {
    & img {
      filter: invert(1);
    }
  }

  right-nav {
    & nav-button a {
      &:hover, &:focus-visible {
        & header-suite img {
          filter: invert(0);
        }
      }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  left-nav a,
  right-nav a,
  right-nav header-suite,
  left-nav a:hover, right-nav a:hover header-suite {
    transition: none;
    transform: none;
  }
}

@media (width < 52rem) {
  header {
    & nav {
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    & right-nav {
      flex: 0 0 auto;
      justify-content: center;   /* was: end */
    }
  }
}

@media (width < 40rem) {
  footer-sparkles {
    display: none;
  }
}

footer {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  border-top: 0.1em solid light-dark(var(--dark-background), var(--light-background));;
  padding-top: 0.5em;
  display: flex;
  justify-content: space-between;

  & nav-button a {
    font-size: 1em;
  }
}