.timeline-intro { padding: clamp(5rem, 10vw, 9rem) 0; color: var(--white); background: var(--ink); }
.timeline-intro-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 5rem; align-items: end; }
.timeline-intro h1 { margin: 0; font-family: var(--serif); font-size: clamp(4rem, 8.5vw, 9.4rem); font-weight: 500; line-height: .84; letter-spacing: -.06em; }
.timeline-intro h1 em { color: var(--signal); font-style: normal; }
.timeline-intro-grid > div:last-child > p { max-width: 39rem; margin: 0; color: rgba(255,255,255,.72); font-size: 1.08rem; }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line-light); }
.metric-row span { font-size: .75rem; }
.metric-row strong { display: block; color: var(--signal); font-family: var(--serif); font-size: 2.6rem; font-weight: 500; }
.timeline-lab { position: relative; overflow: hidden; padding: clamp(4rem, 7vw, 7rem) 0; color: var(--white); background: var(--ink-deep); }
.timeline-lab::before { position: absolute; inset: -20%; content: ""; opacity: .18; background: repeating-radial-gradient(ellipse at 12% 42%, transparent 0 29px, var(--signal) 30px 31px, transparent 32px 48px); transform: rotate(-7deg); }
.timeline-lab .shell { position: relative; }
.timeline-stage { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(24rem, .8fr); min-height: 38rem; border: 1px solid var(--line-light); background: rgba(7,17,20,.72); box-shadow: 0 30px 90px rgba(0,0,0,.32); }
.timeline-visual { position: relative; min-height: 38rem; overflow: hidden; background: var(--ink); isolation: isolate; }
.timeline-visual::before, .timeline-visual::after { position: absolute; inset: 0; content: ""; z-index: -1; }
.timeline-visual::before { background: radial-gradient(circle at 45% 35%, rgba(217,114,82,.25), transparent 17rem), repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 5rem), repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 5rem); }
.timeline-visual::after { opacity: .72; background: repeating-radial-gradient(ellipse at 50% 50%, transparent 0 25px, rgba(217,114,82,.58) 26px 27px, transparent 28px 48px); transform: rotate(-16deg) scale(1.2); }
.timeline-visual[data-fallback="archive-raster"]::after { background: repeating-linear-gradient(0deg, transparent 0 6px, rgba(201,184,169,.22) 7px 8px), linear-gradient(135deg, rgba(217,114,82,.35), transparent); }
.timeline-visual[data-fallback="photogrammetry-points"]::after, .timeline-visual[data-fallback="excavation-grid"]::after { background-image: radial-gradient(circle, rgba(217,114,82,.65) 0 1px, transparent 1.5px); background-size: 10px 10px; transform: perspective(600px) rotateX(54deg) scale(1.5); }
.timeline-visual[data-fallback="panorama-ring"]::after { background: repeating-radial-gradient(circle at center, transparent 0 44px, rgba(201,184,169,.42) 45px 46px, transparent 47px 70px); transform: scale(1.2); }
.timeline-visual[data-fallback="approval-stamp"]::after { background: repeating-linear-gradient(45deg, transparent 0 38px, rgba(217,114,82,.34) 39px 40px); transform: none; }
.timeline-visual img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.03); }
.timeline-visual[data-visual-kind="representative"] { background: var(--paper); }
.timeline-visual[data-visual-kind="representative"] img { object-fit: contain; }
.timeline-visual[data-visual-kind="representative"] .timeline-visual-overlay { display: flex; color: var(--ink); background: rgba(238,232,220,.94); text-transform: none; }
.timeline-visual[data-visual-kind="representative"] [data-source-count] { display: none; }
.timeline-visual-overlay { position: absolute; z-index: 3; right: 1rem; bottom: 1rem; left: 1rem; display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .8rem; color: var(--signal); background: rgba(7,17,20,.76); border: 1px solid rgba(217,114,82,.45); font-family: var(--mono); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; }
.timeline-copy { display: flex; flex-direction: column; padding: clamp(2rem, 4vw, 4rem); border-left: 1px solid var(--line-light); }
.timeline-year-display { color: var(--signal); font-family: var(--serif); font-size: clamp(5rem, 9vw, 9rem); line-height: .8; letter-spacing: -.07em; }
.event-tabs { display: flex; gap: .45rem; min-height: 2.1rem; margin: 1.7rem 0 1.2rem; }
.event-tabs button { min-width: 2rem; height: 2rem; padding: 0 .65rem; border: 1px solid var(--line-light); color: var(--white); background: transparent; font-family: var(--mono); font-size: .62rem; cursor: pointer; }
.event-tabs button.is-active { color: var(--ink); background: var(--signal); border-color: var(--signal); }
.timeline-copy h2 { margin: 0; font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 4.6rem); font-weight: 500; line-height: .96; letter-spacing: -.04em; }
.timeline-copy > p { max-width: 37rem; color: rgba(255,255,255,.72); font-size: 1rem; }
.source-panel { margin-top: auto; padding-top: 1.3rem; border-top: 1px solid var(--line-light); }
.source-panel > span { color: var(--signal); font-family: var(--mono); font-size: .62rem; text-transform: uppercase; }
.source-panel p { margin: .5rem 0; color: rgba(255,255,255,.65); font-size: .78rem; }
.source-panel code { display: block; color: rgba(255,255,255,.45); }
.timeline-copy .button { width: fit-content; margin-top: 1.5rem; }
.timeline-controls { margin-top: 2rem; padding: 1.5rem; border: 1px solid var(--line-light); background: rgba(7,17,20,.72); }
.timeline-controls label { display: block; margin-bottom: .7rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.timeline-controls input[type="range"] { width: 100%; height: 1.2rem; margin: 0; accent-color: var(--signal); cursor: grab; }
.timeline-controls input[type="range"]:active { cursor: grabbing; }
.timeline-years { display: grid; grid-template-columns: repeat(auto-fit, minmax(3.8rem, 1fr)); margin-top: .8rem; }
.timeline-year { position: relative; min-height: 3.1rem; padding: .5rem 0; border: 0; border-left: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.2); background: transparent; font-family: var(--mono); font-size: .56rem; cursor: default; }
.timeline-year span { display: none; writing-mode: vertical-rl; }
.timeline-year:nth-child(5n + 1) span, .timeline-year:last-child span { display: inline; }
.timeline-year.is-event { color: var(--white); cursor: pointer; }
.timeline-year.is-event::before { position: absolute; top: -.3rem; left: -.3rem; width: .55rem; height: .55rem; content: ""; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px rgba(217,114,82,.15); }
.timeline-year.is-active { color: var(--signal); }
.timeline-year.is-active::before { transform: scale(1.5); background: var(--white); }
.timeline-legend { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1rem; color: rgba(255,255,255,.52); font-size: .68rem; }
.legend-dot { display: inline-block; width: .55rem; height: .55rem; margin-right: .35rem; border-radius: 50%; background: rgba(255,255,255,.2); }
.legend-dot--event { background: var(--signal); }
.review-register { background: var(--paper); }
.review-register code { display: block; max-width: 26rem; white-space: normal; }
.noscript-timeline { padding: 4rem 0; }
.noscript-timeline li { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.noscript-timeline p { margin: .3rem 0; }

@media (max-width: 960px) {
  .timeline-intro-grid, .timeline-stage { grid-template-columns: 1fr; }
  .timeline-copy { border-top: 1px solid var(--line-light); border-left: 0; }
  .timeline-visual { min-height: 30rem; }
}

@media (max-width: 640px) {
  .timeline-intro-grid { gap: 2.4rem; }
  .metric-row { grid-template-columns: 1fr; }
  .metric-row span { display: grid; grid-template-columns: 4rem 1fr; align-items: center; }
  .timeline-visual { min-height: 23rem; }
  .timeline-copy { padding: 1.5rem; }
  .timeline-years { grid-template-columns: repeat(auto-fit, minmax(3.8rem, 1fr)); padding-bottom: .5rem; }
}