/* ============================================================
   Thread journey — savor.it-style scroll story
   sticky crossfading backdrop + flow text joined by a drawn line
   ============================================================ */
.thread{position:relative;background:var(--white);color:var(--white)}
.thread-bg{position:sticky;top:0;height:100svh;overflow:hidden;z-index:0;will-change:clip-path,transform}
.thread-bg .layer{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease)}
.thread-bg .layer.on{opacity:1}
.thread-bg video,.thread-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.thread-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(78,13,17,.35),rgba(78,13,17,.15) 40%,rgba(78,13,17,.55));pointer-events:none;transition:opacity .8s}
.thread-bg.framed::after{opacity:0}
.thread-flow{position:relative;z-index:1;margin-top:-100svh;padding:0 0 10svh}
.thread-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.thread-svg path{fill:none;stroke:var(--white);stroke-width:1.5;opacity:.9;stroke-linecap:round}
.thread-svg path.dash{stroke-dasharray:6 8}
.thread-node{position:relative;z-index:2;width:min(1360px,100% - 2*var(--gutter));margin-inline:auto;min-height:var(--gap,70svh);display:flex;align-items:flex-start}
.thread-node .in{--x:0;margin-left:var(--x);max-width:var(--w,32ch);opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.thread-node.on .in{opacity:1;transform:none}
.thread-node.first{min-height:100svh;align-items:center}
.thread-node .k{font-family:var(--fb);font-weight:600;font-size:clamp(18px,1.6vw,24px);line-height:1.35;letter-spacing:.005em}
.thread-node .k.big{font-family:var(--fd);font-size:clamp(34px,4.6vw,66px);line-height:1;font-weight:400}
.thread-node .gu{display:block;font-size:clamp(22px,2.4vw,34px);color:var(--sand);margin-bottom:8px;line-height:1.2}
.thread-node .pair{display:grid;grid-template-columns:auto 1fr;gap:12px clamp(20px,4vw,60px);align-items:start}
.thread-node .pair > span:first-child{opacity:.75}
.thread-node .pair ul{list-style:none}
.thread-node .pair li{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.thread-node.on .pair li{opacity:1;transform:none}
.thread-node.on .pair li:nth-child(2){transition-delay:.12s}.thread-node.on .pair li:nth-child(3){transition-delay:.24s}.thread-node.on .pair li:nth-child(4){transition-delay:.36s}.thread-node.on .pair li:nth-child(5){transition-delay:.48s}
.thread-node .more{display:grid;grid-template-columns:auto auto;gap:0 clamp(20px,5vw,80px);align-items:end}
.thread-node .more .stack span{display:block;line-height:1.15;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s}
.thread-node.on .more .stack span{opacity:1;transform:none}
.thread-node.on .more .stack span:nth-child(2){transition-delay:.1s}.thread-node.on .more .stack span:nth-child(3){transition-delay:.2s}.thread-node.on .more .stack span:nth-child(4){transition-delay:.3s}.thread-node.on .more .stack span:nth-child(5){transition-delay:.4s}
.thread-node .cap{font-size:14px;opacity:.7;margin-top:10px}

/* final: backdrop recaps + shrinks into a small frame, headline types in */
.thread-final{position:relative;z-index:2;min-height:150svh;padding-top:18svh}
.thread-final .container{color:var(--maroon);display:grid;grid-template-columns:minmax(0,58%) 1fr;align-items:center;min-height:64svh}
.thread-final .container > div{grid-column:1}
.thread-title{font-family:var(--fd);font-size:clamp(40px,5.4vw,88px);line-height:.95;letter-spacing:-.01em}
.thread-title .w{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.thread-title .w span{display:block}
.thread-title .w .c{display:inline;opacity:0;transition:opacity .12s}
.thread-title .w .c.on{opacity:1}
.thread-title .w{padding-left:0}
.thread-title .gu{font-size:.6em;color:var(--red);margin-bottom:.15em}
.thread-final p{max-width:46ch;font-size:clamp(16px,1.3vw,20px);margin:22px 0 26px;color:var(--ink-soft);opacity:0;transition:opacity 1s .4s}
.thread-final .btn{opacity:0;transition:opacity 1s .55s,transform .35s var(--ease)}
.thread-final.on p,.thread-final.on .btn{opacity:1}
.thread.framed-page{background:var(--white)}

/* staircase chain */
.chain{background:var(--white);padding:clamp(40px,6vw,100px) 0 clamp(60px,8vw,120px);overflow:hidden}
.chain-grid{position:relative;width:min(1360px,100% - 2*var(--gutter));margin-inline:auto;display:flex;flex-direction:column}
.chain figure{width:clamp(220px,34vw,460px);aspect-ratio:4/3;border-radius:14px;overflow:hidden;margin:-5% auto 0;opacity:0;transition:opacity .8s var(--ease);will-change:transform;box-shadow:0 30px 60px rgba(122,23,28,.12)}
.chain figure:first-child{margin-top:0}
.chain figure.on{opacity:1}
.chain figure img,.chain figure video{width:100%;height:100%;object-fit:cover}
.chain-copy{text-align:center;margin-bottom:clamp(30px,5vw,70px)}
.chain-copy .h2{color:var(--maroon)}

@media (max-width:860px){
  .thread-node{min-height:var(--gap-m,62svh)}
  .thread-node .in{margin-left:calc(var(--x) * .45);max-width:30ch}
  .thread-node .k{font-size:17px}
  .thread-node .k.big{font-size:clamp(30px,9vw,44px)}
  .thread-final{padding-top:50svh;min-height:135svh}
  .thread-final .container{display:block;min-height:0}
  .thread-title{font-size:clamp(40px,11vw,64px)}

  .chain figure{width:60vw;margin-top:-6%}
}