/* ==========================================================================
   Project Timeline — horizontal scroll timeline (Philosophy page only).
   Default (mobile, reduced motion, no JS): a simple vertical list.
   js/timeline.js adds .tl-active on wide screens: the section pins, the track
   slides sideways with the scroll, and each step draws its stem and reveals its text.
   ========================================================================== */
.tl-section { background: #f7f5f0; }
.tl-stage { padding: clamp(2.25rem, 4.5vw, 3.75rem) 0; }
.tl-track { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.tl-photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tl-intro { margin: 2rem 0 2.5rem; }
.tl-intro h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.06; color: var(--navy-900); margin: .4rem 0 1rem; }
.tl-intro p { margin: 0; max-width: 46ch; line-height: 1.7; color: var(--ink); }
.tl-line { display: none; }

.tl-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.25rem; }
.tl-item { position: relative; padding-left: 1.75rem; }
.tl-stem { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--gold); }
.tl-dot { position: absolute; left: 0; top: .35rem; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); transform: translateX(-50%); }
.tl-when { display: block; margin-bottom: .45rem; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dark); }
.tl-item h3 { font-family: var(--font-serif); font-size: clamp(1.45rem, 2vw, 2rem); font-weight: 700; line-height: 1.1; color: var(--navy-900); margin: 0 0 .6rem; }
.tl-item p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink); max-width: 34ch; }

@media (min-width: 861px) {
  .tl-section.tl-active { height: 340vh; }
  .tl-active .tl-stage { position: sticky; top: 0; height: 100vh; box-sizing: border-box; padding: var(--header-h) 0 0; overflow: hidden; display: flex; flex-direction: column; }
  .tl-active .tl-track { position: relative; display: flex; align-items: stretch; width: max-content; height: min(100%, 600px); max-width: none; margin: auto 0; padding: 0 6vw; gap: 4vw; will-change: transform; }
  .tl-active .tl-photo { flex: none; width: 24vw; height: 70%; align-self: center; }
  .tl-active .tl-photo img { height: 100%; aspect-ratio: auto; }
  .tl-active .tl-intro { flex: none; width: 27vw; align-self: center; margin: 0; }
  .tl-active .tl-rail { position: relative; flex: none; }
  .tl-active .tl-line { display: block; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--gold); transform-origin: left center; }
  .tl-active .tl-items { grid-template-columns: repeat(4, 28vw); grid-template-rows: 1fr 1fr; gap: 0; height: 100%; }
  .tl-active .tl-item { display: flex; flex-direction: column; min-height: 0; padding: 0 2vw 0 2vw; }
  .tl-active .tl-item--top { grid-row: 1; justify-content: flex-start; padding-top: 1.5vh; }
  .tl-active .tl-item--bottom { grid-row: 2; justify-content: flex-end; padding-bottom: 1.5vh; }
  .tl-active .tl-item:nth-child(1) { grid-column: 1; }
  .tl-active .tl-item:nth-child(2) { grid-column: 2; }
  .tl-active .tl-item:nth-child(3) { grid-column: 3; }
  .tl-active .tl-item:nth-child(4) { grid-column: 4; }
  .tl-active .tl-item--top .tl-stem { transform-origin: bottom center; }
  .tl-active .tl-item--bottom .tl-stem { transform-origin: top center; }
  .tl-active .tl-item--top .tl-dot { top: auto; bottom: 0; transform: translate(-50%, 50%); }
  .tl-active .tl-item--bottom .tl-dot { top: 0; transform: translate(-50%, -50%); }
  .tl-active .tl-item p { font-size: .92rem; line-height: 1.55; max-width: 30ch; }
}