body.s-story{
  background:
    radial-gradient(850px 600px at 10% 0%,hsl(var(--h) 85% 90% / .75),transparent 60%),
    var(--cream);
}
.day{padding:4.5rem 0}
.day .stick{
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:2.8rem;
  align-items:start;
}
.sticky{position:sticky;top:100px}
.timeline{
  position:relative;
  display:grid;
  gap:20px;
  padding-left:28px;
}
.timeline:before{
  content:"";
  position:absolute;
  left:19px;
  top:20px;
  bottom:20px;
  width:4px;
  background:linear-gradient(to bottom,var(--c),var(--orange));
  border-radius:4px;
}
.day .step{
  position:relative;
  cursor:pointer;
}
.tl-dot{
  position:absolute;
  left:-28px;
  top:20px;
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--surface);
  border:3px solid var(--c);
  display:grid;
  place-items:center;
  font-size:1.05rem;
  box-shadow:var(--shadow-sm);
  z-index:2;
}
.tl-card{
  background:var(--surface);
  border:2px solid var(--border);
  border-radius:24px;
  padding:1.4rem 1.6rem;
  margin-left:18px;
  box-shadow:var(--shadow-sm);
  transition:all .25s ease;
}
.day .step:hover .tl-card{border-color:hsl(var(--h) 60% 70%);transform:translateY(-2px)}
.day .step.on .tl-card{
  border-color:var(--c);
  background:linear-gradient(145deg,#fff,var(--cl));
  box-shadow:0 20px 44px -12px hsl(var(--h) 70% 40% / .18);
}
.tl-clock{font-size:.72rem;font-weight:900;letter-spacing:.14em;color:var(--c)}
.tl-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:.2rem 0 .6rem}
.day .step .no{
  font-weight:900;
  font-size:1.5rem;
  color:var(--c);
}
.tl-head h3{font-size:1.1rem;font-weight:900;color:var(--brown)}
.day .step .fix{font-weight:700;font-size:1.02rem;line-height:1.65;color:var(--brown-soft)}
@media(max-width:860px){
  .day .stick{grid-template-columns:1fr;gap:1.8rem}
  .sticky{position:relative;top:0}
}