.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.our-story-page{background:#f8f6ef}
.story-hero{position:relative;width:100%;overflow:hidden}
.story-hero>svg{display:block;width:100%;height:auto;aspect-ratio:1024/444}
.story-introduction{position:relative;isolation:isolate;padding:48px 7% 20px;overflow:hidden;text-align:center}
.story-intro-content{position:relative;z-index:1;max-width:600px;margin:auto}
.story-label{font:11px/1.7 'DM Sans',sans-serif;letter-spacing:3.5px;text-transform:uppercase;color:var(--rust);margin:0 0 15px}
.story-introduction h2{color:#080808;font-size:clamp(34px,5.2vw,54px);line-height:1;letter-spacing:-2px;font-weight:400;margin:0}
.story-divider{width:62px;height:2px;background:var(--rust);margin:26px auto}
.story-intro-content>p:not(.story-label){font-size:21px;line-height:1.3;color:#414349;margin:0 0 14px}
.story-divider-bottom{margin:32px auto 0}
.story-flower{position:absolute;z-index:0;width:16.5%;height:auto;mix-blend-mode:multiply;pointer-events:none;opacity:.9}
.story-flower-left{left:0;top:20px;aspect-ratio:169/284}
.story-flower-right{right:0;bottom:0;aspect-ratio:165/251}
.story-moments{padding:28px 6.35% 60px;text-align:center}
.story-moments h2{font-size:12px;letter-spacing:4px;margin:0 0 18px;font-weight:400}
.moments-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.moments-grid svg{display:block;width:100%;height:100%;aspect-ratio:1.4;overflow:hidden}
@media(min-width:600px){.moments-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.story-introduction{padding-top:46px;padding-bottom:20px}.story-moments{padding-top:28px}}
@media(max-width:700px){.story-introduction{padding-left:10%;padding-right:10%}.story-intro-content>p:not(.story-label){font-size:19px}.story-flower{opacity:.4;width:13%}.story-hero>svg{min-height:240px}.story-label{font-size:9px;letter-spacing:2px}.story-moments h2{font-size:10px;letter-spacing:2px}}

/* Personal portrait layered beside the existing header lettering. */
.story-couple-photo{position:relative;width:min(72%,300px);margin:24px auto}
.story-couple-photo img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border:5px solid var(--cream);box-shadow:0 12px 36px #0006}
@media(min-width:700px){.story-couple-photo{position:absolute;right:5%;top:50%;transform:translateY(-50%);width:24%;margin:0}.story-couple-photo img{max-height:38vw}}
@media(max-width:699px){.story-hero{background:#30271f}}

.story-hero{min-height:clamp(360px,43.36vw,650px);display:flex;align-items:center;isolation:isolate}
.story-hero>svg.story-landscape{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;z-index:-2}
.story-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0006,transparent);z-index:-1}
.story-hero-copy{width:65%;padding:40px 2% 40px 8%;text-align:center;color:var(--cream)}
.story-hero-copy>p{font:15px Georgia,serif;text-transform:uppercase;letter-spacing:5px;margin:0 0 24px}
.story-hero-copy h1{font-size:clamp(38px,6.8vw,94px);line-height:1;letter-spacing:-3px;margin:0;white-space:nowrap}
.story-hero-copy h1 em{font-style:normal;color:#c5643c}
.story-hero-ornament{margin-top:20px;font-size:36px;letter-spacing:8px}
@media(max-width:699px){.story-hero{flex-direction:column;padding-top:24px}.story-hero-copy{width:100%;padding:24px 5%}.story-hero-copy h1{font-size:clamp(38px,9vw,60px)}}

/* Restore the full original landscape framing. */
.story-hero::after{display:none}
.story-hero-copy{position:absolute;left:12%;top:44%;width:49%;padding:0;text-align:center}
.story-hero-copy h1{font-size:clamp(38px,6.8vw,94px)}
@media(max-width:699px){.story-hero-copy{top:120px;left:5%;width:90%}.story-hero{min-height:620px}.story-couple-photo{margin-top:240px}}

.moments-grid .moment-photo{display:block;width:100%;height:100%;aspect-ratio:1.4;object-fit:cover;object-position:center}