/* =========================
   COLORS
========================= */

:root {

    --bg: #f8f6f2;

    --card: #ffffff;

    --text: #2f2f2f;

    --muted: #777777;

    --border: #e7e2db;

    --sage: #7b8773;

    --olive: #5f6650;

    --brown: #8a6f5b;

    --beige: #d8c9b5;

    --shadow:
        0 10px 30px rgba(0, 0, 0, .05);

    --shadow-hover:
        0 18px 45px rgba(0, 0, 0, .08);

    --radius: 18px;
}

/* =========================
   GLOBAL
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    background-color: #F7F4ED;
    background-image: url("images/wedding-background.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    line-height: 1.7;
}


/* =========================
   TYPOGRAPHY
========================= */

h1,
h2,
h3,
h4 {

    font-family:
        'Cormorant Garamond',
        serif;

    font-weight: 500;
}

h1 {
    padding-top: 340px;
    font-size: 5rem;
    letter-spacing: 2px;
}

h2 {

    font-size: 3.8rem;
}

h3 {

    font-size: 1.8rem;
}

h4 {

    font-size: 1.3rem;
}

p {

    color: var(--ink);
}

#anp {
    font-family: 'Pinyon Script', cursive;
    font-size: 5rem;
    color: var(--olive);

}

/* =========================
   HERO
========================= */
.hero {
    background-image: url("images/hero-background.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 590px;
    padding: 48px 7% 27px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: space-between;
}

.hero-monogram {

    width: 170px;

}

.hero-copy,
.countdown {
  position: relative;
  z-index: 1;
}

.hero-copy {
  max-width: 500px;
  margin: 12px 12px 12px 50px;
  text-align: left;
}

.hero h1 {

    color: white;
}

.hero-subtitle {

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

    text-transform: uppercase;

    letter-spacing: 5px;

    margin-top: 0px;
}

.hero-subtext {
    font-family: 'Pinyon Script', cursive;

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

    letter-spacing: 5px;

    margin-top: 15px;
}

.hero-date {

    color: white;

    margin-top: 18px;

    font-size: 1.2rem;
}

.hero-time {

    color: white;

    font-size: 1.2rem;
}

.scroll-button {

    margin-top: 20px;

    padding:
        14px 28px;

    border: 1px solid white;

    color: white;

    text-decoration: none;

    transition: .3s;
}

.scroll-button:hover {

    background: white;

    color: black;
}

/* =========================
   SECTIONS
========================= */

.section {

    max-width: 1100px;

    margin: 0 auto;

    padding:
        50px 20px;
}

.section-header {

    text-align: center;

    margin-bottom: 20px;
}

.section-line {

    width: 90px;

    height: 1px;

    background: var(--sage);

    margin:
        -19px auto 0;
}

#pageBreak {
    position: relative;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.40),
            rgba(255, 255, 255, 0.40)),
        url("images/quote-bg.jpg");

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

#quote {
    text-align: center;
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 40px;
    padding: 110px;
}

@media (max-width: 768px) {
    #quote {
        padding: 40px 20px;
        font-size: 28px;
    }
}

/* =========================
   CARDS
========================= */

.card {

    background: var(--card);

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

    border-radius: var(--radius);

    padding: 35px;

    margin-bottom: 25px;

    box-shadow: var(--shadow);

    transition: .3s;
}

.card:hover {

    box-shadow:
        var(--shadow-hover);
}

/* =========================
   INPUTS
========================= */

input {

    width: 100%;

    padding: 16px;

    margin-top: 15px;

    border:

        1px solid var(--border);

    border-radius: 12px;

    font-size: 1rem;

    background: white;
}

input:focus {

    outline: none;

    border-color: var(--sage);
}

/* =========================
   BUTTONS
========================= */

button {

    border: none;

    cursor: pointer;

    transition: .3s;
}

#searchButton,
.primary-btn {

    width: 100%;

    margin-top: 18px;

    padding: 16px;

    border-radius: 12px;

    background: var(--sage);

    color: white;

    font-size: 1rem;

    font-weight: 500;
}

#searchButton:hover,
.primary-btn:hover {

    background: var(--olive);
    display: flex;
    align-items: center;
    justify-content: center;
}

.secondary-btn {

    width: 100%;

    max-width: 420px;

    margin-top: 15px;

    padding: 16px;

    border-radius: 12px;

    background: white;

    color: #8b0000;

    border: 1px solid #d8b0b0;
}

.secondary-btn:hover {

    background: #faf3f3;
}

.button-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.button-loading span {
    display: inline-block;
    white-space: nowrap;
}

#searchButton.loading {
    cursor: wait;
    opacity: 0.9;
}

#searchButton .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top: 2px solid #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

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

#rsvpStatus {

    margin-top: 15px;

    font-weight: 700;

    font-size: 1.05rem;

    letter-spacing: .5px;

    color: #b3261e;
}

/* =========================
   ACTION BUTTONS
========================= */

.action-buttons {

    margin-top: 30px;
}

.hidden {

    display: none !important;
}

/* =========================
   PARTY SECTION
========================= */

.guest-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    margin-top: 20px;
}

.remove-btn {

    background: transparent;

    border: 1px solid #d8c9c9;

    color: #a94442;

    border-radius: 10px;

    padding:
        8px 16px;

    font-size: .9rem;
}

.remove-btn:hover {

    background:
        #faf1f1;
}

/* =========================
   EMAIL
========================= */

.small-text {

    color: var(--muted);

    font-size: .95rem;

    margin-top: 10px;
}

#rsvpError {

    margin-top: 15px;

    font-weight: 600;

    color: #c62828;
}

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

.gallery {

    display: grid;

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

    gap: 20px;
}

.gallery img {

    width: 100%;

    border-radius: 16px;

    display: block;

    object-fit: cover;

    aspect-ratio: 4 / 5;

    transition: .3s;
}

.gallery img:hover {

    transform:
        translateY(-4px);
}

/* ========================================
    MOBILE GALLERY HIDDEN ON DESKTOP 
=========================================== */
.mobile-gallery {
    display: none;
}

/* Mobile Small Photo IG View*/
/* @media (max-width: 768px) {
    .gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
} */

/* MOBILE SIMPLE SWIPE */
/* @media (max-width: 768px) {

    .gallery {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 10px;
        padding-bottom: 10px;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .gallery::-webkit-scrollbar {
        display: none;
    }

    .gallery img {
        flex: 0 0 100%;
        width: 100%;
        aspect-ratio: 4 / 5;
        object-fit: cover;

        scroll-snap-align: center;
        border-radius: 12px;
    }
} */

/* =========================================================
   MOBILE SWIPE GALLERY
   ========================================================= */

/*
   Hidden on desktop.
   This means your existing web gallery is completely
   unaffected.
*/

.mobile-gallery {
    display: none;
}


/* =========================================================
   MOBILE ONLY
   ========================================================= */

@media (max-width: 768px) {


    /* -----------------------------------------------------
       HIDE EXISTING DESKTOP GALLERY
       ----------------------------------------------------- */

    .gallery {
        display: none;
    }


    /* -----------------------------------------------------
       SHOW MOBILE SWIPE GALLERY
       ----------------------------------------------------- */

    .mobile-gallery {

        display: block;

        width: 100%;

        box-sizing: border-box;

        overflow: hidden;
    }


    /* -----------------------------------------------------
       STACK
       ----------------------------------------------------- */

    .mobile-gallery-stack {

        position: relative;

        width: 100%;

        /*
           Keeps the gallery from becoming excessively
           wide on larger phones.
        */

        max-width: 390px;

        /*
           4:5 ratio to match your existing gallery.

           Width : Height
           4     : 5
        */

        aspect-ratio: 4 / 5;

        margin: 0 auto;

        /*
           IMPORTANT:
           Allows normal vertical page scrolling while
           still allowing horizontal swipe gestures.
        */

        touch-action: pan-y;

        user-select: none;

        -webkit-user-select: none;

        -webkit-tap-highlight-color: transparent;
    }


    /* -----------------------------------------------------
       INDIVIDUAL CARD
       ----------------------------------------------------- */

    .mobile-gallery-card {

        position: absolute;

        top: 35px;

        left: 20px;

        width: 85%;

        height: 85%;

        overflow: hidden;

        border-radius: 25px;

        background: #f4f4f4;

        /*
           Makes the stack feel like physical cards.
        */

        box-shadow:
            0 10px 25px rgba(0, 0, 0, 0.12);

        cursor: grab;

        will-change: transform, opacity;

        /*
           Smooth animation when cards move into
           their new stack positions.
        */

        transition:
            transform .35s cubic-bezier(.22,
                1,
                .36,
                1),
            opacity .35s ease,
            box-shadow .35s ease;
    }


    .mobile-gallery-card:active {

        cursor: grabbing;
    }


    /* -----------------------------------------------------
       IMAGES
       ----------------------------------------------------- */

    .mobile-gallery-card img {

        width: 100%;

        height: 100%;

        display: block;

        object-fit: cover;

        /*
           Prevent the browser from treating the image
           itself as a draggable object.
        */

        pointer-events: none;

        user-select: none;

        -webkit-user-select: none;

        -webkit-user-drag: none;
    }



    /* -----------------------------------------------------
    INSTAGRAM-STYLE PHOTO STACK
    ----------------------------------------------------- */

    /* TOP PHOTO */
    .mobile-gallery-card:nth-child(1) {
        z-index: 14;

        transform:
            translate(0, 0) rotate(0deg) scale(1);

        opacity: 1;
    }

    /* SECOND PHOTO — peek out from the upper right */
    .mobile-gallery-card:nth-child(2) {
        z-index: 13;

        transform:
            translate(13px, -9px) rotate(5deg) scale(.96);

        opacity: 1;
    }

    /* THIRD PHOTO — peek out from the upper left */
    .mobile-gallery-card:nth-child(3) {
        z-index: 12;

        transform:
            translate(-12px, 7px) rotate(-4deg) scale(.93);

        opacity: 1;
    }

    /* FOURTH PHOTO — offset in the opposite direction */
    .mobile-gallery-card:nth-child(4) {
        z-index: 11;

        transform:
            translate(8px, 17px) rotate(7deg) scale(.90);

        opacity: 1;
    }

    /* HIDE DEEPER PHOTOS */
    .mobile-gallery-card:nth-child(n + 5) {
        z-index: 1;

        transform:
            translate(-5px, 23px) rotate(-3deg) scale(.88);

        opacity: 0;
        pointer-events: none;
    }

    .mobile-gallery-card:nth-child(2) {
        box-shadow: 2px 5px 16px rgba(0, 0, 0, 0.16);
    }

    .mobile-gallery-card:nth-child(3) {
        box-shadow: -3px 7px 18px rgba(0, 0, 0, 0.14);
    }

    .mobile-gallery-card:nth-child(4) {
        box-shadow: 3px 9px 20px rgba(0, 0, 0, 0.12);
    }

    /* -----------------------------------------------------
       ACTIVE DRAG
       ----------------------------------------------------- */

    .mobile-gallery-card.is-dragging {

        /*
           Disable the normal transition while the user
           is physically dragging the card.
        */

        transition: none;

        box-shadow:
            0 20px 40px rgba(0, 0, 0, 0.18);
    }


    /* -----------------------------------------------------
       SWIPE LEFT
       ----------------------------------------------------- */

    .mobile-gallery-card.swipe-left {

        transform:
            translateX(-130%) rotate(-12deg);

        opacity: 0;

        pointer-events: none;
    }


    /* -----------------------------------------------------
       SWIPE RIGHT
       ----------------------------------------------------- */

    .mobile-gallery-card.swipe-right {

        transform:
            translateX(130%) rotate(12deg);

        opacity: 0;

        pointer-events: none;
    }


    /* -----------------------------------------------------
       SWIPE HINT
       ----------------------------------------------------- */

    .mobile-gallery-hint {

        margin:

            30px 0 0;

        text-align: center;

        font-family:
            "Inter",
            sans-serif;

        font-size: 10px;

        letter-spacing: 2px;

        text-transform: uppercase;

        opacity: .45;
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .mobile-gallery {

        padding-left: 0;

        padding-right: 0;
    }

    .mobile-gallery-stack {

        width: 100%;
    }
}


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

/*
   This works for both desktop and mobile.
*/

.gallery-lightbox {

    position: fixed;

    inset: 0;

    width: 100%;

    height: 100%;

    background:
        rgba(0, 0, 0, .94);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 99999;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:

        opacity .3s ease,

        visibility .3s ease;
}


.gallery-lightbox.active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* ---------------------------------------------------------
   LIGHTBOX IMAGE AREA
--------------------------------------------------------- */

.lightbox-image-container {

    width: 88vw;

    height: 88vh;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;
}


#lightboxImage {

    max-width: 100%;

    max-height: 100%;

    width: auto;

    height: auto;

    object-fit: contain;

    display: block;

    user-select: none;

    -webkit-user-select: none;

    -webkit-user-drag: none;

    transition:
        opacity .2s ease;
}


/* ---------------------------------------------------------
   CLOSE BUTTON
--------------------------------------------------------- */

.lightbox-close {

    position: absolute;

    top: 20px;

    right: 25px;

    width: 45px;

    height: 45px;

    border: none;

    background: transparent;

    color: white;

    font-family: Arial, sans-serif;

    font-size: 38px;

    font-weight: 200;

    line-height: 1;

    cursor: pointer;

    z-index: 10;

    opacity: .85;
}


.lightbox-close:hover {

    opacity: 1;
}


/* ---------------------------------------------------------
   PREVIOUS / NEXT BUTTONS
--------------------------------------------------------- */

.lightbox-prev,
.lightbox-next {

    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    width: 55px;

    height: 70px;

    border: none;

    background: transparent;

    color: white;

    font-size: 34px;

    font-weight: 200;

    cursor: pointer;

    z-index: 10;

    opacity: .75;

    transition:
        opacity .2s ease;
}


.lightbox-prev:hover,
.lightbox-next:hover {

    opacity: 1;
}


.lightbox-prev {

    left: 20px;
}


.lightbox-next {

    right: 20px;
}


/* =========================================================
   LIGHTBOX — MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .lightbox-image-container {

        width: 94vw;

        height: 84vh;
    }


    #lightboxImage {

        max-width: 94vw;

        max-height: 84vh;
    }


    .lightbox-close {

        top: 12px;

        right: 12px;

        font-size: 34px;
    }


    .lightbox-prev,
    .lightbox-next {

        width: 40px;

        height: 55px;

        font-size: 26px;
    }


    .lightbox-prev {

        left: 3px;
    }


    .lightbox-next {

        right: 3px;
    }
}



/* =========================
   PALETTE
========================= */

.palette {

    display: flex;

    justify-content: center;

    gap: 18px;

    margin-top: 30px;
}

.color {

    width: 70px;

    height: 70px;

    border-radius: 50%;

    border:
        1px solid rgba(0, 0, 0, .08);
}

.sage {

    background:
        #8b9581;
}

.olive {

    background:
        #626953;
}

.brown {

    background:
        #866a57;
}

.beige {

    background:
        #d7c8b4;
}

/* =========================
   FAQ
========================= */

.faq {

    display: flex;

    flex-direction: column;

    gap: 20px;
}

.faq-item {

    background: white;

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

    padding: 25px;

}

.faq-item h4 {

    margin-bottom: 10px;
}

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

footer {
    font-size: 12px;
    font-family: "Aptos", serif;
    text-align: right;
    padding:
        15px 20px;

    background: var(--brown);

    margin-top: 100px;
}

.footer-monogram {

    width: 90px;

    margin-bottom: 20px;
}

footer h3 {

    margin-top: 10px;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 1.4rem;
    }

    .hero-monogram {
        width: 120px;
    }

    .hero-copy {
        margin: 12px !important;
    }

    .guest-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .color {
        width: 55px;
        height: 55px;
    }

    .section {
        padding:
            8px 18px;
    }

    .card {
        padding: 25px;
    }

    #anp {
        font-size: 4rem;
    }
}

/* =========================
   VENUE INFORMATION
   ========================= */

.venue-info {
    padding: 36px 32px 28px;
    text-align: center;
}

.venue-type {
    margin: 0 0 12px;
    font-size: 11px;
    letter-spacing: 3px;
    font-weight: 500;
}

.venue-info h3 {
    margin: 0 auto;
    max-width: 600px;
    font-family: "Cormorant Garamond", serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.2;
}

.venue-note {
    margin: 8px 0 20px;
    font-size: 13px;
    font-style: italic;
    opacity: 0.65;
}

.venue-time {
    margin: 0 0 10px;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 500;
}

.venue-address {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    opacity: 0.7;
}


/* =========================
   MAP
   ========================= */

.map-container {
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

#venue-img {
    width: 100%;
    border: 0;
    display: block;
}

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

.navigation {
    padding: 24px 32px 32px;
    text-align: center;
}

.navigation-label {
    margin: 0 0 14px;
    font-size: 10px;
    letter-spacing: 2.5px;
    font-weight: 500;
}

.navigation-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.navigation-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-width: 160px;
    padding: 12px 18px;

    border: 1px solid rgba(0, 0, 0, 0.15);

    color: inherit;
    text-decoration: none;

    font-size: 12px;
    letter-spacing: 0.5px;

    transition: all 0.25s ease;
}

.navigation-button img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.navigation-button:hover {
    background: #f5f5f3;
    border-color: rgba(0, 0, 0, 0.30);
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 600px) {

    .venue-info {
        padding: 30px 22px 24px;
    }

    .venue-info h3 {
        font-size: 25px;
    }

    .map-container {
        height: 230px;
    }

    .navigation {
        padding: 22px 18px 26px;
    }

    .navigation-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .navigation-button {
        width: 100%;
        box-sizing: border-box;
    }

}

/* =========================
   REMOVE GUEST MODAL
   ========================= */

.modal {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.45);

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

    z-index: 9999;
}

.modal.hidden {
    display: none;
}

.modal-content {
    background: white;

    width: 90%;
    max-width: 500px;

    padding: 30px;

    border-radius: 12px;

    text-align: center;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

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

    padding: 20px;

    background: rgba(0, 0, 0, 0.45);
}

.modal-overlay.hidden {
    display: none;
}

.modal-card {
    width: 100%;
    max-width: 420px;

    box-sizing: border-box;

    padding: 30px 26px;

    background: #ffffff;

    border-radius: 16px;

    text-align: center;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.18);
}

.modal-card h3 {
    margin: 0 0 12px;

    font-size: 22px;
    font-weight: 500;

    color: #222222;
}

.modal-card p {
    margin: 0 auto 24px;

    max-width: 340px;

    font-size: 14px;
    line-height: 1.6;

    color: #666666;
}

.modal-actions {
    display: flex;
    gap: 10px;

    width: 100%;
}

.modal-actions button {
    flex: 1;

    min-height: 46px;

    padding: 12px 16px;

    border-radius: 8px;

    font-family: inherit;
    font-size: 13px;

    cursor: pointer;
}

.modal-cancel-btn {
    background: transparent;

    border: 1px solid #d8d8d8;

    color: #444444;
}

.modal-remove-btn {

    background: var(--sage);

    color: #ffffff;
}

.modal-remove-btn:hover {

    background: var(--olive);

}

.modal-actions button:active {
    transform: scale(0.98);
}

#declineMessage {
    width: 100%;
    height: 220px;

    padding: 18px;

    border: 1px solid #d8d8d8;
    border-radius: 12px;

    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    line-height: 1.8;

    resize: none;
    box-sizing: border-box;
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 600px) {

    .modal-overlay {
        padding: 18px;
    }

    .modal-card {
        max-width: 100%;

        padding: 26px 20px;

        border-radius: 14px;
    }

    .modal-card h3 {
        font-size: 20px;
    }

    .modal-card p {
        font-size: 13px;
    }

    .modal-actions {
        flex-direction: column;
        gap: 8px;
    }

    .modal-actions button {
        width: 100%;
        min-height: 48px;
    }

    #declineMessage {
        height: 180px;
        font-size: 16px;
    }
}

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

.rsvp-section {
    max-width: 820px;
    margin: 0 auto;
}

.section-intro {
    max-width: 500px;
    margin: 18px auto 0;

    text-align: center;

    font-size: 15px;
    line-height: 1.8;

    color: #666;
}

.rsvp-card {
    margin-bottom: 28px;
    padding: 40px;

    text-align: center;
}

.step-number {
    margin-bottom: 12px;

    font-family: 'Inter', sans-serif;

    font-size: 11px;
    font-weight: 500;

    letter-spacing: 0.35em;

    color: #8c8c8c;
}

.rsvp-card h3 {
    margin-bottom: 12px;

    font-family: 'Cormorant Garamond', serif;

    font-size: 34px;
    font-weight: 400;

    color: #222;
}

.step-description {
    max-width: 420px;
    margin: 0 auto 28px;

    color: #666;

    line-height: 1.8;
}

/* =========================
   RESERVATION DETAILS
   ========================= */

#guestName {
    margin-top: 12px;
    margin-bottom: 12px;

    font-family: 'Cormorant Garamond', serif;

    font-size: 42px;
    font-weight: 400;

    color: #222;
}

#guest1Text {
    margin-bottom: 16px;

    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: #888;
}

#seatCount {
    margin-bottom: 12px;

    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;

    color: #555;
}

#rsvpStatus {
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.email-confirmation-notice {
    margin: 18px auto 0;
    max-width: 420px;

    font-family: 'Inter', sans-serif;
    font-size: 12px;
    line-height: 1.7;

    text-align: center;

    color: #777;
}

/* =========================
   PARTY SECTION
   ========================= */

#partyInstructions {
    max-width: 480px;

    margin: 0 auto 30px;

    line-height: 1.8;

    color: #666;
}

.guest-row {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 16px;

    margin-top: 18px;
    margin-bottom: 12px;

    padding-bottom: 12px;

    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

#guest2Text,
#guest3Text {
    font-family: 'Cormorant Garamond', serif;

    font-size: 26px;

    color: #222;
}

/* =========================
   EMAIL SECTION
   ========================= */

.small-text {
    max-width: 450px;

    margin: 0 auto 24px;

    line-height: 1.8;

    color: #666;
}

/* =========================
   ACTION BUTTONS
   ========================= */

.action-buttons {
    margin-top: 30px;

    text-align: center;
}

.primary-btn {
    display: block;

    width: 100%;
    max-width: 420px;

    margin: 0 auto 16px;
}

/* .secondary-btn {
    background: transparent;
    border: none;

    color: #666;

    letter-spacing: 0.12em;
    text-transform: uppercase;

    font-size: 12px;
}

.secondary-btn:hover {
    color: #222;
} */

/* =========================
   MOBILE
   ========================= */

@media (max-width: 768px) {

    .rsvp-card {
        padding: 28px 22px;
    }

    .rsvp-card h3 {
        font-size: 28px;
    }

    #guestName {
        font-size: 34px;
    }

    #guest2Text,
    #guest3Text {
        font-size: 22px;
    }

    .guest-row {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* =========================================
   ANIMATED WEDDING INVITATION GATE
   ========================================= */

#invitationGate {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    height: 100dvh;
    overflow: auto;
    padding: 30px 18px;
    box-sizing: border-box;

    /* Keep the existing background image, softened with ivory */
    background-color: #f7f3ed;
    background-image:
        linear-gradient(
            rgba(247, 243, 237, 0.48),
            rgba(247, 243, 237, 0.48)
        ),
        url("images/password-gate.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}

#invitationGate.invitation-dismissed {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.invitation-scene {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.invitation-eyebrow {
    margin: 0 0 12px;
    color: #76694f;
    font-family: "Inter", sans-serif;
    font-size: 10px;
    letter-spacing: 0.24em;
    line-height: 1.8;
}

.invitation-heading {
    margin: 0;
    color: #34382e;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(32px, 5vw, 47px);
    font-weight: 400;
    line-height: 1.12;
}

.invitation-intro {
    margin: 12px 0 0;
    color: #6f6a5e;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 0.02em;
}

/* Envelope stage */
.envelope {
    position: relative;
    width: min(100%, 370px);
    aspect-ratio: 1.48 / 1;
    margin: 68px auto 0;
    perspective: 1200px;
    isolation: isolate;
}

/* Envelope back */
.envelope-back {
    position: absolute;
    inset: 0;
    z-index: 1;
    border: 1px solid #d5c8b2;
    border-radius: 3px;
    background: #e7dcc8;
    box-shadow: 0 22px 55px rgba(48, 39, 28, 0.18);
}

/* Invitation card */
.envelope-letter {
    position: absolute;
    z-index: 2;
    left: 7%;
    right: 7%;
    top: 5%;
    height: 90%;
    box-sizing: border-box;
    padding: 17px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: #fcf9f2;
    border: 1px solid #d8cbb6;
    color: #37392f;

    transform: translateY(0) scale(0.96);
    transition:
        transform 1s cubic-bezier(.2, .75, .25, 1),
        top 1s cubic-bezier(.2, .75, .25, 1),
        height 1s cubic-bezier(.2, .75, .25, 1);
}

.invitation-monogram {
    display: block;
    width: 36px;
    height: 36px;
    object-fit: contain;
    margin-bottom: 7px;
}

.letter-small {
    margin: 0 0 5px;
    font-family: "Inter", sans-serif;
    font-size: 8px;
    letter-spacing: 0.2em;
    color: #81765e;
}

.envelope-letter h2 {
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(25px, 5vw, 34px);
    font-weight: 400;
    line-height: 1.1;
}

.envelope-letter h2 span {
    color: #87434a;
    font-style: italic;
}

.letter-divider {
    width: 72px;
    margin: 9px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #927d5c;
    font-size: 10px;
}

.letter-divider::before,
.letter-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #c9b99c;
}

.letter-date {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: 8px;
    letter-spacing: 0.16em;
}

.letter-message {
    max-width: 225px;
    margin: 9px 0 6px;
    color: #716a5d;
    font-family: "Cormorant Garamond", serif;
    font-size: 13px;
    line-height: 1.35;
}

.letter-signature {
    color: #785d4e;
    font-family: "Pinyon Script", cursive;
    font-size: 19px;
}

/* Envelope front pocket */
.envelope-pocket {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    background: #e9decb;
    clip-path: polygon(0 0, 50% 57%, 100% 0, 100% 100%, 0 100%);
    border-radius: 2px;
    pointer-events: none;
}

.envelope-pocket::before,
.envelope-pocket::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #e2d4bd;
}

.envelope-pocket::before {
    clip-path: polygon(0 0, 50% 57%, 0 100%);
    background: #e5d8c3;
}

.envelope-pocket::after {
    clip-path: polygon(100% 0, 50% 57%, 100% 100%);
    background: #ded0b8;
}

/* Top triangular flap */
.envelope-flap {
    position: absolute;
    inset: 0 0 auto;
    z-index: 5;
    height: 70%;
    background: #eee3d0;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform-origin: top center;
    transform: rotateX(0deg);
    backface-visibility: visible;
    transition:
        transform 0.85s cubic-bezier(.3, .7, .2, 1),
        z-index 0s linear 0.42s;
}

/* Wax seal button */
.wax-seal {
    position: absolute;
    z-index: 7;
    left: 50%;
    top: 56%;
    transform: translate(-50%, -50%);
    width: 78px;
    height: 78px;
    padding: 0;
    border: 2px solid #a36d70;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 25%, #984e55 0%, #792e3b 48%, #5f202d 100%);
    color: #f7eadc;
    box-shadow:
        0 4px 10px rgba(62, 29, 31, 0.25),
        inset 0 0 0 3px rgba(255, 231, 211, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    transition:
        transform 0.25s ease,
        opacity 0.35s ease,
        box-shadow 0.25s ease;
    font-family: "Inter", sans-serif;
}

.wax-seal:hover {
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow:
        0 7px 16px rgba(62, 29, 31, 0.28),
        inset 0 0 0 3px rgba(255, 231, 211, 0.15);
}

.wax-seal:focus-visible {
    outline: 3px solid #4b5a42;
    outline-offset: 5px;
}

.wax-monogram {
    font-family: "Cormorant Garamond", serif;
    font-size: 21px;
    line-height: 1;
}

.wax-monogram span {
    padding: 0 2px;
    font-size: 13px;
    font-style: italic;
}

.wax-label {
    font-size: 7px;
    letter-spacing: 0.18em;
}

/* Hint beneath the envelope */
.invitation-hint {
    margin: 24px 0 0;
    color: #6e493f;
    font-family: "Inter", sans-serif;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    animation: invitationHintPulse 2.2s ease-in-out infinite;
}

.invitation-footer {
    margin: 32px 0 0;
    color: #807560;
    font-family: "Inter", sans-serif;
    font-size: 8px;
    letter-spacing: 0.2em;
}

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

#invitationGate.is-opening .wax-seal {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55);
    pointer-events: none;
}

#invitationGate.is-opening .envelope-flap {
    z-index: 1;
    transform: rotateX(180deg);
}

#invitationGate.is-opening .envelope-letter {
    z-index: 3;
    top: -42%;
    height: 135%;
    transform: translateY(-5%) scale(1);
    transition-delay: 0.25s;
}

#invitationGate.is-opening .invitation-hint {
    opacity: 0;
    transition: opacity 0.25s ease;
}

@keyframes invitationHintPulse {
    0%, 100% { opacity: 0.65; }
    50% { opacity: 1; }
}

/* Mobile adjustments */
@media (max-width: 600px) {
    #invitationGate {
        padding: 22px 18px;
    }

    .invitation-heading {
        font-size: clamp(30px, 8vw, 40px);
    }

    .invitation-intro {
        max-width: 280px;
        font-size: 11px;
    }

    .envelope {
        width: min(100%, 340px);
        margin-top: 62px;
    }

    .wax-seal {
        width: 70px;
        height: 70px;
    }

    .invitation-footer {
        margin-top: 27px;
        font-size: 7px;
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    #invitationGate,
    .envelope-flap,
    .envelope-letter,
    .wax-seal,
    .invitation-hint {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

.gallery img {
    cursor: pointer;
    transition: 0.3s;
}

.gallery img:hover {
    opacity: 0.9;
}

/* Lightbox */

.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    justify-content: center;
    align-items: center;
}

.lightbox img {
    max-width: 98vw;
    max-height: 98vh;
    object-fit: contain;
}

.lightbox img.show {
    opacity: 1;
    transform: scale(1);
}

.close,
.prev,
.next {
    position: absolute;
    color: white;
    font-size: 40px;
    cursor: pointer;
    user-select: none;
    padding: 10px;
}

.close {
    top: 20px;
    right: 30px;
}

.prev {
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
}

.next {
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}

.close:hover,
.prev:hover,
.next:hover {
    opacity: 0.7;
}

.image-counter {
    position: absolute;
    bottom: 30px;
    color: white;
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    letter-spacing: 2px;
}


/* =========================
   ATTIRE & PALETTE 
   ========================= */
.attire-card {
    max-width: 950px;
    margin: 0 auto;
    text-align: center;
}

.attire-meta {

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

    margin-bottom: 0;

    font-family: "Cormorant Garamond", serif;
    font-size: 22px;
    letter-spacing: 1px;
}


.title-divider {
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: center;
    max-width: 350px;
    margin: 0 auto;
}

.title-divider::before,
.title-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #8a765e;
}

.title-divider span {
    white-space: nowrap;
}


#attireRole {
    font-weight: 600;
}

#attireCounter {
    opacity: 0.65;
}

.attire-showcase {

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

    gap: 12px;
}

.attire-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 0;
}

#attireImage {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ATTIRE DESCRIPTION LAYOUT */
.attire-description {
    width: 100%;
    max-width: 720px;
    margin: 22px auto 8px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

/* Two descriptions side by side */
.attire-description.has-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Individual description */
.attire-description-item {
    min-width: 0;
    padding: 18px 14px;
    text-align: center;
    border-top: 1px solid rgba(129, 122, 97, 0.35);
}

/* Subtle divider between the two columns */
.attire-description.has-two .attire-description-item + .attire-description-item {
    border-left: 1px solid rgba(129, 122, 97, 0.25);
}

.attire-description-item h5 {
    margin: 0 0 8px;
    font-family: "Cormorant Garamond", serif;
    font-size: 21px;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.3;
    color: #30382c;
}

.attire-description-item p {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.8;
    color: #716d60;
}

.attire-prev,
.attire-next {

    background: transparent;
    border: none;

    font-size: 40px;

    cursor: pointer;

    padding: 10px;

    color: #000;

    transition: opacity .3s ease;
}

.attire-prev:hover,
.attire-next:hover {
    opacity: .5;
}

.attire-dots {

    display: flex;
    justify-content: center;
    gap: 10px;

    margin-top: 25px;
}

.dot {

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #d4d4d4;

    transition: .3s ease;
}

.dot.active {
    background: #8f7a68;
    transform: scale(1.2);
}

@media (max-width: 768px) {

    .attire-card {
        padding: 25px;
    }

    .attire-meta {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .attire-showcase {
        gap: 4px;
    }

    .attire-prev,
    .attire-next {
        font-size: 28px;
        padding: 5px;
    }

    .attire-content img {
        max-width: 100%;
    }
    .attire-description {
        margin-top: 14px;
        gap: 8px;
    }

    .attire-description-item {
        padding: 15px 8px;
    }

    .attire-description-item h5 {
        font-size: 15px;
    }

    .attire-description-item p {
        font-size: 10px;
        line-height: 1.7;
    }

}

/* =========================
   RSVP SUCCESS POPUP
========================= */

.rsvp-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);

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

    padding: 24px;

    z-index: 9999;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


/* SHOW POPUP */

.rsvp-popup-overlay.show {
    opacity: 1;
    visibility: visible;
}


/* POPUP CARD */

.rsvp-success-popup {
    position: relative;

    width: 100%;
    max-width: 460px;

    background: #fff;

    padding: 48px 42px 42px;

    border-radius: 18px;

    text-align: center;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.15);

    transform: translateY(10px);

    transition:
        transform 0.25s ease;
}


/* POPUP ANIMATION */

.rsvp-popup-overlay.show .rsvp-success-popup {
    transform: translateY(0);
}


/* CLOSE BUTTON */

.rsvp-popup-close {
    position: absolute;

    top: 14px;
    right: 18px;

    width: 34px;
    height: 34px;

    border: none;
    background: transparent;

    font-size: 28px;
    font-weight: 300;

    color: #555;

    cursor: pointer;

    line-height: 1;
}


/* CONTENT */

.rsvp-popup-content h3 {
    margin: 0;

    font-family: "Cormorant Garamond", serif;

    font-size: 32px;
    font-weight: 500;

    letter-spacing: 0.02em;

    color: #222;
}


/* DIVIDER */

.rsvp-popup-divider {
    width: 45px;
    height: 1px;

    background: #222;

    margin: 18px auto 24px;
}


/* TEXT */

.rsvp-popup-content p {
    margin: 0 auto 14px;

    max-width: 360px;

    font-family: "Inter", sans-serif;

    font-size: 14px;
    line-height: 1.7;

    color: #555;
}

.rsvp-popup-content strong {
    color: #222;
    font-weight: 500;
}


/* CONTINUE BUTTON */

.rsvp-popup-button {
    margin-top: 18px;

    min-width: 150px;

    padding: 13px 24px;

    border: none;
    border-radius: 999px;

    background: var(--sage);
    color: #fff;

    font-family: "Inter", sans-serif;

    font-size: 12px;
    font-weight: 500;

    letter-spacing: 0.12em;

    cursor: pointer;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.rsvp-popup-button:hover {
    background: var(--olive);
}

.rsvp-popup-button:active {
    transform: scale(0.98);
}


/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {

    .rsvp-popup-overlay {
        padding: 20px;
    }

    .rsvp-success-popup {
        max-width: 100%;

        padding: 42px 28px 32px;

        border-radius: 16px;
    }

    .rsvp-popup-content h3 {
        font-size: 29px;
    }

    .rsvp-popup-content p {
        font-size: 13px;
        line-height: 1.7;
    }

}


/* =========================
   APPRECIATION & PRESENTS
========================= */

.gift-section {
    padding-top: 40px;
    padding-bottom: 40px;
}


/* Main gift card */

.gift-card {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;

    max-width: 950px;
    margin: 35px auto 0;

    background: var(--card);
    border: 1px solid #e5ded4;
    border-radius: 16px;

    overflow: hidden;
}

/* Image area */

.gift-image {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 320px;
    padding: 35px;

    /* background: #f1ece4; */
}

.gift-image img {
    display: block;
    width: 100%;
    max-width: 250px;
    max-height: 260px;

    object-fit: contain;
}

/* Text area */

.gift-content {
    padding: 48px 45px;
    text-align: center;
}

.gift-eyebrow {
    display: block;
    margin-bottom: 16px;

    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 3px;

    color: #8b7355;
}

.gift-content h3 {
    margin: 0;

    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 500;
    line-height: 1.2;

    color: #292521;
}

.gift-content p {
    max-width: 430px;
    margin: 0 auto;

    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.9;

    color: var(--brown);
}

.gift-signoff {
    display: block;
    margin-top: 24px;

    font-family: 'Cormorant Garamond', serif;
    font-size: 21px;
    font-style: italic;

    color: var(--olive);
}

/* Mobile */

@media (max-width: 700px) {

    .gift-section {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .gift-card {
        grid-template-columns: 1fr;
        margin-top: 25px;
        border-radius: 12px;
    }

    .gift-image {
        min-height: 0;
        padding: 25px 20px;
    }

    .gift-image img {
        max-width: 180px;
        max-height: 175px;
    }

    .gift-content {
        padding: 30px 24px 35px;
    }

    .gift-eyebrow {
        font-size: 9px;
        letter-spacing: 2.5px;
        margin-bottom: 12px;
    }

    .gift-content h3 {
        font-size: 30px;
    }

    .gift-content p {
        font-size: 13px;
        line-height: 1.85;
    }

    .gift-signoff {
        margin-top: 20px;
        font-size: 20px;
    }
}


/* =========================
   FLOATING BACK TO TOP
========================= */

#backToTop {
    position: fixed;
    right: 28px;
    bottom: 28px;

    width: 48px;
    height: 48px;

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

    background: white;
    color: var(--brown);

    border: 1px solid rgba(80, 65, 50, 0.2);
    border-radius: 50%;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.10);

    cursor: pointer;
    z-index: 9999;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(12px) scale(0.95);

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease,
        transform 0.35s ease,
        background 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}

/* Show when scrolling down */

#backToTop.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

/* Hover effect */

#backToTop:hover {
    background: var(--brown);
    color: #ffffff;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);

    transform: translateY(-4px) scale(1.04);
}

/* Arrow animation */

#backToTop svg {
    transition: transform 0.3s ease;
}

#backToTop:hover svg {
    transform: translateY(-3px);
}

/* Keyboard accessibility */

#backToTop:focus-visible {
    outline: 2px solid #8a765e;
    outline-offset: 4px;
}

/* Mobile adjustments */

@media (max-width: 600px) {
    #backToTop {
        width: 44px;
        height: 44px;

        right: 16px;
        bottom: 18px;
    }

    #backToTop svg {
        width: 20px;
        height: 20px;
    }
}

/* Respect reduced-motion preferences */

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

    #backToTop,
    #backToTop svg {
        transition: none;
    }
}


/* =========================================================
   GLOBAL MICRO-INTERACTIONS
========================================================= */

:root {
    --motion-smooth: cubic-bezier(.22, 1, .36, 1);
    --motion-fast: 220ms;
    --motion-medium: 350ms;
}


/* =========================================================
   1. SECTION HEADINGS
========================================================= */

.section-header h2 {
    transition:
        letter-spacing 0.4s var(--motion-smooth),
        color 0.4s ease;
}

.section-header:hover h2 {
    letter-spacing: 1.5px;
}

.section-line {
    transform-origin: center;
    transition:
        width 0.5s var(--motion-smooth),
        opacity 0.3s ease;
}

.section-header:hover .section-line {
    width: 125px;
}


/* =========================================================
   2. CARDS — SUBTLE LIFT
========================================================= */

.card {
    transition:
        transform 0.35s var(--motion-smooth),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
    .card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-hover);
        border-color: #d8d2c6;
    }
}


/* =========================================================
   3. BUTTONS — TACTILE FEEDBACK
========================================================= */

#searchButton,
.primary-btn,
.secondary-btn,
.scroll-button {
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s var(--motion-smooth);
}

@media (hover: hover) and (pointer: fine) {

    #searchButton:hover,
    .primary-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 7px 18px rgba(65, 75, 55, 0.16);
    }

    .secondary-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(100, 50, 50, 0.08);
    }

    .scroll-button:hover {
        transform: translateY(-3px);
    }
}

#searchButton:active,
.primary-btn:active,
.secondary-btn:active,
.scroll-button:active {
    transform: scale(0.98);
}


/* =========================================================
   4. INPUTS — SOFT FOCUS
========================================================= */

input {
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}

input:focus {
    border-color: var(--sage);
    box-shadow: 0 0 0 4px rgba(123, 135, 115, 0.12);
}


/* =========================================================
   5. DESKTOP GALLERY — PHOTO HOVER
========================================================= */

.gallery-item {
    overflow: hidden;
    border-radius: 16px;
}

.gallery-item img,
.gallery>img {
    transition:
        transform 0.7s var(--motion-smooth),
        filter 0.5s ease;
}

@media (hover: hover) and (pointer: fine) {

    .gallery-item:hover img,
    .gallery>img:hover {
        transform: scale(1.045);
        filter: brightness(1.03);
    }
}


/* =========================================================
   6. ACCESSIBLE KEYBOARD FOCUS
========================================================= */

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: 4px;
    border-radius: 6px;
}


/* =========================================================
   7. REDUCED MOTION ACCESSIBILITY
========================================================= */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(28px);

    transition:
        opacity 0.8s ease,
        transform 0.8s var(--motion-smooth);

    transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Optional stagger for consecutive cards */
.reveal-delay-1 {
    --reveal-delay: 100ms;
}

.reveal-delay-2 {
    --reveal-delay: 200ms;
}

.reveal-delay-3 {
    --reveal-delay: 300ms;
}

/* =========================================================
   ALEX & PAULO — EDITORIAL WEDDING REDESIGN
   Coordinated overrides; existing RSVP, slideshow, lightbox,
   modal and mobile-stack styles remain available above.
========================================================= */
:root {
    --bg: #f7f3ed;
    --card: #fffdf9;
    --muted: #766d63;
    --border: #ded4c8;
    --sage: #7b8773;
    --olive: #5f6650;
    --brown: #8a6f5b;
    --beige: #d8c9b5;
    --paper: #f7f3ed;
    --paper-deep: #eee7dd;
    --ink: #302b26;
    --line: #ded4c8;
    --accent: #8c7962;
    --shadow: 0 14px 38px rgba(56, 43, 31, .065);
    --shadow-hover: 0 20px 46px rgba(56, 43, 31, .11);
    --radius: 3px;
}

html {
    scroll-padding-top: 86px;
}

body {
    background-color: var(--paper);
    background-image: linear-gradient(rgba(247, 243, 237, .90), rgba(247, 243, 237, .90)), url("images/wedding-background.png");
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--ink);
    font-family: "DM Sans", "Inter", sans-serif;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

body.password-locked {
    overflow: hidden;
    height: 100vh;
}

body,
p,
input,
button,
a {
    font-family: "DM Sans", "Inter", sans-serif;
}

h1,
h2,
h3,
h4 {
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    color: var(--ink);
}

h1 {
    padding-top: 0;
    font-size: clamp(3.25rem, 8vw, 7.2rem);
    letter-spacing: .075em;
    line-height: .98;
}

h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.05;
}

h3 {
    font-size: clamp(1.65rem, 2.8vw, 2.2rem);
    line-height: 1.18;
}

p {
    color: var(--ink);
}

.anp-initial {
    font-family: "Pinyon Script", cursive;
    font-size: 1.18em;
    color: var(--olive);
    font-weight: 400;
}

/* Navigation */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 900;
    width: 100%;
    min-height: 74px;
    padding: 0 clamp(20px, 5vw, 76px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(247, 243, 237, .94);
    border-bottom: 1px solid rgba(140, 121, 98, .22);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.nav-wordmark {
    font-family: "Cormorant Garamond", serif;
    color: var(--ink);
    text-decoration: none;
    font-size: 1.75rem;
    letter-spacing: .08em;
    white-space: nowrap;
}

.nav-wordmark span {
    color: var(--brown);
    font-style: italic;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.4vw, 36px);
}

.nav-links a {
    color: var(--muted);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .67rem;
    transition: color .25s ease;
}

.nav-links a:hover {
    color: var(--ink);
}

.nav-links .nav-rsvp {
    padding: 10px 19px;
    border: 1px solid var(--accent);
    color: var(--ink);
}

.nav-links .nav-rsvp:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.nav-toggle {
    display: none;
    background: transparent;
    padding: 8px;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
}

.nav-toggle span {
    display: block;
    width: 19px;
    height: 1px;
    background: var(--ink);
    margin: 5px auto;
    transition: transform .2s ease;
}

/* Hero */
.hero {
    min-height: min(850px, calc(100svh - 74px));
    min-height: min(850px, calc(100vh - 74px));
    padding: 100px 24px 82px;
    gap: 0;
    text-align: center;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-image: linear-gradient(180deg, rgba(24, 21, 18, .25), rgba(24, 21, 18, .50)), url("images/hero-background.webp");
    background-size: cover;
    background-position: center 54%;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255, 255, 255, .35);
    pointer-events: none;
    z-index: -1;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18, 16, 14, .12), rgba(18, 16, 14, .30));
    z-index: -1;
}

.hero h1 {
    color: #fffdf8;
    margin: 0 0 18px;
    font-weight: 300;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .12);
}

.hero-subtitle {
    color: rgba(255, 253, 248, .9);
    font-size: .72rem;
    letter-spacing: .34em;
    margin: 0;
}

.hero-date {
    color: #fffdf8;
    margin-top: 28px;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    letter-spacing: .12em;
}

.hero-time {
    color: rgba(255, 253, 248, .88);
    font-size: .78rem;
    letter-spacing: .2em;
    margin-top: 0;
}

.hero-subtext {
    color: #fffdf8;
    font-size: 1.3rem;
    letter-spacing: .1em;
}

.scroll-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    margin-top: 26px;
    padding: 12px 26px;
    border: 1px solid rgba(255, 253, 248, .8);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .2em;
}

.scroll-button:hover {
    background: #fffdf8;
    color: var(--ink);
}

.countdown {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(8px, 2vw, 22px);
    margin-top: 28px;
    color: #fffdf8;
}

.countdown-unit {
    display: flex;
    min-width: 48px;
    flex-direction: column;
    align-items: center;
}

.countdown-unit span {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.7rem, 3.5vw, 2.5rem);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.countdown-unit small {
    margin-top: 7px;
    font-size: .55rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 253, 248, .78);
}

.countdown-colon {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.8rem;
    opacity: .7;
    line-height: 1;
}

/* Quick links */
.quick-links {
    margin: -1px auto 0;
    padding: 0 clamp(20px, 4vw, 54px);
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    background: var(--paper-deep);
    border-bottom: 1px solid var(--line);
}

.quick-links a {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px 10px;
    min-height: 96px;
    padding: 18px 18px;
    text-decoration: none;
    color: var(--ink);
    border-right: 1px solid rgba(140, 121, 98, .2);
    transition: background .25s ease;
}

.quick-links a:first-child {
    border-left: 1px solid rgba(140, 121, 98, .2);
}

.quick-links a:hover {
    background: rgba(255, 253, 249, .7);
}

.quick-number {
    grid-column: 1 / -1;
    font-size: .6rem;
    letter-spacing: .18em;
    color: var(--accent);
}

.quick-links a>span:nth-child(2) {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.18rem;
    line-height: 1.15;
    text-align: center;
}

.quick-item {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.18rem;
    line-height: 1.15;
    text-align: center;
}

.quick-arrow {
    font-size: .9rem;
    color: var(--accent);
}

.quick-icon {
    font-size: 28px;
    line-height: 1.1;
    color: #907b63;
}


/* Section rhythm and cards */
.section {
    max-width: 1200px;
    padding: clamp(56px, 7vw, 100px) clamp(20px, 4vw, 48px);
    margin: 0 auto;
    scroll-margin-top: 80px;
}

.section-header {
    margin: 0 auto 42px;
}

.section-header h2 {
    font-size: clamp(2.7rem, 5vw, 4.2rem);
    letter-spacing: -.015em;
    margin-bottom: 18px;
}

.section-line {
    width: 54px;
    height: 1px;
    background: var(--accent);
    margin: 0 auto;
}

.card,
.gift-card,
.faq-item {
    background: rgba(255, 253, 249, .94);
    border-top: 1px solid var(--line);
}

.card {
    padding: clamp(22px, 4vw, 42px);
    margin-bottom: 28px;
}

.card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.venue-info h3 {
    max-width: 650px;
    margin: 8px 0 6px;
}

.venue-type,
.navigation-label,
.gift-eyebrow {
    letter-spacing: .2em;
    font-size: .65rem;
    color: var(--accent);
}

.venue-address,
.venue-note {
    color: var(--muted);
}

.venue-img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: cover;
}

.navigation-button {
    border: 1px solid var(--line);
    background: #fffdf9;
    color: var(--ink);
    border-radius: 0;
}

.navigation-button:hover {
    border-color: var(--accent);
    background: var(--paper-deep);
}

input {
    border-radius: 0;
    border: 1px solid var(--line);
    background: #fffdf9;
    padding: 15px 16px;
}

input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(140, 121, 98, .1);
}

button {
    border-radius: 0;
    letter-spacing: .08em;
}

.primary-btn,
#searchButton,
#confirmButton {
    background: var(--brown);
    color: #fffdf9;
    letter-spacing: .08em;
}

.primary-btn:hover,
#searchButton:hover,
#confirmButton:hover {
    background: var(--olive);
}

.secondary-btn {
    border: 1px solid var(--line);
    letter-spacing: .08em;
}

.rsvp-section {
    max-width: 900px;
}

.rsvp-card {
    padding: clamp(24px, 4vw, 42px);
}

.step-number {
    color: var(--accent);
    font-size: .68rem;
    letter-spacing: .18em;
}

.rsvp-card h3 {
    margin: 5px 0 8px;
}

#guestName {
    font-family: "Cormorant Garamond", serif;
    font-size: 2rem;
}

#rsvpStatus {
    letter-spacing: .12em;
    font-size: .73rem;
}

/* Gallery — retain three columns on desktop and the swipe stack on mobile */
.gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.gallery img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 8px 24px rgba(48, 43, 38, .08);
    transition: transform .45s ease, box-shadow .45s ease;
}

.gallery img:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 28px rgba(48, 43, 38, .13);
}

.mobile-gallery-card {
    overflow: hidden;
}

.mobile-gallery-hint {
    color: var(--muted);
    font-size: .7rem;
    letter-spacing: .13em;
    text-transform: uppercase;
}

#pageBreak {
    border-radius: 2px;
    border-color: rgba(222, 212, 200, .8);
    box-shadow: none;
}

#quote {
    font-size: clamp(1.8rem, 4vw, 3.1rem);
    line-height: 1.2;
    padding: clamp(42px, 8vw, 105px);
    color: #4d443b;
}

/* Attire and gift editorial cards */
.attire-card {
    overflow: hidden;
}

.attire-card>h4 {
    font-family: "DM Sans", sans-serif;
    font-size: .65rem;
    letter-spacing: .22em;
    color: var(--accent);
}

.attire-meta {
    color: var(--ink);
    letter-spacing: .12em;
    font-size: .7rem;
    text-transform: uppercase;
}

.attire-content img,
#attireImage {
    max-height: 650px;
    object-fit: contain;
}

.attire-prev,
.attire-next {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--brown);
    width: 42px;
}

.attire-prev:hover,
.attire-next:hover {
    background: var(--brown);
    color: white;
}

.dot {
    background: #d8cfc4;
}

.dot.active {
    background: var(--olive);
}

.gift-card {
    overflow: hidden;
    border-radius: 2px;
}

.gift-content {
    padding: clamp(28px, 5vw, 65px);
}

.gift-content h3 {
    font-size: clamp(2rem, 4vw, 3rem);
}

.gift-content p {
    color: var(--muted);
}


.gift-signoff {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.35rem;
    color: var(--brown);
}

/* FAQ and footer */
.faq {
    gap: 14px;
}

.faq-item {
    padding: 24px 28px;
    box-shadow: none;
}

.faq-item h4 {
    font-size: 1.55rem;
    margin-bottom: 8px;
}

.faq-item p {
    color: var(--muted);
    font-size: .94rem;
}

footer {
    background: var(--brown);
    text-align: right;
    color: var(--paper);
}

.footer-copyright {
    color: rgba(247, 243, 237, .52);
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Anchor offsets, motion and responsive navigation */
#attendance,
#aisle,
#archives,
#attire,
#presents,
#answers {
    scroll-margin-top: 86px;
}

@media (max-width: 900px) {
    .site-nav {
        min-height: 68px;
        padding: 0 22px;
    }

    .nav-toggle {
        display: block;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 12px 22px 22px;
        background: rgba(247, 243, 237, .98);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 18px 24px rgba(48, 43, 38, .08);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links a {
        padding: 13px 4px;
        border-bottom: 1px solid rgba(222, 212, 200, .65);
        font-size: .72rem;
    }

    .nav-links .nav-rsvp {
        margin-top: 12px;
        padding: 12px 16px;
        text-align: center;
        border: 1px solid var(--accent);
    }

    .quick-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0 18px;
    }

    .quick-links a {
        min-height: 78px;
        padding: 13px 15px;
        border-bottom: 1px solid rgba(140, 121, 98, .2);
    }

    .quick-links a:nth-child(odd) {
        border-left: 1px solid rgba(140, 121, 98, .2);
    }

    .hero {
        min-height: min(780px, calc(100vh - 68px));
        padding: 78px 24px 64px;
    }

    .section {
        padding: 60px 22px;
    }
}

@media (max-width: 600px) {
    .site-nav {
        min-height: 62px;
    }

    .nav-wordmark {
        font-size: 1.55rem;
    }

    .hero {
        min-height: 78vh;
        background-position: center;
        padding: 62px 22px 54px;
    }

    .hero::before {
        inset: 10px;
    }

    .hero-subtitle {
        max-width: 290px;
        line-height: 1.8;
        font-size: .62rem;
        letter-spacing: .22em;
    }

    .hero-date {
        margin-top: 22px;
    }

    .countdown {
        gap: 7px;
        margin-top: 122px;
    }

    .countdown-unit {
        min-width: 43px;
    }

    .countdown-unit span {
        font-size: 1.7rem;
    }

    .countdown-unit small {
        font-size: .48rem;
        letter-spacing: .1em;
    }

    .countdown-colon {
        font-size: 1.4rem;
    }

    .quick-links {
        padding: 0 12px;
    }

    .quick-links a {
        min-height: 75px;
        padding: 12px 10px;
    }

    .quick-links a>span:nth-child(2) {
        font-size: 1.02rem;
    }

    .section {
        padding: 52px 16px;
    }

    .section-header {
        margin-bottom: 30px;
    }

    .section-header h2 {
        font-size: clamp(2.4rem, 11vw, 3.2rem);
    }

    .card {
        padding: 22px 18px;
        margin-bottom: 18px;
    }

    .gallery {
        display: none !important;
    }

    .mobile-gallery {
        display: block !important;
    }

    .gift-card {
        grid-template-columns: 1fr;
    }

    .gift-image {
        min-height: 240px;
    }

    .gift-image img {
        max-height: 320px;
        object-fit: cover;
    }

    .faq-item {
        padding: 20px 18px;
    }

    #quote {
        padding: 38px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}


/* =========================================================
   WARM EDITORIAL CARD SYSTEM — SITE-WIDE (GALLERY EXCLUDED)
   Compact spacing, muted surfaces and subtle definition.
   The gallery card and gallery-specific styling are untouched.
========================================================= */
:root {
    --card: #f1ece4;
    --border: #ded4c7;
    --shadow: 0 7px 22px rgba(66, 49, 34, 0.055);
    --shadow-hover: 0 11px 28px rgba(66, 49, 34, 0.09);
}

/* Reduce the vertical whitespace between sections without changing gallery layout. */
.section:not(#archives) {
    padding-top: clamp(28px, 3.8vw, 46px);
    padding-bottom: clamp(28px, 3.8vw, 46px);
}

.section-header {
    margin-bottom: 18px;
}

/* General content cards: warm, softly contrasted, not stark white. */
.section:not(#archives) .card,
.section:not(#archives) .gift-card,
.section:not(#archives) .attire-card,
.section:not(#archives) .rsvp-card,
.modal-card,
.rsvp-success-popup {
    background: linear-gradient(145deg, #f4efe7 0%, #eee7dd 100%);
    border: 1px solid #ded3c5;
    border-radius: 15px;
    box-shadow: 0 7px 22px rgba(66, 49, 34, 0.055);
}

.section:not(#archives) .card:hover,
.section:not(#archives) .gift-card:hover {
    box-shadow: 0 11px 28px rgba(66, 49, 34, 0.09);
}

/* Compact card padding throughout the page, with extra room for readable RSVP fields. */
.section:not(#archives)>.card {
    padding: clamp(20px, 2.5vw, 30px);
}

/* Ceremony and reception are a paired editorial feature on wide screens. */
.venue-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(16px, 2vw, 24px);
}

.venue-card {
    min-width: 0;
    margin: 0 0 8px;
    padding: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.venue-info {
    padding: 25px 24px 14px;
}

.venue-info h3 {
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.2;
}

.venue-note,
.venue-address {
    font-size: 13px;
    line-height: 1.65;
}

.map-container {
    padding: 0 20px;
}

.venue-img {
    display: block;
    width: 100%;
    height: clamp(145px, 17vw, 205px);
    object-fit: cover;
    border-radius: 9px;
}

.venue-card .navigation {
    margin-top: auto;
    padding: 18px 20px 22px;
}

.venue-card .navigation-label {
    margin-bottom: 10px;
}

.venue-card .navigation-buttons {
    gap: 9px;
}

.venue-card .navigation-button {
    min-width: 0;
    padding: 10px 12px;
    font-size: 12px;
}

/* Gift panel is more compact but retains its illustration/text split. */
.gift-section .gift-card {
    max-width: 880px;
    margin: 24px auto 0;
    background: linear-gradient(145deg, #f4efe7 0%, #eee7dd 100%);
    border-color: #ded3c5;
    border-radius: 15px;
    box-shadow: 0 7px 22px rgba(66, 49, 34, 0.055);
}

.gift-section .gift-image {
    min-height: 250px;
    padding: 24px;
}

.gift-section .gift-image img {
    max-height: 210px;
}

.gift-section .gift-content {
    padding: 32px 34px;
}

/* FAQ is intentionally a simple divider-based accordion, not a stack of cards. */
#answers .faq {
    gap: 0;
    /* border-top: 1px solid #d9cfc2; */
}

#answers .faq-item {
    background: transparent;
    border: 0;
    /* border-bottom: 1px solid #d9cfc2;
    border-radius: 0; */
    box-shadow: none;
    padding: 20px 0;
}

/* RSVP cards: defined from the page, but quieter and less oversized. */
.rsvp-section {
    max-width: 900px;
}

.rsvp-section .rsvp-card {
    padding: clamp(22px, 3vw, 32px);
    margin-bottom: 16px;
}

@media (max-width: 760px) {
    .venue-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .venue-info {
        padding: 22px 20px 12px;
    }

    .venue-img {
        height: 190px;
    }

    .venue-card .navigation {
        padding: 16px 18px 20px;
    }

    .gift-section .gift-image {
        min-height: 0;
        padding: 22px 20px 8px;
    }

    .gift-section .gift-content {
        padding: 24px 22px 28px;
    }
}


/* =========================================================
   COMPACT EDITORIAL LAYOUT — ALL SECTIONS EXCEPT THE GALLERY
   Smaller type, tighter rhythm, warm visible cards, and responsive grids.
========================================================= */
:root {
    --compact-card: #eee7dc;
    --compact-card-light: #f3eee6;
    --compact-border: #d6c9b9;
    --compact-shadow: 0 5px 17px rgba(61, 46, 32, .07);
    --compact-shadow-hover: 0 9px 23px rgba(61, 46, 32, .11);
}

/* Keep the existing page background visible around cards; reduce overall scale. */
.section:not(#archives) {
    max-width: 1320px;
    padding: clamp(30px, 3.4vw, 52px) clamp(18px, 3vw, 42px);
}

.section-header {
    margin-bottom: clamp(18px, 2.2vw, 28px);
}

.section-header h2 {
    font-size: clamp(2rem, 3.5vw, 3.15rem);
    line-height: 1.08;
    margin-bottom: 12px;
}

.section-intro {
    max-width: 620px;
    margin: 14px auto 0;
    font-size: .92rem;
    line-height: 1.6;
}

.section-line {
    width: 42px;
}

/* A subtle warm surface: visible against the page without stark white panels. */
.section:not(#archives) .card,
.section:not(#archives) .gift-card,
.section:not(#archives) .attire-card,
.section:not(#archives) .rsvp-card,
.modal-card,
.rsvp-success-popup {
    background: linear-gradient(135deg, var(--compact-card-light) 0%, var(--compact-card) 100%);
    border: 1px solid var(--compact-border);
    border-radius: 12px;
    box-shadow: var(--compact-shadow);
}

.section:not(#archives) .card:hover,
.section:not(#archives) .gift-card:hover {
    box-shadow: var(--compact-shadow-hover);
}

.section:not(#archives) .card {
    padding: clamp(18px, 2.2vw, 27px);
    margin-bottom: 14px;
}

.section:not(#archives) h3 {
    font-size: clamp(1.25rem, 1.8vw, 1.7rem);
    line-height: 1.2;
}

.section:not(#archives) p {
    line-height: 1.6;
}

/* Venue cards are compact and paired on wide screens. */
#aisle .venue-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 22px);
}

#aisle .venue-card {
    min-width: 0;
    margin: 0;
    padding: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#aisle .venue-info {
    padding: clamp(18px, 2vw, 25px) clamp(18px, 2vw, 24px) 10px;
}

#aisle .venue-info h3 {
    font-size: clamp(1.2rem, 1.7vw, 1.55rem);
    line-height: 1.22;
}

#aisle .venue-note,
#aisle .venue-address {
    font-size: .83rem;
    line-height: 1.55;
}

#aisle .map-container {
    padding: 0 18px;
}

#aisle .venue-img {
    height: clamp(130px, 15vw, 190px);
    max-height: none;
    object-fit: cover;
}

#aisle .venue-card .navigation {
    margin-top: auto;
    padding: 14px 18px 18px;
}

#aisle .venue-card .navigation-label {
    margin-bottom: 8px;
}

#aisle .venue-card .navigation-buttons {
    gap: 8px;
}

#aisle .venue-card .navigation-button {
    padding: 9px 10px;
    font-size: .72rem;
}

/* Attire display stays focused and doesn't stretch unnecessarily wide. */
#attire .attire-card {
    max-width: 980px;
    margin-inline: auto;
    padding: clamp(16px, 2vw, 24px);
}

#attire .attire-showcase {
    gap: clamp(10px, 2vw, 22px);
}

#attire .attire-content img,
#attire #attireImage {
    max-height: min(58vh, 500px);
}

#attire .attire-meta {
    font-size: .66rem;
}

/* Gift guide is a compact two-column editorial panel on desktop. */
#presents .gift-card {
    max-width: 980px;
    margin: 0 auto;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    overflow: hidden;
}

#presents .gift-image {
    min-height: 0;
    padding: clamp(18px, 2.2vw, 28px);
    display: flex;
    align-items: center;
    justify-content: center;
}

#presents .gift-image img {
    width: 100%;
    max-height: 270px;
    object-fit: contain;
}

#presents .gift-content {
    padding: clamp(22px, 3vw, 36px);
}

#presents .gift-content h3 {
    font-size: clamp(1.7rem, 2.5vw, 2.35rem);
}

#presents .gift-content p {
    font-size: .92rem;
    line-height: 1.7;
    margin-top: 35px;
}

/* FAQs: accessible native collapsible rows, not answer cards. */
#answers .faq {
    display: block;
    max-width: 1000px;
    margin: 0 auto;
    border-top: 1px solid var(--compact-border);
}

#answers .faq-item {
    display: block;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--compact-border);
    border-radius: 0;
    box-shadow: none;
}

#answers .faq-item summary {
    position: relative;
    list-style: none;
    cursor: pointer;
    padding: 16px 34px 16px 0;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.2rem, 1.9vw, 1.55rem);
    line-height: 1.25;
    color: var(--ink);
}

#answers .faq-item summary::-webkit-details-marker {
    display: none;
}

#answers .faq-item summary::before {
    content: ">";
    display: inline-block;
    margin-right: 12px;
    font-family: Arial, sans-serif;
    font-size: .7em;
    vertical-align: .13em;
    transition: transform .2s ease;
}

#answers .faq-item[open] summary::before {
    transform: rotate(90deg);
}

#answers .faq-answer {
    padding: 0 28px 17px 27px;
    max-width: 900px;
}

#answers .faq-answer p {
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.7;
}

/* RSVP cards use a compact two-column grid when multiple steps are visible. */
#attendance {
    max-width: 1120px;
}

#attendance .section-header {
    grid-column: 1 / -1;
}

#attendance {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 0 clamp(14px, 2vw, 22px);
}

#attendance>.section-header {
    margin-bottom: 20px;
}

#attendance>.rsvp-card {
    min-width: 0;
    padding: clamp(18px, 2vw, 26px);
    margin: 0 0 14px;
}

#attendance>.rsvp-card h3 {
    font-size: clamp(1.2rem, 1.6vw, 1.5rem);
}

#attendance>.rsvp-card input {
    width: 100%;
    min-width: 0;
    padding: 12px 13px;
}

#attendance>.rsvp-card#reservationCard,
#attendance>.rsvp-card#partyCard,
#attendance>.rsvp-card#emailCard {
    align-self: stretch;
}

#attendance>.action-buttons {
    grid-column: 1 / -1;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

#attendance>.action-buttons.hidden {
    display: none !important;
}

#attendance>.rsvp-card.hidden {
    display: none !important;
}

#attendance .step-description,
#attendance .small-text {
    font-size: .88rem;
}

#attendance #guestName {
    font-size: 1.6rem;
}

/* Small screen layouts: stack paired components without changing the gallery. */
@media (max-width: 760px) {
    .section:not(#archives) {
        padding: 30px 18px;
    }

    .section-header h2 {
        font-size: clamp(1.9rem, 7vw, 2.6rem);
    }

    #aisle .venue-grid {
        grid-template-columns: 1fr;
    }

    #aisle .venue-img {
        height: 185px;
    }

    #presents .gift-card {
        grid-template-columns: 1fr;
    }

    #presents .gift-image img {
        max-height: 210px;
    }

    #attendance {
        grid-template-columns: 1fr;
    }

    #attendance>.section-header,
    #attendance>.action-buttons {
        grid-column: 1;
    }

    #attendance>.rsvp-card {
        margin-bottom: 12px;
    }

    #answers .faq-item summary {
        font-size: 1.22rem;
        padding: 15px 0;
    }

    #answers .faq-answer {
        padding: 0 4px 16px 25px;
    }
}

@media (max-width: 480px) {
    #aisle .venue-info {
        padding: 18px 17px 9px;
    }

    #aisle .venue-card .navigation {
        padding: 13px 16px 16px;
    }

    #presents .gift-content {
        padding: 22px 20px 25px;
    }

    #attendance>.rsvp-card {
        padding: 18px 16px;
    }
}

/* =========================================================
   COMPACT EDITORIAL GALLERY — desktop grid, mobile swipe
   Gallery-only adjustment: keep the mobile swipe stack intact.
   ========================================================= */
#archives.section {
    max-width: 1440px;
    padding: clamp(34px, 4vw, 58px) clamp(14px, 2.2vw, 32px);
}

#archives .section-header {
    margin-bottom: clamp(18px, 2.4vw, 30px);
}

#archives .section-header h2 {
    font-size: clamp(2rem, 3.2vw, 3.1rem);
    margin-bottom: 12px;
}

#archives>.card {
    padding: clamp(10px, 1.4vw, 20px);
    margin-bottom: 0;
    background: linear-gradient(135deg, rgba(239, 232, 222, .88), rgba(248, 244, 237, .96));
    border: 1px solid rgba(190, 174, 154, .68);
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(55, 45, 35, .07);
}

#archives .gallery {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(7px, 1vw, 14px);
}

#archives .gallery img {
    width: 100%;
    aspect-ratio: 4 / 5;
    height: auto;
    border-radius: 3px;
    object-fit: cover;
}

@media (min-width: 1500px) {
    #archives .gallery {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    #archives .gallery {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    #archives.section {
        padding: 42px 14px;
    }

    #archives>.card {
        padding: 12px;
        border-radius: 12px;
    }

    #archives .gallery {
        display: none !important;
    }

    #archives .mobile-gallery {
        display: block !important;
    }

    #archives .mobile-gallery-stack {
        max-width: 330px;
    }
}

@media (max-width: 380px) {
    #archives .mobile-gallery-stack {
        max-width: 290px;
    }
}


/* =========================================================
   ATTENDANCE INITIAL STATE — center Find Your Invitation
   while it is the only visible RSVP card.
   When reservationCard is revealed by the existing search logic,
   the search card returns to its original first-column position.
   ========================================================= */
#attendance>#searchCard {
    transition: grid-column .25s ease, width .25s ease, margin .25s ease;
}

#attendance:not(:has(#reservationCard:not(.hidden)))>#searchCard {
    grid-column: 1 / -1;
    width: min(100%, 560px);
    justify-self: center;
    margin-inline: auto;
}

#attendance:has(#reservationCard:not(.hidden))>#searchCard {
    grid-column: auto;
    width: auto;
    justify-self: stretch;
    margin-inline: 0;
}

@media (max-width: 760px) {

    #attendance:not(:has(#reservationCard:not(.hidden)))>#searchCard,
    #attendance:has(#reservationCard:not(.hidden))>#searchCard {
        grid-column: 1;
        width: 100%;
        justify-self: stretch;
        margin-inline: 0;
    }
}


/* =========================================================
   GALLERY SCROLL PERFORMANCE
   Preserve the current layout and interactions while reducing
   repeated paint work as the gallery moves through the viewport.
   ========================================================= */

/* Decode off the main rendering path where supported. */
#archives .gallery img,
#archives .mobile-gallery img {
    content-visibility: auto;
    contain-intrinsic-size: auto 420px;
}

/* Avoid animating both transform and shadow on every thumbnail.
   Large, soft shadows are relatively expensive to repaint while scrolling. */
#archives .gallery img {
    box-shadow: none;
    transition: transform .22s ease;
    backface-visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
    #archives .gallery img:hover {
        transform: translateY(-2px);
        box-shadow: none;
        filter: none;
    }
}

/* Keep swipe cards lightweight; the existing JavaScript still controls
   the active card and its swipe transitions. */
#archives .mobile-gallery-card {
    contain: layout paint;
}

#archives .mobile-gallery-card img {
    display: block;
    width: 100%;
    backface-visibility: hidden;
}

/* Reduce motion for visitors who request it, and avoid costly reveal movement. */
@media (prefers-reduced-motion: reduce) {

    #archives .gallery img,
    #archives .mobile-gallery-card,
    #archives .mobile-gallery-card img {
        transition: none !important;
        animation: none !important;
    }
}


/* =====================================================
   PRENUP PHOTO + QUOTE — RESPONSIVE SIDE-BY-SIDE LAYOUT
   Desktop: horizontal
   Mobile/tablet: vertical
   ===================================================== */

.prenup-interlude {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    width: 100%;
    overflow: hidden;
    background-color: #f4eee3;
}

/* PHOTO SIDE */

.prenup-photo-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 420px;
    overflow: hidden;
    isolation: isolate;
    background-color: #e8dfd0;
}

.prenup-photo {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
    object-position: center center;
}

/* QUOTE SIDE */

.prenup-quote {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    padding: clamp(35px, 5vw, 75px) clamp(22px, 4vw, 60px);
    text-align: center;
    background-color: #f4eee3;
}

/* Quote typography */

.quote-eyebrow {
    margin: 0 0 20px;
    font-family: "Inter", sans-serif;
    font-size: clamp(8px, 0.8vw, 10px);
    font-weight: 400;
    letter-spacing: 0.20em;
    line-height: 1.8;
    color: #817a61;
}

.quote-heading {
    max-width: 540px;
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(25px, 3vw, 43px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #30382c;
}

.quote-signature {
    margin: 18px 0 0;
    font-family: "Pinyon Script", cursive;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    line-height: 1.3;
    color: #817a61;
}

/* Decorative dividers */

.quote-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: min(200px, 80%);
}

.quote-ornament-top {
    margin-bottom: 24px;
}

.quote-ornament-bottom {
    margin-top: 24px;
}

.ornament-line {
    flex: 1;
    display: block;
    height: 1px;
    background-color: rgba(129, 122, 97, 0.5);
}

.ornament-leaf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
}

.ornament-leaf img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* =====================================================
   TABLET AND MOBILE — STACK VERTICALLY
   ===================================================== */

@media (max-width: 760px) {
    .prenup-interlude {
        grid-template-columns: minmax(0, 1fr);
    }

    .prenup-photo-wrap {
        width: 100%;
        height: clamp(260px, 75vw, 440px);
        min-height: 0;
    }

    .prenup-photo {
        width: 100%;
        height: 100%;
        min-height: 0;
        object-position: center center;
    }

    .prenup-quote {
        padding: 48px 22px 52px;
    }

    .quote-eyebrow {
        margin-bottom: 20px;
        font-size: 9px;
        letter-spacing: 0.18em;
    }

    .quote-heading {
        font-size: clamp(25px, 6.5vw, 36px);
        line-height: 1.55;
        letter-spacing: 0.10em;
    }

    .quote-signature {
        margin-top: 17px;
        font-size: 34px;
    }

    .quote-ornament-top {
        margin-bottom: 22px;
    }

    .quote-ornament-bottom {
        margin-top: 22px;
    }

    .desktop-break {
        display: none;
    }
}

/* Wedding Website Menu Button */
.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;

  min-height: 180px;
  padding: 24px 16px;

  background-color: #eee9df;
  border: 1px solid #d9d0c4;

  color: #453b31;
  text-decoration: none;
  text-align: center;

  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 29px;
  font-weight: 400;
  line-height: 1.15;

  transition: background-color 0.3s ease;
}

.menu-item:hover {
  background-color: #e5ded2;
}

.menu-icon {
  color: #9a8873;
  flex-shrink: 0;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .menu-item {
    min-height: 150px;
    padding: 20px 10px;
    gap: 16px;
    font-size: 24px;
  }

  .menu-icon {
    width: 20px;
    height: 20px;
  }
}

/* ---------------------------------------------
   SEARCH INPUT WITH CLEAR BUTTON
   --------------------------------------------- */

.search-input-wrapper {
    position: relative;
    width: 100%;
}

.search-input-wrapper input {
    width: 100%;
    padding-right: 45px;
}

/* CLEAR BUTTON */

.clear-search-button {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);

    width: 28px;
    height: 28px;

    display: none;
    align-items: center;
    justify-content: center;

    background: transparent;
    border: none;

    color: #777;
    font-size: 23px;
    line-height: 1;

    cursor: pointer;
    padding: 0;

    transition: color 0.2s ease;
}

.clear-search-button:hover {
    color: #222;
}

.clear-search-button.visible {
    display: flex;
}