/* One immersive canvas for every invitation on phones and desktop. */
html{scrollbar-gutter:auto}
.cinematic-invitation{--invitation-width:480px;overflow-x:clip}
.cinematic-invitation .card{width:100%;max-width:var(--invitation-width);min-height:100vh;min-height:100svh;margin:0 auto}
.cinematic-invitation .invitation-front .front-stage{width:100%;max-width:var(--invitation-width)}
.cinematic-invitation .card>.hero,.cinematic-invitation .card>.rb-hero{min-height:100svh}
.cinematic-invitation .dock,.cinematic-invitation.theme-royal .dock{max-width:var(--invitation-width)}
.cinematic-invitation .invitation-sheet{width:min(100%,var(--invitation-width))}
.cinematic-invitation .banner,.cinematic-invitation .rb-demo-banner{max-width:var(--invitation-width)}
/* A shared sample says so from the first screen, in a strip of its own above the cover. */
.cinematic-invitation .banner[data-demo],.cinematic-invitation .rb-demo-banner{z-index:61}
.cinematic-invitation .banner[data-demo]{padding:10px 8px;white-space:nowrap}
.cinematic-invitation:has(.banner[data-demo]) .cover{top:36px}
.cinematic-invitation:has(.rb-demo-banner) .cover{top:32px}
/* Royal's longer line wraps on the smallest phones, so its strip is taller there. */
@media(max-width:333px){.cinematic-invitation:has(.rb-demo-banner) .cover{top:47px}}
@media(min-width:481px){.cinematic-invitation .card{box-shadow:0 0 45px #27201916}}

/* Typography-first designs have their own finished layout, without a photo gap. */
.cinematic-invitation .card>.hero-names-only{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100svh;padding:84px 34px 108px;gap:0}
.hero-names-only>.eyebrow{font-size:11px;letter-spacing:.25em;margin:0 0 24px!important}
.hero-initials{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;width:116px;height:116px;flex-shrink:0;margin:0 auto 30px;color:var(--accent-ink,var(--ink));font:400 34px/1 var(--font-script,cursive);isolation:isolate}
.hero-initials:before,.hero-initials:after{content:"";position:absolute;inset:0;border:1px solid color-mix(in srgb,var(--accent,var(--story-accent)) 65%,transparent);border-radius:50%;pointer-events:none}
.hero-initials:after{inset:7px;border-color:color-mix(in srgb,var(--accent,var(--story-accent)) 25%,transparent)}
.hero-initials i{font:italic 16px var(--font-display,Georgia,serif)}
.cinematic-invitation .hero-names-only .names{position:relative;width:100%;max-width:350px;margin:0 auto 28px;font-size:clamp(40px,12vw,63px);line-height:1.16;text-wrap:balance;z-index:1}
.hero-names-only .names .amp{font-size:.55em;margin:9px auto;line-height:1.1}
.hero-names-only .hero-date{margin:0;font:500 11px/1.5 var(--font-ui);letter-spacing:.2em}
.hero-names-only .hero-venue{max-width:270px;margin:16px auto 0;font:400 10px/1.6 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hero-photo .frame img{object-position:center 35%}
@media(max-height:620px){.cinematic-invitation .card>.hero-names-only{padding:64px 30px 92px}.hero-initials{width:88px;height:88px;margin-bottom:22px;font-size:28px}.cinematic-invitation .hero-names-only .names{font-size:42px;margin-bottom:22px}}