@layer components {
  .timeline { position: relative; display: flex; flex-direction: column; gap: var(--space-lg); padding-left: 1.75rem; }
  .timeline::before { content: ""; position: absolute; top: 0.5rem; bottom: 0.5rem; left: 0.4375rem; width: 2px; background: var(--xf-ink); }
  .timeline__item { position: relative; }
  .timeline__dot { position: absolute; top: 0.25rem; left: -1.75rem; width: 1rem; height: 1rem; border: var(--xf-border-thin); border-radius: 50%; background: var(--xf-surface); }
  .timeline__dot--active { background: var(--xf-amber); }
  .timeline__content { display: flex; flex-direction: column; gap: var(--space-xs); }
  .timeline__date-label { font-size: var(--text-sm); font-weight: 600; }
  .timeline__title { font-family: var(--xf-font-body); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
  .timeline__text { color: var(--xf-ink-soft); font-size: var(--text-sm); }
}