@font-face{font-family:StorytellingDisplay;src:url('/assets/storytelling-display.otf') format('opentype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:StorytellingItalic;src:url('/assets/storytelling-italic.otf') format('opentype');font-style:italic;font-weight:400;font-display:swap}
.storytelling-draft .home-visual{height:100svh;max-height:1200px;min-height:650px;touch-action:pan-y}
.storytelling-draft .home-mobile-shade{display:block;position:absolute;inset:0;background:linear-gradient(#0003,transparent 28%,transparent 35%,#000b 100%);height:auto}
.storytelling-draft .hero-slide[data-image-slot="home-hero-love"]{object-position:46% 42%}
.storytelling-draft .storytelling-copy{display:block;position:absolute;left:6%;right:6%;bottom:100px;text-align:center;color:#fff;text-transform:none;text-shadow:0 2px 15px #0004}
.storytelling-copy .storytelling-intro{font:italic 400 clamp(18px,1.7vw,26px)/1.45 StorytellingItalic,serif;letter-spacing:0;margin:0 0 22px}
.storytelling-copy h1{font:400 clamp(58px,6.4vw,104px)/.98 StorytellingDisplay,serif;letter-spacing:-.025em;color:#fff}
.storytelling-copy h1 span{display:block}
.storytelling-copy h1 span:nth-child(2){display:inline}
.storytelling-copy h1 span:nth-child(3){display:inline}
.storytelling-copy h1 span:nth-child(2)::after{content:' '}
.storytelling-draft .home-image-label[hidden]{display:none}
@media(max-width:760px){
 .storytelling-draft .home-visual{min-height:620px;max-height:none}
 .storytelling-draft .storytelling-copy{left:5%;right:5%;bottom:105px}
 .storytelling-copy .storytelling-intro{font-size:clamp(14px,3.85vw,21px);line-height:1.45;margin-bottom:23px;letter-spacing:0}
 .storytelling-copy h1{font-size:clamp(39px,10.2vw,76px);line-height:1.06;letter-spacing:-.028em}
 .storytelling-copy h1 span:nth-child(n){display:block;font-size:inherit;line-height:inherit;letter-spacing:inherit;margin:0}
 .storytelling-copy h1 span:nth-child(2)::after{content:none}
 .storytelling-draft .hero-slide[data-image-slot="home-hero-love"]{object-position:46% 42%}
}
@media(max-height:700px) and (min-width:761px){.storytelling-draft .storytelling-copy{bottom:75px}.storytelling-copy h1{font-size:60px}}
/* One persistent message stays readable while the three photographs crossfade. */
.storytelling-draft .storytelling-copy{pointer-events:none}
.storytelling-draft .hero-slide[data-story-photo=wedding]{object-position:46% 42%}
.storytelling-draft .hero-slide[data-story-photo=family]{object-position:50% 35%}
.storytelling-draft .hero-slide[data-story-photo=brands]{object-position:50% 26%}
@media(max-width:760px){
 .storytelling-draft .hero-slide[data-story-photo=family]{object-position:50% 45%}
 .storytelling-draft .hero-slide[data-story-photo=brands]{object-position:70% 42%}
 .storytelling-draft .storytelling-copy{bottom:85px}
}

/* Fill the actual visible window, including when mobile browser bars change. */
.storytelling-draft .home-visual{height:100vh;height:100dvh;min-height:0;max-height:none}
.storytelling-draft .home-visual-controls{bottom:max(20px,env(safe-area-inset-bottom))}
.storytelling-draft .storytelling-copy{bottom:calc(84px + env(safe-area-inset-bottom))}
@media(max-width:760px){
 .storytelling-draft .home-visual{height:100vh;height:100dvh;min-height:0;max-height:none}
 .storytelling-copy h1{font-size:clamp(35px,10.2vw,64px)}
}
@media(max-height:600px){
 .storytelling-draft .storytelling-copy{bottom:72px}
 .storytelling-copy .storytelling-intro{font-size:clamp(12px,2.5vh,17px);margin-bottom:12px}
 .storytelling-copy h1{font-size:clamp(30px,8vh,48px);line-height:1.05}
}
/* A quiet pause between the full-screen opening and the three offers. */
.storytelling-draft .home-offers{padding-top:48px}
.storytelling-draft .home-offers::before{content:'';grid-column:1/-1;width:52px;height:1px;background:var(--secondary);margin:0 auto 16px}
@media(max-width:700px){.storytelling-draft .home-offers{padding-top:40px}.storytelling-draft .home-offers::before{margin-bottom:16px}}
@media(max-width:760px){.storytelling-copy h1{font-size:clamp(28px,9.5vw,64px)}}
@media(max-width:760px) and (max-height:600px){.storytelling-copy h1{font-size:min(9vw,7vh)}}
