header {
  margin-bottom: var(--gap-section);
  padding-bottom: var(--gap-group);
  border-bottom: var(--px) solid var(--heavy);

  h1 {
    margin: 0;
    font: inherit;
    text-align: center;
    color: var(--bg);
    background-color: var(--heavy);
  }

  nav {
    display: flex;
    justify-content: center;
    gap: 1ch;
    margin-top: var(--gap-group);

    span {
        color: var(--tint);
    }

    a:hover {
      background-color: var(--accent);
    }
  }
}

/* PROJECTS */

.projects {
  .year {
    margin: 0 0 var(--gap-row);
    font: inherit;
    text-align: center;
    color: var(--tint);
  }

  ul + .year {
    margin-top: var(--gap-group);
  }

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li + li {
    margin-top: var(--gap-row);
  }

  a {
    display: flex;
    align-items: baseline;
    gap: 1ch;

    &:hover {
      background-color: var(--accent);

      .leader {
        border-color: var(--heavy);
      }
    }
  }

  .leader {
    flex: 1;
    align-self: center;
    min-width: 2ch;
    border-top: var(--px) dashed var(--tint);
  }

  .date {
    flex: none;
  }
}

/* NARROW SCREENS */

@media (width < 480px) {
  header nav {
    flex-wrap: wrap;

    span {
      display: none;
    }
  }

  .projects a {
    flex-wrap: wrap;

    .leader {
      display: none;
    }

    .date {
      color: var(--tint);
    }
  }
}