.tl {
  --bordo: clamp(40px, 5vw, 88px);
  --col-min: 96px;
  --k-alta: 6.3;
  --col-alta: calc((100vh - var(--header-h) - 48px) / var(--k-alta));
  --col: clamp(var(--col-min), var(--col-alta), 240px);
  --scheda: calc(var(--col) * 1.7);
  --sfuma: clamp(40px, 5vw, 80px);
  padding-block: clamp(20px, 3vw, 56px) var(--spazio-sez);
  overflow-x: clip;
}

.tl__sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tl__cornice {
  position: relative;
  --linea-y: 50%;
}

.tl__scorri {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-block: 8px;
}
.tl__scorri::-webkit-scrollbar { display: none; }
.tl--scorre .tl__scorri { cursor: grab; }
.tl__scorri.is-trascinata,
.tl__scorri.is-trascinata * { cursor: grabbing; }

.tl--scorre .tl__scorri {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--sfuma), #000 calc(100% - var(--sfuma)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--sfuma), #000 calc(100% - var(--sfuma)), transparent 100%);
}
.tl--scorre.a-inizio .tl__scorri {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--sfuma)), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--sfuma)), transparent 100%);
}
.tl--scorre.a-fine .tl__scorri {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--sfuma), #000 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--sfuma), #000 100%);
}

.tl__freccia {
  position: absolute;
  z-index: 5;
  top: var(--linea-y);
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: clamp(36px, calc(var(--col) * .28), 54px);
  height: clamp(36px, calc(var(--col) * .28), 54px);
  padding: 0;
  border: 1.5px solid var(--blu);
  border-radius: 50%;
  background: var(--bianco);
  color: var(--blu);
  box-shadow: 0 8px 22px rgba(12, 25, 46, .14);
  cursor: pointer;
  transition: opacity .3s ease, background-color .25s ease, color .25s ease;
}
.tl__freccia svg { width: clamp(16px, calc(var(--col) * .1), 20px); height: auto; }
.tl__freccia--sx { left: clamp(8px, 1.5vw, 32px); }
.tl__freccia--dx { right: clamp(8px, 1.5vw, 32px); }
.tl__freccia:hover { background: var(--blu); color: var(--bianco); }
.tl__freccia:focus-visible { outline: 2px solid var(--blu); outline-offset: 3px; }
.tl__freccia:disabled { opacity: 0; pointer-events: none; }

.tl__lista {
  --punto: clamp(18px, calc(var(--col) * .18), 34px);
  --linea: clamp(3px, calc(var(--col) * .022), 4px);
  list-style: none;
  width: max-content;
  margin: 0 auto;
  padding: 0 var(--bordo);
  display: grid;
  grid-template-columns: repeat(9, var(--col));
  grid-template-rows: auto clamp(38px, calc(var(--col) * .34), 70px) auto;
}

.tl__lista::before {
  content: "";
  grid-row: 2;
  grid-column: 1 / -1;
  align-self: center;
  height: var(--linea);
  margin-left: calc(var(--col) / 2);
  margin-right: calc(-1 * var(--bordo));
  background: linear-gradient(to right, var(--blu) calc(100% - var(--bordo)), rgba(11, 80, 152, .15));
  border-radius: 2px;
  transform-origin: left center;
}

.tl__tappa {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
.tl__tappa:nth-child(1) { grid-column: 1; }
.tl__tappa:nth-child(2) { grid-column: 2; }
.tl__tappa:nth-child(3) { grid-column: 3; }
.tl__tappa:nth-child(4) { grid-column: 4; }
.tl__tappa:nth-child(5) { grid-column: 5; }
.tl__tappa:nth-child(6) { grid-column: 6; }
.tl__tappa:nth-child(7) { grid-column: 7; }
.tl__tappa:nth-child(8) { grid-column: 8; }
.tl__tappa:nth-child(9) { grid-column: 9; }

.tl__punto {
  grid-row: 2;
  justify-self: center;
  align-self: center;
  position: relative;
  z-index: 1;
  width: var(--punto);
  height: var(--punto);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--blu);
  cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tl__punto::after {
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: var(--bianco);
  scale: 0;
  transition: scale .35s var(--ease);
}
.tl__punto:hover { box-shadow: 0 0 0 6px rgba(11, 80, 152, .16); }
.tl__punto:focus-visible { outline: 2px solid var(--blu); outline-offset: 4px; }

.tl__scheda {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, calc(var(--col) * .085), 16px);
  width: var(--scheda);
  margin-inline: calc((var(--col) - var(--scheda)) / 2);
  min-width: 0;
}
.tl__scheda > * { transition: opacity .35s ease; }
.tl__tappa--sotto .tl__scheda { grid-row: 3; padding-top: clamp(8px, calc(var(--col) * .085), 16px); }
.tl__tappa--sopra .tl__scheda { grid-row: 1; padding-bottom: clamp(8px, calc(var(--col) * .085), 16px); }

.tl__tappa--sopra .tl__corpo { order: 1; }
.tl__tappa--sopra .tl__foto  { order: 2; margin-top: auto; }
.tl__tappa--sopra .tl__anno  { order: 3; }

.tl__anno {
  display: block;
  font-family: var(--font-etichette);
  font-weight: 700;
  font-size: clamp(28px, calc(var(--col) * .276), 64px);
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  color: var(--blu);
  cursor: pointer;
}

.tl__foto {
  margin: 0;
  aspect-ratio: 8 / 7;
  overflow: hidden;
  border-radius: 4px;
  background: var(--grigio-chiaro);
  cursor: zoom-in;
}
.tl__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
  -webkit-user-drag: none;
}
.tl__foto:focus-visible { outline: 2px solid var(--blu); outline-offset: 3px; }

.tl__corpo {
  font-size: clamp(11.5px, calc(var(--col) * .086), 14.5px);
  line-height: 1.4;
  color: var(--nero);
  hyphens: auto;
  overflow-wrap: break-word;
}
.tl__titolo {
  margin: 0 0 clamp(4px, calc(var(--col) * .045), 8px);
  font-family: var(--font-etichette);
  font-weight: 700;
  font-size: clamp(14px, calc(var(--col) * .115), 21px);
  line-height: 1.15;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blu);
  hyphens: manual;
}
.tl__logo {
  display: block;
  width: 78%;
  height: auto;
  margin-top: clamp(8px, calc(var(--col) * .07), 12px);
}
.tl__corpo p,
.tl__corpo ul { margin: 0; }
.tl__corpo ul { list-style: none; padding: 0; }
.tl__corpo li { padding-left: .85em; text-indent: -.85em; }
.tl__corpo li::before { content: "– "; }
.tl__corpo strong { font-weight: 800; color: var(--nero); }

.tl__tappa.is-attiva .tl__punto {
  transform: scale(1.3);
  box-shadow: 0 0 0 7px rgba(11, 80, 152, .18), 0 0 0 15px rgba(11, 80, 152, .07);
}
.tl__tappa.is-attiva .tl__punto::after { scale: 1; }
.tl__tappa.is-attiva .tl__foto img { transform: scale(1.06); }
.tl__lista.ha-attiva .tl__tappa:not(.is-attiva) .tl__scheda > * { opacity: .42; }

@media (prefers-reduced-motion: no-preference) {
  .tl--js .tl__lista::before { animation: tl-linea 1.4s var(--ease) both paused; }
  .tl--js .tl__punto {
    animation: tl-punto .6s var(--ease) both paused;
    animation-delay: calc(.15s + var(--i) * .1s);
  }
  .tl--js .tl__scheda {
    animation: tl-giu .8s var(--ease) both paused;
    animation-delay: calc(.3s + var(--i) * .1s);
  }
  .tl--js .tl__tappa--sopra .tl__scheda { animation-name: tl-su; }
  .tl--js.is-aperta .tl__lista::before,
  .tl--js.is-aperta .tl__punto,
  .tl--js.is-aperta .tl__scheda { animation-play-state: running; }
}
@keyframes tl-linea { from { scale: 0 1; } }
@keyframes tl-punto { from { scale: 0; } }
@keyframes tl-giu { from { opacity: 0; translate: 0 -18px; } }
@keyframes tl-su  { from { opacity: 0; translate: 0 18px; } }

@media (prefers-reduced-motion: reduce) {
  .tl__punto,
  .tl__punto::after,
  .tl__foto img,
  .tl__freccia { transition: none; }
}