/* Timeline */
.tl{ padding: clamp(28px, 6vw, 64px) 0; background: #f7efe9; }
.tl__wrap{ width:min(1100px, 92%); margin:0 auto; }
.tl__title{
  font-family:"Recoleta Bold", ui-serif, Georgia, serif;
  font-weight: 800;
  font-size: clamp(28px, 5vw, 52px);
  line-height:1.1; text-align:center; margin:0 0 12px;
}
.tl__intro{ text-align:center; max-width: 760px; margin: 0 auto 28px; line-height:1.8 }

.tl__list{ list-style:none; padding:0; margin:0; display:grid; gap: clamp(26px, 4.5vw, 44px); }

.tl__row{
  display:grid;
  grid-template-columns: 120px 1.2fr 1fr;
  align-items:start;
  gap: clamp(14px, 3.5vw, 26px);
  /* background:#fff; border:1px solid #eee; border-radius: 14px; */
  padding: clamp(14px, 3.5vw, 22px);
  /* box-shadow: 0 8px 26px rgba(0,0,0,.05); */
  transform: translateY(12px);
  opacity: 0;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease;
}
.tl__row.is-in{ transform: translateY(0); opacity:1; }

.tl__year{
  font-family: ui-serif, Georgia, serif;
  font-size: clamp(24px, 3.6vw, 36px);
  color:#e0746f; font-weight: 700; letter-spacing:.03em;
  line-height:1; padding-top:.3em;
}

.tl__heading{
  font-weight: 700; font-size: clamp(20px, 2.6vw, 24px);
  margin: 0 0 6px;
}
.tl__body{ color:#2a2a2a; line-height: 1.85; }
.tl__media { width: 100%; }
.tl__frame{
  position: relative; width: 100%; padding-top: 56.25%;
  border-radius: 12px; overflow: hidden; background:#000;
  box-shadow: 0 10px 24px rgba(0,0,0,.1);
}
.tl__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.tl__img{
  width: 100%; height: auto; border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.1);
  display:block;
}

/* Stack on small screens */
@media (max-width: 880px){
  .tl__row,
  .tl__row.is-alt{
    grid-template-columns: 1fr;
  }
  .tl__year{ order: -1; }
  .tl__media{ order: 2; }
}