*,*::before,*::after{
    box-sizing:border-box;
    padding:0;
    margin:0;
    background:none;
    text-decoration:none;
    outline:none;
    font-family:inherit;
    font-size:inherit;
    line-height:inherit;
    font-weight:inherit;
    font-style:inherit;
    color:inherit;
    border:none;
    list-style:none;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

*:visited,*:active{
    color:inherit;
}

@font-face{
    font-family:"Campton";
    src:url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap");
}

@font-face{
    font-family:"Didot LT";
    src:url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@300;400;500;600&display=swap");
}

.rouge-script-regular {
    font-family: "Rouge Script", cursive;
    font-weight: 400;
    font-style: normal;
}

.dancing-script-400 {
    font-family: "Dancing Script", cursive;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.dancing-script-600 {
    font-family: "Dancing Script", cursive;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.dancing-script-800 {
    font-family: "Dancing Script", cursive;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}
  

:root{
    --c-bg: hsl(1, 17%, 95%);
    /* --c-text: hsl(0, 15%, 55%); */
    --c-text: #484848;
    --font-family: "Inter" , sans-serif;
    --font-serif: "Playfair Display" , Didot, serif;
    --font-size: 18px;
    --font-lineheight: 26px;
    --font-weight: 400;
    --font-style: normal;
    --font-scale-xs: 0.79;
    --font-scale-s: 0.889;
    --font-scale-m: 1.125;
    --font-scale-l: 1.226;
    --font-scale-xl: 1.2;
    --font-scale-xxl: 3;
    --l-regular: 24rem;
    --l-wide: 36rem;
    --l-archive: 37rem;
    --l-archive-wide: 57rem;
    --l-text: 19rem;
    font-size:var(--font-lineheight);
    font-family:var(--font-family);
    font-weight:var(--font-weight);
    font-style:var(--font-style);
    background:var(--c-bg);
    color:var(--c-text);
}


::-moz-selection{
    background:var(--c-text);
    color:var(--c-bg);
}

::selection{
    background:var(--c-text);
    color:var(--c-bg);
}

body,html{
    width:100%;
    height:100%;
}

body *,html *{
    font-size:var(--font-size);
    line-height:1rem;
    letter-spacing:0.05em;
}

body{
    overflow:auto;
    overflow-x:hidden;
}

section.sec {
    margin-top: 8rem;
    margin-bottom: 8rem;
}

.opening{
    width:100%;
    height:100vh;
    min-height:500px;
    display:flex;
    position:relative;
    overflow:hidden;
}

.opening::before,.opening::after{
    content:"";
    display:block;
    width:90%;
    height:35%;
    position:absolute;
    background-size:contain;
    background-repeat:no-repeat;
    left:0;
    right:0;
    margin:0 auto;
    opacity:0.8;
}

.opening::before{
    background-position:center bottom;
    top:5vmin;
    background-image:url("images/illustration_1.jpg");
}

.opening::after{
    background-position:center top;
    bottom:5vmin;
    background-image:url("images/illustration_2.jpg");
}

.opening-title{
    display:flex;
    text-align:center;
    margin:auto;
    font-family:var(--font-serif);
    font-size:clamp(3rem, 10vmin, 8rem);
    z-index:2;
    position:relative;
}

.opening-title span {
    display:inline;
    font-size:inherit;
    letter-spacing:0.2em;
}

.opening-title span:nth-child(2){
    margin:0 .3em;
}

.text{
    text-align:center;
    margin-top:1rem;
    margin-bottom:1rem;
    padding:0 1rem;
}


.text .optional br{
    display:none;
}


.text p:not(:last-child){
    margin-bottom:1rem;
}

.opening+.text{
    margin-top:0;
}


.text-big{
    /*font-size:calc(var(--font-size) * var(--font-scale-xl));*/
    font-size: 1.1rem;
    line-height:1.2rem;
    letter-spacing:0.1em;
}

.text-big:not(:last-child){
    margin-bottom:.5rem;
}

.text a{
    background:linear-gradient(to top, var(--c-text) 1px, transparent 1px);
    background-size:0% 100%;
    background-repeat:no-repeat;
    background-position:center center;
    transition-property:color, background-size;
    transition-duration:300ms;
    transition-timing-function:ease-in-out;
}

.text a:hover{
    background-size:100% 100%;
}

.date{
    margin-top:4rem;
    margin-bottom:3rem;
    padding:0 1rem;
}

.date-image{
    display:block;
    width:100%;
    height:auto;
}


.date-caption{
    position: static;
    display: block;
    text-align: center;
    margin-top: 0.75rem;
    font-family: var(--font-serif);
    /* font-size: calc(var(--font-size) * var(--font-scale-m)); */
    font-size: 3rem;
    letter-spacing: 0.1em;
    color: var(--c-text);
    font-style: italic;
}

.illustration-container{
    max-width:22rem;
    margin:2rem auto;
    padding:0 1rem;
}


.illustration-container-small{
    max-width:16rem;
}

.illustration-container-final{
    max-width:8rem;
    margin-bottom:0;
    padding-bottom:2rem;
}


.illustration{
    display:block;
    width:100%;
    height:auto;
}

/* Speech bubble for final image */
.illustration-container-final{
    position:relative;
}

.speech-bubble{
    position:absolute;
    top: -1.98rem;
    left: -2.25rem;
    background:#fff;
    color:#4d4c4c;
    padding:.3rem .6rem;
    border-radius:14px;
    border:4px solid #4d4c4c;
    box-shadow:0 3px 8px rgba(0,0,0,0.12);
    font-size:.82rem;
    line-height:.95rem;
    white-space:nowrap;
    z-index:2;
}

/* Tail with border (two-layer triangle) */
.speech-bubble::before{
    content: "";
    position: absolute;
    bottom: -14px;
    right: 16px;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 10px solid #4d4c4c;
}

.speech-bubble::after{
    content: "";
    position: absolute;
    bottom: -9px;
    right: 17px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 9px solid #fff;
}

/* Additional styles for list items */
.text ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.text li {
    margin-bottom: 0.5rem;
}

.text li:last-child {
    margin-bottom: 0;
}

.rsvp-button {
    display: block;
    background-color: #9caf88 !important; /* Sage green */
    color: #fff;
    text-decoration: none;
    padding: .8rem 2rem;
    margin: 1rem auto 0;
    border-radius: 5px;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-align: center;
    /* max-width: 200px; */
    width: 70%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(156, 175, 136, 0.3);
}

.rsvp-button:hover {
    background-color: #8a9a7a; /* Darker sage green on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(156, 175, 136, 0.4);
}

/* Attire color swatches */
.attire-swatches{
    display:grid;
    grid-template-columns:repeat(2, minmax(100px, 140px));
    gap:1.25rem 2rem;
    justify-content:center;
    align-items:center;
    margin:2rem auto 0;
}

.attire-swatch{
    width:120px;
    height:120px;
    border-radius:50%;
    box-shadow:0 2px 8px rgba(0,0,0,0.06);
    border: 5px inset #ffe5e52e
}

.swatch-lavender{ background:#c9afd1; }
.swatch-sage{ background:#b5c4a6; }
.swatch-mauve{ background:#7d6d87; }
.swatch-deepgreen{ background:#5a6b52; }
.swatch-peach{ background:#d9b89a; }
.swatch-cream{ background:#ede7dd; }
.swatch-taupe{ background:#9b7d62; }
.swatch-silver{ background:#bdbeb9; }

/* ========================================
   DESKTOP MEDIA QUERIES (768px and above)
   ======================================== */
@media (min-width: 768px) {
    :root {
        --font-size: 21px;
        --font-lineheight: 34px;
        --font-scale-xl: 1.35;
    }

    .text {
        margin-top: 1rem;
        margin-bottom: 1rem;
        padding:0 10rem;
    }

    .text .optional br {
        display: initial;
    }

    .opening + .text {
        margin-top: 4rem;
    }

    .date-image {
        height: 2rem;
        width: auto;
        margin: 0 auto;
    }

    .illustration-container {
        margin: 4rem auto;
    }

    .illustration-container-final {
        padding-bottom: 4rem;
    }
    .attire-swatches{
        grid-template-columns:repeat(3, 160px);
        gap:2rem 3rem;
    }

    .attire-swatch{
        width:160px;
        height:160px;
    }
}

/* ========================================
   MOBILE MEDIA QUERIES (767px and below)
   ======================================== */
@media (max-width: 767px) {
    .opening {
        min-height: 350px;
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height for mobile browsers */
    }
    
    .opening::before,
    .opening::after {
        width: 95%;
        height: 30%;
        opacity: 0.6;
    }
    
    .opening::before {
        top: 3vmin;
    }
    
    .opening::after {
        bottom: 3vmin;
    }
    
    .opening-title {
        font-size: clamp(1.8rem, 6vmin, 6rem);
        padding: 0 1rem;
        flex-direction: column;
        gap: 0.2em;
    }
    
    .opening-title span {
        letter-spacing: 0.1em;
        display: block;
        margin: 0.2em 0;
    }

    .date-caption {
        font-size: 1.5rem;
    }

    .rsvp-button {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
        max-width: 180px;
        margin: 1.5rem auto 0;
    }

    /* Mobile-specific attire grid: 3 columns, smaller circles */
    .attire-swatches{
        grid-template-columns:repeat(3, 1fr);
        gap:1rem 1rem;
        max-width: 22rem;
        margin-left:auto;
        margin-right:auto;
    }

    .attire-swatch{
        width:90px;
        height:90px;
    }

    /* Mobile sizing for speech bubble */
    .speech-bubble{
        font-size:.7rem;
        line-height:.9rem;
        padding:.24rem .5rem;
        top:-1.2rem;
        left:-1.6rem;
        color:#4d4c4c;
        border:3px solid #4d4c4c;
        border-radius:12px;
    }

    .speech-bubble::before{
        bottom:-10px;
        right:12px;
        border-left:8px solid transparent;
        border-right:8px solid transparent;
        border-top:9px solid #4d4c4c;
    }

    .speech-bubble::after{
        bottom:-7px;
        right:13px;
        border-left:7px solid transparent;
        border-right:7px solid transparent;
        border-top:8px solid #fff;
    }

    /* Landscape mobile optimization */
    @media (orientation: landscape) {
        .opening {
            height: 100vh;
            min-height: 300px;
        }
        
        .opening::before,
        .opening::after {
            height: 20%;
        }
        
        .opening-title {
            font-size: clamp(2rem, 6vmin, 4rem);
            flex-direction: row;
            gap: 0.3em;
        }
        
        .opening-title span {
            display: inline;
        }
    }
}

/* Recolor blues to sand only for the gcash image */
img[src$="images/gcash.jpeg"]{
    filter:url(#recolor-blue-to-sand);
}

/* Floating/bobbing animation for Mollie section */
@keyframes mollie-float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}

#mollie-sec .illustration-container-final{
    animation: mollie-float 3s ease-in-out infinite;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    #mollie-sec .illustration-container-final{
        animation: none;
    }
}