/* The RSVP: an ivory reply card on the burgundy lace.

   The card is the letter's gold-flecked paper in a frame of gold rules and
   lace (assets/rsvp/frame.webp, drawn as a border-image so it fits a card of
   any height), with a paper quill across its corner. An answer is circled in
   gold ink as it is chosen. Sending turns the card into a small one that is
   laid in the invitation's own envelope, folded shut and sealed (the cover's
   pieces, cut by assets/cover/geometry*.css), which then flies off; a thank
   you note takes its place. A still life of seal, wax and ink sits below.

   Layout, by the section's width and, on tablets, the screen's shape:
     phone      one column; each event's answers side by side
     upright    tablets upright and the laptop column: a wider card whose
                events are two by two
     sideways   tablets sideways: the heading and the still life on the left,
                the card on the right
   Inside a card, cqi is the card's own width.
*/

.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);   /* clear of the lace trims */
  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;               /* the quill may lean out past the edge */
}

/* The heading and the still life are one column when sideways; otherwise
   the still life sits under the card. */
.r-side { display: contents; }
.r-head { order: 0; }
.r-stage { order: 1; }
.r-still { order: 2; }

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

.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: rgba(244, 234, 217, .8);
}

/* ------------------------------------------------------------ the paper */

.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 rgba(16, 0, 4, .55), 0 .4cqi 1cqi rgba(16, 0, 4, .3);
  color: var(--ink);
  text-align: center;
}

/* The frame: corners as drawn, the rules and lace between them repeated. */
.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;
}

/* ------------------------------------------------------------ name */

.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: rgba(138, 74, 82, .5);
  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 0 #a9803f; }

/* ------------------------------------------------------------ events */

.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;
}

/* The gold ink loop, drawn around the answer from where the pen starts. */
@property --sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.r-ring {
  position: absolute;
  left: -6%;
  right: -6%;
  top: -14%;
  bottom: -14%;
  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 {
  from { --sweep: 0deg; }
  to   { --sweep: 360deg; }
}

.r-event.is-missing { background: rgba(163, 18, 42, .07); }
.r-event.is-missing .r-ev-name { color: #a3122a; }

/* ------------------------------------------------------------ how many */

.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: rgba(255, 250, 240, .55);
  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: rgba(255, 250, 240, .95); }
.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);
}

/* ------------------------------------------------------------ a note */

.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 0 #a9803f; }

/* Only for bots: a field no person sees. */
.r-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------ send */

.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 rgba(58, 10, 18, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
  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;
}

/* the wax seal on the ribbon */
.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); }

/* ------------------------------------------------------------ the quill */

.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;
}

/* ------------------------------------------------------------ the still life */

.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;
}

/* ------------------------------------------------------------ the envelope */

.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; }

/* the reply, small, as it lies in the envelope */
.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 rgba(40, 10, 10, .35);
}

.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));
}

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

.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: rgba(169, 128, 63, .8);
  text-underline-offset: .3em;
  cursor: pointer;
}

/* ------------------------------------------------------------ a wide card */

@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 12cqi; }
}

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

/* ------------------------------------------------------------ upright tablet, laptop */

@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; }
}

/* ------------------------------------------------------------ sideways tablet */

@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);
  }
  /* it stays in view while the card is scrolled */
  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; }
}