/* ═══ CaptuREE — traction timeline page only ═══ */
.tl-section{
  --tl-gap:      clamp(2.4rem, 7vw, 5rem);
  background:var(--ink);
  color:#fff;
  padding:clamp(3.2rem,7.5vw,5.6rem) 0;
  scroll-margin-top:4.5rem;
}
.tl-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}

.tl-head{margin-bottom:clamp(2.4rem,5vw,3.6rem);max-width:20ch}
.tl-eyebrow{
  display:block;margin-bottom:.9rem;
  font-weight:600;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red-bright);
}
.tl-head h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.9rem,5vw,3.4rem);line-height:.92;letter-spacing:-.015em;
}

.tl{position:relative;max-width:920px;margin:0 auto;padding:.4rem 0 0;list-style:none}
.tl-spine,.tl-fill{position:absolute;left:50%;top:0;width:2px;transform:translateX(-1px)}
.tl-spine{bottom:0;background:rgba(255,255,255,.15)}
.tl-fill{height:0;background:var(--red);transition:height .12s linear}

.tl-item{
  position:relative;display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:var(--tl-gap);
  padding-bottom:clamp(2rem,4.2vw,2.9rem);
}
.tl-item:last-child{padding-bottom:0}

.tl-date{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.05rem,2vw,1.45rem);
  line-height:.95;padding-top:.12em;           /* optical match to the h3 baseline */
  color:rgba(255,255,255,.5);white-space:nowrap;transition:color .3s;
}
.tl-item.now .tl-date{color:var(--red-bright)}

.tl-card h3{
  font-family:var(--display);font-weight:400;letter-spacing:-.015em;
  font-size:clamp(1.1rem,2.1vw,1.4rem);line-height:.92;margin:0 0 .4rem;
}
.tl-card p{margin:0;font-size:.88rem;color:rgba(255,255,255,.62);font-weight:500;line-height:1.6}
.tl-badge{
  display:inline-block;margin-top:.6rem;font-size:.6rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--red-bright);
  border:1px solid rgba(232,56,42,.45);padding:.22rem .5rem;
}

/* alternate sides; the date always hugs the spine opposite its entry */
.tl-item:nth-child(odd)  .tl-date{grid-column:1;text-align:right}
.tl-item:nth-child(odd)  .tl-card{grid-column:2;text-align:left}
.tl-item:nth-child(even) .tl-card{grid-column:1;text-align:right}
.tl-item:nth-child(even) .tl-date{grid-column:2;text-align:left}

/* connector, spine out to the entry */
.tl-item::after{
  content:"";position:absolute;top:.62em;height:1px;
  background:rgba(255,255,255,.22);
  width:calc(var(--tl-gap) / 2 - 7px);
  transform:scaleX(0);
  transition:transform .5s cubic-bezier(.3,.7,.3,1);
  transition-delay:var(--d,0ms);
}
.tl-item:nth-child(odd)::after {left:50%;margin-left:7px;transform-origin:left}
.tl-item:nth-child(even)::after{right:50%;margin-right:7px;transform-origin:right}
.tl-item.in::after{transform:none}

/* node on the spine */
.tl-item::before{
  content:"";position:absolute;left:50%;top:.62em;z-index:2;
  width:13px;height:13px;border-radius:50%;background:var(--red);
  transform:translate(-50%,-50%) scale(0);
  transition:transform .45s cubic-bezier(.3,1.5,.5,1);
  transition-delay:var(--d,0ms);
}
.tl-item.in::before{transform:translate(-50%,-50%) scale(1)}
.tl-item.now::before{box-shadow:0 0 0 5px rgba(232,56,42,.25)}


/* alternating sides are unreadable on a phone: collapse to a left spine */
@media(max-width:720px){
  .tl{max-width:none}
  .tl-spine,.tl-fill{left:6px}
  .tl-item{
    grid-template-columns:1fr;column-gap:0;row-gap:.45rem;
    padding-left:2.4rem;padding-bottom:2.2rem;
  }
  .tl-item:nth-child(odd) .tl-date,
  .tl-item:nth-child(even) .tl-date{grid-column:1;grid-row:1;text-align:left}
  .tl-item:nth-child(odd) .tl-card,
  .tl-item:nth-child(even) .tl-card{grid-column:1;grid-row:2;text-align:left}
  .tl-item::before{left:6px}
  .tl-item::after,
  .tl-item:nth-child(odd)::after,
  .tl-item:nth-child(even)::after{display:none}
}

@media(prefers-reduced-motion:reduce){
  .tl-item,.tl-head [data-tl-rise]{opacity:1;transform:none}
  .tl-item::before{transform:translate(-50%,-50%) scale(1)}
  .tl-item::after{transform:none}
  .tl-section *{transition-duration:.001ms !important}
}