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

.rsvp {
    position: relative;
    background: #3a0a12;
    container: rsec / inline-size
}

.r-bg {
    position: absolute;
    inset: 0;
    background: #3a0a12 url(../assets/letter/bg-phone.webp) center / cover no-repeat
}

.r-inner {
    --edge: calc(clamp(44px, 13vw, 84px)*.66);
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--edge) + 8cqi) 6cqi calc(var(--edge) + 4cqi);
    overflow-x: clip
}

.r-side {
    display: contents
}

.r-head {
    order: 0
}

.r-stage {
    order: 1
}

.r-still {
    order: 2
}

.r-head {
    text-align: center;
    color: #f4ead9
}

.r-head>* {
    margin: 0
}

.r-kicker {
    font: 600 3.2cqi/1.3 Cormorant Garamond, Georgia, serif;
    letter-spacing: .3em;
    padding-left: .3em;
    text-transform: uppercase;
    color: #d4b06a
}

.r-title {
    font: 400 12cqi/1.15 Pinyon Script, cursive;
    color: #f4ead9;
    text-shadow: 0 .02em .12em rgba(20, 0, 5, .5)
}

.r-by {
    margin-top: .4em !important;
    font: italic 500 4.4cqi/1.4 Cormorant Garamond, Georgia, serif;
    color: #f4ead9cc
}

.r-stage {
    position: relative;
    margin-top: 7cqi
}

.r-paper {
    --k: 1;
    --corner: 27cqi;
    position: relative;
    container: rcard / inline-size;
    border-radius: 1.2cqi;
    background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(255, 250, 238, .5), transparent 70%), linear-gradient(90deg, rgba(120, 72, 30, .12), transparent 8%, transparent 92%, rgba(120, 72, 30, .12)), #f3e8d2 url(../assets/letter/paper.webp) center / cover;
    box-shadow: 0 2.4cqi 7cqi #1000048c, 0 .4cqi 1cqi #1000044d;
    color: var(--ink);
    text-align: center
}

.r-paper:before {
    content: "";
    position: absolute;
    inset: 2cqi;
    border: var(--corner) solid transparent;
    border-image: url(../assets/rsvp/frame.webp) 26.2% round;
    pointer-events: none
}

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

.r-card-in {
    position: relative;
    z-index: 1;
    padding: 21cqi 10.5cqi 15cqi
}

.r-card-in>p {
    margin: 0
}

.r-lead {
    font: 600 calc(3.5cqi * var(--k))/1.3 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .24em;
    padding-left: .24em;
    text-transform: uppercase;
    color: #9b7338
}

.r-label {
    display: block;
    margin: 0;
    font: 600 max(11px, calc(3.3cqi * var(--k)))/1.35 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-soft)
}

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

.r-name-field {
    display: block;
    margin-top: 10cqi
}

.r-name {
    display: block;
    width: 100%;
    margin-top: 1cqi;
    padding: 0 1cqi .4em;
    border: 0;
    border-bottom: 1px dashed rgba(169, 128, 63, .75);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font: 400 calc(8.4cqi * var(--k))/1.25 "Pinyon Script", cursive;
    text-align: center;
    outline: none;
    -webkit-appearance: none;
    appearance: none
}

.r-name::placeholder {
    color: #8a4a5280;
    font: italic 500 max(16px, calc(4.4cqi * var(--k)))/1.6 "Cormorant Garamond", Georgia, serif
}

.r-name:focus-visible {
    border-bottom: 1px solid #a9803f;
    box-shadow: 0 1px #a9803f
}

.r-events {
    margin-top: 8cqi
}

.r-event {
    padding: 4cqi 0 3cqi;
    border-top: 1px solid rgba(169, 128, 63, .3);
    border-radius: 1cqi;
    transition: background-color .4s
}

.r-events-label+.r-event {
    border-top: 0
}

.r-ev {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0
}

.r-ev-name {
    font: 400 calc(8.6cqi * var(--k))/1.1 "Pinyon Script", cursive;
    color: var(--ink)
}

.r-ev-date {
    font: italic 500 calc(3.9cqi * var(--k))/1.35 "Cormorant Garamond", Georgia, serif;
    color: var(--ink-soft)
}

.r-choices {
    display: flex;
    justify-content: center;
    gap: 2cqi;
    margin-top: 2cqi
}

.r-choice {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 1cqi 3.4cqi;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.r-choice input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer
}

.r-choice-t {
    position: relative;
    font: 600 calc(4.3cqi * var(--k))/1.2 "Cormorant Garamond", Georgia, serif;
    color: var(--ink);
    opacity: .82;
    white-space: nowrap;
    transition: opacity .3s, color .3s;
    pointer-events: none
}

.r-choice:hover .r-choice-t {
    opacity: 1
}

.r-choice input:checked+.r-choice-t {
    opacity: 1
}

.r-choices.is-answered .r-choice input:not(:checked)+.r-choice-t {
    opacity: .42
}

.r-choice input:focus-visible+.r-choice-t {
    outline: 2px solid #a9803f;
    outline-offset: .5em;
    border-radius: 2px
}

@property --sweep {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.r-ring {
    position: absolute;
    inset: -14% -6%;
    background: url(../assets/rsvp/ring.webp) center / 100% 100% no-repeat;
    opacity: 0;
    pointer-events: none;
    --sweep: 0deg;
    -webkit-mask: conic-gradient(from 292deg, #000 var(--sweep), transparent 0);
    mask: conic-gradient(from 292deg, #000 var(--sweep), transparent 0)
}

.r-choice input:checked~.r-ring {
    opacity: 1;
    --sweep: 360deg
}

.r-choices.is-drawing .r-choice input:checked~.r-ring {
    animation: r-draw .6s cubic-bezier(.45, .1, .35, 1) both
}

@keyframes r-draw {
    0% {
        --sweep: 0deg
    }
    to {
        --sweep: 360deg
    }
}

.r-event.is-missing {
    background: #a3122a12
}

.r-event.is-missing .r-ev-name {
    color: #a3122a
}

.r-party {
    margin-top: 6cqi;
    padding-top: 5cqi;
    border-top: 1px solid rgba(169, 128, 63, .3)
}

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

.r-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5cqi;
    margin-top: 2.4cqi
}

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

.r-step {
    width: max(44px, calc(11cqi * var(--k)));
    height: max(44px, calc(11cqi * var(--k)));
    padding: 0;
    border: 1px solid rgba(169, 128, 63, .8);
    border-radius: 50%;
    background: #fffaf08c;
    color: var(--ink);
    font: 500 calc(6.6cqi * var(--k))/1 "Cormorant Garamond", Georgia, serif;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s, opacity .2s
}

.r-step:hover {
    background: #fffaf0f2
}

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

.r-count {
    min-width: 2ch;
    font: 600 calc(11cqi * var(--k))/1 "Cormorant Garamond", Georgia, serif;
    color: var(--ink)
}

.r-seats {
    margin: 2cqi 0 0 !important;
    font: italic 500 calc(3.9cqi * var(--k))/1.4 "Cormorant Garamond", Georgia, serif;
    color: var(--ink-soft)
}

.r-wishes-field {
    display: block;
    margin-top: 6cqi;
    padding-top: 5cqi;
    border-top: 1px solid rgba(169, 128, 63, .3)
}

.r-wishes {
    --line: 1.85em;
    display: block;
    width: 100%;
    height: calc(var(--line) * 3 + 2px);
    margin-top: 1.4cqi;
    padding: 0 1cqi;
    border: 0;
    border-radius: 0;
    background: repeating-linear-gradient(transparent 0 calc(var(--line) - 1px), rgba(169, 128, 63, .45) calc(var(--line) - 1px) var(--line)) local;
    color: var(--ink);
    font: italic 500 max(16px, calc(4.6cqi * var(--k)))/var(--line) "Cormorant Garamond", Georgia, serif;
    resize: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none
}

.r-wishes:focus-visible {
    box-shadow: 0 1px #a9803f
}

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

.r-error {
    margin: 4cqi 0 0 !important;
    font: italic 600 calc(4.1cqi * var(--k))/1.4 "Cormorant Garamond", Georgia, serif;
    color: #a3122a
}

.r-error:empty {
    display: none
}

.r-send {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: max(48px, calc(13cqi * var(--k)));
    margin-top: 7cqi;
    padding: 0 calc(7cqi * var(--k)) 0 calc(14cqi * var(--k));
    border: 0;
    border-radius: 999px;
    background: linear-gradient(#6c182b, #551020);
    box-shadow: 0 1cqi 2.6cqi #3a0a1259, inset 0 1px #ffffff1f;
    color: #f4ead9;
    font: 600 calc(4.9cqi * var(--k))/1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .04em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s, transform .2s
}

.r-send:hover {
    background: linear-gradient(#7a1d31, #5e1424)
}

.r-send:active {
    transform: translateY(1px)
}

.r-send[aria-busy=true] {
    cursor: default
}

.r-send:focus-visible,
.r-step:focus-visible,
.r-change:focus-visible {
    outline: 2px solid #a9803f;
    outline-offset: 3px
}

.r-send-seal {
    position: absolute;
    left: calc(-2.6cqi * var(--k));
    top: 50%;
    width: calc(15.5cqi * var(--k));
    transform: translateY(-50%) rotate(-10deg);
    filter: drop-shadow(0 .8cqi 1cqi rgba(40, 4, 10, .45));
    transition: transform .35s cubic-bezier(.3, 1.4, .5, 1)
}

.r-send:hover .r-send-seal {
    transform: translateY(-50%) rotate(4deg) scale(1.04)
}

.r-quill {
    position: absolute;
    z-index: 2;
    right: -7cqi;
    top: -17cqi;
    width: 34cqi;
    height: auto;
    transform: rotate(10deg);
    filter: drop-shadow(-1cqi 2cqi 1.6cqi rgba(20, 0, 5, .45));
    pointer-events: none
}

.r-still {
    position: relative;
    z-index: 2;
    width: 86cqi;
    height: auto;
    margin: -7cqi auto 0;
    filter: drop-shadow(0 2cqi 2.4cqi rgba(16, 0, 4, .5));
    pointer-events: none
}

.r-scene {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none
}

.r-scene[hidden] {
    display: none
}

.r-env-box {
    position: absolute;
    left: 50%;
    top: var(--cy, 50%);
    width: var(--env-w);
    height: var(--env-h);
    margin: calc(var(--env-h) / -2) 0 0 calc(var(--env-w) / -2);
    perspective: calc(var(--env-h) * 2.4)
}

.r-env {
    position: absolute;
    inset: 0
}

.r-env .env-inside {
    border-radius: 1px
}

.r-env .inside-shade {
    opacity: 0
}

.r-env .env-base {
    visibility: hidden
}

.r-scene.is-closed .env-base {
    visibility: visible
}

.r-scene.is-closed .flap {
    visibility: hidden
}

.r-mini {
    position: absolute;
    inset: 9% 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3cqi;
    border-radius: 2px;
    box-shadow: 0 1px 4px #280a0a59
}

.r-mini.r-paper {
    --corner: 22cqi;
    position: absolute
}

.r-mini.r-paper:before {
    inset: 3cqi
}

.r-mini-name {
    max-width: 64%;
    font: 400 13cqi/1.15 Pinyon Script, cursive;
    color: var(--ink);
    overflow-wrap: anywhere
}

.r-mini-ans {
    max-width: 62%;
    font: 600 4.8cqi/1.4 Cormorant Garamond, Georgia, serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #9b7338
}

.r-seal {
    position: absolute;
    left: var(--seal-x);
    top: var(--seal-y);
    width: var(--seal-size);
    margin: calc(var(--seal-size) / -2) 0 0 calc(var(--seal-size) / -2);
    opacity: 0;
    filter: drop-shadow(0 calc(var(--env-w) * .01) calc(var(--env-w) * .014) rgba(30, 0, 6, .55))
}

.r-thanks .r-card-in,
.r-closed .r-card-in {
    padding: 15cqi 11cqi 16cqi
}

.r-thanks-title,
.r-closed-title {
    margin: 3cqi 0 0 !important;
    font: 400 calc(11cqi * var(--k))/1.15 "Pinyon Script", cursive;
    color: var(--ink);
    outline: none
}

.r-thanks-greet {
    display: block;
    font-size: .62em;
    color: var(--ink-soft)
}

.r-thanks-text {
    margin: 3cqi auto 0 !important;
    max-width: 30em;
    text-wrap: balance;
    font: italic 500 calc(4.6cqi * var(--k))/1.45 "Cormorant Garamond", Georgia, serif;
    color: var(--ink-soft)
}

.r-summary {
    display: inline-grid;
    grid-template-columns: auto auto;
    column-gap: 4cqi;
    row-gap: 1.6cqi;
    margin: 6cqi auto 0;
    padding: 5cqi 0 0;
    border-top: 1px solid rgba(169, 128, 63, .35);
    list-style: none;
    text-align: left
}

.r-summary li {
    display: contents
}

.r-sum-ev {
    font: 400 calc(6.4cqi * var(--k))/1.1 "Pinyon Script", cursive;
    color: var(--ink);
    text-align: right
}

.r-sum-ans {
    align-self: center;
    font: 600 calc(3.8cqi * var(--k))/1.2 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9b7338
}

.r-sum-ans.is-no {
    color: var(--ink-soft);
    opacity: .8
}

.r-thanks-when {
    margin: 5cqi 0 0 !important;
    font: italic 500 calc(3.7cqi * var(--k))/1.4 "Cormorant Garamond", Georgia, serif;
    color: var(--ink-soft)
}

.r-change {
    margin-top: 3cqi;
    min-height: 44px;
    padding: 0 4cqi;
    border: 0;
    background: none;
    color: var(--ink);
    font: 600 calc(4.4cqi * var(--k))/1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: .03em;
    text-decoration: underline;
    text-decoration-color: #a9803fcc;
    text-underline-offset: .3em;
    cursor: pointer
}

@container rcard (min-width: 470px) {
    .r-card-in {
        --k: .78;
        padding: 16cqi 9cqi 12cqi
    }
    .r-name-field {
        margin-top: 7cqi
    }
    .r-events {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 3cqi;
        margin-top: 6cqi
    }
    .r-events-label {
        grid-column: 1 / -1;
        margin-bottom: 1.5cqi
    }
    .r-event {
        padding: 3.4cqi 0 2.4cqi
    }
    .r-events-label+.r-event+.r-event {
        border-top: 0
    }
    .r-choices {
        flex-direction: column;
        align-items: center;
        gap: 0;
        margin-top: 1cqi
    }
    .r-choice {
        min-height: 40px
    }
    .r-party,
    .r-wishes-field {
        margin-top: 4cqi;
        padding-top: 4cqi
    }
    .r-send {
        margin-top: 5cqi
    }
    .r-thanks .r-card-in,
    .r-closed .r-card-in {
        padding: 12cqi 10cqi
    }
}

@container rcard (min-width: 470px) {
    .r-paper:before {
        border-width: 19cqi
    }
    .r-quill {
        width: 24cqi;
        right: -7cqi;
        top: -11cqi
    }
}

@container rsec (min-width: 560px) {
    .r-bg {
        background-image: url(../assets/letter/bg-tab.webp)
    }
    .r-kicker {
        font-size: 2.1cqi
    }
    .r-title {
        font-size: 7.6cqi
    }
    .r-by {
        font-size: 2.9cqi
    }
    .r-stage {
        width: 72cqi;
        margin: 4.5cqi auto 0
    }
    .r-paper {
        border-radius: .8cqi
    }
    .r-still {
        width: 58cqi;
        margin-top: -4.5cqi
    }
}

@media(min-aspect-ratio:6/5) {
    html.is-tablet .r-bg {
        background-image: url(../assets/letter/bg-land.webp)
    }
    html.is-tablet .r-inner {
        display: grid;
        grid-template-columns: 43fr 49fr;
        grid-template-areas: "side stage";
        column-gap: 5cqi;
        align-content: center;
        align-items: start;
        padding: calc(var(--edge) + 3cqi) 5cqi calc(var(--edge) + 3cqi)
    }
    html.is-tablet .r-side {
        grid-area: side;
        display: flex;
        flex-direction: column;
        position: sticky;
        top: 5cqi
    }
    html.is-tablet .r-head {
        padding-top: 4cqi
    }
    html.is-tablet .r-kicker {
        font-size: 1.35cqi
    }
    html.is-tablet .r-title {
        font-size: 5.2cqi
    }
    html.is-tablet .r-by {
        font-size: 1.9cqi
    }
    html.is-tablet .r-stage {
        grid-area: stage;
        width: auto;
        margin: 0
    }
    html.is-tablet .r-still {
        width: 100%;
        margin: 3cqi 0 0
    }
}