/* Rose Pavilion.

   Mobile first. Everything is laid out for a phone held upright, then given
   room on a tablet and a desk. The films and the stills always fill the
   screen edge to edge; the cards over them stay a readable width.

   Speed was the brief as much as the look -- there are four films on this
   card -- so every moving thing here is a transform or an opacity (the two
   properties a browser can animate without laying the page out again), the
   pictures are held in place with position: sticky rather than a scroll
   handler, and nothing over a playing film is blurred: a backdrop blur over
   video is re-computed on every frame of it. */

:root {
  --rp-rose: #8a4a55;
  --rp-rose-deep: #5f2b36;
  --rp-ink: #4a2a31;
  --rp-ink-soft: #6f5057;
  --rp-blush: #f6e2dc;
  --rp-paper: #fcf4f1;
  --rp-ivory: #fffaf6;
  --rp-gold: #c9a45c;
  --rp-gold-deep: #a07a36;
  --rp-gold-soft: #ead4a6;

  /* Allura, not Great Vibes (2026-10-08, Ahmad): Great Vibes draws a capital
     A like a big lowercase a, and customers kept asking for "a capital A" in
     names that already had one. Allura is by the same designer, the same
     flowing hand, with an A that reads as a capital. */
  --rp-script: "Allura", "Great Vibes", "Alex Brush", cursive;
  --rp-serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --rp-sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  /* The two heights. `svh` is the screen with the browser's bars showing --
     what a page is sized to, so nothing sits under them. `lvh` is the screen
     with them hidden -- what a picture is sized to, so it never runs short
     when they slide away. Neither changes while scrolling, so nothing
     re-lays out as the bars come and go. 100vh stands in where neither
     unit is known. */
  --rp-svh: 100vh;
  --rp-lvh: 100vh;

  /* The shared music and language buttons centre themselves on a 390-wide
     card by default; this card is the whole screen. */
  --lw-w: 100vw;
}
@supports (height: 100svh) {
  :root {
    --rp-svh: 100svh;
    --rp-lvh: 100lvh;
  }
}

/* ------------------------------------------------------------------ page */

html.rp-html {
  background: var(--rp-paper);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* One page at a time, once the card is open. Added by the script, and never
   in the editor, where it would fight the editor's own scrolling. */
html.rp-snap {
  scroll-snap-type: y mandatory;
}

.rp-body {
  margin: 0;
  min-height: 100%;
  background: var(--rp-paper);
  color: var(--rp-ink);
  font-family: var(--rp-serif);
  /* Full-height figures everywhere (2026-10-10, Ahmad: a customer read the
     "1" in "1 November" as an I). Cormorant Garamond's default old-style
     figures draw 1 as a small serifed stroke and 0 as an o. The feature
     setting as well as the variant, so a line that sets tabular-nums of its
     own still keeps them. */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip, not hidden: hidden turns the body into its own scroll container,
     and everything here that listens to the window's scroll stops hearing
     it. */
  overflow-x: clip;
}

/* Resets at zero weight, so a class anywhere below always wins over them. */
:where(.rp-body) :where(img, video) {
  display: block;
}
:where(.rp-body) :where(p, h1, h2) {
  margin: 0;
}
:where(.rp-body) :where(h1, h2) {
  font-weight: 400;
}
:where(.rp-body) button {
  font: inherit;
}

/* Held still until the curtain has opened. */
html.rp-sealed,
html.rp-sealed > body {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
}
html.rp-sealed > body {
  position: fixed;
  inset: 0;
  width: 100%;
}

.rp-main {
  position: relative;
}

/* ------------------------------------------------------------------ pages */

.rp-page {
  position: relative;
  box-sizing: border-box;
  min-height: var(--rp-svh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(72px, 11svh, 112px) 18px clamp(96px, 13svh, 124px);
  scroll-snap-align: start;
}

/* A picture that belongs to one page only, behind it. */
.rp-page-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.rp-page > .rp-card {
  z-index: 1;
}

/* ----------------------------------------------------------------- stages

   A picture held in place while pages travel over it: the picture is sticky
   inside the stage, and the pages are pulled up over it by exactly its
   height. When the last page has gone by, the picture goes with it. */
.rp-stage {
  position: relative;
}
.rp-stage-bg {
  position: sticky;
  top: 0;
  height: var(--rp-lvh);
  overflow: hidden;
  z-index: 0;
  background: var(--rp-blush);
}
.rp-stage-pages {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--rp-lvh));
}

.rp-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: translateZ(0);
}

/* The pavilion drifts, slowly, once the curtain is out of the way -- a still
   picture behind still words reads as a picture of an invitation. It starts
   from exactly where the curtain left it, so the hand-over does not jump. */
html.rp-open .rp-still-pavilion,
html.rp-open .rp-still-garden {
  animation: rp-drift 36s ease-in-out 1.2s infinite alternate;
}
@keyframes rp-drift {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.08) translate3d(0, -1.6%, 0);
  }
}

/* Light over the pictures, so words on them can be read. The pavilion's is
   laid down after the curtain has gone, so the picture the curtain opened
   onto is the picture that is there. */
.rp-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.rp-veil-light {
  background:
    radial-gradient(
      ellipse 82% 58% at 50% 50%,
      rgba(255, 250, 246, 0.74) 0%,
      rgba(255, 250, 246, 0.38) 55%,
      rgba(255, 250, 246, 0.06) 82%
    ),
    linear-gradient(
      180deg,
      rgba(252, 236, 230, 0.3) 0%,
      rgba(252, 236, 230, 0.08) 40%,
      rgba(252, 236, 230, 0.3) 100%
    );
  opacity: 0;
  transition: opacity 1.4s ease 0.2s;
}
html.rp-open .rp-veil-light {
  opacity: 1;
}
.rp-veil-soft {
  background:
    radial-gradient(
      ellipse 90% 60% at 50% 52%,
      rgba(255, 252, 247, 0.45),
      rgba(255, 252, 247, 0.12) 70%
    ),
    linear-gradient(
      180deg,
      rgba(255, 248, 242, 0.18),
      rgba(255, 248, 242, 0.05) 45%,
      rgba(255, 248, 242, 0.28)
    );
}
.rp-veil-film {
  /* Dark where the card sits -- the top -- and clear below it, so the film
     is seen; a little again at the foot, under the scroll cue. */
  background: linear-gradient(
    180deg,
    rgba(24, 8, 14, 0.6) 0%,
    rgba(24, 8, 14, 0.3) 30%,
    rgba(24, 8, 14, 0) 54%,
    rgba(24, 8, 14, 0) 80%,
    rgba(24, 8, 14, 0.32) 100%
  );
  z-index: 2;
}

/* ------------------------------------------------------------ ornaments */

.rp-flourish {
  display: block;
  width: 132px;
  height: 14px;
  margin: 16px auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 14'%3E%3Cg fill='none' stroke='%23c9a45c' stroke-width='1'%3E%3Cpath d='M2 7h48M82 7h48'/%3E%3Cpath d='M66 1.5 71.5 7 66 12.5 60.5 7z'/%3E%3Cpath d='M52 7c3-3.4 6-3.4 8.5 0M79.5 7c-2.5-3.4-5.5-3.4-8.5 0' /%3E%3C/g%3E%3Ccircle cx='66' cy='7' r='1.6' fill='%23c9a45c'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.rp-flourish-gold {
  filter: brightness(1.25);
}

.rp-heart {
  width: 18px;
  height: 16px;
  fill: var(--rp-rose);
  flex: none;
}
.rp-heart-lg {
  width: 30px;
  height: 27px;
  margin: 0 auto 10px;
}

/* Script set as ink laid on paper: a rose that warms toward gold, with a
   soft light behind it so it holds on any part of the picture. */
.rp-script {
  font-family: var(--rp-script);
  font-weight: 400;
  line-height: 1.12;
  background: linear-gradient(100deg, #6e2f3b 0%, #9a5462 38%, #b0864a 64%, #7a3642 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rp-eyebrow {
  font-family: var(--rp-sans);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--rp-gold-deep);
  margin-top: 18px;
}

/* ------------------------------------------------------------ the rising

   Every page's contents arrive as it is reached, in reading order, and stay.
   Measured on scroll by the script; `--i` is each element's place in line. */
.rp-rise {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.95s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.95s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 95ms);
}
.rp-rise.is-in {
  opacity: 1;
  transform: none;
}

/* ================================================================ OPENING */

.rp-gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  transition: opacity 1.15s ease;
  background: #fff;
}
.rp-gate[hidden] {
  display: none;
}
.rp-gate.is-leaving {
  opacity: 0;
  pointer-events: none;
}

/* The curtain, and what is behind it. The film is multiplied over the
   pavilion: where the curtain is, the curtain shows, and where the film has
   opened onto white, the pavilion comes through -- so the curtains part onto
   the pavilion itself rather than onto a blank that then fades. Isolated, so
   the blend is with the pavilion and not with the card underneath. */
.rp-gate-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff;
  isolation: isolate;
}
.rp-gate-still,
.rp-gate-poster,
.rp-gate-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.rp-gate-still {
  opacity: 0;
  transition: opacity 1.3s ease;
}
.rp-gate-film {
  mix-blend-mode: multiply;
  opacity: 0;
}
.rp-gate.is-playing .rp-gate-film {
  opacity: 1;
}
/* The poster is the film's first frame; once the film is playing it is the
   same picture, and it has to go so the blend underneath can show. */
.rp-gate.is-playing .rp-gate-poster {
  opacity: 0;
}
.rp-gate.is-parting .rp-gate-still {
  opacity: 1;
}
/* No film -- a device that will not play one, or a slow line -- the curtain
   simply gives way to the pavilion. */
.rp-gate.is-parting:not(.is-playing) .rp-gate-poster {
  opacity: 0;
  transition: opacity 1.1s ease;
}

/* The names and the two lines, laid out on the 390 x 844 the design was drawn
   at and scaled with it (cqw), centred on any screen. */
.rp-gate-frame {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, calc(var(--rp-svh) * 390 / 844));
  container-type: inline-size;
  pointer-events: none;
  transition: opacity 0.55s ease;
}
.rp-gate.is-opening .rp-gate-frame {
  opacity: 0;
}

.rp-gate-names {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 15.4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  filter: drop-shadow(0 2px 14px rgba(255, 249, 244, 0.95))
    drop-shadow(0 0 2px rgba(255, 249, 244, 0.9));
}
.rp-gate-name {
  font-family: var(--rp-script);
  font-size: 16cqw;
  line-height: 1.08;
  padding: 0 0.12em;
  max-width: 100%;
  overflow-wrap: anywhere;
  background: linear-gradient(100deg, #6e2f3b 0%, #9a5462 40%, #a97d44 66%, #7a3642 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rp-gate-amp {
  font-family: var(--rp-serif);
  font-style: italic;
  font-size: 10cqw;
  line-height: 1;
  color: #9a6a3a;
  margin: -1cqw 0 -1.5cqw;
}

/* Written in, rather than faded in: each line uncovered left to right, the
   way a pen would make it. The swashes of a script run past its box, so the
   window it is uncovered through is wider than the box on every side. */
.rp-write-in {
  clip-path: inset(-45% 100% -45% -12%);
  animation: rp-write 1.45s cubic-bezier(0.62, 0.04, 0.32, 1) forwards;
  animation-delay: calc(0.35s + var(--w, 0) * 0.55s);
}
@keyframes rp-write {
  to {
    clip-path: inset(-45% -12% -45% -12%);
  }
}

/* "Tap to Open" and the credit: in every design, the same two lines in the
   same places. Tap to Open in Arizonia, 36px at x 119, y 538; the credit in
   Arial, 16px, centred at y 786. */
.rp-tap {
  position: absolute;
  left: 30.513%;
  top: 63.744%;
  white-space: nowrap;
  font-family: "Arizonia", "Great Vibes", cursive;
  font-size: 9.231cqw;
  line-height: 1.1;
  color: #74323e;
  text-shadow:
    0 0 14px rgba(255, 249, 244, 0.95),
    0 0 3px rgba(255, 249, 244, 0.9);
  opacity: 0;
  animation:
    rp-in 0.9s ease 2.1s forwards,
    rp-breathe 2.8s ease-in-out 3s infinite;
}
.rp-credit {
  position: absolute;
  left: 0;
  right: 0;
  top: 93.128%;
  display: flex;
  justify-content: center;
  pointer-events: auto;
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-size: 4.103cqw;
  line-height: 1.2;
  color: #6e3440;
  text-decoration: none;
  text-shadow: 0 0 10px rgba(255, 249, 244, 0.9);
}
.rp-credit:hover span {
  text-decoration: underline;
}
/* Set on a pill of its own so it reads on any part of the curtain -- small,
   but the one line on the opening that is ours. */
.rp-credit-pill {
  display: inline-flex;
  align-items: center;
  gap: 1.8cqw;
  padding: 1.6cqw 3.8cqw;
  border-radius: 999px;
  background: rgba(255, 250, 246, 0.86);
  border: 1px solid rgba(201, 164, 92, 0.6);
  box-shadow: 0 6px 18px -8px rgba(95, 43, 54, 0.5);
  color: #5f2b36;
  font-weight: 700;
  text-shadow: none;
}
.rp-credit:hover .rp-credit-pill span {
  text-decoration: underline;
}
.rp-credit:hover .rp-credit-pill {
  text-decoration: none;
}
.rp-credit-mark {
  width: 3.8cqw;
  height: 3.8cqw;
  border-radius: 3px;
  flex: none;
}

@keyframes rp-in {
  to {
    opacity: 1;
  }
}
@keyframes rp-breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.045);
    opacity: 0.78;
  }
}

/* The curtain as a page, in the editor: nothing plays, nothing is fixed. */
.rp-cover-still {
  padding: 0;
  overflow: hidden;
  background: #fff;
}
.rp-cover-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rp-cover-still .rp-gate-frame {
  position: absolute;
}
.rp-cover-still .rp-gate-names .rp-gate-name,
.rp-cover-still .rp-gate-names .rp-gate-amp {
  clip-path: none;
  animation: none;
}
.rp-cover-still .rp-tap {
  opacity: 1;
  animation: none;
}

/* ============================================================== PAVILION */

/* ---- welcome ---- */
.rp-hero-inner {
  width: min(100%, 520px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.rp-hero-heading {
  font-family: var(--rp-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(19px, 5.4vw, 27px);
  line-height: 1.35;
  color: var(--rp-rose-deep);
  white-space: pre-line;
}
.rp-hero-msg {
  font-family: var(--rp-serif);
  font-size: clamp(18px, 4.9vw, 23px);
  line-height: 1.45;
  color: var(--rp-ink);
  white-space: pre-line;
  max-width: 30ch;
}
.rp-hero-names {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 6px;
  filter: drop-shadow(0 3px 16px rgba(255, 249, 244, 0.9));
}
.rp-hero-name {
  font-family: var(--rp-script);
  font-size: clamp(64px, 19vw, 118px);
  line-height: 1.04;
  padding: 0 0.14em;
  max-width: 100%;
  overflow-wrap: anywhere;
  background: linear-gradient(100deg, #6e2f3b 0%, #9a5462 38%, #b0864a 64%, #7a3642 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rp-hero-amp {
  font-family: var(--rp-serif);
  font-style: italic;
  font-size: clamp(30px, 8.4vw, 46px);
  line-height: 1;
  color: #9a6a3a;
  margin: -4px 0 -8px;
}
.rp-hero-date {
  margin-top: 14px;
  font-family: var(--rp-sans);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rp-rose-deep);
}

/* ---- cards ---- */
.rp-card {
  position: relative;
  box-sizing: border-box;
  width: min(100%, 460px);
  border-radius: 28px;
  padding: 30px 22px 28px;
  text-align: center;
}
/* The hairline inside the edge, set in from it, the way a printed card is
   bordered. */
.rp-card::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 22px;
  border: 1px solid rgba(201, 164, 92, 0.42);
  pointer-events: none;
}
.rp-card-light {
  background: rgba(255, 250, 246, 0.72);
  border: 1px solid rgba(201, 164, 92, 0.38);
  box-shadow: 0 22px 56px -28px rgba(95, 43, 54, 0.5);
}
.rp-card-dark {
  color: var(--rp-ivory);
  background: linear-gradient(180deg, rgba(52, 20, 29, 0.5), rgba(34, 11, 19, 0.66));
  border: 1px solid rgba(234, 212, 166, 0.4);
  box-shadow: 0 26px 64px -30px rgba(0, 0, 0, 0.75);
}
.rp-card-dark::before {
  border-color: rgba(234, 212, 166, 0.3);
}

.rp-card-kicker {
  font-family: var(--rp-script);
  font-size: clamp(34px, 9.6vw, 46px);
  line-height: 1.15;
  padding: 0 0.1em;
  background: linear-gradient(100deg, #6e2f3b 0%, #9a5462 40%, #b0864a 66%, #7a3642 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- families ---- */
.rp-family-card {
  padding: 26px 14px 22px;
}
.rp-fam-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
/* One family only: it takes the middle, at the width two would share. */
.rp-fam-grid.is-one {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}
.rp-fam-grid.is-one .rp-fam-side {
  width: min(100%, 300px);
}
.rp-fam-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.rp-fam-label {
  font-family: var(--rp-sans);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rp-gold-deep);
}
.rp-fam-figure {
  position: relative;
  height: clamp(118px, 34vw, 170px);
  width: 100%;
  margin: 10px 0 8px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.rp-fam-art {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(95, 43, 54, 0.22));
}
svg.rp-fam-art {
  color: var(--rp-rose);
}
.rp-fam-photo {
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 999px 999px 16px 16px;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 22px -12px rgba(95, 43, 54, 0.6);
}
.rp-fam-parents {
  font-family: var(--rp-serif);
  font-weight: 600;
  font-size: clamp(15px, 4.1vw, 18px);
  line-height: 1.3;
  color: var(--rp-rose-deep);
  min-height: 1.3em;
}
.rp-fam-people {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rp-fam-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(201, 164, 92, 0.28);
}
.rp-fam-person.is-prominent {
  background: linear-gradient(180deg, rgba(138, 74, 85, 0.92), rgba(95, 43, 54, 0.92));
  border-color: rgba(234, 212, 166, 0.55);
}
.rp-fam-name {
  font-family: var(--rp-serif);
  font-weight: 600;
  font-size: clamp(14px, 3.9vw, 16px);
  line-height: 1.2;
  color: var(--rp-ink);
  overflow-wrap: anywhere;
}
.rp-fam-phone {
  font-family: var(--rp-sans);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--rp-rose);
  text-decoration: none;
  white-space: nowrap;
}
.rp-fam-person.is-prominent .rp-fam-name {
  color: var(--rp-ivory);
}
.rp-fam-person.is-prominent .rp-fam-phone {
  color: var(--rp-gold-soft);
}

/* ---- countdown ---- */
.rp-count-wrap {
  width: min(100%, 480px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.rp-count-until {
  font-family: var(--rp-sans);
  font-size: 11.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rp-rose-deep);
}
.rp-count-title {
  font-family: var(--rp-script);
  font-size: clamp(56px, 16vw, 86px);
  line-height: 1.12;
  padding: 0 0.12em;
  background: linear-gradient(100deg, #6e2f3b 0%, #9a5462 38%, #b0864a 64%, #7a3642 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 14px rgba(255, 249, 244, 0.9));
}
.rp-swag {
  width: min(100%, 380px);
  height: auto;
  margin: 4px 0 -2px;
  overflow: visible;
}
.rp-swag path {
  fill: none;
  stroke: var(--rp-gold);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.rp-swag circle {
  fill: var(--rp-gold);
}

/* Four arches, hung from the swag: the shape the drapes make over every
   doorway of the pavilion. Numbers never turn right to left. */
.rp-count-grid {
  direction: ltr;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 2.6vw, 16px);
  width: min(100%, 420px);
}
.rp-count-cell {
  position: relative;
  aspect-ratio: 3 / 4.3;
  border-radius: 999px 999px 16px 16px;
  background: linear-gradient(180deg, rgba(255, 251, 247, 0.9), rgba(255, 243, 237, 0.72));
  border: 1px solid rgba(201, 164, 92, 0.6);
  box-shadow: 0 16px 30px -18px rgba(95, 43, 54, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 14%;
  box-sizing: border-box;
  overflow: hidden;
}
.rp-count-cell::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 999px 999px 12px 12px;
  border: 1px solid rgba(201, 164, 92, 0.38);
  pointer-events: none;
}
.rp-count-num {
  font-family: var(--rp-serif);
  font-weight: 500;
  font-size: clamp(28px, 8.4vw, 46px);
  line-height: 1;
  color: var(--rp-rose-deep);
  font-variant-numeric: lining-nums tabular-nums;
}
.rp-count-label {
  margin-top: 9px;
  font-family: var(--rp-sans);
  font-size: clamp(7.5px, 2.2vw, 10.5px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rp-gold-deep);
  max-width: 94%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-count-cell.is-tick .rp-count-num {
  animation: rp-tick 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes rp-tick {
  from {
    transform: translate3d(0, -32%, 0);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.rp-count-date {
  margin-top: 20px;
  font-family: var(--rp-serif);
  font-style: italic;
  font-size: clamp(17px, 4.6vw, 21px);
  color: var(--rp-rose-deep);
}

/* ============================================================ DEAR GUESTS */

.rp-guests-card {
  padding: 30px 22px 30px;
}
.rp-guests-names {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--rp-sans);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rp-rose-deep);
}
.rp-guests-title {
  margin-top: 10px;
  font-family: var(--rp-script);
  font-size: clamp(46px, 13vw, 64px);
  line-height: 1.15;
  padding: 0 0.1em;
  background: linear-gradient(100deg, #6e2f3b 0%, #9a5462 40%, #b0864a 66%, #7a3642 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rp-guests-msg {
  max-width: 34ch;
  margin: 0 auto;
  font-family: var(--rp-serif);
  font-size: clamp(17px, 4.6vw, 20px);
  line-height: 1.5;
  color: var(--rp-ink);
  white-space: pre-line;
  text-wrap: pretty;
}
.rp-chips {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.rp-chip {
  cursor: pointer;
  min-height: 38px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(201, 164, 92, 0.6);
  background: rgba(255, 255, 255, 0.6);
  color: var(--rp-rose-deep);
  font-family: var(--rp-sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.2s ease;
}
.rp-chip:hover,
.rp-chip:focus-visible {
  background: var(--rp-rose);
  color: var(--rp-ivory);
}
.rp-chip:active {
  transform: scale(0.96);
}

/* ================================================================== FILMS */

.rp-stage-films .rp-stage-bg {
  background: #2a141a;
}
.rp-film {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 1;
}
.rp-film.is-on {
  opacity: 1;
}
.rp-film-poster,
.rp-film-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* The film comes in over its own first frame once it is actually moving, so
   there is never a black box while it loads. */
.rp-film-video {
  opacity: 0;
  transition: opacity 0.7s ease;
}
.rp-film-video.is-playing {
  opacity: 1;
}
/* No film yet for this function: its still, drifting. */
.rp-film.is-still.is-on .rp-film-poster {
  animation: rp-drift 30s ease-in-out infinite alternate;
}

/* A film that has played to its end holds its last frame, and the slow push
   in it carries on from there -- the frame is never swapped back to the
   first, which is what made a loop read as a jump. Scale only: done by the
   compositor, nothing is decoded again. */
.rp-film-video {
  transform-origin: 50% var(--rp-focus, 50%);
}
.rp-film-video.is-held {
  /* Linear and slow -- about the pace of the films' own push -- so the
     hand-over from the film's movement to this one is not felt. */
  animation: rp-hold 45s linear forwards;
}
@keyframes rp-hold {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.07);
  }
}

/* The function's own card: small, and at the top of the screen, so the film
   underneath is seen whole below it. */
.rp-event {
  justify-content: flex-start;
  padding-top: calc(26px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
.rp-event-card {
  width: min(100%, 344px);
  padding: 16px 18px 16px;
  border-radius: 22px;
  text-align: left;
}
.rp-event-card::before {
  inset: 5px;
  border-radius: 18px;
}

.rp-event-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
}
.rp-event-num {
  font-family: var(--rp-sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--rp-gold-soft);
}
.rp-event-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(234, 212, 166, 0.55);
  background: rgba(234, 212, 166, 0.14);
  font-family: var(--rp-sans);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--rp-gold-soft);
}
.rp-event-tag svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.rp-event-name {
  margin-top: 2px;
  font-family: var(--rp-script);
  font-size: clamp(40px, 11.5vw, 52px);
  line-height: 1.08;
  color: #fff4ee;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
  overflow-wrap: anywhere;
}
.rp-event-rule {
  display: block;
  width: 72px;
  height: 1px;
  margin: 6px 0 12px;
  background: linear-gradient(90deg, var(--rp-gold-soft), rgba(234, 212, 166, 0));
}

.rp-event-when,
.rp-event-where,
.rp-event-host {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 8px;
  font-family: var(--rp-serif);
  font-size: clamp(15.5px, 4.2vw, 17px);
  line-height: 1.3;
  color: #fff7f2;
}
.rp-event-when > span,
.rp-event-where > span,
.rp-event-host > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rp-event-when strong,
.rp-event-where strong {
  font-weight: 600;
}
.rp-event-time,
.rp-event-address {
  font-size: 0.88em;
  opacity: 0.8;
}
/* Hosted by: the words in the line's own type, "Hosted by" a shade softer. */
.rp-event-host > span {
  display: block;
}
.rp-event-host-label {
  opacity: 0.8;
}
.rp-event-when svg,
.rp-event-where svg,
.rp-event-host svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  fill: none;
  stroke: var(--rp-gold-soft);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rp-event-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.rp-event-actions > :only-child {
  grid-column: 1 / -1;
}
.rp-event-card .rp-btn {
  gap: 6px;
  min-height: 40px;
  padding: 9px 10px;
  font-size: 9.5px;
  letter-spacing: 0.12em;
}
.rp-event-card .rp-btn svg {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 46px;
  padding: 12px 12px;
  border-radius: 999px;
  font-family: var(--rp-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}
.rp-btn:active {
  transform: scale(0.97);
}
.rp-btn-solid {
  border: 0;
  color: #3a1a22;
  background: linear-gradient(135deg, #f1dfb6 0%, #d4b06a 55%, #c29a50 100%);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.6);
}
.rp-btn-solid:hover {
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.7);
}
.rp-btn-ghost {
  border: 1px solid rgba(234, 212, 166, 0.7);
  color: #fff7f2;
  background: rgba(255, 255, 255, 0.06);
}
.rp-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.16);
}
.rp-btn:focus-visible,
.rp-chip:focus-visible,
.rp-faq summary:focus-visible,
.rp-scroll:focus-visible {
  outline: 2px solid var(--rp-gold);
  outline-offset: 3px;
}

/* ================================================================== PLAIN */

.rp-plain {
  background:
    radial-gradient(
      ellipse 120% 70% at 50% 0%,
      rgba(246, 226, 220, 0.9),
      rgba(252, 244, 241, 0) 70%
    ),
    linear-gradient(180deg, #fcf4f1 0%, #f9ebe6 100%);
}
.rp-plain-inner {
  position: relative;
  width: min(100%, 520px);
  text-align: center;
}
.rp-plain-title {
  font-family: var(--rp-script);
  font-size: clamp(50px, 14vw, 72px);
  line-height: 1.12;
  padding: 0 0.12em;
  background: linear-gradient(100deg, #6e2f3b 0%, #9a5462 38%, #b0864a 64%, #7a3642 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Looking forward: the family's names, one to a line, set like the names on
   a printed card -- serif, centred, a gold hairline between them. */
.rp-forward-line {
  margin: 2px 0 0;
  font-family: var(--rp-serif);
  font-style: italic;
  font-size: clamp(17px, 4.6vw, 20px);
  color: var(--rp-ink-soft);
}
.rp-forward-list {
  margin: 18px auto 0;
  /* The names' size, set here so the editor's one − / + for the list scales
     every name at once (each line inherits it). */
  font-size: clamp(19px, 5.2vw, 23px);
}
.rp-forward-names {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 30ch;
}
.rp-forward-names li {
  position: relative;
  padding: 0.52em 0;
  font-family: var(--rp-serif);
  font-size: inherit;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--rp-ink);
}
.rp-forward-names li + li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 44px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--rp-gold), transparent);
}
/* Over five names: two columns, a gold line down the middle. A little smaller,
   so a long name still fits half a phone. */
.rp-forward-list.is-two {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  column-gap: clamp(12px, 4vw, 28px);
  width: min(100%, 560px);
  font-size: clamp(15px, 4vw, 20px);
}
.rp-forward-list.is-two .rp-forward-names {
  max-width: none;
  width: 100%;
}
.rp-forward-list.is-two li {
  padding: 0.48em 0;
  overflow-wrap: anywhere;
}
.rp-forward-rule {
  align-self: stretch;
  width: 1px;
  margin: 0.4em 0;
  background: linear-gradient(
    180deg,
    transparent,
    var(--rp-gold) 12%,
    var(--rp-gold) 88%,
    transparent
  );
}
.rp-forward-names .rp-forward-empty {
  font-style: italic;
  color: var(--rp-ink-soft);
  opacity: 0.7;
  font-size: 16px;
}

.rp-plain-lede {
  font-family: var(--rp-serif);
  font-size: clamp(18px, 4.8vw, 21px);
  line-height: 1.5;
  color: var(--rp-ink-soft);
  white-space: pre-line;
  max-width: 34ch;
  margin: 0 auto;
}

/* The plain pages' heading, as Elegant Wedding sets its own: a serif in
   spaced capitals over a dashed rule, and nothing else. */
.rp-plain-head {
  font-family: var(--rp-serif);
  font-weight: 700;
  font-size: clamp(23px, 6.6vw, 30px);
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  color: var(--rp-rose-deep);
  text-wrap: balance;
}
.rp-dash {
  display: block;
  width: min(82%, 320px);
  height: 1px;
  margin: 16px auto 18px;
  background-image: linear-gradient(90deg, #cdb8b0 0 6px, transparent 6px 12px);
  background-size: 12px 1px;
}

/* ---- dress code ---- */
.rp-dress-note {
  max-width: 32ch;
  margin: 0 auto 6px;
  font-family: var(--rp-serif);
  font-size: clamp(17px, 4.6vw, 19px);
  line-height: 1.5;
  color: var(--rp-ink-soft);
  white-space: pre-line;
}
.rp-dress-list {
  display: flex;
  flex-direction: column;
}
.rp-dress-row {
  padding: 13px 0;
  border-bottom: 1px dashed #dccbc4;
}
.rp-dress-row:last-child {
  border-bottom: 0;
}
.rp-dress-event {
  font-family: var(--rp-serif);
  font-weight: 700;
  font-size: clamp(17px, 4.6vw, 19px);
  line-height: 1.25;
  color: var(--rp-ink);
}
.rp-dress-what {
  margin-top: 2px;
  font-family: var(--rp-serif);
  font-size: clamp(16px, 4.3vw, 18px);
  line-height: 1.4;
  color: #7a6468;
}

/* ---- programme & venues ---- */
.rp-prog-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rp-prog-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 11px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(201, 164, 92, 0.38);
  box-shadow: 0 12px 26px -22px rgba(95, 43, 54, 0.6);
  text-align: left;
}
.rp-prog-text {
  min-width: 0;
}
.rp-prog-name {
  font-family: var(--rp-script);
  font-size: clamp(28px, 8vw, 34px);
  line-height: 1.1;
  color: var(--rp-rose-deep);
}
.rp-prog-date {
  font-family: var(--rp-serif);
  font-weight: 600;
  font-size: clamp(15px, 4vw, 16.5px);
  line-height: 1.3;
  color: var(--rp-gold-deep);
}
.rp-prog-where {
  margin-top: 1px;
  font-family: var(--rp-serif);
  font-size: clamp(14px, 3.8vw, 15.5px);
  line-height: 1.3;
  color: var(--rp-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rp-prog-where strong {
  font-weight: 600;
  color: var(--rp-ink);
}
/* The way there, one tap, as a round button at the end of the row. */
.rp-prog-map {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f1dfb6 0%, #d4b06a 55%, #c29a50 100%);
  color: #3a1a22;
  box-shadow: 0 8px 16px -10px rgba(95, 43, 54, 0.7);
  transition: transform 0.2s ease;
}
.rp-prog-map:active {
  transform: scale(0.94);
}
.rp-prog-map:focus-visible {
  outline: 2px solid var(--rp-gold);
  outline-offset: 3px;
}
.rp-prog-map svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html.ci-rtl .rp-prog-row {
  text-align: right;
}

/* ---- the portrait ---- */
.rp-portrait {
  margin: 16px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* An arch, like every doorway of the pavilion, edged in gold. */
.rp-portrait-frame {
  width: min(70vw, 300px, calc(var(--rp-svh) * 0.42));
  aspect-ratio: 3 / 4;
  padding: 6px;
  box-sizing: border-box;
  border-radius: 999px 999px 20px 20px;
  background: linear-gradient(160deg, #f1dfb6 0%, #c9a45c 45%, #e6cf9c 70%, #a07a36 100%);
  box-shadow: 0 26px 48px -26px rgba(95, 43, 54, 0.6);
}
.rp-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 999px 999px 15px 15px;
  background: var(--rp-blush);
}
/* One of our ready-made pictures rather than a photograph: cut-outs, so the
   whole couple is fitted in, standing on the foot of the arch over a soft
   light, rather than cropped like a photograph. */
.rp-portrait-img.is-art {
  object-fit: contain;
  object-position: 50% 100%;
  padding: 18px 12px 0;
  box-sizing: border-box;
  background: radial-gradient(ellipse at 50% 40%, #fffaf6 0%, var(--rp-blush) 72%);
}
.rp-portrait-names {
  margin-top: 14px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 10px;
  font-family: var(--rp-script);
  font-size: clamp(40px, 11vw, 54px);
  line-height: 1.1;
  background: linear-gradient(100deg, #6e2f3b 0%, #9a5462 38%, #b0864a 64%, #7a3642 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rp-portrait-amp {
  font-family: var(--rp-serif);
  font-style: italic;
  font-size: 0.5em;
  -webkit-text-fill-color: #9a6a3a;
  color: #9a6a3a;
}
.rp-portrait-caption {
  margin-top: 2px;
  font-family: var(--rp-serif);
  font-style: italic;
  font-size: clamp(17px, 4.6vw, 20px);
  color: var(--rp-ink-soft);
}

/* ---- questions ---- */
.rp-faq-list {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.rp-faq {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(201, 164, 92, 0.34);
  box-shadow: 0 12px 28px -22px rgba(95, 43, 54, 0.55);
  overflow: hidden;
}
.rp-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  font-family: var(--rp-serif);
  font-weight: 600;
  font-size: clamp(17px, 4.6vw, 19px);
  line-height: 1.3;
  color: var(--rp-rose-deep);
}
.rp-faq summary::-webkit-details-marker {
  display: none;
}
.rp-faq summary i {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(201, 164, 92, 0.7);
}
.rp-faq summary i::before,
.rp-faq summary i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 1.4px;
  background: var(--rp-gold-deep);
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}
.rp-faq summary i::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.rp-faq[open] summary i::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
.rp-faq-a {
  padding: 0 18px 16px;
}
.rp-faq[open] .rp-faq-a {
  animation: rp-open 0.4s ease;
}
.rp-faq-a p {
  font-family: var(--rp-serif);
  font-size: clamp(16.5px, 4.4vw, 18.5px);
  line-height: 1.5;
  color: var(--rp-ink-soft);
}
@keyframes rp-open {
  from {
    opacity: 0;
    transform: translate3d(0, -6px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================== CLOSING */

.rp-closing-card {
  padding: 34px 22px 26px;
}
.rp-closing-note {
  font-family: var(--rp-serif);
  font-style: italic;
  font-size: clamp(21px, 5.6vw, 26px);
  line-height: 1.4;
  color: var(--rp-rose-deep);
  white-space: pre-line;
}
.rp-closing-names {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 10px;
  font-family: var(--rp-script);
  font-size: clamp(46px, 13vw, 64px);
  line-height: 1.15;
  background: linear-gradient(100deg, #6e2f3b 0%, #9a5462 38%, #b0864a 64%, #7a3642 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rp-closing-amp {
  font-family: var(--rp-serif);
  font-style: italic;
  font-size: 0.5em;
  -webkit-text-fill-color: var(--rp-gold-deep);
  color: var(--rp-gold-deep);
}
.rp-made {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rp-sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rp-rose-deep);
  text-decoration: none;
}
.rp-made:hover {
  text-decoration: underline;
}
.rp-made .credit-mark {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

/* ============================================================ SCROLL CUE */

.rp-scroll {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: #f6dfd2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translateX(-50%);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}
/* A rose-gold ring that turns, a halo breathing out from it, and two
   chevrons falling through it one after the other -- not blurred behind: a
   blur over a film is re-worked on every frame of it. */
.rp-scroll-core {
  position: relative;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, rgba(150, 78, 92, 0.96), rgba(78, 30, 42, 0.96));
  box-shadow: 0 12px 28px -10px rgba(40, 12, 20, 0.7);
}
.rp-scroll-core::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 1.6px;
  background: conic-gradient(from 0deg, #fbe3d6, #c9a45c, #fff4ec, #d99aa4, #fbe3d6);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  animation: rp-spin 5s linear infinite;
}
.rp-scroll-ring {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  border-radius: 50%;
  border: 1px solid rgba(246, 223, 210, 0.85);
  pointer-events: none;
  animation: rp-halo 2.4s ease-out infinite;
}
.rp-scroll-chev {
  position: absolute;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #fff1ea;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: rp-fall 1.8s ease-in-out infinite;
}
.rp-scroll-chev-2 {
  animation-delay: 0.9s;
}
.rp-scroll-label {
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(78, 30, 42, 0.7);
  border: 1px solid rgba(246, 223, 210, 0.35);
  font-family: var(--rp-sans);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rp-scroll:hover .rp-scroll-core {
  box-shadow:
    0 12px 28px -10px rgba(40, 12, 20, 0.7),
    0 0 0 4px rgba(246, 223, 210, 0.22);
}
@keyframes rp-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes rp-halo {
  0% {
    transform: scale(1);
    opacity: 0.85;
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}
@keyframes rp-fall {
  0% {
    transform: translate3d(0, -10px, 0);
    opacity: 0;
  }
  35%,
  65% {
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 10px, 0);
    opacity: 0;
  }
}
.rp-scroll.is-done,
html.rp-sealed .rp-scroll {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
}

/* The shared music and language buttons wait for the curtain like
   everything else. */
/* The language button shows on the closed card too (2026-10-15) -- see .ci-lang in card-sections.css. */

/* ================================================================ EDITOR */

/* Everything shows at once in the editor: it is being read and changed, not
   performed. */
html.rp-editing .rp-rise {
  opacity: 1;
  transform: none;
  transition: none;
}
/* The scroll-down button shows in the editor's preview as well (2026-10-11). */

/* ============================================================== TABLET */

@media (min-width: 700px) {
  .rp-page {
    padding-left: 32px;
    padding-right: 32px;
  }
  .rp-card {
    width: min(100%, 520px);
    padding: 38px 34px 34px;
    border-radius: 32px;
  }
  .rp-card::before {
    inset: 9px;
    border-radius: 25px;
  }
  .rp-family-card {
    width: min(100%, 640px);
    padding: 34px 26px 28px;
  }
  .rp-fam-grid {
    gap: 22px;
  }
  .rp-fam-label {
    font-size: 12px;
  }
  .rp-fam-phone {
    font-size: 13px;
  }
  .rp-fam-person {
    padding: 9px 12px;
  }
  .rp-event-card {
    width: min(100%, 380px);
    padding: 20px 22px 20px;
    border-radius: 24px;
  }
  .rp-event-card::before {
    inset: 6px;
    border-radius: 19px;
  }
  .rp-count-grid {
    width: min(100%, 480px);
  }
  .rp-eyebrow,
  .rp-hero-date,
  .rp-count-until {
    font-size: 12.5px;
  }
  .rp-btn {
    font-size: 11.5px;
  }
  .rp-event-card .rp-btn {
    font-size: 10px;
  }
}

/* =============================================================== DESKTOP

   The films and stills fill the whole width; a tall film is cropped to its
   middle, which is where each was shot. On the opening, the crop moves the
   bow up the screen, so the names move up with it to stay above it. */
@media (min-width: 900px) {
  .rp-scroll {
    bottom: 24px;
  }

  /* The welcome, sized for a wide screen rather than a phone's worth of it. */
  .rp-hero-inner {
    width: min(100%, 720px);
  }
  .rp-hero-heading {
    font-size: clamp(22px, 3.4svh, 31px);
  }
  .rp-hero-msg {
    font-size: clamp(20px, 3svh, 27px);
    max-width: 34ch;
  }
  .rp-hero-name {
    font-size: clamp(80px, 14svh, 140px);
  }
  .rp-hero-amp {
    font-size: 48px;
  }
  .rp-eyebrow,
  .rp-hero-date,
  .rp-count-until {
    font-size: 13.5px;
  }

  .rp-count-wrap {
    width: min(100%, 680px);
  }
  .rp-count-title {
    font-size: clamp(72px, 11svh, 100px);
  }
  .rp-swag {
    width: 520px;
  }
  .rp-count-grid {
    width: 600px;
    gap: 22px;
  }
  .rp-count-num {
    font-size: 60px;
  }
  .rp-count-label {
    font-size: 12px;
    margin-top: 12px;
  }
  .rp-count-date {
    font-size: 24px;
  }

  .rp-card.rp-guests-card {
    width: 640px;
    padding: 44px 48px 40px;
  }
  .rp-guests-title {
    font-size: clamp(56px, 8svh, 72px);
  }
  .rp-guests-msg {
    font-size: 22px;
    max-width: 44ch;
  }
  .rp-guests-names {
    font-size: 13px;
  }

  /* The plain pages: the same simple set, at a size that holds a desk. */
  .rp-plain-inner {
    width: min(100%, 640px);
  }
  .rp-plain-head {
    font-size: 34px;
  }
  .rp-plain-title {
    font-size: 84px;
  }
  .rp-dash {
    width: 360px;
    margin: 20px auto 24px;
  }
  .rp-dress-note {
    font-size: 21px;
    margin-bottom: 10px;
  }
  .rp-dress-row {
    padding: 16px 0;
  }
  .rp-dress-event {
    font-size: 21px;
  }
  .rp-dress-what {
    font-size: 20px;
  }

  .rp-programme .rp-plain-inner {
    width: min(100%, 900px);
  }
  .rp-prog-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .rp-prog-row {
    padding: 16px 16px 16px 22px;
  }
  .rp-prog-name {
    font-size: 42px;
  }
  .rp-prog-date {
    font-size: 18px;
  }
  .rp-prog-where {
    font-size: 16.5px;
  }
  .rp-prog-map {
    width: 48px;
    height: 48px;
  }

  .rp-portrait-frame {
    width: min(400px, calc(var(--rp-svh) * 0.36));
  }
  .rp-portrait-names {
    font-size: clamp(48px, 7svh, 64px);
    margin-top: 14px;
  }
  .rp-portrait-caption {
    font-size: 22px;
  }

  .rp-faqs .rp-plain-inner {
    width: min(100%, 700px);
  }
  .rp-faq summary {
    font-size: 21px;
    padding: 18px 22px;
  }
  .rp-faq-a {
    padding: 0 22px 18px;
  }
  .rp-faq-a p {
    font-size: 19px;
  }

  .rp-card.rp-closing-card {
    width: 600px;
    padding: 44px 40px 32px;
  }
  .rp-closing-note {
    font-size: 28px;
  }
  .rp-closing-names {
    font-size: 72px;
  }
}
@media (min-width: 900px) and (orientation: landscape) {
  /* A tall film on a wide screen is cropped to its middle, which is the bow
     -- so the names stand either side of it, on the open folds of the
     curtain, rather than on the knot. They reach out of the phone-shaped
     frame to the full width of the screen to do it. */
  .rp-gate-names {
    top: 36%;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    display: grid;
    grid-template-columns: 1fr 36vw 1fr;
    align-items: center;
  }
  .rp-gate-name {
    font-size: clamp(56px, 6.2vw, 132px);
    grid-row: 1;
  }
  .rp-gate-name:first-child {
    grid-column: 1;
  }
  .rp-gate-name:last-child {
    grid-column: 3;
  }
  .rp-gate-amp {
    display: none;
  }

  /* The function's card stands to the left, like a title over a film, and
     the film has the rest of the screen. The dark follows it there. */
  /* Top left: every one of these films has canopy there, and the couple
     below and to the middle. */
  .rp-event {
    align-items: flex-start;
    justify-content: flex-start;
    padding: max(40px, 7svh) max(48px, 6vw) 110px;
  }
  .rp-event-card {
    width: 400px;
    padding: 24px 26px 22px;
  }
  .rp-film-poster,
  .rp-film-video {
    object-position: 50% var(--rp-focus, 50%);
  }
  .rp-veil-film {
    background:
      radial-gradient(
        ellipse 60% 75% at 0% 0%,
        rgba(24, 8, 14, 0.62) 0%,
        rgba(24, 8, 14, 0.3) 50%,
        rgba(24, 8, 14, 0) 100%
      ),
      linear-gradient(
        180deg,
        rgba(24, 8, 14, 0.16) 0%,
        rgba(24, 8, 14, 0) 30%,
        rgba(24, 8, 14, 0) 78%,
        rgba(24, 8, 14, 0.3) 100%
      );
  }
  html.ci-rtl .rp-event {
    align-items: flex-end;
  }
}
@media (min-width: 1200px) {
  .rp-card {
    width: min(100%, 560px);
  }
  .rp-family-card {
    width: 720px;
  }
  .rp-card.rp-event-card {
    width: 420px;
  }
}

/* ============================================= A PHONE ON ITS SIDE, or short
   There is not the height for the pages as drawn; they keep their order and
   simply grow. */
@media (max-height: 560px) and (orientation: landscape) {
  .rp-page {
    padding-top: 56px;
    padding-bottom: 76px;
  }
  .rp-hero-name {
    font-size: clamp(48px, 11vh, 80px);
  }
  .rp-count-grid {
    width: min(100%, 360px);
  }
  .rp-event {
    padding-bottom: 76px;
  }
  .rp-fam-figure {
    height: 96px;
  }
}

/* =========================================================== RIGHT TO LEFT
   The words turn round; the arrangement stays as drawn. The scripts are
   Latin-only faces, so an Urdu card sets its names and headings in the
   language's own face rather than in a script that has no letters for it. */
html.ci-rtl .rp-body,
html.ci-rtl .rp-gate-name,
html.ci-rtl .rp-hero-name,
html.ci-rtl .rp-card-kicker,
html.ci-rtl .rp-count-title,
html.ci-rtl .rp-guests-title,
html.ci-rtl .rp-plain-title,
html.ci-rtl .rp-closing-names,
html.ci-rtl .rp-event-name {
  font-family: var(--ci-lang-font, inherit);
}
html.ci-rtl .rp-event-card {
  text-align: right;
}
html.ci-rtl .rp-event-rule {
  margin-left: auto;
  margin-right: 0;
  background: linear-gradient(270deg, var(--rp-gold-soft), rgba(234, 212, 166, 0));
}
html.ci-rtl .rp-faq-list {
  text-align: right;
}
/* Tap to Open in Urdu is one connected run, longer than the English: given
   both edges and centred, so it cannot walk off the card. */
html.ci-rtl .rp-tap {
  left: 8%;
  right: 8%;
  text-align: center;
  font-family: var(--ci-lang-font, serif);
  font-size: 6.4cqw;
  line-height: 1.9;
}
/* Latin capitals are spaced out; an Arabic script only loses width to it. */
html.ci-rtl .rp-eyebrow,
html.ci-rtl .rp-count-label,
html.ci-rtl .rp-count-until,
html.ci-rtl .rp-fam-label,
html.ci-rtl .rp-btn,
html.ci-rtl .rp-chip,
html.ci-rtl .rp-scroll,
html.ci-rtl .rp-event-tag,
html.ci-rtl .rp-dress-event {
  letter-spacing: 0;
}

/* ============================================== BISMILLAH AND BLESSINGS */

/* The Bismillah, in Arabic, in the hero's own rose and gold. */
.rp-bism {
  margin: 0 0 6px;
  font-family: "Amiri", "Noto Naskh Arabic", "Traditional Arabic", serif;
  font-weight: 400;
  font-size: clamp(24px, 7.2vw, 34px);
  line-height: 1.7;
  letter-spacing: 0;
  background: linear-gradient(100deg, #6e2f3b 0%, #9a5462 40%, #b0864a 70%, #7a3642 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 10px rgba(255, 249, 244, 0.85));
}

/* "Tap anywhere for a shower of blessings", under each function's card. */
.rp-tapnote {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 8px);
  padding: 8px 16px 8px 11px;
  border-radius: 999px;
  background: rgba(58, 22, 31, 0.62);
  border: 1px solid rgba(234, 212, 166, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--rp-serif);
  font-size: clamp(15px, 4.2vw, 17px);
  color: #fbeee9;
  text-align: center;
  pointer-events: none;
  animation: rp-note 4.4s ease-in-out infinite;
}
.rp-tapnote-flower {
  flex: none;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='%23ead4a6'><ellipse cx='12' cy='6' rx='3.4' ry='5'/><ellipse cx='12' cy='18' rx='3.4' ry='5'/><ellipse cx='6' cy='12' rx='5' ry='3.4'/><ellipse cx='18' cy='12' rx='5' ry='3.4'/></g><circle cx='12' cy='12' r='2.6' fill='%23c9a45c'/></svg>")
    center / contain no-repeat;
  animation: rp-spin 7s linear infinite;
}
@keyframes rp-note {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(234, 212, 166, 0);
  }
  50% {
    box-shadow: 0 0 22px -4px rgba(234, 212, 166, 0.55);
  }
}
@keyframes rp-spin {
  to {
    transform: rotate(360deg);
  }
}

/* The shower: rose petals, little blossoms, a glint of gold. */
.rp-petal,
.rp-bloom,
.rp-glint {
  position: fixed;
  z-index: 30;
  pointer-events: none;
  animation: rp-fall var(--t, 2.6s) cubic-bezier(0.25, 0.6, 0.4, 1) forwards;
}
.rp-petal {
  width: 14px;
  height: 18px;
  margin: -9px 0 0 -7px;
  border-radius: 80% 0 80% 0;
  background: radial-gradient(circle at 30% 30%, #ffd3dc, #d97a8c 55%, #a8485a);
}
.rp-bloom {
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='%23f7c6d0'><circle cx='12' cy='6.2' r='4.4'/><circle cx='17.5' cy='10.2' r='4.4'/><circle cx='15.4' cy='16.8' r='4.4'/><circle cx='8.6' cy='16.8' r='4.4'/><circle cx='6.5' cy='10.2' r='4.4'/></g><circle cx='12' cy='12' r='3' fill='%23e3b862'/></svg>")
    center / contain no-repeat;
}
.rp-glint {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  background: radial-gradient(circle, #fff6dc 0 20%, #f1d9a0 40%, transparent 62%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
@keyframes rp-fall {
  to {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(var(--r));
  }
}
.rp-wah {
  position: fixed;
  z-index: 31;
  white-space: nowrap;
  font-family: var(--rp-script);
  font-size: 38px;
  color: #ffe9ee;
  text-shadow:
    0 0 12px rgba(217, 122, 140, 0.95),
    0 0 2px rgba(120, 40, 55, 0.6);
  pointer-events: none;
  animation: rp-wah 1.7s ease-out forwards;
}
@keyframes rp-wah {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.6);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -14px) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -96px);
  }
}
html.rp-editing .rp-tapnote {
  animation: none;
}

/* ======================================================= LESS MOVEMENT */

@media (prefers-reduced-motion: reduce) {
  .rp-rise {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .rp-write-in {
    clip-path: none;
    animation: none;
  }
  .rp-tap {
    opacity: 1;
    animation: none;
  }
  .rp-tapnote,
  .rp-tapnote-flower {
    animation: none;
  }
  html.rp-open .rp-still-pavilion,
  html.rp-open .rp-still-garden,
  .rp-film.is-still.is-on .rp-film-poster {
    animation: none;
  }
  .rp-scroll-core::before,
  .rp-scroll-ring,
  .rp-scroll-chev-2 {
    animation: none;
  }
  .rp-scroll-ring {
    opacity: 0;
  }
  .rp-scroll-chev {
    animation: none;
    opacity: 1;
  }
  .rp-film,
  .rp-film-video,
  .rp-gate,
  .rp-gate-still,
  .rp-veil-light {
    transition-duration: 0.01ms;
  }
  html.rp-snap {
    scroll-snap-type: none;
  }
}

/* A function that was not filmed: the garden, dimmed, under the same card as
   every other function. One fixed look, whatever the function is called. */
.rp-film.is-dim {
  background: #1c1215;
}
.rp-film.is-dim .rp-film-poster {
  opacity: 0.4;
}

/* ---------------------------------------------- the countdown, scratched
   Each arch is covered in gold leaf (/js/scratch-reveal.js paints it and
   takes it off under a finger). The line under it says what to do, and the
   date itself waits until the gold is gone -- it would give the answer away. */
.rp-count-cell .scratch-rub {
  z-index: 2;
}
.rp-count-hint {
  margin-top: 16px;
  font-family: var(--rp-sans);
  font-size: clamp(9px, 2.5vw, 11px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rp-gold-deep);
  transition: opacity 0.5s ease;
}
.rp-count-hint::before {
  content: "\2726";
  margin-right: 0.6em;
}
.scratch-clock.is-rubbed ~ .rp-count-hint {
  opacity: 0;
}
.rp-count-grid ~ .rp-count-date {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.8s ease 0.3s,
    transform 0.8s ease 0.3s;
}
.scratch-clock.is-rubbed ~ .rp-count-date {
  opacity: 1;
  transform: none;
}
/* Its own pavilion behind it now (it left the pavilion's stage), so the words
   are lifted above that picture the way a card is on the other pages. */
.rp-count > .rp-count-wrap {
  position: relative;
  z-index: 1;
}

/* The credit is a longer line now ("Create your own invitation with
   Ceremonia Invites", 2026-10-05): kept compact and centred on the cover,
   in two even lines rather than one word left hanging. */
.rp-credit-pill {
  max-width: min(300px, 82vw);
  box-sizing: border-box;
  font-size: 0.9em;
}
.rp-credit-pill span {
  text-wrap: balance;
  text-align: center;
  line-height: 1.25;
}
.rp-made span {
  text-wrap: balance;
  text-align: center;
}

/* "Create your own invitation" -- the shared pill (views/partials/_credit.ejs,
   Mehru Returns' own), in this design's colours and type. */
.ci-credit {
  --ci-credit-bg: rgba(74, 26, 38, 0.58);
  --ci-credit-ink: rgba(255, 236, 238, 0.9);
  --ci-credit-font: var(--rp-sans);
}

/* The line under the names on the Welcome page (welcome.tagline,
   2026-10-15): the eyebrow's type, just below. */
.rp-tagline {
  margin-top: 6px;
  white-space: pre-line;
}

/* Urdu in the gold lettering (2026-10-15, Ahmad: "the urdu words are cutting
   if you increase the sizes"). The gold is painted inside the element's own
   box and only shows where the letters are -- and Nastaliq reaches far above
   and below a box drawn for Latin capitals, the more so the bigger it is set,
   so the tops of ک and گ and the tails of ے and ی came out cut flat. The box
   is given room above and below for the letters to be painted in, and the
   same room is taken back in its margins -- on top of the margins it already
   had -- so nothing on the card moves. English cards are untouched.

   `body` in each selector puts it ahead of the shared lines' own padding. */
html.ci-lang-rtl body .rp-gate-name,
html.ci-lang-rtl body .rp-hero-name,
html.ci-lang-rtl body .rp-card-kicker,
html.ci-lang-rtl body .rp-count-title,
html.ci-lang-rtl body .rp-plain-title,
html.ci-lang-rtl body .rp-script,
html.ci-lang-rtl body .rp-guests-title,
html.ci-lang-rtl body .rp-portrait-names,
html.ci-lang-rtl body .rp-closing-names {
  padding-block: 0.9em;
  margin-block: -0.9em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
html.ci-lang-rtl body .rp-guests-title {
  margin-top: calc(10px - 0.9em);
  margin-bottom: calc(0px - 0.9em);
}
html.ci-lang-rtl body .rp-portrait-names {
  margin-top: calc(14px - 0.9em);
  margin-bottom: calc(0px - 0.9em);
}
html.ci-lang-rtl body .rp-closing-names {
  margin-top: calc(12px - 0.9em);
  margin-bottom: calc(0px - 0.9em);
}