/* La storia: le tappe in colonna e accanto un disco solo, fermo, che prende un pezzo per ogni tappa
   letta (storia.js). L'ultima, lo store, è il pezzo in corso (il rosso al 32%), come nel marchio. Le
   date nel carattere dei numeri, in tondo e in grigio: niente maiuscole spaziate. */
.tl { display: grid; grid-template-columns: 1fr; margin-top: 24px; }
.tl .tl-disc { display: none; }
.tl.live { grid-template-columns: 88px 1fr; column-gap: 28px; }
.tl.live .tl-disc { display: block; position: sticky; top: 96px; align-self: start; width: 88px; height: 88px; }
.tl-disc svg { display: block; width: 100%; height: 100%; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding-bottom: 26px; }
.tl.live .timeline li { opacity: .45; transition: opacity .3s; }
.tl.live .timeline li.seen { opacity: 1; }
.timeline time { display: block; font-family: "Barlow SC", sans-serif; font-weight: 600; font-size: 16px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.timeline b { display: block; font-size: 19px; margin-top: 2px; }
.timeline p { margin: 2px 0 0; color: var(--ink2); }
@media (max-width: 520px) { .tl.live { grid-template-columns: 56px 1fr; column-gap: 18px; } .tl.live .tl-disc { width: 56px; height: 56px; top: 84px; } }
@media (prefers-reduced-motion: reduce) { .tl.live .timeline li { transition: none; } }
.sign { font-family: "Bricolage", sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -.01em; margin-top: 28px; }