/* The RSVP, on the ivory silk (surface P), between two onyx bands: a writing desk.

   The reply card is the letter's paper (the top, a middle that repeats downwards, the foot; the
   page makes it a whole number of repeats tall, js/rsvp.js), with the four jewels set across its
   head. Below it, as in the chosen picture, lie a gold reed pen, an inkwell, and the letter's
   scroll case, open, with its cap beside its mouth. On sending, the card rolls up into the
   letter's roll, which is slid into the case, and the cap goes on (js/rsvp.js).

   Sizes: --sw is the card's width; --u is the width of the desk in the chosen picture (the
   card was 78% of it), and everything below the card is placed as it was there, in --u.
   The jewels' pictures and measurements are in assets/rsvp/rsvp.css (build_rsvp.py):
     .rs-jewel   .rs-glow (the stone's colour on the paper round it, when lit), .rs-setting (the
                 gold star, with a stone), .rs-stone (the function's own stone over it, dimmed
                 until lit), .rs-glint (a spark of light on the stone)
*/

/* The card's width and the desk's, worked out once where they are set (the card is a container
   for its narrow-screen rules, and a width in cqi passed on unworked would be measured on it). */
@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));
}

/* the four jewels: the invitation's only colours (as the events' caskets) */
.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); }

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

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

/* ------------------------------------------------------------ the desk */

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

/* ---- the card */

.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 rgba(64, 42, 12, .28), 0 calc(var(--sw) * .02) calc(var(--sw) * .05) rgba(64, 42, 12, .2);
  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; }

/* a small label in spaced capitals, like the kicker */
.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; }

/* ---- the jewels, across the head */

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

/* the stone's colour, thrown on the paper round it */
.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)); }

/* out: a stone with no light in it */
.rs-stone { filter: saturate(.45) brightness(.6); }

/* a four-pointed spark on the stone's shoulder, where the lamplight catches it */
.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, rgba(255, 255, 255, .85) 14%, rgba(255, 255, 255, 0) 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;
}

/* lit: attending */
.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%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
  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; }

/* a narrow card (phones): the day of the week and "Tap to attend" have no room */
@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; }

/* a gold rule with an eight-pointed star in the middle (the letter's) */
.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, rgba(156, 114, 49, 0), #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); }

/* ---- the name, how many, a note */

.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: rgba(90, 74, 54, .5); }

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

/* ruled in gold, the lines running on with the text */
.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;
}

/* black lacquer and gold, like the case */
.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 rgba(40, 26, 6, .35);
  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; }

/* the send button: black lacquer and gold */
.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 rgba(40, 26, 6, .35), inset 0 1px 0 rgba(240, 217, 156, .18);
  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; }

/* ---- the thank you (and, after the date, replies closed), where the card was */

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

/* a soft ivory veil under the words, as the silk is busy */
.rs-thanks::before,
.rs-closed::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -6% -10% -4%;
  background: radial-gradient(closest-side, rgba(247, 240, 226, .92), rgba(247, 240, 226, .7) 60%, rgba(247, 240, 226, 0));
  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; }

/* the number coming: a small gold star where a jewel would be */
.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: rgba(255, 250, 238, .75);
  box-shadow: 0 1px 2px rgba(60, 40, 10, .14);
  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; }

/* ---- below the card: the pen, the inkwell and the case, as they lay in the picture */

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

/* open (the card on the desk): the whole mouth, and the cap set down beside it */
.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);
}

/* sealed (the reply is in it): the cap on, the mouth's last span stands in for the open end */
.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; }

/* a gleam along the gold, when the cap goes on (js/rsvp.js runs it) */
.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;
}

/* ---- the roll, while the reply is sent */

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

/* ------------------------------------------------------------ lamplight */

.rs-lamp {
  position: absolute !important;
  inset: 0;
  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, rgba(255, 196, 104, .7), rgba(255, 180, 90, .3) 38%, rgba(255, 170, 80, 0) 68%);
  translate: -50% -50%;
  animation: rs-drift 36s ease-in-out infinite alternate;
}

@keyframes rs-drift {
  0%   { left: 24%; top: 8%; }
  35%  { left: 74%; top: 36%; }
  70%  { left: 30%; top: 66%; }
  100% { left: 70%; top: 94%; }
}

/* ------------------------------------------------------------ sideways tablets */

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

/* ------------------------------------------------------------ calm */

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