#experience { background: var(--paper2); border-block: 1px solid var(--line); }
.timeline { position: relative; padding-left: 2.2rem; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: var(--accent); opacity: .5; }
.tl-item { position: relative; padding-bottom: 2.6rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; left: -2.2rem; top: 8px; width: 13px; height: 13px; background: var(--paper2); border: 2.5px solid var(--accent); border-radius: 50%; transition: .3s; }
.tl-item:hover::before { background: var(--accent); }
.tl-item .period { font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; color: var(--accent); text-transform: uppercase; }
.tl-item h3 { font-size: 1.35rem; margin: .35rem 0 .15rem; }
.tl-item .org { font-size: .9rem; color: var(--mut); margin-bottom: .6rem; }
.tl-item p { max-width: 62ch; color: #3B3D37; font-size: .95rem; }
.tl-item ul { margin: .7rem 0 0 1.1rem; font-size: .9rem; color: var(--ink2); }
.tl-item ul li::marker { color: var(--brass); }
.tl-item.now { background: var(--card); border: 1px solid var(--line); padding: 1.6rem 1.8rem; margin-left: -1.8rem; }
.tl-item.now::before { left: 1.55rem; top: 2rem; }
.tl-badge { display: inline-block; font-family: var(--mono); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: .3rem .7rem; margin-bottom: .8rem; }