/* Page-scoped styles: no changes to shared header/footer or site-wide body rules. */
.timeline-page {
    --tl-ink: #111827;
    --tl-muted: #515967;
    --tl-line: #c8cbd1;
    --tl-accent: #c83d56;
    --tl-focus: #155eef;
    --tl-surface: #f2f3f5;
    color: var(--tl-ink);
    background: #fff;
    font-family: "Source Sans Pro", "Open Sans", Arial, sans-serif;
}
.timeline-page *, .timeline-page *::before, .timeline-page *::after { box-sizing: border-box; }
.timeline-page a { color: inherit; }
.timeline-page :focus-visible { outline: 3px solid var(--tl-focus); outline-offset: 4px; }
.timeline-skip {
    position: fixed; z-index: 10000; top: .5rem; left: .5rem; transform: translateY(-180%);
    padding: .75rem 1rem; color: #111827; background: #fff; border: 2px solid var(--tl-focus);
}
.timeline-skip:focus { transform: translateY(0); }
.timeline-main { padding: clamp(2.5rem, 6vw, 6rem) 0 3rem; }
.timeline-wrap { width: min(100% - 3rem, 1440px); margin-inline: auto; }
.timeline-intro { max-width: 68rem; margin-bottom: clamp(2.5rem, 7vw, 6rem); }
.timeline-eyebrow, .timeline-tag {
    margin: 0 0 .8rem; color: var(--tl-accent); font-size: .8rem; font-weight: 700;
    letter-spacing: .11em; line-height: 1.4; text-transform: uppercase;
}
.timeline-intro h1 {
    max-width: 14ch; margin: 0; color: var(--tl-ink); font-size: clamp(2.6rem, 7vw, 6.5rem);
    font-weight: 600; letter-spacing: -.055em; line-height: .98;
}
.timeline-deck { max-width: 48rem; margin: 1.25rem 0 0; color: var(--tl-muted); font-size: clamp(1.1rem, 2vw, 1.45rem); }
.timeline-summary { margin: 1.25rem 0 0; color: var(--tl-muted); font-size: .95rem; }
.timeline-view { border-top: 1px solid var(--tl-line); }
.timeline-stage {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr); gap: clamp(2rem, 5vw, 6rem);
    align-items: end; min-height: clamp(26rem, 47vw, 42rem); padding: clamp(2.5rem, 6vw, 5.5rem) 0 2rem;
}
.timeline-year { margin: 0; color: var(--tl-ink); font-size: clamp(5rem, 21vw, 18rem); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.075em; line-height: .82; overflow-wrap: anywhere; }
.timeline-card { width: 100%; max-width: 35rem; justify-self: end; }
.timeline-thumb { position: relative; display: grid; width: 100%; aspect-ratio: 3 / 2; margin: 0 0 1.25rem; overflow: hidden; place-items: center; background: #eceef1; }
.timeline-thumb img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.timeline-image-note { position: absolute; z-index: 1; right: .65rem; bottom: .65rem; max-width: calc(100% - 1.3rem); padding: .3rem .55rem; border-radius: 2px; background: rgba(17, 24, 39, .9); color: #fff; font-size: .75rem; line-height: 1.3; }
.timeline-thumb-fallback { max-width: 24ch; padding: 1.5rem; color: #263244; font-size: 1.1rem; line-height: 1.35; text-align: center; }
.timeline-card-body { padding-top: 1.1rem; border-top: 2px solid var(--tl-ink); }
.timeline-card-meta { display: flex; flex-wrap: wrap; gap: .35rem .8rem; align-items: baseline; margin-bottom: .55rem; }
.timeline-card-meta .timeline-tag { margin: 0; }
.timeline-era { margin: 0; color: var(--tl-muted); font-size: .95rem; }
.timeline-tbc { display: inline-block; margin-left: .35rem; padding: .15rem .5rem; border: 1px solid #727987; border-radius: 999px; color: #333b48; font-size: .78rem; letter-spacing: 0; text-transform: none; }
.timeline-card h2 { margin: .25rem 0 .65rem; color: var(--tl-ink); font-size: clamp(1.75rem, 3vw, 2.6rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; }
.timeline-description { max-width: 52ch; margin: 0 0 1rem; color: #343b47; font-size: 1.1rem; line-height: 1.5; }
.timeline-project-link { display: inline-flex; min-height: 44px; align-items: center; gap: .45rem; border-bottom: 1px solid currentColor; color: var(--tl-ink); font-weight: 600; text-decoration: none; }
.timeline-project-link:hover { color: var(--tl-accent); }
.timeline-track-scroll { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: #9097a2 #f1f2f4; }
.timeline-track { position: relative; width: max(100%, calc(var(--timeline-count, 1) * 5rem)); min-width: 100%; height: 6rem; }
.timeline-line, .timeline-progress { position: absolute; top: 1.55rem; left: 1.35rem; height: 2px; background: var(--tl-line); }
.timeline-line { right: 1.35rem; }
.timeline-progress { width: 0; background: var(--tl-ink); transition: width .25s ease; }
.timeline-dot { position: absolute; top: 1.55rem; display: grid; width: 44px; height: 44px; padding: 0; transform: translate(-50%, -50%); place-items: center; border: 0; background: transparent; cursor: pointer; }
.timeline-dot-mark { width: 13px; height: 13px; border: 2px solid var(--tl-ink); border-radius: 50%; background: #fff; transition: transform .2s ease, background-color .2s ease; }
.timeline-dot--context .timeline-dot-mark { border-color: #555e6b; border-style: dashed; }
.timeline-dot[aria-current="step"] .timeline-dot-mark { transform: scale(1.55); background: var(--tl-ink); }
.timeline-dot-label { position: absolute; top: 2.1rem; max-width: 6rem; overflow: hidden; color: var(--tl-muted); font-size: .78rem; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.timeline-dot[aria-current="step"] .timeline-dot-label { color: var(--tl-ink); font-weight: 700; }
.timeline-instructions { max-width: 70ch; margin: 0 0 1rem; color: var(--tl-muted); font-size: .92rem; }
.timeline-controls { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; padding: 0 0 3rem; }
.timeline-controls button { min-width: 6rem; min-height: 48px; padding: .65rem 1rem; border: 1px solid var(--tl-ink); border-radius: 999px; background: #fff; color: var(--tl-ink); font: inherit; font-weight: 600; cursor: pointer; }
.timeline-controls button:hover:not(:disabled) { background: var(--tl-ink); color: #fff; }
.timeline-controls button:disabled { cursor: not-allowed; opacity: .52; }
.timeline-controls .timeline-playing { border-width: 2px; }
.timeline-legend { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 0 auto; color: var(--tl-muted); font-size: .9rem; }
.legend-solid, .legend-dashed { display: inline-block; width: 11px; height: 11px; border: 2px solid var(--tl-ink); border-radius: 50%; background: #fff; }
.legend-dashed { margin-left: .35rem; border-color: #555e6b; border-style: dashed; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@media (max-width: 800px) {
    .timeline-wrap { width: min(100% - 2.5rem, 46rem); }
    .timeline-stage { grid-template-columns: 1fr; min-height: 0; gap: 2rem; padding-top: 3rem; }
    .timeline-year { font-size: clamp(5rem, 22vw, 10rem); }
    .timeline-card { max-width: none; justify-self: stretch; }
    .timeline-legend { width: 100%; margin: .25rem 0 0; }
}
@media (max-width: 480px) {
    .timeline-main { padding-top: 2rem; }
    .timeline-wrap { width: calc(100% - 2rem); }
    .timeline-intro { margin-bottom: 2.25rem; }
    .timeline-intro h1 { font-size: clamp(2.3rem, 11vw, 3.5rem); }
    .timeline-year { font-size: clamp(4.35rem, 20vw, 6rem); letter-spacing: -.07em; }
    .timeline-controls { gap: .5rem; }
    .timeline-controls button { min-width: 0; flex: 1 1 28%; padding-inline: .65rem; }
    .timeline-card h2 { font-size: 1.85rem; }
    .timeline-description { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
    .timeline-page *, .timeline-page *::before, .timeline-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    .timeline-controls #timeline-play { display: none; }
}