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

/* =========================================================
   ENVELOPE LOADER
========================================================= */

.wedding-intro {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: grid;
    place-items: center;
    overflow: hidden;
    background-color: #681128;
    background-image:
        linear-gradient(45deg, transparent 42%, rgba(247, 177, 44, .13) 42%, rgba(247, 177, 44, .13) 47%, transparent 47%),
        linear-gradient(-45deg, transparent 42%, rgba(239, 79, 73, .12) 42%, rgba(239, 79, 73, .12) 47%, transparent 47%),
        linear-gradient(135deg, transparent 42%, rgba(22, 131, 105, .14) 42%, rgba(22, 131, 105, .14) 47%, transparent 47%),
        linear-gradient(-135deg, transparent 42%, rgba(236, 90, 151, .11) 42%, rgba(236, 90, 151, .11) 47%, transparent 47%),
        linear-gradient(180deg, rgba(53, 8, 30, .12), rgba(20, 54, 45, .34));
    background-position: 0 0, 0 0, 34px 34px, 34px 34px, 0 0;
    background-size: 68px 68px, 68px 68px, 68px 68px, 68px 68px, 100% 100%;
}

.wedding-intro::before,
.wedding-intro::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.wedding-intro::before {
    inset: clamp(12px, 2.4vw, 28px);
    border: clamp(3px, .42vw, 6px) solid #ef9d22;
    outline: 1px solid rgba(255, 223, 143, .72);
    outline-offset: clamp(5px, .8vw, 10px);
    box-shadow:
        inset 0 0 0 clamp(4px, .7vw, 9px) #176b59,
        inset 0 0 0 clamp(7px, 1.05vw, 14px) #e74d45,
        0 0 0 1px rgba(79, 9, 34, .8);
}

.wedding-intro::after {
    inset: 0;
    background:
        repeating-linear-gradient(90deg, #ef9d22 0 18px, #e5474e 18px 36px, #17826b 36px 54px, #de3979 54px 72px) top / 100% clamp(8px, 1.2vw, 14px) no-repeat,
        repeating-linear-gradient(90deg, #17826b 0 18px, #de3979 18px 36px, #ef9d22 36px 54px, #e5474e 54px 72px) bottom / 100% clamp(8px, 1.2vw, 14px) no-repeat;
}

.envelope-loader {
    position: relative;
    z-index: 2;
    isolation: isolate;
    display: block;
    width: min(92vw, 880px, calc((100dvh - 250px) * 1.333));
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    filter: drop-shadow(0 30px 50px rgba(32, 5, 19, .6));
}

.envelope-loader::before {
    content: "";
    position: absolute;
    inset: clamp(-18px, -1.6vw, -10px);
    z-index: -1;
    border: 2px solid #f2ad2f;
    background:
        linear-gradient(45deg, #d82f68 25%, transparent 25%) 0 0 / 22px 22px,
        linear-gradient(-45deg, #19816b 25%, transparent 25%) 0 0 / 22px 22px,
        linear-gradient(45deg, transparent 75%, #ef9120 75%) 0 0 / 22px 22px,
        linear-gradient(-45deg, transparent 75%, #ed5148 75%) 0 0 / 22px 22px,
        #78142f;
    box-shadow: 0 20px 60px rgba(35, 4, 18, .46);
}

.envelope-loader:focus-visible {
    outline: 2px solid #e7c477;
    outline-offset: 8px;
}

.envelope-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    pointer-events: none;
    user-select: none;
}

.envelope-hint {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: clamp(28px, 7vh, 70px);
    transform: translateX(-50%);
    width: 92%;
    text-align: center;
    pointer-events: none;
}

.envelope-hint p {
    display: grid;
    justify-items: center;
    gap: 4px;
    color: #ffe4a0;
    text-shadow: 0 2px 14px rgba(33, 4, 17, .72);
}

.envelope-hint p::before {
    content: "◆  ◆  ◆";
    margin-bottom: 2px;
    color: #f2a72d;
    font-size: 8px;
    letter-spacing: .5em;
}

.envelope-hint p span {
    font-family: "Noto Serif Gurmukhi", "Noto Serif Devanagari", "Cormorant Garamond", serif;
    font-size: clamp(18px, 2.5vw, 26px);
    font-weight: 600;
    line-height: 1.2;
}

.envelope-hint p small {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(10px, 1.2vw, 12px);
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #f7bf55;
}

.tap-dot {
    width: 9px;
    height: 9px;
    margin: 12px auto 0;
    border-radius: 2px;
    background: #f4ac2f;
    box-shadow: 0 0 0 0 rgba(244, 172, 47, .5);
    transform: rotate(45deg);
    animation: pulseTap 1.8s infinite;
}

@keyframes pulseTap {
    0% { box-shadow: 0 0 0 0 rgba(244, 172, 47, .5); }
    70% { box-shadow: 0 0 0 12px rgba(244, 172, 47, 0); }
    100% { box-shadow: 0 0 0 0 rgba(244, 172, 47, 0); }
}

@media (max-width: 640px) {
    .wedding-intro {
        background-size: 48px 48px, 48px 48px, 48px 48px, 48px 48px, 100% 100%;
        background-position: 0 0, 0 0, 24px 24px, 24px 24px, 0 0;
    }

    .envelope-loader {
        width: min(88vw, calc((100dvh - 230px) * 1.333));
    }

    .envelope-hint {
        bottom: clamp(40px, 8vh, 68px);
    }
}

/* =========================================================
   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(36px, 10vw, 42px) 18px clamp(30px, 7vw, 40px);
    text-align: center;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 249, 230, .06), rgba(40, 24, 12, .24)),
        url("function/gg_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);
}

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

.story-section {
    position: relative;
    padding: clamp(94px, 11vw, 148px) clamp(22px, 6vw, 84px);
    overflow: hidden;
    color: #fff3d3;
    background-color: #123f35;
    background-image:
        linear-gradient(45deg, transparent 45%, rgba(246, 173, 45, .06) 45%, rgba(246, 173, 45, .06) 50%, transparent 50%),
        linear-gradient(-45deg, transparent 45%, rgba(224, 66, 86, .06) 45%, rgba(224, 66, 86, .06) 50%, transparent 50%),
        linear-gradient(110deg, rgba(91, 12, 38, .88) 0%, rgba(91, 12, 38, .24) 32%, transparent 58%);
    background-size: 62px 62px, 62px 62px, 100% 100%;
}

.story-section::before,
.story-section::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.story-section::before {
    inset: 0;
    z-index: 0;
    background:
        repeating-linear-gradient(90deg, #efaa2f 0 26px, #d83b69 26px 52px, #ee6544 52px 78px, #1c8069 78px 104px) top / 100% 12px no-repeat,
        repeating-linear-gradient(90deg, #1c8069 0 26px, #ee6544 26px 52px, #d83b69 52px 78px, #efaa2f 78px 104px) bottom / 100% 12px no-repeat;
}

.story-section::after {
    inset: clamp(25px, 3vw, 42px);
    z-index: 0;
    border: 1px solid rgba(246, 190, 76, .48);
    box-shadow:
        inset 0 0 0 5px rgba(111, 18, 48, .5),
        inset 0 0 0 7px rgba(246, 190, 76, .2);
}

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

.story-kicker {
    margin: 0 0 12px;
    display: grid;
    justify-items: center;
    gap: 4px;
    color: #f8bf51;
}

.story-kicker span {
    font-family: "Noto Serif Gurmukhi", serif;
    font-size: clamp(18px, 2.2vw, 24px);
    font-weight: 600;
    line-height: 1.3;
}

.story-kicker small {
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.story-shell h2 {
    margin: 0;
    color: #fff1cb;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(58px, 9vw, 108px);
    font-weight: 600;
    line-height: .88;
    text-shadow: 0 12px 34px rgba(29, 2, 14, .32);
}

.story-flourish {
    width: min(420px, 80%);
    margin: clamp(25px, 4vw, 42px) auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    color: #efaa2f;
}

.story-flourish span {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(248, 191, 81, .8));
}

.story-flourish span:last-child {
    background: linear-gradient(90deg, rgba(248, 191, 81, .8), transparent);
}

.story-flourish b {
    font-size: 12px;
    font-weight: 400;
}

.story-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: left;
}

.story-grid p {
    margin: 0;
    padding: 4px clamp(28px, 5vw, 64px);
    color: #f9e8c0;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(20px, 2.15vw, 27px);
    font-weight: 500;
    line-height: 1.62;
}

.story-grid p:first-child {
    border-right: 1px solid rgba(248, 191, 81, .36);
}

.story-bridge {
    width: min(780px, 90%);
    margin: clamp(44px, 7vw, 72px) auto;
    color: #ffc65a;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(23px, 3vw, 34px);
    font-style: italic;
    font-weight: 500;
    line-height: 1.42;
}

.story-ending {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-block: 1px solid rgba(248, 191, 81, .42);
}

.story-ending span {
    min-height: 120px;
    display: grid;
    place-content: center;
    gap: 2px;
    padding: 24px 18px;
    color: #f6dca4;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
}

.story-ending span + span {
    border-left: 1px solid rgba(248, 191, 81, .32);
}

.story-ending strong {
    color: #fff2cf;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(28px, 3.8vw, 44px);
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    text-transform: none;
}

@media (max-width: 720px) {
    .story-section {
        padding: 86px 30px;
        background-size: 46px 46px, 46px 46px, 100% 100%;
    }

    .story-section::after {
        inset: 22px 12px;
    }

    .story-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .story-grid p {
        padding: 0 4px 32px;
        font-size: clamp(20px, 5.8vw, 25px);
    }

    .story-grid p:first-child {
        margin-bottom: 32px;
        border-right: 0;
        border-bottom: 1px solid rgba(248, 191, 81, .3);
    }

    .story-bridge {
        width: 100%;
        margin-block: 42px;
    }

    .story-ending {
        grid-template-columns: 1fr;
    }

    .story-ending span {
        min-height: 96px;
    }

    .story-ending span + span {
        border-left: 0;
        border-top: 1px solid rgba(248, 191, 81, .32);
    }
}

/* =========================================================
   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/gg_bg_mobile.png") center / cover no-repeat;
    }
}

@media (max-width: 640px) {
    .wedding-hero {
        align-items: end;
        min-height: 100svh;
        padding: 46px 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;
    }
}

/* =========================================================
   LIGHT PUNJABI FOOTER AND RSVP
========================================================= */

.site-footer {
    padding: clamp(76px, 10vw, 118px) clamp(20px, 5vw, 64px) clamp(46px, 7vw, 74px);
    background-color: #fff9ec;
    background-image:
        linear-gradient(45deg, transparent 47%, rgba(31, 105, 83, .035) 47%, rgba(31, 105, 83, .035) 52%, transparent 52%),
        linear-gradient(-45deg, transparent 47%, rgba(128, 27, 54, .035) 47%, rgba(128, 27, 54, .035) 52%, transparent 52%);
    background-size: 54px 54px;
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    width: auto;
    height: 10px;
    background: repeating-linear-gradient(90deg, #dda130 0 28px, #b52f58 28px 56px, #d85d3f 56px 84px, #24755f 84px 112px);
}

.site-footer::after {
    display: none;
}

.rsvp-shell {
    position: relative;
    z-index: 1;
    width: min(860px, 100%);
    margin: 0 auto;
    padding-bottom: clamp(62px, 9vw, 96px);
}

.rsvp-gurmukhi,
.footer-gurmukhi {
    margin: 0 0 4px;
    color: #9a6d14;
    font-family: "Noto Serif Gurmukhi", serif;
    font-size: clamp(18px, 2.4vw, 24px);
    font-weight: 600;
    line-height: 1.35;
}

.site-footer .rsvp-shell h2 {
    margin: 2px 0 0;
    color: #286344;
    font-size: clamp(52px, 7vw, 78px);
    line-height: .95;
}

.rsvp-copy {
    width: min(520px, 100%);
    margin: 18px auto 34px;
    color: #714227;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(20px, 2.6vw, 26px);
    font-style: italic;
    line-height: 1.4;
}

.rsvp-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 34px;
    text-align: left;
}

.rsvp-field {
    display: grid;
    gap: 8px;
}

.rsvp-field > span,
.rsvp-attendance legend {
    color: #6f2430;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.rsvp-field input,
.rsvp-field select,
.rsvp-field textarea {
    width: 100%;
    min-height: 50px;
    padding: 10px 2px;
    border: 0;
    border-bottom: 1px solid rgba(143, 101, 16, .46);
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: #3d372b;
    font: 500 17px/1.4 "Cormorant Garamond", serif;
}

.rsvp-field textarea {
    min-height: 72px;
    resize: vertical;
}

.rsvp-field input:focus,
.rsvp-field select:focus,
.rsvp-field textarea:focus {
    border-bottom-color: #286344;
    box-shadow: 0 2px 0 #286344;
}

.rsvp-attendance {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;
    border: 0;
}

.rsvp-attendance legend {
    margin-bottom: 10px;
}

.rsvp-attendance label {
    position: relative;
    display: inline-flex;
    margin: 0 8px 8px 0;
    cursor: pointer;
}

.rsvp-attendance input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.rsvp-attendance span {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 8px 15px;
    border: 1px solid rgba(143, 101, 16, .34);
    border-radius: 4px;
    color: #66452c;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 600;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.rsvp-attendance input:checked + span {
    border-color: #286344;
    background: #286344;
    color: #fff9ec;
}

.rsvp-attendance input:focus-visible + span {
    outline: 2px solid #b88724;
    outline-offset: 3px;
}

.rsvp-message,
.rsvp-submit,
.rsvp-note {
    grid-column: 1 / -1;
}

.rsvp-submit {
    justify-self: center;
    min-height: 48px;
    margin-top: 8px;
    padding: 0 28px;
    border: 1px solid #6f2430;
    border-radius: 4px;
    background: #6f2430;
    color: #fff9ec;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.rsvp-submit:hover {
    background: #286344;
    transform: translateY(-1px);
}

.rsvp-submit:focus-visible {
    outline: 2px solid #b88724;
    outline-offset: 3px;
}

.rsvp-note {
    margin: -12px 0 0;
    color: #876f55;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
}

.footer-shell {
    position: relative;
    z-index: 1;
    width: min(760px, 100%);
    margin: 0 auto;
    padding: clamp(42px, 7vw, 64px) 20px 0;
    border: 0;
    border-top: 1px solid rgba(143, 101, 16, .34);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.footer-date {
    letter-spacing: 0;
}

.site-footer .footer-shell h2 {
    width: min(620px, 100%);
    margin: 0 auto;
    color: #286344;
    font-size: clamp(38px, 6vw, 60px);
    line-height: 1;
}

@media (max-width: 640px) {
    .site-footer {
        padding-inline: 24px;
        background-size: 42px 42px;
    }

    .rsvp-form {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .rsvp-attendance,
    .rsvp-message,
    .rsvp-submit,
    .rsvp-note {
        grid-column: 1;
    }

    .rsvp-attendance label {
        display: flex;
        margin-right: 0;
    }

    .rsvp-attendance span {
        width: 100%;
        justify-content: center;
    }

    .footer-shell {
        border-radius: 0;
    }
}

/* =========================================================
   ILLUSTRATED STORY TIMELINE
========================================================= */

.story-section {
    position: relative;
    padding: clamp(78px, 9vw, 124px) clamp(14px, 4vw, 52px) clamp(90px, 11vw, 146px);
    overflow: hidden;
    color: #73142c;
    background-color: #fff7e8;
    background-image:
        linear-gradient(45deg, transparent 48%, rgba(180, 118, 30, .035) 48%, rgba(180, 118, 30, .035) 52%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, rgba(189, 44, 89, .025) 48%, rgba(189, 44, 89, .025) 52%, transparent 52%);
    background-size: 66px 66px;
}

.story-section::before,
.story-section::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    z-index: 0;
    height: 10px;
    border: 0;
    box-shadow: none;
    pointer-events: none;
}

.story-section::before {
    top: 0;
    background: repeating-linear-gradient(90deg, #c9982e 0 26px, #bd2c59 26px 52px, #df6947 52px 78px, #2c745b 78px 104px);
}

.story-section::after {
    top: auto;
    bottom: 0;
    background: repeating-linear-gradient(90deg, #2c745b 0 26px, #df6947 26px 52px, #bd2c59 52px 78px, #c9982e 78px 104px);
}

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

.story-heading {
    margin-bottom: clamp(24px, 4vw, 48px);
}

.story-kicker {
    margin: 0 0 8px;
    color: #256246;
}

.story-kicker span {
    font-size: clamp(24px, 3.4vw, 40px);
}

.story-kicker small {
    color: #8b1d34;
    font-size: 13px;
    letter-spacing: 0;
}

.story-shell .story-heading h2 {
    margin: 0;
    color: #7f0f25;
    font-size: clamp(68px, 10vw, 126px);
    line-height: .9;
    text-shadow: 0 8px 24px rgba(122, 54, 27, .1);
}

.story-flourish {
    width: min(430px, 78%);
    margin: clamp(24px, 3vw, 38px) auto 0;
    color: #c38f27;
}

.story-flourish span,
.story-flourish span:last-child {
    background: linear-gradient(90deg, transparent, rgba(174, 120, 29, .72));
}

.story-flourish span:last-child {
    background: linear-gradient(90deg, rgba(174, 120, 29, .72), transparent);
}

.story-timeline {
    position: relative;
    width: 100%;
    padding-block: 14px;
}

.story-thread {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: linear-gradient(180deg, transparent, #c89128 4%, #c89128 96%, transparent);
}

.story-chapter {
    position: relative;
    width: 48.5%;
    min-height: 1px;
    margin-bottom: clamp(18px, 2vw, 34px);
}

.story-chapter-left {
    margin-right: auto;
}

.story-chapter-right {
    margin-left: auto;
}

.story-chapter img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 22px 26px rgba(106, 57, 25, .12));
}

.story-marker {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid #ba8121;
    border-radius: 50%;
    background: radial-gradient(circle, #fff5cc 0 20%, #8a1730 22% 35%, #f5cf68 37% 50%, #fff8e8 52%);
    box-shadow: 0 5px 18px rgba(116, 63, 19, .14), inset 0 0 0 3px rgba(255, 248, 232, .78);
    transform: translateY(-50%);
}

.story-marker::before {
    content: "✤";
    color: #8a1730;
    font-size: 21px;
    line-height: 1;
    text-shadow: 0 1px 0 #f5cf68;
}

.story-chapter-left .story-marker {
    right: -38px;
}

.story-chapter-right .story-marker {
    left: -38px;
}

.story-chapter-final {
    margin-bottom: clamp(42px, 6vw, 76px);
}

.story-refrain {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-block: 1px solid rgba(184, 126, 30, .46);
}

.story-refrain span {
    min-height: 136px;
    display: grid;
    place-content: center;
    gap: 3px;
    padding: 26px 18px;
    color: #735234;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 600;
    line-height: 1.15;
}

.story-refrain span + span {
    border-left: 1px solid rgba(184, 126, 30, .34);
}

.story-refrain strong {
    color: #7f0f25;
    font-size: clamp(28px, 3.8vw, 44px);
    font-style: italic;
    font-weight: 600;
    line-height: 1;
}

@media (max-width: 760px) {
    .story-section {
        padding: 74px 12px 94px;
        background-size: 48px 48px;
    }

    .story-heading {
        padding-inline: 22px;
    }

    .story-timeline {
        padding-left: 28px;
    }

    .story-thread {
        left: 15px;
        margin-left: 0;
    }

    .story-chapter,
    .story-chapter-left,
    .story-chapter-right {
        width: 100%;
        margin-inline: 0;
        margin-bottom: 20px;
    }

    .story-chapter-left .story-marker,
    .story-chapter-right .story-marker {
        top: 50%;
        left: -31px;
        right: auto;
        width: 32px;
        height: 32px;
    }

    .story-marker::before {
        font-size: 18px;
    }

    .story-chapter img {
        filter: drop-shadow(0 14px 18px rgba(106, 57, 25, .1));
    }

    .story-refrain {
        margin-inline: 12px;
        grid-template-columns: 1fr;
    }

    .story-refrain span {
        min-height: 104px;
    }

    .story-refrain span + span {
        border-left: 0;
        border-top: 1px solid rgba(184, 126, 30, .34);
    }
}

@media (prefers-reduced-motion: reduce) {
    .story-chapter,
    .story-refrain,
    .story-thread {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Burgundy and antique-gold footer palette */
.site-footer {
    background-color: #4b000e;
    background-image:
        linear-gradient(45deg, transparent 47%, rgba(241, 202, 93, .055) 47%, rgba(241, 202, 93, .055) 52%, transparent 52%),
        linear-gradient(-45deg, transparent 47%, rgba(241, 202, 93, .035) 47%, rgba(241, 202, 93, .035) 52%, transparent 52%),
        linear-gradient(180deg, #43000c 0%, #5b0716 100%);
}

.site-footer::before {
    background: repeating-linear-gradient(90deg, #f0cf68 0 34px, #b98a2d 34px 68px, #e8bd4e 68px 102px, #8d1b2e 102px 136px);
}

.site-footer .footer-label,
.site-footer .rsvp-gurmukhi,
.site-footer .footer-gurmukhi,
.site-footer .rsvp-field > span,
.site-footer .rsvp-attendance legend,
.site-footer .footer-date,
.site-footer .footer-tag {
    color: #efd064;
}

.site-footer .rsvp-shell h2,
.site-footer .footer-shell h2 {
    color: #f3d773;
    text-shadow: 0 8px 28px rgba(15, 0, 4, .28);
}

.site-footer .rsvp-copy {
    color: #fff1cd;
}

.site-footer .rsvp-field input,
.site-footer .rsvp-field select,
.site-footer .rsvp-field textarea {
    border-bottom-color: rgba(239, 208, 100, .48);
    color: #fff4d6;
}

.site-footer .rsvp-field input::placeholder,
.site-footer .rsvp-field textarea::placeholder {
    color: rgba(255, 241, 205, .58);
}

.site-footer .rsvp-field select option {
    background: #4b000e;
    color: #fff4d6;
}

.site-footer .rsvp-field input:focus,
.site-footer .rsvp-field select:focus,
.site-footer .rsvp-field textarea:focus {
    border-bottom-color: #f1d16a;
    box-shadow: 0 2px 0 #f1d16a;
}

.site-footer .rsvp-attendance span {
    border-color: rgba(239, 208, 100, .48);
    color: #f8dfa0;
}

.site-footer .rsvp-attendance input:checked + span {
    border-color: #f1d16a;
    background: #f1d16a;
    color: #4b000e;
}

.site-footer .rsvp-submit {
    border-color: #f1d16a;
    background: #f1d16a;
    color: #4b000e;
}

.site-footer .rsvp-submit:hover {
    background: #fff0af;
}

.site-footer .rsvp-note {
    color: rgba(255, 241, 205, .68);
}

.site-footer .footer-shell {
    border-top-color: rgba(239, 208, 100, .42);
}

/* Standalone RSVP section */
.main-website > .rsvp-shell {
    position: relative;
    width: 100%;
    margin: 0;
    padding: clamp(78px, 10vw, 118px) clamp(22px, 5vw, 64px) clamp(84px, 11vw, 128px);
    overflow: hidden;
    font-size: 0;
    text-align: center;
    color: #5c3b28;
    background-color: #fff8e8;
    background-image:
        linear-gradient(45deg, transparent 47%, rgba(35, 105, 74, .035) 47%, rgba(35, 105, 74, .035) 52%, transparent 52%),
        linear-gradient(-45deg, transparent 47%, rgba(122, 15, 37, .035) 47%, rgba(122, 15, 37, .035) 52%, transparent 52%);
    background-size: 54px 54px;
}

.main-website > .rsvp-shell::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 8px;
    background: repeating-linear-gradient(90deg, #d29c2f 0 28px, #b72d58 28px 56px, #db6344 56px 84px, #28745d 84px 112px);
}

.main-website > .rsvp-shell .rsvp-gurmukhi {
    color: #9a6d14;
}

.main-website > .rsvp-shell .footer-label {
    color: #7a0f25;
}

.main-website > .rsvp-shell h2 {
    margin: 2px 0 0;
    color: #286344;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(52px, 7vw, 78px);
    font-weight: 700;
    line-height: .95;
}

.main-website > .rsvp-shell .rsvp-copy {
    color: #714227;
}

.main-website > .rsvp-shell .rsvp-form {
    width: min(860px, 100%);
    margin-inline: auto;
}

.main-website > .rsvp-shell .rsvp-field > span,
.main-website > .rsvp-shell .rsvp-attendance legend {
    color: #6f2430;
}

.main-website > .rsvp-shell .rsvp-field input,
.main-website > .rsvp-shell .rsvp-field select,
.main-website > .rsvp-shell .rsvp-field textarea {
    border-bottom-color: rgba(143, 101, 16, .46);
    color: #3d372b;
}

.main-website > .rsvp-shell .rsvp-field input::placeholder,
.main-website > .rsvp-shell .rsvp-field textarea::placeholder {
    color: rgba(86, 63, 43, .55);
}

.main-website > .rsvp-shell .rsvp-attendance span {
    border-color: rgba(143, 101, 16, .34);
    color: #66452c;
}

.main-website > .rsvp-shell .rsvp-attendance input:checked + span {
    border-color: #286344;
    background: #286344;
    color: #fff9ec;
}

.main-website > .rsvp-shell .rsvp-submit {
    border-color: #6f2430;
    background: #6f2430;
    color: #fff9ec;
}

.main-website > .rsvp-shell .rsvp-submit:hover {
    background: #286344;
}

.main-website > .rsvp-shell .rsvp-note {
    color: #876f55;
}

@media (max-width: 640px) {
    .main-website > .rsvp-shell {
        padding: 72px 24px 88px;
        background-size: 42px 42px;
    }
}