/* Jevity Health Timeline — a zoomable life map. */
:root{--tl-teal:#2dd4a7;--tl-soft:#7cf0cf;--tl-ink:#f3f6f5;--tl-mut:#a9b3b8;--tl-faint:#6a747a;--tl-line:rgba(255,255,255,.09);--tl-card:rgba(255,255,255,.03)}
body.tlbody{background:#05070c}
.tl{color:var(--tl-ink);font-family:"Inter",system-ui,sans-serif;padding-bottom:4rem}
.tl-hero{max-width:820px;margin:0 auto;padding:clamp(2.4rem,6vw,4rem) clamp(1.2rem,5vw,2rem) 1rem;text-align:center}
.tl-kicker{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tl-teal);font-weight:600}
.tl-hero h1{font-family:"Fraunces",Georgia,serif;font-weight:300;letter-spacing:-.02em;font-size:clamp(2.3rem,6.5vw,4.2rem);line-height:1.03;margin:.6rem 0 1rem}
.tl-hero h1 em{font-style:italic;color:var(--tl-teal)}
.tl-sub{color:var(--tl-mut);max-width:56ch;margin:0 auto;font-size:1.02rem;line-height:1.7}

.tl-controls{max-width:1200px;margin:1.6rem auto .8rem;padding:0 clamp(1.2rem,5vw,2rem);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.tl-filters{display:flex;flex-wrap:wrap;gap:.4rem}
.tl-filter{display:inline-flex;align-items:center;gap:.4rem;background:var(--tl-card);border:1px solid var(--tl-line);color:var(--tl-mut);font:inherit;font-size:.82rem;padding:.35rem .8rem;border-radius:999px;cursor:pointer;transition:all .2s}
.tl-filter .dot{width:8px;height:8px;border-radius:50%}
.tl-filter.off{opacity:.4}
.tl-filter:hover{color:var(--tl-ink)}
.tl-zoom{display:flex;align-items:center;gap:.5rem}
.tl-zoom button{width:36px;height:36px;border-radius:10px;border:1px solid var(--tl-line);background:var(--tl-card);color:var(--tl-ink);font-size:1.2rem;cursor:pointer;transition:all .2s}
.tl-zoom button:hover{border-color:rgba(45,212,167,.5)}
.tl-zoom #tlScale{font-size:.8rem;color:var(--tl-faint);min-width:3rem;text-align:center}
.tl-today{width:auto!important;padding:0 .9rem;font-size:.82rem!important;color:var(--tl-soft)!important}

.tl-scroll{max-width:1200px;margin:0 auto;padding:0 clamp(1.2rem,5vw,2rem);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scroll-behavior:smooth}
.tl-scroll::-webkit-scrollbar{height:8px}.tl-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:4px}
.tl-track{position:relative;min-height:440px;padding-top:36px}
.tl-axis{position:relative;height:22px;border-bottom:1px solid var(--tl-line);margin-bottom:10px}
.tl-tick{position:absolute;top:0;transform:translateX(-50%);font-size:.72rem;color:var(--tl-faint);white-space:nowrap}
.tl-tick::after{content:"";position:absolute;left:50%;top:20px;width:1px;height:420px;background:rgba(255,255,255,.04)}
.tl-tick.decade{color:var(--tl-mut);font-weight:600}
.tl-now{position:absolute;top:36px;bottom:0;width:2px;background:linear-gradient(180deg,var(--tl-teal),transparent);z-index:3}
.tl-now span{position:absolute;top:-2px;left:50%;transform:translateX(-50%);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:#04130d;background:var(--tl-teal);padding:.12rem .45rem;border-radius:999px;white-space:nowrap}

.tl-lanes{position:relative}
.tl-lane{position:relative;height:78px;border-bottom:1px dashed rgba(255,255,255,.05)}
.tl-lane__label{position:sticky;left:0;z-index:4;display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tl-faint);padding:.2rem .5rem;background:rgba(5,7,12,.85);border-radius:6px;backdrop-filter:blur(4px)}
.tl-ev{position:absolute;top:26px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:transform .2s}
.tl-ev:hover,.tl-ev.active{transform:translateX(-50%) scale(1.12);z-index:5}
.tl-ev__dot{width:15px;height:15px;border-radius:50%;border:2px solid #05070c;box-shadow:0 0 0 1px var(--ec),0 0 12px color-mix(in srgb,var(--ec) 60%,transparent);background:var(--ec)}
.tl-ev__lbl{margin-top:5px;font-size:.7rem;color:var(--tl-mut);white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .2s}
.tl-track.dense .tl-ev__lbl{opacity:0}
.tl-track.roomy .tl-ev__lbl,.tl-ev:hover .tl-ev__lbl,.tl-ev.active .tl-ev__lbl{opacity:1}
.tl-ev__val{font-family:"Fraunces",serif;font-size:.82rem;color:var(--ec)}

.tl-future{position:absolute;top:36px;bottom:0;background:repeating-linear-gradient(135deg,rgba(45,212,167,.03),rgba(45,212,167,.03) 8px,transparent 8px,transparent 16px);border-left:1px dashed rgba(45,212,167,.25);z-index:1}
.tl-future__tag{position:absolute;top:2px;left:8px;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tl-soft)}

.tl-detail{max-width:1200px;margin:1.2rem auto 0;padding:1.3rem clamp(1.4rem,4vw,1.8rem);background:var(--tl-card);border:1px solid var(--tl-line);border-left:3px solid var(--ec,#2dd4a7);border-radius:16px}
.tl-detail__head{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.tl-detail__yr{font-family:"Fraunces",serif;font-size:1.6rem;color:var(--ec,#2dd4a7)}
.tl-detail__ttl{font-weight:600;font-size:1.15rem}
.tl-detail__cat{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tl-faint);border:1px solid var(--tl-line);padding:.15rem .5rem;border-radius:999px}
.tl-detail__body{color:var(--tl-mut);margin-top:.6rem;line-height:1.65;font-size:.95rem}
.tl-foot{max-width:900px;margin:2.4rem auto 0;padding:0 1.4rem;text-align:center;font-size:.76rem;color:var(--tl-faint);line-height:1.6}