/* ============================================================
   What's New — timeline
   ============================================================ */
.timeline { position: relative; display: grid; gap: 4px; }
.tl-item { display: grid; grid-template-columns: 200px 1fr; gap: 32px; padding: 28px 0; border-top: 1px solid var(--border); }
.tl-item:first-child { border-top: 0; }
@media (max-width: 720px){ .tl-item { grid-template-columns: 1fr; gap: 12px; } }
.tl-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
@media (max-width: 720px){ .tl-meta { flex-direction: row; align-items: center; } }
.tl-date { font-family: var(--font); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.tl-body h3 { margin: 0 0 8px; font-size: 1.35rem; }
.tl-body p { color: var(--text-2); font-weight: 300; margin: 0 0 14px; max-width: 640px; line-height: 1.6; }
.tl-cta { margin: 4px 0 16px; }
.tl-links { display: flex; flex-wrap: wrap; gap: 18px; }
.tl-links a { display: inline-flex; align-items: center; gap: 7px; font-size: .86rem; color: var(--text-2); }
.tl-links a svg { width: 15px; height: 15px; color: var(--text-3); transition: transform .2s var(--ease); }
.tl-links a:hover { color: #fff; }
.tl-links a:hover svg { transform: translateX(3px); color: #fff; }