/* BAKU ZOO — HISTORY. Light vertical timeline. */
.page-hero { position: relative; min-height: 54vh; display:flex; align-items:flex-end; padding: calc(var(--header-h) + 4rem) 0 3rem; text-align: center; overflow:hidden; isolation:isolate; }
.page-hero::before { content:""; position:absolute; inset:0; z-index:-2; background: url('../img/photos/zoo-after.jpg') center/cover; }
.page-hero::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(10,30,20,.4) 0%, rgba(10,30,20,.45) 50%, rgba(10,30,20,.88) 100%); }
.page-hero .container { position: relative; }
.page-hero .kicker { justify-content:center; margin-bottom:1rem; color:#fff; }
.page-hero h1 { font-size: clamp(2.2rem,1.6rem+3.6vw,4.2rem); color: #fff; text-shadow: 0 8px 30px rgba(0,0,0,.4); }
.page-hero p { max-width: 58ch; margin: 1.1rem auto 0; color: rgba(255,255,255,.92); }
.hist-intro { padding: clamp(2.5rem,5vw,4rem) 0 0; }
.hist-intro p { max-width: 70ch; margin: 0 auto; text-align: center; color: var(--ink-soft); font-size: 1.08rem; }

.timeline { padding: clamp(2.5rem,5vw,4rem) 0 clamp(4rem,8vw,7rem); }
.tl { position: relative; max-width: 880px; margin: 0 auto; }
.tl::before { content:""; position:absolute; inset-block:0; inset-inline-start:50%; width:3px; border-radius:3px; background: linear-gradient(var(--leaf), var(--teal)); transform: translateX(-50%); }
.tl-item { position: relative; width:50%; padding: 1.2rem 2.4rem; }
.tl-item:nth-child(odd){ inset-inline-start:0; text-align:end; }
.tl-item:nth-child(even){ inset-inline-start:50%; }
.tl-item::after { content:""; position:absolute; inset-block-start:1.7rem; width:18px; height:18px; border-radius:50%; background:#fff; border:4px solid var(--coral); }
.tl-item:nth-child(odd)::after{ inset-inline-end:-9px; } .tl-item:nth-child(even)::after{ inset-inline-start:-9px; }
.tl-card { background: var(--bg-card); border-radius: var(--r); padding:1.4rem 1.6rem; box-shadow: var(--shadow); display:inline-block; text-align: start; }
.tl-year { font-family:var(--f-display); font-weight:900; font-size:1.7rem; color: var(--forest); line-height:1; }
.tl-t { font-family:var(--f-display); font-weight:800; color: var(--ink); margin:.3rem 0 .4rem; }
.tl-d { color: var(--ink-soft); font-size:.92rem; }
@media (max-width:720px){
  .tl::before{ inset-inline-start:9px; }
  .tl-item, .tl-item:nth-child(even){ width:100%; inset-inline-start:0; text-align:start; padding-inline-start:2.4rem; padding-inline-end:0; }
  .tl-item:nth-child(odd){ text-align:start; }
  .tl-item::after, .tl-item:nth-child(odd)::after, .tl-item:nth-child(even)::after{ inset-inline-start:1px; }
}
.hist-note { margin-top:2rem; text-align:center; font-size:.84rem; color: var(--ink-soft); font-style: italic; }