:root {

    --burgundy: #6d252e;

    --burgundy-dark: #45171e;

    --burgundy-light: #8a4148;

    --ivory: #f7f0e5;

    --paper: #efe3d1;

    --gold: #b69a68;

    --gold-light: #d8c39a;

    --ink: #352822;

    --muted: #79685a;

    --serif: "Cormorant Garamond", Georgia, serif;

    --sans: "Inter", Arial, sans-serif;

    --script: "Great Vibes", cursive;

}

* {

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

    scroll-padding-top: 20px;

}

body {

    margin: 0;

    background: var(--ivory);

    color: var(--ink);

    font-family: var(--sans);

    -webkit-font-smoothing: antialiased;

}

body.intro-active {

    overflow: hidden;

}

button,

a {

    -webkit-tap-highlight-color: transparent;

}

a {

    color: inherit;

    text-decoration: none;

}

.eyebrow {

    margin: 0;

    font-family: var(--sans);

    font-size: 10px;

    font-weight: 600;

    line-height: 1.8;

    letter-spacing: .19em;

}

/* Opening screen */

.intro {

    position: fixed;

    inset: 0;

    z-index: 100;

    display: grid;

    place-items: center;

    overflow: hidden;

    background:

        radial-gradient(ellipse at center, #fffaf1 0%, #f2e6d4 70%, #e6d3bc 100%);

    transition: opacity .9s ease, visibility .9s ease;

}

.intro::before,

.intro::after {

    position: absolute;

    inset: 14px;

    border: 1px solid #b69a684d;

    content: "";

    pointer-events: none;

}

.intro::after {

    inset: 20px;

    border-color: #b69a6829;

}

.intro.is-hidden {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}

.intro__content {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 23px;

    padding: 28px 20px;

    text-align: center;

}

.intro__eyebrow,

.intro__instruction {

    color: var(--burgundy);

    font-family: var(--sans);

    font-size: 10px;

    font-weight: 600;

    line-height: 1.8;

    letter-spacing: .17em;

}

.intro__instruction {

    margin: 0;

    animation: breathe 2.3s ease-in-out infinite;

}

.intro__ornament {

    color: var(--gold);

    font-size: 13px;

    letter-spacing: .12em;

}

.envelope-button {

    display: block;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

    perspective: 1000px;

}

.envelope {

    position: relative;

    width: min(285px, 72vw);

    aspect-ratio: 1.55 / 1;

    filter: drop-shadow(0 17px 19px #4c30251c);

    transition: filter .4s ease, transform .4s ease;

}

.envelope-button:hover .envelope {

    filter: drop-shadow(0 22px 24px #4c30252b);

    transform: translateY(-3px);

}

.envelope__back,

.envelope__paper,

.envelope__left,

.envelope__right,

.envelope__front,

.envelope__flap {

    position: absolute;

    inset: 0;

}

.envelope__back {

    background: #521b23;

}

.envelope__paper {

    top: 4%;

    left: 8%;

    width: 84%;

    height: 91%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 7px;

    background: #fffaf0;

    border: 1px solid #c9b58d;

    transition: transform .9s cubic-bezier(.2, .8, .2, 1);

}

.envelope__small,

.envelope__paper-text {

    color: var(--burgundy);

    font-family: var(--sans);

    font-size: 8px;

    font-weight: 600;

    letter-spacing: .17em;

}

.envelope__monogram {

    color: var(--burgundy);

    font-family: var(--serif);

    font-size: 48px;

    line-height: 1;

}

.envelope__monogram i {

    color: var(--gold);

    font-size: .72em;

    font-weight: 400;

}

.envelope__paper-text {

    font-size: 7px;

}

.envelope__left {

    background: #762a34;

    clip-path: polygon(0 0, 52% 50%, 0 100%);

}

.envelope__right {

    background: #8b3d43;

    clip-path: polygon(100% 0, 48% 50%, 100% 100%);

}

.envelope__front {

    background: linear-gradient(145deg, #762b35, #68232d);

    clip-path: polygon(0 100%, 0 0, 50% 53%, 100% 0, 100% 100%);

}

.envelope__flap {

    z-index: 3;

    background: linear-gradient(145deg, #8c3d45, #69242d);

    clip-path: polygon(0 0, 100% 0, 50% 65%);

    transform-origin: top center;

    transition: transform .7s ease;

    backface-visibility: hidden;

}

.envelope__seal {

    position: absolute;

    z-index: 4;

    top: 51%;

    left: 50%;

    width: 39px;

    aspect-ratio: 1;

    display: grid;

    place-items: center;

    border: 1px solid #dfc28a;

    border-radius: 50%;

    background: radial-gradient(circle at 35% 30%, #9b4b4e, #5c1c24 80%);

    box-shadow: 0 2px 5px #2d111633;

    color: #e6ce9b;

    font-family: var(--serif);

    font-size: 23px;

    transform: translate(-50%, -50%);

    transition: opacity .3s ease;

}

.envelope.is-open .envelope__flap {

    transform: rotateX(180deg);

}

.envelope.is-open .envelope__paper {

    transform: translateY(-44%);

}

.envelope.is-open .envelope__seal {

    opacity: 0;

}

/* Main announcement */

.invitation {

    overflow: hidden;

    opacity: 0;

    transition: opacity 1.2s ease;

}

body.invitation-open .invitation {

    opacity: 1;

}

.announcement {

    position: relative;

    min-height: 100svh;

    padding: 88px 24px 65px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:

        radial-gradient(ellipse at center, #fffaf2 0%, var(--ivory) 66%, #eee0cd 100%);

    isolation: isolate;

}

.announcement::before {

    position: absolute;

    z-index: -1;

    inset: 17px;

    border: 1px solid #b69a6875;

    content: "";

    pointer-events: none;

}

.announcement::after {

    position: absolute;

    z-index: -1;

    inset: 23px;

    border: 1px solid #b69a6833;

    content: "";

    pointer-events: none;

}

.announcement__ornament {

    position: absolute;

    left: 50%;

    color: var(--gold);

    font-family: var(--serif);

    font-size: 48px;

    transform: translateX(-50%);

}

.announcement__ornament--top {

    top: 32px;

}

.announcement__ornament--bottom {

    bottom: 13px;

    transform: translateX(-50%) rotate(180deg);

}

.announcement > .eyebrow:first-of-type {

    color: var(--burgundy);

    font-size: 14px;

    letter-spacing: .12em;

}

.announcement__blessing {

    margin: 19px 0 0;

    color: var(--muted);

    font-family: var(--serif);

    font-size: clamp(21px, 4vw, 29px);

    font-style: italic;

}

.announcement__flourish {

    margin: 23px 0 26px;

    color: var(--gold);

    font-size: 21px;

    letter-spacing: .35em;

}

.announcement__invite {

    color: var(--burgundy);

    font-size: 9px;

    letter-spacing: .2em;

}

.couple-names {

    margin: 22px 0 23px;

    color: var(--burgundy);

    font-family: var(--script);

    font-size: clamp(70px, 13vw, 125px);

    font-weight: 400;

    line-height: .92;

}

.couple-names > span {

    display: block;

}

.couple-names__ampersand {

    margin: 7px 0;

    color: var(--gold);

    font-family: var(--serif);

    font-size: .48em;

    font-style: italic;

    line-height: 1.15;

}

.announcement__message {

    max-width: 370px;

    margin: 0 auto;

    color: var(--muted);

    font-family: var(--serif);

    font-size: 20px;

    line-height: 1.55;

}

.announcement__date {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 35px;

    color: var(--burgundy);

    font-family: var(--sans);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .17em;

}

.announcement__date-line {

    width: 30px;

    height: 1px;

    background: var(--gold);

}

.date-placeholder {

    margin: 11px 0 0;

    color: var(--muted);

    font-size: 9px;

    letter-spacing: .13em;

}

.scroll-cue {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    margin-top: 40px;

    color: var(--burgundy);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .16em;

}

.scroll-cue__arrow {

    color: var(--gold);

    font-size: 22px;

    animation: arrow-down 1.7s ease-in-out infinite;

}

/* General section styles */

.section-pad {

    padding: 115px 24px;

    text-align: center;

}

.section-flower {

    margin: 21px 0;

    color: var(--gold);

    font-size: 27px;

}

.invitation-note {

    position: relative;

    background: var(--burgundy);

    color: var(--ivory);

}

.invitation-note::before,

.invitation-note::after {

    position: absolute;

    right: 18px;

    left: 18px;

    height: 1px;

    background: #d8c39a66;

    content: "";

}

.invitation-note::before {

    top: 18px;

}

.invitation-note::after {

    bottom: 18px;

}

.invitation-note .eyebrow {

    color: var(--gold-light);

}

.invitation-note h2,

.celebration__heading h2,

.venue h2,

.rsvp h2 {

    margin: 20px 0;

    font-family: var(--serif);

    font-size: clamp(44px, 7vw, 73px);

    font-weight: 400;

    line-height: .98;

}

.invitation-note h2 em,

.celebration__heading h2 em,

.venue h2 em,

.rsvp h2 em {

    color: var(--gold-light);

    font-weight: 400;

}

.invitation-note__text {

    max-width: 490px;

    margin: 28px auto;

    color: #f0e1d4;

    font-family: var(--serif);

    font-size: 21px;

    line-height: 1.7;

}

.invitation-note__signoff {

    margin-top: 37px;

    color: var(--gold-light);

    font-size: 10px;

    letter-spacing: .14em;

    text-transform: uppercase;

}

.invitation-note__signature {

    margin: 8px 0 0;

    font-family: var(--script);

    font-size: 43px;

}

/* Wedding festivities */

.celebration {

    padding: 110px 7%;

    background: var(--ivory);

}

.celebration__heading {

    max-width: 660px;

    margin: 0 auto 70px;

    text-align: center;

}

.celebration__heading .eyebrow,

.venue .eyebrow,

.rsvp .eyebrow {

    color: var(--burgundy);

}

.celebration__heading h2 em,

.venue h2 em,

.rsvp h2 em {

    color: var(--burgundy-light);

}

.celebration__heading > p:last-child {

    max-width: 390px;

    margin: 25px auto 0;

    color: var(--muted);

    font-family: var(--serif);

    font-size: 19px;

    line-height: 1.6;

}

.event {

    position: relative;

    display: grid;

    grid-template-columns: 55px minmax(0, 1fr) 55px;

    gap: 24px;

    align-items: start;

    max-width: 870px;

    margin: 0 auto;

    padding: 36px 0;

    border-top: 1px solid #b69a6859;

}

.event:last-child {

    border-bottom: 1px solid #b69a6859;

}

.event__number {

    padding-top: 4px;

    color: var(--gold);

    font-family: var(--serif);

    font-size: 25px;

}

.event__content .eyebrow {

    color: var(--burgundy-light);

    font-size: 9px;

}

.event h3 {

    margin: 7px 0 9px;

    color: var(--burgundy);

    font-family: var(--serif);

    font-size: clamp(37px, 5vw, 53px);

    font-weight: 500;

    line-height: 1.1;

}

.event__description {

    max-width: 460px;

    margin: 0;

    color: var(--muted);

    font-family: var(--serif);

    font-size: 19px;

    line-height: 1.55;

}

.event__details {

    margin: 20px 0 0;

    color: var(--burgundy);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .13em;

}

.event__symbol {

    padding-top: 3px;

    color: var(--gold);

    font-size: 31px;

    text-align: center;

}

.event--wedding {

    padding-top: 45px;

    padding-bottom: 45px;

}

/* Photo interlude */

.photo-interlude {

    position: relative;

    min-height: 520px;

    display: grid;

    place-items: center;

    overflow: hidden;

    background-color: var(--burgundy-dark);

    background-image: url("https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=1800&q=85");

    background-position: center 48%;

    background-size: cover;

    color: var(--ivory);

    text-align: center;

}

.photo-interlude__overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(

        180deg,

        #321319a8,

        #42151dd9

    );

}

.photo-interlude__content {

    position: relative;

    padding: 65px 24px;

}

.photo-interlude__ornament {

    color: var(--gold-light);

    font-size: 30px;

}

.photo-interlude .eyebrow {

    margin: 20px 0;

    color: var(--gold-light);

}

.photo-interlude h2 {

    margin: 20px 0 35px;

    font-family: var(--serif);

    font-size: clamp(57px, 10vw, 96px);

    font-weight: 400;

    line-height: .95;

}

.photo-interlude h2 em {

    color: var(--gold-light);

    font-weight: 400;

}

/* Venue */

.venue {

    background:

        radial-gradient(ellipse at center, #fffaf2, var(--ivory) 75%);

}

.venue h2,

.rsvp h2 {

    max-width: 620px;

    margin-right: auto;

    margin-left: auto;

}

.venue__description {

    max-width: 410px;

    margin: 25px auto 40px;

    color: var(--muted);

    font-family: var(--serif);

    font-size: 20px;

    line-height: 1.65;

}

.venue__details {

    max-width: 430px;

    margin: 0 auto;

    padding: 35px 20px;

    border-top: 1px solid #b69a6875;

    border-bottom: 1px solid #b69a6875;

}

.venue__icon {

    color: var(--gold);

    font-size: 30px;

}

.venue__name {

    margin: 12px 0;

    color: var(--burgundy);

    font-family: var(--serif);

    font-size: 32px;

}

.venue__address {

    color: var(--muted);

    font-size: 10px;

    letter-spacing: .13em;

}

/* RSVP */

.rsvp {

    padding: 100px 24px;

    background: #e9dcc9;

    text-align: center;

}

.rsvp > p:not(.eyebrow) {

    max-width: 390px;

    margin: 25px auto;

    color: var(--muted);

    font-family: var(--serif);

    font-size: 20px;

    line-height: 1.6;

}

.rsvp__coming-soon {

    display: inline-block;

    margin-top: 10px;

    padding: 13px 20px;

    border: 1px solid #9d7a50;

    color: var(--burgundy);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .14em;

}

/* Closing section */

.closing {

    padding: 65px 24px 30px;

    background: var(--burgundy-dark);

    color: var(--ivory);

    text-align: center;

}

.closing__ornament {

    color: var(--gold-light);

    font-size: 33px;

}

.closing .eyebrow {

    margin-top: 16px;

    color: var(--gold-light);

}

.closing__names {

    margin: 15px 0;

    font-family: var(--script);

    font-size: clamp(47px, 9vw, 72px);

}

.closing__names i {

    color: var(--gold-light);

    font-family: var(--serif);

    font-size: .7em;

}

.closing__message {

    max-width: 350px;

    margin: 0 auto;

    color: #e5d5c9;

    font-family: var(--serif);

    font-size: 18px;

    line-height: 1.6;

}

.closing__bottom {

    display: block;

    margin-top: 55px;

    padding-top: 20px;

    border-top: 1px solid #d8c39a3d;

    color: var(--gold-light);

    font-size: 8px;

    letter-spacing: .2em;

}

/* Scroll reveal animations */

.reveal {

    opacity: 0;

    transform: translateY(22px);

    transition: opacity .8s ease, transform .8s ease;

}

.reveal.is-visible {

    opacity: 1;

    transform: translateY(0);

}

@keyframes breathe {

    50% {

        opacity: .55;

    }

}

@keyframes arrow-down {

    50% {

        transform: translateY(5px);

    }

}

/* Mobile layout */

@media (max-width: 600px) {

    .intro__content {

        gap: 21px;

    }

    .envelope {

        width: min(260px, 72vw);

    }

    .announcement {

        min-height: 100svh;

        padding: 80px 28px 70px;

    }

    .announcement__ornament--top {

        top: 29px;

    }

    .announcement__blessing {

        font-size: 22px;

    }

    .couple-names {

        font-size: clamp(68px, 18vw, 98px);

    }

    .announcement__message {

        max-width: 310px;

        font-size: 18px;

    }

    .announcement__date {

        gap: 9px;

        font-size: 8px;

    }

    .announcement__date-line {

        width: 20px;

    }

    .section-pad {

        padding: 85px 25px;

    }

    .invitation-note h2,

    .celebration__heading h2,

    .venue h2,

    .rsvp h2 {

        font-size: clamp(43px, 11vw, 60px);

    }

    .invitation-note__text {

        font-size: 19px;

    }

    .celebration {

        padding: 85px 25px;

    }

    .celebration__heading {

        margin-bottom: 45px;

    }

    .event {

        grid-template-columns: 30px minmax(0, 1fr) 25px;

        gap: 10px;

        padding: 29px 0;

    }

    .event__number {

        font-size: 19px;

    }

    .event__symbol {

        font-size: 21px;

    }

    .event__content .eyebrow {

        font-size: 8px;

        letter-spacing: .12em;

    }

    .event h3 {

        font-size: 39px;

    }

    .event__description {

        font-size: 17px;

    }

    .event__details {

        font-size: 8px;

        line-height: 1.8;

    }

    .photo-interlude {

        min-height: 440px;

    }

    .photo-interlude h2 {

        font-size: clamp(56px, 13vw, 75px);

    }

    .rsvp {

        padding: 80px 25px;

    }

}

@media (prefers-reduced-motion: reduce) {

    *,

    *::before,

    *::after {

        scroll-behavior: auto !important;

        animation: none !important;

        transition-duration: .01ms !important;

    }

    .reveal {

        opacity: 1;

        transform: none;

    }

}

/* Envelope layer order */

.envelope__back {

    z-index: 0;

}

.envelope__paper {

    z-index: 1;

}

.envelope__left,

.envelope__right,

.envelope__front {

    z-index: 2;

}

.envelope__flap {

    z-index: 3;

}

.envelope__seal {

    z-index: 4;

}

.envelope.is-open .envelope__paper {

    z-index: 4;

}

/* =========================================

   FULL-SCREEN WEDDING ENVELOPE

   ========================================= */

   .intro {

    position: fixed;

    inset: 0;

    width: 100%;

    height: 100vh;

    height: 100dvh;

    padding: 0;

    overflow: hidden;

    background: #4b171f;

}

/* Full-screen envelope interaction area */

.intro__content {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    padding: 0;

    gap: 0;

}

/* Keep the text above the envelope artwork */

.intro__eyebrow {

    position: absolute;

    top: max(42px, env(safe-area-inset-top) + 20px);

    left: 20px;

    right: 20px;

    z-index: 10;

    margin: 0;

    color: #ead8b3;

    font-size: 11px;

    letter-spacing: 0.24em;

}

.intro__instruction {

    position: absolute;

    z-index: 10;

    bottom: max(55px, env(safe-area-inset-bottom) + 28px);

    left: 20px;

    right: 20px;

    margin: 0;

    color: #ead8b3;

    font-size: 10px;

    letter-spacing: 0.18em;

}

.intro__ornament {

    position: absolute;

    z-index: 10;

    bottom: max(25px, env(safe-area-inset-bottom) + 8px);

    color: #c6a66c;

    font-size: 12px;

}

/* The clickable envelope occupies the whole screen */

.envelope-button {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;

    height: 100%;

    padding: 0;

    border: 0;

    background: transparent;

    perspective: 1200px;

    cursor: default;

    pointer-events: none;

}

/* The artwork fills the viewport */

.envelope {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    aspect-ratio: auto;

    overflow: hidden;

    filter: none;

    transform: none;

    transition: none;

}

/* Deep burgundy envelope with subtle texture */

.envelope__back {

    z-index: 0;

    background:

        radial-gradient(

            ellipse at center,

            #762d37 0%,

            #62212b 52%,

            #42141c 100%

        );

}

/* Fine ornamental border */

.envelope__back::before {

    position: absolute;

    inset: 17px;

    border: 1px solid #c6a66c80;

    content: "";

    pointer-events: none;

}

.envelope__back::after {

    position: absolute;

    inset: 24px;

    border: 1px solid #c6a66c35;

    content: "";

    pointer-events: none;

}

/* Invitation paper revealed during opening */

.envelope__paper {

    z-index: 1;

    top: 8%;

    left: 7%;

    width: 86%;

    height: 84%;

    gap: 15px;

    border: 1px solid #c6a66c;

    background:

        radial-gradient(ellipse at center, #fffaf0, #eadbc3);

    box-shadow: 0 0 40px #21080d35;

    transform: translateY(0);

}

.envelope__small {

    font-size: clamp(9px, 1.5vw, 12px);

    letter-spacing: 0.22em;

}

.envelope__monogram {

    font-size: clamp(65px, 12vw, 105px);

    color: #6d252e;

}

.envelope__paper-text {

    font-size: 10px;

    letter-spacing: 0.2em;

}

/* Full-screen folded envelope panels */

.envelope__left {

    z-index: 2;

    background: linear-gradient(115deg, #71303a, #57202a);

    clip-path: polygon(0 0, 50% 52%, 0 100%);

}

.envelope__right {

    z-index: 2;

    background: linear-gradient(245deg, #843943, #60232d);

    clip-path: polygon(100% 0, 50% 52%, 100% 100%);

}

/* Lower envelope fold */

.envelope__front {

    z-index: 3;

    background:

        linear-gradient(150deg, #7b303a, #5a1d27 75%);

    clip-path: polygon(0 100%, 0 0, 50% 56%, 100% 0, 100% 100%);

}

/* Opening flap */

.envelope__flap {

    z-index: 4;

    background: linear-gradient(

        180deg,

        #8b3d47 0%,

        #702832 70%,

        #5c1d26 100%

    );

    clip-path: polygon(0 0, 100% 0, 50% 57%);

    transform-origin: top center;

    transition: transform 0.85s cubic-bezier(.2, .75, .25, 1);

}

/* Central wax seal */

.envelope__seal {

    position: absolute;

    z-index: 6;

    top: 50%;

    left: 50%;

    width: clamp(100px, 15vw, 140px);

    aspect-ratio: 1;

    display: grid;

    place-items: center;

    border: 2px solid #c6a66c;

    border-radius: 50%;

    background:

        radial-gradient(circle at 32% 25%, #a95458, #792c36 48%, #4d1720 100%);

    box-shadow:

        0 0 0 5px #c6a66c20,

        0 0 0 8px #c6a66c10,

        0 12px 30px #21080d55,

        inset 0 2px 5px #ffffff24,

        inset 0 -5px 9px #26070d40;

    color: #e6cf9b;

    font-family: var(--serif);

    font-size: clamp(35px, 5vw, 48px);

    transform: translate(-50%, -50%);

    transition:

        transform 0.3s ease,

        opacity 0.3s ease,

        box-shadow 0.3s ease;

    cursor: pointer;

    pointer-events: auto;

}

.envelope__seal::before {

    position: absolute;

    inset: 7px;

    border: 1px solid #e0c58b99;

    border-radius: 50%;

    content: "";

}

.envelope-button:hover .envelope__seal {

    box-shadow:

        0 0 0 7px #c6a66c25,

        0 0 0 12px #c6a66c12,

        0 15px 35px #21080d66,

        inset 0 2px 5px #ffffff24;

}

.envelope-button:focus-visible .envelope__seal {

    outline: 3px solid #f5dfb0;

    outline-offset: 8px;

}

/* Lift the invitation paper as the envelope opens */

.envelope.is-open .envelope__paper {

    z-index: 5;

    transform: translateY(-105%);

}

/* The seal disappears when opening starts */

.envelope.is-open .envelope__seal {

    opacity: 0;

    transform: translate(-50%, -50%) scale(0.75);

    pointer-events: none;

}

/* Mobile viewport refinements */

@media (max-width: 600px) {

    .intro__eyebrow {

        top: max(48px, env(safe-area-inset-top) + 25px);

        font-size: 10px;

    }

    .intro__instruction {

        bottom: max(65px, env(safe-area-inset-bottom) + 35px);

        font-size: 9px;

    }

    .envelope__back::before {

        inset: 12px;

    }

    .envelope__back::after {

        inset: 18px;

    }

    .envelope__paper {

        top: 9%;

        left: 6%;

        width: 88%;

        height: 82%;

    }

    .envelope__seal {

        width: 112px;

        font-size: 40px;

    }

}

@media (prefers-reduced-motion: reduce) {

    .envelope__flap,

    .envelope__paper,

    .envelope__seal {

        transition-duration: 0.01ms !important;

    }

}

/* Slower, more visible envelope opening */

.envelope__flap {

    transition: transform 1.6s cubic-bezier(.45, 0, .2, 1);

}

.envelope__paper {

    transition: transform 2s cubic-bezier(.2, .75, .25, 1);

}

.envelope.is-open .envelope__paper {

    transform: translateY(-45%);

}

.envelope.is-open .envelope__flap {

    transform: rotateX(180deg);

}

.envelope.is-open .envelope__seal {

    opacity: 0;

    transition: opacity .6s ease;

}

.intro {

    transition: opacity 1.2s ease, visibility 1.2s ease;

}

/* =========================================

   OUR WEDDING DAY — SCRATCH CARD

   ========================================= */

   .wedding-day {

    position: relative;

    padding: 110px 22px;

    overflow: hidden;

    background:

        radial-gradient(ellipse at 50% 30%, #fffaf2, #f0e3d1 85%);

    text-align: center;

}

.wedding-day::before {

    position: absolute;

    inset: 18px;

    border: 1px solid #b69a684d;

    content: "";

    pointer-events: none;

}

.wedding-day__inner {

    position: relative;

    max-width: 620px;

    margin: 0 auto;

}

.wedding-day .eyebrow {

    color: var(--burgundy);

}

.wedding-day__ornament {

    display: block;

    margin: 20px 0;

    color: var(--gold);

    font-family: var(--serif);

    font-size: 34px;

}

.wedding-day h2 {

    margin: 0;

    color: var(--burgundy);

    font-family: var(--serif);

    font-size: clamp(49px, 8vw, 76px);

    font-weight: 400;

    line-height: 1;

}

.wedding-day h2 em {

    color: #99794d;

    font-weight: 400;

}

.wedding-day__intro {

    max-width: 390px;

    margin: 22px auto 35px;

    color: var(--muted);

    font-family: var(--serif);

    font-size: 20px;

    line-height: 1.6;

}

.scratch-card {

    position: relative;

    width: min(100%, 440px);

    aspect-ratio: 1.55 / 1;

    margin: 0 auto;

    overflow: hidden;

    border: 1px solid var(--gold);

    background: #fff9ee;

    box-shadow: 0 15px 40px #45221b17;

    touch-action: pan-y;

}

.scratch-card::before {

    position: absolute;

    z-index: 1;

    inset: 9px;

    border: 1px solid #b69a6875;

    content: "";

    pointer-events: none;

}

.scratch-card__revealed {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background:

        radial-gradient(ellipse at center, #fffaf1, #ead9c0);

    color: var(--burgundy);

}

.scratch-card__label,

.scratch-card__year {

    font-family: var(--sans);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .18em;

}

.scratch-card__day {

    margin-top: 15px;

    color: var(--muted);

    font-family: var(--serif);

    font-size: clamp(21px, 5vw, 29px);

    font-style: italic;

}



.scratch-card__date {
    display: inline-block;
    position: relative;
    margin: 8px 0 18px;
    padding: 8px 24px 12px;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(36px, 7vw, 52px);
    font-weight: 500;
    font-style: normal;
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum" 1;

    letter-spacing: 0.055em;
    line-height: 1.15;

    color: #6d252e;
    text-shadow: 0 1px 0 rgba(182, 154, 104, 0.18);

    border-bottom: 1px solid #b69a68;
}

/* Delicate golden flourish beneath the date */
.scratch-card__date::after {
    content: "✦";
    position: absolute;
    left: 50%;
    bottom: -9px;
    padding: 0 10px;

    font-family: Georgia, serif;
    font-size: 12px;
    line-height: 1;

    color: #b69a68;
    background: #f7f0e5;
    transform: translateX(-50%);
}



.scratch-card__year {

    color: #927348;

    font-size: 8px;

}

.scratch-card__canvas {

    position: absolute;

    z-index: 2;

    inset: 0;

    display: block;

    width: 100%;

    height: 100%;

    cursor: crosshair;

    touch-action: none;

}

.scratch-card.is-scratched .scratch-card__canvas {

    opacity: 0;

    pointer-events: none;

    transition: opacity .6s ease;

}

.scratch-card__hint {

    margin: 22px 0 0;

    color: var(--burgundy);

    font-family: var(--sans);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .16em;

}

.scratch-card__hint span {

    padding: 0 8px;

    color: var(--gold);

}

.wedding-day__footnote {

    max-width: 400px;

    margin: 28px auto 0;

    color: var(--muted);

    font-family: var(--serif);

    font-size: 17px;

    font-style: italic;

    line-height: 1.6;

}

/* =========================================

   POSTCARD EVENT CARDS

   ========================================= */

.celebration {

    padding: 105px 0 115px;

    background: #f7f0e5;

}

.celebration__heading {

    max-width: 660px;

    margin: 0 auto 75px;

    padding: 0 24px;

    text-align: center;

}

.celebration__heading .eyebrow {

    color: var(--burgundy);

}

.celebration__heading h2 {

    margin: 18px 0;

    color: var(--burgundy);

    font-family: var(--serif);

    font-size: clamp(48px, 8vw, 76px);

    font-weight: 400;

    line-height: 1;

}

.celebration__heading h2 em {

    color: #9a7951;

    font-weight: 400;

}

.celebration__heading > p:last-child {

    max-width: 410px;

    margin: 20px auto 0;

    color: var(--muted);

    font-family: var(--serif);

    font-size: 20px;

    line-height: 1.6;

}

.event-day {

    margin: 0 auto 100px;

}

.event-day:last-child {

    margin-bottom: 0;

}

.event-day__heading {

    max-width: 850px;

    margin: 0 auto 38px;

    padding: 0 25px;

    text-align: center;

}

.event-day__number {

    display: inline-block;

    padding: 8px 15px;

    border: 1px solid #b69a6880;

    color: var(--burgundy);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .2em;

}

.event-day__heading h3 {

    margin: 20px 0 10px;

    color: var(--burgundy);

    font-family: var(--serif);

    font-size: clamp(32px, 5vw, 45px);

    font-weight: 500;

}

.event-day__heading h3 em {

    display: block;

    margin-top: 8px;

    color: #987a53;

    font-size: .66em;

    font-weight: 400;

}

.event-day__heading p {

    color: var(--muted);

    font-family: var(--serif);

    font-size: 18px;

}

/* =========================================

   TRADITIONAL WEDDING POSTCARDS

   ========================================= */

   .event-stack {

    display: flex;

    flex-direction: column;

    gap: 38px;

    width: min(1120px, calc(100% - 48px));

    margin: 0 auto;

    perspective: 1200px;

}

.event-card {

    --event-image: none;

    position: relative;

    isolation: isolate;

    min-height: 340px;

    width: 100%;

    display: flex;

    align-items: stretch;

    overflow: hidden;

    border: 1px solid #b69a68;

    outline: 1px solid #b69a6838;

    outline-offset: 5px;

    background: #f8efe1;

    box-shadow: 0 16px 34px #40201618;

    transition:

        transform .45s ease,

        box-shadow .45s ease;

}

/* Photo fills the card; it is not faded itself. */

.event-card::before {

    position: absolute;

    z-index: -2;

    inset: 0;

    content: "";

    background-image: var(--event-image);

    background-size: cover;

    background-position: center;

    opacity: 1;

    transform: scale(1.01);

    transition: transform .7s ease;

}

/* Solid text area fades gradually into the photograph. */

.event-card::after {

    position: absolute;

    z-index: -1;

    inset: 0;

    content: "";

    background: linear-gradient(

        90deg,

        #f8efe1 0%,

        #f8efe1 31%,

        rgba(248, 239, 225, .97) 42%,

        rgba(248, 239, 225, .82) 53%,

        rgba(248, 239, 225, .42) 66%,

        rgba(248, 239, 225, .08) 80%,

        transparent 100%

    );

}

.event-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 24px 44px #40201626;

}

.event-card:hover::before {

    transform: scale(1.06);

}

/* Postcard content */

.event-card__content {

    position: relative;

    width: 68%;

    min-height: 340px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    padding: 34px clamp(24px, 5vw, 58px);

}

/* Small postcard stamp */

.event-card__number {

    padding-bottom: 9px;

    border-bottom: 1px solid #b69a68;

    color: #7a3b35;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .17em;

}

.event-card__symbol {

    margin-top: 16px;

    color: #a88a58;

    font-size: 25px;

}

.event-card h4 {

    margin: 6px 0 12px;

    color: #69232d;

    font-family: var(--serif);

    font-size: clamp(42px, 5vw, 59px);

    font-weight: 500;

    line-height: 1;

}

.event-card__description {

    max-width: 420px;

    margin: 0;

    color: #59473b;

    font-family: var(--serif);

    font-size: 19px;

    line-height: 1.5;

}

.event-card__time {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 12px;

    width: 100%;

    margin-top: 22px;

    padding-top: 14px;

    border-top: 1px solid #b69a6875;

}

.event-card__time span {

    color: #795d3b;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: .15em;

}

.event-card__time strong {

    color: #69232d;

    font-family: var(--serif);

    font-size: 24px;

    font-weight: 600;

}

/* event card images*/

.event-card--brahm-bhoj {
    --event-image: url("../images/events/dinner.png");
}

.event-card--jaggo {
    --event-image: url("../images/events/sangeet.jpeg");
}

.event-card--haldi {
    --event-image: url("../images/events/haldi.png");
}

.event-card--shanti-path {
    --event-image: url("../images/events/shanti-path.png");
}

.event-card--sehra-bandi {
    --event-image: url("../images/events/sehra-bandi.png");
}

.event-card--barat {
    --event-image: url("../images/events/barat.png");
}


/* Alternating postcard arrangement */

.event-card:nth-child(even) {

    transform: translateX(18px);

}

.event-card:nth-child(even):hover {

    transform: translate(18px, -5px);

}

/* @media (max-width: 650px) {

    .event-stack {

        width: calc(100% - 36px);

        gap: 27px;

    }

    .event-card {

        min-height: 320px;

    }

    .event-card__content {

        width: 82%;

        min-height: 320px;

        padding: 28px 20px;

    }

    .event-card::after {

        background: linear-gradient(

            90deg,

            #f8efe1 0%,

            rgba(248, 239, 225, .98) 38%,

            rgba(248, 239, 225, .86) 53%,

            rgba(248, 239, 225, .42) 72%,

            rgba(248, 239, 225, .05) 100%

        );

    }

    .event-card__content::after {

        top: 15px;

        right: 8px;

        width: 32px;

        height: 39px;

        font-size: 18px;

    }

    .event-card h4 {

        font-size: 43px;

    }

    .event-card__description {

        font-size: 17px;

    }

    .event-card:nth-child(even),

    .event-card:nth-child(even):hover {

        transform: none;

    }

} */

/* Responsive postcard layout */

@media (max-width: 650px) {

    .event-stack {

        width: calc(100% - 28px);

        gap: 24px;

    }

    .event-card {

        min-height: 330px;

        isolation: isolate;

    }

    /* Keep the photograph positioned on the right */

    .event-card::before {

        background-size: cover;

        background-position: 65% center;

        transform: none;

    }

    /* Fade only from the text side towards the image */

    .event-card::after {

        background: linear-gradient(

            90deg,

            #f8efe1 0%,

            rgba(248, 239, 225, .98) 28%,

            rgba(248, 239, 225, .90) 40%,

            rgba(248, 239, 225, .62) 53%,

            rgba(248, 239, 225, .22) 68%,

            rgba(248, 239, 225, .04) 82%,

            transparent 100%

        );

    }

    /* Constrain the text so it cannot fill the entire postcard */

    .event-card__content {

        width: 76%;

        min-height: 330px;

        padding: 28px 16px 28px 20px;

        justify-content: center;

    }

    .event-card h4 {

        max-width: 100%;

        font-size: clamp(32px, 8vw, 42px);

        overflow-wrap: anywhere;

    }

    .event-card__description {

        max-width: 260px;

        font-size: 16px;

    }

    .event-card__time {

        gap: 7px;

        margin-top: 16px;

    }

    .event-card__time strong {

        font-size: 21px;

    }

    .event-card__content::after {

        width: 28px;

        height: 36px;

        top: 12px;

        right: 5px;

        font-size: 16px;

    }

    .event-card:nth-child(even),

    .event-card:nth-child(even):hover {

        transform: none;

    }

}

/* Very narrow phones */

@media (max-width: 390px) {

    .event-card {

        min-height: 310px;

    }

    .event-card__content {

        width: 80%;

        min-height: 310px;

        padding-left: 15px;

        padding-right: 10px;

    }

    .event-card::before {

        background-position: 68% center;

    }

    .event-card::after {

        background: linear-gradient(

            90deg,

            #f8efe1 0%,

            rgba(248, 239, 225, .97) 30%,

            rgba(248, 239, 225, .84) 44%,

            rgba(248, 239, 225, .48) 58%,

            rgba(248, 239, 225, .12) 76%,

            transparent 100%

        );

    }

    .event-card h4 {

        font-size: 32px;

    }

    .event-card__description {

        font-size: 15px;

    }

}

@media (prefers-reduced-motion: reduce) {

    .event-card,

    .event-card::before {

        transition: none;

    }

    .event-card:hover {

        transform: none;

    }

}

/* =========================================

   WEDDING VENUE AND MAP

   ========================================= */

.venue {

    padding: 105px 22px;

    background:

        radial-gradient(ellipse at center, #fffaf2, #efe2cf);

    text-align: center;

}

.venue .eyebrow {

    color: var(--burgundy);

}

.venue h2 {

    margin: 15px 0 35px;

    color: var(--burgundy);

    font-family: var(--serif);

    font-size: clamp(48px, 8vw, 75px);

    font-weight: 400;

    line-height: 1;

}

.venue h2 em {

    color: #98764d;

}

.venue__card {

    position: relative;

    max-width: 650px;

    margin: 0 auto 35px;

    padding: 35px 24px;

    border: 1px solid #b69a6875;

    background: #fff9efb8;

}

.venue__card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    color: var(--burgundy);

}

.venue__venue-symbol {

    color: var(--gold);

    font-size: 28px;

}

.venue__card h3 {

    margin: 22px 0 12px;

    color: var(--burgundy);

    font-family: var(--serif);

    font-size: clamp(34px, 6vw, 48px);

    font-weight: 500;

}

.venue__address {

    color: var(--muted);

    font-family: var(--serif);

    font-size: 19px;

    line-height: 1.6;

}

.venue__map-link {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 15px;

    padding: 14px 19px;

    border: 1px solid var(--burgundy);

    color: var(--burgundy);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .13em;

    transition: color .25s ease, background .25s ease;

}

.venue__map-link:hover {

    background: var(--burgundy);

    color: var(--ivory);

}

.venue__map {

    width: min(100%, 1000px);

    height: clamp(280px, 45vw, 430px);

    margin: 0 auto;

    overflow: hidden;

    border: 1px solid #b69a6880;

    box-shadow: 0 15px 40px #45221b12;

}

.venue__map iframe {

    display: block;

    width: 100%;

    height: 100%;

    border: 0;

}

.venue__map-caption {

    margin: 20px auto 0;

    color: var(--muted);

    font-family: var(--serif);

    font-size: 17px;

    font-style: italic;

}

/* Mobile refinements */

@media (max-width: 600px) {

    .wedding-day {

        padding: 85px 20px;

    }

    .scratch-card {

        aspect-ratio: 1.25 / 1;

    }

    .scratch-card__label,

    .scratch-card__year {

        font-size: 7px;

    }

    .event-day {

        margin-bottom: 75px;

    }

    .event-stack {

        width: calc(100% - 28px);

        gap: 24px;

    }

    .event-card {

        min-height: 270px;

    }

    .event-card__content {

        padding: 30px 23px;

    }

    .event-card:nth-child(odd) {

        margin-right: 0;

    }

    .event-card:nth-child(even) {

        margin-left: 0;

    }

    .event-card::after {

        background: linear-gradient(

            90deg,

            #fff8edf2 0%,

            #fff8ede5 72%,

            #fff8edb8 100%

        );

    }

    .event-card__description {

        font-size: 18px;

    }

    .venue {

        padding: 85px 18px;

    }

    .venue__card {

        padding: 28px 19px;

    }

}

@media (prefers-reduced-motion: reduce) {

    .event-card::before {

        transition: none;

    }

}

/* Fix image gaps when postcard width changes */

.event-card {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    background: #f8efe1;

}

/* Oversized image layer prevents empty space */

.event-card::before {

    content: "";

    position: absolute;

    z-index: -2;

    top: 0;

    right: -8%;

    bottom: 0;

    left: 0;

    width: 108%;

    height: 100%;

    background-image: var(--event-image);

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    transform: none;

}

/* Gradient stays separate from the photograph */

.event-card::after {

    content: "";

    position: absolute;

    z-index: -1;

    inset: 0;

    pointer-events: none;

    background: linear-gradient(

        90deg,

        #f8efe1 0%,

        rgba(248, 239, 225, .98) 28%,

        rgba(248, 239, 225, .88) 42%,

        rgba(248, 239, 225, .58) 55%,

        rgba(248, 239, 225, .22) 70%,

        rgba(248, 239, 225, .04) 85%,

        transparent 100%

    );

}

@media (max-width: 650px) {

    .event-card::before {

        left: -5%;

        right: auto;

        width: 115%;

        background-size: cover;

        background-position: 62% center;

    }

}

@media (max-width: 390px) {

    .event-card::before {

        left: -10%;

        width: 120%;

        background-position: 65% center;

    }

}

.ganesha-symbol {

    width: 100x;

    height: 100px;

    margin: 0 auto 18px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.ganesha-icon {

    width: 100%;

    height: 100%;

    object-fit: contain;

}

.ornament-divider {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    width: min(260px, 75%);

    margin: 22px auto;

    color: #a58a58;

}

.ornament-line {

    flex: 1;

    height: 1px;

    background: linear-gradient(

        90deg,

        transparent,

        #a58a58

    );

}

.ornament-line:last-child {

    background: linear-gradient(

        90deg,

        #a58a58,

        transparent

    );

}

.ornament-center {

    width: 30px;

    height: 30px;

    flex-shrink: 0;

}

/* Wedding postage stamp. Add this element inside each .event-card in wedding.blade.php:
   <div class="event-stamp" aria-label="S and U wedding stamp">S <span>♥</span> U</div>
*/
.event-stamp {
    position: absolute;
    z-index: 3;
    top: 18px;
    right: 14px;
    width: 64px;
    height: 76px;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    color: #d8bd82;
    background: #762b35;
    border: 1px solid #b69a68;
    outline: 1px dashed #b69a68;
    outline-offset: -5px;
    font-family: var(--serif);
    font-size: 14px;
    letter-spacing: 1px;
    transform: rotate(4deg);
    opacity: .96;
    pointer-events: none;
}

.event-stamp span {
    color: #e7c995;
}

@media (max-width: 650px) {
    .event-stamp {
        top: 12px;
        right: 10px;
        width: 48px;
        height: 58px;
        font-size: 10px;
    }
}


/* =========================================
   THREE-SLIDE PHOTO CAROUSEL
   ========================================= */

   .photo-interlude {
    position: relative;
    height: 560px;
    min-height: 420px;
    overflow: hidden;
    isolation: isolate;
    background: #5a3035;
}

/* Each photographic slide */
.photo-interlude .photo-slide {
    position: absolute;
    inset: 0;
    z-index: 0;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    opacity: 0;
    visibility: hidden;
    transition:
        opacity 1s ease,
        visibility 1s ease;
}

.photo-interlude .photo-slide.active {
    opacity: 1;
    visibility: visible;
}

/* Burgundy overlay for readable text */
.photo-interlude .photo-interlude__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            90deg,
            rgba(45, 12, 20, 0.65),
            rgba(45, 12, 20, 0.18),
            rgba(45, 12, 20, 0.45)
        );
}

/* Text remains centered on each image */
.photo-interlude .photo-interlude__content {
    position: absolute;
    inset: 0;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 30px 70px;
    box-sizing: border-box;
    text-align: center;
    color: #fff7e8;
}

.photo-interlude .photo-interlude__content .eyebrow {
    color: #e4cc9b;
}

.photo-interlude .photo-interlude__content h2 {
    color: #fff7e8;
}

/* Navigation arrows */
.photo-interlude .carousel-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    transform: translateY(-50%);

    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;
    padding: 0;

    color: #fff7e8;
    background: rgba(70, 20, 30, 0.55);
    border: 1px solid rgba(228, 204, 155, 0.7);
    border-radius: 50%;

    cursor: pointer;
    transition: background 0.25s ease;
}

.photo-interlude .carousel-arrow:hover {
    background: rgba(70, 20, 30, 0.9);
}

.photo-interlude .carousel-prev {
    left: 22px;
}

.photo-interlude .carousel-next {
    right: 22px;
}

/* Navigation dots */
.photo-interlude .carousel-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24px;
    z-index: 5;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.photo-interlude .carousel-dot {
    width: 9px;
    height: 9px;
    padding: 0;

    border: 1px solid #f1dfb9;
    border-radius: 50%;
    background: transparent;

    cursor: pointer;
    transition:
        width 0.3s ease,
        background 0.3s ease;
}

.photo-interlude .carousel-dot.active {
    width: 25px;
    border-radius: 8px;
    background: #e4cc9b;
}

/* Mobile layout */
@media (max-width: 650px) {
    .photo-interlude {
        height: 440px;
        min-height: 380px;
    }

    .photo-interlude .photo-slide {
        background-position: center;
    }

    .photo-interlude .photo-interlude__content {
        padding: 25px 48px;
    }

    .photo-interlude .carousel-arrow {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }

    .photo-interlude .carousel-prev {
        left: 8px;
    }

    .photo-interlude .carousel-next {
        right: 8px;
    }

    .photo-interlude .carousel-dots {
        bottom: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .photo-interlude .photo-slide,
    .photo-interlude .carousel-arrow,
    .photo-interlude .carousel-dot {
        transition: none;
    }
}


/* Fix portrait photographs on large screens */
@media (min-width: 651px) {
    #photoCarousel .photo-slide {
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    /* Portrait images: show the complete photograph */
    #photoCarousel .photo-slide:nth-child(2),
    #photoCarousel .photo-slide:nth-child(3) {
        background-size: contain;
        background-position: center center;
        background-color: #40151d;
    }
}




/* =========================================
   PHOTO CAROUSEL — UNIFIED IVORY TEXT
   ========================================= */

   #photoCarousel .photo-interlude__content,
   #photoCarousel .photo-interlude__content .eyebrow,
   #photoCarousel .photo-interlude__content h2,
   #photoCarousel .photo-interlude__content h2 em,
   #photoCarousel .photo-interlude__content .photo-interlude__ornament {
       color: #fffaf0 !important;
   }
   
   /* Improve readability over bright photographs */
   #photoCarousel .photo-interlude__content .eyebrow,
   #photoCarousel .photo-interlude__content h2 {
       text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
   }
   
   /* Keep the text elegant and consistent */
   #photoCarousel .photo-interlude__content .eyebrow {
       letter-spacing: 3px;
   }
   
   #photoCarousel .photo-interlude__content h2 em {
       font-style: italic;
   }
   

   
/* Center the "Meet us there" venue heading on all screens */
#venue > h2 {
    width: 100%;
    max-width: 100%;
    margin: 15px auto 35px !important;
    text-align: center;
    box-sizing: border-box;
}

/* ========================================
   TWO-LOCATION WEDDING INVITATION
======================================== */

/* Invitation introduction */
.events-invitation {
    max-width: 760px;
    margin: 0 auto 38px;
    padding: 0 16px;
    text-align: center;
}

.events-invitation h2 {
    margin: 0 0 16px;
    color: var(--burgundy, #762b35);
    font-family: var(--serif, Georgia, serif);
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 400;
    line-height: 1.3;
}

.events-invitation p {
    max-width: 660px;
    margin: 0 auto;
    color: var(--text, #55463f);
    font-size: 1rem;
    line-height: 1.9;
}

/* Two location cards */
.venue__locations {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 960px;
    margin: 0 auto 34px;
    align-items: stretch;
}

/* Match the existing venue card appearance */
.venue__locations .venue__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
}

/* Location address */
.venue__locations .venue__address {
    line-height: 1.9;
}

/* Keep both direction links aligned */
.venue__locations .venue__map-link {
    align-self: flex-start;
    margin-top: auto;
}

/* Supporting note inside each card */
.venue__card-note {
    margin: 22px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(182, 154, 104, 0.4);
    color: var(--text, #55463f);
    font-size: 0.88rem;
    line-height: 1.8;
}

/* Existing hotel map */
.venue__map {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #b69a68;
    border-radius: 4px;
    box-sizing: border-box;
}

.venue__map iframe {
    display: block;
    width: 100%;
    height: 350px;
    border: 0;
}

.venue__map-caption {
    max-width: 760px;
    margin: 20px auto 0;
    padding: 0 16px;
    text-align: center;
    line-height: 1.8;
}

/* Mobile layout */
@media (max-width: 650px) {
    .events-invitation {
        margin-bottom: 28px;
    }

    .venue__locations {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        margin-bottom: 26px;
    }

    .venue__map iframe {
        height: 280px;
    }
}

.venue__locations .venue__map-link {
    align-self: center;
    text-align: center;
}


/* Spacing between the home and hotel maps */
.venue__map--home {
    margin-bottom: 18px;
}



/* ========================================
   WEDDING MAPS: SIDE-BY-SIDE COLUMNS
======================================== */

#venue .venue__maps {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px;
    width: 100%;
    max-width: 1000px;
    margin: 30px auto 0;
    align-items: start;
}

#venue .venue__map-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    margin: 0;
    gap: 0;
}

#venue .venue__map-item .venue__map {
    display: block;
    position: relative;
    width: 100%;
    max-width: none;
    height: 300px;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #b69a68;
    border-radius: 4px;
}

#venue .venue__map-item .venue__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

#venue .venue__map-item .venue__map-caption {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 16px 10px 0;
    box-sizing: border-box;
    text-align: center;
    color: var(--text, #55463f);
    font-family: var(--serif, Georgia, serif);
    font-size: 0.95rem;
    line-height: 1.8;
}

/* Mobile: stack each map with its own caption */
@media (max-width: 650px) {
    #venue .venue__maps {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 24px;
    }

    #venue .venue__map-item .venue__map {
        height: 280px;
    }
}




/* Family names and invitation */
.family-elders {
    max-width: 650px;
    margin: 0 auto 14px;
    text-align: center;
    color: var(--burgundy, #762b35);
    font-family: var(--serif, Georgia, "Times New Roman", serif);
    line-height: 1.8;
}

.family-elders p {
    margin: 0 0 10px;
}

/* Grandparents' names — slightly larger */
.family-elders__grandparents {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.025em;
}

.family-elders__grandparents strong {
    display: inline-block;
    margin-top: 4px;
    font-size: 1.18rem;
    font-weight: 600;
    letter-spacing: 0.015em;
}

/* Parents' names — prominent */
.family-elders__parents {
    font-size: 1.18rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Cordially invite — smaller  */
.family-elders__invitation {
    max-width: 520px;
    margin: 14px auto 0 !important;
    padding-top: 12px;
    border-top: 1px solid rgba(182, 154, 104, 0.65);
    color: var(--text, #55463f);
    font-family: var(--serif, Georgia, "Times New Roman", serif);
    font-size: 1rem;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.01em;
    line-height: 1.8;
    text-align: center;
}

/* Bride's parents below Sanchi */
.bride-parents {
    margin: 8px auto 0;
    color: var(--burgundy, #762b35);
    font-family: var(--serif, Georgia, "Times New Roman", serif);
    font-size: 1.18rem;
    line-height: 1.8;
    text-align: center;
}

.bride-parents strong {
    font-weight: 600;
}

/* Mobile adjustments */
@media (max-width: 650px) {
    .family-elders__grandparents strong,
    .family-elders__parents {
        font-size: 1.05rem;
    }

    .family-elders__invitation {
        font-size: 0.95rem;
    }

    .bride-parents {
        font-size: 1.05rem;
    }
}