/* =========================
   About page
   ========================= */

.about-head {
  margin-bottom: var(--s-7);
}

.about-head h1 {
  margin: 0 0 var(--s-4);
}


/* =========================
   Timeline
   ========================= */

.timeline {
  --dot: 24px;           /* white circle size */
  --end: 26px;           /* black end circle size */
  --gap: 64px;           /* vertical spacing between items */
  --rail-col: 48px;      /* left column width */
  --text-gap: 20px;      /* distance between rail and text */

  display: grid;
  grid-template-columns: var(--rail-col) 1fr;
  column-gap: var(--text-gap);
}

/* Stack items */
.timeline__items {
  grid-column: 1 / -1;
  position: relative;

  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* Vertical rail centered in rail column */
.timeline__items::before {
  content: "";
  position: absolute;
  left: calc(var(--rail-col) / 2);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line);
  transform: translateX(-50%);
}


/* =========================
   Timeline item
   ========================= */

.titem {
  display: grid;
  grid-template-columns: var(--rail-col) 1fr;
  column-gap: var(--text-gap);
  position: relative;
}

/* White circle */
.titem__dot {
  grid-column: 1;
  width: var(--dot);
  height: var(--dot);
  border-radius: 999px;
  background: var(--bg);
  border: 2px solid var(--text);
  justify-self: center;
  margin-top: 6px;
}

/* Content column */
.titem__content {
  grid-column: 2;
  min-width: 0;
}

/* Title (restore original typography) */
.titem__title {
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-size: var(--fs-3);
  line-height: var(--lh-snug);
  margin: 0;
}

/* Organization */
.titem__org {
  margin-top: 4px;
  font-size: var(--fs-2);
  line-height: var(--lh-snug);
}

/* Date */
.titem__date {
  margin-top: 12px;
  color: var(--muted);
  font-size: var(--fs-1);
}


/* =========================
   End black circle
   ========================= */

.tend {
  display: grid;
  grid-template-columns: var(--rail-col) 1fr;
  column-gap: var(--text-gap);
}

.tend__dot {
  grid-column: 1;
  width: var(--end);
  height: var(--end);
  border-radius: 999px;
  background: var(--text);
  justify-self: center;
}


/* =========================
   Responsive
   ========================= */

@media (max-width: 820px) {

  .timeline {
    --rail-col: 40px;
    --gap: 48px;
  }

  .titem__title {
    font-size: var(--fs-2);
  }

}