.timeline{
  position:relative;
  max-width:640px;
  margin:0 auto;
  padding-left:calc(var(--space-4) + 10px);
}
.timeline::before{
  content:'';
  position:absolute;
  left:10px;
  top:6px;
  bottom:6px;
  width:1px;
  background:var(--line);
}
.tl-item{
  position:relative;
  padding-bottom:var(--space-5);
}
.tl-item:last-child{ padding-bottom:0; }
.tl-dot{
  position:absolute;
  left:calc(-1 * var(--space-4) - 5px);
  top:4px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--paper);
  border:1.5px solid var(--sage-deep);
}
.tl-time{
  font-family:var(--font-script);
  font-size:26px;
  color:var(--sage-deep);
  line-height:1;
  margin-bottom:var(--space-1);
}
.tl-content h3{
  font-family:var(--font-serif);
  font-weight:500;
  font-size:20px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:4px;
}
.tl-content p{
  font-size:14px;
  color:var(--ink-soft);
  line-height:1.6;
}

@media (max-width:640px){
  .timeline{ padding-left:calc(var(--space-3) + 10px); }
  .tl-dot{ left:calc(-1 * var(--space-3) - 5px); }
}