/* =========================================================
   AURIELLE BOTANICAL
   INVITELLE
========================================================= */

:root {

    --maroon: #5a1118;
    --maroon-dark: #250609;
    --maroon-deep: #170304;

    --red: #7a1820;

    --gold: #c7a24a;
    --gold-light: #e5c66d;
    --gold-soft: #f0dfaa;

    --cream: #f8f3e9;
    --ivory: #fffaf1;

    --text: #2d2020;
    --white: #ffffff;

    --font-display: "Bodoni Moda", serif;
    --font-serif: "Cormorant Garamond", serif;
    --font-body: "DM Sans", sans-serif;
    --font-script: "Great Vibes", cursive;

}


/* =========================================================
RESET
========================================================= */

* {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    font-family: var(--font-body);

    color: var(--text);

    background: var(--cream);

    overflow-x: hidden;

}


body.invitation-open {

    overflow: hidden;

}


img {

    max-width: 100%;

    display: block;

}


a {

    text-decoration: none;

    color: inherit;

}


button,
input,
textarea,
select {

    font: inherit;

}


/* =========================================================
OPENING
========================================================= */

.opening-screen {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    min-height: 100vh;

    min-height: 100svh;

    height: 100dvh;

    overflow-y: auto;

    overflow-x: hidden;

    -webkit-overflow-scrolling: touch;

    background:

        radial-gradient(
            circle at center,
            rgba(125,25,35,.9),
            rgba(38,4,8,1)
        );

    color: white;

    transition:

        opacity .8s ease,
        visibility .8s ease;

}


.opening-screen.hide {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}


.opening-background {

    position: absolute;

    inset: 0;

    overflow: hidden;

    background: var(--maroon-deep);

}

.opening-cover-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center center;

    opacity: .68;

}

.opening-cover-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(180deg, rgba(38,4,8,.48), rgba(38,4,8,.62)),
        radial-gradient(circle at center, rgba(125,25,35,.20), rgba(38,4,8,.22));

}

.opening-pattern {

    position: absolute;

    inset: 30px;

    border: 1px solid rgba(199,162,74,.4);

}


.opening-pattern:before {

    content: "";

    position: absolute;

    inset: 12px;

    border: 1px solid rgba(199,162,74,.2);

}


.opening-content {

    position: relative;

    z-index: 2;

    width: min(92vw, 760px);

    padding: clamp(22px, 4vh, 42px) 20px;

    max-width: 760px;

    margin: auto;

}


.opening-ornament {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 0 auto 14px;

}

.opening-ornament span {

    display: block;

    color: var(--gold);

    font-family: Georgia, serif;

    font-size: clamp(108px, 13vw, 210px);

    line-height: .82;

    font-weight: 400;

    text-shadow: 0 2px 20px rgba(0,0,0,.18);

}

.opening-kicker {

    letter-spacing: 5px;

    font-size: 11px;

    color: var(--gold-light);

    margin-bottom: 25px;

}


.opening-couple {

    margin: 0;

    font-family: var(--font-display);

    font-weight: 500;

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

    line-height: 1.05;

}


.opening-couple span {

    display: block;

    font-family: var(--font-script);

    color: var(--gold);

    font-size: .8em;

    margin: 8px 0;

}


.opening-line {

    width: 80px;

    height: 1px;

    background: var(--gold);

    margin: 30px auto;

}


.opening-greeting {

    font-family: var(--font-serif);

    font-size: 17px;

    margin-bottom: 8px;

}


.opening-guest {

    margin: 0;

    font-family: var(--font-display);

    font-weight: 500;

    font-size: 22px;

}


.btn-open {

    margin-top: 35px;

    background: transparent;

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

    color: var(--gold-light);

    padding: 15px 35px;

    cursor: pointer;

    letter-spacing: 2px;

    font-size: 11px;

    transition: .3s;

}


.btn-open:hover {

    background: var(--gold);

    color: var(--maroon-dark);

}


.opening-date {

    margin-top: 30px;

    font-size: 14px;

    letter-spacing: 2.5px;

    color: var(--gold-light);

}


/* =========================================================
MUSIC
========================================================= */

.music-toggle {

    position: fixed;

    right: 20px;

    bottom: 20px;

    z-index: 999;

    width: 46px;

    height: 46px;

    border-radius: 50%;

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

    background: var(--maroon);

    color: var(--gold);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================================================
NAVIGATION
========================================================= */

.site-header {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 100;

    color: white;

    transition: .3s;

}


.site-header.scrolled {

    position: fixed;

    background: rgba(43,6,9,.96);

    backdrop-filter: blur(12px);

    box-shadow: 0 5px 30px rgba(0,0,0,.2);

}


.nav-container {

    width: min(1180px, calc(100% - 40px));

    margin: auto;

    height: 78px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.nav-brand {

    font-family: var(--font-display);

    font-size: 25px;

    color: var(--gold-light);

}


.brand-amp {

    font-family: var(--font-script);

    padding: 0 3px;

}


.main-nav {

    display: flex;

    gap: 25px;

}


.main-nav a {

    font-size: 10px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    opacity: .85;

}


.main-nav a:hover {

    color: var(--gold);

}


.mobile-menu {

    display: none;

    width: 38px;

    background: transparent;

    border: 0;

    cursor: pointer;

}


.mobile-menu span {

    display: block;

    width: 25px;

    height: 1px;

    background: var(--gold);

    margin: 6px 0;

}


/* =========================================================
HERO
========================================================= */

.hero-section {

    position: relative;

    height: 100vh;

    min-height: 680px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    text-align: center;

    overflow: hidden;

}


.hero-image {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    transform: scale(1.02);

}


.hero-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            rgba(0,0,0,.2),
            rgba(30,0,5,.55)
        );

}


.hero-content {

    position: relative;

    z-index: 2;

    padding: 100px 20px 30px;

}


.hero-kicker {

    font-size: 11px;

    letter-spacing: 5px;

    color: var(--gold-light);

}


.hero-content h1 {

    font-family: var(--font-display);

    font-size: clamp(48px, 9vw, 110px);

    font-weight: 500;

    line-height: 1;

    margin: 20px 0;

}


.hero-content h1 span {

    display: block;

    font-family: var(--font-script);

    color: var(--gold);

    font-size: .8em;

}


.hero-divider {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin: 30px 0;

}


.hero-divider span {

    width: 70px;

    height: 1px;

    background: var(--gold);

}


.hero-divider i {

    font-style: normal;

    font-size: 22px;

    color: var(--gold);

}


.hero-date {

    letter-spacing: 3px;

    font-size: 13px;

}


.hero-location {

    font-family: var(--font-serif);

    font-size: 19px;

    margin-top: 15px;

}


.hero-scroll {

    display: inline-flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 70px;

    font-size: 9px;

    letter-spacing: 3px;

}


.hero-scroll span {

    font-size: 20px;

    color: var(--gold);

}


/* =========================================================
GENERAL SECTION
========================================================= */

.section {

    padding: 120px 0;

}


.container {

    width: min(1180px, calc(100% - 40px));

    margin: auto;

}


.narrow {

    max-width: 850px;

}


.section-heading {

    text-align: center;

    max-width: 650px;

    margin: 0 auto 70px;

}


.section-heading > span {

    font-size: 10px;

    letter-spacing: 4px;

    color: var(--gold);

}


.section-heading h2 {

    font-family: var(--font-display);

    font-size: clamp(36px, 5vw, 58px);

    font-weight: 500;

    margin: 15px 0;

}


.section-heading p {

    font-family: var(--font-serif);

    font-size: 18px;

    line-height: 1.8;

}


.gold-symbol {

    font-size: 28px;

    color: var(--gold);

    margin-top: 20px;

}


/* =========================================================
COUPLE
========================================================= */

.couple-section {

    background: var(--ivory);

}


.intro-text {

    font-family: var(--font-serif);

    line-height: 1.8;

}


.couple-grid {

    display: grid;

    grid-template-columns: 1fr 100px 1fr;

    align-items: center;

    gap: 30px;

}


.couple-card {

    text-align: center;

}


.couple-image {

    width: min(100%, 380px);

    margin: auto auto 35px;

    aspect-ratio: 3 / 4;

    overflow: hidden;

    position: relative;

}


.couple-image:after {

    content: "";

    position: absolute;

    inset: 12px;

    border: 1px solid rgba(199,162,74,.5);

}


.couple-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.couple-heading {

    text-align: center;

}

.couple-heading-symbol {

    font-family: var(--font-serif);

    font-size: clamp(5rem, 7vw, 6.8rem) !important;

    line-height: .82;

    color: var(--gold) !important;

    margin: 0 auto 14px;

    display: block;

    font-weight: 400;

}

.couple-heading-kicker {

    display: block;

    font-size: clamp(15px, 1.22vw, 18px);

    letter-spacing: .38em;

    color: var(--gold);

    margin-bottom: 18px;

}

.couple-role {

    font-size: 15px;

    letter-spacing: 4px;

    color: var(--gold);

}

.couple-lineage {

    margin-top: 22px;

    text-align: center;

}

.couple-lineage-label {

    display: block;

    font-family: var(--font-serif);

    font-size: 13px;

    letter-spacing: .08em;

    color: rgba(45, 28, 28, .72);

    margin-bottom: 8px;

}

.couple-lineage strong {

    display: block;

    font-size: 15px;

    line-height: 1.65;

    font-family: var(--font-serif);

    font-weight: 700;

    color: var(--ink);

}

.couple-parent-amp {

    display: inline-block;

    margin: 0 .35em;

    color: var(--gold);

    font-family: var(--font-script);

    font-size: 1.15em;

}


.couple-parent-names {

    margin-top: 3px;

    font-family: var(--font-serif);

    font-size: 19px;

    font-weight: 700;

    line-height: 1.6;

    color: var(--text);

}


.couple-info h3 {

    font-family: var(--font-display);

    font-size: 34px;

    font-weight: 500;

    margin: 15px 0;

}


.couple-info p {

    font-family: var(--font-serif);

    margin-bottom: 8px;

}


.couple-info strong {

    font-family: var(--font-serif);

    font-weight: 500;

    line-height: 1.8;

}


.couple-symbol {

    font-family: var(--font-serif);

    font-size: clamp(3.4rem, 5vw, 5.5rem);

    color: var(--gold);

    text-align: center;

    line-height: 1;

    transform: translateY(10px);

}

.couple-ampersand {

    display: flex;

    align-items: center;

    justify-content: center;

}

.couple-ampersand span {

    display: inline-block;

    font-family: Georgia, 'Times New Roman', serif;

    font-style: italic;

    font-weight: 500;

    font-size: clamp(3.8rem, 5.4vw, 5.2rem);

    color: var(--gold);

    line-height: 1;

    transform: translateY(2px) rotate(-3deg);

}




/* =========================================================
COUNTDOWN
========================================================= */

.countdown-section {

    padding: 100px 0;

    background: var(--maroon);

    color: white;

}


.countdown-heading {

    text-align: center;

    margin-bottom: 50px;

}


.countdown-heading span {

    font-size: 10px;

    letter-spacing: 4px;

    color: var(--gold);

}


.countdown-heading h2 {

    font-family: var(--font-display);

    font-weight: 500;

    font-size: 40px;

    margin: 15px 0 0;

}


.countdown-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    max-width: 700px;

    margin: auto;

}


.countdown-item {

    text-align: center;

    border-right: 1px solid rgba(255,255,255,.2);

}


.countdown-item:last-child {

    border-right: 0;

}


.countdown-item strong {

    display: block;

    font-family: var(--font-display);

    font-size: 55px;

    font-weight: 500;

    color: var(--gold-light);

}


.countdown-item span {

    font-size: 10px;

    letter-spacing: 2px;

    text-transform: uppercase;

}


/* =========================================================
EVENTS
========================================================= */

.events-section {

    background: var(--cream);

}


.events-list {

    display: grid;

    gap: 30px;

}


.event-card {

    display: grid;

    grid-template-columns: 110px 1fr;

    background: white;

    border: 1px solid rgba(199,162,74,.25);

}


.event-number {

    background: var(--maroon);

    color: var(--gold);

    display: flex;

    align-items: center;

    justify-content: center;

    font-family: var(--font-display);

    font-size: 35px;

}


.event-content {

    padding: 50px;

}


.event-label {

    font-size: 10px;

    letter-spacing: 3px;

    color: var(--gold);

}


.event-content h3 {

    font-family: var(--font-display);

    font-size: 38px;

    font-weight: 500;

    margin: 15px 0;

}


.event-date {

    font-family: var(--font-serif);

    font-size: 20px;

}


.event-time {

    margin-top: 5px;

    color: var(--gold);

}


.event-venue {

    margin: 25px 0 5px;

    font-weight: 600;

}


.event-address {

    color: #777;

    line-height: 1.7;

}


.btn-gold-outline {

    display: inline-block;

    margin-top: 25px;

    padding: 13px 25px;

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

    color: var(--gold);

    font-size: 10px;

    letter-spacing: 2px;

}


/* =========================================================
LOCATION
========================================================= */

.location-section {

    background:

        linear-gradient(
            rgba(37,6,9,.95),
            rgba(37,6,9,.95)
        ),

        var(--maroon-dark);

    color: white;

}


.section-heading.light {

    color: white;

}


.location-content {

    text-align: center;

}


.location-info h3 {

    font-family: var(--font-display);

    font-size: 45px;

    font-weight: 500;

    color: var(--gold-light);

}


.location-info p {

    font-family: var(--font-serif);

    font-size: 20px;

    line-height: 1.8;

    max-width: 600px;

    margin: 25px auto;

}


.btn-gold {

    display: inline-block;

    margin-top: 20px;

    padding: 16px 30px;

    background: var(--gold);

    color: var(--maroon-dark);

    font-size: 10px;

    letter-spacing: 2px;

}


/* =========================================================
STORY
========================================================= */

.story-timeline {

    max-width: 850px;

    margin: auto;

}


.story-item {

    position: relative;

    padding: 0 0 80px 100px;

    border-left: 1px solid rgba(199,162,74,.5);

}


.story-year {

    position: absolute;

    left: -48px;

    top: 0;

    width: 95px;

    background: var(--cream);

    text-align: center;

    font-family: var(--font-display);

    color: var(--gold);

    font-size: 28px;

}


.story-card {

    display: grid;

    grid-template-columns: 220px 1fr;

    gap: 35px;

}


.story-image {

    height: 260px;

    overflow: hidden;

}


.story-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.story-content h3 {

    font-family: var(--font-display);

    font-size: 30px;

    font-weight: 500;

    margin-top: 0;

}


.story-content p {

    font-family: var(--font-serif);

    line-height: 1.9;

    font-size: 18px;

}


/* =========================================================
VIDEO
========================================================= */

.video-section {

    background: var(--ivory);

}


.video-wrapper {

    aspect-ratio: 16 / 9;

    background: var(--maroon-dark);

}


.video-wrapper iframe,
.video-wrapper video {

    width: 100%;

    height: 100%;

    border: 0;

}


/* =========================================================
GALLERY
========================================================= */

.gallery-section {
    background: var(--maroon-dark);
}

.gallery-section .section-heading.light {
    color: #fff;
}

.gallery-section .section-heading.light span,
.gallery-section .section-heading.light h2,
.gallery-section .section-heading.light p {
    color: #fff;
}

.gallery-section .section-heading.light p {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    opacity: .78;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(190px, 15vw);
    gap: 12px;
    width: 100%;
}

.gallery-item {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 0;
    padding: 0;
    margin: 0;
    background: #160509;
    cursor: zoom-in;
}

.gallery-item.gallery-item-1 {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-item.gallery-item-2 {
    grid-column: span 1;
}

.gallery-item.gallery-item-4 {
    grid-column: span 2;
}

.gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.2,.65,.2,1), filter .45s ease;
}

.gallery-item:hover img,
.gallery-item:focus-visible img {
    transform: scale(1.045);
    filter: brightness(.78);
}

.gallery-item:focus-visible {
    outline: 1px solid var(--gold-light);
    outline-offset: 3px;
}

.gallery-hover {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 9px 15px;
    border: 1px solid rgba(255,255,255,.75);
    color: #fff;
    background: rgba(23,3,4,.22);
    backdrop-filter: blur(5px);
    font-size: 9px;
    letter-spacing: 3px;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.gallery-item:hover .gallery-hover,
.gallery-item:focus-visible .gallery-hover {
    opacity: 1;
}

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(10,5,6,.95);
}

.gallery-lightbox.active {
    display: flex;
}

.lightbox-backdrop {
    position: absolute;
    inset: 0;
}

.lightbox-image-wrapper {
    position: relative;
    z-index: 1;
    width: min(1180px, 94vw);
    height: min(88vh, 900px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-image-wrapper img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 24px 80px rgba(0,0,0,.45);
}

body.gallery-lightbox-open {
    overflow: hidden;
}

/* Responsive gallery */
@media (max-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: minmax(190px, 22vw);
    }
    .gallery-item.gallery-item-1 {
        grid-column: span 2;
        grid-row: span 2;
    }
    .gallery-item.gallery-item-4 {
        grid-column: span 1;
    }
}

@media (max-width: 700px) {
    .gallery-container {
        padding-left: 0;
        padding-right: 0;
    }
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 180px;
        gap: 7px;
    }
    .gallery-item.gallery-item-1 {
        grid-column: span 2;
        grid-row: span 2;
    }
    .gallery-item.gallery-item-4 {
        grid-column: span 2;
    }
    .gallery-hover {
        opacity: 1;
        padding: 7px 10px;
        font-size: 8px;
    }
}

@media (max-width: 420px) {
    .gallery-grid {
        grid-auto-rows: 145px;
    }
}

/* =========================================================
RSVP
========================================================= */

.rsvp-section {

    background: var(--ivory);

}


.rsvp-card,
.wish-form-card {

    background: white;

    padding: 50px;

    border: 1px solid rgba(199,162,74,.3);

}


.form-group {

    margin-bottom: 25px;

}


.form-group label {

    display: block;

    font-size: 10px;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: 10px;

    color: #777;

}


.form-group input,
.form-group textarea,
.form-group select {

    width: 100%;

    border: 1px solid #ddd;

    padding: 15px;

    background: #fff;

    outline: none;

}


.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {

    border-color: var(--gold);

}


.attendance-options {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

}


.attendance-option {

    border: 1px solid #ddd;

    padding: 15px;

    cursor: pointer;

}


.attendance-option input {

    width: auto;

    margin-right: 10px;

}


.btn-submit {

    width: 100%;

    border: 0;

    padding: 17px;

    background: var(--maroon);

    color: var(--gold-light);

    letter-spacing: 2px;

    font-size: 10px;

    cursor: pointer;

}


/* =========================================================
GIFT
========================================================= */

.gift-section {

    background: var(--maroon);

    color: white;

}


.gift-list {

    display: grid;

    gap: 25px;

}


.gift-card {

    text-align: center;

    padding: 45px 30px;

    border: 1px solid rgba(199,162,74,.5);

    background: rgba(255,255,255,.03);

}


.gift-bank {

    font-size: 10px;

    letter-spacing: 4px;

    color: var(--gold);

}


.gift-number {

    font-family: var(--font-display);

    font-size: 32px;

    margin: 20px 0 10px;

}


.gift-name {

    font-family: var(--font-serif);

    font-size: 18px;

}


.copy-btn {

    margin-top: 25px;

    padding: 12px 25px;

    background: transparent;

    color: var(--gold);

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

    font-size: 10px;

    letter-spacing: 2px;

    cursor: pointer;

}


/* =========================================================
WISHES
========================================================= */

.wishes-section {

    background: var(--cream);

}


/* =========================================================
CLOSING
========================================================= */

.closing-section {

    position: relative;

    min-height: 700px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: white;

}


.closing-image {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            rgba(37,6,9,.85),
            rgba(37,6,9,.9)
        );

    background-size: cover;

    background-position: center;

}


.closing-content {

    position: relative;

    z-index: 2;

    max-width: 650px;

    padding: 40px 20px;

}


.closing-content > span {

    letter-spacing: 5px;

    font-size: 10px;

    color: var(--gold);

}


.closing-content h2 {

    font-family: var(--font-display);

    font-size: clamp(42px, 6vw, 70px);

    font-weight: 500;

    line-height: 1.1;

}


.closing-content p {

    font-family: var(--font-serif);

    font-size: 20px;

    line-height: 1.8;

}


.closing-names {

    font-family: var(--font-display);

    font-size: 45px;

    color: var(--gold-light);

    margin-top: 35px;

}


.closing-names span {

    font-family: var(--font-script);

}


.closing-date {

    letter-spacing: 2px;

    font-size: 12px !important;

}


/* =========================================================
FOOTER
========================================================= */

.site-footer {

    padding: 80px 20px;

    background: var(--maroon-deep);

    color: white;

    text-align: center;

}


.footer-monogram {

    font-family: var(--font-display);

    font-size: 45px;

    color: var(--gold);

}


.footer-monogram span {

    font-family: var(--font-script);

}


.site-footer > p {

    margin-top: 25px;

    letter-spacing: 3px;

    font-size: 10px;

    color: var(--gold);

}


.site-footer h3 {

    font-family: var(--font-display);

    font-weight: 500;

    font-size: 30px;

}


.footer-line {

    width: 60px;

    height: 1px;

    background: var(--gold);

    margin: 30px auto;

}


.site-footer small {

    color: rgba(255,255,255,.5);

}


/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .couple-heading-kicker {
        letter-spacing: .28em;
    }

    .couple-lineage-label {
        font-size: 12px;
    }


    .main-nav {

        position: fixed;

        top: 78px;

        left: 0;

        width: 100%;

        background: var(--maroon-dark);

        flex-direction: column;

        align-items: center;

        padding: 30px;

        gap: 22px;

        transform: translateY(-120%);

        transition: .3s;

        pointer-events: none;

    }


    .main-nav.active {

        transform: translateY(0);

        pointer-events: auto;

    }


    .mobile-menu {

        display: block;

    }


    .couple-grid {

        grid-template-columns: 1fr;

    }


    .couple-symbol {

        margin: -10px 0;

    }


    .gallery-grid {

        grid-template-columns: repeat(2, 1fr);

    }


    .story-card {

        grid-template-columns: 1fr;

    }


}


@media (max-width: 600px) {

    .section {

        padding: 80px 0;

    }


    .container {

        width: min(100% - 30px, 1180px);

    }


    .hero-section {

        min-height: 620px;

    }


    .countdown-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 30px 0;

    }


    .countdown-item:nth-child(2) {

        border-right: 0;

    }


    .event-card {

        grid-template-columns: 1fr;

    }


    .event-number {

        padding: 15px;

    }


    .event-content {

        padding: 35px 25px;

    }


    .event-content h3 {

        font-size: 30px;

    }


    .story-item {

        padding-left: 30px;

    }


    .story-year {

        position: relative;

        left: auto;

        width: auto;

        text-align: left;

        margin-bottom: 25px;

    }


    .rsvp-card,
    .wish-form-card {

        padding: 30px 20px;

    }


    .attendance-options {

        grid-template-columns: 1fr;

    }


    .gallery-grid {

        grid-auto-rows: 180px;

    }


    .gallery-item-2,
    .gallery-item-4 {

        grid-column: span 1;

    }

}



/* Couple parent hierarchy: label on its own line, parent names directly below. */
.couple-card .couple-lineage {
    display: block !important;
    width: 100%;
    margin-top: 18px;
    text-align: center;
}
.couple-card .couple-lineage-label {
    display: block !important;
    margin: 0 0 8px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-family: var(--font-serif) !important;
    font-weight: 400 !important;
    color: rgba(45,28,28,.72) !important;
}
.couple-card .couple-parent-names {
    display: block !important;
    margin: 0 !important;
    font-family: var(--font-serif) !important;
    font-size: 19px !important;
    line-height: 1.55 !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    white-space: normal;
}
@media (max-width: 700px) {
    .couple-card .couple-lineage-label { font-size: 12px !important; }
    .couple-card .couple-parent-names { font-size: 17px !important; }
}


/* =========================================================
   FINAL RESPONSIVE NORMALIZATION
   Keep the same visual composition across desktop / tablet / phone
   while scaling proportionally and preventing clipping.
========================================================= */

.opening-screen {
    min-height: 100vh;
    min-height: 100svh;
    height: 100dvh;
    overflow-y: auto;
}

.hero-section {
    min-height: 100svh;
}

@supports (height: 100dvh) {
    .opening-screen {
        min-height: 100dvh;
        height: 100dvh;
    }
}

.opening-background,
.hero-image {
    inset: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
}

.opening-cover-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.opening-content,
.hero-content {
    width: min(92vw, 760px);
    max-width: 760px;
    padding: clamp(22px, 4vw, 52px) 18px;
}

.opening-kicker,
.hero-kicker {
    font-size: clamp(9px, 1.05vw, 12px);
    line-height: 1.5;
    letter-spacing: clamp(2.5px, .45vw, 5px);
    margin-left: auto;
    margin-right: auto;
}

.opening-couple {
    font-size: clamp(38px, 7vw, 90px);
    line-height: 1.02;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.opening-date,
.hero-date {
    font-size: clamp(14px, 1.55vw, 22px) !important;
    line-height: 1.5;
    letter-spacing: clamp(1.5px, .25vw, 3px);
    white-space: normal;
}

.hero-content h1 {
    font-size: clamp(44px, 7.2vw, 96px);
    line-height: 1.02;
    max-width: 12ch;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
}

.couple-section .container {
    width: min(92vw, 1180px);
}

.couple-grid {
    align-items: start;
}

.couple-card {
    min-width: 0;
}

.couple-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.couple-lineage-label,
.couple-parent-names {
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .opening-pattern {
        inset: clamp(14px, 3vw, 30px);
    }

    .opening-content {
        width: min(92vw, 640px);
        padding-top: clamp(18px, 5vh, 38px);
    }

    .hero-content {
        padding-top: clamp(78px, 11vh, 110px);
        padding-bottom: clamp(24px, 4vh, 42px);
    }

    .couple-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(22px, 5vw, 70px);
    }

    .couple-symbol {
        margin: 0;
    }
}

@media (max-width: 700px) {
    .opening-screen {
        min-height: 100svh;
        height: 100svh;
    }

    .hero-section {
        min-height: 100svh;
        height: auto;
    }

    .opening-background,
    .hero-image {
        background-position: center center !important;
    }

    .opening-content {
        width: min(92vw, 560px);
        padding: 28px 12px;
    }

    .opening-kicker {
        margin-bottom: 14px;
    }

    .opening-couple {
        font-size: clamp(34px, 10.6vw, 58px);
        line-height: 1.04;
    }

    .hero-content h1 {
        font-size: clamp(38px, 10vw, 64px);
        max-width: 11ch;
    }

    .couple-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .couple-card .couple-lineage-label {
        font-size: 11px !important;
    }

    .couple-card .couple-parent-names {
        font-size: clamp(15px, 4vw, 19px) !important;
    }
}

@media (max-width: 480px) {
    .opening-pattern {
        inset: 10px;
    }

    .opening-content {
        width: min(88vw, 430px);
        padding: 14px 10px;
    }

    .opening-couple {
        font-size: clamp(30px, 9.8vw, 48px);
    }

    .opening-date {
        font-size: clamp(13px, 3.5vw, 17px) !important;
        letter-spacing: 1.8px;
    }
}


/* =========================================================
   COVER RESPONSIVE HARD FIX
   The opening layer must always cover the complete viewport.
   It must never inherit a half-width/contained layout from a parent.
========================================================= */
html, body {
    width: 100%;
    min-width: 100%;
    max-width: none;
}

body {
    overflow-x: hidden;
}

.opening-screen {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    min-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: auto !important;
    overscroll-behavior: contain;
}

@supports not (height: 100dvh) {
    .opening-screen {
        height: 100vh !important;
        min-height: 100vh !important;
    }
}

.opening-background {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-width: 100vw !important;
    max-width: none !important;
    z-index: 0 !important;
}

.opening-cover-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100% !important;
    max-width: none !important;
    min-width: 100vw !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 !important;
}

.opening-cover-overlay,
.opening-pattern {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.opening-pattern {
    inset: clamp(10px, 2.2vw, 30px) !important;
    width: auto !important;
    height: auto !important;
}

.opening-content {
    position: relative !important;
    z-index: 2 !important;
    width: min(90vw, 820px) !important;
    max-width: 820px !important;
    min-width: 0 !important;
    padding: clamp(22px, 4.5vh, 44px) clamp(16px, 3vw, 32px) !important;
    margin: 0 auto !important;
    align-self: center;
    flex: 0 1 auto;
}

.opening-ornament {
    margin-bottom: clamp(6px, 1.4vh, 14px) !important;
}

.opening-ornament span {
    font-size: clamp(58px, 7.6vh, 106px) !important;
    line-height: .82 !important;
    color: var(--gold-light) !important;
    font-weight: 400 !important;
}

.opening-kicker {
    font-size: clamp(9px, 1.15vw, 12px) !important;
    letter-spacing: clamp(2.5px, .45vw, 5px) !important;
    line-height: 1.45 !important;
    margin-bottom: clamp(12px, 2.2vh, 24px) !important;
}

.opening-couple {
    font-size: clamp(38px, 6.6vw, 88px) !important;
    line-height: 1.01 !important;
    margin: 0 !important;
    overflow-wrap: break-word !important;
}

.opening-couple span {
    font-size: .72em !important;
    margin: clamp(2px, .8vh, 8px) 0 !important;
}

.opening-line {
    width: clamp(56px, 6vw, 80px) !important;
    margin: clamp(14px, 2.4vh, 28px) auto !important;
}

.opening-greeting {
    font-size: clamp(14px, 1.35vw, 18px) !important;
    line-height: 1.45 !important;
    margin-bottom: 6px !important;
}

.btn-open {
    margin-top: clamp(18px, 2.8vh, 32px) !important;
    padding: clamp(12px, 1.8vh, 15px) clamp(24px, 4vw, 38px) !important;
    font-size: clamp(10px, 1.1vw, 12px) !important;
}

.opening-date {
    margin-top: clamp(16px, 2.8vh, 30px) !important;
    font-size: clamp(14px, 1.65vw, 20px) !important;
    line-height: 1.35 !important;
    letter-spacing: clamp(1.4px, .23vw, 3px) !important;
    font-weight: 500 !important;
    color: var(--gold-light) !important;
    white-space: normal !important;
}

/* Short desktop screens: scale the stack down instead of clipping it. */
@media (min-width: 701px) and (max-height: 820px) {
    .opening-content {
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }
    .opening-ornament span { font-size: 72px !important; }
    .opening-couple { font-size: clamp(42px, 5.7vw, 72px) !important; }
    .opening-line { margin: 16px auto !important; }
    .btn-open { margin-top: 20px !important; }
    .opening-date { margin-top: 16px !important; }
}

/* Phones / tablets: same visual composition, fluid scale, no width split. */
@media (max-width: 700px) {
    .opening-screen {
        align-items: center !important;
        justify-content: center !important;
    }
    .opening-content {
        width: min(91vw, 560px) !important;
        padding: clamp(18px, 4svh, 30px) 12px !important;
    }
    .opening-ornament span {
        font-size: clamp(58px, 10svh, 88px) !important;
    }
    .opening-couple {
        font-size: clamp(34px, 9.3vw, 58px) !important;
    }
    .opening-greeting {
        font-size: clamp(13px, 4vw, 16px) !important;
    }
    .opening-date {
        font-size: clamp(13px, 3.8vw, 18px) !important;
    }
}

@media (max-width: 420px) {
    .opening-content {
        width: 92vw !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .opening-ornament span { font-size: clamp(54px, 9svh, 76px) !important; }
    .opening-couple { font-size: clamp(31px, 9vw, 48px) !important; }
}

/* =========================================================
FINAL HEADER + MOBILE RESPONSIVE FIX
========================================================= */

:root{
    --header-height: 76px;
}

html{
    scroll-padding-top: calc(var(--header-height) + 18px);
}

body{
    overflow-x: hidden;
}

/* Hide navigation completely while the invitation cover is active. */
body.invitation-open .site-header{
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Header is always fixed after the opening screen is dismissed. */
.site-header,
.site-header.scrolled{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--header-height) !important;
    background: rgba(43,6,9,.96) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 5px 25px rgba(0,0,0,.18);
    z-index: 10000 !important;
}

.nav-container{
    width: min(1180px, calc(100% - 32px)) !important;
    height: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
}

.nav-brand{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-width: 72px !important;
    margin: 0 !important;
    line-height: 1 !important;
    color: var(--gold-light) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.nav-brand > span{
    display: inline-block;
}

.brand-amp{
    margin: 0 4px !important;
    padding: 0 !important;
}

.main-nav{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(14px, 2vw, 25px) !important;
    margin-left: auto !important;
}

.main-nav a{
    white-space: nowrap !important;
}

.mobile-menu{
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    padding: 8px !important;
    margin: 0 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
}

.mobile-menu span{
    width: 24px !important;
    height: 1px !important;
    margin: 4px 0 !important;
}

/* Keep every anchor target visible below the fixed header. */
section[id],
main [id]{
    scroll-margin-top: calc(var(--header-height) + 20px);
}

/* Never show a broken-image alt label such as "Cover". */
.opening-cover-image{
    font-size: 0 !important;
    color: transparent !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.opening-background{
    background-color: var(--maroon-deep) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
}

.opening-content{
    box-sizing: border-box !important;
}

@media (max-width: 900px){
    :root{ --header-height: 70px; }

    .nav-container{
        width: calc(100% - 28px) !important;
    }

    .main-nav{
        position: fixed !important;
        top: var(--header-height) !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-height: calc(100vh - var(--header-height) - 24px) !important;
        overflow-y: auto !important;
        background: rgba(43,6,9,.985) !important;
        border: 1px solid rgba(199,162,74,.22) !important;
        box-shadow: 0 15px 35px rgba(0,0,0,.28) !important;
        border-radius: 0 0 10px 10px !important;
        padding: 18px 16px !important;
        gap: 0 !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        transform: translateY(-120%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .main-nav.active{
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .main-nav a{
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px 10px !important;
        text-align: center !important;
        font-size: 11px !important;
        letter-spacing: 2px !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
    }

    .main-nav a:last-child{
        border-bottom: 0 !important;
    }

    .mobile-menu{
        display: inline-flex !important;
    }

    .site-header{
        height: var(--header-height) !important;
    }

    .nav-brand{
        font-size: 22px !important;
    }
}

@media (max-width: 480px){
    :root{ --header-height: 66px; }

    .nav-container{
        width: calc(100% - 20px) !important;
    }

    .nav-brand{
        min-width: auto !important;
        font-size: 20px !important;
    }

    .mobile-menu{
        width: 42px !important;
        height: 42px !important;
    }

    /* Prevent the opening stack from being wider than the phone. */
    .opening-content{
        width: min(88vw, 430px) !important;
        max-width: calc(100vw - 32px) !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .opening-kicker{
        font-size: clamp(8px, 2.4vw, 10px) !important;
        letter-spacing: clamp(2px, .9vw, 3.6px) !important;
    }

    .opening-couple{
        font-size: clamp(32px, 9.5vw, 49px) !important;
        line-height: 1.03 !important;
    }

    .opening-greeting{
        max-width: 88vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: clamp(13px, 3.8vw, 16px) !important;
    }

    .btn-open{
        min-width: 190px !important;
    }

    .opening-date{
        font-size: clamp(13px, 3.6vw, 17px) !important;
    }
}

/* =========================================================
   MOBILE / TABLET COVER ONLY
   Do not change desktop layout. The desktop opening remains
   exactly as before; smaller screens get the same backend cover
   through a CSS background fallback as well as the <img> layer.
========================================================= */
@media (max-width: 900px) {
    .opening-screen {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        height: 100svh !important;
        min-height: 100svh !important;
        max-height: none !important;
        position: fixed !important;
        inset: 0 !important;
        overflow: hidden !important;
    }

    .opening-background {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        background-image: var(--opening-cover-url) !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: center center !important;
        background-color: var(--maroon-deep) !important;
    }

    .opening-cover-image {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        background: transparent !important;
    }

    .opening-cover-overlay {
        z-index: 1 !important;
    }

    .opening-pattern {
        z-index: 2 !important;
    }

    .opening-content {
        position: relative !important;
        z-index: 3 !important;
        box-sizing: border-box !important;
        width: min(92vw, 640px) !important;
        max-width: calc(100vw - 28px) !important;
        min-width: 0 !important;
        margin: 0 auto !important;
    }
}

/* =========================================================
   MOBILE/TABLET + STICKY HEADER FINAL PATCH
   Desktop layout is intentionally left untouched except for
   the requested transparent state while scrolling.
========================================================= */

/* Requested: sticky header becomes transparent on every device
   once the invitation is opened and the page has been scrolled. */
.site-header.scrolled {
    background: rgba(43, 6, 9, 0.14) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: none !important;
}

.site-header.scrolled .nav-brand,
.site-header.scrolled .main-nav a,
.site-header.scrolled .mobile-menu span {
    color: var(--gold-light) !important;
}

/* Keep the cover image visible on mobile/tablet even when the
   image element itself fails to load. The CSS variable is filled
   from the backend cover_image URL. */
.opening-background {
    isolation: isolate;
}

.opening-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--opening-cover-url);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.opening-cover-image,
.opening-cover-overlay,
.opening-pattern {
    z-index: 1;
}

.opening-cover-overlay,
.opening-pattern {
    pointer-events: none;
}

.opening-content {
    z-index: 2 !important;
}

/* Tablet: preserve the original desktop couple composition while
   allowing both portraits to shrink proportionally. */
@media (min-width: 701px) and (max-width: 1100px) {
    .couple-grid {
        grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr) !important;
        gap: 22px !important;
    }

    .couple-image {
        width: min(100%, 320px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .couple-info h3 {
        font-size: clamp(27px, 4vw, 34px) !important;
        line-height: 1.15 !important;
    }

    .couple-role {
        font-size: 13px !important;
        letter-spacing: 3px !important;
    }

    .couple-lineage-label {
        font-size: 13px !important;
    }

    .couple-parent-names {
        font-size: 17px !important;
        line-height: 1.45 !important;
    }

    .couple-ampersand span {
        font-size: clamp(3.1rem, 5vw, 4.6rem) !important;
    }
}

/* Phone/tablet: same couple composition, responsive 3-column grid
   so the ampersand stays between bride and groom instead of dropping. */
@media (max-width: 700px) {
    .opening-background {
        background-image: var(--opening-cover-url) !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: center center !important;
    }

    .opening-background::before {
        background-position: center center;
    }

    .opening-cover-image {
        display: block !important;
        opacity: .68 !important;
    }

    .couple-grid {
        grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: start !important;
    }

    .couple-image {
        width: 100% !important;
        max-width: 240px !important;
        aspect-ratio: 3 / 4 !important;
        margin: 0 auto 22px !important;
    }

    .couple-info h3 {
        font-size: clamp(22px, 6.6vw, 31px) !important;
        line-height: 1.12 !important;
        margin: 12px 0 !important;
    }

    .couple-role {
        font-size: clamp(9px, 2.8vw, 12px) !important;
        letter-spacing: .20em !important;
    }

    .couple-lineage {
        margin-top: 16px !important;
    }

    .couple-lineage-label {
        font-size: clamp(10px, 2.9vw, 12px) !important;
        line-height: 1.35 !important;
        margin-bottom: 7px !important;
    }

    .couple-parent-names {
        font-size: clamp(12px, 3.5vw, 17px) !important;
        line-height: 1.4 !important;
        font-weight: 700 !important;
        overflow-wrap: anywhere !important;
    }

    .couple-ampersand {
        align-self: center !important;
        transform: translateY(0) !important;
    }

    .couple-ampersand span {
        font-size: clamp(2.6rem, 9vw, 4rem) !important;
    }
}

@media (max-width: 420px) {
    .couple-grid {
        grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .couple-image {
        max-width: 165px !important;
        margin-bottom: 18px !important;
    }

    .couple-info h3 {
        font-size: clamp(20px, 6.2vw, 27px) !important;
    }

    .couple-parent-names {
        font-size: clamp(11px, 3.2vw, 15px) !important;
    }

    .couple-ampersand span {
        font-size: clamp(2.4rem, 8vw, 3.2rem) !important;
    }
}

/* Mobile menu remains readable while the sticky header itself is transparent. */
@media (max-width: 900px) {
    .site-header.scrolled .main-nav.active {
        background: rgba(37, 6, 9, .96) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }

    .site-header.scrolled .mobile-menu span {
        background: var(--gold) !important;
    }
}


/* =========================================================
   SMARTPHONE COVER IMAGE ONLY — isolated fix
   Do not alter desktop/tablet styling or typography.
   On small phones, render the backend cover as a dedicated
   viewport-sized image layer so it cannot disappear behind
   the opening background/stacking context.
========================================================= */
@media (max-width: 600px) {
    #openingScreen .opening-background {
        position: absolute !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100% !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        background-color: var(--maroon-deep) !important;
        background-image: var(--opening-cover-url) !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: cover !important;
        z-index: 0 !important;
    }

    #openingScreen .opening-cover-image {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100% !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        object-fit: cover !important;
        object-position: center center !important;
        opacity: .68 !important;
        visibility: visible !important;
        z-index: 0 !important;
    }

    #openingScreen .opening-cover-overlay {
        z-index: 1 !important;
    }

    #openingScreen .opening-pattern {
        z-index: 2 !important;
    }

    #openingScreen .opening-content {
        position: relative !important;
        z-index: 3 !important;
    }
}

/* =========================================================
   MOBILE COVER SOURCE FIX — COVER ONLY
   Desktop/tablet styles are intentionally untouched.
   The phone gets the same backend cover through cover.php,
   which reads the invitation's actual cover file server-side.
========================================================= */
.opening-mobile-cover{display:none !important;}
@media (max-width: 600px){
    #openingScreen .opening-cover-image{display:none !important;}
    #openingScreen .opening-mobile-cover{
        display:block !important;
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        min-width:100% !important;
        max-width:none !important;
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
        object-fit:cover !important;
        object-position:center center !important;
        opacity:.68 !important;
        visibility:visible !important;
        z-index:0 !important;
        font-size:0 !important;
        color:transparent !important;
    }
    #openingScreen .opening-cover-overlay{z-index:1 !important;}
    #openingScreen .opening-pattern{z-index:2 !important;}
    #openingScreen .opening-content{z-index:3 !important;}
}

/* =========================================================
   AURIELLE BOTANICAL — ORIGINAL INVITELLE ART DIRECTION
   Inspired by layered editorial botanical invitations.
   This block intentionally overrides the legacy visual skin
   while preserving all existing Invitelle functions/markup.
========================================================= */
:root{
 --maroon:#6f765c;--maroon-dark:#343a2d;--maroon-deep:#20251d;
 --red:#846c59;--gold:#b79778;--gold-light:#d8c0a9;--gold-soft:#efe3d6;
 --cream:#f5f0e8;--ivory:#fffdf9;--text:#403d36;--white:#fff;
 --font-display:"Cormorant Garamond",serif;--font-serif:"Cormorant Garamond",serif;
 --font-body:"DM Sans",sans-serif;
}
body{background:#f5f0e8;color:#403d36;background-image:radial-gradient(circle at 10% 20%,rgba(123,130,102,.08),transparent 32%),radial-gradient(circle at 90% 70%,rgba(183,151,120,.08),transparent 30%)}
.opening-screen{background:#e9e1d5;color:#3f4436}
.opening-cover-image{opacity:.44;filter:saturate(.76) contrast(.92) brightness(1.08)}
.opening-cover-overlay{background:linear-gradient(180deg,rgba(239,233,223,.56),rgba(224,214,199,.72)),radial-gradient(circle at center,rgba(255,255,255,.16),rgba(73,78,60,.12))}
.opening-pattern{inset:22px;border:1px solid rgba(92,101,75,.32)}
.opening-pattern:before{border-color:rgba(183,151,120,.32)}
.opening-content:before,.opening-content:after{content:"";position:absolute;width:min(46vw,320px);aspect-ratio:1;background:url("assets/botanical-corner.svg") center/contain no-repeat;z-index:-1;opacity:.9;pointer-events:none;animation:botanicalFloat 7s ease-in-out infinite alternate}
.opening-content:before{left:-22vw;top:-18vh;transform:rotate(8deg)}
.opening-content:after{right:-21vw;bottom:-19vh;transform:rotate(188deg);animation-delay:-2.3s}
.opening-kicker,.opening-greeting,.opening-date{color:#5d624f!important;letter-spacing:.22em}
.opening-couple{color:#353b30!important;text-shadow:none!important;font-weight:500!important;line-height:.9!important}
.opening-line{background:#b79778!important}
.btn-open{background:#6f765c!important;color:#fff!important;border:1px solid #6f765c!important;box-shadow:0 14px 36px rgba(52,58,45,.18)!important;border-radius:999px!important;letter-spacing:.16em!important}
.btn-open:hover{background:#4e5543!important;transform:translateY(-2px)}
.site-header{background:rgba(250,247,241,.9)!important;backdrop-filter:blur(18px);border-bottom:1px solid rgba(183,151,120,.18)!important}
.site-header.scrolled{box-shadow:0 10px 30px rgba(65,61,54,.08)!important}
.nav-brand,.main-nav a{color:#4a4e40!important}
.hero-section{min-height:100svh;background:#d9d3c8;overflow:hidden}
.hero-image{filter:saturate(.72) sepia(.06) brightness(.82);transform:scale(1.03);animation:heroBreath 14s ease-in-out infinite alternate}
.hero-overlay{background:linear-gradient(180deg,rgba(35,39,31,.15),rgba(35,39,31,.58)),linear-gradient(90deg,rgba(35,39,31,.22),transparent 60%)!important}
.hero-content{max-width:780px!important}
.hero-content:before{content:"";position:absolute;width:min(43vw,360px);aspect-ratio:1;background:url("assets/floral-medallion.svg") center/contain no-repeat;left:50%;top:48%;transform:translate(-50%,-50%);opacity:.22;z-index:-1;animation:slowSpin 35s linear infinite}
.hero-kicker,.hero-date,.hero-location{letter-spacing:.2em!important}
.hero-title,.hero-content h1{font-family:var(--font-display)!important;font-weight:500!important;letter-spacing:-.04em!important}
.section{position:relative;overflow:hidden}
.section:before{content:"";position:absolute;width:260px;aspect-ratio:1;background:url("assets/botanical-corner.svg") center/contain no-repeat;opacity:.17;pointer-events:none;left:-115px;top:24px}
.section:nth-of-type(even):before{left:auto;right:-120px;transform:scaleX(-1)}
.section-heading span{color:#7a8068!important;letter-spacing:.22em!important}
.section-heading h2{font-family:var(--font-display)!important;color:#3d4136!important;font-size:clamp(2.6rem,8vw,5.5rem)!important;font-weight:500!important;letter-spacing:-.04em!important}
.section-heading p,.intro-text{color:#6c6a62!important}
.gold-symbol{color:#b79778!important}
.couple-section{background:linear-gradient(180deg,#f7f3ed,#ede7dd)!important}
.couple-grid{gap:clamp(28px,5vw,68px)!important;align-items:center}
.couple-card{background:rgba(255,255,255,.56)!important;border:1px solid rgba(183,151,120,.24)!important;box-shadow:0 26px 70px rgba(71,67,58,.08)!important;padding:18px!important;border-radius:190px 190px 28px 28px!important;overflow:hidden}
.couple-image{border-radius:180px 180px 18px 18px!important;overflow:hidden!important;aspect-ratio:4/5!important}
.couple-image img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .8s;filter:saturate(.82)}
.couple-card:hover .couple-image img{transform:scale(1.045);filter:saturate(1)}
.couple-info{padding:26px 14px 12px!important}
.couple-info h3{font-family:var(--font-display)!important;font-size:clamp(2.2rem,6vw,3.9rem)!important;color:#3f4338!important;font-weight:500!important}
.couple-symbol{color:#b79778!important;font-family:var(--font-display)!important}
.countdown-section{background:#6f765c!important;color:#fff!important;position:relative}
.countdown-section:before{content:"";position:absolute;inset:0;background:url("assets/floral-medallion.svg") center/430px no-repeat;opacity:.12}
.countdown-item{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:999px!important;aspect-ratio:1!important;display:flex!important;flex-direction:column!important;justify-content:center!important;backdrop-filter:blur(6px)}
.countdown-item strong{font-family:var(--font-display)!important;font-weight:500!important}
.events-section{background:#f7f3ed!important}
.event-card{background:#fffdf9!important;border:1px solid rgba(183,151,120,.22)!important;box-shadow:0 20px 54px rgba(68,64,55,.07)!important;border-radius:30px!important;overflow:hidden;position:relative}
.event-card:after{content:"";position:absolute;width:150px;aspect-ratio:1;background:url("assets/botanical-corner.svg") center/contain no-repeat;right:-42px;bottom:-45px;opacity:.15;pointer-events:none}
.event-number{color:#d9c9ba!important}
.btn-gold-outline,.btn-gold,.copy-btn,.btn-submit{border-radius:999px!important;letter-spacing:.12em!important}
.btn-gold,.btn-submit{background:#6f765c!important;border-color:#6f765c!important;color:#fff!important}
.btn-gold-outline,.copy-btn{border-color:#9c856f!important;color:#75614f!important;background:transparent!important}
.location-section{background:#343a2d!important}
.location-section:before,.gallery-section:before,.gift-section:before{opacity:.09;filter:brightness(2)}
.gallery-section{background:#343a2d!important}
.gallery-grid{gap:12px!important}
.gallery-item{border-radius:26px!important;overflow:hidden!important;box-shadow:none!important}
.gallery-item img{transition:transform 1s cubic-bezier(.2,.7,.2,1),filter .8s;filter:saturate(.8)}
.gallery-item:hover img{transform:scale(1.06);filter:saturate(1)}
.rsvp-section,.wishes-section{background:#f7f3ed!important}
.rsvp-card,.wish-form-card{background:rgba(255,253,249,.83)!important;border:1px solid rgba(183,151,120,.25)!important;border-radius:30px!important;box-shadow:0 30px 70px rgba(68,64,55,.08)!important;backdrop-filter:blur(12px)}
.form-group input,.form-group textarea,.form-group select{border-radius:16px!important;border-color:rgba(111,118,92,.23)!important;background:#fff!important}
.gift-section{background:#40473a!important}
.gift-card{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:28px!important;backdrop-filter:blur(12px)}
.closing-section:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,47,37,.2),rgba(42,47,37,.72));pointer-events:none}
.closing-content{z-index:2!important}
.closing-names{font-family:var(--font-display)!important;font-weight:500!important}
.site-footer{background:#252a21!important;color:#eae5dc!important}
.music-toggle{background:#6f765c!important;border:1px solid rgba(255,255,255,.35)!important;box-shadow:0 10px 30px rgba(32,37,29,.22)!important}

/* cinematic scroll reveal */
.reveal-ready{opacity:0;transform:translateY(34px) scale(.985);filter:blur(4px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1),filter 1s ease}
.reveal-ready.reveal-in{opacity:1;transform:none;filter:none}
.reveal-delay-1{transition-delay:.08s}.reveal-delay-2{transition-delay:.16s}.reveal-delay-3{transition-delay:.24s}
.botanical-drift{animation:botanicalFloat 6s ease-in-out infinite alternate}
@keyframes botanicalFloat{from{translate:0 -5px;rotate:-1deg}to{translate:0 8px;rotate:1.4deg}}
@keyframes heroBreath{0%{transform:scale(1.03) translate3d(0,0,0)}100%{transform:scale(1.09) translate3d(0,-1.2%,0)}}
@keyframes slowSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(max-width:768px){
 .site-header{display:none!important}
 .opening-content:before{left:-35vw;top:-12vh}.opening-content:after{right:-34vw;bottom:-14vh}
 .couple-card{border-radius:150px 150px 24px 24px!important}
 .section:before{width:190px;left:-95px}.section:nth-of-type(even):before{right:-98px}
 .countdown-grid{gap:8px!important}.countdown-item{padding:10px 4px!important}
 .hero-section{min-height:100svh}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}.reveal-ready{opacity:1!important;transform:none!important;filter:none!important}}


/* =========================================================
   V25.5 — AURIELLE GARDEN ESTATE EDITION
   Original Invitelle composition inspired by romantic botanical estate invitations.
   No third-party artwork/assets are copied.
========================================================= */
:root{
  --aurielle-ivory:#f6f1e7;
  --aurielle-paper:#efe6d7;
  --aurielle-cream:#fbf7ef;
  --aurielle-sage:#536b5b;
  --aurielle-forest:#355043;
  --aurielle-bronze:#9a6947;
  --aurielle-gold:#b58d4e;
  --aurielle-ink:#544237;
}

/* botanical glass treatment */
.opening-content,.couple-card,.event-card,.gift-card,.story-card,.rsvp-card,.comments-card,.location-card{
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.opening-ornament span,.gold-symbol{font-family:Georgia,serif!important;color:var(--aurielle-gold)!important}

/* Desktop presentation mirrors a luxury invitation canvas: static visual stage + scrollable paper panel. */
@media (min-width:1100px){
  body{background:var(--aurielle-paper)!important;overflow-x:hidden}
  body::before{
    content:"";position:fixed;inset:0 auto 0 0;width:56vw;z-index:-3;
    background:
      linear-gradient(180deg,rgba(250,247,239,.18),rgba(38,55,43,.12)),
      var(--aurielle-cover) center/cover no-repeat;
    filter:saturate(.82) sepia(.10);
  }
  body::after{
    content:"";position:fixed;left:0;bottom:0;width:56vw;height:42vh;z-index:-2;pointer-events:none;
    background:
      radial-gradient(ellipse at 12% 100%,rgba(255,255,255,.98) 0 7%,transparent 8%),
      radial-gradient(ellipse at 28% 100%,rgba(230,235,222,.96) 0 9%,transparent 10%),
      radial-gradient(ellipse at 47% 100%,rgba(255,255,255,.96) 0 8%,transparent 9%),
      radial-gradient(ellipse at 68% 100%,rgba(220,230,214,.93) 0 10%,transparent 11%),
      radial-gradient(ellipse at 88% 100%,rgba(255,255,255,.96) 0 8%,transparent 9%),
      linear-gradient(0deg,rgba(70,101,77,.56),rgba(70,101,77,0));
    opacity:.95;
  }
  .site-header{left:56vw!important;width:44vw!important;right:0!important;background:rgba(249,244,235,.92)!important;border-bottom:1px solid rgba(123,91,62,.12)}
  .nav-container{max-width:none!important;padding:0 28px!important}
  .main-nav{gap:16px!important}.main-nav a{font-size:10px!important;letter-spacing:.12em!important}
  main{margin-left:56vw!important;width:44vw!important;background:var(--aurielle-cream)!important;box-shadow:-24px 0 70px rgba(75,56,41,.13);position:relative;z-index:1}
  main>section{min-height:auto!important;padding-left:44px!important;padding-right:44px!important}
  .music-toggle{right:28px!important}
  .opening-screen{display:grid!important;grid-template-columns:56vw 44vw!important;background:var(--aurielle-paper)!important}
  .opening-background{grid-column:1!important;position:relative!important;inset:auto!important;width:56vw!important;height:100vh!important;overflow:hidden}
  .opening-cover-image,.opening-mobile-cover{width:100%!important;height:100%!important;object-fit:cover!important;filter:saturate(.78) sepia(.12) brightness(1.03)!important}
  .opening-cover-overlay{background:linear-gradient(180deg,rgba(241,235,223,.12),rgba(45,60,48,.10))!important}
  .opening-background::before,.opening-background::after{
    content:"";position:absolute;z-index:4;pointer-events:none;width:38%;height:100%;top:0;
    background:
      radial-gradient(ellipse at 15% 18%,rgba(255,255,255,.92) 0 4%,transparent 5%),
      radial-gradient(ellipse at 30% 26%,rgba(234,239,226,.95) 0 5%,transparent 6%),
      radial-gradient(ellipse at 19% 41%,rgba(255,255,255,.9) 0 5%,transparent 6%),
      linear-gradient(90deg,rgba(73,105,79,.42),transparent 75%);
    opacity:.85;
  }
  .opening-background::before{left:0}
  .opening-background::after{right:0;transform:scaleX(-1)}
  .opening-content{
    grid-column:2!important;position:relative!important;inset:auto!important;height:100vh!important;width:auto!important;
    display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;
    background:rgba(248,243,234,.90)!important;color:var(--aurielle-ink)!important;padding:48px 54px!important;
    box-shadow:-20px 0 70px rgba(65,44,30,.08)
  }
  .opening-content::before{
    content:"";position:absolute;inset:22px;border:1px solid rgba(159,116,73,.28);border-radius:2px;pointer-events:none
  }
  .opening-content::after{
    content:"";position:absolute;inset:7% 12%;border-radius:52% 52% 48% 48%/42% 42% 58% 58%;background:rgba(255,255,255,.28);border:1px solid rgba(181,141,78,.18);z-index:-1
  }
  .opening-couple{font-size:clamp(42px,4vw,72px)!important;line-height:.98!important;color:var(--aurielle-forest)!important;text-shadow:none!important}
  .opening-kicker,.opening-date,.opening-greeting{color:var(--aurielle-ink)!important}
  .btn-open{background:var(--aurielle-bronze)!important;color:#fff!important;border-color:var(--aurielle-bronze)!important;box-shadow:0 10px 30px rgba(130,82,48,.16)!important}
  .hero-section{min-height:86vh!important}
  .hero-title{font-size:clamp(48px,5vw,76px)!important}
}

/* Elegant estate / botanical details on all sizes */
.hero-section,.couple-section,.events-section,.gallery-section,.story-section,.gift-section,.comments-section,.closing-section{position:relative;overflow:hidden}
.hero-section::before,.couple-section::before,.events-section::before,.story-section::before,.closing-section::before{
  content:"";position:absolute;width:230px;height:230px;border:1px solid rgba(79,105,86,.18);border-radius:58% 42% 64% 36%;transform:rotate(24deg);pointer-events:none
}
.hero-section::before{right:-120px;top:16%}.couple-section::before{left:-145px;top:8%}.events-section::before{right:-140px;bottom:5%}.story-section::before{left:-140px;bottom:8%}.closing-section::before{right:-130px;top:8%}
.section-heading span,.hero-kicker,.opening-kicker{letter-spacing:.28em!important;text-transform:uppercase}
.section-heading h2,.hero-title,.opening-couple,.couple-name{font-family:"Cormorant Garamond",Georgia,serif!important;font-weight:500!important}

@media (max-width:1099px){
  body{background:var(--aurielle-cream)!important}
  .opening-content{background:linear-gradient(180deg,rgba(248,243,234,.34),rgba(248,243,234,.72))!important}
  .opening-ornament span{font-size:34px!important}
  .opening-couple{color:#fff!important;text-shadow:0 2px 22px rgba(0,0,0,.32)!important}
}


/* =========================================================
   V25.7 AURIELLE SUPER PREMIUM MOTION
   Original botanical motion system: falling leaves, breathing florals,
   paper-glass depth and cinematic hyperlapse-style image movement.
========================================================= */
body{overflow-x:hidden}.opening-screen,.hero-section,.couple-section,.events-section,.gallery-section,.closing-section{isolation:isolate}.aurielle-motion-layer{position:fixed;inset:0;pointer-events:none;z-index:999;overflow:hidden}.aurielle-leaf{position:absolute;top:-12vh;width:18px;height:34px;border-radius:90% 10% 90% 10%;background:linear-gradient(145deg,rgba(113,126,86,.72),rgba(208,196,156,.38));box-shadow:inset -2px -2px 5px rgba(57,67,46,.18);opacity:.72;filter:blur(.05px);animation:aurielleFall var(--fall,11s) linear infinite,aurielleFlutter var(--flutter,2.8s) ease-in-out infinite;transform-origin:50% 20%}.aurielle-leaf.gold{background:linear-gradient(145deg,rgba(190,151,86,.75),rgba(235,218,171,.32))}.aurielle-leaf.small{width:11px;height:23px;opacity:.58}@keyframes aurielleFall{0%{transform:translate3d(var(--x0,0),-10vh,0) rotate(0deg);opacity:0}8%{opacity:.72}100%{transform:translate3d(var(--x1,90px),115vh,0) rotate(520deg);opacity:.12}}@keyframes aurielleFlutter{0%,100%{margin-left:-12px;rotate:-8deg}50%{margin-left:16px;rotate:14deg}}
.opening-pattern:before,.opening-pattern:after{content:"";position:absolute;width:clamp(180px,26vw,420px);aspect-ratio:1;background:url('assets/botanical-corner.svg') center/contain no-repeat;opacity:.52;filter:drop-shadow(0 18px 25px rgba(44,48,35,.12));animation:aurielleFloralSway 6.5s ease-in-out infinite alternate;transform-origin:bottom center}.opening-pattern:before{left:-5vw;bottom:-3vw}.opening-pattern:after{right:-5vw;top:-2vw;transform:rotate(180deg);animation-delay:-2s}@keyframes aurielleFloralSway{from{translate:-5px 3px;rotate:-1.4deg}to{translate:7px -5px;rotate:2.2deg}}
.opening-cover-image,.opening-mobile-cover{animation:aurielleHyperlapse 18s ease-in-out infinite alternate;will-change:transform,object-position}@keyframes aurielleHyperlapse{0%{transform:scale(1.02) translate3d(-.6%,0,0);filter:saturate(.92) contrast(1.02)}50%{transform:scale(1.10) translate3d(.8%,-.6%,0);filter:saturate(1.02) contrast(1.04)}100%{transform:scale(1.05) translate3d(-.4%,.4%,0);filter:saturate(.96) contrast(1.03)}}
.hero-image{animation:aurielleHeroDrift 22s ease-in-out infinite alternate;will-change:transform}@keyframes aurielleHeroDrift{from{transform:scale(1.015) translate3d(-.3%,0,0)}to{transform:scale(1.08) translate3d(.6%,-.4%,0)}}
.couple-card:before,.event-card:before,.gift-card:before,.rsvp-card:before{content:"";position:absolute;inset:10px;border:1px solid rgba(194,161,109,.22);border-radius:inherit;pointer-events:none}.couple-card,.event-card,.gift-card,.rsvp-card{position:relative;overflow:hidden}.gallery-item img{transition:transform 1.3s cubic-bezier(.2,.7,.2,1),filter .8s}.gallery-item:hover img{transform:scale(1.07);filter:saturate(1.06)}
@media(prefers-reduced-motion:reduce){.aurielle-leaf,.opening-pattern:before,.opening-pattern:after,.opening-cover-image,.opening-mobile-cover,.hero-image{animation:none!important}}


/* =========================================================
   V25.9 AURIELLE DESKTOP COMPOSITION FIX
   Keep the estate split-screen concept, but constrain every section to
   the paper panel so typography/media never clip outside the panel.
========================================================= */
@media (min-width:1100px){
  body{position:relative!important;background:var(--aurielle-paper)!important}
  body::before{z-index:0!important;opacity:1!important;pointer-events:none!important}
  body::after{z-index:1!important;pointer-events:none!important}
  .aurielle-motion-layer{z-index:8!important}
  .site-header{z-index:9!important}
  main{z-index:3!important;overflow:hidden!important;min-height:100vh!important}
  main>section{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;padding-left:34px!important;padding-right:34px!important}
  main .container,main .section-container,main .couple-container,main .events-container,main .gallery-container{width:100%!important;max-width:100%!important;padding-left:0!important;padding-right:0!important}
  .hero-content,.section-heading{max-width:100%!important}
  .hero-content h1,.hero-title{font-size:clamp(38px,3.5vw,58px)!important;line-height:1.02!important;overflow-wrap:anywhere}
  .section-heading h2{font-size:clamp(34px,3.2vw,54px)!important;line-height:1.02!important;overflow-wrap:anywhere}
  .couple-grid{grid-template-columns:1fr!important;gap:28px!important;max-width:520px!important;margin:0 auto!important}
  .couple-card{width:100%!important;max-width:100%!important;overflow:hidden!important;border-radius:180px 180px 28px 28px!important}
  .couple-image{width:100%!important;aspect-ratio:4/5!important;overflow:hidden!important;border-radius:170px 170px 18px 18px!important;background:#ede7dc!important}
  .couple-image img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center top!important;background:#ede7dc!important}
  .couple-info h3,.couple-name{font-size:clamp(34px,3vw,50px)!important;overflow-wrap:anywhere}
  .events-grid,.event-grid{grid-template-columns:1fr!important}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .gift-grid,.rsvp-grid,.comments-grid{grid-template-columns:1fr!important}
  .opening-screen{z-index:9999!important}
  .opening-background{z-index:1!important;background:var(--aurielle-cover) center/cover no-repeat!important}
  .opening-cover-image{display:block!important;opacity:1!important;z-index:1!important}
  .opening-content{z-index:3!important;overflow:hidden!important}
}
@media (max-width:1099px){
  main{width:100%!important;margin:0!important;overflow:hidden!important}
  .couple-grid{max-width:860px!important;margin:auto!important}
  .couple-card{overflow:hidden!important}
  .couple-image{aspect-ratio:4/5!important;overflow:hidden!important}
  .couple-image img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center top!important;background:#eee7dc!important}
}
.site-footer{margin:0!important}
.closing-section+*{margin-top:0!important}

/* =========================================================
   V25.10 — AURIELLE FINAL LAYOUT GUARD
   Presentation-only constraints so every optional section, footer and demo
   branding stays inside the right invitation canvas on desktop.
========================================================= */
@media (min-width:1100px){
  body{overflow-x:hidden!important}
  main{margin-left:56vw!important;width:44vw!important;max-width:44vw!important;overflow:hidden!important}
  main>section,.v8-public-section,.inv-couple-social{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;box-sizing:border-box!important}
  .v8-public-section{padding-left:34px!important;padding-right:34px!important}
  .v8-public-section h2{font-size:clamp(30px,2.8vw,44px)!important;overflow-wrap:anywhere!important}
  .v8-live-grid{grid-template-columns:1fr!important}.v8-feature-card{min-width:0!important}.v8-feature-card strong{font-size:22px!important;overflow-wrap:anywhere!important}
  .inv-couple-social-inner{grid-template-columns:1fr!important;max-width:100%!important}.inv-couple-social{padding-left:34px!important;padding-right:34px!important}
  .site-footer{width:44vw!important;max-width:44vw!important;margin:0 0 0 56vw!important;padding-left:34px!important;padding-right:34px!important;box-sizing:border-box!important;overflow:hidden!important}
  .site-footer h3,.footer-monogram{overflow-wrap:anywhere!important;word-break:normal!important}
  .invitelle-demo-brand{width:44vw!important;max-width:44vw!important;margin-left:56vw!important;box-sizing:border-box!important}
  .closing-section{margin-bottom:0!important}
  .closing-section+.site-footer{margin-top:0!important}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.gallery-item{min-width:0!important}
  .events-grid,.event-grid,.gift-grid,.rsvp-grid,.comments-grid,.story-grid{grid-template-columns:1fr!important}
  .event-card,.gift-card,.rsvp-card,.story-card,.comments-card,.location-card{min-width:0!important;max-width:100%!important;overflow:hidden!important}
  .event-card h3,.gift-card h3,.story-card h3{overflow-wrap:anywhere!important}
  .video-section iframe,.video-section video,.our-film iframe,.our-film video{width:100%!important;max-width:100%!important;height:auto!important;aspect-ratio:16/9!important}
}
@media (max-width:1099px){
  .site-footer,.invitelle-demo-brand{width:100%!important;max-width:100%!important;margin-left:0!important}
  .v8-public-section,.inv-couple-social{width:100%!important;max-width:100%!important}
}


/* V25.11 — phone couple typography refinement only. */
@media (max-width:700px){
  .couple-section .couple-grid{grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr)!important;gap:8px!important;padding-inline:8px!important}
  .couple-section .couple-card{min-width:0!important;padding:8px!important}
  .couple-section .couple-info{padding:18px 6px 10px!important;min-width:0!important}
  .couple-section .couple-info h3,.couple-section .couple-name{font-size:clamp(19px,5.7vw,27px)!important;line-height:1.04!important;letter-spacing:-.025em!important;margin:10px 0!important;overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important}
  .couple-section .couple-role{font-size:clamp(8px,2.25vw,10px)!important;letter-spacing:.16em!important}
  .couple-section .couple-ampersand span{font-size:clamp(2rem,7vw,2.8rem)!important}
}
@media (max-width:420px){
  .couple-section .couple-grid{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)!important;gap:6px!important;padding-inline:4px!important}
  .couple-section .couple-info h3,.couple-section .couple-name{font-size:clamp(18px,5.5vw,24px)!important;line-height:1.03!important}
  .couple-section .couple-lineage-label{font-size:9px!important}
  .couple-section .couple-parent-names{font-size:11px!important;line-height:1.3!important}
}
/* V25.37 Love Story section */
.love-story-list{display:grid;gap:34px;max-width:900px;margin:38px auto 0}.love-story-item{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr);gap:28px;align-items:center}.love-story-item:nth-child(even){grid-template-columns:minmax(0,1.2fr) minmax(180px,.8fr)}.love-story-item:nth-child(even) .love-story-image{order:2}.love-story-image{overflow:hidden;border-radius:180px 180px 20px 20px}.love-story-image img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}.love-story-copy time{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--hm-accent,#b8915a);margin-bottom:8px}.love-story-copy h3{margin:0 0 10px}.love-story-copy p{line-height:1.8;margin:0}@media(max-width:680px){.love-story-item,.love-story-item:nth-child(even){grid-template-columns:1fr}.love-story-item:nth-child(even) .love-story-image{order:0}.love-story-image{max-width:320px;margin:auto}.love-story-copy{text-align:center}}