:root {
  /* Color styles */
  --brown: rgba(128, 73, 0, 1);
  --paper-border: rgba(139, 95, 48, 1);

  /* Font families */
  --font-primary: 'Fraunces', serif;
  --font-secondary: 'Sora', sans-serif;

  /* Font-weight styles */
  --font-light: 300;
  --font-regular: 400;
  --font-semi-bold: 600;

  /* Font-style styles */
  --font-normal: normal;
  --font-italic: italic;

  /* Text styles — full `font` shorthands: [style] [weight] [size] [family] */
  --primary--h2-b: var(--font-semi-bold) 44px var(--font-primary);
  --primary--h1-i: var(--font-italic) var(--font-regular) 50px var(--font-primary);
  --primary--h3-b: var(--font-semi-bold) 40px var(--font-primary);
  --primary--h3-i: var(--font-italic) var(--font-regular) 40px var(--font-primary);
  --primary--h3-li: var(--font-italic) var(--font-light) 40px var(--font-primary);
  --primary--b1: var(--font-semi-bold) 40px var(--font-primary);
  --primary--b1-b: var(--font-semi-bold) 32px var(--font-primary);
  --primary--b1-i: var(--font-italic) var(--font-regular) 32px var(--font-primary);
  --primary--b2-b: var(--font-semi-bold) 24px var(--font-primary);
  --primary--b3-r: var(--font-regular) 24px var(--font-primary);
  --primary--b3-i: var(--font-italic) var(--font-regular) 24px var(--font-primary);
  --primary--b3-b: var(--font-semi-bold) 24px var(--font-primary);
  --primary--b4-r: var(--font-regular) 20px var(--font-primary);
  --primary--b5-r: var(--font-regular) 18px var(--font-primary);
  --primary--b6-r: var(--font-regular) 18px var(--font-primary);
  --primary--secondary--b2-r: var(--font-regular) 28px var(--font-secondary);
  --primary--secondary--b3-r: var(--font-regular) 24px var(--font-secondary);
  --primary--secondary--b4-r: var(--font-regular) 20px var(--font-secondary);

  /* Effect styles */
  --invi-card-shadow: 0px 14px 31px rgba(0, 0, 0, 0.1), 0px 56px 56px rgba(0, 0, 0, 0.09), 0px 125px 75px rgba(0, 0, 0, 0.05), 0px 222px 89px rgba(0, 0, 0, 0.01), 0px 347px 97px rgba(0, 0, 0, 0);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Ensure the hidden attribute always wins, even over display:flex/grid rules */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

/* Lenis smooth-scroll integration */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

body {
  font-family: 'Sora', sans-serif;
  color: var(--brown);
  background: #ffffff;
}

/* ---------- Scene / screen shell ---------- */
/* The scene is taller than the viewport so the pinned screen has scroll room */
.scene--welcome {
  position: relative;
  height: 280vh;
  /* room for blessing → invitation → names */
}

@media (pointer: coarse) {
  .scene--welcome {
    height: 220vh;
  }
}

.screen {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.screen__bg {
  --bg-scale: 1.12;
  /* slight overscan; bumped on reveal for a gentle zoom-in */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  user-select: none;
  pointer-events: none;
  /* scale (CSS) is separate from translate (JS parallax), so the reveal zoom
     can transition without disturbing the mouse parallax. */
  scale: var(--bg-scale);
  transition: scale 0.9s ease-out;
  will-change: transform, scale;
}

/* Background zooms in slightly as the names are revealed */
.screen--welcome.is-revealed .screen__bg {
  --bg-scale: 1.19;
}

/* Side florals — pinned to their edges, full height, above the card.
   --floral-shift = per-breakpoint edge slide, --floral-zoom = scroll zoom */
.screen__floral {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  z-index: 3;
  user-select: none;
  pointer-events: none;
  --floral-shift: 0px;
  --floral-zoom: 1;
  transition: transform 0.9s ease-out;
}

/* Florals zoom in a bit more than the background on reveal */
.screen--welcome.is-revealed .screen__floral {
  --floral-zoom: 1.16;
}

/* White fade strip pinned to the bottom of the bg, above the florals.
   Scales with the background (transform driven by JS) but stays bottom-aligned. */
.screen__gradient {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: 4;
  pointer-events: none;
  user-select: none;
  transform: scale(1.12);
  /* matches .screen__bg baseline; JS keeps it in sync */
  transform-origin: bottom center;
  will-change: transform;
}

.screen__floral--left {
  left: 0;
  transform-origin: left center;
  transform: translateX(var(--floral-shift)) scale(var(--floral-zoom));
}

.screen__floral--right {
  right: 0;
  transform-origin: right center;
  transform: translateX(var(--floral-shift)) scale(var(--floral-zoom));
}

/* ---------- Invitation paper ---------- */
.invite {
  --card-radius: 28px;
  position: relative;
  z-index: 2;
  width: min(46vw, 500px);
  /* The paper hugs its contents (like .invite--detail does). It used to be
     height: calc(100vh - 300px) — a viewport-sized box the content had no say
     in, so on a short screen the blessing simply spilled through the keyline.
     An explicit height also silently beat the aspect-ratio the ≤900px rule
     sets, so that never actually took effect either. */
  height: auto;
  background-image: url('media/invitation-paper.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: var(--card-radius);
  /* --invi-card-shadow, layer by layer so it follows the paper's shape */
  filter: drop-shadow(0px 14px 31px rgba(0, 0, 0, 0.1)) drop-shadow(0px 56px 56px rgba(0, 0, 0, 0.09)) drop-shadow(0px 125px 75px rgba(0, 0, 0, 0.05)) drop-shadow(0px 222px 89px rgba(0, 0, 0, 0.01)) drop-shadow(0px 347px 97px rgba(0, 0, 0, 0));
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Gold double-keyline border, hugging the rounded card edge */
.invite::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--paper-border);
  border-radius: var(--card-radius);
  pointer-events: none;
  z-index: 1;
}

.invite::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(139, 95, 48, 0.55);
  /* --paper-border, softened inner line */
  border-radius: calc(var(--card-radius) - 4px);
  pointer-events: none;
  z-index: 1;
}

.invite__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 12% 14% 14%;
  text-align: center;
  /* Stack the two screens in the same cell so they crossfade in place */
  display: grid;
  place-items: center;
}

/* Both screens share one grid cell; the card sizes to the taller of the two,
   so swapping between them is a pure opacity crossfade with no layout shift. */
.invite__screen {
  grid-area: 1 / 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity 1s ease;
}

/* Blessing: visible first, fades out on scroll */
.invite__bless {
  opacity: 1;
}

.screen--welcome.show-invite .invite__bless {
  opacity: 0;
  pointer-events: none;
}

/* Invitation: hidden first, fades in on scroll */
.invite__welcome {
  opacity: 0;
  pointer-events: none;
}

.screen--welcome.show-invite .invite__welcome {
  opacity: 1;
  pointer-events: auto;
}

.invite__ganesha {
  display: block;
  width: 80%;
  max-width: 150px;
  height: auto;
  margin: 0 auto 4%;
  user-select: none;
}

.invite__blessing {
  font-family: 'Yatra One', var(--font-primary);
  font-size: clamp(26px, 4.6vw, 40px);
  line-height: 1.25;
  color: var(--brown);
  margin-bottom: 8%;
}

.invite__divider {
  width: 80%;
  height: auto;
  margin-bottom: 8%;
  user-select: none;
}

/* In the blessing screen the divider sits below the text, not above */
.invite__bless .invite__divider {
  margin-bottom: 0;
  margin-top: 4%;
}

/* ---------- Scroll cue ---------- */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 3.5vh;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--brown);
  pointer-events: none;
  user-select: none;
  opacity: 0;
  animation: cue-in 0.8s ease 1s forwards, cue-bob 1.8s ease-in-out 1.8s infinite;
}

.scroll-cue__label {
  font: var(--font-regular) 13px var(--font-secondary);
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.scroll-cue__chevron {
  width: 16px;
  height: 16px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.85;
}

/* Fade the cue away as soon as the guest scrolls into the reveal */
.screen--welcome.show-invite .scroll-cue {
  opacity: 0;
  animation: none;
  transition: opacity 0.5s ease;
}

@keyframes cue-in {
  to {
    opacity: 0.9;
  }
}

/* Gentle vertical bob while idle */
@keyframes cue-bob {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue {
    animation: cue-in 0.8s ease 1s forwards;
  }
}

.invite__to {
  font: var(--primary--h3-b);
  margin-bottom: 4%;
}

.invite__message {
  font: var(--primary--b4-r);
}

/* Welcome card: crossfades out when the screen gets .is-revealed (one scroll) */
.invite {
  transform-origin: center;
  will-change: opacity, transform;
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.33, 0, 0.2, 1);
}

.screen--welcome.is-revealed .invite {
  opacity: 0;
  transform: scale(0.94);
  pointer-events: none;
}

/* ---------- Names reveal (one-scroll crossfade) ---------- */
.reveal {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6%;
  text-align: center;
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  will-change: opacity, transform;
  transition: opacity 1.2s ease 0.2s, transform 1.2s cubic-bezier(0.33, 0, 0.2, 1) 0.2s;
}

.screen--welcome.is-revealed .reveal {
  opacity: 1;
  transform: translateY(0);
}

.reveal__names {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05em;
  font: var(--font-semi-bold) 96px var(--font-primary);
  line-height: 1.05;
  color: var(--brown);
}

.reveal__amp {
  font: var(--font-italic) var(--font-regular) 96px var(--font-primary);
}

/* ---------- Details scene (family intro + fountain) ---------- */
.scene--details {
  position: relative;
  background: #ffffff;
  padding: 80px 0 0;
  overflow: hidden;
}

/* Blue watercolour wash behind the first card */
.details__wash {
  position: absolute;
  top: 160px;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* Rose vines draping down either side of the family cards */
.details__vine {
  position: absolute;
  top: 60px;
  height: auto;
  width: min(24vw, 240px);
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

.details__vine--left {
  left: 0;
}

.details__vine--right {
  right: 0;
}

.details__cards {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  padding: 0 24px 0px;
}

/* Detail cards reuse the paper + keyline border, but size to their content */
.invite--detail {
  position: relative;
  z-index: 1;
  width: min(92vw, 660px);
  height: auto;
  aspect-ratio: auto;
}

.invite--detail .invite__inner {
  padding: 9% 12%;
  gap: 1.4em;
}

.detail__name {
  font: var(--primary--h3-b);
  line-height: 1.1;
  margin-bottom: 0.3em;
}

.detail__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25em;
}

.detail__label {
  font: var(--primary--b4-r);
  opacity: 0.85;
}

.detail__person {
  font: var(--primary--b3-b);
  line-height: 1.2;
}

.detail__amp {
  font: var(--font-italic) var(--font-regular) 20px var(--font-primary);
}

.detail__gotra {
  font: var(--primary--b5-r);
  opacity: 0.85;
  margin-top: 0.4em;
}

/* Fountain video: fills the full width, height keeps the aspect ratio (no crop,
   no overflow). */
.details__fountain {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  pointer-events: none;
  /* strip any default video border / outline / edge background */
  border: 0;
  outline: 0;
  background: transparent;
}

/* White gradient fading the bottom edge of the video */
.fountain__fade {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

/* ---------- Date reveal (brush the petals) ---------- */
.scene--date {
  position: relative;
  min-height: 100vh;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  overflow: hidden;
}

.date__hint {
  font: var(--font-italic) var(--font-regular) 28px var(--font-primary);
  color: var(--brown);
  text-align: center;
  line-height: 1.35;
  transition: opacity 0.8s ease;
}

.date__hint.is-hidden {
  opacity: 0;
}

/* The interactive stage — petals sit on top, the date underneath */
.petal-stage {
  position: relative;
  width: 100%;
  max-width: 1000px;
  height: min(640px, 72vh);
  touch-action: none;
  /* let brushing work without scrolling the page */
}

/* The date sits beneath the petals from the start — brushing reveals glimpses
   of it, hinting that there's something to uncover. */
.date-card {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: min(680px, 86%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  color: var(--brown);
  transform: translate(-50%, -50%);
}

/* Once fully uncovered, a gentle pop draws the eye to the date */
.date-card.is-revealed {
  animation: date-pop 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes date-pop {
  0% {
    transform: translate(-50%, -50%) scale(0.97);
  }

  55% {
    transform: translate(-50%, -50%) scale(1.035);
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

.date__main {
  font: var(--font-semi-bold) 72px var(--font-primary);
  line-height: 1.05;
}

/* "Save the Date" — sits below the date, click to add to calendar */
.date__save {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border: 1.5px solid var(--brown);
  border-radius: 999px;
  background: transparent;
  color: var(--brown);
  font: var(--font-italic) var(--font-regular) 18px var(--font-primary);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.date__save:hover,
.date__save:focus-visible {
  background: var(--brown);
  color: #fffdf8;
}

.date__cal {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.date__main sup {
  font-size: 0.45em;
  vertical-align: super;
}


/* Petal layer + individual petals */
.petal-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.petal {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: auto;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform, opacity;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Keepers drift into a ring around the date and stay visible */
.petal.is-flying {
  transition: transform 1.7s cubic-bezier(0.16, 0.8, 0.3, 1);
  pointer-events: none;
}

/* The rest fly off every edge of the screen and fade out */
.petal.is-gone {
  transition: transform 1.6s cubic-bezier(0.3, 0.7, 0.25, 1), opacity 1.4s ease;
  opacity: 0;
  pointer-events: none;
}

/* Ambient petals that keep drifting down past the revealed date */
.petal--drift {
  pointer-events: none;
  transition: none;
  animation-name: petal-drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes petal-drift {
  0% {
    transform: translate(0, -80px) rotate(0deg);
    opacity: 0;
  }

  8% {
    opacity: 0.9;
  }

  92% {
    opacity: 0.9;
  }

  100% {
    transform: translate(var(--sway), var(--fall)) rotate(var(--spin));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .date-card {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition: none;
  }
}

/* ---------- Scroll reveal: rise & fade card + staggered inner content ---------- */
/* Card lifts and fades in when it scrolls into view (.is-visible added by JS) */
.invite--detail {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.invite--detail.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Inner lines start lower/hidden, then cascade in after the card settles */
.invite--detail .invite__inner>* {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.invite--detail.is-visible .invite__inner>* {
  opacity: 1;
  transform: translateY(0);
}

.invite--detail.is-visible .invite__inner>*:nth-child(1) {
  transition-delay: 0.25s;
}

.invite--detail.is-visible .invite__inner>*:nth-child(2) {
  transition-delay: 0.37s;
}

.invite--detail.is-visible .invite__inner>*:nth-child(3) {
  transition-delay: 0.49s;
}

.invite--detail.is-visible .invite__inner>*:nth-child(4) {
  transition-delay: 0.61s;
}

.invite--detail.is-visible .invite__inner>*:nth-child(5) {
  transition-delay: 0.73s;
}

/* Respect users who prefer no motion — reveal instantly */
@media (prefers-reduced-motion: reduce) {

  .invite--detail,
  .invite--detail .invite__inner>* {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Responsive: tablet / mobile portrait ---------- */
@media (max-width: 900px) {

  /* Florals keep their full height, but slide off their side of the screen */
  .screen__floral--left {
    --floral-shift: -40%;
  }

  .screen__floral--right {
    --floral-shift: 50%;
  }

  /* Paper narrows, but still hugs its contents — no fixed ratio to overflow */
  .invite--welcome,
  .screen--welcome .invite {
    width: min(50vw, 360px);
    aspect-ratio: auto;
  }

  /* Detail cards stay wide and content-sized */
  .invite--detail {
    width: min(88vw, 560px);
    aspect-ratio: auto;
  }

  .invite--detail .detail__name {
    font-size: 30px;
  }

  .invite--detail .detail__person {
    font-size: 20px;
  }

  /* Vertical padding was 0 because the old fixed-height box faked the breathing
     room by centring. Now that the paper hugs, the padding IS the margin. */
  .screen--welcome .invite__inner {
    padding: 10% 12% 12%;
  }

  .invite__divider {
    width: 100%;
    margin-bottom: 12%;
  }

  .invite__to {
    font-size: 32px;
  }

  .invite__message {
    font-size: 17px;
  }

  .reveal__names,
  .reveal__amp {
    font-size: 60px;
  }

  .date__main {
    font-size: 52px;
  }

  .date__hint,
  .date__save {
    font-size: 16px;
  }

  .date__save {
    padding: 6px 12px;
  }

  .date__sub {
    font-size: 19px;
  }
}

/* Tablet: florals sit only 25% off their side of the screen */
@media (min-width: 450px) and (max-width: 900px) {
  .screen__floral--left {
    --floral-shift: -25%;
  }

  .screen__floral--right {
    --floral-shift: 25%;
  }
}

@media (max-width: 560px) {
  .screen--welcome .invite {
    width: 85vw;
  }

  .invite__to {
    font-size: 28px;
  }

  .invite__message {
    font-size: 15px;
  }

  .reveal__names,
  .reveal__amp {
    font-size: 52px;
  }

  .invite--detail .detail__name {
    font-size: 26px;
  }

  .invite--detail .detail__person {
    font-size: 18px;
  }

  .date__main {
    font-size: 40px;
  }
}

/* ---------- Photo gallery (hanging polaroids) ---------- */
.scene--gallery {
  --gallery-h: 900px;
  /* height the hanging polaroids need */
  position: relative;
  height: auto;
  /* hug the contents */
  background: url('media/gallery-bg.webp') center / cover no-repeat;
  overflow: hidden;
}

/* Desktop only: soft fade on the left & right edges so polaroids melt away */
@media (min-width: 701px) {

  .scene--gallery::before,
  .scene--gallery::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 320px;
    z-index: 5;
    pointer-events: none;
  }

  .scene--gallery::before {
    left: 0;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
  }

  .scene--gallery::after {
    right: 0;
    background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
  }
}

/* Horizontal scroller — drag or swipe to move the rope */
.gallery__scroll {
  position: relative;
  width: 100%;
  height: var(--gallery-h);
  /* defines the section's height */
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* vertically centre the hanging content within the section */
  display: flex;
  align-items: center;
}

.gallery__scroll::-webkit-scrollbar {
  display: none;
}

.gallery__scroll.is-dragging {
  cursor: grabbing;
}

.gallery__track {
  position: relative;
  width: 3500px;
  height: 750px;
  /* content height — centred within the taller section */
  flex: 0 0 auto;
  /* don't let the flex scroller shrink it */
  /* rope sits a little below the top */
  --rope-y: 90px;
}

/* The rope: a thin full-width bar with a gradient (rod look) + drop shadow */
.gallery__rope {
  position: absolute;
  top: var(--rope-y);
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(to bottom, #cc9d6b 0%, #8b5f30 50%, #442f18 100%);
  box-shadow: 24px 24px 30px 0 rgba(0, 0, 0, 0.25);
  pointer-events: none;
  user-select: none;
  z-index: 1;
}


/* Each hanging unit: knot + rope line + card, swinging from the rope */
.polaroid {
  position: absolute;
  top: var(--rope-y);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: top center;
  /* pivot on the rope */
  z-index: 2;
  will-change: transform;
}

.polaroid__knot {
  width: 100px;
  height: auto;
  /* The knot blob sits at the very top of the PNG (~12px down at 100px wide);
     lift the image so the knot rests on top of the horizontal rope, with the
     vertical rope hanging down from it. */
  margin-top: -9px;
  margin-bottom: -6px;
  z-index: 1;
  user-select: none;
  /* The rope sits at ~38% of the PNG's width, not 50% — nudge it to the
     card's centre (0.5 - 0.382 = 11.8% of the knot's own width). */
  transform: translateX(11.8%);
}

/* The polaroid card itself — sits in front of the hanging rope */
.polaroid__card {
  position: relative;
  z-index: 2;
  background: #fffdf8;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.1);
}

.polaroid--photo {
  width: 300px;
  padding: 14px 14px 10px;
  margin: 0;
}

.polaroid__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  background:
    linear-gradient(135deg, #e9e6df, #d9d5cc);
  background-size: cover;
  background-position: center;
}

.polaroid__caption {
  display: block;
  margin-top: 12px;
  text-align: center;
  font: var(--font-italic) var(--font-regular) 20px var(--font-primary);
  color: var(--brown);
}

.polaroid--story {
  /* match the photo polaroid's footprint */
  width: 300px;
  min-height: 425px;
  padding: 34px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: url('media/handmade_paper.webp') center / cover no-repeat;
}

.polaroid--story p {
  font: var(--primary--b5-li);
  line-height: 1.7;
  color: var(--brown);
}

/* Horizontal postcard — landscape card hanging from the rope */
.polaroid--postcard {
  width: 420px;
  padding: 14px 14px 10px;
  margin: 0;
}

.polaroid--postcard .polaroid__photo {
  aspect-ratio: 3 / 2;
  /* landscape instead of the portrait 3/4 */
}

/* Mobile: one polaroid at a time — a full-width scroll-snap carousel */
@media (max-width: 700px) {
  .scene--gallery {
    --rope-y: 64px;
    --gallery-h: 760px;
    /* the bigger mobile cards need a touch more room */
  }

  .gallery__scroll {
    scroll-snap-type: x mandatory;
  }

  /* Track becomes a row of full-viewport slides */
  .gallery__track {
    display: flex;
    width: max-content;
    height: 100%;
  }

  /* Each polaroid is now a centred slide (inline `left` is ignored: static) */
  .polaroid {
    position: static;
    flex: 0 0 100vw;
    height: 100%;
    /* match the rope's anchor so the knot lands on it (was a fixed 50px) */
    padding-top: var(--rope-y);
    scroll-snap-align: center;
    transform-origin: center var(--rope-y);
    /* swing pivots on the rope */
  }

  .polaroid--photo,
  .polaroid--story {
    width: min(80vw, 340px);
  }

  .polaroid--postcard {
    width: min(90vw, 420px);
  }

  /* Match the photo card's overall height (≈1.42 × its width) */
  .polaroid--story {
    min-height: calc(min(80vw, 340px) * 1.42);
    padding: 30px 26px;
  }

  .polaroid__caption {
    font-size: 22px;
  }
}

/* White gradient fading the top & bottom edges of the gallery */
.gallery__edge {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 5;
  pointer-events: none;
  user-select: none;
}

.gallery__edge--top {
  top: 0;
  transform: scaleY(-1);
  /* white edge to the top */
}

.gallery__edge--bottom {
  bottom: 0;
  /* white edge already at the bottom */
}

/* Horizontal-scroll hint pinned to the bottom of the gallery */
.gallery__hint {
  position: absolute;
  left: 50%;
  bottom: 75px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(2px);
  color: var(--brown);
  font: var(--font-italic) var(--font-regular) 18px var(--font-primary);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.gallery__hint.is-hidden {
  opacity: 0;
}

/* Flowing chevrons on each side pointing outward */
.gallery__hint-arrows {
  display: inline-flex;
  gap: 3px;
}

.gallery__hint-arrows:first-child {
  transform: scaleX(-1);
  /* left group points left */
}

.gallery__hint-arrows i {
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--brown);
  border-right: 2px solid var(--brown);
  transform: rotate(45deg);
  opacity: 0.25;
  animation: hint-chevron 1.4s infinite;
}

.gallery__hint-arrows i:nth-child(2) {
  animation-delay: 0.18s;
}

.gallery__hint-arrows i:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes hint-chevron {

  0%,
  100% {
    opacity: 0.2;
  }

  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery__hint-arrows i {
    animation: none;
    opacity: 0.6;
  }
}

/* ---------- Ceremonies (swipeable card deck) ---------- */
.scene--ceremonies {
  position: relative;
  min-height: 100vh;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 44px;
  padding: 80px 20px;
  overflow: hidden;
}

.ceremonies__title {
  font: var(--font-italic) var(--font-regular) 44px var(--font-primary);
  color: var(--brown);
  text-align: center;
  z-index: 1;
}

/* The stack — cards are absolutely positioned on top of each other */
/* Wraps the splash + deck so the splash can sit centred behind the cards */
.deck-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Coloured splash behind the deck — swapped to match the front card */
.deck__splash {
  position: absolute;
  z-index: 0;
  width: min(120vw, 780px);
  height: auto;
  pointer-events: none;
  user-select: none;
  animation: splash-in 0.5s ease;
}

@keyframes splash-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.deck {
  position: relative;
  z-index: 1;
  width: 460px;
  height: 360px;
}

.cere-card {
  --card-radius: 18px;
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
  background: url('media/invitation-paper.webp') center / cover no-repeat;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16), 0 4px 10px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
  cursor: grab;
  touch-action: pan-y;
  /* horizontal drag handled by JS, vertical scrolls page */
  user-select: none;
  will-change: transform;
}

.cere-card.is-dragging {
  transition: none;
  cursor: grabbing;
}

/* Gold double-keyline border (same as the family cards) */
.cere-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--paper-border);
  border-radius: var(--card-radius);
  pointer-events: none;
  z-index: 3;
}

.cere-card::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(139, 95, 48, 0.55);
  border-radius: calc(var(--card-radius) - 4px);
  pointer-events: none;
  z-index: 3;
}

.cere-card__body {
  position: relative;
  z-index: 2;
  padding: 28px 30px;
  color: var(--brown);
}

.cere-card__name {
  font: var(--font-semi-bold) 30px var(--font-primary);
  text-align: center;
  margin-bottom: 18px;
}

.cere-card__date {
  font: var(--font-semi-bold) 24px var(--font-secondary);
  margin-bottom: 10px;
}

.cere-card__time {
  font: var(--font-regular) 20px var(--font-secondary);
  margin-bottom: 16px;
}

.cere-card__venue {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: var(--font-regular) 19px var(--font-secondary);
  max-width: 60%;
  line-height: 1.35;
}

/* Venue as a tappable map link — opens the couple's Google/Apple Maps pin */
.cere-card__venue--link {
  color: var(--brown);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.cere-card__venue--link:hover .cere-card__pin,
.cere-card__venue--link:focus-visible .cere-card__pin {
  background: var(--brown);
  color: #fffdf8;
}

.cere-card__venue--link .cere-card__go {
  align-self: center;
  font-size: 22px;
  line-height: 1;
  opacity: 0.55;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.cere-card__venue--link:hover .cere-card__go,
.cere-card__venue--link:focus-visible .cere-card__go {
  opacity: 1;
  transform: translateX(3px);
}

.cere-card__pin {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.4px solid var(--paper-border);
  border-radius: 9px;
  color: var(--brown);
}

.cere-card__pin svg {
  width: 18px;
  height: 18px;
}

/* Ceremony artwork tucked into the bottom-right corner */
.cere-card__art {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 78%;
  height: auto;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

/* Mobile: portrait cards */
@media (max-width: 700px) {
  .ceremonies__title {
    font-size: 36px;
    z-index: 1;
  }

  .deck {
    width: min(80vw, 310px);
    height: min(65vh, 415px);
  }

  .cere-card__venue {
    max-width: 75%;
  }

  .cere-card__art {
    width: 100%;
  }
}

.ceremonies__hint {
  font: var(--font-italic) var(--font-regular) 18px var(--font-primary);
  color: var(--brown);
  opacity: 0.75;
}

/* ---------- Compliment card ---------- */
.scene--compliment {
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
}

.compliment-card {
  --card-radius: 14px;
  position: relative;
  width: min(92vw, 900px);
  padding: 70px 48px;
  text-align: center;
  color: var(--brown);
  background: url('media/invitation-paper.webp') center / cover no-repeat;
  border-radius: var(--card-radius);
  box-shadow: 0 24px 46px rgba(0, 0, 0, 0.1), 0 6px 14px rgba(0, 0, 0, 0.08);
}

/* Gold double-keyline border (same as the ceremony cards) */
.compliment-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--paper-border);
  border-radius: var(--card-radius);
  pointer-events: none;
  z-index: 3;
}

.compliment-card::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(139, 95, 48, 0.55);
  border-radius: calc(var(--card-radius) - 4px);
  pointer-events: none;
  z-index: 3;
}

.compliment-card p {
  font: var(--font-semi-bold) 22px var(--font-primary);
  line-height: 1.8;
}

.compliment__lead {
  margin-bottom: 4px;
}

@media (max-width: 700px) {
  .compliment-card {
    padding: 48px 26px;
  }

  .compliment-card p {
    font-size: 17px;
    line-height: 1.7;
  }
}

/* ---------- Closing easel ---------- */
.scene--end {
  position: relative;
  min-height: 100vh;
  background: #f4ece2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Overscanned backdrop that drifts with the mouse (JS-driven parallax) */
.end__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('media/end-bg.webp') center / cover no-repeat;
  transform: scale(1.1);
  transform-origin: center;
  will-change: transform;
}

/* White gradient fading the top & bottom edges of the backdrop */
.end__edge {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.end__edge--top {
  top: 0;
  transform: scaleY(-1);
  /* white edge to the top */
}

.end__edge--bottom {
  bottom: 0;
  /* white edge already at the bottom */
  z-index: 3;
  /* above the easel (z-index: 2) so it fades over the legs */
}

.easel {
  position: relative;
  z-index: 2;
  width: min(75vw, 840px);
  transform-origin: center;
  will-change: transform;
}

.easel__img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

/* Text sitting on the board */
.easel__text {
  position: absolute;
  left: 50.8%;
  /* board centre in easle.webp, not 50% */
  top: 50%;
  transform: translate(-50%, -50%);
  width: 42%;
  text-align: center;
  color: var(--brown);
}

.easel__names {
  font: var(--font-italic) var(--font-semi-bold) clamp(36px, 3.2vw, 40px) var(--font-primary);
  line-height: 1.2;
  margin-bottom: 0.7em;
}

.easel__line {
  font: var(--font-italic) var(--font-regular) clamp(20px, 2.6vw, 30px) var(--font-primary);
  line-height: 1.4;
}

/* Mobile: portrait easel (easle-phone.webp) — resize + reposition board text */
@media (max-width: 700px) {
  .easel {
    width: min(100vw, 500px);
  }

  .easel__text {
    left: 51.6%;
    /* board centre in easle-phone.webp */
    top: 45%;
    width: 55%;
  }

  .easel__names {
    font-size: clamp(36px, 5.2vw, 26px);
  }

  .easel__line {
    font-size: clamp(24px, 4.2vw, 30px);
  }
}

/* ---------- RSVP ---------- */
.scene--rsvp {
  min-height: 100vh;
  background: url('media/rose-bg.webp') left top / cover no-repeat, #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
}

.rsvp {
  width: min(92vw, 600px);
}

.rsvp__title {
  font: var(--font-regular) 16px var(--font-secondary);
  color: var(--brown);
  margin-bottom: 8px;
}

.rsvp__title strong {
  font-weight: var(--font-semi-bold);
}

.rsvp__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Choice pills */
.rsvp__option {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 18px;
  border: 1.5px solid var(--paper-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.rsvp__radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.rsvp__option-title {
  font: var(--font-regular) 17px var(--font-secondary);
  color: var(--brown);
}

.rsvp__option-sub {
  font: var(--font-regular) 12px var(--font-secondary);
  color: rgba(128, 73, 0, 0.7);
}

/* Selected + keyboard focus states */
.rsvp__option:has(.rsvp__radio:checked) {
  background: #fbeed6;
  border-color: var(--brown);
}

.rsvp__option:focus-within {
  outline: 2px solid rgba(128, 73, 0, 0.35);
  outline-offset: 2px;
}

/* Message */
.rsvp__field-label {
  display: block;
  margin-top: 12px;
  font: var(--font-semi-bold) 13px var(--font-secondary);
  color: var(--brown);
}

.rsvp__message {
  width: 100%;
  min-height: 96px;
  padding: 12px 14px;
  border: 1.5px solid var(--paper-border);
  border-radius: 12px;
  background: #ffffff;
  color: var(--brown);
  font: var(--font-regular) 14px var(--font-secondary);
  resize: vertical;
}

.rsvp__message::placeholder {
  color: rgba(128, 73, 0, 0.45);
}

.rsvp__message:focus {
  outline: none;
  border-color: var(--brown);
}

/* Name field (shared-link plan only) */
.rsvp__name-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--paper-border);
  border-radius: 12px;
  background: #ffffff;
  color: var(--brown);
  font: var(--font-regular) 15px var(--font-secondary);
}

.rsvp__name-input::placeholder {
  color: rgba(128, 73, 0, 0.45);
}

.rsvp__name-input:focus {
  outline: none;
  border-color: var(--brown);
}

/* Submit */
.rsvp__submit {
  margin-top: 16px;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: var(--brown);
  color: #ffffff;
  font: var(--font-regular) 15px var(--font-secondary);
  cursor: pointer;
  transition: background 0.2s ease;
}

.rsvp__submit:hover {
  background: #6d3f00;
}

/* Confirmation view (revealed after submit, later) */
.rsvp__result-lead {
  font: var(--font-regular) 14px var(--font-secondary);
  color: rgba(128, 73, 0, 0.75);
  margin-bottom: 4px;
}

.rsvp__result-choice {
  font: var(--font-semi-bold) 30px var(--font-primary);
  color: var(--brown);
  margin-bottom: 10px;
}

.rsvp__result-message {
  font: var(--font-italic) var(--font-regular) 16px var(--font-primary);
  color: var(--brown);
  margin-bottom: 20px;
}

.rsvp__change {
  padding: 12px 22px;
  border: 1.5px solid var(--brown);
  border-radius: 12px;
  background: transparent;
  color: var(--brown);
  font: var(--font-regular) 14px var(--font-secondary);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.rsvp__change:hover {
  background: var(--brown);
  color: #ffffff;
}

.rsvp__error {
  font: var(--font-regular) 13px var(--font-secondary);
  color: #b5432b;
  margin-top: 4px;
}

/* Grouped sections (Attendance / Guests / Wishes) */
.rsvp__group {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.rsvp__legend {
  padding: 0;
  margin-bottom: 8px;
  font: var(--font-semi-bold) 15px var(--font-secondary);
  color: var(--brown);
}

/* The Attendance group's heading doubles as the RSVP's main title. */
.rsvp__legend--main {
  margin-bottom: 6px;
  font: var(--font-semi-bold) 28px var(--font-primary);
}

.rsvp__q-sub {
  max-width: 46ch;
  margin: 0 0 20px;
  font: var(--font-regular) 14px var(--font-secondary);
  color: rgba(128, 73, 0, 0.7);
  line-height: 1.5;
}

.rsvp__optional {
  font: var(--font-regular) 12px var(--font-secondary);
  color: rgba(128, 73, 0, 0.6);
}

.rsvp__rule {
  border: 0;
  border-top: 1px solid rgba(139, 95, 48, 0.25);
  margin: 4px 0;
}

/* Attendance — one card per DATE (may list several ceremonies) */
.rsvp__cere-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.rsvp-date {
  padding: 14px;
  border: 1.5px solid var(--paper-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  text-align: center;
}

.rsvp-date__date {
  font: var(--font-semi-bold) 17px var(--font-secondary);
  color: var(--brown);
}

.rsvp-date__names {
  margin: 3px 0 12px;
  font: var(--font-regular) 13px var(--font-secondary);
  color: rgba(128, 73, 0, 0.7);
  line-height: 1.35;
}

.rsvp-date__opts {
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
}

.rsvp-date__opt {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

.rsvp-date__radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.rsvp-date__mark {
  flex: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--paper-border);
  border-radius: 50%;
  position: relative;
  transition: border-color 0.15s ease;
}

.rsvp-date__radio:checked+.rsvp-date__mark {
  border-color: var(--brown);
}

.rsvp-date__radio:checked+.rsvp-date__mark::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--brown);
}

.rsvp-date__radio:focus-visible+.rsvp-date__mark {
  outline: 2px solid rgba(128, 73, 0, 0.35);
  outline-offset: 2px;
}

.rsvp-date__label {
  font: var(--font-regular) 15px var(--font-secondary);
  color: var(--brown);
}

.rsvp-date__radio:checked~.rsvp-date__label {
  font-weight: var(--font-semi-bold);
}

.rsvp-date__radio:disabled~.rsvp-date__label,
.rsvp-date__radio:disabled+.rsvp-date__mark {
  opacity: 0.65;
}

/* Guests — headcount stepper */
.rsvp__sub {
  margin-bottom: 12px;
  font: var(--font-regular) 14px var(--font-secondary);
  color: var(--brown);
}

.rsvp__stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.rsvp__step {
  width: 42px;
  height: 42px;
  border: 1.5px solid var(--paper-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--brown);
  font: var(--font-regular) 22px var(--font-secondary);
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.rsvp__step:hover {
  background: #fbeed6;
  border-color: var(--brown);
}

.rsvp__count {
  width: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font: var(--font-semi-bold) 26px var(--font-primary);
  color: var(--brown);
}

.rsvp__count:focus {
  outline: none;
}

.rsvp__hint {
  margin-top: 8px;
  text-align: center;
  font: var(--font-regular) 12px var(--font-secondary);
  color: rgba(128, 73, 0, 0.6);
}

/* Dimmed until the guest says Yes/Maybe to at least one date (see rsvp.js). */
.rsvp__group--guests {
  transition: opacity 0.2s ease;
}

.rsvp__group--guests.is-disabled {
  opacity: 0.45;
}

.rsvp__group--guests.is-disabled .rsvp__stepper {
  pointer-events: none;
}

.rsvp__step:disabled {
  cursor: not-allowed;
}

/* Result summary */
.rsvp__result-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rsvp__result-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(139, 95, 48, 0.15);
}

.rsvp__result-cere {
  font: var(--font-regular) 14px var(--font-secondary);
  color: var(--brown);
}

.rsvp__result-ans {
  font: var(--font-semi-bold) 14px var(--font-secondary);
  color: var(--brown);
}

.rsvp__result-ans--attending {
  color: #3f7d4f;
}

.rsvp__result-ans--maybe {
  color: #b07a1e;
}

.rsvp__result-ans--not-attending {
  color: rgba(128, 73, 0, 0.5);
}

.rsvp__result-guests {
  border-bottom: 0;
}

/* ---------- Social / location links ---------- */
.scene--social {
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 70px 20px 0;
}

.socials {
  display: flex;
  align-items: center;
  gap: 48px;
}

.social {
  display: inline-flex;
  cursor: pointer;
  padding: 0;
  border: 0;
  background: none;
}

.social img {
  width: 90px;
  height: auto;
  display: block;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Calendar icon is an inline SVG — size/colour it to sit with the image icons */
.social__svg {
  width: 66px;
  height: 66px;
  display: block;
  color: var(--brown);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.social:hover img,
.social:focus-visible img,
.social:hover .social__svg,
.social:focus-visible .social__svg {
  transform: scale(1.18);
}

/* ---------- Popup / modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(60, 34, 0, 0.45);
  backdrop-filter: blur(2px);
  animation: modal-fade 0.25s ease;
}

.modal__box {
  --card-radius: 18px;
  position: relative;
  z-index: 1;
  width: min(92vw, 440px);
  max-height: 86vh;
  overflow-y: auto;
  background: url('media/invitation-paper.webp') center / cover no-repeat, #fdf8ee;
  border-radius: var(--card-radius);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.28);
  padding: 30px 28px;
  animation: modal-pop 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Gold double-keyline border (same as the ceremony cards) */
.modal__box::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--paper-border);
  border-radius: var(--card-radius);
  pointer-events: none;
  z-index: 3;
}

.modal__box::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(139, 95, 48, 0.55);
  border-radius: calc(var(--card-radius) - 4px);
  pointer-events: none;
  z-index: 3;
}

.modal__close {
  position: absolute;
  top: 10px;
  right: 14px;
  border: 0;
  background: none;
  font-size: 28px;
  line-height: 1;
  color: var(--brown);
  cursor: pointer;
  opacity: 0.7;
}

.modal__close:hover {
  opacity: 1;
}

.modal__title {
  font: var(--font-semi-bold) 26px var(--font-secondary);
  color: var(--brown);
  text-align: center;
}

.modal__text {
  font: var(--font-regular) 17px var(--font-secondary);
  color: var(--brown);
  text-align: center;
  margin-bottom: 22px;
}

.modal__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.modal__btn {
  flex: 1 1 0;
  /* both buttons grow to equal width */
  text-align: center;
  padding: 11px 22px;
  border: 1.5px solid var(--brown);
  border-radius: 999px;
  background: transparent;
  color: var(--brown);
  font: var(--font-regular) 15px var(--font-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.modal__btn:hover {
  background: var(--brown);
  color: #fffdf8;
}

.modal__btn--primary {
  background: var(--brown);
  color: #fffdf8;
  margin-top: 24px;
}

.modal__btn--primary:hover {
  background: #6d3f00;
}

/* Location / calendar list */
.loc-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Calendar popup: ceremonies grouped under a date heading */
.cal-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cal-group+.cal-group {
  margin-top: 8px;
}

.cal-date {
  font: var(--font-semi-bold) 15px var(--font-secondary);
  color: var(--brown);
  opacity: 0.85;
  padding-left: 2px;
  margin-bottom: 2px;
}

.loc {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1.5px solid #dec0a0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.35);
  color: var(--brown);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.loc:hover,
.loc:focus-visible {
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--brown);
}

/* Floral divider sits just below the popup title */
.modal__divider {
  display: block;
  width: 70%;
  max-width: 240px;
  height: auto;
  margin: 8px auto 20px;
  opacity: 0.9;
  pointer-events: none;
  user-select: none;
}

.loc__pin {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brown);
}

.loc__pin svg {
  width: 32px;
  height: auto;
}

.loc__text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.loc__ceremonies {
  font: var(--font-semi-bold) 16px var(--font-secondary);
  margin-bottom: 4px;
}

.loc__venue {
  font: var(--font-regular) 15px var(--font-secondary);
}

.loc__addr {
  font: var(--font-regular) 13px var(--font-secondary);
  opacity: 0.7;
}

.loc__go {
  font-size: 24px;
  color: var(--brown);
  opacity: 0.6;
}

@keyframes modal-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modal-pop {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {

  .modal__overlay,
  .modal__box {
    animation: none;
  }
}

/* ---------- Background-music mute toggle ---------- */
/* Pinned top-right, above the invitation content but below popups (modal z100,
   preview bar z300) so it never floats over a dialog. */
.music-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(139, 95, 48, 0.35);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--brown);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

/* While previewing, the floating edit toolbar sits along the top edge; drop the
   music toggle below it so the bar's buttons don't cover it. */
body.is-previewing .music-toggle {
  top: 70px;
}

.music-toggle:hover {
  background: rgba(255, 253, 248, 0.92);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

.music-toggle:active {
  transform: scale(0.94);
}

.music-toggle:focus-visible {
  outline: 2px solid var(--brown);
  outline-offset: 3px;
}

.music-toggle__icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* Show the sound-on icon by default; swap to the muted icon when muted. */
.music-toggle__icon--off {
  display: none;
}

.music-toggle.is-muted .music-toggle__icon--on {
  display: none;
}

.music-toggle.is-muted .music-toggle__icon--off {
  display: inline;
}

.music-toggle.is-muted {
  color: rgba(128, 73, 0, 0.55);
}

@media (max-width: 700px) {
  .music-toggle {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
  }

  .music-toggle__icon {
    width: 20px;
    height: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .music-toggle {
    transition: none;
  }
}