/* La cronologia è autonoma: riguarda soltanto studio.html. */
.studio-timeline {
  background:#f9f8f3;
  padding:110px 0 130px;
  overflow:hidden;
}
.studio-timeline__head {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(260px,.55fr);
  gap:8%;
  align-items:end;
  margin-bottom:75px;
}
.studio-timeline__head h2 {
  font-size:clamp(52px,5.6vw,88px);
  line-height:1.02;
  letter-spacing:-.065em;
  max-width:900px;
  margin:20px 0 0;
}
.studio-timeline__head h2 span { color:var(--blue); }
.studio-timeline__head p {
  margin:0 0 6px;
  max-width:365px;
  color:var(--soft);
  font-size:18px;
  line-height:1.52;
}
.studio-timeline__track {
  --timeline-progress:0%;
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,3vw,52px);
}
.studio-timeline__track::before,
.studio-timeline__track::after {
  content:"";
  position:absolute;
  left:0;
  top:107px;
  height:3px;
  pointer-events:none;
}
.studio-timeline__track::before {
  right:0;
  background:repeating-linear-gradient(90deg,#a9b0a9 0 3px,transparent 3px 9px);
}
.studio-timeline__track::after {
  width:var(--timeline-progress);
  background:var(--green);
  transition:width .1s linear;
}
.studio-timeline__event { position:relative; min-width:0; }
.studio-timeline__event::before {
  content:"";
  position:absolute;
  z-index:2;
  top:98px;
  left:0;
  width:20px;
  height:20px;
  border:3px solid var(--green);
  border-radius:50%;
  background:#f9f8f3;
}
.studio-timeline__event time,
.studio-timeline__event .studio-timeline__today {
  display:block;
  color:var(--ink);
  font-size:clamp(45px,4.4vw,70px);
  font-weight:600;
  line-height:1;
  letter-spacing:-.065em;
  margin-bottom:78px;
}
.studio-timeline__event h3 {
  font-size:clamp(21px,2vw,29px);
  line-height:1.17;
  letter-spacing:-.035em;
  margin:0 0 14px;
}
.studio-timeline__event p {
  max-width:300px;
  color:var(--soft);
  font-size:16px;
  line-height:1.52;
  margin:0;
}
.studio-timeline__event--current::before { background:var(--pink); border-color:var(--pink); }
.studio-timeline__event--current .studio-timeline__today { color:var(--blue); }
.studio-timeline.timeline-motion .studio-timeline__event {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .6s ease,transform .6s ease;
}
.studio-timeline.timeline-motion .studio-timeline__event.is-visible {
  opacity:1;
  transform:none;
}
@media(min-width:701px) {
  .studio-timeline.timeline-motion .studio-timeline__event:nth-child(2) { transition-delay:.12s; }
  .studio-timeline.timeline-motion .studio-timeline__event:nth-child(3) { transition-delay:.24s; }
  .studio-timeline.timeline-motion .studio-timeline__event:nth-child(4) { transition-delay:.36s; }
}
@media(max-width:900px) {
  .studio-timeline__head { grid-template-columns:1fr; gap:22px; }
  .studio-timeline__track { gap:22px; }
  .studio-timeline__event p { font-size:15px; }
}
@media(max-width:700px) {
  .studio-timeline { padding:80px 0 92px; }
  .studio-timeline__head { margin-bottom:52px; }
  .studio-timeline__head h2 { font-size:clamp(49px,10vw,70px); }
  .studio-timeline__head p { font-size:17px; }
  .studio-timeline__track { display:block; padding-left:43px; }
  .studio-timeline__track::before,
  .studio-timeline__track::after {
    left:10px;
    top:5px;
    width:3px;
    height:calc(100% - 52px);
  }
  .studio-timeline__track::before {
    background:repeating-linear-gradient(180deg,#a9b0a9 0 3px,transparent 3px 9px);
  }
  .studio-timeline__track::after {
    height:var(--timeline-progress);
    max-height:calc(100% - 52px);
    transition:height .1s linear;
  }
  .studio-timeline__event { padding:0 0 53px; }
  .studio-timeline__event:last-child { padding-bottom:0; }
  .studio-timeline__event::before { left:-41px; top:7px; width:19px; height:19px; }
  .studio-timeline__event time,
  .studio-timeline__event .studio-timeline__today {
    font-size:clamp(41px,9vw,60px);
    margin-bottom:14px;
  }
  .studio-timeline__event h3 { font-size:25px; margin-bottom:9px; }
  .studio-timeline__event p { max-width:460px; font-size:17px; }
}
@media(prefers-reduced-motion:reduce) {
  .studio-timeline.timeline-motion .studio-timeline__event { opacity:1; transform:none; transition:none; }
  .studio-timeline__track::after { transition:none; }
}