/* =========================================================
   SANGJIT LUXURY
   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;}
}
/* 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}}

/* =========================================================
   Couple portrait frame refinement — 2026-09-23
   Scope: bride/groom portraits only. Keep all other template UI/functions intact.
========================================================= */
.couple-section .couple-image {
    width: min(100%, 380px) !important;
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    overflow: hidden !important;
    position: relative !important;
    border-radius: 50% 50% 0 0 / 34% 34% 0 0 !important;
    background: #f7f0e4;
}

.couple-section .couple-image::after {
    inset: 10px !important;
    border: 1px solid rgba(199,162,74,.58) !important;
    border-radius: 50% 50% 0 0 / 34% 34% 0 0 !important;
    pointer-events: none;
    z-index: 2;
}

.couple-section .couple-image img,
.couple-section .couple-card img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: inherit !important;
}

/* The groom source photo has more surrounding architecture than the bride.
   Keep the person visible while retaining exactly the same frame dimensions. */
.couple-section .couple-card:last-child .couple-image img {
    object-position: center center !important;
}

@media (min-width: 701px) and (max-width: 1100px) {
    .couple-section .couple-image {
        width: min(100%, 320px) !important;
    }
}

@media (max-width: 700px) {
    .couple-section .couple-image {
        width: 100% !important;
        aspect-ratio: 3 / 4 !important;
        border-radius: 50% 50% 0 0 / 30% 30% 0 0 !important;
        margin-bottom: 20px !important;
    }
    .couple-section .couple-image::after {
        inset: 6px !important;
        border-radius: 50% 50% 0 0 / 30% 30% 0 0 !important;
    }
}
\n\n/* Sangjit Luxury v1.7 — navigation/timeline/scroll polish */
.love-story-dot{display:none!important}
.love-story-timeline:before{left:50%!important;transform:translateX(-50%)}
.love-story-item{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:72px!important;min-height:220px}
.love-story-item .love-story-image,.love-story-item .love-story-copy{min-width:0}
.love-story-item:nth-child(odd) .love-story-copy{grid-column:2;text-align:left}
.love-story-item:nth-child(odd) .love-story-image{grid-column:1;grid-row:1}
.love-story-item:nth-child(even) .love-story-copy{grid-column:1;text-align:right}
.love-story-item:nth-child(even) .love-story-image{grid-column:2;grid-row:1}
.love-story-item:not(:has(.love-story-image)):nth-child(odd) .love-story-copy{grid-column:2}
.love-story-item:not(:has(.love-story-image)):nth-child(even) .love-story-copy{grid-column:1}
.story-section{overflow:hidden}
html.sl-reveal-ready .sl-reveal{opacity:0;transform:translateY(42px);filter:blur(3px);transition:opacity .9s cubic-bezier(.2,.65,.3,1),transform .9s cubic-bezier(.2,.65,.3,1),filter .9s ease}
html.sl-reveal-ready .sl-reveal.sl-in{opacity:1;transform:none;filter:none}
html.sl-reveal-ready .sl-reveal .section-heading{transition:transform 1s cubic-bezier(.2,.65,.3,1);transform:translateY(12px)}
html.sl-reveal-ready .sl-reveal.sl-in .section-heading{transform:none}
@media (prefers-reduced-motion:reduce){html.sl-reveal-ready .sl-reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}}
@media(max-width:700px){.love-story-timeline:before{left:18px!important;transform:none}.love-story-item,.love-story-item:nth-child(odd),.love-story-item:nth-child(even){grid-template-columns:1fr!important;gap:16px!important;padding-left:48px!important;min-height:0}.love-story-item .love-story-image,.love-story-item .love-story-copy,.love-story-item:nth-child(odd) .love-story-copy,.love-story-item:nth-child(even) .love-story-copy,.love-story-item:nth-child(odd) .love-story-image,.love-story-item:nth-child(even) .love-story-image{grid-column:1!important;grid-row:auto!important;text-align:left!important;order:initial!important}}

/* Invitelle guest-name contrast: keep the guest name readable on the light name card. */
#openingScreen .opening-guest {
    color: #6f2f32 !important;
    text-shadow: none !important;
}