/* The RSVP: the reply card, strung with beads, wrapped in the letter's organza.

   The card (.rs-card, a form) is the letter's paper: its top and foot, and its middle repeated as
   far as the words need (the same pictures and measures as the letter, in assets/rsvp/rsvp.css).
   It lies on the letter's organza, opened into a diamond (.rs-under: the organza and its flaps,
   the letter's bed.webp); over it, for the wrapping, the closed envelope's four flaps and the gajra
   (.rs-over, the letter's parcel.webp and gajra.webp). The three are stacked in one grid cell, so
   their middles meet: the card settles into the organza's middle by a transform alone.

   Across the card's head runs the string of jasmine (.rs-string); under it, one column per
   function, its glass bead lying loose over its name. A strung bead is moved onto the string by
   --bx/--by (js/rsvp.js measures them).

   The states (js/rsvp.js): the card to fill in; .is-tied, the organza folded over it and the
   gajra tied (the card hidden in it); .is-folded, the card's place given up too (the thank you,
   and coming back). The wrapping in between is Web Animations over these.

   The organza is as wide as a phone; the card lies over most of it, and it shows round the card
   on an iPad, either way up, and in the laptop column. */

.rsvp {
  --dw: min(100cqi, 560px);                      /* the organza's width */
  --cw: min(100cqi - 44px, 400px);               /* the card's */
  --bd: clamp(24px, 9.5cqi, 40px);               /* a bead, on the card (cqi: the card's) */
  --rest: 0;                                     /* the organza, while the card is filled in */
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--seam-h) * .5 + 34px) 0 calc(var(--seam-h) * .5 + 48px);
  overflow-x: clip;
  overflow-anchor: none;
  -webkit-tap-highlight-color: transparent;
}

@media (min-aspect-ratio: 5/8) {
  html:root .rsvp {
    --dw: min(100cqi - 40px, 700px);
    --cw: min(var(--dw) * .64, 440px);
    --rest: 1;
  }
}

@media (min-aspect-ratio: 6/5) {
  html.is-tablet .rsvp {
    --dw: min(100cqi - 40px, 640px, 100svh - 150px);
    --cw: min(var(--dw) * .7, 430px);
  }
}

.rs-head,
.rs-table,
.rs-thanks,
.rs-closed { position: relative; }

/* ------------------------------------------------------------ heading */

.rs-head { text-align: center; }

.rs-head > *,
.rs-thanks > *,
.rs-closed > * { margin: 0; }

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

.rs-title { font: 400 clamp(48px, 14cqi, 84px)/1.2 "Allura", cursive; }

.rs-title .ink,
.rs-thanks-title .ink {
  display: inline-block;
  padding: 0 .3em .1em;
}

.rs-by {
  font: italic 500 clamp(15px, 4.2cqi, 19px)/1.4 "Cormorant Garamond", Georgia, serif;
  color: var(--ink);
  opacity: .88;
}

/* ------------------------------------------------------------ the organza, the card, the parcel */

.rs-table {
  display: grid;
  place-items: center;
  width: 100%;
  margin-top: clamp(8px, 3cqi, 22px);
}

.rs-table > * { grid-area: 1 / 1; }

.rs-parcel {
  position: relative;
  width: var(--dw);
  aspect-ratio: var(--stage-r);
  pointer-events: none;
}

.rs-under { z-index: 0; }
.rs-over { z-index: 2; }

.rs-lift {
  position: relative;
  z-index: 1;
  width: var(--cw);
  container-type: inline-size;
}

/* open, the organza lies flat (its flaps are in bed.webp: .of are only for the wrapping); on a
   phone the card would hide all but its corners, so it is only there for the wrapping */
.rsvp:not(.is-tied) .rs-under { opacity: var(--rest); }
.rsvp .pc-stage { transform: none; }
.rsvp .pc-bed { opacity: 1; }
.rsvp:not(.is-tied) :is(.cf, .pc-gajra, .pc-glint, .pc-shadow) { opacity: 0; }

/* tied: the envelope, drawn larger, with its gajra; the card inside */
.rsvp.is-tied .pc-stage { transform: scale(var(--shut)); }
.rsvp.is-tied .pc-bed { opacity: 0; }
.rsvp.is-tied .rs-lift { visibility: hidden; }
.rsvp.is-folded .rs-lift { display: none; }

/* ------------------------------------------------------------ the card */

.rs-card {
  position: relative;
  isolation: isolate;
  min-height: calc(100cqi * var(--pmin));
  padding:
    calc(100cqi * var(--pin-t) + 2px) calc(100cqi * var(--pin-r))
    calc(100cqi * var(--pin-b) + 6px) calc(100cqi * var(--pin-l));
  filter: drop-shadow(0 1px 1px rgba(20, 50, 72, .16)) drop-shadow(0 10px 14px rgba(14, 40, 60, .2));
  text-align: center;
  font: 500 clamp(14px, 4.6cqi, 17.5px)/1.4 "Cormorant Garamond", Georgia, serif;
  color: var(--ink);
}

.rs-card::before,
.rs-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  pointer-events: none;
}

.rs-card::before {
  top: calc(100cqi * var(--pt));
  bottom: calc(100cqi * var(--pb));
  background-position: 0 0;
  background-size: 100% auto;
  background-repeat: repeat-y;
}

.rs-card::after {
  top: 0;
  bottom: 0;
  background-position: 50% 0, 50% 100%;
  background-size: 100% auto, 100% auto;
  background-repeat: no-repeat;
}

.rs-card > *,
.rs-events > * { margin: 0; }

.rs-label {
  display: block;
  font: 700 clamp(9.5px, 2.9cqi, 11.5px)/1.35 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .22em;
  padding-left: .22em;
  text-transform: uppercase;
  color: var(--kick);
}

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

.rs-field { display: block; }

.rs-name {
  display: block;
  width: 100%;
  margin-top: 3px;
  padding: 2px 4px 5px;
  border: 0;
  border-bottom: 1px solid rgba(23, 58, 82, .3);
  border-radius: 0;
  background: transparent;
  font: italic 600 clamp(18px, 5.6cqi, 22px)/1.25 "Cormorant Garamond", Georgia, serif;
  color: var(--ink);
  text-align: center;
}

.rs-name::placeholder {
  font-weight: 500;
  color: rgba(23, 58, 82, .45);
}

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

/* the functions: the string across the card, and each one's bead and name under it */
.rs-events {
  position: relative;
  min-width: 0;
  margin: clamp(16px, 5cqi, 24px) 0 0 !important;
  padding: 0;
  border: 0;
}

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

.rs-string {
  position: relative;
  width: calc(100% + 100cqi * (var(--pin-l) + var(--pin-r)) - 5cqi);
  aspect-ratio: var(--str-r);
  margin: 6px 0 0 calc(2.5cqi - 100cqi * var(--pin-l)) !important;
  background-position: 0 0;
  background-size: 100% 100%;
  filter: drop-shadow(1px 2px 1.5px rgba(16, 44, 64, .3));
}

.rs-evs {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  margin-top: clamp(12px, 4.5cqi, 22px) !important;
}

.rs-ev > * { margin: 0; }

.rs-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding: 4px 0 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

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

.rs-bead {
  position: relative;
  width: var(--bd);
  aspect-ratio: 1;
}

.rs-bead i {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-size: 100% 100%;
  filter: drop-shadow(1px 2px 1.5px rgba(16, 44, 64, .38));
}

.rs-ev.is-on .rs-bead i { transform: translate(var(--bx, 0px), var(--by, 0px)); }

/* where a bead lay, once it is strung: a faint ring on the paper */
.rs-bead::before {
  content: "";
  position: absolute;
  inset: 16%;
  border: 1px dashed rgba(23, 58, 82, .32);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .5s ease;
}

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

.rs-ev-name {
  font: 400 clamp(19px, calc(24cqi / var(--n, 4)), 34px)/1.12 "Allura", cursive;
  white-space: nowrap;
}

.rs-ev-name .ink {
  display: inline-block;
  padding: 0 .12em .08em;
}

.rs-ev:not(.is-on) .rs-ev-name { opacity: .72; }

.rs-ev-date {
  font: 700 clamp(8.5px, 2.6cqi, 10.5px)/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kick);
}

.rs-help {
  margin-top: 10px !important;
  font: italic 500 clamp(12.5px, 3.9cqi, 14.5px)/1.35 "Cormorant Garamond", Georgia, serif;
  opacity: .8;
}

.rs-summary {
  margin-top: 4px !important;
  font: italic 600 clamp(13.5px, 4.2cqi, 16px)/1.35 "Cormorant Garamond", Georgia, serif;
}

.rs-summary:empty,
.rs-error:empty { display: none; }

/* how many */
.rs-party { margin-top: clamp(16px, 5cqi, 24px) !important; }
.rs-party[hidden],
.rs-stepper[hidden] { display: none; }

.rs-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 6px 0 2px;
}

.rs-step {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0 0 2px;
  border: 1px solid rgba(23, 58, 82, .42);
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  color: var(--ink);
  font: 600 21px/1 "Cormorant Garamond", Georgia, serif;
  cursor: pointer;
}

.rs-step:disabled { opacity: .35; cursor: default; }
.rs-step:focus-visible { outline: 2px solid var(--kick); outline-offset: 2px; }

.rs-count {
  min-width: 1.3em;
  font: 600 clamp(26px, 8cqi, 32px)/1 "Cormorant Garamond", Georgia, serif;
}

.rs-seats {
  font: italic 500 clamp(12.5px, 3.9cqi, 14.5px)/1.35 "Cormorant Garamond", Georgia, serif;
  opacity: .8;
}

/* a note or dua: ruled lines, as on the paper */
.rs-wishes-field { margin-top: clamp(16px, 5cqi, 24px) !important; }

.rs-wishes {
  display: block;
  width: 100%;
  height: calc(3 * 1.6em);
  margin-top: 4px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: repeating-linear-gradient(180deg, transparent 0 calc(1.6em - 1px), rgba(23, 58, 82, .24) calc(1.6em - 1px) 1.6em);
  font: italic 500 clamp(15px, 4.6cqi, 17px)/1.6 "Cormorant Garamond", Georgia, serif;
  color: var(--ink);
  resize: none;
}

.rs-wishes:focus {
  outline: none;
  background: repeating-linear-gradient(180deg, transparent 0 calc(1.6em - 1px), rgba(23, 58, 82, .5) calc(1.6em - 1px) 1.6em);
}

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

.rs-error {
  margin-top: 12px !important;
  font: italic 600 clamp(13px, 4cqi, 15px)/1.35 "Cormorant Garamond", Georgia, serif;
  color: #8e2a3c;
}

.rs-send-row { margin-top: clamp(16px, 5cqi, 22px) !important; }

.rs-send,
.rs-change {
  display: inline-block;
  padding: 12px 22px 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, #2b5a7a, #173a52);
  box-shadow: 0 1px 2px rgba(20, 50, 72, .35);
  color: var(--pearl);
  font: 700 clamp(11px, 3.4cqi, 13px)/1.1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}

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

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

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

/* ------------------------------------------------------------ thank you */

.rs-thanks,
.rs-closed {
  width: min(100% - 48px, 520px);
  margin-top: clamp(4px, 2cqi, 14px);
  text-align: center;
}

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

.rs-thanks-title {
  font: 400 clamp(40px, 11.5cqi, 64px)/1.2 "Allura", cursive;
  overflow-wrap: anywhere;
}

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

.rs-thanks-text {
  font: italic 500 clamp(15px, 4.4cqi, 19px)/1.4 "Cormorant Garamond", Georgia, serif;
}

.rs-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin: 14px 0 0 !important;
  padding: 0;
  list-style: none;
}

.rs-li {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 500 clamp(13.5px, 4cqi, 16px)/1.3 "Cormorant Garamond", Georgia, serif;
}

.rs-li b { font-weight: 700; }
.rs-li.is-no { opacity: .62; }
.rs-li .rs-bead { width: 18px; }
.rs-li.is-no .rs-bead i { filter: grayscale(.7) opacity(.6); }

.rs-thanks-when {
  margin-top: 8px !important;
  font: italic 500 clamp(12.5px, 3.8cqi, 14px)/1.35 "Cormorant Garamond", Georgia, serif;
  opacity: .75;
}

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

.rs-change {
  margin-top: 16px !important;
  border-color: rgba(23, 58, 82, .42);
  background: rgba(255, 255, 255, .45);
  box-shadow: none;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .rs-bead::before { transition: none; }
  .rsvp .pc-glint::before { animation: none; }
}