/* Shared top of every page.

   Mobile: one column. The standing links are placed on the first row
   explicitly, so auto-placement fills the rows beneath them with the text
   columns — a column a template leaves out simply never creates a row, so
   there is no empty row and no doubled gap.

   Desktop: three equal columns, the links taking the last one and settling
   against its right edge.

   The links are one grid item holding both navs rather than two items placed
   side by side, because they have to stay adjacent at every width — the whole
   point of the pair is that they read as one row of boxes. */

.header {
  display: grid;
  gap: calc(var(--fs-base) * 2);
}

/* Columns start flush with each other: the leading paragraph or list would
   otherwise push its column down by its own default top margin. The trailing
   one is trimmed too, so the space below the header is the grid's alone. */
.header__column > :first-child {
  margin-block-start: 0;
}

.header__column > :last-child {
  margin-block-end: 0;
}

/* The page link and the language codes share this box, held apart: the page
   link at the near edge, the codes at the far one, so the two read as separate
   controls rather than as one run of boxes.

   `wrap` is the escape hatch for a long label in a narrow column — the codes
   drop to a line of their own rather than squeezing the label into a column of
   letters. The gap matches the one between the codes, so the boxes stay evenly
   spaced wherever the row breaks. */
.header__links {
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  /* Both are needed once the row can wrap. As a grid item this box is stretched
     to the height of the tallest column, and a wrapping flex container spreads
     its lines over whatever height it is given — so a label long enough to push
     the codes onto a second line would otherwise drop them to the foot of the
     bio. `align-items` keeps each box at the top of its own line; `align-content`
     keeps the lines themselves together at the top. */
  align-items: flex-start;
  align-content: flex-start;
  gap: 0.4em;
}

/* An auto margin rather than `justify-content: space-between`, because the two
   behave differently once the row wraps: free space is handed to auto margins
   line by line, so the codes stay at the far edge even on a line of their own,
   where space-between — with nothing to space them against — would drop them
   back to the near edge under the page link. */
.header__lang {
  margin-inline-start: auto;
}

.lang__list {
  display: flex;
  gap: 0.4em;
}

@media (min-width: 60em) {
  .header {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Back into the flow: the third of three items on a single row. The
     first-row placement is mobile-only. */
  .header__links {
    grid-row: auto;
  }
}