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

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: "Montserrat", sans-serif;
    background: #faf5e9;
    color: #6f2430;
}

body.intro-active { overflow: hidden; }

/* =========================================================
   FULL SCREEN INTRO
========================================================= */

.wedding-intro {
    position: fixed;
    inset: 0;
    width: 100%;
    /* height: 100dvh; */
    z-index: 999999;
    overflow-x: hidden;
    overflow-y: auto;
    background: #faf6ec;
}

.wedding-intro.is-opened {
    overflow: hidden;
    overflow-y: auto;
}

.intro-background {
    position: relative;
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: clamp(28px, 7vh, 68px);
    padding-bottom: 28px;
}

.wedding-intro.is-opened .intro-background {
    min-height: 100dvh;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
}

.intro-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -10;
    background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.98), rgba(250,246,235,.96) 48%, rgba(241,229,203,.94) 100%);
}

.intro-background::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -9;
    pointer-events: none;
    opacity: .18;
    background-image: radial-gradient(circle, rgba(179,132,45,.9) 1px, transparent 1.5px);
    background-size: 90px 90px;
}

/* =========================================================
   DECORATIVE CORNERS
========================================================= */

.floral-corner {
    position: absolute;
    width: 310px;
    height: 350px;
    pointer-events: none;
    z-index: 1;
    opacity: .85;
}

.floral-corner.left {
    top: -80px;
    left: -85px;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(221,111,62,.65), transparent 12%),
        radial-gradient(ellipse at 65% 55%, rgba(53,113,68,.55), transparent 25%),
        radial-gradient(ellipse at 40% 65%, rgba(243,182,117,.5), transparent 22%);
}

.floral-corner.right {
    top: -80px;
    right: -85px;
    transform: scaleX(-1);
    background:
        radial-gradient(ellipse at 50% 40%, rgba(221,111,62,.65), transparent 12%),
        radial-gradient(ellipse at 65% 55%, rgba(53,113,68,.55), transparent 25%),
        radial-gradient(ellipse at 40% 65%, rgba(243,182,117,.5), transparent 22%);
}

/* =========================================================
   SCROLL AREA
========================================================= */

.scroll-stage {
    position: relative;
    width: min(720px, 83vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
}

/* .wedding-intro.is-opened .scroll-stage {
    max-height: 100dvh;
} */

/* =========================================================
   CLOSED SCROLL
========================================================= */

.closed-scroll {
    position: relative;
    width: 100%;
    height: 95px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
    filter: drop-shadow(0 15px 13px rgba(73,44,11,.18));
}

.scroll-tube {
    position: relative;
    width: calc(100% - 100px);
    height: 68px;
    border-radius: 8px;
    overflow: visible;
    background: linear-gradient(180deg, #fff7e5, #f4e4c5 50%, #e2c48e);
    border-top: 1px solid rgba(127,90,34,.22);
    border-bottom: 1px solid rgba(127,90,34,.26);
    box-shadow: inset 0 8px 15px rgba(255,255,255,.7), inset 0 -7px 16px rgba(112,76,24,.1);
}

.scroll-tube::before,
.scroll-tube::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(19px, 3vw, 29px);
    color: #ce6a43;
    letter-spacing: 8px;
    white-space: nowrap;
    opacity: .9;
}

.scroll-tube::before { content: "❦ ❀ ❦ ❀"; left: 35px; }
.scroll-tube::after { content: "❀ ❦ ❀ ❦"; right: 35px; }

/* =========================================================
   GOLD SCROLL ENDS
========================================================= */

.gold-cap {
    width: 82px;
    height: 76px;
    flex-shrink: 0;
    position: relative;
    z-index: 4;
    background: linear-gradient(90deg, #704007, #aa6d18, #efc769, #bd8428, #754208);
    box-shadow: inset 0 5px 6px rgba(255,255,255,.35), inset 0 -5px 8px rgba(79,42,7,.32);
}

.gold-cap.left { border-radius: 60% 12% 12% 60%; }
.gold-cap.right { border-radius: 12% 60% 60% 12%; }

.gold-cap.left::before,
.gold-cap.right::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 32px;
    height: 32px;
    transform: translateY(-50%) rotate(45deg);
    background: radial-gradient(circle at 35% 35%, #fbd986, #bd8122 65%, #754108);
}

.gold-cap.left::before { left: -15px; }
.gold-cap.right::before { right: -15px; }

/* =========================================================
   WAX SEAL
========================================================= */

.wax-seal {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 94px;
    height: 94px;
    border-radius: 47% 53% 50% 50% / 50% 45% 55% 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    background: radial-gradient(circle at 35% 30%, #a84954, #7b1c2e 55%, #4c101c);
    border: 5px solid rgba(91,20,30,.45);
    box-shadow: 0 9px 18px rgba(72,21,28,.24), inset 0 3px 5px rgba(255,255,255,.16);
}

.wax-seal span {
    font-family: "Cormorant Garamond", serif;
    font-size: 41px;
    font-style: italic;
    color: #e7c477;
    line-height: 1;
}

.seal-rope {
    position: absolute;
    width: 4px;
    height: 35px;
    left: 50%;
    bottom: -34px;
    transform: translateX(-50%);
    background: #bd923f;
}

.seal-tassel {
    position: absolute;
    width: 28px;
    height: 48px;
    bottom: -76px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px 5px 16px 16px;
    background: linear-gradient(90deg, #5c1422, #96273b, #611522);
}

.seal-tassel::before {
    content: "";
    position: absolute;
    width: 13px;
    height: 13px;
    left: 50%;
    top: -9px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #c79c47;
}

/* =========================================================
   OPEN SCROLL AREA
========================================================= */

.scroll-reveal {
    position: relative;
    width: calc(100% - 100px);
    height: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    z-index: 15;
}

.open-scroll {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 690px;
}

.scroll-artwork {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 1;
    pointer-events: none;
}

/* =========================================================
   CONTENT OVER IMAGE
========================================================= */

.scroll-content {
    position: relative;
    z-index: 10;
    min-height: 690px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 115px 65px 220px;
    color: #751f2e;
}

.inner-ganesh {
    font-family: "Cormorant Garamond", serif;
    color: #92600f;
    font-size: clamp(38px, 5vw, 46px);
    line-height: 1;
    margin-bottom: 6px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .8), 0 6px 16px rgba(255, 255, 255, .5);
}

.inner-ganesh-text {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(14px, 1.9vw, 17px);
    font-weight: 600;
    letter-spacing: 2.5px;
    color: #92600f;
    margin-bottom: 20px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .8), 0 6px 16px rgba(255, 255, 255, .5);
}

.family-text {
    margin-top: 4px;
    font-size: 11px;
    letter-spacing: 4px;
    color: #6f4a1a;
    text-transform: uppercase;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .75), 0 6px 14px rgba(255, 255, 255, .45);
}

.scroll-logo {
    display: block;
    width: clamp(190px, 32vw, 250px);
    height: auto;
    margin: 16px auto -6px;
    filter: drop-shadow(0 6px 16px rgba(90, 50, 10, .22));
}

.scroll-couple-name {
    width: auto;
    margin: 14px auto 2px;
    color: #7d2030;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(30px, 5vw, 46px);
    font-style: italic;
    font-weight: 600;
    line-height: 1;
    text-align: center;
}

.inside-divider {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 18px 0;
    color: #c19a4d;
}

.inside-divider span { width: 65px; height: 1px; background: #c7a057; }
.inside-divider i { font-style: normal; }

.scroll-title {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(22px, 3vw, 31px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 6px;
    color: #611a27;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .8), 0 6px 16px rgba(255, 255, 255, .5);
}

.invite-message {
    margin-top: 13px;
    max-width: 410px;
    font-family: "Cormorant Garamond", serif;
    font-size: 17px;
    font-style: italic;
    line-height: 1.6;
    color: #5a3324;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 6px 14px rgba(255, 255, 255, .4);
}

.wedding-date {
    margin-top: 15px;
    font-size: 11px;
    letter-spacing: 3px;
    color: #7a5417;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .75), 0 6px 14px rgba(255, 255, 255, .45);
}

/* =========================================================
   ENTER BUTTON
========================================================= */

.enter-btn {
    margin-top: 25px;
    padding: 14px 31px;
    border: 1px solid #7d2030;
    border-radius: 50px;
    background: #801f31;
    color: white;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: .35s ease;
}

.enter-btn:hover {
    transform: translateY(-3px);
    background: #a02d43;
    box-shadow: 0 10px 25px rgba(95,25,37,.2);
}

/* =========================================================
   BOTTOM ROD
========================================================= */

.bottom-scroll-rod {
    position: relative;
    width: 100%;
    height: 80px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 20;
    opacity: 0;
}

.bottom-tube {
    width: calc(100% - 100px);
    height: 35px;
    background: linear-gradient(180deg, #fff2d2, #dfbd76 52%, #a86c16);
    border-radius: 8px;
    box-shadow: inset 0 3px 5px rgba(255,255,255,.4), 0 8px 10px rgba(72,44,10,.13);
}

/* =========================================================
   INTRO TEXT
========================================================= */

.intro-copy {
    position: absolute;
    bottom: clamp(55px, 9vh, 100px);
    left: 50%;
    transform: translateX(-50%);
    width: 94%;
    text-align: center;
    z-index: 20;
}

.intro-copy h1 {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 500;
    letter-spacing: clamp(5px, 1vw, 11px);
    color: #781d2e;
}

.copy-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 13px;
    margin: 8px 0;
    color: #c29b4d;
}

.copy-divider span { width: 60px; height: 1px; background: #c8a35d; }

.intro-copy p {
    margin-top: 7px;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(15px, 2vw, 19px);
    font-style: italic;
    color: #70544c;
}

.tap-dot {
    width: 7px;
    height: 7px;
    margin: 13px auto 0;
    border-radius: 50%;
    background: #9a3140;
    box-shadow: 0 0 0 0 rgba(154,49,64,.4);
    animation: pulseTap 1.8s infinite;
}

@keyframes pulseTap {
    0% { box-shadow: 0 0 0 0 rgba(154,49,64,.4); }
    70% { box-shadow: 0 0 0 12px rgba(154,49,64,0); }
    100% { box-shadow: 0 0 0 0 rgba(154,49,64,0); }
}

/* =========================================================
   INTRO — MOBILE
========================================================= */

@media (max-width: 768px) {
    .scroll-stage { width: 96vw; margin-top: 6px; }
    .closed-scroll { height: 75px; }
    .scroll-tube { width: calc(100% - 62px); height: 52px; }
    .scroll-tube::before { left: 12px; }
    .scroll-tube::after { right: 12px; }
    .scroll-tube::before, .scroll-tube::after { font-size: 15px; letter-spacing: 3px; }
    .gold-cap { width: 50px; height: 58px; }
    .gold-cap.left::before, .gold-cap.right::before { width: 23px; height: 23px; }
    .gold-cap.left::before { left: 3px; }
    .gold-cap.right::before { right: 3px; }
    .wax-seal { width: 71px; height: 71px; }
    .wax-seal span { font-size: 31px; }
    .seal-tassel { width: 22px; height: 40px; bottom: -65px; }
    .scroll-reveal { width: calc(100% - 64px); }
    .open-scroll { min-height: 600px; }
    .scroll-content { min-height: 600px; padding: 72px 20px 170px; }
    .inner-ganesh { font-size: 30px; }
    .inner-ganesh-text { font-size: 13px; }
    .family-text { font-size: 8px; letter-spacing: 2px; }
    .scroll-logo { width: clamp(160px, 52vw, 210px); }
    .inside-divider span { width: 45px; }
    .invite-message { max-width: 280px; font-size: 14px; }
    .wedding-date { font-size: 9px; letter-spacing: 2px; }
    .enter-btn { padding: 12px 24px; font-size: 9px; }
    .bottom-scroll-rod { height: 60px; }
    .bottom-tube { width: calc(100% - 64px); height: 28px; }
    .intro-copy { bottom: 6vh; }
    .floral-corner { width: 190px; height: 230px; }
}

/* =========================================================
   MAIN SITE
========================================================= */

.main-website {
    background: #fbf5e8;
    overflow: hidden;
}

.petal-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 4;
    pointer-events: none;
}

.music-toggle {
    position: fixed;
    right: clamp(14px, 3vw, 28px);
    bottom: clamp(14px, 3vw, 28px);
    z-index: 9998;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(199, 160, 87, .62);
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .95), transparent 32%),
        linear-gradient(135deg, #8b2033, #5e1624);
    color: #fff7df;
    box-shadow: 0 14px 34px rgba(55, 24, 16, .24);
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px) scale(.9);
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease, background .35s ease;
}

.music-toggle.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.music-toggle.is-muted {
    background:
        radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .9), transparent 32%),
        linear-gradient(135deg, #7e735d, #453d32);
}

.music-toggle.is-muted::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 2px;
    border-radius: 999px;
    background: #fff7df;
    transform: rotate(-38deg);
    box-shadow: 0 1px 0 rgba(58, 28, 12, .25);
}

.music-icon {
    position: relative;
    z-index: 1;
    font-family: "Cormorant Garamond", serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.wedding-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(86px, 10vw, 132px) 18px clamp(40px, 7vw, 80px);
    text-align: center;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 249, 230, .06), rgba(40, 24, 12, .24)),
        url("function/hero_bg_desktop.png") center / cover no-repeat;
}

.wedding-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 78% 68% at 50% 46%, rgba(255, 252, 238, .88), rgba(255, 250, 233, .58) 42%, rgba(255, 250, 233, .18) 68%, transparent 86%),
        linear-gradient(90deg, rgba(18, 30, 18, .3), transparent 24%, transparent 76%, rgba(18, 30, 18, .3));
}

.hero-panel {
    position: relative;
    z-index: 6;
    width: min(820px, 94vw);
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #fff7df;
}

.hero-eyebrow,
.scratch-eyebrow {
    margin: 48px 0 14px;
    font-family: "Montserrat", sans-serif;
    color: #815112;
    font-size: clamp(12px, 1.45vw, 14px);
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 8px 22px rgba(255, 255, 255, .4);
}

.couple-name {
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    color: #2a4d2e;
    font-size: clamp(62px, 9vw, 104px);
    font-weight: 600;
    line-height: .92;
    letter-spacing: .015em;
    -webkit-text-stroke: .4px rgba(255, 255, 255, .5);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, .85),
        0 3px 8px rgba(255, 255, 255, .55),
        0 10px 30px rgba(30, 16, 4, .18);
}

.couple-name.gold { color: #8f6510; }

.family-line {
    max-width: min(720px, 100%);
    margin: 14px auto 22px;
    color: #46281a;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(13px, 1.45vw, 17px);
    font-weight: 700;
    line-height: 1.42;
    letter-spacing: .13em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, .8),
        0 2px 6px rgba(255, 255, 255, .5),
        0 8px 22px rgba(255, 255, 255, .3);
}

.grandparents-line {
    margin-top: -8px;
    color: #654638;
    font-size: clamp(11px, 1.25vw, 15px);
    letter-spacing: .1em;
}

.ampersand {
    margin: clamp(12px, 2vw, 22px) auto;
    color: #7d2030;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(42px, 6vw, 74px);
    font-style: italic;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 6px 20px rgba(255, 255, 255, .4);
}

.wedding-meta {
    width: min(720px, 100%);
    margin: clamp(28px, 4vw, 40px) auto 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: visible;
    border: 1px solid rgba(244, 210, 126, .48);
    border-radius: 18px;
    background: rgba(244, 210, 126, .48);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
}

.wedding-meta span {
    display: grid;
    align-content: center;
    min-height: 84px;
    padding: 14px 10px;
    min-width: 0;
    background: rgba(255, 248, 229, .9);
    color: #4e321c;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(20px, 2.1vw, 27px);
    font-weight: 600;
    line-height: 1.15;
    overflow-wrap: anywhere;
    text-align: center;
}

.wedding-meta small {
    display: block;
    margin-bottom: 5px;
    color: #927025;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.hero-deity {
    display: block;
    width: clamp(118px, 16vw, 190px);
    height: auto;
    margin: clamp(22px, 4vw, 36px) auto 0;
    filter: drop-shadow(0 16px 24px rgba(30, 16, 4, .3));
    pointer-events: none;
}

.scratch-date-section {
    position: relative;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: clamp(72px, 10vw, 116px) 18px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 16%, rgba(224, 192, 104, .24), transparent 28%),
        linear-gradient(180deg, #fbf5e8 0%, #f0dfbf 100%);
}

.scratch-date-card {
    position: relative;
    z-index: 6;
    width: min(720px, 100%);
    padding: clamp(30px, 5vw, 54px) clamp(18px, 5vw, 48px);
    border: 1px solid rgba(166, 123, 18, .38);
    border-radius: 26px;
    background:
        linear-gradient(135deg, rgba(255, 252, 244, .9), rgba(248, 235, 207, .9));
    box-shadow: 0 22px 70px rgba(78, 45, 18, .12);
}

.scratch-title {
    margin: 0 0 24px;
    color: #6f2430;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(36px, 7vw, 68px);
    font-weight: 600;
    line-height: 1.05;
}

.scratch-box {
    position: relative;
    width: min(500px, 100%);
    height: clamp(128px, 20vw, 156px);
    margin: 0 auto;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(166, 123, 18, .55);
    box-shadow: 0 18px 42px rgba(82, 49, 20, .16);
    touch-action: none;
}

.scratch-result {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    padding: 16px;
    color: #6f2430;
    background: #fff9ec;
}

.scratch-result strong {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(32px, 6vw, 54px);
    line-height: 1;
}

.scratch-result span {
    color: #704821;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(12px, 2vw, 15px);
    letter-spacing: .14em;
    text-transform: uppercase;
}

#scratchCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
}

.scratch-hint {
    margin: 18px 0 0;
    color: #7b5a27;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.wedding-countdown {
    display: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    width: min(560px, 100%);
    margin: 24px auto 0;
}

.wedding-countdown.is-visible { display: grid; }

.wedding-countdown div {
    min-height: 86px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    border: 1px solid rgba(166, 123, 18, .34);
    border-radius: 16px;
    background: rgba(255, 249, 236, .76);
    box-shadow: 0 12px 30px rgba(82, 49, 20, .08);
}

.wedding-countdown strong {
    color: #6f2430;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(28px, 5vw, 44px);
    line-height: 1;
}

.wedding-countdown span {
    color: #7b5a27;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

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

.celebration-section {
    position: relative;
    padding: clamp(62px, 9vw, 104px) 14px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 0%, rgba(224, 192, 104, .22), transparent 30%),
        linear-gradient(180deg, #f0dfbf 0%, #fbf5e8 48%, #f6ead2 100%);
}

.celebration-section::before,
.celebration-section::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    pointer-events: none;
    opacity: .28;
    filter: blur(4px);
    background: radial-gradient(circle, rgba(255, 219, 137, .9), transparent 68%);
}

.celebration-section::before {
    top: 60px;
    left: max(-110px, calc(50% - 390px));
}

.celebration-section::after {
    right: max(-120px, calc(50% - 390px));
    bottom: 120px;
}

.celebration-shell {
    position: relative;
    z-index: 5;
    width: min(430px, 100%);
    margin: 0 auto;
}

.celebration-eyebrow {
    margin: 0 0 10px;
    color: #8f6510;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .28em;
    text-align: center;
    text-transform: uppercase;
}

.celebration-shell h2 {
    margin: 0 0 30px;
    color: #6f2430;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(42px, 10vw, 62px);
    font-weight: 600;
    line-height: .96;
    text-align: center;
}

.event-stack {
    display: grid;
    gap: 24px;
}

.event-poster {
    position: relative;
    aspect-ratio: 941 / 1672;
    overflow: hidden;
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(75, 47, 20, .18);
    isolation: isolate;
}

.event-poster::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 249, 231, .58) 0%, rgba(255, 249, 231, .34) 34%, transparent 56%),
        radial-gradient(ellipse at 50% 18%, rgba(255, 255, 247, .72), transparent 48%);
}

.event-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-only-events {
    gap: clamp(24px, 5vw, 42px);
}

.image-only-event {
    aspect-ratio: 4 / 5;
    border: 1px solid rgba(182, 120, 40, .3);
    background: #fffaf0;
}

.image-only-event::after {
    display: none;
}

/* .image-only-event .event-bg {
    object-fit: contain;
} */

.event-copy {
    position: relative;
    z-index: 2;
    width: 76%;
    min-height: 42%;
    margin: 12.5% auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    color: #56261d;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .78);
}

.event-kicker,
.dress-code,
.event-note {
    margin: 0;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(10px, 2.8vw, 13px);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.event-kicker {
    color: #8f6510;
}

.event-copy h3 {
    max-width: 100%;
    margin: 9px 0 10px;
    color: #2f6337;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(38px, 12.5vw, 58px);
    font-weight: 700;
    line-height: .92;
    letter-spacing: .01em;
}

.dress-code {
    color: #704821;
    font-size: clamp(9px, 2.55vw, 12px);
    letter-spacing: .12em;
}

.event-date-row {
    width: min(300px, 100%);
    margin: 18px auto 15px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    color: #684014;
}

.event-date-row span {
    position: relative;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(10px, 2.8vw, 13px);
    font-weight: 700;
    line-height: 1.25;
}

.event-date-row span::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    margin: 0 auto 7px;
    background: linear-gradient(90deg, transparent, rgba(143, 101, 16, .66), transparent);
}

.event-date-row strong {
    color: #91670f;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(52px, 16vw, 78px);
    font-weight: 500;
    line-height: .78;
}

.event-venue {
    width: min(310px, 100%);
    margin: 0 auto;
    color: #5a321c;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(15px, 4.1vw, 20px);
    font-weight: 600;
    line-height: 1.3;
}

.event-sangeet::after {
    background:
        linear-gradient(180deg, rgba(255, 251, 236, .62) 0%, rgba(255, 251, 236, .36) 34%, transparent 56%),
        radial-gradient(ellipse at 50% 18%, rgba(255, 255, 247, .82), transparent 48%);
}

.event-sangeet .event-copy h3 {
    color: #182f65;
    font-size: clamp(35px, 11.2vw, 54px);
}

.event-sangeet .event-kicker,
.event-sangeet .event-date-row strong {
    color: #9a6f16;
}

.event-wedding::after {
    background:
        linear-gradient(180deg, rgba(255, 250, 237, .64) 0%, rgba(255, 250, 237, .34) 36%, transparent 58%),
        radial-gradient(ellipse at 50% 18%, rgba(255, 255, 247, .78), transparent 48%);
}

.event-wedding .event-copy h3 {
    color: #8b1f28;
    font-size: clamp(34px, 10.8vw, 52px);
}

.wedding-timeline {
    width: min(330px, 100%);
    margin: 13px auto 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.wedding-timeline span {
    min-height: 48px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    padding: 8px 6px;
    border: 1px solid rgba(143, 101, 16, .28);
    border-radius: 999px;
    background: rgba(255, 250, 237, .62);
    color: #57351d;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(11px, 2.9vw, 13px);
    font-weight: 600;
    line-height: 1.15;
}

.wedding-timeline b {
    color: #8b1f28;
    font-size: .78em;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.event-note {
    color: #704821;
    font-size: clamp(10px, 2.9vw, 13px);
}

/* =========================================================
   VENUE AND FOOTER
========================================================= */

.venue-section {
    position: relative;
    padding: clamp(62px, 9vw, 100px) 14px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 12%, rgba(255, 232, 168, .38), transparent 30%),
        linear-gradient(180deg, #f6ead2 0%, #fbf5e8 100%);
}

.venue-section::before {
    content: "";
    position: absolute;
    inset: 22px max(12px, calc(50% - 238px));
    pointer-events: none;
    border: 1px solid rgba(174, 130, 35, .28);
    border-radius: 34px;
    background:
        radial-gradient(circle at 20% 12%, rgba(47, 99, 55, .1), transparent 23%),
        radial-gradient(circle at 84% 86%, rgba(111, 36, 48, .1), transparent 24%);
}

.venue-shell {
    position: relative;
    z-index: 2;
    width: min(430px, 100%);
    margin: 0 auto;
    text-align: center;
}

.venue-eyebrow,
.footer-label {
    margin: 0 0 10px;
    color: #8f6510;
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.venue-shell h2,
.site-footer h2 {
    margin: 0;
    color: #2f6337;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(44px, 11vw, 66px);
    font-weight: 700;
    line-height: .98;
}

.venue-copy {
    width: min(330px, 92%);
    margin: 14px auto 24px;
    color: #6a4225;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(18px, 4.8vw, 24px);
    font-style: italic;
    line-height: 1.35;
}

.map-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / .78;
    overflow: hidden;
    border: 1px solid rgba(174, 130, 35, .44);
    border-radius: 26px;
    background: #fff8e8;
    box-shadow: 0 22px 56px rgba(75, 47, 20, .14);
}

.map-frame::before {
    content: "";
    position: absolute;
    inset: 10px;
    z-index: 2;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 19px;
}

.map-frame iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    filter: saturate(.92) contrast(.96);
}

.map-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin-top: 22px;
    padding: 0 28px;
    border: 1px solid rgba(143, 101, 16, .5);
    border-radius: 999px;
    background: linear-gradient(135deg, #8f6510, #c99b35);
    color: #fff9ea;
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 16px 34px rgba(143, 101, 16, .22);
}

.site-footer {
    position: relative;
    padding: clamp(52px, 8vw, 84px) 14px;
    overflow: hidden;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(251, 245, 232, .96), rgba(255, 248, 232, .98)),
        radial-gradient(circle at 50% 0%, rgba(47, 99, 55, .14), transparent 34%);
}

.site-footer::before,
.site-footer::after {
    content: "❦";
    position: absolute;
    top: 24px;
    color: rgba(143, 101, 16, .34);
    font-family: "Cormorant Garamond", serif;
    font-size: 46px;
}

.site-footer::before {
    left: max(28px, calc(50% - 210px));
}

.site-footer::after {
    right: max(28px, calc(50% - 210px));
}

.footer-shell {
    position: relative;
    width: min(430px, 100%);
    margin: 0 auto;
    padding: 34px 20px;
    border: 1px solid rgba(174, 130, 35, .32);
    border-radius: 32px;
    background: rgba(255, 250, 238, .62);
    box-shadow: 0 20px 52px rgba(75, 47, 20, .1);
}

.footer-logo {
    display: block;
    width: clamp(120px, 38vw, 170px);
    height: auto;
    margin: 0 auto 14px;
    filter: drop-shadow(0 10px 20px rgba(90, 50, 10, .16));
}

.footer-date {
    margin: 16px 0 8px;
    color: #6f2430;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.footer-tag {
    margin: 0;
    color: #8f6510;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(24px, 6vw, 34px);
    font-style: italic;
    font-weight: 600;
    line-height: 1.1;
}

@media (max-width: 767px) {
    .wedding-hero {
        background:
            linear-gradient(180deg, rgba(255, 249, 230, .04), rgba(40, 24, 12, .3)),
            url("function/hero_bg_mobile.png") center / cover no-repeat;
    }
}

@media (max-width: 640px) {
    .wedding-hero {
        align-items: end;
        min-height: 100svh;
        padding: 86px 0 28px;
    }

    .hero-panel { width: 100%; }

    .hero-deity { width: clamp(140px, 26vw, 160px); }

    .couple-name { font-size: clamp(46px, 13.5vw, 68px); }

    .family-line {
        width: min(92vw, 390px);
        font-size: clamp(12px, 3.8vw, 15px);
        line-height: 1.38;
        letter-spacing: .1em;
    }

    .grandparents-line {
        margin-top: -10px;
        font-size: clamp(10px, 3.15vw, 13px);
        letter-spacing: .07em;
    }

    /* Date / Time / Venue: one translucent glass panel with hairline
       gold dividers between rows, so the archway artwork stays visible
       behind it instead of being blotted out by opaque card blocks */
    .wedding-meta {
        grid-template-columns: 1fr;
        width: min(92vw, 280px);
        margin: 22px auto 60px;
        gap: 0;
        border-radius: 18px;
        border: 1px solid rgba(244, 210, 126, .6);
        background: rgba(255, 253, 246, .68);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 14px 34px rgba(30, 16, 4, .28);
        overflow: hidden;
    }

    .wedding-meta span {
        min-height: auto;
        padding: 13px 18px;
        border-radius: 0;
        border: 0;
        border-bottom: 1px solid rgba(244, 210, 126, .45);
        background: transparent;
        box-shadow: none;
        font-size: clamp(18px, 5.2vw, 21px);
    }

    .wedding-meta span:last-child {
        border-bottom: 0;
    }

    .wedding-meta small {
        font-size: 10px;
        letter-spacing: .18em;
    }

    .wedding-countdown {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .celebration-section {
        padding-inline: 10px;
    }

    .celebration-shell {
        width: min(100%, 430px);
    }

    .event-stack {
        gap: 18px;
    }

    .event-poster {
        border-radius: 22px;
    }

    .event-copy {
        width: 78%;
        margin-top: 13.5%;
    }

    .event-date-row {
        margin-block: 14px 12px;
        gap: 8px;
    }

    .event-date-row strong {
        font-size: clamp(48px, 17vw, 66px);
    }

    .wedding-timeline {
        gap: 6px;
    }

    .wedding-timeline span {
        min-height: 44px;
    }

    .venue-section::before {
        inset: 18px 10px;
        border-radius: 28px;
    }

    .map-frame {
        border-radius: 22px;
    }

    .footer-shell {
        border-radius: 26px;
    }
}