.site-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-lg);
  padding-block: var(--space-md);
  padding-inline: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  max-inline-size: var(--measure);
  margin-inline: auto;

  & .site-header__logo {
    font-weight: bold;
    font-size: 1.2rem;
    text-decoration: none;
    color: var(--color-accent);

    &:visited {
      color: var(--color-accent);
    }
  }
}

.site-nav {
  display: flex;
  gap: var(--space-md);

  & .site-nav__link {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }

    &.site-nav__link--active {
      font-weight: bold;
      text-decoration: underline;
      color: var(--color-fg);

      &:visited {
        color: var(--color-fg);
      }
    }
  }
}

.site-main {
  max-inline-size: var(--measure);
  margin-inline: auto;
  padding-block: var(--space-lg);
  padding-inline: var(--space-md);
}