/* (Fri, 06/26/2026) Claude Opus 4.8 */
/* Timeline of My Journeys — vertical-spine accordion */

/* card wrapper — white panel; --spine sets the accent for the line and dots (change once to recolor) */
.tl-card {--spine:#c0562e; background:#ffffff; border-radius:12px; padding:1.75rem 1.5rem; color:#000000; print-color-adjust:exact; -webkit-print-color-adjust:exact;}

/* header bar — section title on the left, expand/close-all control on the right */
.tl-bar {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; margin:0 0 1.5rem;}

/* section heading */
.tl-title {font-family:'Work Sans', sans-serif; font-size:26px; font-weight:700; margin:0; color:#000000;}

/* expand-all / close-all control */
.tl-toggle {font-family:'Work Sans', sans-serif; font-size:14px; font-weight:500; color:var(--spine); background:none; border:1px solid var(--spine); border-radius:6px; padding:6px 14px; cursor:pointer; user-select:none; white-space:nowrap; transition:background .2s ease, color .2s ease;}
.tl-toggle:hover, .tl-toggle:focus-visible {background:var(--spine); color:#ffffff; outline:none;}

/* timeline + item wrappers (relative positioning anchors the spine line and the dots) */
.tl {position:relative;}
.tl-item {position:relative;}

/* the vertical spine line, drawn behind each item */
.tl-item::before {content:''; position:absolute; left:16px; top:0; bottom:0; width:2px; background:var(--spine); z-index:0;}

/* trim the line so it begins and ends at the first/last dot centers */
.tl-item:first-child::before {top:28px;}
.tl-item:last-child::before {height:28px; bottom:auto;}

/* clickable header row; the 60px left padding clears the dot and indents the year */
.tl-head {position:relative; z-index:1; display:flex; align-items:center; width:100%; border-radius:8px; padding:16px 8px 16px 60px; cursor:pointer; box-sizing:border-box; user-select:none;}

/* the node sitting on the spine, vertically centered in the header */
.tl-dot {position:absolute; left:8px; top:50%; transform:translateY(-50%); width:18px; height:18px; border-radius:50%; background:var(--spine); border:3px solid #ffffff; box-sizing:border-box; transition:transform .2s ease;}

/* year + location group */
.tl-text {display:flex; align-items:center; flex-wrap:wrap; gap:4px 14px;}
.tl-year {font-family:'Work Sans', sans-serif; font-size:20px; font-weight:700; color:#000000; white-space:nowrap;}
.tl-loc {font-family:'Work Sans', sans-serif; font-size:20px; font-weight:400; color:#000000;}

/* chevron, pushed to the far right; flips when the panel opens */
.tl-chev {margin-left:auto; flex-shrink:0; color:#000000; transition:transform .25s ease;}
.tl-item.open .tl-chev {transform:rotate(180deg);}

/* hover / keyboard-focus state — terracotta bar with white text and a white dot */
.tl-head:hover, .tl-head:focus-visible {background:var(--spine); outline:none;}
.tl-head:hover .tl-year, .tl-head:focus-visible .tl-year, .tl-head:hover .tl-loc, .tl-head:focus-visible .tl-loc, .tl-head:hover .tl-chev, .tl-head:focus-visible .tl-chev {color:#ffffff;}
.tl-head:hover .tl-dot, .tl-head:focus-visible .tl-dot {background:#ffffff;}

/* collapsible panel — animates open by moving grid rows from 0fr to 1fr */
.tl-panel {display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease;}
.tl-item.open .tl-panel {grid-template-rows:1fr;}
.tl-panel > div {overflow:hidden;}

/* panel text — serif, aligned to the same 60px indent as the year */
.tl-body {font-family:'Lora', serif; margin:0; padding:0 8px 16px 60px; font-size:18px; line-height:1.7; color:#000000;}

/* print — force every panel open and hide the chevrons */
@media print {
   .tl-panel {grid-template-rows:1fr !important;}
   .tl-panel > div {overflow:visible !important;}
   .tl-item {page-break-inside: avoid !important;}
   .tl-chev {display:none;}
   .tl-toggle {display:none;}
   .tl-card {background:#ffffff;}
}