/* =================================================================================================
   LFD timeline

   A spine with entries hung off it. Tokens only - Oswald for the eyebrow and the title, the
   canonical hairline for the spine, the section rhythm for the gaps.

   THE SPINE IS A BORDER, NOT A PSEUDO-ELEMENT WITH A HEIGHT. An ::after with a fixed height is a
   line that stops before the last entry on one viewport and runs past it on another; a
   border-inline-start on the list is exactly as long as the list is, at every width, for free.
   ================================================================================================= */

.lfd-timeline {
  inline-size: 100%;
  padding-block: var(--lfd-space-section);
  background: var(--lfd-color-paper);
  color: var(--lfd-color-ink);
  box-sizing: border-box;
}

.lfd-timeline * {
  box-sizing: border-box;
}

.lfd-timeline__inner {
  inline-size: 100%;
  max-inline-size: var(--lfd-measure, 97.5rem);
  margin-inline: auto;
  padding-inline: var(--lfd-gutter, 2.625rem);
}

.lfd-timeline__heading {
  margin: 0 0 var(--lfd-space-sm);
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-display-sm);
  font-weight: var(--lfd-weight-semibold);
  line-height: var(--lfd-leading-snug);
  letter-spacing: var(--lfd-tracking-snug);
  text-transform: uppercase;
}

.lfd-timeline__intro {
  margin: 0 0 var(--lfd-space-xl);
  max-inline-size: var(--lfd-width-text);
  font-size: var(--lfd-size-lead, 1.0625rem);
  line-height: var(--lfd-leading-body);
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.55));
}

.lfd-timeline__list {
  margin: 0;
  padding: 0 0 0 var(--lfd-space-lg);
  list-style: none;
  border-inline-start: var(--lfd-border-line);
}

.lfd-timeline__item {
  position: relative;
  padding-block: 0 var(--lfd-space-xl);
}

.lfd-timeline__item:last-child {
  padding-block-end: 0;
}

/* The node on the spine. Decorative: the list already carries the structure, and a screen
   reader announcing a bullet character at every entry is noise. */
.lfd-timeline__item::before {
  content: "";
  position: absolute;
  inset-inline-start: calc((var(--lfd-space-lg) + var(--lfd-border-hairline)) * -1);
  inset-block-start: 0.55em;
  inline-size: var(--lfd-space-xs);
  block-size: var(--lfd-border-thick);
  background: var(--lfd-color-ink);
}

.lfd-timeline__eyebrow {
  margin: 0 0 var(--lfd-space-3xs);
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-label-2xs, 0.625rem);
  font-weight: var(--lfd-weight-bold);
  letter-spacing: var(--lfd-tracking-label-lg);
  text-transform: uppercase;
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.55));
}

.lfd-timeline__title {
  margin: 0 0 var(--lfd-space-2xs);
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-display-sm);
  font-weight: var(--lfd-weight-semibold);
  line-height: var(--lfd-leading-tight);
  letter-spacing: var(--lfd-tracking-snug);
  text-transform: uppercase;
}

.lfd-timeline__link {
  color: inherit;
  text-decoration: none;
  border-block-end: var(--lfd-border-hairline) solid transparent;
}

.lfd-timeline__link:hover,
.lfd-timeline__link:focus-visible {
  border-block-end-color: currentcolor;
}

.lfd-timeline__meta {
  margin: 0 0 var(--lfd-space-2xs);
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-label-sm, 0.75rem);
  font-weight: var(--lfd-weight-medium);
  letter-spacing: var(--lfd-tracking-label-sm);
  text-transform: uppercase;
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.55));
}

.lfd-timeline__text {
  margin: 0;
  max-inline-size: var(--lfd-width-text);
  font-size: var(--lfd-size-body, 0.9375rem);
  line-height: var(--lfd-leading-body);
}

.lfd-timeline__badge {
  margin: var(--lfd-space-xs) 0 0;
  display: inline-block;
  padding: var(--lfd-space-3xs) var(--lfd-space-xs);
  border: var(--lfd-border-line);
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-label-2xs, 0.625rem);
  font-weight: var(--lfd-weight-bold);
  letter-spacing: var(--lfd-tracking-label);
  text-transform: uppercase;
}

@media (max-width: 767px) {

  .lfd-timeline__list {
    padding-inline-start: var(--lfd-space-md);
  }

  .lfd-timeline__item::before {
    inset-inline-start: calc((var(--lfd-space-md) + var(--lfd-border-hairline)) * -1);
  }
}