/* ---------- 3 · chapters: sticky stage, scene driven by --p (0…1) ---------- */
.ch{position:relative;height:360vh;--p:0}
.stage{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(22rem,5fr) 7fr;overflow:hidden;
  padding:0 clamp(1.5rem,4vw,4rem) 0 calc(var(--bind) + clamp(1.5rem,3vw,3rem))}
.txt{container-type:inline-size;align-self:center;position:relative;z-index:2;padding:4rem 2rem 4rem 0;max-width:34rem}
.txt .yr{font:italic 400 clamp(1.5rem,2vw,1.8rem)/1 var(--gost);opacity:.75}
.txt h2{margin-top:.6rem;font:italic 400 min(clamp(2.6rem,4.8vw,4.6rem),10.5cqi)/.95 var(--gost);overflow-wrap:break-word;hyphens:auto;text-wrap:balance}
.txt .bio{margin-top:1.4rem;font-size:1.125rem;line-height:1.55;opacity:.88;max-width:42ch}
.txt .qt{margin-top:1.8rem}
.txt .qt p{font-size:clamp(1.125rem,1.55vw,1.5rem)}
.txt .qt footer{font-size:1.125rem}
.txt .obj{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.45rem}
.txt .obj li{font-size:.875rem;line-height:1;padding:.5rem .7rem;border:1px solid currentColor;border-radius:999px;opacity:.75}
.txt .go{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.8rem;font:600 1.125rem/1 var(--text);padding:.95rem 1.3rem;background:var(--current);color:#fff;transition:gap .3s}
.txt .go:hover{gap:1rem}
.txt .go svg{width:16px;height:16px}
.scene-wrap{position:relative;align-self:center;height:min(88vh,760px);overflow:hidden}
.scene{width:100%;height:100%;overflow:visible}
.scene *{transform-box:view-box}
.sheetno{position:absolute;right:clamp(1.5rem,4vw,4rem);bottom:1.4rem;display:flex;font:italic .875rem/1.2 var(--gost);border:1px solid currentColor;z-index:3}
.sheetno span{padding:.35rem .8rem;opacity:.75}
.sheetno span+span{border-left:1px solid currentColor}
.ln{fill:none;stroke:currentColor;stroke-width:2}
.thin{fill:none;stroke:currentColor;stroke-width:1;opacity:.6}
.lbl{font:italic 17px var(--gost);fill:currentColor}
.lbl.s{font-size:14px;opacity:.75}
.cur{fill:none;stroke:var(--current);stroke-width:3;stroke-linecap:round}
.run{animation:dash 1.1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-40}}
.ch:not(.on) *{animation-play-state:paused!important}

/* chapter 1 · Mingachevir — water */
#ch1{background:#0E3150;color:var(--line)}
/* chapter 2 · oil & concrete — night sea */
#ch2{background:#111417;color:#E6E1D6}
#ch2 .txt .go{background:var(--oil);color:#111417}
.jack .beam{transform-origin:var(--px) var(--py);animation:rock 2.6s ease-in-out infinite alternate;animation-delay:var(--dl)}
.jack .rod{animation:pump 2.6s ease-in-out infinite alternate;animation-delay:var(--dl)}
.jack .crank{transform-origin:var(--cx) var(--cy);animation:spin 5.2s linear infinite;animation-delay:var(--dl)}
@keyframes rock{from{transform:rotate(-13deg)}to{transform:rotate(13deg)}}
@keyframes pump{from{transform:translateY(-19px)}to{transform:translateY(19px)}}
.waves{animation:drift 7s linear infinite}
@keyframes drift{to{transform:translateX(-120px)}}
/* chapter 3 · power & gas — dark grid */
#ch3{background:#08131F;color:var(--line)}
.lamp{opacity:clamp(.08,calc((var(--p) - var(--t)) * 7),1)}
.glow{filter:drop-shadow(0 0 10px rgba(224,83,31,.85))}
/* chapter 4 · installation — on vatman */
#ch4{background:var(--vatman);color:var(--graphite)}
.part{transform:translateY(calc((1 - clamp(0,calc((var(--p) - var(--k) * .12) / .3),1)) * var(--off)))}
/* chapter 5 · building materials — stone */
#ch5{background:#C7C2B6;color:var(--graphite)}
.stone-q{position:absolute;left:50%;top:57%;transform:translate(-50%,-50%);width:min(36%,17rem);text-align:center;font:italic 400 clamp(1.25rem,1.8vw,1.7rem)/1.15 var(--gost);
  opacity:clamp(0,calc((var(--p) - .78) * 6),1);pointer-events:none}
.stone-q small{display:block;margin-top:.7rem;font-size:.875rem;opacity:.75}
.swatches{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.6rem}
.swatches figure{display:grid;gap:.4rem;justify-items:start}
.swatches svg{width:62px;height:42px;border:1.5px solid var(--graphite)}
.swatches figcaption{font:italic .875rem/1.1 var(--gost)}
/* chapter 6 · roads — asphalt */
#ch6{background:#24272B;color:#E9E7E1}

/* chapters stop pinning on smaller screens: scene on top, text below, progress = visibility */
@media (max-width:1180px){
  .ch{height:auto}
  .stage{position:relative;height:auto;grid-template-columns:minmax(0,1fr);padding:3.5rem clamp(1.25rem,4vw,3rem) 4.5rem calc(var(--bind) + 1rem)}
  .scene-wrap{height:auto;aspect-ratio:4/3;order:-1}
  .txt{padding:1.5rem 0 0;max-width:none}
  .ch-page .stage{padding-top:5.5rem}
}
@media (max-width:700px){
  .stage{padding:2.5rem 1.1rem 3.5rem calc(var(--bind) + .6rem)}
  .scene-wrap{aspect-ratio:1/1;margin:0 -.4rem}
  .sheetno{right:1.1rem;bottom:1rem}
  .ch-page .stage{padding-top:5rem}
}
@media (max-width:380px){
  .txt h1,.txt h2{font-size:2.2rem;overflow-wrap:anywhere;hyphens:auto}
}
/* the chapter text arrives in steps as the scene builds: title first, then biography, quote, objects */
.txt>*{--k:clamp(0,calc((var(--p) - var(--s,0)) * 7),1);opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 22px))}
.txt>.yr,.txt>h1,.txt>h2{--s:-1}
.txt>.bio{--s:.04}
.txt>.qt{--s:.18}
.txt>.obj{--s:.32}
.txt>.swatches{--s:.4}
.txt>.go{--s:.44}
@media (prefers-reduced-motion:reduce){.txt>*{opacity:1;transform:none}}