/* Experience timeline on the landing page (index.html, sk/index.html), driven by timeline/timeline.js.
   Without JavaScript every entry is shown as a plain list. With it, one entry is shown at a time: the page
   stays in place while you scroll down and the horizontal line glides back in time (older years appear on
   the left); the current entry is marked with a blue bullet. */
.tl-range { position: relative; }
html.tl-static, html.tl-static body { height: 100%; overflow: hidden; overscroll-behavior: none; }   /* static mode: the page never scrolls */
.tl-pin.on { position: sticky; top: 0; background: #fff; z-index: 1; }
.tl-pin.page.on { display: flex; flex-direction: column; }   /* main grows and centres itself between the header and the fixed footer */

.tl { margin: 40px 0 0; }
.tl h2.tl-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tl-axis { position: relative; height: 92px; overflow: hidden; display: none; }
.tl.js .tl-axis { display: block; }
.tl-track { position: absolute; left: 0; top: 0; height: 100%; transition: transform .75s cubic-bezier(.22, .9, .24, 1); will-change: transform; }
.tl-track.dragging { transition: none; }
.tl-stub { position: absolute; top: 50px; width: 64px; height: 1.5px; background: linear-gradient(90deg, rgba(17,17,17,0), #111); transition: left .75s cubic-bezier(.22, .9, .24, 1); }
.tl-line { position: absolute; top: 50px; height: 1.5px; background: #111; transition: left .75s cubic-bezier(.22, .9, .24, 1), width .75s cubic-bezier(.22, .9, .24, 1); }
.tl-tick { position: absolute; top: 46px; width: 1.5px; height: 10px; background: #111; transition: opacity .5s ease; }
.tl-year { position: absolute; top: 64px; transform: translateX(-50%); font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: #5f6670; transition: opacity .5s ease, color .4s ease, font-size .4s ease; }
.tl-year.on { font-size: 15px; font-weight: 700; color: var(--blue); top: 62px; }
.tl-now { position: absolute; top: 14px; height: 36px; border-left: 1.5px dashed var(--blue); }
.tl-now span { position: absolute; top: -6px; right: 6px; font-size: 11px; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.tl-mark { position: absolute; top: 43.5px; width: 14px; height: 14px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px #fff, 0 0 0 5.5px rgba(31,95,168,.25); transition: left .75s cubic-bezier(.22, .9, .24, 1); }
.tl-fade { position: absolute; right: 0; top: 0; bottom: 0; width: 60px; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }

.tl-list { list-style: none; margin: 0; padding: 0; }
.tl-item { margin: 0 0 28px; }
.tl.js .tl-item { display: none; margin: 14px 0 0; }
.tl.js .tl-item.on { display: block; animation: tl-in .5s cubic-bezier(.22, .9, .24, 1); }
.tl.js .tl-item.on.from-left { animation-name: tl-in-l; }
.tl.js .tl-item.on.from-right { animation-name: tl-in-r; }
@keyframes tl-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tl-in-l { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes tl-in-r { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.tl-dates { margin: 0 0 8px; font-family: ui-monospace, Menlo, monospace; font-size: 15px; font-weight: 700; color: var(--blue); }
.tl-title { margin: 0 0 8px; font-size: 26px; font-weight: 750; letter-spacing: -0.01em; line-height: 1.2; }
.tl-org { margin: 0; font-size: 15px; color: #5f6670; }
.tl-text { margin: 12px 0 0; font-size: 17px; line-height: 1.55; color: #333; }
.tl.js .tl-text { min-height: 80px; }
.tl-more { margin: 14px 0 0; }
.tl-more a { font-size: 15px; font-weight: 600; color: var(--ink); }
.tl-more a:hover { color: var(--blue); }

@media (max-width: 560px) {
  .tl { margin-top: 28px; }
  .tl-title { font-size: 22px; }
  .tl-text { font-size: 16px; }
  .tl.js .tl-text { min-height: 130px; }
}
/* static mode on short screens (laptops, phones): tighter spacing so everything fits without scrolling */
@media (max-height: 820px) {
  html.tl-static main { padding-top: 12px; padding-bottom: 12px; }
  html.tl-static h1 { margin-bottom: 8px; }
  html.tl-static .intro { margin-bottom: 0; }
  html.tl-static .tl { margin-top: 12px; }
  html.tl-static .tl-axis { height: 80px; }
  html.tl-static .tl-item { margin-top: 6px; }
}
@media (max-height: 700px) {
  html.tl-static h1 { font-size: clamp(34px, 8vw, 56px); }
  html.tl-static .tl-title { font-size: 21px; margin-bottom: 4px; }
  html.tl-static .tl-dates { margin-bottom: 4px; }
  html.tl-static .tl-text { font-size: 15px; margin-top: 8px; }
  html.tl-static .tl.js .tl-text { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-track, .tl-stub, .tl-line, .tl-mark, .tl-year, .tl-tick { transition: none; }
  .tl.js .tl-item.on { animation: none; }
}