/* Keep the complete original image inside a stable portrait stage, independently of screen width. */
.oc-opening .oc-opening-scene{display:grid;place-items:center;background:var(--oc-paper)}
.oc-opening .oc-scene-frame{position:relative;width:min(100%,calc(100svh * 9 / 16));height:auto;aspect-ratio:9/16;max-width:100%;max-height:100svh;isolation:isolate;overflow:hidden}
.oc-scene-frame .oc-cinematic-backdrop{inset:0!important;background-size:contain!important;background-repeat:no-repeat;background-position:center!important;transform:none!important;animation:none!important;will-change:auto}
.oc-scene-frame .oc-scenery{max-width:none;overflow:hidden}
.oc-opening .oc-opening-copy{inset:auto 7% 9%;text-shadow:none}
.oc-opening .oc-opening-copy>p{font-size:clamp(10px,1.6svh,13px);margin-bottom:8px}
.oc-opening .oc-opening-copy h2{font-size:clamp(23px,4.7svh,43px);line-height:1.6;margin:0 auto 7px;overflow-wrap:anywhere}
.oc-opening .oc-opening-copy>span{font-size:clamp(10px,1.5svh,13px)}
.oc-opening .oc-cinematic-shade{background:linear-gradient(transparent 56%,color-mix(in srgb,var(--oc-paper) 75%,transparent) 78%,var(--oc-paper) 100%)}
.oc-opening.awaiting-envelope .oc-opening-scene{transform:none;filter:blur(5px)}
.oc-opening.oc-playing .oc-opening-scene{transform:none;filter:none}
.oc-opening .oc-main-art{opacity:.15}.oc-opening .oc-curtain{transition-duration:3.8s}
.oc-opening .intro-brand{font-size:19px;right:18px;top:max(18px,env(safe-area-inset-top))}
.oc-opening .intro-skip{left:14px;top:max(17px,env(safe-area-inset-top));font-size:11px}

/* A dedicated invitation layout replaces the legacy card rules for these templates only. */
body.occasion-view>.header,body.occasion-view>.footer{display:none!important}
.occasion-view #public-invite{padding:0;min-height:100vh}
.occasion-view .original-demo-toolbar{position:relative;margin:0;padding:13px 16px;min-height:46px;display:flex;justify-content:center;align-items:center;gap:24px;font-size:12px;line-height:1.8;border-bottom:1px solid var(--line)}
.public-shell.oc-clean-layout{max-width:100%;width:100%;padding:0;margin:0;border:0;border-radius:0;overflow:clip;background:var(--oc-paper);color:var(--oc-ink);text-align:center}
.oc-intro-hero{position:relative;display:grid;place-items:center;margin:0;min-height:0;background:var(--oc-paper);isolation:isolate}
.oc-intro-hero .oc-scene-frame{position:relative;width:min(100%,470px);aspect-ratio:9/16;overflow:hidden;isolation:isolate}
.oc-intro-hero .oc-hero-identity{position:absolute;z-index:4;inset:auto 7% 8%;color:var(--oc-ink);text-align:center;line-height:1.9}
.oc-hero-identity .experience-kicker{color:inherit;font-size:11px;letter-spacing:0;margin:0 0 9px}
.oc-hero-identity h1{font-family:var(--serif);font-size:clamp(31px,4.8vw,46px);font-weight:400;line-height:1.6;margin:0 0 12px;overflow-wrap:anywhere;outline:none}
.oc-hero-identity .bilingual-text{font-size:14px;line-height:1.6;margin:5px auto 10px;color:inherit}
.oc-hero-date{font-size:12px;line-height:1.9;margin:6px 0}
.oc-hero-scroll{display:inline-grid;place-items:center;font-size:21px;border:1px solid var(--oc-gold);border-radius:30px;width:42px;height:42px;margin-top:11px;background:var(--oc-paper);color:inherit}
.oc-clean-layout .oc-portrait-shade{position:absolute;inset:0;z-index:3;background:linear-gradient(transparent 58%,color-mix(in srgb,var(--oc-paper) 82%,transparent) 79%,var(--oc-paper))}
.oc-clean-layout .oc-cinematic-shade{display:none}.oc-clean-layout .oc-main-art{opacity:.08}
.oc-clean-layout .oc-message-section,.oc-clean-layout .oc-detail-block,.oc-clean-layout .oc-farewell{padding:62px 24px;max-width:760px;width:100%;margin:auto;position:relative;line-height:2.1;box-sizing:border-box}
.oc-clean-layout .oc-message-section:after,.oc-clean-layout .oc-detail-block:after{content:'';position:absolute;bottom:0;left:calc(50% - 30px);width:60px;height:1px;background:var(--oc-gold);opacity:.65}
.oc-clean-layout h2{font-family:var(--serif);font-size:30px;font-weight:400;line-height:1.7;color:inherit;margin:12px 0 22px;overflow-wrap:anywhere}
.oc-clean-layout .experience-kicker,.oc-clean-layout .oc-section-kicker{font-size:11px;color:inherit;opacity:.8;margin:0 0 12px;letter-spacing:0}
.oc-clean-layout .personal-message{max-width:550px;margin:0 auto;color:inherit;line-height:2.2;font-size:16px;white-space:pre-line;overflow-wrap:anywhere}
.oc-clean-layout .oc-ornament{display:block;color:var(--oc-gold);font-size:27px;line-height:1.5;margin-bottom:12px}
.oc-clean-layout .legacy-details{display:block;width:100%;max-width:none;margin:0!important;padding:0!important;background:transparent;border:0!important;color:inherit}
.oc-clean-layout .event-calendar{width:100%;max-width:325px;margin:0 auto 28px}.oc-clean-layout .event-calendar h3{font-family:var(--serif);font-size:25px;font-weight:400;line-height:1.7;margin:0 0 22px;color:inherit}
.oc-clean-layout .calendar-days{gap:5px}.oc-clean-layout .calendar-days>span{font-size:13px;width:33px;height:33px;color:inherit}
.oc-clean-layout .calendar-days .selected-day{background:var(--oc-ink)!important;color:var(--oc-paper)!important;outline-color:var(--oc-gold)}
.oc-clean-layout .legacy-countdown{font-size:15px;line-height:2.1;padding:20px 4px;border:0;margin:20px auto 0;color:inherit}
.oc-clean-layout .outline-button,.oc-clean-layout .map-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:11px 19px;border:1px solid var(--oc-gold);background:transparent;border-radius:6px;color:inherit;font-size:12px;line-height:1.8;margin:10px auto 0}
.oc-clean-layout .oc-venue-name{font-size:18px;line-height:2;max-width:540px;margin:0 auto 15px;overflow-wrap:anywhere}
.oc-clean-layout .oc-venue-illustration{width:100%;max-width:560px;margin:24px auto 28px;border-radius:20px;overflow:hidden;border:1px solid var(--oc-gold);background:var(--oc-paper);box-shadow:0 8px 26px #47382c0c}
.oc-clean-layout .oc-venue-illustration img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}
.oc-programme{list-style:none;margin:0 auto;padding:0;max-width:520px;text-align:start}
.oc-programme li{display:grid;grid-template-columns:85px minmax(0,1fr);gap:18px;align-items:baseline;padding:18px 5px;border-bottom:1px solid color-mix(in srgb,var(--oc-gold) 35%,transparent)}
.oc-programme time{font-size:12px;white-space:nowrap;color:inherit;opacity:.8}.oc-programme span{font-size:16px;line-height:1.9;overflow-wrap:anywhere}
.oc-clean-layout .legacy-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:550px;margin:auto}
.oc-clean-layout .legacy-gallery img{width:100%;height:240px;object-fit:cover;border-radius:8px}
.oc-clean-layout .oc-cover-section .personal-cover{width:auto;height:auto;max-width:100%;max-height:460px;object-fit:contain;border-radius:12px;margin:auto;display:block}
.oc-clean-layout .rsvp-section{width:calc(100% - 36px);max-width:570px;margin:45px auto;background:#fffaf2;color:#4b4237;border:1px solid var(--oc-gold);padding:32px 25px;border-radius:12px;box-sizing:border-box}
.oc-clean-layout .rsvp-section h2{font-size:29px;color:#675742;line-height:1.8;margin:0 0 24px}.oc-clean-layout .rsvp-section input,.oc-clean-layout .rsvp-section textarea{font-size:16px;max-width:100%;min-width:0}
.oc-clean-layout .wishes-section{max-width:650px;margin:auto;padding:30px 24px}.oc-clean-layout .oc-farewell{padding-top:60px;padding-bottom:65px}.oc-clean-layout .oc-farewell h2{font-size:28px}.oc-clean-layout .oc-farewell p{font-size:14px;margin:14px 0}.oc-clean-layout .oc-farewell .outline-button{font-size:12px}
.oc-clean-layout .private-preview-banner{margin:0;padding:10px;font-size:11px}.embedded-preview [data-occasion-replay]{display:none}
@media(max-width:600px){.oc-intro-hero .oc-scene-frame{width:100%;max-width:470px}.oc-hero-identity h1{font-size:35px}.oc-hero-identity .experience-kicker{font-size:11px}.oc-hero-date{font-size:11px}.oc-clean-layout .oc-message-section,.oc-clean-layout .oc-detail-block{padding:44px 22px}.oc-clean-layout h2{font-size:27px}.oc-clean-layout .personal-message{font-size:14px}.oc-clean-layout .legacy-gallery img{height:175px}.oc-clean-layout .oc-farewell{padding:45px 22px}.oc-programme li{grid-template-columns:74px minmax(0,1fr);gap:12px}.oc-programme span{font-size:14px}.oc-clean-layout .rsvp-section{padding:26px 18px}}
@media(orientation:landscape) and (max-height:550px){.oc-opening .oc-opening-copy{bottom:5%}.oc-opening .oc-opening-copy h2{font-size:24px}.oc-opening .oc-opening-copy>p,.oc-opening .oc-opening-copy>span{font-size:9px}.oc-opening .oc-opening-copy>p{margin-bottom:3px}.oc-opening .envelope-stage{transform:scale(.7)}.oc-intro-hero .oc-scene-frame{max-width:390px}}
@supports not (color:color-mix(in srgb,white,black)){.oc-clean-layout .oc-portrait-shade,.oc-opening .oc-cinematic-shade{background:linear-gradient(transparent 54%,var(--oc-paper))}}

.oc-hero-identity h1.oc-long-name,.oc-opening-copy h2.oc-long-name{font-size:clamp(23px,4vw,31px);line-height:1.65}
body.occasion-view>footer{display:none!important}

/* Romantic watercolor story scenes; wedding and engagement never receive these classes. */
.oc-storybook .oc-cinematic-backdrop{filter:none!important}
.oc-storybook .oc-main-art,.oc-storybook .oc-clouds,.oc-storybook .oc-halo,.oc-storybook .oc-stars{display:none}
.oc-storybook .oc-cinematic-shade{background:linear-gradient(transparent 66%,color-mix(in srgb,var(--oc-paper) 15%,transparent) 82%,var(--oc-paper))}
.oc-storybook-invitation .oc-portrait-shade{background:linear-gradient(transparent 66%,color-mix(in srgb,var(--oc-paper) 12%,transparent) 79%,var(--oc-paper))}
.oc-storybook-invitation{background:var(--oc-paper);color:var(--oc-ink)}
.oc-storybook-invitation .oc-hero-identity{bottom:3%}
.oc-storybook-invitation .oc-hero-identity .experience-kicker{display:table;opacity:1;background:color-mix(in srgb,var(--oc-paper) 88%,transparent);border-radius:20px;padding:1px 9px;margin:0 auto 8px}
.oc-storybook-invitation .oc-message-section{background:radial-gradient(ellipse at 0 15%,color-mix(in srgb,var(--oc-gold) 12%,transparent),transparent 48%),radial-gradient(ellipse at 100% 85%,color-mix(in srgb,var(--oc-ink) 6%,transparent),transparent 46%)}
.oc-storybook-invitation .oc-detail-block:nth-child(even){background:linear-gradient(130deg,color-mix(in srgb,var(--oc-gold) 7%,transparent),transparent 65%)}
.oc-storybook-invitation .oc-ornament{font-family:var(--serif);font-size:37px;line-height:1.3}
.oc-storybook-invitation .event-calendar{border:1px solid color-mix(in srgb,var(--oc-gold) 45%,transparent);border-radius:28px 28px 10px 10px;background:color-mix(in srgb,var(--oc-paper) 93%,var(--oc-gold));box-shadow:0 12px 32px #5a493709}
.oc-storybook-invitation .outline-button,.oc-storybook-invitation .map-link{border-radius:24px;min-height:44px}
.oc-storybook-invitation .oc-farewell{background:radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--oc-gold) 13%,transparent),transparent 70%)}
.oc-storybook-invitation .oc-farewell>span{font-family:var(--serif);font-size:42px}
.oc-storybook-invitation .rsvp-section{background:var(--oc-paper);border-radius:28px 28px 12px 12px;color:var(--oc-ink)}
.oc-storybook-invitation .rsvp-section h2{color:var(--oc-ink)}
