/* Radha Krishna — sections added to the original design.
   They are love-story bands: they sit on the section's own paper, reveal through the
   same .rk-love__rise / .is-revealed pair love-story.js already drives, and use its
   palette (--ls-*), the Ananda script headings, the divider below "Radha-Krishna",
   the ivory photo-frame colour and the olive venue button. The countdown units are cut
   with the page's own #rk-ls-medal clip path, the shape above the ceremonies. */

.wiy-rk {
  padding-top: clamp(26px, 7.7vw, 100px);
}
.wiy-rk--footer {
  padding-bottom: clamp(24px, 6vw, 70px);
}
.wiy-rk .rk-love__title {
  font-size: var(--ls-fs-script);
  color: var(--ls-script);
}

.wiy-rk__date {
  margin: clamp(10px, 2vw, 26px) 0 0;
  font-weight: 600;
  font-size: var(--ls-fs-hall);
  line-height: 1.3;
  color: var(--ls-deep);
}

/* ---- countdown ---- */
.wiy-rk__units {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 2.2vw, 30px);
  margin: clamp(14px, 3vw, 40px) auto 0;
  padding: 0 4vw;
}
.wiy-rk__unit {
  width: var(--ls-medal);
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--ls-band);
  clip-path: url(#rk-ls-medal);
  color: var(--ls-band-ink);
}
.wiy-rk__num {
  font-weight: 600;
  font-size: clamp(20px, 4.2vw, 46px);
  line-height: 1;
}
.wiy-rk__unit-label {
  margin-top: 0.3em;
  font-weight: 600;
  font-size: clamp(9px, 1.3vw, 14px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- RSVP ---- */
.wiy-rk__deadline {
  margin: clamp(6px, 1vw, 12px) 0 0;
  font-weight: 600;
  font-size: var(--ls-fs-addr);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ls-deep);
}
.wiy-rk__card {
  box-sizing: border-box;
  width: min(88vw, 640px);
  margin: clamp(16px, 3vw, 40px) auto 0;
  padding: clamp(18px, 3.4vw, 44px);
  border-radius: clamp(10px, 1.6vw, 22px);
  background: var(--ls-frame);
  box-shadow:
    inset 0 0 0 clamp(5px, 0.7vw, 9px) var(--ls-frame),
    inset 0 0 0 calc(clamp(5px, 0.7vw, 9px) + 1px) rgba(115, 127, 82, 0.5),
    0 24px 46px -24px rgba(48, 60, 25, 0.35);
  text-align: left;
}
.wiy-rk__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(10px, 1.6vw, 18px);
  margin-bottom: clamp(10px, 1.6vw, 18px);
}
.wiy-rk__field { display: block; }
.wiy-rk__label {
  display: block;
  margin-bottom: 0.4em;
  font-weight: 600;
  font-size: clamp(10px, 1.2vw, 13px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ls-deep);
}
.wiy-rk__input {
  box-sizing: border-box;
  width: 100%;
  padding: 0.75em 0.9em;
  border: 1px solid rgba(48, 60, 25, 0.28);
  border-radius: clamp(5px, 0.9vw, 11px);
  background: #fffdf6;
  font: inherit;
  font-weight: 600;
  font-size: clamp(13px, 1.5vw, 16px);
  color: var(--ls-body);
  outline: none;
  transition: border-color 0.3s var(--ls-ease), box-shadow 0.3s var(--ls-ease);
}
.wiy-rk__input:focus {
  border-color: var(--ls-band);
  box-shadow: 0 0 0 3px rgba(115, 127, 82, 0.2);
}
.wiy-rk__textarea { min-height: 5.5em; resize: vertical; }
.wiy-rk__submit {
  display: block;
  margin: clamp(14px, 2.4vw, 28px) auto 0;
  padding: clamp(9px, 1.25vw, 16px) clamp(22px, 3.4vw, 46px);
  border: 0;
  border-radius: clamp(5px, 0.9vw, 11px);
  background: var(--ls-deep);
  font: inherit;
  font-weight: 600;
  font-size: var(--ls-fs-cta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ls-band-ink);
  cursor: pointer;
  transition: background 0.35s var(--ls-ease), transform 0.35s var(--ls-ease);
}
.wiy-rk__submit:hover { background: var(--ls-script); transform: translateY(-1px); }
.wiy-rk__status { margin: 12px 0 0; text-align: center; font-weight: 600; color: var(--ls-deep); }
.wiy-rk__status[data-state="error"] { color: #8a2d1f; }
.wiy-rk__done { text-align: center; }
.wiy-rk__done-title { margin: 0; font-family: "Ananda", "Norican", cursive; font-size: var(--ls-fs-script); color: var(--ls-script); }
.wiy-rk__done-text { margin: 8px 0 0; font-weight: 600; color: var(--ls-body); }

/* ---- footer ---- */
.wiy-rk__feather {
  display: block;
  width: clamp(70px, 12vw, 150px);
  height: auto;
  margin: 0 auto clamp(6px, 1vw, 14px);
  rotate: -18deg;
}
.wiy-rk .wiy-rk__closing {
  max-width: min(88vw, 900px);
  margin: 0 auto;
}
.wiy-rk__tag {
  margin: clamp(6px, 1vw, 12px) 0 0;
  font-weight: 600;
  font-size: var(--ls-fs-hall);
  color: var(--ls-deep);
}
.wiy-rk__names {
  margin: clamp(8px, 1.4vw, 16px) 0 0;
  font-weight: 600;
  font-size: var(--ls-fs-addr);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ls-body);
}

/* ---- the date pill ----
   time.png leaves a third of the pill either side of the badge, measured for "Sunday".
   A weekday or month of eight letters or more is set just small enough to stay inside it. */
.rk-inv__date-day.wiy-rk__fit,
.rk-inv__date-month.wiy-rk__fit {
  font-size: min(max(13px, calc(var(--u) * 4.6)), calc(var(--u) * 3.7));
  white-space: nowrap;
}

/* ---- the ceremonies, scroll-stacked (themes/event-stack.js) ----
   The green band, the flute and the type are the design's own. Stacked, each ceremony
   becomes a card that carries its own scalloped medallion, and the next one is brought
   up over it by the scroll, so a card needs a face of its own: the band's olive as it
   prints on this paper, a hair lighter at the rim, with a soft shadow to lift it. */
.rk-love__rites.is-evstack {
  position: relative;
  padding-block: clamp(6px, 1.6vw, 20px);
}
.rk-love__rites.is-evstack .rk-love__stage {
  margin-top: 0;
}
.rk-love__rites.is-evstack .rk-love__slide {
  opacity: 1;
  pointer-events: auto;
  padding: clamp(22px, 3.2vw, 40px) clamp(16px, 3vw, 40px) clamp(24px, 3.4vw, 44px);
  border-radius: clamp(18px, 2.6vw, 32px);
  background: #6e7849;
  box-shadow: inset 0 0 0 1px rgba(253, 253, 247, 0.12), 0 24px 46px -28px rgba(22, 30, 8, 0.7);
}
.rk-love__rites.is-evstack .rk-love__slide-medal {
  margin: 0 auto clamp(12px, 2vw, 22px);
}
/* A held card has to fit the screen whole, or the stack stands down and the old slider
   comes back. On a wide but short screen (a laptop, a browser with its bars showing) the
   longest ceremony name wraps to three lines and the card ran taller than the window.
   Only there does the card give a little: medallion, padding and name are capped by the
   screen's HEIGHT. The caps sit above every size they would otherwise have on a screen
   900px tall or more (the name's, 762px or more), so nothing changes there. */
.rk-love__rites.is-evstack .rk-love__slide {
  padding-top: min(clamp(22px, 3.2vw, 40px), 4.5vh);
  padding-bottom: min(clamp(24px, 3.4vw, 44px), 5vh);
}
.rk-love__rites.is-evstack .rk-love__slide-medal {
  width: min(var(--ls-medal), 23vh);
  height: min(var(--ls-medal), 23vh);
  margin-bottom: min(clamp(12px, 2vw, 22px), 2.4vh);
}
.rk-love__rites.is-evstack .rk-love__rite-name {
  font-size: min(var(--ls-fs-rite), 8.4vh);
}
/* The scroll moves from one ceremony to the next now, so the slider's arrows have
   nothing left to do (each card carries its own medallion). They stay in the page for
   a visitor who asked for less motion, who still gets the slider. */
.rk-love__rites.is-evstack .rk-love__medal-row {
  display: none;
}
@media (max-width: 47.99rem) {
  /* on a phone the card can take the width the arrows used to stand in */
  .rk-love__rites.is-evstack .rk-love__stage {
    max-width: min(100%, 26rem);
    padding: 0 16px;
  }
}