@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
.storybook{--forest:#1c493b;--paper:#fbf1da;--ink:#63313b;--brass:#a77c3e;background:var(--paper);color:var(--ink)}
.storybook header{color:var(--forest);padding:25px 6%}
.storybook header>a:last-child{border-color:#8d6d4480}
.storybook .monogram i{color:var(--brass)}
.storybook .hero{background:#f8efd8 url('assets/magical-parchment.png') center/cover;color:var(--forest);display:grid;grid-template-columns:1fr 1.05fr;align-items:center;text-align:left;padding:130px max(6%,calc((100vw - 1260px)/2)) 130px;gap:55px;isolation:isolate;min-height:100svh}
.storybook .hero:before{background:linear-gradient(100deg,#fff7e3ad,#fff6e836 60%,#f3e3bf66);z-index:-1}
.storybook .hero:after{background:none}
.cover-copy{position:relative;z-index:2;align-self:center}
.storybook .hero .eyebrow{color:var(--brass);font-size:.75rem;letter-spacing:.2em}
.storybook .prelude{color:#65443e;font-size:1.6rem;margin:20px 0 12px}
.storybook .hero h1{display:flex;flex-direction:column;align-items:flex-start;gap:0;font-family:'Great Vibes','Cormorant Garamond',Georgia,serif;font-size:clamp(3rem,9.5vw,9.8rem);line-height:1.04;letter-spacing:0;color:var(--forest);text-shadow:none;font-weight:400}
.storybook .hero h1 .name:last-child{align-self:flex-end}
.storybook .hero h1>em{font-family:'Cormorant Garamond',Georgia,serif;color:var(--brass);font-size:.24em;font-style:italic;margin:0 0 -2px 45%;line-height:1}
.storybook .glyph{letter-spacing:-.03em;filter:none;transform:translateY(35px) rotate(0);padding-right:2px}
.storybook .hero-bottom{margin:20px 0 0}
.storybook .hero-bottom .occasion{font-family:'DM Sans',sans-serif;color:#6e4e43;font-size:.75rem;letter-spacing:.13em;line-height:1.7}
.storybook .hero-bottom .rule{margin:20px 0 0;width:85px;background:var(--brass)}
.cover-art{position:relative;height:580px;align-self:center;margin-top:0;isolation:isolate}
.cover-city{position:absolute;left:-8%;top:5%;width:112%;height:90%;object-fit:cover;object-position:55% center;border-radius:48% 48% 2px 2px;filter:sepia(.15) saturate(.75);mask-image:linear-gradient(#000 65%,transparent 100%);opacity:.86}
.cover-caption{position:absolute;left:0;right:0;bottom:5%;font:italic 2.2rem 'Cormorant Garamond',Georgia,serif;text-align:center;color:var(--ink);z-index:2}
.cover-art:before{content:'';position:absolute;inset:-12px -12px 0;border:1px solid #a77c3e66;border-radius:48% 48% 0 0;pointer-events:none}
.cover-art:after{content:'';position:absolute;left:50%;top:-42px;height:50px;width:1px;background:var(--brass)}
.cover-edition{position:absolute;bottom:48px;left:6%;font-size:.75rem;letter-spacing:.12em;color:#805a47}
.storybook .hero .scroll-cue{left:auto;right:6%;bottom:35px;font:italic 1.2rem 'Cormorant Garamond',Georgia,serif;color:var(--forest);letter-spacing:0}
.storybook .scroll-cue span{background:var(--brass);margin:9px auto 0}
.entered .cover-art{animation:cover-open 2s .25s cubic-bezier(.16,1,.3,1) both}
@keyframes cover-open{from{opacity:0;transform:translateY(55px) rotate(4deg)}to{opacity:1;transform:none}}
@media(max-width:800px){.storybook .hero{padding:105px 30px 110px;grid-template-columns:1fr;gap:35px}.cover-copy{width:min(420px,100%);margin:0 auto}.storybook .hero h1{font-size:clamp(2.5rem,21vw,7rem)}.storybook .hero h1 .name:last-child{padding-right:5px}.storybook .hero .eyebrow{font-size:.75rem;letter-spacing:.13em}.storybook .prelude{font-size:1.45rem;margin:18px 0 10px}.storybook .hero h1>em{margin-left:46%;font-size:.25em}.storybook .hero-bottom .occasion{font-size:.75rem;letter-spacing:.07em}.cover-art{width:min(420px,100%);height:410px;margin:0 auto}.cover-caption{font-size:1.8rem}.cover-edition{bottom:41px;left:30px;font-size:.75rem;max-width:150px}.storybook .hero .scroll-cue{right:30px;bottom:32px}.cover-art:before{inset:0 0 0}.cover-city{left:3%;width:94%;height:92%;top:4%}.cover-art:after{display:none}}
@media(prefers-reduced-motion:reduce){.entered .cover-art{animation:none}.storybook .glyph{transform:none}.storybook .hero h1>em{opacity:1;transform:none}}
/* The invitation opens into three pages of one book. */
.cover-person{position:absolute;bottom:35px;height:89%;width:62%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 18px 18px #39261620);mask-image:linear-gradient(#000 83%,transparent 100%);z-index:1}
.cover-ronak{left:-4%}.cover-prakrati{right:-8%;height:87%}
.cover-city{opacity:.47;filter:sepia(.24) saturate(.65)}
.cover-caption{bottom:0;font-family:'Great Vibes','Cormorant Garamond',Georgia,serif;font-style:normal;font-size:2.7rem}
.storybook .hero h1 .name{white-space:nowrap;clip-path:inset(-20% 100% -25% -10%);padding:0 8px 0 0;filter:none;opacity:1;transform:none;line-height:1.16}
.storybook.entered .hero h1 .name{animation:write-name 1.9s .15s cubic-bezier(.16,1,.3,1) both}
.storybook.entered .hero h1 .name:last-child{animation-delay:.6s}
.storybook .intro.departing{transform:scale(1.6);transition:transform .95s cubic-bezier(.76,0,.24,1),opacity .85s,visibility .85s}
.storybook .portrait-journey{background:var(--forest);padding:0 24px;color:var(--ink)}
.storybook .portrait-stage{isolation:isolate;background:var(--paper);perspective:1800px;box-shadow:0 15px 75px #0c251d40}
.storybook .portrait-scene{background:var(--paper) url('assets/magical-parchment.png') center/cover;color:var(--ink);transform-origin:0 50%;backface-visibility:hidden;isolation:isolate}
.cinematic .storybook .portrait-scene{transform:rotateY(var(--page-turn,0deg));will-change:transform,opacity}
.storybook .portrait-scene:after{content:'';position:absolute;top:0;bottom:0;right:0;width:45px;background:linear-gradient(90deg,transparent,#614118);opacity:var(--page-shadow,0);pointer-events:none}
.storybook .scene-background{inset:auto;width:62%;height:75%;right:-5%;bottom:8%;object-fit:cover;mask-image:radial-gradient(ellipse,#000 30%,#000c 52%,transparent 72%);opacity:.58;mix-blend-mode:multiply;filter:sepia(.24) saturate(.65);z-index:-1;transform:translateY(var(--scene-pan,0px)) scale(1.06)}
.storybook .scene-shade{display:none}
.storybook .scene-outline{border:1px solid #a77c3e55;inset:24px;z-index:0}
.storybook .scene-content{width:min(1220px,100%);grid-template-columns:1fr 1.1fr;gap:40px;padding:75px 90px 95px;position:relative;z-index:1}
.storybook .scene-copy h2{font:400 clamp(3rem,9vw,9rem)/1.12 'Great Vibes','Cormorant Garamond',Georgia,serif;letter-spacing:0;color:var(--forest);text-shadow:none}
.storybook .scene-kicker{color:var(--brass);font-size:.75rem;letter-spacing:.16em;margin-bottom:20px}
.storybook .scene-location{font:italic 1.8rem 'Cormorant Garamond',Georgia,serif;color:#815743;margin-top:20px}
.storybook .scene-location:before,.storybook .scene-location:after{background:var(--brass)}
.storybook .portrait-frame{width:390px;height:min(65svh,610px);aspect-ratio:auto;max-width:100%;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:translateY(var(--portrait-y,0px));filter:drop-shadow(0 20px 15px #754b291c)}
.storybook .portrait-frame:after{display:none}
.storybook .portrait-frame img{object-fit:contain;object-position:center bottom;border-radius:0;mask-image:linear-gradient(#000 87%,transparent 100%)}
.storybook .portrait-frame figcaption{bottom:-15px;background:none;color:#76594c;font-size:.75rem;text-shadow:none;left:10px;right:10px;padding:0}
.storybook .scene-prakrati .portrait-frame{transform:translateY(var(--portrait-y,0px));margin-left:20px}
.storybook .scene-prakrati .scene-background{left:-5%;right:auto}
.storybook .scene-together .scene-content{display:grid;grid-template-columns:.8fr 1.25fr;text-align:left;gap:30px;padding:70px 80px 95px;align-items:center}
.storybook .scene-together .scene-copy h2{font-size:clamp(5rem,8.5vw,8rem);line-height:1.1}
.storybook .scene-together .scene-location{justify-content:flex-start;font-size:1.8rem;margin-top:20px}
.storybook .scene-together .scene-location:after{display:none}
.storybook .scene-together .scene-background{height:85%;width:75%;right:-6%;bottom:0;opacity:.53;object-position:60% center;filter:sepia(.15) saturate(.8)}
.storybook .joined-portraits{width:100%;height:min(64svh,600px);max-width:610px;display:block;padding:0;position:relative}
.storybook .joined-portraits .portrait-frame{position:absolute;bottom:0;width:64%;height:100%;min-height:0;max-height:none}
.storybook .joined-portraits .portrait-ronak{left:-4%;transform:translateX(var(--join-left,0px));z-index:2}
.storybook .joined-portraits .portrait-prakrati{right:-10%;transform:translateX(var(--join-right,0px));z-index:1;height:98%}
.storybook .portrait-ampersand{display:none}
.storybook .standin-note{bottom:-20px;color:#76594c;font-size:.75rem;letter-spacing:.04em}
.storybook .scene-progress,.storybook .scene-scroll-hint{color:#78513d}
.storybook .scene-track{background:#b9986840}
.storybook .scene-track i{background:var(--brass)}
.cinematic .storybook .scene-progress{left:60px}
.storybook .blessing{background:var(--paper) url('assets/magical-parchment.png') center/cover;padding-top:100px;padding-bottom:100px}
.storybook .blessing:before{background:linear-gradient(90deg,#fbf1dbe8,#fbf1dbf0),url('assets/celebration.jpg') center/cover}
.storybook .blessing-image{border-radius:0;border-color:#ab854e70;background:#efdebb;padding:9px;box-shadow:15px 15px 0 #a77c3e12}
.storybook .blessing-image img{border-radius:0;height:400px;filter:sepia(.14)}
.storybook .blessing-copy h2{font-size:clamp(2.8rem,5vw,4.3rem);color:var(--forest)}
.storybook .blessing-copy h2 em{color:#8a4f45}
.storybook .invocation{color:#9a6939}
.storybook .promise{background:var(--forest);color:var(--paper);padding-top:95px;padding-bottom:95px}
.storybook .promise h2{font-size:clamp(3.5rem,6vw,6rem)}
.storybook .promise h2 em{font-family:'Great Vibes','Cormorant Garamond',Georgia,serif;color:#e9c283;font-size:1.3em}
.storybook .promise:before{border-color:#d4b57435;border-radius:0;width:90%;height:85%;aspect-ratio:auto}
.storybook .promise-rings{width:135px;height:135px;border-width:4px;box-shadow:0 0 0 1px #d1a765,0 15px 45px #061a1640;margin-bottom:38px}
.storybook .promise .star{font-size:2rem;animation:none;margin-top:25px}
.storybook .celebration{background:var(--paper) url('assets/magical-parchment.png') center/cover}
.storybook .details-card{max-width:850px;border-color:#aa824b70;outline-color:#aa824b40;background:#fff9e6b8;box-shadow:0 20px 65px #73462712;padding:75px 45px}
.storybook .details-card h2{font-family:'Great Vibes','Cormorant Garamond',Georgia,serif;font-size:clamp(3.4rem,6vw,5.5rem);color:var(--forest)}
.storybook .details-card h2 em{color:var(--forest);font-style:normal}
.storybook .details-card .card-intro{color:#815845;font-size:1.8rem}
.storybook footer{background:var(--paper);padding-top:10px;color:var(--forest)}
.storybook footer .signoff{font-family:'Great Vibes','Cormorant Garamond',Georgia,serif;font-size:3.5rem}
.storybook footer .text-button{color:var(--forest)}
@keyframes write-name{from{clip-path:inset(-20% 100% -25% -10%)}to{clip-path:inset(-20% -10% -25% -10%)}}
@media(max-width:1000px) and (min-width:801px){.storybook .hero{gap:25px;padding-left:5%;padding-right:5%}.cover-art{height:510px}.storybook .scene-content{padding:70px 50px 95px}.storybook .portrait-frame{width:340px}.storybook .scene-together .scene-content{padding:60px 45px 95px}.storybook .scene-together .scene-copy h2{font-size:5.5rem}}
@media(max-width:800px){.cover-art{height:420px}.cover-person{bottom:25px;height:92%;width:65%}.cover-ronak{left:-6%}.cover-prakrati{right:-6%;height:90%}.cover-caption{font-size:2.4rem;bottom:-10px}.storybook .portrait-journey{padding:0 12px}.storybook .scene-content,.storybook .scene-prakrati .scene-content{display:flex;flex-direction:column;justify-content:center;text-align:center;gap:18px;padding:55px 30px 85px}.storybook .scene-copy h2{font-size:clamp(2.2rem,20vw,7rem)}.storybook .scene-kicker{margin-bottom:10px;font-size:.75rem;letter-spacing:.1em}.storybook .scene-location{justify-content:center;font-size:1.5rem;margin-top:10px}.storybook .scene-background,.storybook .scene-prakrati .scene-background{width:125%;height:73%;left:-13%;right:auto;bottom:0;opacity:.5;object-position:center}.storybook .portrait-frame,.storybook .scene-prakrati .portrait-frame{height:49svh;width:330px;max-width:95%;min-height:0;margin:0;transform:translateY(var(--portrait-y,0px))}.storybook .scene-outline{inset:18px 14px}.storybook .portrait-frame figcaption{bottom:-9px}.storybook .scene-together .scene-content{display:flex;flex-direction:column;justify-content:center;gap:20px;text-align:center;padding:60px 25px 90px}.storybook .scene-together .scene-copy h2{font-size:clamp(2.2rem,20vw,6rem)}.storybook .scene-together .scene-location{justify-content:center;font-size:1.5rem;margin-top:10px}.storybook .scene-together .scene-location:after{display:block}.storybook .scene-together .scene-background{width:130%;height:70%;bottom:0;right:-15%;left:auto}.storybook .joined-portraits{width:100%;height:49svh;max-width:400px}.storybook .joined-portraits .portrait-frame{height:100%;width:70%;max-width:none}.storybook .joined-portraits .portrait-ronak{left:-8%}.storybook .joined-portraits .portrait-prakrati{right:-12%;height:98%}.storybook .standin-note{bottom:-13px}.cinematic .storybook .scene-progress{left:28px}.storybook .scene-scroll-hint{right:28px;letter-spacing:.02em;font-size:.75rem}.storybook .blessing{padding:80px 24px}.storybook .blessing-image{max-width:290px}.storybook .blessing-image img{height:320px}.storybook .details-card{padding:55px 20px}.storybook .promise h2{font-size:clamp(2.8rem,9vw,4.5rem)}}
@media(max-height:700px) and (max-width:600px){.storybook .portrait-frame,.storybook .scene-prakrati .portrait-frame,.storybook .joined-portraits{height:43svh}.storybook .scene-content,.storybook .scene-prakrati .scene-content,.storybook .scene-together .scene-content{padding-top:40px;padding-bottom:75px;gap:12px}.storybook .scene-copy h2,.storybook .scene-together .scene-copy h2{font-size:clamp(2.2rem,19vw,5rem)}.storybook .joined-portraits .portrait-frame{height:100%}}
@media(max-height:550px) and (min-width:601px){.storybook .scene-content,.storybook .scene-prakrati .scene-content{display:grid;grid-template-columns:1fr 1fr;padding:30px 55px 65px;gap:25px;text-align:left}.storybook .scene-copy h2{font-size:4.5rem}.storybook .scene-location{justify-content:flex-start;font-size:1.4rem}.storybook .portrait-frame,.storybook .scene-prakrati .portrait-frame{height:67svh;width:280px;max-width:100%}.storybook .scene-together .scene-content{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:30px 50px 65px;text-align:left}.storybook .scene-together .scene-copy h2{font-size:4.3rem}.storybook .scene-together .scene-location{justify-content:flex-start}.storybook .joined-portraits{height:68svh;width:100%}.storybook .joined-portraits .portrait-frame{height:100%}.storybook .scene-kicker{font-size:.75rem}.storybook .scene-background{width:70%;height:100%;left:auto;right:-5%}}
html:not(.cinematic) .storybook .portrait-scene{transform:none!important}
@media(prefers-reduced-motion:reduce){.storybook .hero h1 .name{clip-path:none;animation:none}.storybook .portrait-scene{transform:none}.storybook .portrait-frame,.storybook .scene-prakrati .portrait-frame,.storybook .joined-portraits .portrait-frame{transform:none}.storybook .scene-background{transform:none}.storybook .intro.departing{transform:none}}

.storybook header{gap:18px;flex-wrap:wrap}
html:not(.cinematic) .storybook header{position:relative}
html:not(.cinematic) .storybook .hero{padding-top:65px}

html{scroll-padding-top:0}
/* The owl-post atmosphere continues around every invitation page. */
.storybook{background:#101a14;color:var(--ink);isolation:isolate}
.storybook:before{content:'';position:fixed;inset:0;z-index:-1;background:linear-gradient(#0b140c44,#0b140c66),url('assets/wizarding-room.png') center/cover;pointer-events:none}
.storybook header,html:not(.cinematic) .storybook header{position:relative;color:#f0d6a2;background:linear-gradient(#0b140c77,transparent);padding:24px 6%}
.storybook header>a:last-child{border-color:#e4c89166}.storybook .monogram i{color:#d9b676}
.storybook .hero{width:calc(100% - 90px);margin:0 auto 55px;min-height:calc(100svh - 85px);padding-top:75px;box-shadow:0 20px 70px #0005}
.storybook .portrait-journey{background:transparent;padding:0 45px}
.storybook .blessing,.storybook .promise,.storybook .celebration{width:calc(100% - 90px);margin:auto}
.storybook .blessing{padding-left:max(6%,calc((100vw - 1140px)/2));padding-right:max(6%,calc((100vw - 1140px)/2))}
.storybook .scene-copy h2{margin-bottom:20px}
.storybook .scene-background{opacity:.68}
.storybook .scene-prakrati .scene-background{opacity:.7}
.storybook .scene-together .scene-background{opacity:.67}
.storybook .portrait-frame img{animation:living-portrait 8s ease-in-out infinite alternate;transform-origin:50% 80%}
.storybook .scene-prakrati .portrait-frame img{animation-delay:-3s}
.storybook .scene-together .portrait-prakrati img{animation-delay:-4s}
.storybook footer{background:#0a150e96;color:#f0d6a2;padding-top:55px}
.storybook footer>p:not(.signoff),.storybook footer .eyebrow,.storybook .photo-credits{color:#d2bb96}
.storybook footer .text-button{color:#e3c995}
.storybook footer .signoff i{color:#d4ab68}
@keyframes living-portrait{from{transform:translateY(0) rotate(-.3deg)}to{transform:translateY(-6px) rotate(.3deg)}}
@media(max-width:800px){.storybook header,html:not(.cinematic) .storybook header{padding:22px 25px}.storybook .hero{width:calc(100% - 28px);padding:45px 24px 115px;margin-bottom:25px}.storybook .portrait-journey{padding:0 14px}.storybook .blessing,.storybook .promise,.storybook .celebration{width:calc(100% - 28px)}.storybook .blessing{padding:75px 24px}.storybook .scene-content,.storybook .scene-prakrati .scene-content{gap:10px}.storybook .scene-copy h2{margin-bottom:5px}.storybook .scene-together .scene-content{gap:10px}.storybook .cover-edition{left:24px}.storybook .hero .scroll-cue{right:24px}}
@media(prefers-reduced-motion:reduce){.storybook .portrait-frame img{animation:none;transform:none}}


/* The venue address stays readable and directions remain easy to tap. */
.storybook .venue-address{font-style:normal;font-size:.9rem;line-height:1.8;color:#795c53;margin:0 auto;max-width:360px;overflow-wrap:break-word}
.storybook .venue-map{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 16px;margin-top:18px;background:var(--forest);color:var(--paper);border:1px solid #aa824b70;border-radius:3px;font-size:.875rem;line-height:1.4}
.storybook .venue-map:hover{background:#315145}

/* Clear touch controls accompany the invitation's page-turn animation. */
.storybook .page-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:13px 20px;background:var(--forest);color:var(--paper);border:1px solid #a77c3e;border-radius:4px;font:500 .9rem/1.4 'DM Sans',sans-serif;text-align:center;letter-spacing:0;box-shadow:0 4px 14px #173d2920}
.storybook .page-button:hover{background:#315145}
.storybook .page-button span{display:inline;background:none;width:auto;height:auto;margin:0;animation:none}
.storybook .page-help{margin-top:12px;font-size:.8rem;line-height:1.6;color:#795c53}
.storybook .blessing-first{min-height:calc(100svh - 85px);margin-bottom:55px;padding-top:60px;padding-bottom:60px}
.storybook .blessing-first .page-button{margin-top:30px}
.storybook .hero .scroll-cue{font:500 .9rem/1.4 'DM Sans',sans-serif;color:var(--paper);padding:13px 20px;bottom:28px}
.scene-navigation{display:none}
.cinematic .scene-navigation{display:flex;position:absolute;bottom:18px;right:28px;z-index:10;gap:10px;align-items:center}
.page-back{min-height:48px;min-width:48px;border:1px solid #a77c3e;border-radius:4px;background:var(--paper);color:var(--forest);font-size:1.2rem}
.scene-inline-next{margin:0 auto 30px;width:fit-content;max-width:calc(100% - 40px)}
.cinematic .scene-inline-next{display:none}
@media(max-width:800px){.storybook .blessing-first{padding:36px 24px 40px;gap:25px;margin-bottom:25px}.storybook .blessing-first .blessing-image img{height:250px;object-fit:contain}.storybook .blessing-first .blessing-copy h2{font-size:2.5rem}.storybook .blessing-first .invocation{margin-bottom:16px}.storybook .blessing-first .body-copy{font-size:.95rem;margin-top:18px}.storybook .blessing-first .page-button{width:100%;margin-top:24px}.cinematic .scene-navigation{right:22px;left:22px;justify-content:flex-end}.cinematic .scene-progress{bottom:82px}.scene-navigation .page-button{font-size:.8rem;padding:12px 14px}.storybook .hero .scroll-cue{right:24px;left:24px;bottom:25px}.storybook .hero .cover-edition{bottom:88px;text-align:center;max-width:none;right:24px}.storybook .scene-content,.storybook .scene-prakrati .scene-content,.storybook .scene-together .scene-content{padding-bottom:125px}}

/* Personalized artwork keeps the city photographs visible behind the couple. */
.cover-couple{position:absolute;left:-3%;bottom:30px;width:106%;height:95%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 18px 18px #39261620);mask-image:linear-gradient(#000 87%,transparent 100%);z-index:1}
.couple-portrait{position:absolute;inset:0;margin:0;filter:drop-shadow(0 18px 16px #754b2920);transform:translateY(var(--portrait-y,0px))}
.couple-portrait img{width:100%;height:100%;object-fit:contain;object-position:center bottom;mask-image:linear-gradient(#000 88%,transparent 100%)}
@media(max-width:800px){.cover-couple{left:-6%;width:112%;height:95%;bottom:24px}}
@media(prefers-reduced-motion:reduce){.couple-portrait{transform:none}}

/* Keep portraits centered within their page's art column. */
.storybook .portrait-frame{justify-self:center;align-self:center}
.storybook .scene-prakrati .portrait-frame{margin-left:0}
.storybook .joined-portraits{justify-self:center;margin:0 auto}
.storybook .cover-couple{left:0;width:100%;height:92%;bottom:35px}
@media(max-width:800px){.storybook .cover-couple{left:0;width:100%;height:92%;bottom:28px}}

.cinematic .storybook .scene-content{height:100svh;min-height:0}
.cinematic .storybook .scene-copy{min-width:0}
.cinematic .storybook .portrait-frame{height:min(65svh,calc(100svh - 190px));flex-shrink:0}
@media(max-width:800px){.cinematic .storybook .portrait-frame,.cinematic .storybook .scene-prakrati .portrait-frame,.cinematic .storybook .joined-portraits{height:min(49svh,calc(100svh - 330px));flex-shrink:0}.cinematic .storybook .scene-copy h2,.cinematic .storybook .scene-together .scene-copy h2{font-size:clamp(2.2rem,18vw,6rem)}}

/* Layout follows screen width, independently of page-turn and motion settings. */
.storybook .cover-copy,.storybook .cover-art,.storybook .scene-copy,.storybook .joined-portraits{min-width:0}
.storybook .scene-content{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.storybook .scene-together .scene-content{grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr)}
@media(min-width:801px){.storybook .hero{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}.storybook .scene-content,.storybook .scene-prakrati .scene-content,.storybook .scene-together .scene-content{display:grid;text-align:left}.storybook .scene-prakrati .portrait-frame{margin-left:0;justify-self:center}.storybook .scene-prakrati .scene-copy{grid-column:2;grid-row:1}.storybook .scene-prakrati .portrait-frame{grid-column:1;grid-row:1}}
@media(max-width:800px){.storybook .hero{grid-template-columns:minmax(0,1fr)}.storybook .scene-content,.storybook .scene-prakrati .scene-content,.storybook .scene-together .scene-content{display:flex;flex-direction:column;justify-content:center;text-align:center}}

/* One clipped window gives the photograph and its gold arch identical edges. */
.storybook .cover-art{width:100%;max-width:540px;justify-self:center}
.storybook .cover-art:before,.storybook .cover-art:after{display:none}
.cover-window{position:absolute;inset:0 0 65px;border:1px solid #a77c3e80;border-radius:50% 50% 0 0;overflow:hidden;isolation:isolate;background:#eaddc1}
.storybook .cover-window .cover-city{inset:0;width:100%;height:100%;border-radius:0;object-position:55% center;mask-image:none;opacity:.6}
.storybook .cover-window .cover-couple{left:0;bottom:0;width:100%;height:96%;object-position:center bottom;mask-image:linear-gradient(#000 88%,transparent 100%)}
.storybook .cover-caption{bottom:0;margin:0;line-height:1.45;font-size:clamp(1.8rem,3vw,2.7rem)}
@media(min-width:801px){.storybook .hero h1{font-size:clamp(3rem,8.3vw,8.5rem)}.storybook .hero{column-gap:clamp(36px,4vw,65px)}}
@media(max-width:800px){.storybook .cover-art{max-width:420px}.cover-window{bottom:58px}.storybook .cover-caption{font-size:clamp(1.6rem,7.5vw,2.4rem)}}

/* Keep long presses on the invitation from selecting its artwork and display text. */
.storybook{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.storybook img{-webkit-user-drag:none}
.storybook .venue-address{-webkit-touch-callout:default;-webkit-user-select:text;user-select:text}