.header {
  background-color: #fff;
  padding: 5% 0;
  container: header / inline-size;
  @media (min-width: 1280px) {
    padding: 4rem 0;
  }
  @media (max-width: 700px) {
    padding: 1rem 0;
  }
  & .wrapped {
    position: relative;
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    align-items: center;
    @container header (width < 1000px) {
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }
  }
  .logo {
    font-size: 2.25rem;
    font-style: italic;
    color: var(--orange);
    white-space: nowrap;
    border-radius: 0.25rem;
    padding: 0.5rem 1.2rem;
    margin: -0.5rem -1.2rem;
    outline: 1px solid transparent;
    transition: outline 0.7s ease;
    @media (max-width: 390px) {
      font-size: 1.75rem;

    }
    &:hover {
      outline: 1px solid var(--orange);
    }

    a {
      text-decoration: none;
      display: block;
    }
    .subtitle {
      display: inline-block;
      font-size: 1.5rem;
      font-style: italic;
      color: #888 !important;
      padding-left: 1rem;
      @media (max-width: 390px) {
        font-size: 1.25rem;

      }
    }
  }
}

.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  & .link {
    white-space: nowrap;
    text-decoration: none;
    display: block;
    padding: 0.5rem 1rem;
    border-radius: 2px;
    transition: background-color 0.2s ease;
    @media (max-width: 750px) {
      padding: 0 0.75rem;
    }
    @media (max-width: 500px) {
      font-size: 1.1rem;
      padding: 0 0.5rem;
    }
    &:hover {
      background-color: var(--orange);
      color: #fff !important;
    }
  }

  & li {
    & a[aria-current="page"] {
      color: var(--orange);
      text-decoration: underline;
      text-underline-offset: 0.2em;
      text-decoration-thickness: 1px;
    }
  }
}