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

.rsvp {
    --card-at: .525;
    --card-w: 90cqw;
    --edge: clamp(14px, 3.6cqw, 26px);
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    padding-bottom: 9cqw;
    overflow: hidden;
    background: #efe2da;
    color: var(--ink);
    container-type: inline-size
}

.rsvp p {
    margin: 0
}

.rs-scene {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    aspect-ratio: var(--scene-r);
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.rs-below {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100cqw / var(--scene-r) - 2px);
    bottom: 0;
    background-position: center top;
    background-size: 100% auto;
    background-repeat: repeat-y
}

.rs-water {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none
}

.rs-head {
    position: absolute;
    left: 0;
    right: 0;
    top: 3.2cqw;
    z-index: 2;
    text-align: center;
    padding: 0 5cqw
}

.rs-head>* {
    text-shadow: 0 0 14px rgba(255, 244, 238, .95), 0 0 3px rgba(255, 244, 238, .9)
}

.rs-kicker {
    font: 600 max(11px, 3.1cqw)/1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .3em;
    padding-left: .3em;
    text-transform: uppercase;
    color: var(--sage-ink)
}

.rs-title {
    margin: 0;
    font: 700 11cqw/1.05 Corinthia, cursive;
    padding: 0 .2em .04em;
    white-space: nowrap;
    color: var(--rose-ink)
}

.rs-by {
    font: italic 500 max(14px, 3.9cqw)/1.3 "Cormorant Garamond", Georgia, serif;
    color: var(--ink-soft)
}

.rs-stage {
    position: relative;
    z-index: 1;
    width: var(--card-w);
    margin: 0 auto;
    padding-top: calc(100cqw / var(--scene-r) * var(--card-at))
}

.rs-paper {
    position: relative;
    border: var(--edge) solid transparent;
    border-image: url(../assets/letter/paper.webp) 54 fill / var(--edge) round;
    filter: drop-shadow(0 2px 3px rgba(90, 50, 45, .22)) drop-shadow(0 10px 22px rgba(90, 50, 45, .18));
    container-type: inline-size
}

.rs-card-in {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4.6cqw;
    padding: 3cqw 3.5cqw 4cqw;
    text-align: center
}

.rs-label {
    display: block;
    font: 700 max(10px, 3.3cqw)/1.4 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .2em;
    padding-left: .2em;
    text-transform: uppercase;
    color: var(--sage-ink)
}

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

.rs-field {
    display: block
}

.rs-name,
.rs-wishes {
    display: block;
    width: 100%;
    margin-top: 1.2cqw;
    padding: 1.6cqw 1cqw;
    border: 0;
    border-bottom: 1px solid rgba(168, 100, 106, .55);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font: 500 max(16px, 5.2cqw)/1.35 "Cormorant Garamond", Georgia, serif;
    text-align: center;
    outline: none
}

.rs-wishes {
    min-height: 5.5em;
    resize: vertical;
    text-align: left;
    font-size: max(16px, 4.6cqw);
    border: 1px solid rgba(168, 100, 106, .3);
    border-radius: 6px;
    background: #fffcf780;
    padding: 2cqw 2.4cqw
}

.rs-name::placeholder {
    color: #5b3c4073;
    font-style: italic
}

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

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

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

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

.rs-help {
    margin-top: .6cqw !important;
    font: italic 500 max(13px, 3.9cqw)/1.3 "Cormorant Garamond", Georgia, serif;
    color: #5b3c40c7
}

.rs-buds {
    display: grid;
    grid-template-columns: repeat(var(--n, 4), 1fr);
    gap: 1.4cqw;
    margin-top: 2.4cqw
}

.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%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.rs-rose {
    position: relative;
    display: block;
    width: min(100%, 20cqw);
    aspect-ratio: 1;
    filter: saturate(.85) drop-shadow(0 2px 3px rgba(110, 60, 55, .22))
}

.rs-rose img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.rs-ev:not(.is-on) .rs-rose img:first-child,
.rs-ev.is-on .rs-rose img:last-child {
    opacity: 1
}

.rs-toggle:focus-visible {
    outline: none
}

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

.rs-ev-name {
    margin-top: .4cqw;
    font: 700 max(14px, 4.4cqw)/1.15 "Cormorant Garamond", Georgia, serif;
    color: var(--ink)
}

.rs-ev-date {
    font: italic 500 max(11px, 3.2cqw)/1.2 "Cormorant Garamond", Georgia, serif;
    color: #4f3337db
}

.rs-ev-state {
    font: 700 max(10px, 2.9cqw)/1.4 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .06em
}

.rs-ev-state .rs-yes {
    color: var(--rose-ink-soft)
}

.rs-ev-state .rs-no {
    color: #4f3337c7;
    font-weight: 500;
    font-style: italic
}

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

.rs-summary {
    min-height: 1.3em;
    margin-top: 2cqw !important;
    font: italic 500 max(13.5px, 4cqw)/1.3 "Cormorant Garamond", Georgia, serif;
    color: var(--rose-ink-soft);
    text-wrap: balance
}

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

.rs-stepper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5cqw;
    margin-top: 1.6cqw
}

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

.rs-step {
    width: max(38px, 10cqw);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(168, 100, 106, .55);
    border-radius: 50%;
    background: #fffbf6b3;
    color: var(--rose-ink-soft);
    font: 600 max(18px, 5.4cqw)/1 "Cormorant Garamond", Georgia, serif;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

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

.rs-count {
    min-width: 1.4em;
    font: 600 max(24px, 7.4cqw)/1 "Cormorant Garamond", Georgia, serif;
    color: var(--ink)
}

.rs-seats {
    margin-top: 1.6cqw !important;
    font: italic 500 max(13px, 3.8cqw)/1.3 "Cormorant Garamond", Georgia, serif;
    color: #5b3c40cc
}

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

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

.rs-error:empty {
    display: none
}

.rs-error {
    font: italic 600 max(13.5px, 4cqw)/1.3 "Cormorant Garamond", Georgia, serif;
    color: #a13e4a
}

.rs-send,
.rs-change {
    align-self: center;
    min-height: 46px;
    padding: 10px 28px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(#b87078, #9e5a61);
    box-shadow: 0 2px 6px #783c3c4d, inset 0 1px #ffffff40;
    color: #fff8f4;
    font: 700 max(15px, 4.6cqw)/1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .06em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.rs-send:hover,
.rs-change:hover {
    filter: brightness(1.06)
}

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

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

.rs-thanks,
.rs-closed {
    padding: 6cqw 6cqw 7cqw;
    text-align: center
}

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

.rs-thanks-lead {
    font: 600 max(11px, 3.3cqw)/1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .26em;
    padding-left: .26em;
    text-transform: uppercase;
    color: var(--sage-ink)
}

.rs-thanks-title {
    margin: .1em 0 .15em;
    font: 700 11cqw/1.1 Corinthia, cursive;
    color: var(--rose-ink);
    outline: none;
    text-wrap: balance
}

.rs-thanks-text {
    font: italic 500 max(15px, 4.6cqw)/1.35 "Cormorant Garamond", Georgia, serif;
    color: var(--ink);
    text-wrap: balance
}

.rs-summary-list {
    list-style: none;
    margin: 5cqw auto 0;
    padding: 0;
    width: min(100%, 460px);
    text-align: left
}

.rs-sum {
    display: grid;
    grid-template-columns: 10cqw 1fr auto;
    align-items: center;
    gap: 2.4cqw;
    padding: 1.4cqw 0;
    border-top: 1px solid rgba(168, 100, 106, .2)
}

.rs-sum:first-child {
    border-top: 0
}

.rs-sum-rose {
    width: 10cqw;
    aspect-ratio: 1;
    background: center / contain no-repeat;
    filter: saturate(.85)
}

.rs-sum-ev {
    font: 700 max(15px, 4.6cqw)/1.2 "Cormorant Garamond", Georgia, serif;
    color: var(--ink)
}

.rs-sum-ans {
    font: italic 500 max(13.5px, 4cqw)/1.2 "Cormorant Garamond", Georgia, serif;
    color: var(--rose-ink-soft);
    text-align: right
}

.rs-sum.is-no .rs-sum-ans {
    color: #5b3c4099
}

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

.rs-thanks-when {
    margin-top: 3cqw !important;
    font: italic 500 max(13px, 3.8cqw)/1.3 "Cormorant Garamond", Georgia, serif;
    color: #5b3c40b3
}

.rs-change {
    margin-top: 5cqw;
    background: #fffbf6cc;
    border: 1px solid rgba(168, 100, 106, .55);
    box-shadow: 0 1px 2px #783c3c1f;
    color: var(--ink)
}

.rs-fold {
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    border: var(--edge) solid transparent;
    border-image: url(../assets/letter/paper.webp) 54 fill / var(--edge) round;
    filter: drop-shadow(0 4px 8px rgba(90, 50, 45, .25));
    transform-origin: 50% 50%;
    pointer-events: none
}

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

.rs-boat {
    --boat-w: 21cqw;
    position: absolute;
    z-index: 4;
    left: 0;
    top: 0;
    width: var(--boat-w);
    aspect-ratio: var(--boat-r);
    pointer-events: none;
    transform-origin: 50% 90%
}

.rs-boat {
    perspective: 520px
}

.rs-boat-turn,
.rs-boat-bob {
    position: absolute;
    inset: 0;
    transform-origin: 50% 90%
}

.rs-boat-turn {
    transform-style: preserve-3d
}

.rs-boat-img,
.rs-boat-ref {
    position: absolute;
    inset: 0;
    background-size: 100% 100%
}

.rs-boat-img {
    filter: drop-shadow(0 2px 3px rgba(80, 40, 50, .25))
}

.rs-boat-ref {
    top: 88%;
    bottom: -76%;
    transform: scaleY(-1);
    opacity: .32;
    filter: blur(1.5px) saturate(1.2);
    -webkit-mask-image: linear-gradient(to top, #000, transparent 70%);
    mask-image: linear-gradient(to top, #000, transparent 70%)
}

.rs-ripple {
    position: absolute;
    left: 0;
    top: 0;
    width: 26cqw;
    aspect-ratio: 4;
    border: 1px solid rgba(255, 246, 240, .55);
    border-radius: 50%;
    box-shadow: 0 0 4px #fff0eb59, inset 0 0 3px #fff0eb4d;
    filter: blur(.4px);
    pointer-events: none
}

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

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

.rsvp.is-ready:not(.is-seen) .rs-stage {
    transform: translateY(18px)
}

@media(min-aspect-ratio:5/8) {
    html:root .rsvp {
        --card-at: .545;
        --card-w: 66cqw;
        padding-bottom: 7cqw
    }
    html:root .rs-head {
        top: 2.4cqw
    }
    html:root .rs-kicker {
        font-size: max(11px, 1.9cqw)
    }
    html:root .rs-title {
        font-size: 8.5cqw
    }
    html:root .rs-by {
        font-size: max(14px, 2.4cqw)
    }
    html:root .rs-boat {
        --boat-w: 15cqw
    }
    html:root .rs-ripple {
        width: 19cqw
    }
}

@media(min-aspect-ratio:6/5) {
    html.is-tablet .rsvp {
        --card-w: 36cqw;
        height: 100svh;
        min-height: 600px;
        padding: 0
    }
    html.is-tablet .rs-scene {
        left: 50%;
        top: 50%;
        width: max(100%, max(100svh, 600px) * var(--scene-r));
        translate: -50% -50%
    }
    html.is-tablet .rs-below {
        display: none
    }
    html.is-tablet .rs-head {
        left: 4cqw;
        right: auto;
        width: 52cqw;
        top: 1.6cqw
    }
    html.is-tablet .rs-kicker {
        font-size: max(11px, 1.2cqw)
    }
    html.is-tablet .rs-title {
        font-size: 5.4cqw
    }
    html.is-tablet .rs-by {
        font-size: max(14px, 1.45cqw)
    }
    html.is-tablet .rs-stage {
        position: absolute;
        right: 4cqw;
        top: 50%;
        translate: 0 -50%;
        margin: 0;
        padding: 0;
        max-height: calc(100% - 3cqw)
    }
    html.is-tablet .rs-card-in {
        gap: 3.4cqw
    }
    html.is-tablet .rs-boat {
        --boat-w: 10cqw
    }
    html.is-tablet .rs-ripple {
        width: 13cqw
    }
}

@media(prefers-reduced-motion:reduce) {
    .rs-head>*,
    .rs-stage {
        transition: none
    }
    .rsvp.is-ready:not(.is-seen) .rs-head>*,
    .rsvp.is-ready:not(.is-seen) .rs-stage {
        opacity: 1;
        transform: none
    }
}