.w-st{--st-dot:15px;--st-at:.95rem;padding-block:var(--w-space)}
.w-st__head{text-align:center;margin-bottom:clamp(2.4rem,6vw,4.5rem)}
.w-st__head .w-lead{margin-inline:auto}
.w-st__list{position:relative;list-style:none;margin:0;padding:0}

.w-st__list::before,.w-st__list::after{content:"";position:absolute;top:var(--st-at);bottom:0;left:50%;width:2px;margin-left:-1px;border-radius:2px}
.w-st__list::before{background:linear-gradient(180deg,var(--w-line) 0,var(--w-line) calc(100% - 5rem),transparent)}
.w-st__list::after{background:var(--w-accent);transform-origin:top;-webkit-mask:linear-gradient(180deg,#000 calc(100% - 5rem),transparent);mask:linear-gradient(180deg,#000 calc(100% - 5rem),transparent)}
.w-st.is-live .w-st__list::after{transform:scaleY(var(--st-p,0))}
.w-st__item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(3.5rem,8vw,7rem);align-items:start;padding-bottom:clamp(2.6rem,6vw,4.6rem)}
.w-st__item:last-child{padding-bottom:clamp(1rem,3vw,2rem)}
.w-st__dot{position:absolute;z-index:1;top:var(--st-at);left:50%;width:var(--st-dot);height:var(--st-dot);margin:calc(var(--st-dot)/-2) 0 0 calc(var(--st-dot)/-2);border:2px solid var(--w-accent);border-radius:50%;background:var(--w-accent);box-shadow:0 0 0 5px var(--w-bg);transition:background-color .45s,border-color .45s,transform .6s var(--w-ease)}
.w-st__year{grid-row:1;grid-column:1;justify-self:end;margin:0;font-family:var(--w-display);font-weight:var(--w-display-weight);letter-spacing:var(--w-display-tracking);text-transform:var(--w-display-case);font-size:clamp(3.2rem,7vw,6rem);line-height:.82;color:var(--w-accent);font-variant-numeric:lining-nums;transition:color .6s,opacity .6s}
.w-st__body{grid-row:1;grid-column:2;max-width:30rem}
.w-st__item:nth-child(even) .w-st__year{grid-column:2;justify-self:start}
.w-st__item:nth-child(even) .w-st__body{grid-column:1;justify-self:end}
.w-st__name{margin:0 0 .6rem;font-family:var(--w-display);font-weight:var(--w-display-weight);letter-spacing:var(--w-display-tracking);text-transform:var(--w-display-case);font-size:clamp(1.5rem,2.5vw,2.1rem);line-height:1.1;text-wrap:balance}
.w-st__body p{margin:0;color:var(--w-muted);text-wrap:pretty}
.w-st__photo{margin:1.3rem 0 0;border-radius:var(--w-radius);overflow:hidden;background:var(--w-surface);aspect-ratio:3/2}
.w-st__photo img{width:100%;height:100%;object-fit:cover}
.w-st__link{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;margin-top:1.1rem;font-size:.84rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--w-ink);text-decoration:none;border-bottom:1px solid var(--w-accent)}
.w-st__link span{transition:transform .35s var(--w-ease)}
.w-st__link:hover span{transform:translateX(5px)}

.w-st.is-live .w-st__dot{background:var(--w-bg);border-color:var(--w-muted)}
.w-st.is-live .w-st__year{color:var(--w-muted);opacity:.5}
.w-st.is-live .w-st__item.is-on .w-st__dot{background:var(--w-accent);border-color:var(--w-accent);transform:scale(1.18)}
.w-st.is-live .w-st__item.is-on .w-st__year{color:var(--w-accent);opacity:1}
.w-st.is-live .w-st__year,.w-st.is-live .w-st__body{transition:color .6s,opacity .9s var(--w-ease),transform .9s var(--w-ease)}
.w-st.is-live .w-st__item:not(.is-seen) .w-st__year{opacity:0;transform:translateX(calc(var(--st-dir,1)*-28px))}
.w-st.is-live .w-st__item:not(.is-seen) .w-st__body{opacity:0;transform:translateX(calc(var(--st-dir,1)*28px))}
.w-st__item:nth-child(even){--st-dir:-1}
@media (max-width:760px){
  .w-st{--st-at:1.5rem}
  .w-st__head{text-align:left}
  .w-st__head .w-lead{margin-inline:0}
  .w-st__list::before,.w-st__list::after{left:calc(var(--st-dot)/2)}
  .w-st__item,.w-st__item:nth-child(even){display:block;padding-left:calc(var(--st-dot) + 1.5rem)}
  .w-st__dot{left:calc(var(--st-dot)/2)}
  .w-st__year,.w-st__item:nth-child(even) .w-st__year{justify-self:start;margin-bottom:.9rem;font-size:clamp(3rem,15vw,4.2rem)}
  .w-st__body,.w-st__item:nth-child(even) .w-st__body{justify-self:start;max-width:34rem}
  .w-st.is-live .w-st__item:not(.is-seen) .w-st__year,.w-st.is-live .w-st__item:not(.is-seen) .w-st__body{transform:translateY(22px)}
}
@media (prefers-reduced-motion:reduce){
  .w-st__dot,.w-st__year,.w-st__body,.w-st__link span{transition:none!important}
}
@media print{
  .w-st.is-live .w-st__item .w-st__year,.w-st.is-live .w-st__item .w-st__body{opacity:1;transform:none}
}