/* About page: pinned horizontal timeline (GSAP ScrollTrigger). Each milestone is a full-viewport colour
   panel in one wide row. As a panel scrolls out to the left, main.js pins its year near the viewport edge
   and rotates it to vertical, so the outgoing era reads as a narrow spine beside the incoming one. */
.timeline { position: relative; height: 100vh; overflow: hidden; background: var(--black); }
.tl-row { display: flex; width: max-content; height: 100%; }
.tl-panel { position: relative; flex: 0 0 auto; width: var(--tl-panel-w, 100vw); height: 100%; overflow: hidden; background: var(--bg); color: var(--fg); }
/* Sized to its own text so the rotation maths in main.js can measure a real box. */
.tl-year { position: absolute; top: 56%; left: var(--gutter); margin: 0; font-size: clamp(80px, 15vw, 240px); font-weight: 900; letter-spacing: -0.045em; line-height: 0.9; white-space: nowrap; transform-origin: left center; will-change: transform; }
.tl-note { position: absolute; top: calc(var(--gutter) + 68px); right: var(--gutter); width: min(30ch, 34vw); }
.tl-label { margin: 0 0 10px; font-size: 10px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.55; }
.tl-text { margin: 0; font-size: 14px; line-height: 1.65; opacity: 0.78; }
.tl-rail { position: absolute; z-index: 3; right: var(--gutter); bottom: 44px; left: var(--gutter); height: 1px; background: rgba(128, 128, 128, 0.4); }
.tl-dot { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; margin: -5px 0 0 -4px; border-radius: 50%; background: var(--accent); }
/* No JS / no GSAP: the row just scrolls sideways instead of animating. */
.timeline:not(.is-ready) .tl-row { overflow-x: auto; }
@media (max-width: 640px) {
  .tl-year { font-size: clamp(64px, 22vw, 120px); }
  .tl-note { top: auto; bottom: 96px; left: var(--gutter); width: auto; }
}