.maap-story{--spread:0;--copy:0;--art-width:min(30vw,43svh);--art-height:62svh;position:relative;height:240svh;background:#191817;color:#ece7df}
.story-stage{height:100svh;min-height:680px;position:sticky;top:0;overflow:hidden;background:radial-gradient(ellipse at 35% 45%,#51463b40,transparent 65%)}
.story-label{position:absolute;top:35px;left:5vw;right:5vw;display:flex;justify-content:space-between;border-top:1px solid #ffffff26;padding-top:18px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#b3a89a}
.story-art{position:absolute;left:calc(50% - var(--spread)*20%);top:46%;width:var(--art-width);height:var(--art-height);transform:translate(-50%,-50%);perspective:1500px}
.story-plane{position:absolute;top:0;height:100%;width:33.3334%;overflow:hidden;box-shadow:0 25px 45px #0004;will-change:transform;backface-visibility:hidden}
.story-photo{position:absolute;top:0;width:var(--art-width);height:100%;background:url('assets/images/stone-detail.webp') center 51%/cover no-repeat}
.story-left{left:0;transform:translate(calc(var(--spread)*-9vw),calc(var(--spread)*5svh)) rotateY(calc(var(--spread)*-14deg))}
.story-center{left:33.3333%;transform:translateY(calc(var(--spread)*-4svh))}
.story-right{left:66.6666%;transform:translate(calc(var(--spread)*9vw),calc(var(--spread)*8svh)) rotateY(calc(var(--spread)*14deg))}
.story-center .story-photo{left:-100%}.story-right .story-photo{left:-200%}
.story-plane span{position:absolute;left:10px;bottom:12px;font-size:12px;opacity:var(--spread);text-shadow:0 1px 8px #000}
.story-depth{position:absolute;width:57%;height:74%;top:13%;overflow:hidden;opacity:var(--spread);box-shadow:0 20px 50px #0005}
.story-depth img{width:100%;height:100%;object-fit:cover}.story-blue{left:-4%;transform:translateX(calc(var(--spread)*-3vw)) rotate(-5deg)}.story-red{right:-4%;transform:translateX(calc(var(--spread)*3vw)) rotate(5deg)}
.story-invitation{position:absolute;left:0;right:0;bottom:7%;margin:0;text-align:center;font:clamp(25px,3vw,46px)/1.05 Georgia,serif;letter-spacing:-.04em;opacity:calc(1 - var(--copy));transform:translateY(calc(var(--copy)*20px))}.story-invitation em{color:#b5a48d}
.story-copy{position:absolute;left:64%;right:6%;top:50%;transform:translateY(calc(-50% + (1 - var(--copy))*35px));opacity:var(--copy);visibility:hidden;max-width:490px;font-size:16px;line-height:1.65}
.story-copy.is-visible{visibility:visible}.story-copy p{margin:0 0 18px}.story-copy .story-brand{font-size:clamp(62px,7vw,116px);line-height:.8;letter-spacing:-.075em;margin-bottom:30px}.story-copy h2{font:clamp(32px,3.4vw,58px)/1.06 Georgia,serif;letter-spacing:-.05em;margin:0 0 28px}.story-copy h2 em{color:#b5a48d;font-weight:400}.story-copy .story-lead{font:clamp(21px,1.7vw,26px)/1.3 Georgia,serif;letter-spacing:-.015em}
.story-contact{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d6c7b577;margin-top:26px;padding:12px 0;font-size:14px}.story-contact small{display:block;color:#b3a89a;font-size:12px}.story-note{position:absolute;left:5vw;bottom:30px;color:#b3a89a;font-size:12px;letter-spacing:.08em;opacity:var(--copy)}
.story-footer{background:#191817;color:#ece7df;margin:0;padding:25px 5vw 30px;border-top:1px solid #ffffff26}.story-footer img{filter:brightness(0) invert(.93)}
/* Narrow/short screens use natural document flow: never trap the text below a sticky viewport. */
@media(max-width:900px),(max-height:720px){.maap-story{height:auto;--art-width:min(54vw,370px);--art-height:52svh}.story-stage{position:relative;height:auto;min-height:0;padding:105px 7vw 60px;overflow:hidden}.story-label{left:7vw;right:7vw;top:24px}.story-label span:last-child{font-size:11px;letter-spacing:.04em}.story-art{position:relative;left:auto;top:auto;margin:0 auto 80px;transform:none}.story-left{transform:translate(calc(var(--spread)*-12vw),calc(var(--spread)*3svh)) rotateY(calc(var(--spread)*-10deg))}.story-right{transform:translate(calc(var(--spread)*12vw),calc(var(--spread)*5svh)) rotateY(calc(var(--spread)*10deg))}.story-invitation{display:none}.story-copy{position:relative;left:auto;right:auto;top:auto;max-width:600px;margin:0 auto;transform:translateY(calc((1 - var(--copy))*25px))}.story-copy .story-brand{font-size:80px}.story-copy h2{font-size:48px}.story-note{display:none}.story-copy .story-lead{font-size:25px}}
@media(prefers-reduced-motion:reduce){html:not(.motion-enabled) .maap-story{height:auto;--spread:1!important;--copy:1!important}html:not(.motion-enabled) .story-stage{position:relative}html:not(.motion-enabled) .story-copy{visibility:visible}html:not(.motion-enabled) .story-invitation{display:none}}
@media(scripting:none){.maap-story{height:auto;--spread:1;--copy:1}.story-stage{position:relative}.story-copy{visibility:visible}.story-invitation{display:none}}
.story-prelude{position:absolute;top:46%;width:25%;transform:translateY(calc(-50% - (1 - var(--intro,1))*24px));opacity:var(--intro,1);pointer-events:none;color:#ece7df}
.prelude-left{left:5vw}.prelude-kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#b3a89a;margin:0 0 24px}.prelude-left h3{font:clamp(32px,3.6vw,70px)/1.1 Georgia,serif;letter-spacing:-.045em;margin:0}.prelude-left em{font-weight:400;color:#b5a48d}
.prelude-right{right:5vw;width:23%;font-size:clamp(16px,1.25vw,21px);line-height:1.65}.prelude-right p{margin:0 0 18px;max-width:360px}.prelude-rule{display:block;width:50px;height:1px;background:#b5a48d;margin-bottom:25px}.prelude-index{display:block;margin-top:32px;color:#b3a89a;font-size:12px;letter-spacing:.06em}
.opening{background:#e6e3db;color:#292924;padding:45px 6vw 35px;color-scheme:light;overflow:hidden}.opening-top{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #29292440;padding-top:20px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#6f685d}.opening-status{display:flex;align-items:center;gap:10px}.opening-status i{width:6px;height:6px;flex-shrink:0;border-radius:50%;background:#88775f;box-shadow:0 0 0 5px #88775f12}
.opening-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:8vw;align-items:center;padding:90px 0}.opening h2{font:clamp(54px,7.4vw,125px)/1.03 Georgia,serif;letter-spacing:-.06em;margin:0}.opening h2 em{color:#82745f;font-weight:400}.opening-copy{max-width:450px;font-size:16px;line-height:1.75}.opening-copy p{margin:0 0 20px}.opening-copy .opening-lead{font:clamp(25px,2.3vw,34px)/1.25 Georgia,serif;letter-spacing:-.02em}.opening-link{display:flex;justify-content:space-between;align-items:center;padding:20px 0 14px;border-bottom:1px solid #29292466;margin-top:28px;font-size:15px}.opening-link small{display:block;font-size:12px;color:#756b5b}.opening-link>span:last-child{font-size:24px;transition:transform .3s}.opening-link:hover>span:last-child{transform:translate(3px,-3px)}.opening-signoff{border-top:1px solid #29292425;margin:0;padding-top:22px;font-size:12px;letter-spacing:.07em;display:flex;justify-content:space-between;color:#6f685d}
.opening.reveal-ready .opening-reveal{opacity:0;transform:translateY(35px);transition:opacity .85s ease,transform 1s cubic-bezier(.2,.7,.2,1)}.opening.reveal-ready .opening-copy{transition-delay:.15s}.opening.is-revealed .opening-reveal{opacity:1;transform:none}.opening:focus-within .opening-reveal{opacity:1;transform:none}
@media(max-width:900px),(max-height:720px){.story-prelude{position:relative;top:auto;left:auto;right:auto;transform:none;opacity:1;width:auto;max-width:600px;margin:0 auto 38px}.prelude-left h3{font-size:clamp(36px,7vw,56px)}.prelude-left h3 br:first-child{display:none}.prelude-right{font-size:16px}.prelude-right p{max-width:none}.prelude-right p:last-of-type,.prelude-rule,.prelude-index{display:none}.story-art{margin-top:45px}.opening-layout{grid-template-columns:1fr;gap:40px;padding:55px 0}.opening-copy{max-width:600px}.opening h2{font-size:clamp(54px,11vw,85px)}.opening-top>span:last-child{display:none}.opening-signoff{display:block;line-height:1.7}.opening-signoff span{display:block}}
@media(prefers-reduced-motion:reduce){.opening.reveal-ready .opening-reveal{opacity:1;transform:none;transition:none}.opening-link>span:last-child{transition:none}html:not(.motion-enabled) .story-prelude{display:none}}
@media(scripting:none){.story-prelude{display:none}}
.opening .opening-signoff{border-top:0}
.story-footer>img{transform:translateY(7px)}
.opening-signature{display:block;width:clamp(180px,22vw,310px);height:auto;margin:42px 0 0;mix-blend-mode:multiply;opacity:.84}
@media(max-width:900px){.opening-signature{width:clamp(180px,48vw,260px);margin-top:30px}}
