/* The contact methods as one row of links joined by a "+", wrapping onto as
   many lines as the column needs.

   The separator is drawn by CSS rather than written into the markup: it is
   punctuation between the links, not content of its own, and keeping it out of
   the <li> leaves each link's accessible name as just its label. It leads its
   entry rather than trailing it, so a "+" never ends up stranded at the end of
   a wrapped line.

   The top margin matches the paragraph rhythm, so the row sits below the
   education paragraph exactly as another paragraph would. */

.contact {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.3em;
  margin-top: var(--lh-base);
}

.contact__item:not(:first-child)::before {
  content: "+";
  margin-inline-end: 0.3em;
}