/*
 * The public trail.
 *
 * It is drawn as a measuring axis rather than a marketing timeline: a single
 * rule with a tick at each year, the year set in mono above the tick, the
 * entry below it. On a phone the axis is vertical and runs down the left edge,
 * which is the one orientation that keeps six dated entries readable at 375 px
 * without a horizontal scroll.
 *
 * No icons, no cards, no dots-and-lines illustration. The evidence is the
 * design.
 */

.root {
  display: grid;
  gap: var(--s6);
}

.lead {
  margin: 0;
  color: var(--ink-2);
  max-width: 60ch;
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.entry {
  position: relative;
  display: grid;
  gap: var(--s1);
  align-content: start;
}

.year {
  position: relative;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.label {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.25;
}

.note {
  margin: 0;
  font-size: var(--step-small);
  color: var(--ink-2);
}

.count {
  margin: var(--s1) 0 0;
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-ink);
}

.source {
  margin: 0;
  padding-top: var(--s4);
  border-top: var(--hairline) solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  color: var(--muted);
}

/* ---- Phone and tablet: a vertical axis ---------------------------------- */

@media (max-width: 899px) {
  .entry {
    padding: 0 0 var(--s6) var(--s6);
    border-left: var(--hairline) solid var(--rule);
  }

  /* The axis stops at the last tick rather than running on into nothing. */
  .entry:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
    background: linear-gradient(var(--rule), var(--rule)) left top / var(--hairline) 0.75em
      no-repeat;
  }

  .tick {
    position: absolute;
    left: calc(var(--s6) * -1);
    top: 0.5em;
    width: var(--s4);
    height: var(--hairline);
    background: var(--ink);
    transform: translateY(-50%);
  }
}

/* ---- Desktop: a horizontal axis ----------------------------------------- */

@media (min-width: 900px) {
  .list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    column-gap: var(--s5);
    border-top: var(--hairline) solid var(--rule);
  }

  .entry {
    padding-top: var(--s5);
  }

  .tick {
    position: absolute;
    left: 0;
    top: calc(var(--s5) * -1);
    width: var(--hairline);
    height: var(--s4);
    background: var(--ink);
  }

  .label {
    margin-top: var(--s2);
  }
}

/*
 * The ticks draw down from the axis once, on reveal. It is a 300 ms detail and
 * it has one job: to say that these are measurements on a line, not six cards.
 * Nothing is hidden by it — the tick is furniture, every word is already there.
 */
@media (prefers-reduced-motion: no-preference) {
  .tick {
    animation: tick 300ms var(--ease) both;
    animation-delay: calc(var(--s1) * 0);
  }

  @keyframes tick {
    from {
      transform: scaleY(0);
    }
    to {
      transform: scaleY(1);
    }
  }

  @media (max-width: 899px) {
    .tick {
      transform-origin: left center;
      animation-name: tickX;
    }

    @keyframes tickX {
      from {
        transform: translateY(-50%) scaleX(0);
      }
      to {
        transform: translateY(-50%) scaleX(1);
      }
    }
  }

  @media (min-width: 900px) {
    .tick {
      transform-origin: top center;
    }
  }
}