/* Timeline: a vertical list in order of date. A 1px spine runs down it,
   with the dates on its left and the organisation on its right. The
   experience page and the education page both use it, on the home page
   and on their own pages. */

.timeline {
  display: grid;
  gap: 0;
  /* --spine: the distance to the spine. --node: the diameter of a node.
     --node-y: the top of an entry to the middle of its node. */
  --spine: 11rem;
  --node: 9px;
  --node-y: 0.92rem;
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: var(--spine) 1fr;
  gap: 1.6rem;
  padding: 0 0 2.4rem;
}

.timeline-item:last-child { padding-bottom: 0; }

/* Each entry draws its part of the spine. The parts touch, so the line
   looks continuous. */
.timeline-item::before {
  content: "";
  position: absolute;
  left: var(--spine);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.timeline-item:first-child::before { top: var(--node-y); }

.timeline-item:last-child::before { bottom: auto; height: var(--node-y); }

/* The node sits on the spine. */
.timeline-item::after {
  content: "";
  position: absolute;
  left: calc(var(--spine) + 0.5px - var(--node) / 2);
  top: calc(var(--node-y) - var(--node) / 2);
  width: var(--node);
  height: var(--node);
  border-radius: 50%;
  background: var(--paper);
  /* A hollow node and a full node give data, so the line needs more
     contrast than --line. */
  border: 1px solid var(--line-strong);
}

/* A position that continues today gets a full node. Its dates hold the word
   Present. */
.timeline-item:has(.now)::after {
  background: var(--accent);
  border-color: var(--accent);
}

/* The entries fade in but do not move. A move breaks the spine. */
.timeline-item.reveal { transform: none; }

.timeline-when {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding-top: 0.28rem;
  padding-right: 1.4rem;
}

.timeline-when .now { color: var(--accent); }

.timeline-what {
  display: flex;
  gap: 1.15rem;
  align-items: flex-start;
}

.timeline-what .org-icon { margin-top: 0.15rem; }

.timeline-what h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
}

.timeline-org {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0.3rem 0 0.6rem;
  overflow-wrap: break-word;
}

.timeline-what p {
  max-width: var(--w-prose);
  font-size: 0.97rem;
  color: var(--ink);
}

/* On a narrow screen the spine goes to the left edge, and the dates above
   the organisation. */
@media (max-width: 720px) {
  .timeline {
    --spine: 0.3rem;
    --node-y: 0.65rem;
  }

  .timeline-item {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 0 0 1.9rem 1.6rem;
  }

  .timeline-when { padding-top: 0; padding-right: 0; }
  .timeline-what { gap: 0.9rem; }
  .timeline-what h3 { font-size: 1.02rem; }
}

/* A link in an entry: the text colour with a 1px underline, and the accent
   on hover. */
.timeline-text p a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  transition: color 140ms ease, border-color 140ms ease;
}

.timeline-text p a:hover, .timeline-text p a:focus-visible {
  color: var(--accent-strong);
  border-bottom-color: var(--accent);
}

/* A title can be a link, for example a talk that goes to its paper. */
.timeline-text h3 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  transition: color 140ms ease, border-color 140ms ease;
}

.timeline-text h3 a:hover, .timeline-text h3 a:focus-visible {
  color: var(--accent-strong);
  border-bottom-color: var(--accent);
}