/* Timeline cards (mu-plugin kemble-timeline) */
.tl-hero { margin: 14px 0 22px; padding: 20px 22px; border-radius: 18px; background: linear-gradient(120deg, #1f3f5c, #2f5f86 60%, #c9a227); color: #fff; font-family: var(--font-ui); animation: tl-fade 0.8s var(--ease) both; }
@keyframes tl-fade { from { opacity: 0; transform: translateY(10px); } }
.tl-kicker { margin: 0 0 4px !important; font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; opacity: 0.85; color: #fff; }
.entry-content .tl-hero h2 { margin: 0 0 10px !important; color: #fff; font-size: 26px; }
.tl-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 10px; } .tl-facts b { display: block; font-family: var(--font-serif); font-size: 24px; line-height: 1.1; color: #f0d27a; } .tl-facts span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.85; }
.tl-people { margin: 0 !important; display: flex; flex-wrap: wrap; gap: 5px; max-width: none !important; }
.entry-content .tl-person { padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,0.18); color: #fff !important; font-size: 12.5px; font-weight: 700; text-decoration: none; background-image: none; transition: background 0.2s; } .entry-content .tl-person:hover, .entry-content .tl-person.is-on { background: #f0d27a; color: #1e2732 !important; }
.tl-line { position: relative; padding-left: 118px; font-family: var(--font-ui); } .tl-line::before { content: ""; position: absolute; left: 96px; top: 6px; bottom: 6px; width: 3px; background: var(--line); border-radius: 3px; }
@media (max-width: 600px) { .tl-line { padding-left: 0; } .tl-line::before { display: none; } .tl-when { position: static !important; text-align: left !important; width: auto !important; margin-bottom: 4px; } .tl-stage::before { display: none; } }
.tl-stage { position: relative; margin: 0 0 14px; opacity: 0; transform: translateX(14px); animation: tl-in 0.55s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 90ms); transition: opacity 0.3s; }
@keyframes tl-in { to { opacity: 1; transform: none; } }
.tl-stage.is-dim { opacity: 0.35; } .tl-stage.is-hit .tl-card { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,39,0.35); }
.tl-when { position: absolute; left: -118px; top: 10px; width: 86px; text-align: right; } .tl-when b { font-family: var(--font-serif); font-size: 17px; color: var(--accent-strong); line-height: 1.15; display: block; }
.tl-stage::before { content: ""; position: absolute; left: -28px; top: 16px; width: 13px; height: 13px; border-radius: 50%; background: var(--gold); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--line); }
.tl-card { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--shadow-sm); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s; } .tl-stage:hover .tl-card { transform: translateX(4px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.tl-card h3 { margin: 0 0 6px !important; font-family: var(--font-serif); font-size: 17.5px; line-height: 1.3; color: var(--accent-strong); } .tl-card p { margin: 0 !important; font-size: 14.5px; line-height: 1.55; max-width: none !important; }
.tl-name { padding: 1px 7px; margin: 0 1px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; font-size: 0.92em; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .tl-hero, .tl-stage { animation: none; opacity: 1; transform: none; } }