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

@property --sw {
    syntax: "<length>";
    inherits: true;
    initial-value: 0px;
}

@property --u {
    syntax: "<length>";
    inherits: true;
    initial-value: 0px;
}

@property --gw {
    syntax: "<length>";
    inherits: true;
    initial-value: 0px;
}

.rsvp {
    overflow-x: clip;
    padding-bottom: calc(clamp(22px, 6.4cqi, 40px)/2 + clamp(26px, 7cqi, 52px))
}

.rs-mehndi {
    --tone-ink: #17603b;
    --glow: rgba(30, 160, 92, .5)
}

.rs-nikah {
    --tone-ink: #6d5d48;
    --glow: rgba(255, 238, 196, .95)
}

.rs-baraat {
    --tone-ink: #8e1428;
    --glow: rgba(214, 28, 58, .42)
}

.rs-walima {
    --tone-ink: #213f94;
    --glow: rgba(46, 86, 214, .42)
}

.rs-head {
    position: relative;
    z-index: 2;
    padding: calc(clamp(22px, 6.4cqi, 40px)/2 + clamp(30px, 9cqi, 60px)) 16px 0;
    text-align: center
}

.rs-kicker {
    font-size: clamp(11.5px, 3.3cqi, 15px)
}

.rs-title {
    font-size: clamp(46px, 13cqi, 84px);
    padding: 0 .1em
}

.rs-by {
    margin-top: .15em;
    font-size: clamp(15px, 4.3cqi, 20px)
}

.rs-desk {
    --sw: min(84cqi, max(560px, 60cqi));
    --u: min(100cqi, calc(var(--sw) * 1.284));
    position: relative;
    z-index: 2;
    width: var(--u);
    margin: clamp(16px, 4.6cqi, 34px) auto 0
}

.rs-card {
    --fs: clamp(15px, calc(var(--sw) * .046), 19.5px);
    container-type: inline-size;
    --gw: calc(var(--sw) * .155);
    position: relative;
    z-index: 1;
    display: block;
    width: var(--sw);
    margin: 0 auto;
    padding: calc(var(--sw) * (var(--pin-t) + .05)) calc(var(--sw) * (var(--pin-r) + .045)) calc(var(--sw) * (var(--pin-b) + .06)) calc(var(--sw) * (var(--pin-l) + .045));
    background-color: #f0d8b0;
    background-position: 0 0, 0 100%, 0 calc(var(--sw) * var(--pt));
    background-size: 100% auto;
    background-repeat: no-repeat, no-repeat, repeat-y;
    box-shadow: 0 1px 2px #402a0c47, 0 calc(var(--sw) * .02) calc(var(--sw) * .05) #402a0c33;
    color: var(--ink);
    font: 500 var(--fs) / 1.45 "Cormorant Garamond", Georgia, serif;
    text-align: center
}

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

.rs-card fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0
}

.rs-card p {
    margin: 0
}

.rs-label {
    display: block;
    width: 100%;
    padding: 0;
    font: 600 .72em/1.35 Cormorant Garamond, Georgia, serif;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--brass)
}

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

.rs-events>legend {
    margin-bottom: .75em;
    text-wrap: balance
}

.rs-gems {
    display: grid;
    grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
    justify-content: center;
    gap: 0 calc(var(--sw) * .01);
    margin: 0 auto
}

.rs-gems[data-n="1"] {
    max-width: 34%
}

.rs-gems[data-n="2"] {
    max-width: 56%
}

.rs-gems[data-n="3"] {
    max-width: 80%
}

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

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

.rs-toggle:focus {
    outline: none
}

.rs-toggle:focus-visible .rs-jewel {
    outline: 2px solid var(--brass);
    outline-offset: 3px;
    border-radius: 50%
}

.rs-jewel {
    position: relative;
    display: block;
    width: var(--gw);
    aspect-ratio: var(--gem-r)
}

.rs-jewel>i {
    position: absolute;
    inset: 0;
    background-position: 0 0;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.rs-jewel>.rs-glow {
    inset: -38%;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--glow), transparent);
    opacity: 0
}

.rs-setting {
    filter: drop-shadow(0 calc(var(--gw) * .03) calc(var(--gw) * .03) rgba(60, 38, 8, .45))
}

.rs-stone {
    filter: saturate(.45) brightness(.6)
}

.rs-jewel>.rs-glint {
    inset: auto;
    left: calc((var(--stone-x) - var(--stone-r) * .52) * 100%);
    top: calc((var(--stone-y) - var(--stone-r) * .56) * 100%);
    width: 46%;
    aspect-ratio: 1;
    translate: -50% -50%;
    background: radial-gradient(closest-side, #fff 0, #ffffffd9 14%, #fff0 42%), linear-gradient(90deg, transparent 48.5%, #fff 50%, transparent 51.5%), linear-gradient(0deg, transparent 48.5%, #fff 50%, transparent 51.5%);
    -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
    opacity: 0;
    pointer-events: none
}

.rs-ev.is-on .rs-stone {
    filter: none
}

.rs-ev.is-on .rs-glow {
    opacity: 1
}

.rs-ev.is-on .rs-glint {
    animation: rs-twinkle 5.6s ease-in-out calc(1.2s + var(--i) * 1.35s) infinite
}

@keyframes rs-twinkle {
    0%,
    84%,
    to {
        opacity: 0;
        transform: scale(.2) rotate(0)
    }
    90% {
        opacity: .95;
        transform: scale(1) rotate(45deg)
    }
    95% {
        opacity: 0;
        transform: scale(.35) rotate(80deg)
    }
}

.rs-ev-name {
    margin-top: .3em;
    font-weight: 600;
    font-size: 1.02em;
    line-height: 1.15;
    letter-spacing: .02em
}

.rs-ev-date {
    margin-top: .15em;
    font: 600 .66em/1.2 Cormorant Garamond, Georgia, serif;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brass);
    white-space: nowrap
}

.rs-card .rs-ev-state {
    margin-top: .2em;
    font-style: italic;
    font-size: .78em;
    line-height: 1.2;
    white-space: nowrap
}

.rs-yes {
    color: var(--tone-ink);
    font-weight: 600
}

@container (max-width: 400px) {
    .rs-wd {
        display: none
    }
    .rs-no {
        visibility: hidden
    }
}

.rs-no {
    color: #8c7c63
}

.rs-ev.is-on .rs-no,
.rs-ev:not(.is-on) .rs-yes {
    display: none
}

.rs-card .rs-help {
    margin-top: .8em;
    font-style: italic;
    font-size: .9em;
    color: #6a5a44;
    text-wrap: balance
}

.rs-card .rs-summary {
    margin-top: .25em;
    font-style: italic;
    font-size: .95em;
    text-wrap: balance
}

.rs-summary:empty {
    display: none
}

.rs-card .rs-rule {
    position: relative;
    width: 62%;
    height: 1em;
    margin: 1.05em auto 1em
}

.rs-rule:before,
.rs-rule:after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - .9em);
    height: 1px;
    background: linear-gradient(90deg, #9c723100, #b08434 60%, #c99d4b)
}

.rs-rule:before {
    left: 0
}

.rs-rule:after {
    right: 0;
    transform: scaleX(-1)
}

.rs-rule i,
.rs-rule i:before {
    position: absolute;
    left: 50%;
    top: 50%;
    width: .62em;
    height: .62em;
    margin: -.31em 0 0 -.31em;
    background: linear-gradient(135deg, #e5c273, #9c7231)
}

.rs-rule i {
    transform: rotate(45deg)
}

.rs-rule i:before {
    content: "";
    left: 0;
    top: 0;
    margin: 0;
    transform: rotate(45deg)
}

.rs-field {
    display: block
}

.rs-field+.rs-party,
.rs-party+.rs-field,
.rs-field+.rs-field {
    margin-top: 1.25em
}

.rs-name,
.rs-wishes {
    display: block;
    width: 100%;
    margin: .2em 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font: italic 500 1.18em/1.35 Cormorant Garamond, Georgia, serif;
    text-align: center;
    -webkit-appearance: none;
    appearance: none
}

.rs-name {
    padding: .2em 0 .15em;
    border-bottom: 1px solid rgba(156, 114, 49, .7)
}

.rs-name::placeholder,
.rs-wishes::placeholder {
    color: #5a4a3680
}

.rs-name:focus,
.rs-wishes:focus {
    outline: none
}

.rs-name:focus {
    border-bottom-color: var(--brass);
    box-shadow: 0 1px 0 var(--brass)
}

.rs-wishes {
    --lh: 1.6em;
    min-height: calc(var(--lh) * 3 + .3em);
    padding: 0 .2em;
    font-size: 1.05em;
    line-height: var(--lh);
    background: repeating-linear-gradient(180deg, transparent 0 calc(var(--lh) - 1px), rgba(156, 114, 49, .45) calc(var(--lh) - 1px) var(--lh));
    background-attachment: local;
    resize: none
}

.rs-wishes:focus {
    background-image: repeating-linear-gradient(180deg, transparent 0 calc(var(--lh) - 1px), rgba(156, 114, 49, .8) calc(var(--lh) - 1px) var(--lh))
}

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

.rs-stepper {
    display: inline-flex;
    align-items: center;
    gap: .9em;
    margin-top: .35em
}

.rs-step {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0 0 2px;
    border: 1px solid #b08a3e;
    border-radius: 50%;
    background: linear-gradient(180deg, #221c15, #0f0c09);
    box-shadow: 0 1px 3px #281a0659;
    color: #f0d99c;
    font: 600 22px/1 Cormorant Garamond, Georgia, serif;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

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

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

.rs-count {
    min-width: 1.4em;
    font: 600 1.9em/1 Cormorant Garamond, Georgia, serif;
    font-variant-numeric: lining-nums tabular-nums
}

.rs-card .rs-seats {
    margin-top: .3em;
    font-style: italic;
    font-size: .88em;
    color: #6a5a44
}

.rs-seats-n {
    font-weight: 600;
    color: var(--ink)
}

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

.rs-card .rs-error {
    margin-top: 1em;
    font-style: italic;
    font-size: .95em;
    color: #8e1428;
    text-wrap: balance
}

.rs-error:empty {
    display: none
}

.rs-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-height: 50px;
    margin-top: 1.3em;
    padding: 0 1.5em;
    border: 1px solid #b08a3e;
    border-radius: 999px;
    background: linear-gradient(180deg, #241d15, #0f0c09);
    box-shadow: 0 2px 7px #281a0659, inset 0 1px #f0d99c2e;
    color: #f0d99c;
    font: 700 1em/1 Cormorant Garamond, Georgia, serif;
    letter-spacing: .06em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.rs-send svg {
    flex: none;
    width: 1.4em;
    height: 1.4em;
    fill: none;
    stroke: #e2c47e;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round
}

.rs-send:hover {
    background: #2a231a
}

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

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

.rs-thanks,
.rs-closed {
    position: relative;
    z-index: 1;
    width: min(calc(var(--sw) * 1.06), calc(100cqi - 32px));
    margin: 0 auto;
    padding: clamp(10px, 3cqi, 22px) 0 clamp(8px, 2cqi, 16px);
    font: 500 clamp(15.5px, 4.4cqi, 20px) / 1.45 "Cormorant Garamond", Georgia, serif;
    text-align: center
}

.rs-thanks:before,
.rs-closed:before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -6% -10% -4%;
    background: radial-gradient(closest-side, #f7f0e2eb, #f7f0e2b3 60%, #f7f0e200);
    pointer-events: none
}

.rs-thanks-lead {
    font-size: .72em;
    text-wrap: balance
}

.rs-thanks-title {
    margin: .08em 0 .12em;
    font-size: clamp(42px, 11.5cqi, 76px);
    line-height: 1.15;
    text-wrap: balance
}

.rs-thanks-title:focus {
    outline: none
}

.rs-thanks-text {
    margin: 0 auto;
    max-width: 26em;
    font-style: italic;
    font-size: 1.06em;
    text-wrap: balance
}

.rs-summary-list {
    display: grid;
    gap: .4em;
    width: fit-content;
    margin: 1em auto 0;
    padding: 0;
    list-style: none;
    text-align: left
}

.rs-sum {
    display: grid;
    grid-template-columns: 1.9em auto;
    align-items: center;
    column-gap: .65em
}

.rs-sum .rs-jewel {
    width: 1.9em
}

.rs-sum.is-on .rs-stone {
    filter: none
}

.rs-sum-ev {
    font-weight: 600
}

.rs-sum-ans {
    font-style: italic;
    color: #5a4a36
}

.rs-sum.is-no .rs-sum-ans {
    color: #8c7c63
}

.rs-sum-star {
    justify-self: center;
    width: .8em;
    height: .8em;
    background: linear-gradient(135deg, #e5c273, #9c7231);
    clip-path: polygon(50% 0, 61% 26%, 85% 15%, 74% 39%, 100% 50%, 74% 61%, 85% 85%, 61% 74%, 50% 100%, 39% 74%, 15% 85%, 26% 61%, 0 50%, 26% 39%, 15% 15%, 39% 26%)
}

.rs-thanks-when {
    margin: .9em 0 0;
    font-style: italic;
    font-size: .86em;
    color: #6a5a44
}

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

.rs-change {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 1.1em;
    padding: 0 1.4em;
    border: 1px solid rgba(156, 114, 49, .75);
    border-radius: 999px;
    background: #fffaeebf;
    box-shadow: 0 1px 2px #3c280a24;
    color: var(--ink);
    font: 700 .92em/1 Cormorant Garamond, Georgia, serif;
    letter-spacing: .04em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.rs-change:hover {
    background: #fffcf4;
    border-color: var(--brass)
}

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

.rs-foot {
    position: relative;
    height: calc(var(--u) * .44);
    pointer-events: none
}

.rs-foot>i,
.rs-case {
    position: absolute;
    background-position: 0 0;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.rs-pen {
    z-index: 2;
    left: calc(var(--u) * .035);
    top: calc(var(--u) * .018);
    width: calc(var(--u) * .494);
    aspect-ratio: var(--pen-r);
    filter: drop-shadow(calc(var(--u) * .004) calc(var(--u) * .012) calc(var(--u) * .008) rgba(60, 40, 10, .35))
}

.rs-ink {
    z-index: 2;
    left: calc(var(--u) * .733);
    top: calc(var(--u) * .008);
    width: calc(var(--u) * .234);
    aspect-ratio: var(--ink-r);
    filter: drop-shadow(calc(var(--u) * .006) calc(var(--u) * .014) calc(var(--u) * .012) rgba(50, 32, 8, .4))
}

.rs-case {
    --cap-rest: translate(124%, 4%);
    z-index: 1;
    left: calc(var(--u) * .027);
    top: calc(var(--u) * .236);
    width: calc(var(--u) * .813);
    aspect-ratio: var(--case-r);
    filter: drop-shadow(0 calc(var(--u) * .012) calc(var(--u) * .01) rgba(46, 30, 8, .4))
}

.rs-case>span {
    position: absolute;
    background-position: 0 0;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.rs-case>.c-body,
.rs-case>.c-gleam {
    inset: 0
}

.rs-case>.c-body {
    clip-path: none
}

.rs-case>.c-shut {
    left: calc(var(--shut-l) * 100%);
    top: 0;
    width: calc(var(--shut-w) * 100%);
    height: 100%;
    opacity: 0
}

.rs-case>.c-cap {
    left: calc(var(--cap-l) * 100%);
    top: calc(var(--cap-t) * 100%);
    width: calc(var(--cap-w) * 100%);
    height: calc(var(--cap-h) * 100%);
    transform: var(--cap-rest)
}

.rsvp.is-sealed .rs-case>.c-body {
    clip-path: inset(0 calc(var(--body-cut) * 100%) 0 0)
}

.rsvp.is-sealed .rs-case>.c-shut {
    opacity: 1
}

.rsvp.is-sealed .rs-case>.c-cap {
    transform: none
}

.rs-case>.c-gleam {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    background-image: linear-gradient(100deg, transparent 43%, rgba(255, 244, 212, .95) 50%, transparent 57%);
    background-size: 300% 100%;
    background-position: 100% 0;
    mix-blend-mode: screen
}

.rs-roll {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    pointer-events: none
}

.rs-roll .r-art {
    position: absolute;
    inset: 0;
    background-position: 0 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    filter: drop-shadow(0 3px 3px rgba(46, 30, 8, .38))
}

.rs-lamp {
    position: absolute !important;
    inset: 0;
    container-type: size;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
    mix-blend-mode: soft-light
}

.rs-lamp:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: max(130cqi, 700px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #ffc468b3, #ffb45a4d 38%, #ffaa5000 68%);
    translate: -50% -50%;
    will-change: transform;
    animation: rs-drift 36s ease-in-out infinite alternate
}

@keyframes rs-drift {
    0% {
        transform: translate(24cqw, 8cqh)
    }
    35% {
        transform: translate(74cqw, 36cqh)
    }
    70% {
        transform: translate(30cqw, 66cqh)
    }
    to {
        transform: translate(70cqw, 94cqh)
    }
}

@media(min-aspect-ratio:6/5) {
    html.is-tablet .rs-desk {
        --sw: min(46cqi, 640px)
    }
    html.is-tablet .rs-title {
        font-size: clamp(46px, 7cqi, 84px)
    }
    html.is-tablet .rs-kicker {
        font-size: clamp(11.5px, 1.3cqi, 15px)
    }
    html.is-tablet .rs-by {
        font-size: clamp(15px, 1.7cqi, 20px)
    }
    html.is-tablet .rs-thanks,
    html.is-tablet .rs-closed {
        font-size: clamp(15.5px, 1.6cqi, 20px)
    }
    html.is-tablet .rs-thanks-title {
        font-size: clamp(42px, 5cqi, 76px)
    }
}

@media(prefers-reduced-motion:reduce) {
    .rs-lamp:before {
        animation: none;
        left: 40%;
        top: 30%
    }
    .rs-ev.is-on .rs-glint {
        animation: none
    }
}