/* History (Timeline) page template */
.timeline-intro { padding: var(--space-xl) 0 var(--space-lg); }
.timeline-intro .about-intro { max-width: 60ch; margin: 0 auto; text-align: center; }

/* Sticky era navigation */
.timeline-nav {
    position: sticky;
    top: 68px;
    z-index: 20;
    background: var(--bg-overlay);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
@media (min-width: 861px) { .timeline-nav { top: 80px; } }

.timeline-nav-list {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}
.timeline-nav-list::-webkit-scrollbar { display: none; }

.timeline-nav-list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1rem;
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cream-muted);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color var(--transition), border-color var(--transition);
}
.timeline-nav-list a:hover,
.timeline-nav-list a.is-active { color: var(--gold-bright); border-bottom-color: var(--gold); }

/* Timeline spine */
.timeline { padding: var(--space-xl) 0 calc(var(--space-xl) * 1.5); }

.timeline-list {
    --spine-x: 1rem;
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}
.timeline-list::before,
.timeline-list::after {
    content: "";
    position: absolute;
    top: 0;
    left: var(--spine-x);
    width: 1px;
    transform: translateX(-50%);
}
.timeline-list::before { bottom: 0; background: var(--border-strong); }
.timeline-list::after {
    height: var(--progress, 0%);
    max-height: 100%;
    background: var(--gold);
}

.timeline-item {
    position: relative;
    padding: 0 0 var(--space-xl) calc(var(--spine-x) + 1.75rem);
    scroll-margin-top: 150px;
}

.timeline-node {
    position: absolute;
    top: 0.6rem;
    left: var(--spine-x);
    width: 11px;
    height: 11px;
    transform: translateX(-50%);
    border: 1px solid var(--gold);
    border-radius: 50%;
    background: var(--bg);
    transition: background var(--transition), box-shadow var(--transition);
}
.timeline-item-major .timeline-node { width: 17px; height: 17px; top: 0.75rem; border-width: 2px; }
.timeline-item.is-visible .timeline-node { background: var(--gold); box-shadow: 0 0 0 5px rgba(212, 175, 55, 0.15); }

.timeline-year {
    display: block;
    font-family: var(--font-heading);
    color: var(--gold);
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: var(--space-sm);
}
.timeline-item-major .timeline-year { font-size: clamp(2.5rem, 7vw, 4rem); line-height: 1; }

.timeline-card h3 { margin: 0 0 0.4rem; }

.timeline-subtitle {
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--cream);
    font-size: 1.1rem;
    margin-bottom: var(--space-md);
}
.timeline-lead { color: var(--cream-muted); max-width: 68ch; }

.timeline-item-major .timeline-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    padding: var(--space-lg);
}
.timeline-item-minor .timeline-card { padding: 0.25rem 0; }
.timeline-minor-title { color: var(--cream-muted); margin: 0; }

.timeline-photo { margin: 0 0 var(--space-md); border: 1px solid var(--border); padding: 0.4rem; background: var(--bg-lowest); }
.timeline-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center top; }

/* Read more */
.timeline-more { margin-top: var(--space-md); }
.timeline-more summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    cursor: pointer;
    color: var(--gold-bright);
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    list-style: none;
}
.timeline-more summary::-webkit-details-marker { display: none; }
.timeline-more summary::after { content: "+"; margin-left: 0.6rem; font-size: 1.1rem; }
.timeline-more[open] summary::after { content: "\2212"; }
.timeline-more summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Fixed-height scrollable body so long chapters don't stretch the timeline */
.timeline-body {
    color: var(--cream-muted);
    max-width: 68ch;
    max-height: 16rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: var(--gold-dim) transparent;
}
.timeline-body:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.timeline-body::-webkit-scrollbar { width: 6px; }
.timeline-body::-webkit-scrollbar-thumb { background: var(--gold-dim); }
.timeline-body p { margin-bottom: var(--space-md); }

/* Desktop: alternating cards around a central spine */
@media (min-width: 900px) {
    .timeline-list { --spine-x: 50%; }
    .timeline-item { padding-left: 0; padding-right: 0; width: 50%; }
    .timeline-side-left { padding-right: 3.5rem; }
    .timeline-side-right { margin-left: 50%; padding-left: 3.5rem; }
    .timeline-side-left .timeline-node { left: 100%; }
    .timeline-side-right .timeline-node { left: 0; }
    .timeline-side-left .timeline-card { text-align: right; }
    .timeline-side-left .timeline-lead,
    .timeline-side-left .timeline-body { margin-left: auto; }
    .timeline-side-left .timeline-body { text-align: left; }
    .timeline-item-major .timeline-card { padding: var(--space-lg) var(--space-xl); }
}

/* Reveal on scroll (only when JS marks the list) */
.timeline-list.js-ready .timeline-item { opacity: 0; transform: translateY(24px); transition: opacity 600ms ease, transform 600ms cubic-bezier(0.16, 1, 0.3, 1); }
.timeline-list.js-ready .timeline-item.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .timeline-list.js-ready .timeline-item { opacity: 1; transform: none; transition: none; }
}