/* VOWSCAST / THE STORY STUDIO
   A two-dimensional upward scene change + an assembling edit timeline.
   Static markup is complete. Only transform / opacity are written while scrolling.
   Native sticky, never wheel/touch interception. No WebGL, canvas, or autoplay. */
.story-studio{overflow:visible;padding-bottom:72px;background:#e2d7c9;--studio-paper:#dfd2c0;--studio-ink:#211b16;--studio-line:rgba(51,40,31,.23)}
.story-studio .section-index{margin-bottom:0}
.story-stage{display:grid;grid-template-columns:.82fr 1.18fr;gap:6vw;align-items:center;padding:54px 0}
.story-copy>.eyebrow{font-size:9px;letter-spacing:.15em;margin-bottom:23px}
.story-copy h2{font-size:clamp(64px,7.1vw,112px);letter-spacing:-.07em;line-height:.87;margin:0}
.story-copy h2 .soft-ink{color:#8d725c}
.story-deck{font-size:14px;color:#6a5848;line-height:1.75;max-width:360px;margin:27px 0 24px}
.story-steps{display:grid;gap:0;border-top:1px solid var(--studio-line)}
.story-step{display:flex;align-items:center;gap:15px;border-bottom:1px solid var(--studio-line);padding:17px 5px;text-align:start;min-height:71px;width:100%;color:#705d4c}
.story-step .step-no{font-size:10px;font-weight:700;align-self:flex-start;line-height:21px;flex-shrink:0}
.story-step strong{display:block;font-size:17px;font-weight:800;letter-spacing:-.025em;line-height:1.2}
.story-step small{display:block;font-size:10px;line-height:1.5;margin-top:6px}
.story-step .step-arrow{margin-inline-start:auto;opacity:.3;font-size:24px}
.story-step[aria-pressed=true]{color:#211b16}
.story-step[aria-pressed=true] .step-arrow{opacity:1;transform:translate(2px,-2px)}
.story-step:hover .step-arrow{opacity:1}
.story-step:focus-visible{outline:2px solid #211b16;outline-offset:3px}
.story-collection-link{font-size:12px;margin-top:18px}
.story-room{position:relative;background:var(--studio-ink);color:#f0e7db;border:1px solid #554332;border-radius:3px;box-shadow:0 28px 60px -28px #39251940;min-width:0;isolation:isolate}
.story-room-top{display:flex;gap:15px;align-items:center;justify-content:space-between;min-height:47px;padding:16px 21px;font-size:8px;letter-spacing:.1em;border-bottom:1px solid #f0e7db20;line-height:1.5}
.story-room-top>span:first-child{font-weight:700}
.story-count{flex-shrink:0;letter-spacing:.1em;font-variant-numeric:tabular-nums;color:#c8b095;font-size:9px}
.story-screen{position:relative;overflow:clip;background:#2c221a}
.story-scene{position:relative;aspect-ratio:1.42;isolation:isolate;overflow:hidden;background:#231b15;color:#fff7eb}
.story-scene>img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 53%;max-width:none}
.story-photo-shade{position:absolute;inset:0;background:linear-gradient(0deg,#17110bed 0%,#17110b44 38%,transparent 70%);z-index:1}
.story-scene-copy{position:absolute;inset:auto 25px 26px;z-index:2}
.story-scene-copy>.eyebrow{font-size:8px;letter-spacing:.11em;color:#dcc7ad;line-height:1.8;margin-bottom:13px}
.story-scene-copy h3{font-size:clamp(32px,3.25vw,52px);letter-spacing:-.04em;line-height:.98;font-weight:800}
.story-keepsake{background:#dbccb7;color:#221a14;display:flex;flex-direction:column;padding:24px 28px}
.story-keepsake:before{content:'';position:absolute;width:65%;height:120%;right:-34%;top:0;border:1px solid #9f876851;transform:rotate(22deg);pointer-events:none;z-index:-1}
.keepsake-header{display:flex;justify-content:space-between;align-items:center;font-size:14px;letter-spacing:-.045em;font-weight:900;gap:25px;line-height:1.2}
.keepsake-header>span:last-child{font-size:29px;font-weight:400}
.keepsake-type{margin:auto 0;padding:20px 0}
.keepsake-type>.eyebrow{font-size:8px;letter-spacing:.11em;line-height:1.7;margin-bottom:14px}
.keepsake-type h3{font-size:clamp(36px,4.55vw,70px);font-weight:900;letter-spacing:-.065em;line-height:.90}
.keepsake-type h3>span{color:#876b52}
.keepsake-type>p:last-child{margin-top:16px;font-size:13px;font-weight:500;line-height:1.6}
.keepsake-wave{display:flex;gap:3px;height:31px;width:100%;align-items:center;overflow:hidden;margin-bottom:17px}
.keepsake-wave i{width:3px;height:var(--peak);flex:1;display:block;background:#896e53;transform-origin:center}
.keepsake-bottom{display:flex;gap:20px;justify-content:space-between;font-size:7px;font-weight:700;letter-spacing:.11em;border-top:1px solid #80654c66;padding-top:12px;line-height:1.5}
.story-edit{padding:15px 21px 0;background:#231c17;direction:ltr}
.edit-ruler{margin-left:48px;display:flex;justify-content:space-between;position:relative;font-size:7px;line-height:1.2;color:#baa184;border-bottom:1px solid #9a80633a;padding-bottom:7px}
.edit-ruler:after{content:'';position:absolute;inset:auto 0 -4px;height:7px;background:repeating-linear-gradient(90deg,#9a80635c 0 1px,transparent 1px 10%)}
.edit-tracks{position:relative;margin-top:10px;display:grid;gap:5px}
.edit-track{display:flex;align-items:center;gap:10px;min-width:0;height:24px}
.edit-track-label{font-size:6px;letter-spacing:.09em;min-width:38px;max-width:38px;overflow:hidden;font-weight:700;color:#b9a389}
.edit-track-lane{display:flex;gap:4px;flex:1;min-width:0;height:24px;overflow:hidden;background:#57402e1a}
.edit-clip{height:100%;border:1px solid #bb947452;background:#886c5350;display:flex;align-items:center;min-width:0}
.clip-one{width:43%}.clip-two{width:30%;background:#c3a77c33}.clip-three{flex:1}
.clip-four{width:27%}.clip-five{width:44%;background:#c3a77c33}.clip-six{flex:1}
.clip-wave{height:16px;width:100%;display:flex;align-items:center;gap:2px;padding:0 3px;overflow:hidden}
.clip-wave i{display:block;flex:1;min-width:1px;height:var(--peak);background:#ccab83;opacity:.82}
.film-clip{font-size:5px;letter-spacing:.08em;line-height:1.4;justify-content:center;color:#dcc7ad;white-space:nowrap;overflow:hidden}
.edit-playhead{position:absolute;left:48px;right:0;top:-15px;bottom:-5px;pointer-events:none}
.edit-playhead>i{position:absolute;left:0;top:0;bottom:0;width:1px;background:#f3e3cc;box-shadow:0 0 12px #eac49244}
.edit-playhead>i:before{content:'';position:absolute;top:0;left:-3px;width:7px;height:4px;background:#f3e3cc}
.story-room-bottom{display:flex;justify-content:space-between;gap:18px;align-items:center;font-size:7px;letter-spacing:.11em;padding:18px 21px 17px;min-height:44px;color:#c8ad8d;line-height:1.7}
.story-room-bottom>span:last-child{font-size:19px;line-height:1}
.story-meter{height:2px;background:#79624d40;overflow:hidden}
.story-meter i{display:block;height:100%;width:100%;background:#c4a17c;transform-origin:left}
.story-motion-hint{display:none}
.story-studio .kit-grid{margin-top:12px}
/* CSS reserves the entire runway before the scene script starts. */
@media(min-width:768px) and (min-height:640px) and (prefers-reduced-motion:no-preference){
 html[data-motion=on] .story-runway{height:calc(min(850px,100svh) + 150svh)}
 html[data-motion=on] .story-stage{height:min(850px,100svh);position:sticky;top:0;padding:42px 0}
 html[data-motion=on] .story-screen{height:clamp(300px,43svh,468px)}
 html[data-motion=on] .story-scene{position:absolute;inset:0;height:100%;aspect-ratio:auto}
 html[data-motion=on] #story-scene-2,html[data-motion=on] #story-scene-3{transform:translate3d(0,103%,0)}
 html[data-motion=on] .story-motion-hint{display:block}
 html[data-motion=on] .story-static-hint{display:none}
}
@media(max-width:1050px){.story-stage{gap:4vw;grid-template-columns:.9fr 1.1fr}.story-copy h2{font-size:7.2vw}.story-deck{font-size:13px}.story-step{gap:11px;min-height:66px;padding:15px 2px}.story-step strong{font-size:16px}.story-step small{font-size:9px}.story-room-top{padding:14px 15px;font-size:7px}.story-keepsake{padding:21px}.story-edit{padding-left:15px;padding-right:15px}.story-room-bottom{padding-left:15px;padding-right:15px;font-size:6px}.story-scene-copy{inset:auto 20px 23px}.story-scene-copy h3{font-size:34px}.keepsake-type h3{font-size:46px}}
@media(min-width:768px) and (max-height:780px){.story-copy>.eyebrow{margin-bottom:16px;font-size:8px}.story-copy h2{font-size:clamp(60px,6.5vw,90px)}.story-deck{font-size:12px;margin:20px 0}.story-step{min-height:61px;padding:12px 2px}.story-step small{font-size:9px}.story-copy .story-collection-link{margin-top:14px}.story-stage{padding:24px 0}.story-scene-copy h3{font-size:36px}.keepsake-type h3{font-size:50px}.keepsake-wave{height:23px;margin-bottom:10px}.keepsake-type{padding:10px 0}.keepsake-type>.eyebrow{margin-bottom:10px}}
@media(max-width:767px){
 .story-studio{padding-top:60px;padding-bottom:55px}
 .story-stage{display:flex;flex-direction:column;align-items:stretch;gap:22px;padding:34px 0}
 .story-copy>.eyebrow{font-size:7px;margin-bottom:14px}
 .story-copy h2{font-size:clamp(48px,12vw,75px);letter-spacing:-.055em;line-height:.88}
 .story-copy h2 br{display:none}.story-copy h2 .soft-ink{display:block;margin-top:5px}
 .story-deck{font-size:12px;line-height:1.7;margin:19px 0;max-width:100%}
 .story-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:0}
 .story-step{gap:5px;align-items:flex-start;padding:11px 0 8px;min-height:44px;border-top:1px solid var(--studio-line);border-bottom:0}
 .story-step .step-no{font-size:7px;line-height:14px}.story-step strong{font-size:10px;line-height:1.35;letter-spacing:0}.story-step small,.story-step .step-arrow{display:none}
 .story-step[aria-pressed=true]{border-top-color:#211b16}
 .story-collection-link{font-size:11px;margin-top:6px;padding:9px 0}
 .story-room-top{min-height:38px;padding:11px 14px;font-size:6px;gap:8px}.story-count{font-size:8px}
 .story-scene{aspect-ratio:1.12}.story-scene-copy{inset:auto 19px 20px}.story-scene-copy>.eyebrow{font-size:6px;margin-bottom:9px}.story-scene-copy h3{font-size:33px;line-height:1}
 .story-keepsake{padding:19px 21px}.keepsake-type{padding:12px 0}.keepsake-type>.eyebrow{font-size:6px;margin-bottom:11px}.keepsake-type h3{font-size:41px;letter-spacing:-.065em}.keepsake-type>p:last-child{font-size:11px;margin-top:11px}.keepsake-header{font-size:11px}.keepsake-header>span:last-child{font-size:23px}.keepsake-wave{height:22px;gap:2px;margin-bottom:12px}.keepsake-bottom{font-size:6px;padding-top:10px;gap:10px}
 .story-edit{padding:11px 13px 0}.edit-ruler{font-size:6px;padding-bottom:6px}.edit-track{height:20px}.edit-track-lane{height:20px}.clip-wave{height:13px;gap:1px}.edit-tracks{gap:4px;margin-top:9px}.film-clip{font-size:4px;letter-spacing:.01em}.edit-track-label{font-size:5px}.story-room-bottom{min-height:35px;padding:11px 13px;font-size:5.5px}.story-room-bottom>span:last-child{font-size:15px}
 .story-studio .kit-grid{margin-top:15px}
}
@media(max-width:767px) and (min-height:650px) and (orientation:portrait) and (prefers-reduced-motion:no-preference){
 html[data-motion=on] .story-runway{height:calc(100svh + 135svh)}
 html[data-motion=on] .story-stage{height:100svh;position:sticky;top:0;padding:23px 0;gap:17px;justify-content:center}
 html[data-motion=on] .story-screen{height:clamp(238px,33svh,355px)}
 html[data-motion=on] .story-scene{position:absolute;inset:0;height:100%;aspect-ratio:auto}
 html[data-motion=on] #story-scene-2,html[data-motion=on] #story-scene-3{transform:translate3d(0,103%,0)}
 html[data-motion=on] .story-motion-hint{display:block}html[data-motion=on] .story-static-hint{display:none}
 html[data-motion=on] .story-copy>.eyebrow{display:none}
 html[data-motion=on] .story-deck{font-size:11px;line-height:1.65;margin:13px 0}
 html[data-motion=on] .story-collection-link{display:none}
}
@media(max-width:380px) and (min-height:650px) and (max-height:720px){.story-copy h2{font-size:42px}.story-scene-copy h3{font-size:29px}.keepsake-type h3{font-size:35px}.story-keepsake{padding:15px 19px}.keepsake-wave{height:17px;margin-bottom:9px}.story-stage{gap:12px!important}.story-room-bottom{padding-top:9px;padding-bottom:9px}.story-copy .story-deck{font-size:10px!important;margin:10px 0!important}}
html[dir=rtl] .story-studio{direction:rtl}
html[dir=rtl] .story-edit{direction:ltr}
html[dir=rtl] .story-copy h2{letter-spacing:0;font-size:clamp(48px,6vw,90px);line-height:1.15}
html[dir=rtl] .story-copy .story-deck{line-height:1.7}
html[dir=rtl] .story-step strong{letter-spacing:0}
html[dir=rtl] .story-scene-copy h3,html[dir=rtl] .keepsake-type h3{letter-spacing:0;line-height:1.13}
html[dir=rtl] .keepsake-type h3{font-size:clamp(32px,3.8vw,54px)}
html[lang=hi] .story-copy h2,html[lang=hi] .story-scene-copy h3,html[lang=hi] .keepsake-type h3{line-height:1.2;letter-spacing:-.015em}
@media(max-width:767px){html[dir=rtl] .story-copy h2{font-size:38px;line-height:1.03}html[dir=rtl] .story-scene-copy h3{font-size:28px}html[dir=rtl] .keepsake-type h3{font-size:31px}html[lang=hi] .story-copy h2{font-size:37px}html[lang=hi] .story-scene-copy h3{font-size:26px}html[lang=hi] .keepsake-type h3{font-size:28px}}
@media(prefers-reduced-motion:reduce){.story-runway{height:auto!important}.story-stage{position:relative!important;height:auto!important}.story-scene{transform:none!important;opacity:1!important}.edit-playhead{display:none}.story-step,.story-step *{transition:none!important}.story-motion-hint{display:none!important}.story-static-hint{display:block!important}}
@media print{.story-runway{height:auto!important}.story-stage{position:relative!important;height:auto!important;display:block}.story-scene{position:relative!important;transform:none!important;aspect-ratio:1.42;break-inside:avoid}.story-screen{height:auto!important}.story-step{display:none}}
/* Static cover geometry stays inside its reserved frame. */
.story-keepsake{background-image:linear-gradient(113deg,transparent 74.6%,#a58b6f40 74.7%,transparent 74.9%)}
.story-keepsake:before{display:none}
@media(min-width:768px){html[lang=ko] .story-copy h2,html[lang=ja] .story-copy h2{font-size:clamp(50px,5.1vw,74px);line-height:1.05;letter-spacing:-.025em}}