/* Opening direction v2. All composition rules are scoped to the first three projects. */
.opening-story,.handover-story,.cinema-story{position:relative;isolation:isolate}
.opening-canvas,.handover-canvas,.cinema-canvas{position:relative;overflow:hidden}
.opening-story{margin-top:-112px}
.opening-canvas{height:100svh;min-height:620px}
.hero-context{position:absolute;top:21%;left:4.2%;z-index:5;font-size:9px}
.spatial-title{position:absolute;z-index:3;left:4%;top:31%;font-size:clamp(76px,12.4vw,220px);letter-spacing:-.075em;line-height:.89;pointer-events:none}
.spatial-title>span{display:block;white-space:nowrap;will-change:transform}
.spatial-title .title-second{margin-left:12vw;font-size:.93em}
.opening-image{position:absolute;display:block;left:53%;top:17%;width:42%;height:70%;overflow:hidden;background:#cbc4b5;z-index:2;transform-origin:center}
.opening-image img{width:100%;height:100%;object-fit:cover;object-position:61% center;transform:scale(1.06)}
.opening-image .image-label{font-size:7px}
.hero-footnote{position:absolute;left:4.2%;bottom:9%;font-size:10px;display:flex;flex-direction:column;gap:5px;z-index:3}
.hero-footnote>span:last-child{font-size:8px;color:var(--muted)}
.scroll-invitation{position:absolute;right:4.2%;bottom:4%;z-index:7;display:flex;align-items:center;gap:16px;font-size:8px}
.scroll-stem{display:block;width:50px;height:1px;background:var(--accent)}
.opening-project{position:absolute;z-index:4;left:5%;bottom:8%;display:flex;gap:25px;align-items:end;opacity:0;pointer-events:none}
.opening-number{font-size:clamp(110px,17vw,250px);line-height:.75;letter-spacing:-.1em;color:var(--accent)}
.opening-project>div{padding-bottom:2px}.opening-project h2{font-size:30px;letter-spacing:-1px;margin-top:10px}.opening-project .eyebrow{font-size:8px}
.spatial-pause{height:90svh;min-height:620px;position:relative;overflow:hidden;margin:0 4.2%}
.pause-index{position:absolute;top:18%;left:8%;font-size:9px}.pause-index .burgundy{margin-right:28px}
.pause-word{position:absolute;left:15%;top:43%;font-size:9vw;letter-spacing:-.06em;line-height:1;z-index:1}
.pause-image{position:absolute;left:61%;top:20%;width:22%;z-index:2}.pause-image .media{aspect-ratio:3/4}
.pause-image figcaption{font-size:8px;text-transform:uppercase;letter-spacing:1px;margin-top:17px}
.pause-next{position:absolute;bottom:16%;left:15%;display:flex;gap:65px;font-size:9px}
.handover-canvas{height:100svh;min-height:650px;background:var(--paper)}
.pinned-counter{position:absolute;left:4.2%;top:7%;height:1em;width:2em;z-index:6;font-size:clamp(90px,12vw,190px);line-height:.8;letter-spacing:-.09em;color:var(--accent);overflow:hidden}
.pinned-counter>span{position:absolute;left:0;top:0}.counter-02{transform:translateY(150%)}
.handover-label{position:absolute;right:3%;top:9%;writing-mode:vertical-rl;font-size:8px;z-index:6}
.handover-background{position:absolute;left:-2%;bottom:13%;font-size:20vw;letter-spacing:-.075em;line-height:.8;color:#d6d2c7;white-space:nowrap;z-index:0}
.handover-out,.handover-in,.handover-detail{position:absolute;display:block;overflow:hidden;z-index:2;background:#c7bdab}
.handover-out{left:29%;top:16%;width:38%;height:64%}.handover-out img{object-position:center 65%}
.handover-in{left:106%;top:8%;width:43%;height:80%;z-index:3}.handover-in img{object-position:49% center}
.handover-detail{left:-43%;top:50%;width:33%;height:34%;z-index:4}
.handover-title{position:absolute;left:10%;top:26%;z-index:5;opacity:0}
.handover-title>.eyebrow{font-size:8px}.handover-title h2{font-size:clamp(32px,4.4vw,72px);letter-spacing:-.065em;line-height:1;margin-top:14px}.handover-title h2 span{font-size:.5em;margin-left:12px;vertical-align:top}
.sequence-skip{position:absolute;bottom:5%;left:4.2%;right:4.2%;z-index:7;display:flex;justify-content:space-between;font-size:8px}
.transition-track{position:absolute;bottom:0;left:0;width:100%;height:2px;background:#dbd6cb;z-index:8}.transition-track>span{display:block;width:100%;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
.cinema-canvas{height:100svh;min-height:620px;background:#dad8ce}
.cinema-number{position:absolute;z-index:0;top:-6%;left:3%;font-size:39vw;line-height:.9;letter-spacing:-.09em;color:var(--accent)}
.cinema-image{position:absolute;inset:0;clip-path:inset(19% 7% 12% 28%);overflow:hidden;display:block;z-index:1}
.cinema-image img{object-position:68% center;transform:scale(1.08)}
.cinema-title{position:absolute;z-index:3;left:5%;bottom:9%;color:var(--ink);padding:0}
.cinema-title .eyebrow{font-size:8px}.cinema-title h2{font-size:clamp(36px,5vw,84px);line-height:1.03;letter-spacing:-.06em;margin-top:10px}.cinema-title a:hover{color:var(--accent)}.cinema-title h2 span{font-size:.5em;vertical-align:top}
.cinema-edge{position:absolute;z-index:3;right:3%;top:7%;writing-mode:vertical-rl;font-size:8px}
/* Sticky enhancement only runs on spacious viewports with motion enabled. */
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
  .spatial-ready .opening-story{height:235svh}
  .spatial-ready .handover-story{height:330svh}
  .spatial-ready .cinema-story{height:175svh}
  .spatial-ready .opening-canvas,.spatial-ready .handover-canvas,.spatial-ready .cinema-canvas{position:sticky;top:0;min-height:0;height:100svh}
  .opening-image,.cinema-image{will-change:clip-path}
}
/* A composed, unpinned fallback is also the mobile and reduced-motion experience. */
html:not(.spatial-ready) .opening-project{display:none}
html:not(.spatial-ready) .handover-canvas{height:115svh;min-height:760px}
html:not(.spatial-ready) .handover-out{display:none}
html:not(.spatial-ready) .counter-01{display:none}
html:not(.spatial-ready) .counter-02{transform:none}
html:not(.spatial-ready) .handover-in{left:52%;top:8%;width:42%;height:75%}
html:not(.spatial-ready) .handover-detail{left:9%;top:52%;width:35%;height:30%}
html:not(.spatial-ready) .handover-title{opacity:1;left:9%;top:32%}
@media(max-width:900px){
  .opening-story{margin-top:-110px}.spatial-title{top:34%;font-size:13vw}.spatial-title .title-second{margin-left:4vw}.opening-image{left:45%;width:51%;top:23%;height:65%}.hero-context{top:20%}.hero-footnote{bottom:5%;max-width:40%}.scroll-invitation{bottom:5%}.scroll-invitation>span:first-child{display:none}.pause-word{font-size:11vw;left:4%}.pause-image{width:30%;left:59%;top:25%}.pause-index{left:4%}.pause-next{left:4%}.spatial-pause{min-height:500px;height:75svh}.cinema-canvas{height:85svh;min-height:550px}.cinema-image{clip-path:inset(12% 0 0 12%)}.cinema-title{left:4%;bottom:7%;padding:16px 20px}.cinema-title h2{font-size:44px}
}
@media(max-width:600px){
 .opening-story{margin-top:-97px}.opening-canvas{min-height:690px;height:94svh}.hero-context{top:19%;left:6%;font-size:8px}.spatial-title{left:6%;top:30%;font-size:16vw;line-height:1}.spatial-title .title-second{font-size:.94em;margin-left:0}.opening-image{left:29%;top:42%;width:65%;height:45%;z-index:2}.spatial-title{z-index:3}.hero-footnote{left:6%;bottom:4%;max-width:65%;font-size:9px}.hero-footnote>span:last-child{font-size:7px}.scroll-invitation{right:6%;bottom:5%;gap:10px}.scroll-stem{width:25px}.opening-image .image-label{font-size:6px;left:12px;right:12px}.spatial-pause{margin:0 6%;height:65svh;min-height:500px}.pause-index{left:0;top:14%;font-size:8px}.pause-word{left:0;top:35%;font-size:16vw}.pause-image{left:55%;top:29%;width:40%}.pause-image figcaption{font-size:6px;line-height:1.6;max-width:130px}.pause-next{left:0;bottom:15%;font-size:8px;gap:25px}
 html:not(.spatial-ready) .handover-canvas{height:95svh;min-height:700px}.pinned-counter{font-size:100px;left:6%;top:6%}.handover-label{right:4%;top:8%;font-size:7px}.handover-background{font-size:28vw;bottom:20%;left:-5%}html:not(.spatial-ready) .handover-in{left:42%;top:21%;width:52%;height:48%}html:not(.spatial-ready) .handover-detail{left:6%;top:59%;width:49%;height:24%}html:not(.spatial-ready) .handover-title{top:13%;left:38%;right:4%}.handover-title>.eyebrow{font-size:6px}.handover-title h2{font-size:27px}.sequence-skip{left:6%;right:6%;font-size:7px}.handover-in .image-label,.handover-detail .image-label{font-size:5px;left:10px;right:10px}.cinema-canvas{min-height:590px;height:85svh}.cinema-number{font-size:62vw;top:5%;left:4%}.cinema-image{clip-path:inset(22% 0 0 12%)}.cinema-image img{object-position:55% center}.cinema-title{left:6%;bottom:8%;right:6%;padding:18px}.cinema-title h2{font-size:36px}.cinema-edge{top:5%;font-size:7px}.cinema-title .eyebrow{font-size:7px}
}
@media(prefers-reduced-motion:reduce){.opening-image img,.cinema-image img{transform:none}.opening-story,.handover-story,.cinema-story{height:auto}}