.timeline-main { min-width: 0; padding: 48px 0 80px; }
.timeline-intro { margin-bottom: 46px; }
.timeline-empty { padding: 24px; border: 1px solid var(--line); background: var(--surface); color: var(--sub); }
.timeline { position: relative; display: grid; gap: 8px; padding: 20px 0 30px; }
.timeline::before { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--accent); content: ""; transform: translateX(-50%); }
.timeline-event { position: relative; display: grid; grid-template-columns: 1fr 96px 1fr; min-height: 230px; align-items: center; }
.timeline-date { z-index: 2; grid-column: 2; justify-self: center; padding: 8px 12px; border: 2px solid var(--accent); background: #0b0d0e; color: var(--bright); font: 800 14px/1.2 Consolas, monospace; letter-spacing: .08em; text-align: center; }
.timeline-card { position: relative; width: min(100%, 360px); padding: 24px; border: 1px solid var(--line-strong); background: var(--surface); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.timeline-card::before { position: absolute; top: 50%; width: 48px; border-top: 2px dotted var(--line-strong); content: ""; }
.timeline-event.is-right .timeline-card { grid-column: 3; justify-self: start; }
.timeline-event.is-right .timeline-card::before { right: 100%; }
.timeline-event.is-left .timeline-card { grid-column: 1; grid-row: 1; justify-self: end; }
.timeline-event.is-left .timeline-card::before { left: 100%; }
.timeline-card h2 { margin: 5px 0 10px; color: var(--bright); font-size: 20px; line-height: 1.4; }
.timeline-card p { margin: 0; color: #a8afad; font-size: 13px; line-height: 1.85; }
.timeline-number { color: var(--accent); font: 10px/1 Consolas, monospace; letter-spacing: .16em; }

@media (max-width: 760px) {
  .timeline { gap: 24px; padding-left: 28px; }
  .timeline::before { left: 10px; transform: none; }
  .timeline-event { display: grid; grid-template-columns: 1fr; gap: 10px; min-height: 0; }
  .timeline-date { grid-column: 1; justify-self: start; margin-left: -28px; }
  .timeline-event.is-left .timeline-card, .timeline-event.is-right .timeline-card { grid-column: 1; grid-row: auto; justify-self: stretch; width: 100%; }
  .timeline-card::before { display: none; }
}