.timeline { padding: 0 var(--pad-x); }
.tl-item { position: relative; padding: 0 0 26px 44px; }
.tl-item::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: -2px; width: 2px; background: var(--line-soft); }
.tl-item:last-child::before { display: none; }
.tl-item:last-child { padding-bottom: 0; }

.tl-node {
  position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 14px;
  box-shadow: var(--shadow-accent-sm);
}
.tl-item h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2vw, 20px); margin: 3px 0 6px; line-height: 1.15; }
.tl-item p { font-size: clamp(13px, 1.4vw, 14px); color: var(--ink-mute); margin: 0; line-height: 1.55; }

/* ─── Tablet+ (≥ 600px) ─────────────────────────────────────────── */
@media (width >= 600px) {
  .timeline {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 32px;
  }

  .tl-item {
    padding: 0 0 0 44px;
  }
  .tl-item::before { display: none; }
}

/* ─── Desktop (≥ 1024px) ─────────────────────────────────────────── */
@media (width >= 1024px) {
  .timeline { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .tl-item { padding: 0 0 0 36px; }
  .tl-node { width: 26px; height: 26px; font-size: 13px; }
}