/*! © 2026 Dastan Invites, dastaninvites.com. All rights reserved. This invitation's design, code, artwork and music may not be copied, reused or resold. */

.rsvp {
    --band-h: 20px;
    --gold-deep: #86662a;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(var(--band-h) + 40px) 16px calc(var(--band-h) + 52px);
    background: url(../assets/letter/marble.webp) center top / 100% auto repeat-y, #f2ede3;
    color: var(--ink);
    text-align: center;
    container: rsvp / inline-size;
    overflow-x: clip;
    -webkit-tap-highlight-color: transparent
}

html.is-tablet .rsvp,
html:not(.is-tablet) .card .rsvp {
    --band-h: 26px
}

.rs-head>* {
    margin: 0
}

.rs-kicker {
    font: 600 clamp(11px, 3cqi, 14px)/1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .28em;
    padding-left: .28em;
    text-transform: uppercase;
    color: var(--gold-deep)
}

.rs-title {
    font: 400 clamp(38px, 10.6cqi, 68px)/1.15 "Alex Brush", cursive;
    padding: 0 .3em .1em;
    background: linear-gradient(180deg, rgba(255, 240, 200, .25), transparent 40%, rgba(70, 42, 8, .42)), url(../assets/hero/gold.webp) 0 0 / 4em 4em;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .8)) drop-shadow(0 1px 1.5px rgba(60, 36, 6, .45))
}

.rs-by {
    font: italic 500 clamp(16px, 4.6cqi, 20px)/1.3 "Cormorant Garamond", Georgia, serif;
    color: var(--gold-deep)
}

.rs-stage {
    position: relative;
    width: min(100%, 600px);
    margin-top: clamp(64px, 17cqi, 96px)
}

.rs-paper {
    --pb: clamp(34px, 10cqi, 56px);
    position: relative;
    width: 100%;
    margin: 0;
    border: var(--pb) solid transparent;
    border-image: url(../assets/rsvp/paper.webp) var(--paper-slice) fill / var(--pb) round;
    filter: drop-shadow(0 1px 1px rgba(60, 40, 10, .18)) drop-shadow(0 14px 20px rgba(50, 35, 10, .22));
    container-type: inline-size
}

.rs-paper[hidden] {
    display: none
}

.rs-card-in {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 5cqi, 24px);
    padding: 6px clamp(2px, 2cqi, 16px) 8px
}

.rs-card-in>*,
.rs-thanks>*,
.rs-closed>* {
    margin: 0
}

.rs-lead {
    font: italic 500 clamp(17px, 5.6cqi, 22px)/1.3 "Cormorant Garamond", Georgia, serif;
    color: var(--gold-deep)
}

.rs-label {
    display: block;
    font: 700 clamp(10.5px, 3.6cqi, 13px)/1.4 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-deep)
}

.rs-label em {
    font-style: italic;
    text-transform: none;
    letter-spacing: .04em;
    font-weight: 500
}

.rs-field {
    display: block;
    width: 100%
}

.rs-name,
.rs-wishes {
    display: block;
    width: 100%;
    margin-top: 6px;
    border: 0;
    border-bottom: 1.5px solid rgba(134, 102, 42, .55);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    text-align: center;
    font: italic 500 clamp(19px, 6.4cqi, 26px)/1.3 "Cormorant Garamond", Georgia, serif;
    padding: 4px 2px 5px;
    outline: none
}

.rs-wishes {
    border: 1.5px solid rgba(134, 102, 42, .4);
    border-radius: 10px;
    background: #fffdf699;
    text-align: left;
    font-size: clamp(16px, 5cqi, 19px);
    padding: 8px 10px;
    resize: vertical
}

.rs-name::placeholder {
    color: #0b3d3159
}

.rs-name:focus,
.rs-wishes:focus {
    border-color: var(--gold-deep);
    box-shadow: 0 2px 0 -.5px var(--gold-deep)
}

.rs-wishes:focus {
    box-shadow: 0 0 0 2px #86662a40
}

.rs-events {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0
}

.rs-events legend {
    width: 100%;
    padding: 0
}

.rs-help {
    margin: 2px 0 0;
    font: italic 500 clamp(14px, 4.4cqi, 17px)/1.3 "Cormorant Garamond", Georgia, serif;
    color: #0b3d31b3
}

.rs-stands {
    display: grid;
    grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    max-width: 460px;
    margin: clamp(16px, 5cqi, 26px) auto 0
}

.rs-ev {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    container-type: inline-size
}

.rs-ev>p {
    margin: 0
}

.rs-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.rs-toggle:focus-visible {
    outline: 2px solid var(--gold-deep);
    outline-offset: 3px;
    border-radius: 12px
}

.rs-rig {
    --bw: min(84cqi, 96px);
    position: relative;
    display: block;
    width: var(--bw);
    height: calc(var(--bw) * 1.74)
}

.rs-rig:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 22%;
    width: 150%;
    aspect-ratio: 1;
    translate: -50% 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--tone-glow), transparent);
    opacity: 0;
    transition: opacity .6s ease .35s;
    z-index: 0
}

.rs-ev.is-on .rs-rig:before {
    opacity: .9
}

.rs-stand {
    position: absolute;
    left: 50%;
    top: 0;
    width: calc(var(--bw) * .55);
    aspect-ratio: var(--stand-r);
    translate: calc(var(--stand-rod-x) * -1) 0;
    background: url(../assets/rsvp/stand.webp) center / 100% 100% no-repeat;
    filter: drop-shadow(0 3px 3px rgba(60, 40, 10, .3));
    z-index: 2
}

.rs-bangle {
    display: contents
}

.rs-bangle>i {
    position: absolute;
    left: 0;
    width: var(--bw);
    aspect-ratio: var(--bangle-r);
    top: calc(var(--bw) * .55 / var(--stand-r) * var(--stand-base-f) - var(--bw) / var(--bangle-r) * var(--bangle-split-f) - var(--bw) * .02);
    transform: translateY(110%);
    background: center / 100% 100% no-repeat;
    filter: drop-shadow(0 2px 2px rgba(60, 30, 10, .28));
    pointer-events: none
}

.rs-ev.is-on .rs-bangle>i {
    transform: none
}

.ev-mehndi .rs-bangle>i {
    background-image: url(../assets/rsvp/bangle-mehndi.webp)
}

.ev-nikah .rs-bangle>i {
    background-image: url(../assets/rsvp/bangle-nikah.webp)
}

.ev-baraat .rs-bangle>i {
    background-image: url(../assets/rsvp/bangle-baraat.webp)
}

.ev-walima .rs-bangle>i {
    background-image: url(../assets/rsvp/bangle-walima.webp)
}

.rs-rig {
    isolation: isolate
}

.rs-b-back {
    clip-path: inset(0 0 calc(100% - var(--bangle-split)) 0);
    z-index: 1;
    opacity: 0
}

.rs-b-front {
    clip-path: inset(var(--bangle-split) 0 0 0);
    z-index: 3;
    opacity: 0
}

.rs-b-whole {
    z-index: 4
}

.rs-ev.is-on .rs-b-back,
.rs-ev.is-on .rs-b-front {
    opacity: 1
}

.rs-ev.is-on .rs-b-whole {
    opacity: 0
}

.rs-ev:not(.is-on) .rs-bangle>i {
    filter: drop-shadow(0 2px 2px rgba(60, 30, 10, .18)) saturate(.5) opacity(.72)
}

.rs-bangle>i {
    transition: filter .5s ease
}

.rs-ev-name {
    margin-top: 4px;
    font: 400 clamp(22px, 30cqi, 32px)/1.1 "Alex Brush", cursive;
    color: var(--ink);
    white-space: nowrap
}

.rs-ev-date {
    font: 600 clamp(9.5px, 12.5cqi, 12px)/1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .06em;
    color: #0b3d31b3
}

.rs-ev-state {
    margin-top: 3px !important;
    min-height: 1.3em;
    font: italic 500 clamp(12px, 15cqi, 15px)/1.3 "Cormorant Garamond", Georgia, serif
}

.rs-yes {
    display: none;
    font-style: normal;
    font-weight: 700;
    color: var(--tone-ink)
}

.rs-yes:before {
    content: "\2713\a0"
}

.rs-no {
    color: #0b3d3180
}

.rs-ev.is-on .rs-yes {
    display: inline
}

.rs-ev.is-on .rs-no {
    display: none
}

.rs-ev.is-on .rs-ev-name {
    color: var(--tone-ink)
}

.rs-summary {
    min-height: 1.35em;
    margin: 14px 0 0;
    font: italic 500 clamp(15px, 4.8cqi, 18px)/1.35 "Cormorant Garamond", Georgia, serif;
    color: var(--ink);
    text-wrap: balance
}

.rs-party[hidden] {
    display: none
}

.rs-stepper {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin-top: 8px
}

.rs-stepper[hidden] {
    display: none
}

.rs-step {
    width: 40px;
    height: 40px;
    border: 1.5px solid rgba(134, 102, 42, .6);
    border-radius: 50%;
    background: #fffcf4cc;
    color: var(--gold-deep);
    font: 600 24px/1 Cormorant Garamond, Georgia, serif;
    cursor: pointer
}

.rs-step:disabled {
    opacity: .35;
    cursor: default
}

.rs-step:focus-visible {
    outline: 2px solid var(--gold-deep);
    outline-offset: 2px
}

.rs-count {
    min-width: 1.4em;
    font: 600 34px/1 Cormorant Garamond, Georgia, serif;
    font-variant-numeric: lining-nums;
    color: var(--ink)
}

.rs-seats {
    margin: 6px 0 0;
    font: italic 500 clamp(14px, 4.4cqi, 16px)/1.3 "Cormorant Garamond", Georgia, serif;
    color: #0b3d31bf
}

.rs-seats-n {
    font-style: normal;
    font-weight: 700
}

.rs-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.rs-error {
    min-height: 0;
    font: italic 600 clamp(14px, 4.4cqi, 16px)/1.35 "Cormorant Garamond", Georgia, serif;
    color: #9b2a2a
}

.rs-error:empty {
    display: none
}

.rs-send,
.rs-change {
    min-height: 48px;
    padding: 10px 30px;
    border: 1.5px solid rgba(201, 164, 92, .9);
    border-radius: 999px;
    background: linear-gradient(180deg, #125a47, var(--emerald-deep));
    box-shadow: 0 2px #ffffff40 inset, 0 6px 14px -4px #062a218c;
    color: var(--gold-soft);
    font: 700 clamp(15px, 4.8cqi, 17px)/1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .08em;
    cursor: pointer
}

.rs-send:hover,
.rs-change:hover {
    background: linear-gradient(180deg, #17684f, #0a3a2d)
}

.rs-send:focus-visible,
.rs-change:focus-visible {
    outline: 2px solid var(--gold-deep);
    outline-offset: 3px
}

.rs-send[aria-busy=true] {
    cursor: progress
}

.rs-dove {
    position: absolute;
    z-index: 3;
    right: 12%;
    bottom: calc(100% - 6px);
    width: clamp(66px, 18.5cqi, 104px);
    height: auto;
    filter: drop-shadow(0 4px 4px rgba(60, 40, 10, .25));
    transform-origin: 50% 100%;
    animation: rs-perch 7s ease-in-out infinite;
    pointer-events: none;
    user-select: none
}

@keyframes rs-perch {
    0%,
    86%,
    to {
        transform: none
    }
    89% {
        transform: translateY(-5px) rotate(-3deg)
    }
    92% {
        transform: none
    }
    95% {
        transform: rotate(2deg)
    }
}

.rsvp.is-flown .rs-dove {
    visibility: hidden
}

.rs-flyer {
    position: absolute;
    z-index: 6;
    aspect-ratio: var(--fly-r);
    background: url(../assets/rsvp/dove-fly.webp) 0 0 / calc(var(--fly-frames) * 100%) 100% no-repeat;
    animation: rs-flap .3s steps(4) infinite;
    filter: drop-shadow(0 6px 6px rgba(60, 40, 10, .22));
    pointer-events: none
}

.rs-flyer[hidden],
.rs-roll[hidden],
.rs-ribbon[hidden] {
    display: none
}

@keyframes rs-flap {
    0% {
        background-position: 0 0
    }
    to {
        background-position: calc(var(--fly-frames) / (var(--fly-frames) - 1) * 100%) 0
    }
}

.rs-roll {
    position: absolute;
    z-index: 5;
    aspect-ratio: var(--roll-r);
    background: url(../assets/rsvp/roll.webp) center / 100% 100% no-repeat;
    filter: drop-shadow(0 6px 8px rgba(50, 35, 10, .3));
    pointer-events: none
}

.rs-ribbon {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24%;
    aspect-ratio: var(--ribbon-r);
    translate: 0 18%;
    background: url(../assets/rsvp/ribbon.webp) center / 100% 100% no-repeat;
    transform: translate(-50%, -50%)
}

.rs-thanks,
.rs-closed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 10px clamp(4px, 3cqi, 20px) 14px
}

.rs-thanks-lead {
    font: 700 clamp(10.5px, 3.6cqi, 13px)/1.4 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-deep)
}

.rs-thanks-title {
    font: 400 clamp(38px, 12cqi, 58px)/1.15 "Alex Brush", cursive;
    color: var(--ink);
    outline: none;
    overflow-wrap: anywhere
}

.rs-thanks-text {
    max-width: 26em;
    font: italic 500 clamp(16px, 5cqi, 19px)/1.4 "Cormorant Garamond", Georgia, serif;
    text-wrap: balance
}

.rs-summary-list {
    list-style: none;
    width: min(100%, 360px);
    padding: 0;
    display: grid;
    gap: 8px
}

.rs-sum {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(134, 102, 42, .22);
    text-align: left
}

.rs-sum-bangle {
    width: 34px;
    aspect-ratio: var(--bangle-r, 1.85);
    background: center / contain no-repeat
}

.rs-sum-ev {
    font: 400 clamp(22px, 7cqi, 27px)/1 "Alex Brush", cursive;
    color: var(--ink)
}

.rs-sum-ans {
    font: 700 clamp(13px, 4.2cqi, 15px)/1.2 "Cormorant Garamond", Georgia, serif;
    color: var(--tone-ink, var(--ink))
}

.rs-sum.is-no .rs-sum-bangle {
    opacity: .35;
    filter: grayscale(.6)
}

.rs-sum.is-no .rs-sum-ans {
    font-weight: 500;
    font-style: italic;
    color: #0b3d318c
}

.rs-sum-guests .rs-sum-ev {
    font: 700 clamp(11px, 3.6cqi, 13px)/1.2 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-deep)
}

.rs-thanks-when {
    font: italic 500 14px/1.3 Cormorant Garamond, Georgia, serif;
    color: #0b3d3199
}

.rs-thanks-when:empty {
    display: none
}

.rs-change {
    margin-top: 4px !important
}

.rs-head,
.rs-stage {
    transition: opacity 1s ease, translate 1.3s cubic-bezier(.2, .7, .2, 1)
}

.rs-stage {
    transition-delay: .15s
}

.rsvp.is-ready:not(.is-seen) .rs-head {
    opacity: 0
}

.rsvp.is-ready:not(.is-seen) .rs-stage {
    opacity: 0;
    translate: 0 24px
}

@media(min-aspect-ratio:6/5) {
    html.is-tablet .rsvp {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
        align-items: start;
        column-gap: clamp(24px, 4cqi, 64px);
        padding: calc(var(--band-h) + 20px) clamp(24px, 5cqi, 72px) calc(var(--band-h) + 26px)
    }
    html.is-tablet .rs-head {
        position: sticky;
        top: calc(50svh - 90px);
        align-self: start;
        margin-top: 30svh
    }
    html.is-tablet .rs-stage {
        justify-self: center;
        margin-top: 96px
    }
}

@media(prefers-reduced-motion:reduce) {
    .rs-dove,
    .rs-flyer {
        animation: none
    }
    .rs-head,
    .rs-stage {
        transition: none
    }
}