/* V4: shared planes, continuous motion, responsive stage. */
:root{--cv-top:78px;--cv-chapter:136px}
html{scroll-padding-top:0}.home section[id]{scroll-margin-top:var(--cv-top)}.ex-case section[id]{scroll-margin-top:var(--cv-chapter)}
.cv-journey{height:calc((var(--count) - 1)*72vh + 100vh);height:calc((var(--count) - 1)*72svh + 100svh);position:relative;min-height:100vh;min-height:100svh}
.cv-stage{position:sticky;top:var(--cv-top);height:calc(100vh - var(--cv-top));height:calc(100svh - var(--cv-top));min-height:490px;overflow:hidden;background:var(--journey-bg,#d6e65b);color:var(--journey-ink,#382039);transition:background .65s,color .65s;isolation:isolate}
.cv-stage-top{position:absolute;top:22px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;font-size:11px;z-index:4}
.cv-titles{position:absolute;top:8%;left:0;right:0;height:27%;pointer-events:none;overflow:hidden}
.cv-titles>div{position:absolute;inset:0;text-align:center;opacity:var(--title-opacity,0);transform:translateX(var(--title-x,0));white-space:nowrap}
.cv-titles>div>span{font-size:clamp(68px,11.5vw,190px);line-height:1.1;font-weight:850;letter-spacing:-.075em;display:block}
.cv-titles small{font:450 12px Archivo,sans-serif;display:block;margin-top:12px}
.cv-track{position:absolute;inset:25% 0 20%;perspective:1600px;cursor:grab;touch-action:pan-y;user-select:none;z-index:2}
.cv-track.is-dragging{cursor:grabbing}
.cv-card{position:absolute;left:50%;top:0;width:64vw;height:100%;max-height:440px;background:var(--card-bg);color:var(--card-ink);transform:translate(calc(-50% + var(--cx,0px)),var(--cy,0px)) rotate(var(--cr,0deg)) scale(var(--cs,1));transform-origin:center center;will-change:transform;box-shadow:0 15px 45px #15151535;cursor:inherit}
.cv-card-art{width:100%;height:100%;overflow:hidden;background:var(--card-bg)}
.cv-card-art>img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.cv-card-caption{position:absolute;inset:auto 0 0;display:flex;gap:20px;align-items:center;padding:12px 18px;background:var(--card-bg);color:var(--card-ink);font-size:12px;opacity:var(--caption,1)}
.cv-card-caption>b{font:500 12px Archivo,sans-serif}.cv-card-caption>span{margin-left:auto}
.cv-between{display:flex;align-items:center;justify-content:center;background:#153dda;color:#fff;font:800 clamp(60px,12vw,180px)/.83 Archivo,sans-serif;letter-spacing:-.06em;width:100%;height:100%;padding:4%}
.cv-annotations{position:absolute;left:var(--pad);right:var(--pad);bottom:74px;min-height:54px;pointer-events:none}
.cv-annotations>div{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;gap:45px;opacity:0;visibility:hidden;transition:opacity .25s}
.cv-annotations>div.is-current{opacity:1;visibility:visible}.cv-annotations p{font-size:clamp(18px,2vw,28px);font-weight:650;letter-spacing:-.03em}.cv-annotations span{font-size:11px;line-height:1.8;max-width:42em;width:45%}
.cv-transport{position:absolute;bottom:0;left:var(--pad);right:var(--pad);height:54px;display:flex;align-items:center;gap:22px;border-top:1px solid color-mix(in srgb,currentColor 25%,transparent);z-index:4}
.cv-transport>button{font-size:23px;width:32px;height:40px}.cv-transport>button:disabled{opacity:.3}.cv-track-index{display:flex;gap:12px;flex:1}.cv-track-index button{flex:1;display:flex;align-items:center;gap:10px;font-size:11px;opacity:.45;height:44px}.cv-track-index button[aria-pressed=true]{opacity:1}.cv-track-index i{display:block;flex:1;height:2px;background:currentColor;transform:scaleX(.25);transform-origin:left;transition:transform .3s}.cv-track-index button[aria-pressed=true] i{transform:scaleX(1)}.cv-gesture{font-size:10px;white-space:nowrap}
/* A single desk stays in view while images exchange scale and position. */
.cv-sequence{position:relative;height:325vh;height:325svh;background:var(--ex-bg);color:var(--ex-ink)}
.cv-story-pin{position:sticky;top:var(--cv-chapter);height:calc(100vh - var(--cv-chapter));height:calc(100svh - var(--cv-chapter));min-height:485px;overflow:hidden;isolation:isolate}
.cv-story-top{position:absolute;top:20px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;font-size:11px;z-index:10}
.cv-word-track{position:absolute;top:-1%;left:3%;display:flex;gap:9vw;white-space:nowrap;font-size:clamp(105px,16vw,260px);font-weight:850;line-height:1.15;letter-spacing:-.075em;color:currentColor;opacity:.13;pointer-events:none;will-change:transform}
.cv-layout{position:absolute;inset:0;pointer-events:none}
.cv-frame{position:absolute;display:block;overflow:hidden;box-shadow:0 13px 28px #0003;background:var(--ex-bg);pointer-events:auto;will-change:width,height,transform;transform-origin:50% 50%;text-align:left}
.cv-frame>img{width:100%;height:100%;object-fit:cover;pointer-events:none}.cv-frame>span{position:absolute;bottom:0;left:0;right:0;background:var(--ex-ink);color:var(--ex-bg);display:flex;align-items:center;justify-content:space-between;padding:11px 16px;font-size:10px;transform:translateY(100%);transition:transform .3s}
.cv-frame.is-current>span,.cv-frame:focus-visible>span,.cv-frame:hover>span{transform:none}.cv-frame b{font-size:18px;font-weight:400}
.ex-case-aftergrowth .cv-frame>img,.ex-case-between .cv-frame>img,.ex-case-wild .cv-frame>img{object-fit:contain}.ex-case-between .cv-frame{background:white}.ex-case-aftergrowth .cv-frame{background:#dce0d7}.ex-case-offclock .cv-frame:nth-child(2)>img{object-fit:contain}
.cv-story-copy{position:absolute;top:14%;right:var(--pad);width:26%;bottom:14%;z-index:12;pointer-events:none}
.cv-story-step{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:var(--copy-opacity,0);transform:translateY(var(--copy-y,0));pointer-events:none;visibility:hidden}
.cv-story-step.is-current{visibility:visible;pointer-events:auto}.cv-story-step>span{font-size:11px}.cv-story-step h2{font-size:clamp(52px,6vw,100px);letter-spacing:-.08em;font-weight:800;line-height:1.2;margin:15px 0 22px;white-space:nowrap}.cv-story-step h2 i{font:400 .55em Archivo,sans-serif;margin-left:.2em}.cv-story-step h3{font-size:19px;font-weight:650;line-height:1.5;margin-bottom:10px}.cv-story-step p{font-size:12px;line-height:1.9;margin:8px 0}.cv-story-step .cv-detail-copy{opacity:.78;font-size:11px}.cv-story-step>button{margin-top:22px;padding:9px 0;border-top:1px solid color-mix(in srgb,currentColor 25%,transparent);font-size:11px;display:flex;justify-content:space-between;align-items:center;text-align:left}
.cv-mobile-fallback{display:none}
.cv-story-nav{position:absolute;bottom:0;left:var(--pad);right:var(--pad);height:53px;display:flex;gap:28px;align-items:center;z-index:20;border-top:1px solid color-mix(in srgb,currentColor 25%,transparent)}
.cv-story-nav>button{display:flex;align-items:center;gap:12px;font-size:12px;opacity:.4;height:100%}.cv-story-nav>button[aria-pressed=true]{opacity:1}.cv-story-nav button span{font-size:10px}.cv-story-nav i{width:42px;height:2px;background:currentColor;transform:scaleX(var(--step-fill,0));transform-origin:left}.cv-story-nav>a{font-size:10px;margin-left:auto}
/* The next case opens spatially, instead of ending with another small card. */
.ex-epilogue{overflow:hidden;padding-top:65px;background:var(--ex-bg);color:var(--ex-ink)}
.ex-epilogue>p{font-size:clamp(24px,3.8vw,58px);line-height:1.45;font-weight:600;max-width:22em;letter-spacing:-.04em;transform:translateX(calc((1 - var(--flow,1))*8vw));margin-bottom:40px}
.ex-next{height:64vh;height:64svh;min-height:420px;display:block;position:relative;overflow:hidden;background:var(--next-bg);color:var(--next-ink);isolation:isolate;padding:35px 4%;margin-left:calc((1 - var(--flow,1))*10%);margin-right:calc((1 - var(--flow,1))*10%)}
.ex-next>div:first-child{position:relative;z-index:3;pointer-events:none}.ex-next h2{font-size:clamp(45px,9vw,140px);line-height:1.05;margin:18px 0 22px;letter-spacing:-.075em;mix-blend-mode:multiply}.ex-next p{font-size:14px;max-width:25em}.ex-next-art{position:absolute;right:-3%;bottom:-8%;height:86%;width:66%;transform:rotate(calc(7deg - var(--flow,1)*10deg)) scale(calc(.8 + var(--flow,1)*.2));margin:0;transition:transform .6s cubic-bezier(.22,1,.36,1);overflow:hidden;box-shadow:0 12px 45px #0002}.ex-next-art>img{width:100%;height:100%;object-fit:cover}.ex-next:hover .ex-next-art{transform:rotate(0deg) scale(1.035)}.ex-next-arrow{font-size:55px;z-index:5;right:30px;top:25px}.ex-end-index{border-top:1px solid color-mix(in srgb,currentColor 25%,transparent);padding-top:20px}
.ex-bridge{overflow:hidden}.ex-bridge-images>img{transform:translateX(calc((1 - var(--flow,1))*-15%)) rotate(calc(-13deg + var(--flow,1)*7deg))}.ex-bridge-type{transform:translateY(calc((1 - var(--flow,1))*100px)) rotate(calc(18deg - var(--flow,1)*10deg))}.ex-bridge-copy h2{transform:translateX(calc((1 - var(--flow,1))*50px))}
.ex-experiment{position:relative;overflow:hidden}.ex-experiment-head h2{transform:translateX(calc((1 - var(--flow,1))*5vw))}.ex-play-canvas{transform-origin:center top;transform:perspective(1600px) rotateX(calc((1 - var(--flow,1))*6deg)) scale(calc(.94 + var(--flow,1)*.06))}
.ex-chapters{background:var(--ex-ink)}
/* Direct manipulation keeps the projects' own visual grammar. */
.cv-patch-live .ex-patch{cursor:grab;touch-action:none;transition:filter .2s;transform-box:view-box}.cv-patch-live .ex-patch.is-grabbed{cursor:grabbing;filter:drop-shadow(5px 10px 5px #0005)}.cv-patch-live .ex-connecting-thread{pointer-events:none;stroke-dasharray:5 5;transition:none}.cv-patch-live .ex-patch:focus-visible{outline:none;filter:drop-shadow(0 0 4px #153dda)}
.cv-direct-drag{touch-action:pan-y;cursor:ew-resize}.ex-ruler-canvas.cv-direct-drag{cursor:ns-resize;touch-action:none}.ex-label-card{cursor:pointer}.ex-label-card:focus-visible{outline:3px solid #153dda;outline-offset:8px}
.cv-specimen{perspective:1000px}.cv-specimen>img{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s ease-out}.cv-specimen>div{transform:translateX(calc(var(--flow,1)*0px))}
.ex-score-lines>div.active i{animation-play-state:paused}.ex-score.is-playing .ex-score-lines>div.active i{animation:cv-beat .9s ease-in-out infinite alternate;animation-delay:calc(var(--beat,0)*-.16s)}.ex-score-lines i:nth-of-type(2){--beat:1}.ex-score-lines i:nth-of-type(3){--beat:2}.ex-score-lines i:nth-of-type(4){--beat:3}.ex-score-lines>div:nth-child(2) i{animation-duration:1.35s!important}.ex-score-lines>div:nth-child(3) i{animation-duration:.45s!important}.ex-score-lines>div:nth-child(4) i{animation-duration:1.8s!important}
@keyframes cv-beat{from{translate:0 8px;scale:1 .6}to{translate:0 -8px;scale:1 1.25}}
.ex-sign svg{transition:transform .8s cubic-bezier(.22,1,.36,1)}.ex-sign.cv-chair-straight svg{transform:rotate(0deg) translateY(15px)}
.cv-tea-point{position:absolute;display:flex;align-items:center;gap:8px;transform:translate(-50%,-50%);font-size:12px;background:#eee4d5;color:#613f36;border:1px solid #613f3644;padding:5px 7px 5px 12px;border-radius:30px;box-shadow:0 4px 15px #0002}.cv-tea-point i{font-style:normal;font-size:23px;line-height:24px}.cv-tea-point:hover i{transform:rotate(45deg)}.ex-dialogue span{transition:transform .4s}.ex-tea-table[data-dialogue="1"] .ex-dialogue span{transform:rotate(2deg)}.ex-tea-table[data-dialogue="2"] .ex-dialogue span{transform:rotate(-7deg)}
/* Route fallback: a full image is carried across even without View Transitions. */
.cv-route-veil{position:fixed;inset:0;z-index:9998;pointer-events:none;background:var(--portal-bg,#f0f1f2)}.cv-route-image{position:fixed;z-index:9999;pointer-events:none;overflow:hidden;transform-origin:top left;background:var(--portal-bg,#f0f1f2)}.cv-route-image img{width:100%;height:100%;object-fit:cover}.cv-route-image .cv-between{width:100%;height:100%}
@media(max-width:1000px){.cv-story-copy{width:28%;right:3%}.cv-story-step h2{font-size:6.5vw}.cv-story-step h3{font-size:17px}.cv-story-step p{font-size:11px}.cv-story-step .cv-detail-copy{font-size:10px}.cv-gesture{display:none}.cv-stage-top{font-size:10px}.cv-annotations span{font-size:10px}}
@media(max-width:759px){
 .cv-stage{min-height:530px}.cv-titles{top:10%;height:20%}.cv-titles>div>span{font-size:13.7vw}.cv-titles small{font-size:10px;margin-top:10px}.cv-track{inset:29% 0 23%}.cv-card{width:78vw}.cv-card-caption{font-size:10px;gap:12px;padding:10px 12px}.cv-card-caption>b{font-size:10px}.cv-annotations{bottom:65px;min-height:65px}.cv-annotations>div{display:block}.cv-annotations p{font-size:20px;margin-bottom:7px}.cv-annotations span{display:block;width:100%;font-size:10px;max-width:none;line-height:1.6}.cv-track-index{gap:8px}.cv-track-index button{font-size:9px;justify-content:center}.cv-track-index i{display:none}.cv-track-index button[aria-pressed=true]{border-top:3px solid}.cv-transport{gap:12px;height:48px}.cv-transport>button{font-size:20px;width:22px}
 .cv-sequence{height:315vh;height:315svh}.cv-story-pin{min-height:570px}.cv-story-top{top:15px;font-size:10px}.cv-word-track{top:3%;font-size:30vw;gap:16vw;opacity:.13}.cv-story-copy{top:59%;bottom:65px;left:var(--pad);right:var(--pad);width:auto}.cv-story-step{display:grid;grid-template-columns:32% 1fr;grid-template-rows:auto 1fr;align-content:center;gap:0 24px}.cv-story-step>span{display:none}.cv-story-step h2{grid-column:1;grid-row:1 / 4;font-size:10vw;align-self:center;margin:0;white-space:normal;line-height:1.25}.cv-story-step h2 i{display:none}.cv-story-step h3{font-size:16px;margin:0 0 7px;align-self:end}.cv-story-step p{font-size:11px;margin:0;line-height:1.65}.cv-story-step .cv-detail-copy{display:none}.cv-story-step>button{margin-top:10px;font-size:10px;grid-column:2;padding:6px 0}.cv-story-nav{gap:18px;height:49px}.cv-story-nav>button{font-size:11px;gap:6px}.cv-story-nav i{width:15px}.cv-story-nav>a{font-size:9px;max-width:75px;text-align:right}.cv-frame>span{font-size:9px;padding:8px 12px}.cv-frame b{font-size:15px}
 .ex-opening{height:150vh;height:150svh;min-height:0}.ex-opening-pin{top:var(--cv-top);height:calc(100vh - var(--cv-top));height:calc(100svh - var(--cv-top));min-height:520px;max-height:none}.ex-cover-art{right:calc(0% - var(--cover-progress,0)*2%);top:calc(32% - var(--cover-progress,0)*26%);width:calc(85% + var(--cover-progress,0)*17%);height:calc(53% + var(--cover-progress,0)*42%)}.ex-case-name{transform:translate(calc(var(--cover-progress,0)*-16vw),calc(var(--cover-progress,0)*-18vh))}.ex-cover-sheet{transform:translateX(calc(var(--cover-progress,0)*-45vw)) rotate(-8deg)}
 .ex-epilogue>p{font-size:28px}.ex-next{height:60vh;height:60svh;min-height:420px;padding:25px 6%}.ex-next h2{font-size:12vw;margin-top:22px}.ex-next p{font-size:12px}.ex-next-art{right:-10%;bottom:-5%;width:90%;height:64%;margin:0}.ex-next-arrow{font-size:34px;right:20px;top:18px}.cv-tea-point{font-size:10px;padding:3px 5px 3px 9px}.cv-tea-point i{font-size:18px;line-height:20px}
}
@media(max-width:599px){:root{--cv-top:68px;--cv-chapter:116px}.cv-titles{top:12%}.cv-track{inset:31% 0 25%}.cv-story-pin{min-height:550px}.cv-story-step h3{font-size:14px}.cv-story-step p{font-size:10px}.cv-story-step{gap:0 14px}.cv-annotations span{font-size:9px}.cv-stage-top{font-size:9px}.cv-stage{min-height:540px}}
@media(max-width:759px){.cv-story-step{grid-template-rows:repeat(4,min-content);align-content:center}.cv-story-step h2{grid-row:1 / 5}.cv-story-step .cv-detail-copy{display:block;grid-column:2;font-size:10px;margin-top:8px}.cv-story-step>button{margin-top:12px}.cv-story-copy{top:61%}}
@media(min-width:760px) and (max-height:740px){.cv-story-step h2{font-size:5.5vw;margin:10px 0 15px}.cv-story-step h3{font-size:17px}.cv-story-step p{font-size:11px;line-height:1.65;margin:6px 0}.cv-story-step .cv-detail-copy{font-size:10px}.cv-story-step>button{margin-top:12px}.cv-card{max-height:none}.cv-track{inset:25% 0 23%}.cv-annotations{bottom:64px}.cv-titles>div>span{font-size:10vw}.cv-titles small{margin-top:3px}}
/* Motion off is a complete document, not a collection of hidden frames. */
.cinema-static .cv-journey{height:auto;min-height:0}.cinema-static .cv-stage{position:relative;top:auto;height:auto;min-height:0;padding:35px var(--pad);background:var(--paper);color:var(--ink)}.cinema-static .cv-stage-top,.cinema-static .cv-titles,.cinema-static .cv-annotations,.cinema-static .cv-transport{display:none}.cinema-static .cv-track{position:relative;inset:auto;display:grid;grid-template-columns:1fr 1fr;gap:30px;cursor:auto}.cinema-static .cv-card{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:1.45;transform:none;box-shadow:none;max-height:none}.cinema-static .cv-card-caption{opacity:1;font-size:11px}.cinema-static .cv-sequence{height:auto}.cinema-static .cv-story-pin{position:relative;top:auto;height:auto;min-height:0;padding:35px var(--pad)}.cinema-static .cv-layout,.cinema-static .cv-word-track,.cinema-static .cv-story-top,.cinema-static .cv-story-nav{display:none}.cinema-static .cv-story-copy{position:relative;inset:auto;width:100%;pointer-events:auto}.cinema-static .cv-story-step{position:relative;inset:auto;display:grid;grid-template-columns:1fr 1fr;column-gap:6%;opacity:1;visibility:visible;transform:none;margin:0 0 65px;pointer-events:auto}.cinema-static .cv-mobile-fallback{display:block;grid-column:1;grid-row:1 / 7}.cv-mobile-fallback img{width:100%;height:auto;max-height:600px;object-fit:contain}.cinema-static .cv-story-step h2{grid-column:2;grid-row:auto;font-size:clamp(40px,5vw,80px)}.cinema-static .cv-story-step>span{display:none}.cinema-static .cv-story-step h3,.cinema-static .cv-story-step p,.cinema-static .cv-story-step>button{grid-column:2}.cinema-static .cv-story-step .cv-detail-copy{display:block}.cinema-static .ex-score.is-playing i{animation:none!important}
@media(max-width:599px){.cinema-static .cv-track{grid-template-columns:1fr}.cinema-static .cv-story-step{display:block;margin-bottom:45px}.cinema-static .cv-story-step h2{font-size:55px;margin:20px 0}.cinema-static .cv-story-step h3{font-size:19px}.cinema-static .cv-story-step p{font-size:12px;margin:12px 0}.cinema-static .cv-story-step>button{width:100%}}
@media(prefers-reduced-motion:reduce){.cv-stage,.cv-card,.cv-specimen>img,.ex-sign svg,.ex-next-art{transition:none}.ex-score.is-playing i{animation:none!important}}