/* SFIZIO v2 block — timeline (prep narrative). Pair with blocks/timeline/block.js. */
.tl { position: relative; display: grid; grid-template-columns: 20px 1fr; gap: var(--sp-4); }
.tl__spine { position: relative; }
.tl__spine::before {
  content: ""; position: absolute; inset: 0 auto 0 9px; width: 2px;
  background: var(--line);
}
.tl__spine i {
  position: absolute; inset: 0 auto 0 9px; width: 2px;
  background: var(--dining);
  transform: scaleY(0); transform-origin: top;
  display: block;
}
.tl__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-6); }
.tlstep {
  position: relative;
  display: grid; gap: var(--sp-2);
  opacity: 0.35; transform: translateX(10px);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.tlstep::before {                       /* node dot on the spine */
  content: ""; position: absolute; left: calc(-1 * var(--sp-4) - 20px + 4px); top: 0.5rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line-strong);
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.tlstep.is-on { opacity: 1; transform: none; }
.tlstep.is-on::before { background: var(--dining); border-color: var(--dining); }

.tlstep__k {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--dining);
}
.tlstep h3 { font-size: var(--fs-lg); }
.tlstep p { color: var(--muted); max-width: 46ch; }
.tlstep .media { max-width: 22rem; margin-top: var(--sp-2); }

@media (prefers-reduced-motion: reduce) {
  .tlstep { opacity: 1; transform: none; transition: none; }
  .tl__spine i { transform: scaleY(1); }
}