/* ==========================================================================
   Wedding invitation — Figma "Invintation" / Desktop - group (1440px)
   Desktop (>=1100px): 1440px stage, positions match the Figma frame.
   Mobile  (<1100px):  same content in a single flowing column.
   ========================================================================== */

:root {
  --ink: #130903;
  --brown: #4b3527;
  --brown-dark: #1b120d;
  --field-bg: #fae9d2;
  --field-border: #b5a797;
  --btn-border: #c8a985;
  --cream: #f5eee2;

  --f-script: "Kapakana", cursive;
  --f-caps: "Italiana", serif;
  --f-serif: "Prata", Georgia, serif;
  --f-hand: "SignPainter", "SignPainter-HouseScript", "Marck Script", cursive;

  --warm-gradient: linear-gradient(180deg, #f5eee2 0%, #dbc09f 99.9%);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; background: var(--cream); }

body {
  font-family: var(--f-serif);
  color: var(--brown);
  -webkit-font-smoothing: antialiased;
}

main { overflow-x: clip; }

p, h1, h2, h3, ol, ul, fieldset, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { display: block; }

section { position: relative; }

.stage {
  position: relative;
  width: 1440px;
  margin-left: calc(50% - 720px);
}

.stage > * { position: absolute; }

/* Decorative layer that is clipped to its section */
.deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.textured { background: var(--warm-gradient); }
.textured::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/white-texture.png") center / cover;
  mix-blend-mode: luminosity;
  pointer-events: none;
}

/* ---------- Typography ---------- */

.script {
  font-family: var(--f-script);
  font-weight: 400;
  line-height: 0.8;
}

.title {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 739px;
  color: var(--ink);
  text-align: center;
  font-weight: 400;
}
.title .script { font-size: 59px; }
.title .caps {
  font-family: var(--f-caps);
  font-size: 60px;
  line-height: normal;
  text-transform: uppercase;
}

.body-text {
  font-family: var(--f-serif);
  color: var(--brown);
  text-align: center;
}

/* ---------- Button ---------- */

.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 359px;
  padding: 16px 24px 16px 40px;
  overflow: hidden;
  border: 1px solid var(--btn-border);
  border-radius: 100px;
  background: radial-gradient(ellipse 179.5px 56px at 50% 0, #e8d7c4 0%, #d7bfa2 100%);
  box-shadow: 0 11px 7px rgba(172, 147, 119, 0.16), 0 1px 3px rgba(172, 147, 119, 0.3);
  font: 16px/normal var(--f-serif);
  color: var(--brown);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 12px rgba(172, 147, 119, 0.22), 0 2px 4px rgba(172, 147, 119, 0.35);
}
.btn:focus-visible { outline: 2px solid var(--brown); outline-offset: 3px; }
.btn:disabled { opacity: 0.6; cursor: default; transform: none; }

.btn__texture {
  position: absolute;
  inset: -1px -1px -1px -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
  mix-blend-mode: luminosity;
  pointer-events: none;
}
.btn__texture > span {
  position: relative;
  flex: none;
  width: 100cqh;
  height: 100cqw;
  overflow: hidden;
  transform: rotate(-90deg);
}
.btn__texture img {
  position: absolute;
  top: 0;
  left: -132.14%;
  width: 364.29%;
  height: 100%;
  max-width: none;
}
.btn__label { position: relative; white-space: nowrap; }
.btn__arrow { position: relative; width: 22.2071px; height: 11.7071px; }

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  height: 1174px;
  overflow: hidden;
  background: linear-gradient(105.37deg, #d3c4b1 36%, #c2b19a 69.8%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0 -4px 0 -2px;
  background: url("assets/hero-bg.png") center / cover;
}
.hero .stage { height: 1174px; }

/* Title + lead flow together, so shorter/longer guest names never leave a gap or overlap */
.hero__intro {
  top: 40px;
  left: 351px;
  width: 738px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.hero__title { width: 100%; }
.hero__dear { height: 67px; margin-bottom: -30px; font-size: 60px; }
.hero__names {
  font-family: var(--f-caps);
  font-size: 100px;
  line-height: 1.055;
}
.hero__names .script { line-height: 1.055; }

.hero__lead { width: 100%; font-size: 24px; line-height: normal; }

/* Shell + polaroid composition (921 x 923 in Figma), scales via container units */
.hero__photo {
  top: 288px;
  left: 260px;
  width: 921px;
  aspect-ratio: 755 / 757;
  container-type: inline-size;
  --u: calc(100cqw / 921);
}
.hero__photo > * { position: absolute; }

.hero__shell-texture,
.hero__shell {
  top: calc(2.2 * var(--u));
  left: 0;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.hero__shell-texture {
  mix-blend-mode: luminosity;
  -webkit-mask: url("assets/shell-mask.svg") 0 calc(-0.977 * var(--u)) / 100% 100% no-repeat;
  mask: url("assets/shell-mask.svg") 0 calc(-0.977 * var(--u)) / 100% 100% no-repeat;
}

/* Polaroid cards: layered drop shadow from the Figma mask groups.
   Figma blur radius = 2x CSS drop-shadow blur. --s scales the offsets per card/breakpoint. */
.card-shadow {
  --s: 1px;
  position: absolute;
  inset: 0;
  pointer-events: none;
  filter:
    drop-shadow(calc(5 * var(--s)) calc(8 * var(--s)) calc(10.5 * var(--s)) rgba(72, 45, 30, 0.18))
    drop-shadow(calc(20 * var(--s)) calc(33 * var(--s)) calc(19.5 * var(--s)) rgba(72, 45, 30, 0.16))
    drop-shadow(calc(46 * var(--s)) calc(74 * var(--s)) calc(26 * var(--s)) rgba(72, 45, 30, 0.09))
    drop-shadow(calc(81 * var(--s)) calc(132 * var(--s)) calc(31 * var(--s)) rgba(72, 45, 30, 0.03));
}
.card-shadow > * { position: absolute; }
/* Desktop venue card uses the same shadow scaled x1.416 in Figma */
.venue__shadow { --s: 1.416px; }

/* Mask vector is unrotated in group space; the photo rotates inside it */
.hero__mask {
  top: calc(155.02 * var(--u));
  left: calc(161.15 * var(--u));
  width: calc(561.18 * var(--u));
  height: calc(648.625 * var(--u));
  -webkit-mask: url("assets/polaroid-mask.svg") 0 0 / 100% 100% no-repeat;
  mask: url("assets/polaroid-mask.svg") 0 0 / 100% 100% no-repeat;
}
.hero__polaroid {
  position: absolute;
  top: calc(28.13 * var(--u));
  left: calc(41.3 * var(--u));
  width: calc(474.8 * var(--u));
  height: calc(593.3 * var(--u));
  transform: rotate(-12.85deg) skewX(0.03deg);
}
.hero__polaroid img { width: 100%; height: 100%; object-fit: cover; }

.hero__note {
  top: calc(699.4 * var(--u));
  left: calc(501.2 * var(--u));
  width: calc(384 * var(--u));
  transform: translate(-50%, -50%) rotate(-15.65deg);
  font-family: var(--f-hand);
  font-size: calc(53 * var(--u));
  line-height: 0.87;
  color: #392e28;
  text-align: center;
  mix-blend-mode: color-burn;
}

/* ==========================================================================
   INVITATION & DATE
   ========================================================================== */

.invite { height: 1123px; background: #fff; }
.invite .stage { height: 1123px; }

.pearls-top {
  position: absolute;
  left: -6px;
  width: 1446px;
  height: 584px;
  overflow: hidden;
  opacity: 0.4;
}
.pearls-top img { width: 100%; height: 164.95%; max-width: none; }
.invite__pearls { top: -205px; left: calc(50% - 726px); }

.invite__kicker {
  top: 120px;
  left: 350px;
  width: 739px;
  font-size: 59px;
  color: var(--ink);
  text-align: center;
}

.invite__names {
  top: 183px;
  left: 350px;
  width: 739px;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  text-align: center;
  font-weight: 400;
}
.invite__name {
  height: 169px;
  font-family: var(--f-caps);
  font-size: 140px;
  line-height: normal;
  text-transform: uppercase;
}
.invite__name:first-child { margin-bottom: -30px; }
.invite__and { height: 97px; margin-bottom: -30px; font-size: 120px; }

.invite__text { top: 582px; left: 350px; width: 739px; font-size: 20px; line-height: normal; }

.invite__date {
  top: 824px;
  left: 350px;
  width: 739px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: var(--ink);
  text-align: center;
}
.invite__heart {
  position: absolute;
  top: 8.46px;
  left: -41.37px;
  width: 234.211px;
  height: 238.422px;
  transform: rotate(4.31deg);
}
.invite__day { font-family: var(--f-caps); font-size: 40px; line-height: normal; }
.invite__row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 49px;
  font-size: 80px;
  line-height: normal;
  text-transform: uppercase;
}
.invite__row img { width: 1px; height: 68px; }

/* ==========================================================================
   ITINERARY
   ========================================================================== */

.itinerary {
  z-index: 1;
  height: 1433px;
  overflow: hidden;
  background: var(--cream) url("assets/itinerary-bg.png") center / cover;
}
.itinerary .stage { height: 1433px; }
.itinerary .title { top: 120px; left: 350px; }

.schedule {
  --time-w: 123px;
  --gap: 166px;
  --pearl: 47px;
  --pearl-left: 168px;
  top: 318px;
  left: 448px;
  width: 641px;
  height: 995px;
}
.schedule__line {
  position: absolute;
  top: 0;
  left: calc(var(--pearl-left) + var(--pearl) / 2 - 1.5px);
  width: 2px;
  height: 914px;
  background: linear-gradient(180deg, rgba(151, 141, 135, 0) 0%, #978d87 13.46%, #978d87 89.42%, rgba(151, 141, 135, 0) 100%);
}
.schedule__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-top: 40px;
}
.schedule__list li {
  position: relative;
  display: flex;
  gap: var(--gap);
  align-items: flex-start;
}
.schedule time {
  flex: none;
  width: var(--time-w);
  font-size: 40px;
  line-height: normal;
  color: #000;
}
.schedule .pearl {
  position: absolute;
  top: 0;
  left: var(--pearl-left);
  width: var(--pearl);
  height: var(--pearl);
}
.schedule h3 { font-weight: 400; font-size: 32px; line-height: normal; color: #000; }
.schedule li p { font-size: 20px; line-height: normal; color: var(--brown); }

/* ==========================================================================
   VENUE
   ========================================================================== */

.venue { z-index: 2; height: 696px; background: var(--warm-gradient); }
.venue .deco::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/white-texture.png") center / cover;
  mix-blend-mode: luminosity;
}
.venue .stage { height: 696px; }

.venue__pearls-right {
  position: absolute;
  top: -5px;
  left: calc(50% + 272px);
  width: 736px;
  height: 1104px;
  object-fit: cover;
  opacity: 0.3;
}
.venue__pearls-left {
  position: absolute;
  top: 0;
  left: calc(50% - 720px);
  width: 380px;
  height: 1090px;
  opacity: 0.3;
  transform: scaleX(-1);
}

.venue__title { top: 120px; left: 730px; width: 359px; }

.venue__info {
  top: 299px;
  left: 730px;
  width: 359px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  text-align: center;
}
.venue__name { display: flex; flex-direction: column; gap: 16px; }
.venue__place { font-size: 32px; line-height: normal; text-transform: uppercase; color: #000; }
.venue__city { font-size: 40px; color: var(--ink); }
.venue__address { font-size: 24px; line-height: normal; }
.venue .btn { width: 100%; }

/* Polaroid with venue photo (1001.6 x 1048.4 in Figma) — overlaps the itinerary */
.venue__photo {
  top: -217px;
  left: -65px;
  width: 1001.588px;
  aspect-ratio: 1001.588 / 1048.434;
  container-type: inline-size;
  pointer-events: none;
  --u: calc(100cqw / 1001.588);
}
.venue__photo > *,
.venue__group > * { position: absolute; }

/* In Figma the mask vector sits in group space, rotated 30deg to fill the group bbox */
.venue__mask {
  top: calc(117.04 * var(--u));
  left: calc(157.61 * var(--u));
  width: calc(686.366 * var(--u));
  height: calc(814.354 * var(--u));
  transform: rotate(30deg);
  -webkit-mask: url("assets/venue-mask.svg") 0 0 / 100% 100% no-repeat;
  mask: url("assets/venue-mask.svg") 0 0 / 100% 100% no-repeat;
}
.venue__group {
  position: absolute;
  top: calc(-117.04 * var(--u));
  left: calc(-157.61 * var(--u));
  width: calc(1001.588 * var(--u));
  height: calc(1048.434 * var(--u));
  transform: rotate(-30deg);
}
.venue__frame {
  top: calc(150.4 * var(--u));
  left: calc(199.93 * var(--u));
  width: calc(595.821 * var(--u));
  height: calc(744.511 * var(--u));
  transform: rotate(17.15deg) skewX(0.03deg);
}
.venue__image {
  top: calc(211.73 * var(--u));
  left: calc(272.64 * var(--u));
  width: calc(473.546 * var(--u));
  height: calc(534.644 * var(--u));
  border-radius: calc(2.832 * var(--u));
  overflow: hidden;
  transform: rotate(14.34deg);
}
.venue__frame img,
.venue__image img { width: 100%; height: 100%; object-fit: cover; }
.venue__pin {
  top: calc(175.58 * var(--u));
  left: calc(562.14 * var(--u));
  width: calc(66.573 * var(--u));
  height: calc(66.528 * var(--u));
}

/* ==========================================================================
   DRESS CODE
   ========================================================================== */

.dresscode { height: 1174px; background: var(--cream); }
.dresscode .stage { height: 1174px; }

/* Figma constraints: bg = Scale; left collage = Left (MIN); right collage = Right (MAX) */
.dc { position: absolute; object-fit: cover; }
.dc--bg { top: 0; left: -0.14%; width: 100.42%; height: 100%; }
/* Below 1440px the side pieces shrink with the free margin (50% - 370px) so they
   never run over the centred content; at 1440px+ min() resolves to the Figma sizes. */
.dc--9  { top: 0;     left: 0;     width: min(331px, calc(50% - 389px)); height: 690px; }
.dc--11 { top: 690px; left: -2px;  width: min(429px, calc(50% - 291px)); height: 484px; }
.dc--10 { top: 427px; left: 47px;  width: min(410px, calc(50% - 310px)); height: 367px; object-fit: contain; }
.dc--15 { top: 0;     right: 0;    width: min(329px, calc(50% - 391px)); height: 651px; }
.dc--14 { top: 873px; right: -4px; width: min(525px, calc(50% - 195px)); height: 301px; }
.dc--12 { top: 413px; right: -56px; width: min(460px, calc(50% - 260px)); height: 722px; object-fit: contain; }

.dresscode__title { top: 120px; left: 351px; width: 738px; }
.dresscode__text { top: 262px; left: 351px; width: 739px; font-size: 24px; line-height: normal; }

.swatches {
  top: 441px;
  left: 351px;
  width: 738px;
  display: grid;
  grid-template-columns: repeat(4, 170px);
  grid-auto-rows: 229px;
  column-gap: 19px;
  row-gap: 24px;
  justify-content: space-between;
}
.swatches li { position: relative; border: 1px solid #fff; overflow: hidden; }
.swatches li:nth-child(5) { grid-column: 2; }
.swatch--img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

/* ==========================================================================
   WISHES
   ========================================================================== */

.wish { z-index: 2; height: 937px; background: #fff; }
.wish .stage { height: 937px; }
.wish__pearls { top: -298px; left: calc(50% - 726px); }
.wish__pearls img { transform: scaleX(-1); }
.wish__title { top: 120px; left: 354px; }

.note {
  top: 262px;
  left: 351px;
  width: 738px;
  height: 740px;
}
.note__paper {
  position: absolute;
  top: 0;
  left: -110px;
  width: 926px;
  height: 740px;
  filter:
    drop-shadow(0 8px 10.5px rgba(72, 45, 30, 0.18))
    drop-shadow(0 33px 19.5px rgba(72, 45, 30, 0.16))
    drop-shadow(0 74px 26px rgba(72, 45, 30, 0.09))
    drop-shadow(0 132px 31px rgba(72, 45, 30, 0.03));
}
.note__text {
  position: absolute;
  top: 221px;
  left: 96px;
  width: 547px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-size: 24px;
  line-height: normal;
  text-align: center;
  color: var(--brown);
}
.note__text .pearl { width: 47px; height: 47px; }

/* ==========================================================================
   CONFIRMATION (RSVP)
   ========================================================================== */

.rsvp { z-index: 1; height: 1314px; }
.rsvp .stage { height: 1314px; }

.rsvp__title { top: 185px; left: 354px; }

.rsvp__intro {
  top: 398px;
  left: 351px;
  width: 738px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  line-height: normal;
}
.rsvp__lead { font-size: 24px; }
.rsvp__deadline { display: flex; flex-direction: column; gap: 4px; font-size: 20px; }
.rsvp__date { font-size: 28px; color: var(--brown-dark); }

.rsvp__form {
  top: 627px;
  left: 351px;
  width: 738px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.field { display: flex; flex-direction: column; gap: 16px; border: 0; min-width: 0; }
.field__label { padding: 0; font-size: 24px; line-height: normal; color: var(--brown); }
fieldset .field__label { margin-bottom: 16px; }
fieldset.field { gap: 0; }

.field__box {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--field-border);
  border-radius: 16px;
  background: var(--field-bg);
  font: 20px/normal var(--f-serif);
  color: var(--brown);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field__box:focus,
.field__box:focus-within { border-color: var(--brown); box-shadow: 0 0 0 3px rgba(75, 53, 39, 0.1); }
.field__box::placeholder { color: var(--brown); opacity: 0.5; }
textarea.field__box { height: 138px; resize: vertical; }
.field__box.is-invalid { border-color: #a0463a; }

.choices { display: flex; gap: 20px; }
.choice {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 359px;
  cursor: pointer;
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__mark {
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid var(--field-border);
  border-radius: 100px;
}
.choice input:checked + .choice__mark {
  border: 0;
  background: url("assets/check.svg") center / 24px 24px no-repeat;
}

/* Button follows the fields, so it moves up when the diet field is hidden (40px = 32 gap + 8) */
.rsvp__submit { align-self: center; margin-top: 8px; }
.rsvp__status {
  width: 100%;
  font-size: 18px;
  text-align: center;
  color: var(--brown);
}

.rsvp__form.is-sent .field,
.rsvp__form.is-sent .rsvp__submit { opacity: 0.5; pointer-events: none; }

/* ==========================================================================
   MOBILE / TABLET (< 1100px) — Figma "Mobile - group" (402px frame).
   Every Figma px is multiplied by --mu, so the 402px layout scales to the
   viewport (capped at 520px wide on tablets and centred).
   ========================================================================== */

@media (max-width: 1099px) {
  :root {
    --mu: calc(min(100vw, 520px) / 402);
    /* collage scales with the full viewport width (not capped), so on tablets it fills the edges */
    --cu: calc(100vw / 402);
  }

  .stage {
    width: calc(402 * var(--mu));
    margin-left: calc(50% - 201 * var(--mu));
  }

  /* Shared titles */
  .title { left: calc(24 * var(--mu)) !important; width: calc(354 * var(--mu)) !important; }
  .title .script { font-size: calc(40 * var(--mu)); }
  .title .caps { font-size: calc(40 * var(--mu)); }
  .dresscode__title .script,
  .wish__title .script,
  .rsvp__title .script { height: calc(67 * var(--mu)); margin-bottom: calc(-30 * var(--mu)); }

  .btn {
    width: calc(354 * var(--mu));
    gap: calc(16 * var(--mu));
    padding: calc(16 * var(--mu)) calc(24 * var(--mu)) calc(16 * var(--mu)) calc(40 * var(--mu));
    font-size: calc(16 * var(--mu));
    background: radial-gradient(ellipse calc(177 * var(--mu)) calc(56 * var(--mu)) at 50% 0, #e8d7c4 0%, #d7bfa2 100%);
  }

  /* ---------- Hero (874) ---------- */
  .hero, .hero .stage { height: calc(874 * var(--mu)); }
  .hero { background: linear-gradient(95.9deg, #d3c4b1 36%, #c2b19a 69.8%); }
  .hero__intro { top: calc(88 * var(--mu)); left: calc(24 * var(--mu)); width: calc(354 * var(--mu)); gap: calc(16 * var(--mu)); }
  .hero__title { width: 100% !important; }
  .hero__dear { height: calc(67 * var(--mu)); margin-bottom: calc(-30 * var(--mu)); font-size: calc(50 * var(--mu)); }
  .hero__names { font-size: calc(60 * var(--mu)); }
  .hero__lead { font-size: calc(24 * var(--mu)); }
  .card-shadow, .venue__shadow { --s: var(--mu); }
  .hero__photo { top: calc(326.2 * var(--mu)); left: calc(-107 * var(--mu)); width: calc(615 * var(--mu)); }

  /* ---------- Invitation & date (981) ---------- */
  .invite, .invite .stage { height: calc(981 * var(--mu)); }
  .invite__pearls {
    top: calc(-82 * var(--mu));
    left: calc(50% - 400 * var(--mu));
    width: calc(800 * var(--mu));
    height: calc(323 * var(--mu));
  }
  .invite__kicker { top: calc(80 * var(--mu)); left: calc(24 * var(--mu)); width: calc(354 * var(--mu)); font-size: calc(48 * var(--mu)); }
  .invite__names { top: calc(212 * var(--mu)); left: calc(24 * var(--mu)); width: calc(354 * var(--mu)); }
  .invite__name { height: auto; font-size: calc(69 * var(--mu)); }
  .invite__name:first-child { margin-bottom: calc(-2 * var(--mu)); }
  .invite__and { height: auto; margin-bottom: calc(-2 * var(--mu)); font-size: calc(50 * var(--mu)); }
  .invite__text { top: calc(442 * var(--mu)); left: calc(24 * var(--mu)); width: calc(354 * var(--mu)); font-size: calc(20 * var(--mu)); }
  .invite__date { top: calc(795 * var(--mu)); left: calc(24 * var(--mu)); width: calc(354 * var(--mu)); gap: calc(24 * var(--mu)); }
  .invite__day { font-size: calc(24 * var(--mu)); }
  .invite__row { justify-content: space-between; gap: 0; font-size: calc(40 * var(--mu)); }
  .invite__row img { height: calc(54 * var(--mu)); }
  .invite__heart {
    top: calc(36.2 * var(--mu));
    left: calc(-13.7 * var(--mu));
    width: calc(89.388 * var(--mu));
    height: calc(90.996 * var(--mu));
  }

  /* ---------- Itinerary (937) ---------- */
  .itinerary, .itinerary .stage { height: calc(937 * var(--mu)); }
  /* Figma crop shows the right ~58% of the photo; keep that crop but always span the full section width */
  .itinerary {
    background:
      url("assets/itinerary-bg.png") right calc(-12.4 * var(--mu)) top 0 / max(100%, calc(690.7 * var(--mu))) auto no-repeat,
      linear-gradient(179.7deg, #f5eee2 0%, #dbc09f 99.9%);
  }
  .itinerary .title { top: calc(80 * var(--mu)); left: calc(25 * var(--mu)) !important; width: calc(353 * var(--mu)) !important; }
  .schedule {
    --time-w: calc(76 * var(--mu));
    --gap: calc(62 * var(--mu));
    --pearl: calc(25 * var(--mu));
    --pearl-left: calc(89 * var(--mu));
    top: calc(191 * var(--mu));
    left: calc(25 * var(--mu));
    width: calc(353 * var(--mu));
    height: calc(666 * var(--mu));
  }
  .schedule__line { left: calc(102 * var(--mu)); height: calc(666 * var(--mu)); }
  .schedule__list { gap: calc(40 * var(--mu)); padding-top: calc(40 * var(--mu)); }
  .schedule .pearl { top: calc(4 * var(--mu)); }
  .schedule time { font-size: calc(24 * var(--mu)); }
  .schedule h3 { font-size: calc(20 * var(--mu)); }
  .schedule li p { font-size: calc(16 * var(--mu)); }

  /* ---------- Venue (852) ---------- */
  .venue, .venue .stage { height: calc(852 * var(--mu)); }
  .venue__pearls-right {
    top: calc(-59 * var(--mu));
    left: calc(50% - 201 * var(--mu) - 112 * var(--mu));
    width: calc(422 * var(--mu));
    height: calc(633 * var(--mu));
  }
  .venue__pearls-left {
    left: calc(50% - 201 * var(--mu) + 281 * var(--mu));
    width: calc(192.667 * var(--mu));
    height: calc(552.651 * var(--mu));
  }
  .venue__title { top: calc(80 * var(--mu)); left: calc(25 * var(--mu)) !important; width: calc(353 * var(--mu)) !important; }
  .venue__info { top: calc(191 * var(--mu)); left: calc(24 * var(--mu)); width: calc(354 * var(--mu)); gap: calc(24 * var(--mu)); }
  .venue__name { gap: calc(8 * var(--mu)); }
  .venue__place { font-size: calc(32 * var(--mu)); }
  .venue__city { font-size: calc(40 * var(--mu)); }
  .venue__address { font-size: calc(24 * var(--mu)); }
  .venue .btn { margin-top: calc(17 * var(--mu)); }
  .venue__photo { top: calc(417 * var(--mu)); left: calc(-64 * var(--mu)); width: calc(532.06 * var(--mu)); }

  /* ---------- Dress code (1189) ---------- */
  /* 655 = top of the collage in the 402px frame, 534 = collage height */
  .dresscode, .dresscode .stage { height: calc(655 * var(--mu) + 534 * var(--cu)); }
  .dresscode { background: linear-gradient(94.3deg, #d3c4b1 36%, #c2b19a 69.8%); }
  .dc--bg { left: -2px; width: calc(100% + 2px); }
  /* Figma mobile constraints: left column = Left, right column = Right, all = Bottom */
  .dc--9  { top: auto; bottom: calc(220 * var(--cu)); left: calc(1 * var(--cu));   width: calc(150 * var(--cu)); height: calc(314 * var(--cu)); }
  .dc--11 { top: auto; bottom: 0;                     left: 0;                      width: calc(195 * var(--cu)); height: calc(220 * var(--cu)); z-index: 1; }
  .dc--10 { top: auto; bottom: calc(173 * var(--cu)); left: calc(22 * var(--cu));  width: calc(187 * var(--cu)); height: calc(167 * var(--cu)); z-index: 2; }
  .dc--15 { top: auto; bottom: calc(119 * var(--cu)); left: auto; right: 0;         width: calc(251 * var(--cu)); height: calc(307 * var(--cu)); }
  .dc--14 { top: auto; bottom: 0;                     left: auto; right: 0;         width: calc(207 * var(--cu)); height: calc(119 * var(--cu)); }
  .dc--12 { top: auto; bottom: 0;                     left: auto; right: calc(-21 * var(--cu)); width: calc(183 * var(--cu)); height: calc(287 * var(--cu)); }
  .dresscode__title { top: calc(120 * var(--mu)); }
  .dresscode__text { top: calc(220 * var(--mu)); left: calc(24 * var(--mu)); width: calc(354 * var(--mu)); font-size: calc(20 * var(--mu)); }
  .swatches {
    top: calc(387 * var(--mu));
    left: calc(24 * var(--mu));
    width: calc(355 * var(--mu));
    grid-template-columns: repeat(4, calc(77 * var(--mu)));
    grid-auto-rows: calc(110 * var(--mu));
    column-gap: 0;
    row-gap: calc(11 * var(--mu));
  }

  /* ---------- Wishes (645) ---------- */
  .wish, .wish .stage { height: calc(645 * var(--mu)); }
  .wish__pearls {
    top: calc(-82 * var(--mu));
    left: calc(50% - 246 * var(--mu));
    width: calc(492 * var(--mu));
    height: calc(199 * var(--mu));
  }
  .wish__pearls img { transform: none; }
  .wish__title { top: calc(80 * var(--mu)); }
  .note { top: calc(196 * var(--mu)); left: calc(24 * var(--mu)); width: calc(354 * var(--mu)); height: calc(497 * var(--mu)); }
  .note__paper { left: 0; width: 100%; height: 100%; }
  .note__text { top: calc(92 * var(--mu)); left: calc(46 * var(--mu)); width: calc(262 * var(--mu)); gap: calc(12 * var(--mu)); font-size: calc(16 * var(--mu)); }
  .note__text .pearl { width: calc(20 * var(--mu)); height: calc(20 * var(--mu)); }

  /* ---------- Confirmation (1106) ---------- */
  .rsvp, .rsvp .stage { height: calc(1106 * var(--mu)); }
  .rsvp__title { top: calc(128 * var(--mu)); }
  .rsvp__intro { top: calc(291 * var(--mu)); left: calc(24 * var(--mu)); width: calc(354 * var(--mu)); gap: calc(16 * var(--mu)); }
  .rsvp__lead { font-size: calc(24 * var(--mu)); }
  .rsvp__deadline { gap: calc(8 * var(--mu)); font-size: calc(16 * var(--mu)); }
  .rsvp__date { font-size: calc(28 * var(--mu)); }
  .rsvp__form { top: calc(519 * var(--mu)); left: calc(24 * var(--mu)); width: calc(354 * var(--mu)); gap: calc(24 * var(--mu)); }
  .field { gap: calc(16 * var(--mu)); }
  .field__label { font-size: calc(14 * var(--mu)); }
  fieldset .field__label { margin-bottom: calc(16 * var(--mu)); }
  .field__box { padding: calc(16 * var(--mu)); font-size: max(16px, calc(16 * var(--mu))); }
  textarea.field__box { height: calc(138 * var(--mu)); }
  .choices { gap: calc(16 * var(--mu)); }
  .choice { flex: 1 1 0; width: auto; gap: calc(12 * var(--mu)); font-size: calc(14 * var(--mu)); }
  .rsvp__submit { margin-top: calc(8 * var(--mu)); }
  .rsvp__status { font-size: calc(16 * var(--mu)); }
}

/* ==========================================================================
   ANIMATIONS
   Scroll reveals use the individual translate / scale / rotate properties, so
   they stack on top of each element's own transform (rotated cards etc.).
   Hidden states only apply with JS on and when the user allows motion.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  :root { --ease: cubic-bezier(0.22, 1, 0.36, 1); --spring: cubic-bezier(0.34, 1.56, 0.64, 1); }

  .js [data-reveal] {
    opacity: 0;
    transition:
      opacity 0.9s var(--ease) var(--d, 0s),
      translate 1.1s var(--ease) var(--d, 0s),
      scale 1.1s var(--ease) var(--d, 0s),
      rotate 1.2s var(--ease) var(--d, 0s),
      filter 1s var(--ease) var(--d, 0s),
      clip-path 1.6s cubic-bezier(0.65, 0, 0.35, 1) var(--d, 0s),
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }
  .js [data-reveal="up"]    { translate: 0 40px; }
  .js [data-reveal="blur"]  { translate: 0 24px; filter: blur(12px); }
  .js [data-reveal="zoom"]  { scale: 0.88; }
  .js [data-reveal="left"]  { translate: -90px 0; }
  .js [data-reveal="right"] { translate: 90px 0; }
  .js [data-reveal="pop"]   { scale: 0.5; transition-timing-function: var(--spring); }
  .js [data-reveal="drop"]  { translate: 0 -90px; rotate: -10deg; }
  .js [data-reveal="draw"]  { opacity: 1; scale: 1 0; transform-origin: 50% 0; }
  .js [data-reveal="write"] { opacity: 1; clip-path: inset(-30% 100% -30% 0); }
  .js [data-reveal="swing"] { translate: 0 -60px; transform-origin: 50% 0; }

  .js [data-reveal].is-visible {
    opacity: 1;
    translate: none;
    scale: none;
    rotate: none;
    filter: none;
    clip-path: inset(-30% -10% -30% -10%);
  }

  /* Wishes note swings on its clip like a hung card */
  .js [data-reveal="swing"].is-visible { animation: swing 2.2s var(--ease) var(--d, 0s) both; }
  @keyframes swing {
    0%   { rotate: 7deg; }
    30%  { rotate: -4deg; }
    55%  { rotate: 2deg; }
    78%  { rotate: -0.8deg; }
    100% { rotate: 0deg; }
  }

  /* Timeline pearls pop in after their row */
  .js .schedule li .pearl { scale: 0; }
  .js .schedule li.is-visible .pearl { animation: pearl-pop 0.8s var(--spring) calc(var(--d, 0s) + 0.25s) both; }
  @keyframes pearl-pop { from { scale: 0; } to { scale: 1; } }

  /* Venue pin pearl lands after the card */
  .js .venue__photo .venue__pin { scale: 0; }
  .js .venue__photo.is-visible .venue__pin { animation: pearl-pop 0.8s var(--spring) 0.9s both; }

  /* Slow floating pearl garlands */
  .pearls-top img,
  .venue__pearls-right,
  .venue__pearls-left { animation: float 10s ease-in-out infinite alternate; }
  .venue__pearls-left { animation-delay: -5s; }
  @keyframes float {
    from { translate: 0 -8px; }
    to   { translate: 0 10px; }
  }

  /* Small hover touches */
  .swatches li.is-visible { transition: opacity 0.9s var(--ease) var(--d, 0s), scale 1.1s var(--ease) var(--d, 0s), translate 0.35s var(--ease); }
  .swatches li.is-visible:hover { translate: 0 -6px; }
}


/* ==========================================================================
   RSVP: "Ні" hides the diet question
   The field collapses, the button moves up and the section shrinks by the same amount.
   ========================================================================== */

.rsvp { --diet-space: 219px; }
.rsvp,
.rsvp .stage { transition: height 0.5s var(--ease, ease); }
.rsvp.is-declined,
.rsvp.is-declined .stage { height: calc(1314px - var(--diet-space)); }

.rsvp .field--diet,
.js .rsvp .field--diet[data-reveal].is-visible {
  max-height: 260px;
  overflow: hidden;
  transition:
    max-height 0.5s var(--ease, ease),
    margin-top 0.5s var(--ease, ease),
    opacity 0.5s ease,
    translate 1.1s var(--ease, ease) var(--d, 0s);
}
.rsvp.is-declined .field--diet,
.js .rsvp.is-declined .field--diet[data-reveal].is-visible {
  max-height: 0;
  margin-top: -32px;
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 1099px) {
  .rsvp { --diet-space: calc(197 * var(--mu)); }
  .rsvp.is-declined,
  .rsvp.is-declined .stage { height: calc(1106 * var(--mu) - var(--diet-space)); }
  .rsvp.is-declined .field--diet,
  .js .rsvp.is-declined .field--diet[data-reveal].is-visible { margin-top: calc(-24 * var(--mu)); }
}