/* The film's downward movement continues in the same document space. */
.scroll-story{height:590svh}
.story-stage{--handoff:0;--framing:0}
.film-layer{top:8%;bottom:0;left:calc(17%*(1 - var(--framing)));right:calc(-6%*(1 - var(--framing)));opacity:calc(1 - var(--handoff)*.6);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 87%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 87%,transparent)}
.film-layer video,.film-poster{width:auto;max-width:none;height:100%;aspect-ratio:4/3;left:50%;top:0;right:auto;transform:translateX(-50%);object-fit:fill;mask-image:linear-gradient(90deg,transparent,#000 17%,#000 86%,transparent),linear-gradient(transparent,#000 7%,#000 81%,transparent);mask-composite:intersect}
.film-shade{background:linear-gradient(90deg,#f5f2e9ad,transparent 34%),linear-gradient(0deg,#f5f3ed80,transparent 16%)}
.story-outro,.story-outro.visible{inset:auto auto 16% var(--gutter);display:block;text-align:left;transform:none;transition:none;opacity:var(--outro)}
.story-outro .eyebrow{font-size:8px;color:#7c866d}
.story-outro .text-link{font-size:13px;margin-top:12px}
.story-bottom,.chapter-rail{opacity:calc(1 - var(--outro)*.82)}
.flow-bridge{height:78svh;min-height:400px;max-height:850px;position:relative;z-index:2;background:var(--paper);--flow-caption:0}
#flow-canvas{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;color:#a3b395}
#flow-trails path{stroke:url(#flow-sage);stroke-width:1.1;vector-effect:non-scaling-stroke}
#flow-trails path:nth-child(2){stroke:#c7bb9c;stroke-opacity:.48}
#flow-branches path{stroke:#afbc9f;stroke-width:.85;stroke-opacity:.5;vector-effect:non-scaling-stroke}
#flow-bits use:nth-child(2){color:#b6a787}
#flow-core .core-orbit{stroke:#a9b899;stroke-width:.6;stroke-dasharray:1 8;opacity:.65}
#flow-core .core-ring{stroke:#c1c9b4;stroke-width:.7;opacity:.7}
#flow-satellites use{color:#a8b795}
.flow-caption{position:absolute;top:52%;left:5%;right:5%;text-align:center;opacity:var(--flow-caption);transform:translateY(calc((1 - var(--flow-caption))*15px));pointer-events:none}
.flow-caption .eyebrow{font-size:8px;color:#8b947f;letter-spacing:.21em}
.flow-phrase{margin-top:16px;font:400 clamp(23px,2.3vw,34px)/1.7 LocalSerif,"Songti SC",serif;letter-spacing:.01em}
.flow-phrase span{color:#879579}
.flow-coordinate{position:absolute;bottom:22px;left:var(--gutter);font-size:8px;letter-spacing:.18em;color:#929b87;opacity:var(--flow-caption)}
.projects-section{padding-top:55px;overflow:hidden}
.projects-section:before{content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:0;height:1px;background:linear-gradient(90deg,#aebc9c66,transparent 35%,transparent 65%,#aebc9c66);transform:scaleX(var(--collection-flow,0));transform-origin:center}
.section-heading{position:relative}
.section-heading:after{content:"";position:absolute;right:0;top:-62px;width:12px;height:12px;border:1px solid #adb99e;border-radius:2px;transform:rotate(calc(45deg + (1 - var(--collection-flow,0))*90deg));opacity:var(--collection-flow,0);background:var(--paper)}
@media(min-width:1700px){.chapter-copy{top:auto}}
@media(max-width:700px){
 .scroll-story{height:570svh}
 .film-layer{top:25%;bottom:4%;left:0;right:0;mask-image:none;-webkit-mask-image:none}
 .film-layer video,.film-poster{height:auto;width:118%;top:50%;left:50%;transform:translate(-50%,-50%);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(transparent,#000 10%,#000 73%,transparent);mask-composite:intersect}
 .film-shade{background:linear-gradient(#f5f3ed 0%,#f5f3ed 19%,transparent 42%,transparent 79%,#f5f3ed 99%)}
 .story-outro,.story-outro.visible{top:15%;bottom:auto;left:var(--gutter);right:var(--gutter)}
 .story-outro .text-link{font-size:17px;margin-top:13px}
 .flow-bridge{height:61svh;min-height:360px}
 .flow-caption{top:50%}
 .flow-phrase{font-size:23px;line-height:1.75}
 .flow-phrase span{display:block}
 .flow-caption .eyebrow{font-size:7px}
 .flow-coordinate{font-size:6px;bottom:24px}
 .projects-section{padding-top:45px}
 .section-heading:after{top:-52px;width:9px;height:9px}
}
@media(prefers-reduced-motion:reduce){
 .scroll-story{height:100svh;min-height:560px}
 .flow-bridge{display:none}
 .film-layer{opacity:1}
 .projects-section:before{transform:none}
 .section-heading:after{opacity:1;transform:rotate(45deg)}
}