/* ==========================================================================
   Senjuti & Arpit — wedding invitation
   Mobile-first. On larger screens the invitation stays a portrait "card"
   centred on a decorated surround, so the illustrations never stretch.
   ========================================================================== */

:root {
  --ivory: #FFFFFF;          /* page background: pure white */
  --ivory-deep: #F4EBDA;
  --ink: #2F3D1C;          /* deep olive, matches the calendar */
  --lotus: #E58FA6;
  --pink: #C9357F;         /* lotus pink: hearts and countdown */
  --green: #4C8414;        /* leaf green */
  --gold: #946715;
  --gold-light: #E2C27A;
  --line: #D3B57A;
  --mint: #8FDCBB;          /* controls: button outline, dot fill */
  --mint-light: #C3EEDC;    /* controls: dot hover, outlines on the video */
  --mint-deep: #3E9E78;     /* controls: dot outline and current dot */

  --f-display: "Cinzel", "Times New Roman", serif;
  --f-body: "Lora", Georgia, serif;
  --f-label: "Jost", "Helvetica Neue", Arial, sans-serif;
  --f-baskerville: "Libre Baskerville", Baskerville, Georgia, serif;
  --f-delius: "Delius", "Comic Neue", sans-serif;
  --f-sacramento: "Sacramento", cursive;
  --f-josefin: "Josefin Sans", "Helvetica Neue", Arial, sans-serif;

  /* Card size: full screen on phones, a 9:16-ish column elsewhere */
  --vh: 100vh;
  --frame-w: min(100vw, calc(var(--vh) * 0.5625));
}
@supports (height: 100dvh) { :root { --vh: 100dvh; } }
@media (max-width: 599px) and (orientation: portrait) { :root { --frame-w: 100vw; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  overflow: hidden;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
p { margin: 0; }

/* --------------------------------------------------------------------------
   Surround (tablet / desktop)
   -------------------------------------------------------------------------- */
.surround { display: none; }

@media (min-width: 600px) {
  body {
    background:
      radial-gradient(ellipse at 15% 20%, rgba(229, 143, 166, .18), transparent 55%),
      radial-gradient(ellipse at 85% 80%, rgba(79, 122, 50, .16), transparent 55%),
      var(--ivory-deep);
  }
  body::before {               /* faint gold lattice */
    content: "";
    position: fixed; inset: 0;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 4c4 8 8 12 16 16-8 4-12 8-16 16-4-8-8-12-16-16 8-4 12-8 16-16z' fill='none' stroke='%23C9A55B' stroke-opacity='.35' stroke-width='.8'/%3E%3Ccircle cx='0' cy='0' r='1.4' fill='%23C9A55B' fill-opacity='.4'/%3E%3Ccircle cx='56' cy='56' r='1.4' fill='%23C9A55B' fill-opacity='.4'/%3E%3C/svg%3E");
  }
  .surround { display: block; position: fixed; inset: 0; pointer-events: none; }
  .surround__text {
    position: absolute; top: 50%;
    font-family: var(--f-display);
    font-size: 14px;
    letter-spacing: .5em;
    color: var(--gold);
    white-space: nowrap;
    text-transform: uppercase;
    left: calc(50% - var(--frame-w) / 2 - 56px);
    transform: translate(-50%, -50%) rotate(-90deg);
  }
  .surround__text--right {
    left: auto;
    right: calc(50% - var(--frame-w) / 2 - 56px);
    transform: translate(50%, -50%) rotate(90deg);
  }
  .frame {
    box-shadow: 0 30px 80px -20px rgba(52, 65, 31, .35), 0 0 0 1px rgba(167, 122, 38, .25);
  }
}
@media (min-width: 600px) and (max-width: 860px) {  /* not enough room for side text */
  .surround__text { display: none; }
}

/* --------------------------------------------------------------------------
   Frame & scroll-snapping
   -------------------------------------------------------------------------- */
.frame {
  position: relative;
  width: var(--frame-w);
  height: var(--vh);
  margin: 0 auto;
  overflow: hidden;
  background: var(--ivory);
  container-type: size;
  container-name: frame;
}

.scroller {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.scroller::-webkit-scrollbar { display: none; }

.section {
  position: relative;
  height: 100cqb;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  isolation: isolate;
}

.paper { background: var(--ivory); }

/* Section content column */
.content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: max(env(safe-area-inset-top), 4cqb) 10cqi max(env(safe-area-inset-bottom), 4cqb);
}

/* Illustration pieces: drawn on white, shown as-is (no filters or blending) on the white page */
.art {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.art--top    { top: 0; right: 0; object-position: right top; transform-origin: top right; }
.art--bottom { bottom: 0; left: 0; object-position: left bottom; }



/* --------------------------------------------------------------------------
   Shared type
   -------------------------------------------------------------------------- */
.amp {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gold);
}

/* Reveal-on-arrival */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}
.section.is-active .reveal { opacity: 1; transform: none; }
.section.is-active .reveal:nth-child(2) { transition-delay: .08s; }
.section.is-active .reveal:nth-child(3) { transition-delay: .16s; }
.section.is-active .reveal:nth-child(4) { transition-delay: .24s; }
.section.is-active .reveal:nth-child(5) { transition-delay: .32s; }
.section.is-active .reveal:nth-child(6) { transition-delay: .40s; }
.section.is-active .reveal:nth-child(7) { transition-delay: .48s; }
.section.is-active .reveal:nth-child(8) { transition-delay: .56s; }

/* --------------------------------------------------------------------------
   1 · Hero
   -------------------------------------------------------------------------- */
.hero { background: #2A3A4A; }
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.hero__video::-webkit-media-controls { display: none !important; }

/* Text sits in the gap between the bride's face and the dog */
.hero__content {
  position: absolute; z-index: 2;
  left: 50%; top: 51%;
  translate: -50% 0;
  width: max-content;
  max-width: 92%;
  padding: 2.2cqb 9cqi 2.6cqb;
  text-align: center;
  color: #FFF8EA;
}
.hero__shade {                    /* even, subtle veil over the whole video so text reads */
  position: absolute; inset: 0; z-index: 1;
  background: rgba(0, 0, 0, .3);
  pointer-events: none;
}
.hero__date {
  font-family: var(--f-josefin);
  font-weight: 600;
  font-size: clamp(15px, min(4.8cqi, 2.5cqb), 19px);
  letter-spacing: .12em;
  color: #F6DE9C;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 10px rgba(0, 0, 0, .6);
}
.hero__dot { margin: 0 .55em; }
.hero__names {
  margin: .9cqb 0 0;
  font-family: var(--f-baskerville);
  font-weight: 700;
  font-size: min(9.2cqi, 4.9cqb);
  line-height: 1.05;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.hero__names span { display: block; }
.hero__names .amp {
  font-family: var(--f-delius);
  font-weight: 400;
  font-size: .56em;
  line-height: 1.35;
  color: var(--gold-light);
}
.hero__line {
  margin-top: .6cqb;
  font-family: var(--f-sacramento);
  font-weight: 400;
  font-size: min(6.6cqi, 3.5cqb);
  line-height: 1.15;
  letter-spacing: .01em;
  color: #FFF8EA;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .9), 0 0 6px rgba(0, 0, 0, .65), 0 0 16px rgba(0, 0, 0, .45);
}

/* --------------------------------------------------------------------------
   2 · Save the date
   -------------------------------------------------------------------------- */
.date .art--top    { max-height: 31%; }
.date .art--bottom { max-height: 29%; }

/* Bordered sections: a patterned strip runs down each side (tiled, so it fits any
   screen height); the artwork sits between the strips. --bd is the strip width. */
.bordered {
  --bd: 5.2cqi;
  background:
    var(--border) left top / var(--bd) auto repeat-y,
    var(--border) right top / var(--bd) auto repeat-y,
    var(--ivory);
}
.bordered .art { width: calc(100% - 2 * var(--bd)); }
.bordered .art--top    { right: var(--bd); }
.bordered .art--bottom { left: var(--bd); }
.date    { --border: url("../img/border-pink.webp?v=4"); }
.invite  { --border: url("../img/border-red.webp?v=4"); }
.events  { --border: url("../img/border-yellow.webp?v=4"); }
.story   { --border: url("../img/border-purple.webp?v=1"); }
.closing { --border: url("../img/border-green.webp?v=4"); }
.date .content { padding-top: 0; padding-bottom: 7cqb; }
.calendar {
  width: min(70cqi, 38cqb);
  margin-bottom: 2.6cqb;
}
.cal__month {
  margin-bottom: 1.2cqb;
  font-family: var(--f-baskerville);
  font-weight: 700;
  font-size: min(5.4cqi, 2.9cqb);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--green);
}
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}
.cal__week {
  padding-bottom: .8cqb;
  margin-bottom: .6cqb;
  border-bottom: 1.5px solid var(--green);
  font-family: var(--f-label);
  font-weight: 500;
  font-size: clamp(10px, min(2.8cqi, 1.45cqb), 12px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green);
}
.cal__days span {
  display: grid; place-items: center;
  height: min(7.4cqi, 4cqb);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: min(4cqi, 2.1cqb);
  font-variant-numeric: lining-nums;
  color: var(--green);
}
.cal__days .cal__hl {
  font-weight: 600;
  color: #FFFFFF;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29'%3E%3Cpath d='M16 29C6 21 0 15.5 0 8.7 0 3.8 3.8 0 8.6 0 11.6 0 14.4 1.5 16 4 17.6 1.5 20.4 0 23.4 0 28.2 0 32 3.8 32 8.7 32 15.5 26 21 16 29z' fill='%23C9357F'/%3E%3C/svg%3E") center 55% / min(8.4cqi, 4.5cqb) auto no-repeat;
}

.countdown {
  display: flex;
  align-items: stretch;
  padding: 1.4cqb 2cqi;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ivory);
}
.countdown__unit {
  position: relative;
  width: min(16cqi, 8.5cqb);
  display: flex; flex-direction: column; align-items: center;
}
.countdown__unit + .countdown__unit::before {   /* little gold diamond between units */
  content: "";
  position: absolute; left: 0; top: 34%;
  width: 4px; height: 4px;
  background: var(--gold);
  transform: translate(-50%, -50%) rotate(45deg);
}
.countdown__num {
  font-family: var(--f-baskerville);
  font-weight: 400;
  font-size: min(6.6cqi, 3.5cqb);
  line-height: 1.15;
  color: var(--pink);
  font-variant-numeric: tabular-nums lining-nums;
}
.countdown__label {
  margin-top: .3cqb;
  font-family: var(--f-josefin);
  font-weight: 600;
  font-size: clamp(10px, min(2.7cqi, 1.4cqb), 11px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pink);
}
/* After the wedding */
.married { position: relative; text-align: center; }
.married__title {
  font-family: var(--f-baskerville);
  font-weight: 700;
  font-size: min(7.4cqi, 3.9cqb);
  line-height: 1.2;
  letter-spacing: .03em;
  color: var(--green);
}
.married__sub {
  margin: .8cqb 0 1.8cqb;
  font-family: var(--f-josefin);
  font-weight: 600;
  font-size: clamp(10px, min(2.7cqi, 1.4cqb), 11px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pink);
}
.married__count {
  display: inline-flex; align-items: baseline; gap: .45em;
  padding: .8cqb 5cqi;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--f-baskerville);
  font-size: min(3.8cqi, 2cqb);
  color: var(--green);
}
.married__count strong {
  font-weight: 400;
  font-size: 1.5em;
  color: var(--pink);
  font-variant-numeric: lining-nums;
}
.married__hearts { position: absolute; inset: -40% -10%; pointer-events: none; }
.married__hearts i {
  position: absolute; bottom: 0;
  width: 12px; height: 12px;
  background: var(--pink);
  transform: rotate(45deg);
  opacity: 0;
  animation: rise 5s ease-in infinite;
}
.married__hearts i::before,
.married__hearts i::after {
  content: ""; position: absolute;
  width: 12px; height: 12px; border-radius: 50%;
  background: inherit;
}
.married__hearts i::before { left: -6px; }
.married__hearts i::after  { top: -6px; }
@keyframes rise {
  0%   { opacity: 0; transform: translateY(0) rotate(45deg) scale(.6); }
  15%  { opacity: .7; }
  100% { opacity: 0; transform: translateY(-160px) rotate(45deg) scale(1); }
}

/* --------------------------------------------------------------------------
   3 · Invitation
   -------------------------------------------------------------------------- */
.invite .art--top {
  height: 38.5%;                         /* 43% scaled to the width between the borders, so the same picture shows */
  object-fit: cover;
  object-position: center top;
}
.content--low { justify-content: flex-end; padding-bottom: max(calc(env(safe-area-inset-bottom) + 9cqb), 9cqb); }
.invite__lead {
  max-width: 30ch;
  margin-bottom: 2cqb;
  font-family: var(--f-baskerville);
  font-size: min(3.6cqi, 1.9cqb);
  line-height: 1.7;
  color: var(--ink);
}
.invite__name {
  margin: 0;
  font-family: var(--f-baskerville);
  font-weight: 700;
  font-size: min(6.6cqi, 3.5cqb);
  line-height: 1.15;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--green);
}
.invite__parents {
  margin-top: .5cqb;
  white-space: nowrap;
  font-family: var(--f-baskerville);
  font-size: min(3.25cqi, 1.75cqb);
  line-height: 1.45;
  color: var(--ink);
}
.invite__with {
  display: flex; align-items: center; gap: 10px;
  margin: 1.4cqb 0;
  font-family: var(--f-label);
  font-weight: 500;
  font-size: clamp(11px, min(2.9cqi, 1.5cqb), 12px);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--pink);
}
.invite__with span { width: 28px; height: 1px; background: var(--line); }
.invite__when {
  margin-top: 2.4cqb;
  padding-top: 1.6cqb;
  border-top: 1px solid var(--line);
  font-family: var(--f-baskerville);
  font-size: min(3.45cqi, 1.85cqb);
  line-height: 1.6;
  color: var(--ink);
}
.invite__day {
  display: block;
  margin-bottom: .4cqb;
  font-family: var(--f-josefin);
  font-weight: 600;
  font-size: clamp(10px, min(2.9cqi, 1.5cqb), 12px);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.invite__time { margin-bottom: .6cqb; color: var(--pink); }
.invite__when strong { font-weight: 700; color: var(--pink); }

/* --------------------------------------------------------------------------
   4 · Events
   -------------------------------------------------------------------------- */
.events .art--top    { width: calc(100% - 2 * var(--bd)); height: auto; }   /* garland runs border to border */
.events .art--bottom { width: calc(100% - 2 * var(--bd)); height: auto; }   /* whole basket scene, no crop, no fade */
/* between the borders the garland is 41cqi tall and the basket scene 64.6cqi */
.events { --scene-reserve: .8; }   /* text stays above the top 80% of the basket scene, clear of the rising banana leaves */
.events .content { padding-top: calc(41cqi + 3.4cqb); padding-bottom: calc(64.6cqi * var(--scene-reserve) + 1.5cqb); }
/* the heading block, both events and the divider share the space between the garland and the
   baskets equally, so on tall phones they spread out instead of bunching under the garland;
   the gap is the minimum spacing on short phones */
.events .content { justify-content: space-evenly; gap: 2.2cqb; }
.events .section-heading { font-size: min(4.35cqi, 2.4cqb); }   /* a touch smaller so the one-line heading clears the borders */
.section-heading {
  margin: 0 -6cqi;                      /* headings may run a little wider than body text, so it stays on one line */
  font-family: var(--f-baskerville);
  font-weight: 700;
  font-size: min(4.6cqi, 2.4cqb);      /* same as the Section 4 event names */
  line-height: 1.25;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--green);
}
.events__date {                         /* matches the date line in Section 3 */
  margin: .6cqb 0 0;
  font-family: var(--f-josefin);
  font-weight: 600;
  font-size: clamp(10px, min(2.9cqi, 1.5cqb), 12px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pink);
}

.event {
  width: 100%;
  max-width: 300px;
}
.events__divider {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0;
}
.events__divider span { width: 46px; height: 1px; background: var(--pink); }
.events__divider i { width: 6px; height: 6px; background: var(--pink); transform: rotate(45deg); }
.event__name {
  margin: 0;
  font-family: var(--f-baskerville);
  font-weight: 700;
  font-size: min(4.6cqi, 2.4cqb);
  line-height: 1.25;
  letter-spacing: .03em;
  color: var(--green);
}
.event__meta {
  margin-top: .6cqb;
  font-family: var(--f-josefin);
  font-weight: 600;
  font-size: clamp(11px, min(2.9cqi, 1.5cqb), 12px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pink);
}
.event__meta span { margin: 0 .3em; }
.event__meta + .dresscode { margin-top: 1.4cqb; }   /* space between time/venue and the attire swatches */

.dresscode {
  margin-bottom: .8cqb;
  font-family: var(--f-josefin);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--pink);
}
.swatches {
  display: flex; justify-content: center; gap: 10px;
  margin: 0; padding: 0; list-style: none;
}
.swatches li {
  --size: min(5.6cqi, 3cqb);
  width: var(--size); height: var(--size);
  border-radius: 50%;
  background: var(--c);
}
.swatches li.swatch--white { box-shadow: inset 0 0 0 1px #DDD3C2; }   /* hairline so white shows on the white page */

/* Glitz & glam: rainbow and silver-gold sequins, the rest plain */
.swatches--glam .swatch--rainbow    { background: url("../img/glitter-rainbow.webp") center / cover no-repeat; }
.swatches--glam .swatch--silvergold { background: url("../img/glitter-silvergold.webp") center / cover no-repeat; }   /* half silver, half gold sequins */

/* --------------------------------------------------------------------------
   5 · Story — heading, illustrated journey, square photo slideshow
   -------------------------------------------------------------------------- */
.story {
  --lead-size: min(3.6cqi, 1.9cqb);       /* same as "With great pride and joy…" in Section 3 */
  /* journey (1 : 1.116) and slideshow (square) share one width; the three-line lead, the gaps
     and a band at the bottom for the butterfly are reserved first */
  --sq: min(76cqi, calc((100cqb - 3 * 1.7 * var(--lead-size) - 23.2cqb - 17.4cqi) / 2.116));   /* 17.4cqi = butterfly height */
}
.content--story { justify-content: flex-start; padding-top: 8.7cqb; padding-bottom: 0; gap: 2.2cqb; }
.story__lead {
  max-width: 76cqi;
  margin: 0 0 3.5cqb;                      /* extra breathing room before the timeline */
  text-wrap: balance;
  font-family: var(--f-baskerville);
  font-size: var(--lead-size);
  line-height: 1.7;
  color: var(--ink);
}
.story__butterfly {
  position: absolute; z-index: 1;
  height: auto;
  pointer-events: none;
}
/* small one in the top-left corner, just inside the border and above the opening text */
.story__butterfly--top {
  left: calc(var(--bd, 0px) + 1.5cqi); top: 2.5cqb;
  width: 8.5cqi;
  transform: scaleX(-1) rotate(-8deg);
}
/* the usual size, bottom-right below the photos (diagonal to the text), just left of the previous / next buttons
   (which sit 6px inside the border and are 44px wide) */
.story__butterfly--bottom {
  right: calc(var(--bd, 0px) + 56px); bottom: max(calc(env(safe-area-inset-bottom) + 10px), 10px);
  width: 17cqi;
}

.journey { display: block; width: var(--sq); height: auto; margin-bottom: 2.6cqb; }   /* extra space before the photos */

.slideshow {
  position: relative;
  width: var(--sq); height: var(--sq);
  border-radius: 14px;
  overflow: hidden;
  background: #F4F1EC;
  box-shadow: 0 8px 20px -14px rgba(47, 61, 28, .3);   /* softened */
  touch-action: pan-y;                /* vertical swipes still move the page */
  cursor: pointer;
  user-select: none;
}
.slideshow__slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s ease;
  -webkit-user-drag: none;
}
.slideshow__slide.is-current { opacity: 1; }
.slideshow__dots {
  position: absolute; left: 0; right: 0; bottom: 8px;
  display: flex; justify-content: center; gap: 2px;
}
.slideshow__dots button {
  width: 14px; height: 18px;
  padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.slideshow__dots button::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  box-shadow: 0 0 2px rgba(0, 0, 0, .5);
  transition: transform .3s ease, background-color .3s ease;
}
.slideshow__dots button[aria-current="true"]::before { background: #fff; transform: scale(1.4); }
.slideshow__dots button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 4px; }

/* --------------------------------------------------------------------------
   6 · Closing
   -------------------------------------------------------------------------- */
.closing .art--top    { max-height: 13%; }   /* smaller garland so a two-line message clears its strands */
.closing .art--bottom { width: calc(100% - 2 * var(--bd)); height: auto; }   /* whole elephant scene between the borders, no crop, no fade */

/* Fixed layout: the pin sits 24.5% down the screen with the card right below it;
   the two-line message is placed a clear gap above the pin. */
.closing {
  --msg-size: min(3.6cqi, 1.9cqb);        /* same as "With great pride and joy…" in Section 3 */
  --msg-lh: 1.65;
  --msg-gap: 4cqb;                        /* space between the message and the pin */
}
.closing .content {
  justify-content: flex-start;
  padding-top: calc(24.5cqb - 2 * var(--msg-lh) * var(--msg-size) - var(--msg-gap));
  padding-bottom: 0;
}
.closing__msg {
  max-width: 82cqi;                       /* wide enough for exactly two lines */
  text-wrap: balance;
  margin-bottom: var(--msg-gap);
  font-family: var(--f-baskerville);
  font-size: var(--msg-size);
  line-height: var(--msg-lh);
  color: var(--ink);
}

/* Venue card: same size and finish as the Section 5 slideshow */
.closing { --sq: min(78cqi, calc((100cqb - 34cqb) / 2.116)); }
.venue {
  flex: none;                           /* never squeezed: always the same size as the slideshow */
  display: flex; flex-direction: column;
  width: var(--sq); height: var(--sq);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--pink);                              /* thin pink outline (#C9357F) */
  box-shadow: 0 8px 20px -14px rgba(47, 61, 28, .3);           /* softened */
  text-decoration: none;
  color: inherit;
}
.venue__map { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.venue__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Location pin: centred above the venue card */
.venue-pin {
  flex: none;
  width: 3.5cqi; height: auto;
  margin: 0 0 1.2cqb;
}
.venue__panel {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 8px; row-gap: .5cqb;
  padding: 1.3cqb 4cqi 1.5cqb;
  border-top: 1px solid #E7B8A4;          /* soft terracotta hairline under the illustration */
  text-align: left;
  text-shadow: none;
  container-type: inline-size;
}
.venue__place { display: contents; }
.venue__place strong {
  grid-column: 1 / -1;
  font-family: var(--f-baskerville);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--green);
}
.venue__place small {
  grid-column: 1;
  font-family: var(--f-josefin);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--pink);
}
.venue__cta {
  grid-column: 2; grid-row: 2;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 8px;
  border-radius: 999px;
  background: #A64D62;                    /* muted berry */
  color: #fff;
  font-family: var(--f-josefin);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.venue__cta svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@container (max-width: 190px) {          /* smallest phones: arrow-only button so the date keeps its room */
  .venue__place strong { font-size: 13px; }
  .venue__cta { padding: 6px 7px; }
  .venue__cta-text { display: none; }
}
.venue:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; }

.signoff {                              /* smaller, resting just above the elephants' heads */
  position: absolute; left: 0; right: 0;
  bottom: calc(66.3cqi * .70 + 3cqb);     /* the elephants start 30% down the scene, 66.3cqi tall between the borders; a clear gap above them */
  margin: 0;
  font-family: var(--f-baskerville);
  font-size: min(3.1cqi, 1.65cqb);
  line-height: 1.5;
  color: var(--ink);
}

/* Falling petals */
.petals { position: absolute; inset: 0; z-index: 15; pointer-events: none; overflow: hidden; }
.petals i {
  position: absolute; top: -30px;
  width: 12px; height: 9px;
  border-radius: 150% 0 150% 0;
  background: linear-gradient(135deg, #F7BFCC, var(--lotus));
  opacity: .8;
  animation: fall linear infinite;
}
@keyframes fall {
  0%   { transform: translate(0, 0) rotate(0); }
  50%  { transform: translate(var(--drift, 30px), 55cqb) rotate(200deg); }
  100% { transform: translate(0, 112cqb) rotate(400deg); }
}

/* --------------------------------------------------------------------------
   Controls: section dots, music, previous / next
   -------------------------------------------------------------------------- */
.dots {
  position: absolute; z-index: 20;
  right: 8px; top: 50%;
  translate: 0 -50%;
  display: flex; flex-direction: column; gap: 2px;
}
.dots button {
  width: 24px; height: 24px;
  padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.dots button::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--mint-deep);
  background: var(--ivory);
  transition: all .3s ease;
}
.dots button:hover::before { background: var(--mint-light); }
.dots button[aria-current="true"]::before { height: 18px; border-radius: 4px; background: var(--mint-deep); }
.frame.on-hero .dots button::before { border-color: var(--mint-light); background: transparent; }
.frame.on-hero .dots button[aria-current="true"]::before { background: var(--mint-light); }

.ctrl {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--mint);
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: var(--ink);
  cursor: pointer;
  transition: transform .15s ease, background-color .2s ease, color .2s ease;
}
.ctrl:hover { background: var(--ivory); }
.ctrl:active { transform: scale(.92); }
.ctrl:focus-visible { outline: 2px solid var(--mint-deep); outline-offset: 3px; }
.ctrl svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; }
.frame.on-hero .ctrl { background: rgba(28, 34, 18, .55); border-color: rgba(195, 238, 220, .8); color: #FFF8EA; }

.sound {
  position: absolute; z-index: 20;
  left: 10px; bottom: max(calc(env(safe-area-inset-bottom) + 12px), 12px);
}
.sound__on path:first-child, .sound__off path:first-child { fill: currentColor; }
.sound__off { display: none; }
.sound[aria-pressed="true"] .sound__on { display: none; }
.sound[aria-pressed="true"] .sound__off { display: block; }

.pager {
  position: absolute; z-index: 20;
  right: 10px; bottom: max(calc(env(safe-area-inset-bottom) + 12px), 12px);
  display: flex; flex-direction: column; gap: 8px;
}
.pager .ctrl:disabled { visibility: hidden; }

/* on the bordered pages (everything after the video), the controls step in just inside the side borders */
.dots, .sound, .pager { transition: left .3s ease, right .3s ease; }
.frame:not(.on-hero) .dots  { right: calc(5.2cqi + 1px); }
.frame:not(.on-hero) .sound { left: calc(5.2cqi + 6px); }
.frame:not(.on-hero) .pager { right: calc(5.2cqi + 6px); }

/* --------------------------------------------------------------------------
   Short / wide frames
   -------------------------------------------------------------------------- */
@container frame (max-aspect-ratio: 9/17) {
  .invite .art--top { height: 40.3%; }
}
@container frame (min-aspect-ratio: 10/16) {
  .date .art--top, .date .art--bottom { max-height: 25%; }
  .invite .art--top { height: 33.2%; }
}

/* --------------------------------------------------------------------------
   Phones held sideways: the portrait card would be too small to read
   -------------------------------------------------------------------------- */
.rotate-note { display: none; }
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  .rotate-note {
    position: fixed; inset: 0; z-index: 100;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: var(--ivory);
    text-align: center;
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
  }
  .rotate-note svg { width: 56px; height: 56px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .petals { display: none; }
}