/* One viewport, six independently replaceable background states. */
.page-index .site-header{position:fixed;inset:0 0 auto;z-index:20;background:var(--paper)}
.page-index.binding-in-story .site-header{background:linear-gradient(#f4f1e9e8,#f4f1e9a0);border-color:#302a2520}
.binding-story{position:relative;background:#f4f1e9}
.binding-stage{position:relative;height:100svh;min-height:480px;isolation:isolate;overflow:hidden}
.binding-animated{height:400svh}
.binding-animated .binding-stage{position:sticky;top:0}
.binding-visual,.binding-background{position:absolute;inset:0;overflow:hidden}
.binding-visual{z-index:-2;background:#f4f1e9}
.binding-background{opacity:0;visibility:hidden;background:#f4f1e9}
.binding-k01{opacity:1;visibility:visible}
.binding-background picture,.binding-background img{display:block;width:100%;height:100%}
.binding-background img{object-fit:cover;object-position:70% 58%}
.binding-k01::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#f4f1e9c9, #f4f1e95e 38%,transparent 65%)}
/* These abstract full-screen placeholders are not photographed geometry. */
.is-prototype{background:radial-gradient(ellipse at 10% 0%,#fbf8ef 0%,#e9e0d1 55%,#bcad99 100%)}
.prototype-band{position:absolute;right:7%;top:-20%;width:22%;height:150%;background:linear-gradient(90deg,#32151d,#643441 35%,#4b202a 70%,#281219);box-shadow:30px 45px 65px #302a2540;transform:rotate(25deg)}
.binding-k02 .prototype-band{right:3%;width:27%;transform:rotate(29deg);border-radius:48% 0 35% 0}
.binding-k03{background:linear-gradient(115deg,#f4f1e9 28%,#d7cdbc 29%,#eee6d8 34%,#b9aa96 35%,#eee8dc 53%,#d0c3b1 54%,#f4f1e9 70%)}
.binding-k03 .prototype-band{right:18%;width:18%;transform:rotate(12deg)}
.binding-k04{background:repeating-linear-gradient(108deg,#e8e1d3 0px,#eee8de 2px,#e9e2d6 4px);box-shadow:inset -70px 0 150px #302a2520}
.binding-k04 .prototype-band{right:-7%;top:68%;width:20%;height:70%;transform:rotate(-35deg);filter:blur(14px)}
.binding-k05{background:linear-gradient(100deg,#f4f1e9 45%,#e2d9c9 75%,#f1ebdf)}
.binding-k05 .prototype-band{right:19%;width:13%;transform:rotate(3deg)}
.binding-k06{background:linear-gradient(100deg,#f4f1e9 50%,#ece5d8)}
.binding-k06 .prototype-band{right:20%;width:10%;transform:none;box-shadow:12px 0 35px #302a251c}
.binding-background:not(.is-prototype) .prototype-band{display:none}
.binding-copy{position:absolute;left:var(--gutter);top:31%;width:49%;max-width:800px}
.binding-copy h1,.binding-copy h2{font-size:clamp(60px,6.7vw,128px);font-weight:500;line-height:1;letter-spacing:-.065em;color:var(--wine)}
.binding-copy h2{font-size:clamp(54px,5.5vw,106px)}
.binding-copy .eyebrow{margin-bottom:30px;color:var(--ink)}
.binding-copy p:not(.eyebrow){font-size:clamp(14px,1.1vw,19px);line-height:1.65;max-width:345px;margin-top:30px}
.binding-copy:not(.binding-opening){opacity:0;visibility:hidden}
.binding-final .text-link{margin-top:25px;color:var(--wine)}
/* Final composition pass: each line of copy uses the negative space of its approved frame. */
.binding-tension{top:27%;left:5.2%;width:34%;max-width:560px}
.binding-gathering{top:25%;left:5.2%;width:34%;max-width:560px}
.binding-reveal{top:24%;left:5.2%;width:29%;max-width:460px}
.binding-final{top:27%;left:5.2%;width:31%;max-width:500px}
.binding-tension h2,.binding-gathering h2{font-size:clamp(50px,4.65vw,88px)}
.binding-reveal h2{font-size:clamp(52px,4.9vw,92px)}
.binding-final h2{font-size:clamp(46px,4.25vw,80px);line-height:.98}
.binding-k02 img{object-position:66% 58%}
.binding-k03 img{object-position:68% 56%}
.binding-k05 img{object-position:70% 55%}
.binding-k06 img{object-position:72% 54%}

.binding-meta{position:absolute;z-index:4;bottom:20px;left:var(--gutter);right:var(--gutter);display:flex;align-items:center;justify-content:flex-end;gap:20px;font-size:11px;color:#302a25}
.binding-meta a{font-size:12px;display:flex;align-items:center;min-height:44px;gap:20px;background:#f4f1e9ed;padding:0 14px}
.binding-static-link{display:inline-flex;margin-top:20px}
.binding-animated .binding-static-link{display:none}
.binding-media-failed .binding-k01 picture{display:none}
.page-index #working-example{scroll-margin-top:80px}
@media(max-width:1100px) and (min-width:761px){.binding-copy{width:56%}.binding-copy h1{font-size:clamp(58px,7.4vw,80px)}}
@media(max-width:760px){
 .binding-animated{height:320svh}
 .binding-stage{min-height:100svh}
 .binding-copy{top:21%;left:24px;right:24px;width:auto;max-width:430px}
 .binding-copy h1{font-size:clamp(44px,13vw,64px)}
 .binding-copy h2{font-size:clamp(40px,11.8vw,58px);max-width:350px}
 .binding-copy .eyebrow{margin-bottom:22px;font-size:9px}
 .binding-copy p:not(.eyebrow){font-size:14px;max-width:270px;margin-top:20px}
 .binding-background img{object-fit:cover;object-position:73% center}
 .binding-k01::after{background:linear-gradient(180deg,#f4f1e9c7 0%,#f4f1e9b5 43%,#f4f1e900 75%)}
 .prototype-band{top:42%;height:100%;width:35%}
 .binding-k02 .prototype-band{right:8%;width:35%}
 .binding-k03 .prototype-band{right:20%;width:25%}
 .binding-k04 .prototype-band{top:75%;right:-5%;width:40%}
 .binding-k05 .prototype-band,.binding-k06 .prototype-band{top:45%;width:18%;right:25%}
 .binding-meta{bottom:max(16px,env(safe-area-inset-bottom));left:16px;right:16px;gap:8px;align-items:end}
 .binding-meta a{font-size:11px;white-space:nowrap;gap:8px;padding:0 10px}
 .binding-final .text-link{margin-top:18px}
 .binding-tension{top:18%;left:20px;right:20px;width:auto;max-width:300px}
 .binding-gathering{top:18%;left:20px;right:20px;width:auto;max-width:310px}
 .binding-reveal{top:17%;left:20px;right:20px;width:auto;max-width:285px}
 .binding-final{top:17%;left:20px;right:20px;width:auto;max-width:320px}
 .binding-tension h2,.binding-gathering h2{font-size:clamp(38px,10.7vw,50px);line-height:.98}
 .binding-reveal h2{font-size:clamp(40px,11vw,52px)}
 .binding-final h2{font-size:clamp(36px,9.8vw,46px);line-height:.98}
 .binding-k02 img{object-position:64% center}
 .binding-k03 img{object-position:61% center}
 .binding-k05 img{object-position:67% center}
 .binding-k06 img{object-position:32% center}

}
@media(max-height:650px) and (max-width:760px){.binding-copy{top:23%}.binding-copy h1{font-size:42px}.binding-copy h2{font-size:39px}.binding-copy .eyebrow{margin-bottom:12px}.binding-copy p:not(.eyebrow){font-size:12px;margin-top:12px}}
@media(prefers-reduced-motion:reduce){.binding-story.binding-animated{height:auto}.binding-animated .binding-stage{position:relative;top:0}}

.binding-k04 { z-index:2; transform:translate3d(var(--passage-offset,100%),0,0); }
@media(max-width:760px) { .binding-k04 { transform:translate3d(0,var(--passage-offset,100%),0); } }