/* Timeline as a two-column table: year on the left, written once, with its
   entries stacked to the right. Column gap uses the font size rather than
   introducing a new spacing value. */

/* Grid only for the row gap: it keeps the space strictly between groups, where
   a margin on each would also push the first one away from whatever sits above
   the list. */
.timeline {
  display: grid;
  row-gap: var(--lh-base);
  margin-block: 0;
}

.timeline__group {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--fs-base);
}

.timeline__year {
  grid-column: 1;
  grid-row: 1;
}

/* An entry that runs past one line carries its continuation in from the left,
   so the eye can tell a wrapped line from the start of the next entry. The pair
   is what does it: the padding moves the whole block across, and the negative
   indent of the same size pulls the first line back out to where it would
   otherwise have started — leaving that line put and stepping in only the ones
   after it. */
.timeline__entry {
  grid-column: 2;
  /* <dd> is indented by default. */
  margin-inline-start: 0;
  padding-inline-start: calc(var(--fs-base) * 1.5);
  text-indent: calc(var(--fs-base) * -1.5);
}