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

.rsvp {
    --sun-y: 30%;
    --sun-x: -40%;
    --tone-ink: var(--cobalt);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(var(--seam-h) * .5 + 40px) 16px calc(var(--seam-h) * .5 + 56px);
    text-align: center;
    overflow-x: clip;
    -webkit-tap-highlight-color: transparent
}

.rsvp>:not(.plaster-sun) {
    position: relative
}

.rs-ev.ev-mehndi,
.rs-sum.ev-mehndi {
    --glazed: url(../assets/rsvp/tile-mehndi.webp)
}

.rs-ev.ev-nikah,
.rs-sum.ev-nikah {
    --glazed: url(../assets/rsvp/tile-nikah.webp)
}

.rs-ev.ev-baraat,
.rs-sum.ev-baraat {
    --glazed: url(../assets/rsvp/tile-baraat.webp)
}

.rs-ev.ev-walima,
.rs-sum.ev-walima {
    --glazed: url(../assets/rsvp/tile-walima.webp)
}

.rs-head>* {
    margin: 0
}

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

.rs-title {
    font: 400 clamp(42px, 12cqi, 76px)/1.2 "Great Vibes", cursive
}

.rs-title .glaze {
    text-wrap: balance
}

.rs-title .glaze,
.rs-thanks-title .glaze {
    display: inline-block;
    padding: 0 .28em .08em
}

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

.rs-stage {
    width: min(100%, 620px);
    margin-top: clamp(78px, 21cqi, 112px);
    container: rsstage / inline-size
}

.rs-paper {
    --lw: 100cqi;
    width: var(--lw);
    margin: 0;
    border-style: solid;
    border-color: transparent;
    border-width: var(--pb);
    filter: drop-shadow(0 1px 1px rgba(60, 40, 12, .16)) drop-shadow(0 14px 18px rgba(40, 28, 10, .22));
    container: rspaper / inline-size;
    color: var(--ink)
}

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

.rs-card-in {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(18px, 6cqi, 26px);
    padding: clamp(12px, 4cqi, 22px) clamp(4px, 2.4cqi, 16px) clamp(12px, 4cqi, 22px)
}

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

.rs-lead {
    font: italic 500 clamp(18px, 6.2cqi, 23px)/1.3 "Cormorant Garamond", Georgia, serif;
    color: var(--kick)
}

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

.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(176, 132, 58, .6);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    text-align: center;
    font: italic 500 clamp(19px, 7cqi, 26px)/1.3 "Cormorant Garamond", Georgia, serif;
    padding: 4px 2px 5px;
    outline: none
}

.rs-wishes {
    border: 1.5px solid rgba(176, 132, 58, .45);
    border-radius: 10px;
    background: #fffcf499;
    text-align: left;
    font-size: clamp(16px, 5.4cqi, 19px);
    padding: 8px 10px;
    resize: vertical
}

.rs-name::placeholder {
    color: #1b2a525c
}

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

.rs-wishes:focus {
    border-color: var(--cobalt);
    box-shadow: 0 0 0 2px #1d3a8233
}

.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(15px, 4.8cqi, 17px)/1.3 "Cormorant Garamond", Georgia, serif;
    color: #1b2a52b8
}

.rs-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 5cqi, 22px) 6px;
    width: 100%;
    max-width: 480px;
    margin: clamp(14px, 5cqi, 22px) auto 0
}

.rs-tiles[data-n="1"] {
    grid-template-columns: minmax(0, 1fr)
}

.rs-tiles[data-n="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

@container rspaper (min-width: 390px) {
    .rs-tiles[data-n="4"] {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

.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(--cobalt);
    outline-offset: 3px;
    border-radius: 12px
}

.rs-tile {
    --tw: min(84cqi, 104px);
    position: relative;
    display: block;
    width: var(--tw);
    aspect-ratio: 300 / 292;
    margin-bottom: 6px;
    perspective: calc(var(--tw) * 5)
}

.rs-tile:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 165%;
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--tone) 42%, transparent), transparent);
    opacity: 0;
    transition: opacity .6s ease .3s
}

.rs-ev.is-on .rs-tile:before {
    opacity: 1
}

.rs-flip {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d
}

.rs-ev.is-on .rs-flip {
    transform: rotateY(180deg)
}

.rsvp.is-asleep .rs-flip {
    display: none
}

.rs-face {
    position: absolute;
    inset: 0;
    background: 0 0 / 100% 100% no-repeat;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    filter: drop-shadow(calc(var(--tw) * .03) calc(var(--tw) * .05) calc(var(--tw) * .05) rgba(60, 40, 12, .38))
}

.rs-plain {
    background-image: url(../assets/rsvp/tile-plain.webp)
}

.rs-glazed {
    background-image: var(--glazed);
    transform: rotateY(180deg)
}

.rs-ev-name {
    font: 400 clamp(25px, 27cqi, 32px)/1.1 "Great Vibes", cursive;
    color: var(--ink);
    white-space: nowrap;
    transition: color .4s ease
}

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

.rs-ev-date {
    font: 600 clamp(11px, 11cqi, 12.5px)/1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .04em;
    color: #1b2a52b8;
    white-space: nowrap
}

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

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

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

.rs-no {
    color: #1b2a52a3
}

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

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

.rs-summary {
    min-height: 1.35em;
    margin: 10px 0 0;
    font: italic 500 clamp(16px, 5.2cqi, 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: 42px;
    height: 42px;
    border: 1.5px solid rgba(176, 132, 58, .75);
    border-radius: 50%;
    background: #fffcf4d9;
    box-shadow: 0 1px 2px #3c280a24;
    color: var(--cobalt);
    font: 600 25px/1 Cormorant Garamond, Georgia, serif;
    cursor: pointer
}

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

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

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

.rs-seats {
    margin: 6px 0 0;
    font: italic 500 clamp(15px, 4.8cqi, 17px)/1.3 "Cormorant Garamond", Georgia, serif;
    color: #1b2a52c2
}

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

.rs-hp {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    pointer-events: none
}

.rs-error {
    font: italic 600 clamp(15px, 4.8cqi, 17px)/1.35 "Cormorant Garamond", Georgia, serif;
    color: #9b2a1e
}

.rs-error:empty {
    display: none
}

.rs-send,
.rs-change {
    min-height: 48px;
    padding: 10px 30px;
    border: 1.5px solid rgba(214, 170, 90, .9);
    border-radius: 999px;
    background: linear-gradient(180deg, #2c4f9f, var(--cobalt) 55%, var(--cobalt-deep));
    box-shadow: 0 2px #ffffff38 inset, 0 6px 14px -4px #0a163c8c;
    color: #fbf1dc;
    font: 700 clamp(16px, 5.2cqi, 18px)/1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .06em;
    cursor: pointer
}

.rs-send:hover,
.rs-change:hover {
    background: linear-gradient(180deg, #3358ab, #213f8a 55%, #122a5e)
}

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

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

.rs-pigeon {
    position: absolute;
    z-index: 3;
    right: 11%;
    bottom: calc(100% - 5px);
    width: clamp(70px, 20cqi, 108px);
    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%,
    84%,
    to {
        transform: none
    }
    87% {
        transform: translateY(-4px) rotate(-3deg)
    }
    90% {
        transform: none
    }
    94% {
        transform: rotate(2.5deg)
    }
}

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

.rs-flyer {
    position: absolute;
    z-index: 6;
    aspect-ratio: var(--fly-r);
    background: url(../assets/rsvp/pigeon-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-cord[hidden],
.rs-tie[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-cord {
    position: absolute;
    left: 50%;
    top: -3%;
    height: 106%;
    width: calc(var(--tie-w) * var(--tie-cord));
    translate: -50% 0;
    border-radius: 40%/8%;
    background: linear-gradient(90deg, #3c0a0059, #ffe6be40 35%, #3c0a0066), repeating-linear-gradient(-58deg, #c2281d 0 28%, #e59a2a 28% 50%) 0 0 / 100% calc(var(--tie-w) * var(--tie-cord) * 2.2)
}

.rs-roll {
    --tie-w: 58%
}

.rs-tie {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--tie-w);
    aspect-ratio: var(--tie-r);
    translate: calc(var(--tie-kx) * -1) calc(var(--tie-ky) * -1);
    background: url(../assets/rsvp/tie.webp) center / 100% 100% no-repeat;
    filter: drop-shadow(0 2px 2px rgba(60, 20, 5, .35));
    transform-origin: var(--tie-kx) var(--tie-ky)
}

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

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

.rs-thanks-title {
    font: 400 clamp(38px, 13cqi, 60px)/1.2 "Great Vibes", cursive;
    outline: none;
    overflow-wrap: anywhere
}

.rs-thanks-text {
    max-width: 26em;
    font: italic 500 clamp(17px, 5.4cqi, 20px)/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(176, 132, 58, .26);
    text-align: left
}

.rs-sum-tile {
    width: 34px;
    aspect-ratio: 300 / 292;
    background: var(--glazed) center / 100% 100% no-repeat;
    filter: drop-shadow(1px 1.5px 1.5px rgba(60, 40, 12, .3))
}

.rs-sum.is-no .rs-sum-tile {
    background-image: url(../assets/rsvp/tile-plain.webp)
}

.rs-sum-guests .rs-sum-tile {
    visibility: hidden
}

.rs-sum-ev {
    font: 400 clamp(24px, 7.6cqi, 28px)/1 "Great Vibes", cursive;
    color: var(--ink)
}

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

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

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

.rs-sum-guests .rs-sum-ans {
    color: var(--ink)
}

.rs-thanks-when {
    font: italic 500 15px/1.3 Cormorant Garamond, Georgia, serif;
    color: #1b2a529e
}

.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.4fr);
        align-items: start;
        column-gap: clamp(24px, 4cqi, 64px);
        padding: calc(var(--seam-h) * .5 + 24px) clamp(24px, 5cqi, 72px) calc(var(--seam-h) * .5 + 30px)
    }
    html.is-tablet .rs-head {
        position: sticky;
        top: calc(50svh - 90px);
        align-self: start;
        margin-top: 32svh
    }
    html.is-tablet .rs-stage {
        justify-self: center;
        margin-top: 118px
    }
}

@media(prefers-reduced-motion:reduce) {
    .rs-pigeon,
    .rs-flyer {
        animation: none
    }
    .rs-head,
    .rs-stage,
    .rs-tile:before,
    .rs-ev-name {
        transition: none
    }
}