@font-face{font-family:Pinyon;src:url('../assets/fonts/PinyonScript-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Cormorant;src:url('../assets/fonts/CormorantGaramond.ttf') format('truetype');font-weight:300 700;font-display:swap}
:root{
  --ink:#2a2118;
  --leaf:#12352b;
  --leaf-deep:#0c241c;
  --henna:#6e2b32;
  --marigold:#e2a322;
  --gold:#f3d48a;
  --ivory:#fbf6ea;
  --cream:#f3e6cf;
  --script:Pinyon,'Segoe Script',cursive;
  --serif:Cormorant,Georgia,serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0;
  -webkit-tap-highlight-color:transparent;
  color:var(--ink);
  background:
    radial-gradient(circle at 20% 10%,#1d5344 0,transparent 28%),
    radial-gradient(circle at 80% 90%,#3d2418 0,transparent 26%),
    var(--leaf-deep);
  font:400 19px/1.5 var(--serif);
  -webkit-font-smoothing:antialiased;
}
body:before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.28;
  background-image:radial-gradient(circle,#f3d48a 1px,transparent 1.4px);
  background-size:22px 22px;
}
button,a{font:inherit;color:inherit}
button{cursor:pointer}
a{text-decoration:none}
.skip{position:absolute;left:12px;top:-60px;background:var(--ivory);padding:8px 12px;z-index:9}
.skip:focus{top:12px}

.gate{
  position:fixed;
  inset:0;
  z-index:8;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
  padding:28px 18px 32px;
  color:var(--gold);
}
.gate-veil{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(circle at 50% 42%,#1d5344 0,transparent 34%),
    radial-gradient(circle at 50% 88%,#3d2418 0,transparent 28%),
    var(--leaf-deep);
  transition:opacity .7s ease .45s;
}
.gate-copy,.doorway,.gate-hint{position:relative;z-index:1}
.gate-copy,.gate-hint{transition:opacity .45s ease,translate .45s ease}
.gate-kicker,.kicker{
  margin:0;
  font-size:12px;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
}
.gate-title{
  margin:6px 0 0;
  font:400 clamp(46px,13vw,72px)/.9 var(--script);
  color:#fff8e8;
}
.gate-title span{font-family:var(--serif);font-size:.42em;letter-spacing:.08em}
.gate-names{margin:8px 0 0;font-size:20px;color:#f6e7c4}
.gate-hint{margin:14px 0 0;letter-spacing:.18em;text-transform:uppercase;font-size:12px;color:#d7c39a}
.doorway{
  margin:6px 0 0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
}
.doorway:focus-visible .door-scene{outline:2px solid var(--gold);outline-offset:8px}
.door-scene{
  position:relative;
  display:block;
  width:min(300px,84vw);
  aspect-ratio:300 / 340;
  perspective:1200px;
}
.door-light{
  position:absolute;
  left:50%;
  top:46%;
  z-index:0;
  width:46%;
  height:78%;
  translate:-50% -50%;
  background:radial-gradient(ellipse,#f8e7b4 0,#f3d48a55 42%,transparent 72%);
  opacity:0;
  transition:opacity .8s ease .2s;
}
.door{
  position:absolute;
  top:0;
  z-index:1;
  width:calc(50% + 1px);
  height:100%;
  transition:transform 1.05s cubic-bezier(.65,.02,.2,1);
}
.door svg{display:block;width:100%;height:100%}
.door-left{
  left:0;
  transform-origin:left center;
  clip-path:polygon(5% 100%,5% 36%,12% 22%,28% 12%,48% 6%,70% 2%,100% 0,100% 100%);
}
.door-right{
  left:calc(50% - 1px);
  transform-origin:right center;
  clip-path:polygon(0 0,30% 2%,52% 6%,72% 12%,88% 22%,95% 36%,95% 100%,0 100%);
}
.door-right svg{transform:scaleX(-1)}
.door:after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 32%,#fff6d255 50%,transparent 68%);
  translate:-150% 0;
  animation:sheen 5.6s ease-in-out infinite;
  pointer-events:none;
}
.door-right:after{animation-delay:-2.6s}
.latch{
  position:absolute;
  left:50%;
  top:58%;
  z-index:3;
  width:54px;
  height:54px;
  transform:translate(-50%,-50%);
  animation:invite 2.8s ease-in-out infinite;
}
.latch svg{display:block;width:100%;height:100%}
.latch-ring{transform-box:fill-box;transform-origin:center;animation:spin 22s linear infinite}
.diya{
  position:absolute;
  bottom:0;
  z-index:4;
  width:34px;
}
.diya svg{display:block;width:100%;height:auto;overflow:visible}
.diya-l{left:0}
.diya-r{right:0}
.flame{transform-box:fill-box;transform-origin:center bottom;animation:flicker 1.35s ease-in-out infinite}
.diya-r .flame{animation-delay:-.55s}
.gate.is-open{pointer-events:none;animation:gate-fade .55s ease 1.15s forwards}
.gate.is-open .gate-copy,
.gate.is-open .gate-hint{opacity:0;translate:0 -12px;transition-delay:.12s}
.gate.is-open .door-light{opacity:1}
.gate.is-open .door-left{transform:rotateY(-76deg)}
.gate.is-open .door-right{transform:rotateY(76deg)}
.gate.is-open .latch{animation:seal-break .65s ease forwards}
.card:not(.is-here) .hero{opacity:0;translate:0 26px}
.card.is-here .hero{opacity:1;translate:0 0;transition:opacity .9s ease .4s,translate 1s cubic-bezier(.16,1,.3,1) .4s}

.card{
  width:min(460px,calc(100% - 28px));
  margin:18px auto 36px;
  background:#fff6df;
  color:var(--ink);
  border:1px solid #e2a322;
  box-shadow:0 24px 60px #04140f55;
  position:relative;
  z-index:1;
  overflow:clip;
}
.card:before{
  content:'';
  position:absolute;
  inset:10px;
  border:1px solid #f3d48a88;
  pointer-events:none;
}
.hero,.date-rite,.venue,.programme,.families,.close{position:relative;padding:54px 28px 36px;text-align:center;background:transparent;color:var(--ink)}
.hero{padding-top:64px}
.date-rite{padding-top:78px;padding-bottom:78px}
.names{margin:16px 0 0;font-weight:500;color:var(--henna);outline:none;-webkit-tap-highlight-color:transparent}
.names:focus,.names:focus-visible{outline:none}
.names span{display:block;font-size:clamp(34px,9vw,44px);line-height:1.05}
.names small{display:block;margin-top:6px;font:400 15px/1.35 var(--serif);color:#5c4636;letter-spacing:.01em}
.names em{display:block;margin:12px 0 10px;font:400 34px/1 var(--script);color:var(--marigold)}
.invite-line{margin:18px 0 0;font-style:italic;color:#5c4636}
.event-name{
  margin:4px 0 0;
  font:400 clamp(52px,14vw,68px)/.95 var(--script);
  color:var(--leaf);
}
.event-name span{font-family:var(--serif);font-style:italic;font-size:.4em}
.cue{display:inline-flex;gap:8px;margin-top:18px;letter-spacing:.16em;text-transform:uppercase;font-size:12px;font-weight:600;color:var(--henna)}
.hero .kicker,
.hero .names>span,
.hero .names small,
.hero .names em,
.hero .invite-line,
.hero .event-name,
.hero .cue{opacity:0}
.hero .kicker,
.hero .names small,
.hero .invite-line,
.hero .cue{translate:0 18px}
.hero .names>span,
.hero .event-name{clip-path:inset(-32% 130% -48% -28%)}
.hero .names em,
.hero .event-name span{scale:.2}
.hero .corner{opacity:0;scale:.2;transform-origin:center}
.corner-tl{transform-origin:0 0}
.corner-tr{transform-origin:100% 0}
.corner-bl{transform-origin:0 100%}
.corner-br{transform-origin:100% 100%}
.event-name{position:relative}
.event-name:after{
  content:'';
  display:block;
  width:42%;
  height:1px;
  margin:10px auto 0;
  background:linear-gradient(90deg,transparent,var(--marigold),transparent);
  scale:0 1;
}
.card.is-here .hero .corner{
  opacity:1;
  scale:1;
  transition:opacity .45s ease,scale .8s cubic-bezier(.16,1,.3,1);
}
.card.is-here .hero .corner-tr{transition-delay:.12s}
.card.is-here .hero .corner-bl{transition-delay:.22s}
.card.is-here .hero .corner-br{transition-delay:.32s}
.card.is-here .hero .kicker{
  opacity:1;
  translate:0 0;
  transition:opacity .5s ease 1.15s,translate .7s cubic-bezier(.16,1,.3,1) 1.15s;
}
.card.is-here .hero .names>span{
  clip-path:inset(-32% -24% -48% -28%);
  opacity:1;
  transition:clip-path 1.05s cubic-bezier(.65,.02,.2,1),opacity .2s ease;
}
.card.is-here .hero .names>span:first-of-type{transition-delay:1.35s}
.card.is-here .hero .names>span:last-of-type{transition-delay:2.35s}
.card.is-here .hero .names small{
  opacity:1;
  translate:0 0;
  transition:opacity .55s ease,translate .7s cubic-bezier(.16,1,.3,1);
}
.card.is-here .hero .names small:first-of-type{transition-delay:2.15s}
.card.is-here .hero .names small:last-of-type{transition-delay:3.15s}
.card.is-here .hero .names em{
  opacity:1;
  scale:1;
  transition:opacity .35s ease 2.2s,scale .7s cubic-bezier(.16,1,.3,1) 2.2s;
}
.card.is-here .hero .invite-line{
  opacity:1;
  translate:0 0;
  transition:opacity .55s ease 3.05s,translate .75s cubic-bezier(.16,1,.3,1) 3.05s;
}
.card.is-here .hero .event-name{
  opacity:1;
  clip-path:inset(-32% -24% -48% -28%);
  transition:clip-path 1.2s cubic-bezier(.65,.02,.2,1) 3.2s,opacity .2s ease 3.2s;
}
.card.is-here .hero .event-name span{
  scale:1;
  transition:scale .6s cubic-bezier(.16,1,.3,1) 3.75s;
}
.card.is-here .hero .event-name:after{
  scale:1 1;
  transition:scale .8s cubic-bezier(.16,1,.3,1) 4.25s;
}
.card.is-here .hero .cue{
  opacity:1;
  translate:0 0;
  transition:opacity .5s ease 4.35s,translate .7s cubic-bezier(.16,1,.3,1) 4.35s;
}

.date-rite h2,.venue h2,.programme h2,.families h2{margin:8px 0 0;font:400 42px/1 var(--script);color:var(--leaf)}
.lede{margin:12px auto 0;max-width:34ch;color:#4e4034}
.hand-button{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  margin:18px auto 0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--henna);
}
.hand-button:focus{outline:none}
.hand-button:focus-visible .hand-stage{outline:2px solid var(--henna);outline-offset:6px;border-radius:18px}
.palm-label{
  display:block;
  margin-top:12px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.date-rite{--turn:0}
.hand-stage{
  --act:0;
  position:relative;
  width:min(341px,114%);
  aspect-ratio:1;
  translate:0 calc((1 - var(--act))*12px);
  touch-action:none;
}
.hand-card{position:absolute;inset:0;z-index:1}
.hand-face{position:absolute;inset:0}
.hand-front{transform:perspective(900px) rotateY(0deg)}
.hand-back{transform:perspective(900px) rotateY(-90deg);opacity:0}
.date-rite.is-turning .hand-front,
.date-rite.is-turning .hand-back{transition:transform .08s linear,opacity .08s linear}
.date-rite.is-settling .hand-front,
.date-rite.is-settling .hand-back{transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .35s ease}
.date-rite.is-turning .hand-front{
  transform:perspective(900px) rotateY(calc(var(--turn) * 90deg));
  opacity:clamp(0, calc((0.58 - var(--turn)) * 4), 1);
}
.date-rite.is-turning .hand-back{
  transform:perspective(900px) rotateY(calc((var(--turn) - 1) * 90deg));
  opacity:clamp(0, calc((var(--turn) - 0.42) * 4), 1);
}
.date-rite.is-drawn:not(.is-turning) .hand-front{animation:hand-away .9s cubic-bezier(.16,1,.3,1) forwards}
.date-rite.is-drawn:not(.is-turning) .hand-back{animation:hand-in .9s cubic-bezier(.16,1,.3,1) forwards}
.date-rite.is-drawn.is-turning .hand-front{animation:none;opacity:0;transform:perspective(900px) rotateY(90deg)}
.date-rite.is-drawn.is-turning .hand-back{animation:none;opacity:1;transform:none}
.hand-stage.is-hint .hand-front{animation:nudge 1.6s ease .4s 2}
.hand-face img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;pointer-events:none;padding:5%;box-sizing:border-box}
.henna-date{
  position:absolute;
  left:54%;
  top:41%;
  translate:-50% -50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  width:max-content;
  max-width:62%;
  color:#4a121c;
  text-align:center;
  pointer-events:none;
  overflow:visible;
}
.henna-date span{display:block;clip-path:inset(-50% 120% -60% -40%);padding:0 .34em .08em;line-height:1.05}
.henna-date .quill{clip-path:none}
.date-rite.is-inked .henna-num{animation:write .42s linear .08s forwards}
.date-rite.is-inked .henna-day{animation:write .96s linear .64s forwards}
.date-rite.is-inked .henna-year{animation:write .5s linear 1.76s forwards}
.henna-num{font:400 42px/1 var(--script);padding-inline:.5em}
.henna-day{font:400 31px/1.05 var(--script)}
.henna-year{font:400 22px/1 var(--script);padding-inline:.7em}
.quill{
  position:absolute;
  left:0;
  top:0;
  width:46px;
  height:61px;
  margin-left:-11px;
  margin-top:-55px;
  overflow:visible;
  opacity:0;
  pointer-events:none;
  filter:drop-shadow(0 1px 1px #3a221433);
  transform-origin:11px 55px;
}
.date-rite.is-inked .quill{animation:quill 2.4s linear forwards}
.scene{
  --act:0;
  --pass:0;
  position:relative;
  z-index:1;
  width:calc(76px + var(--pass) * 56px);
  height:calc(76px + var(--pass) * 56px);
  overflow:hidden;
  border-radius:14px;
  background:#fbf6ea;
  flex:none;
}
.scene.is-now{z-index:2;box-shadow:0 10px 22px #12352b2e}
.scene-arrival{height:calc((76px + var(--pass) * 56px) * 2)}
.scene-dance{height:calc((76px + var(--pass) * 56px) * 2.2)}
.mover{display:block;width:100%;height:100%}
.scene img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.scene-vow img{object-position:center 16%}
.scene img.strip{
  width:400%;
  height:100%;
  max-width:none;
  object-fit:fill;
  object-position:left center;
}
.scene img.strip-3{width:300%}
.scene-arrival.is-now .strip{animation:film .72s steps(4) infinite}
.scene-tea.is-now .strip{animation:film 1.7s steps(4) infinite}
.scene-dance.is-now .strip{animation:film .9s steps(3) infinite}
.scene-dinner.is-now .strip{animation:film 1.45s steps(4) infinite}
.say{
  position:absolute;
  z-index:2;
  max-width:78%;
  padding:2px 7px 3px;
  border:1px solid #e2a322aa;
  border-radius:12px 12px 12px 3px;
  background:#fffaf3;
  color:#6e2b32;
  font:700 11px/1.15 "Urdu Typesetting","Segoe UI",sans-serif;
  opacity:0;
  scale:.7;
  pointer-events:none;
  transition:opacity .3s ease,scale .35s cubic-bezier(.16,1,.3,1);
}
.say-a{left:4%;bottom:8%;top:auto}
.say-b{right:4%;bottom:34%;top:auto;border-radius:12px 12px 3px 12px}
.scene-vow.is-now .say{opacity:1;scale:1}
.scene-vow.is-now .say-a{animation:speak 1.7s ease-in-out infinite}
.scene-vow.is-now .say-b{animation:speak 1.7s ease-in-out .55s infinite}
.steam{
  position:absolute;
  left:34%;
  top:16%;
  z-index:2;
  display:flex;
  gap:5px;
  opacity:0;
}
.steam i{
  display:block;
  width:3px;
  height:14px;
  border-radius:4px;
  background:linear-gradient(#fffef8,transparent);
}
.scene-tea.is-now .steam,.scene-dinner.is-now .steam{opacity:1}
.scene-tea.is-now .steam i,.scene-dinner.is-now .steam i{animation:rise 1.25s ease-in infinite}
.scene-tea.is-now .steam i:nth-child(2),.scene-dinner.is-now .steam i:nth-child(2){animation-delay:.28s;height:18px}
.scene-tea.is-now .steam i:nth-child(3),.scene-dinner.is-now .steam i:nth-child(3){animation-delay:.55s}
.scene-dinner .steam{left:42%;top:22%}
.cash{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.cash i{
  position:absolute;
  top:-20%;
  width:20%;
  height:10%;
  border:1px solid #2d4a28;
  border-radius:2px;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 18%, #2d4a2833 19% 22%, transparent 23%),
    linear-gradient(90deg, #d5e2c4 0 38%, #9db57a 38% 46%, #d5e2c4 46% 100%);
  opacity:0;
}
.cash i:before{
  content:"Rs";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#1c4034;
  font:700 8px/1 "Segoe UI",sans-serif;
}
.scene-qawwali.is-now .cash i{animation:shower 1.55s linear infinite}
.cash i:nth-child(1){left:4%;animation-delay:0s}
.cash i:nth-child(2){left:28%;width:22%;animation-delay:.35s;animation-duration:1.7s}
.cash i:nth-child(3){left:52%;animation-delay:.15s}
.cash i:nth-child(4){left:70%;width:24%;animation-delay:.7s;animation-duration:1.4s}
.cash i:nth-child(5){left:16%;width:20%;animation-delay:.95s;animation-duration:1.8s}
.cash i:nth-child(6){left:40%;animation-delay:1.15s}
.cash i:nth-child(7){left:62%;width:18%;animation-delay:.55s;animation-duration:1.65s}
.cash i:nth-child(8){left:8%;width:24%;animation-delay:1.35s;animation-duration:1.5s}
.date-readout{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
}
.date-rite.is-drawn .palm-label,
.date-rite.is-drawn .lede,
.date-rite.is-drawn .text-reveal{display:none}
.text-reveal{
  margin-top:8px;
  border:0;
  background:transparent;
  color:var(--henna);
  font-size:13px;
  letter-spacing:.08em;
  text-decoration:underline;
  text-underline-offset:3px;
}
.map-frame{margin:18px 0 0;border:1px solid #12352b33;background:#fffaf3}
.map-frame iframe{display:block;width:100%;height:210px;border:0}
.directions{
  display:flex;
  justify-content:center;
  gap:6px;
  padding:12px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--leaf);
}
.evening{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  text-align:left;
}
.stop{margin:0 0 16px}
.stop{--pass:0}
.hour{
  display:grid;
  grid-template-columns:calc(76px + var(--pass) * 56px) 1fr;
  column-gap:12px;
  align-items:center;
}
.scene{grid-column:1;grid-row:1 / span 2}
.when{grid-column:2;grid-row:1;align-self:end;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--henna);font-variant-numeric:tabular-nums}
.what{grid-column:2;grid-row:2;align-self:start;font-size:22px;font-weight:500;line-height:1.1;color:var(--ink)}
.note{display:block;margin:2px 0 0 calc(88px + var(--pass) * 56px);color:#4e4034;font-size:17px}

.family-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px;text-align:left}
.family-grid h3{margin:0 0 8px;font-size:18px;color:var(--leaf)}
.family-grid a{display:block;margin:0 0 10px;color:var(--ink)}
.family-grid span{display:block}
.family-grid span+span{color:#5c4636;font-variant-numeric:tabular-nums}
.close{padding-bottom:64px}
.close p{margin:0;font:400 30px/1.25 var(--script);color:var(--leaf)}
.close-names{margin-top:8px!important;font-family:var(--serif)!important;font-size:18px!important;letter-spacing:.04em;color:var(--ink)}

.henna-frame{position:absolute;inset:0;pointer-events:none}
.corner{position:absolute;width:54px;height:54px;border:1.5px solid var(--marigold)}
.corner-tl{top:16px;left:16px;border-right:0;border-bottom:0}
.corner-tr{top:16px;right:16px;border-left:0;border-bottom:0}
.corner-bl{bottom:16px;left:16px;border-right:0;border-top:0}
.corner-br{bottom:16px;right:16px;border-left:0;border-top:0}
.corner:after{
  content:'';
  position:absolute;
  width:8px;height:8px;border-radius:50%;
  background:var(--henna);
}
.corner-tl:after{left:6px;top:6px}
.corner-tr:after{right:6px;top:6px}
.corner-bl:after{left:6px;bottom:6px}
.corner-br:after{right:6px;bottom:6px}

.garland-art{
  display:block;
  width:min(340px,100%);
  height:auto;
  margin:0 auto 4px;
  overflow:visible;
  transform-origin:center;
  animation:garland-sway 5.6s ease-in-out infinite;
}
.garland-foot{margin:12px auto 0}
.petal-field{position:absolute;inset:0;z-index:0;pointer-events:none}
.petal,.sprig{position:absolute;display:block}
.petal{
  width:16px;
  height:22px;
  border-radius:72% 72% 72% 12%;
  transform:rotate(var(--spin,0deg));
  animation:drift 4.8s ease-in-out infinite;
}
.petal-rose{background:radial-gradient(circle at 38% 32%,#f8d5d0,#e23b4a 58%,#8d2433)}
.petal-gold{background:radial-gradient(circle at 38% 32%,#fff1c4,#e2a322 58%,#c4552a)}
.petal:nth-child(odd){animation-delay:-1.4s}
.sprig{
  width:24px;
  height:11px;
  border-radius:0 100% 0 100%;
  background:linear-gradient(135deg,#12352b,#1b8a58);
}

.venue::before,
.programme::before,
.families::before,
.close::before{
  content:'';
  display:block;
  width:min(210px,68%);
  height:9px;
  margin:0 auto 4px;
  background:
    linear-gradient(var(--marigold),var(--marigold)) center/100% 1.5px no-repeat,
    linear-gradient(45deg,transparent 46%,var(--henna) 46% 54%,transparent 54%) center/8px 8px no-repeat;
}
@supports (animation-timeline:view()){
  .garland-art{
    animation:garland-sway 5.6s ease-in-out infinite,garland-arrive linear both;
    animation-timeline:auto,view();
    animation-range:normal,entry 0% cover 42%;
  }
  .garland-art>path:first-of-type{
    stroke-dasharray:520;
    stroke-dashoffset:520;
    animation:vine-draw linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 50%;
  }
  .date-rite .corner,
  .date-rite .kicker,
  .date-rite h2,
  .date-rite .lede,
  .date-rite .hand-button,
  .date-rite .text-reveal,
  .venue::before,
  .venue .kicker,
  .venue h2,
  .venue .lede,
  .venue .map-frame,
  .programme::before,
  .programme .kicker,
  .programme h2,
  .programme .stop,
  .families::before,
  .families .kicker,
  .families h2,
  .families .family-grid>div,
  .close::before,
  .close p{
    animation-timeline:view();
    animation-fill-mode:both;
    animation-timing-function:linear;
  }
  .date-rite .corner{animation-name:scrub-corner;animation-range:entry 0% cover 34%}
  .date-rite .kicker,.venue .kicker,.programme .kicker,.families .kicker{animation-name:scrub-rise;animation-range:entry 0% cover 36%}
  .date-rite h2,.venue h2,.programme h2,.families h2{animation-name:scrub-write;animation-range:entry 0% cover 52%}
  .date-rite .lede,.venue .lede{animation-name:scrub-rise;animation-range:entry 12% cover 58%}
  .date-rite .hand-button{animation-name:scrub-hand;animation-range:entry 0% cover 48%}
  .date-rite .text-reveal{animation-name:scrub-rise;animation-range:entry 20% cover 62%}
  .venue::before,.programme::before,.families::before,.close::before{animation-name:scrub-rule;animation-range:entry 0% cover 32%}
  .venue .map-frame{animation-name:scrub-iris;animation-range:entry 0% cover 36%}
  .programme .stop{animation-name:scrub-left;animation-range:entry 0% cover 50%}
  .programme .stop:nth-child(even){animation-name:scrub-right}
  .families .family-grid>div{animation-name:scrub-meet-l;animation-range:entry 0% cover 34%}
  .families .family-grid>div:last-child{animation-name:scrub-meet-r}
  .close::before{animation-range:entry 0% entry 100%}
  .close p{animation-name:scrub-bloom;animation-range:entry 0% cover 16%}
  .close .close-names{animation-range:entry 0% entry 100%}
}
@supports not (animation-timeline:view()){
  .date-rite .kicker,.date-rite h2,.date-rite .lede,.date-rite .hand-button,.date-rite .text-reveal,
  .venue .kicker,.venue h2,.venue .lede,.venue .map-frame,
  .programme .kicker,.programme h2,.programme .stop,
  .families .kicker,.families h2,.families .family-grid>div,
  .close p{opacity:0}
  .date-rite h2,.venue h2,.programme h2,.families h2{clip-path:inset(-35% 120% -50% -24%)}
  .date-rite .hand-button,.date-rite .lede,.venue .lede,.programme .kicker,.families .kicker,.close p{translate:0 28px}
  .programme .stop:nth-child(odd),.families .family-grid>div:first-child{translate:-48px 0}
  .programme .stop:nth-child(even),.families .family-grid>div:last-child{translate:48px 0}
  .venue .map-frame{clip-path:circle(0% at 50% 42%);scale:.9}
  .reveal.is-in .kicker,.reveal.is-in h2,.reveal.is-in .lede,.reveal.is-in .hand-button,.reveal.is-in .text-reveal,
  .reveal.is-in .map-frame,.reveal.is-in .stop,.reveal.is-in .family-grid>div,.reveal.is-in p{
    opacity:1;
    translate:0 0;
    scale:1;
    clip-path:none;
    transition:opacity .7s ease,translate .9s cubic-bezier(.16,1,.3,1),clip-path 1s cubic-bezier(.65,.02,.2,1),scale .9s cubic-bezier(.16,1,.3,1);
  }
}
body.paused .hero .kicker,
body.paused .hero .names>span,
body.paused .hero .names small,
body.paused .hero .names em,
body.paused .hero .invite-line,
body.paused .hero .event-name,
body.paused .hero .event-name span,
body.paused .hero .cue,
body.paused .hero .corner,
body.paused .date-rite .kicker,
body.paused .date-rite h2,
body.paused .date-rite .lede,
body.paused .date-rite .hand-button,
body.paused .date-rite .text-reveal,
body.paused .date-rite .corner,
body.paused .venue .kicker,
body.paused .venue h2,
body.paused .venue .lede,
body.paused .venue .map-frame,
body.paused .programme .kicker,
body.paused .programme h2,
body.paused .programme .stop,
body.paused .families .kicker,
body.paused .families h2,
body.paused .families .family-grid>div,
body.paused .close p{
  animation:none!important;
  opacity:1!important;
  translate:0 0!important;
  scale:1!important;
  clip-path:none!important;
  filter:none!important;
}
body.paused .hero .event-name:after,
body.paused .venue::before,
body.paused .programme::before,
body.paused .families::before,
body.paused .close::before{animation:none!important;scale:1 1!important;opacity:1!important}
body.paused .garland-art>path:first-of-type{animation:none!important;stroke-dashoffset:0}
.chapter-frame{display:contents}
.chapter-runway{height:0;overflow:hidden}
.chapter-panel{position:relative;top:auto}

.motion-toggle{
  position:fixed;
  right:14px;
  bottom:max(14px,env(safe-area-inset-bottom));
  z-index:4;
  border:1px solid #f3d48a88;
  background:#fbf6eae8;
  color:var(--leaf);
  border-radius:999px;
  padding:8px 12px;
  font-size:13px;
}
body.paused .mover,
body.paused .scene img,
body.paused .say,
body.paused .steam i,
body.paused .cash i,
body.paused .quill,
body.paused .flame,
body.paused .latch,
body.paused .latch-ring,
body.paused .door:after,
body.paused .petal,
body.paused .garland-art{animation:none!important}
body.paused .date-rite.is-inked .henna-date span{animation:none!important;clip-path:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .gate.is-open,.mover,.scene img,.say,.steam i,.cash i,.flame,.latch,.latch-ring,.door:after,.quill,.henna-date span,.petal,.garland-art{animation:none!important}
  .say{opacity:0}
  .quill{display:none}
  .henna-date span{clip-path:none}
  .door{transition:none}
  .hero .kicker,.hero .names>span,.hero .names small,.hero .names em,.hero .invite-line,.hero .event-name,.hero .event-name span,.hero .cue,.hero .corner,
  .date-rite .kicker,.date-rite h2,.date-rite .lede,.date-rite .hand-button,.date-rite .text-reveal,.date-rite .corner,
  .venue .kicker,.venue h2,.venue .lede,.venue .map-frame,.programme .kicker,.programme h2,.programme .stop,
  .families .kicker,.families h2,.families .family-grid>div,.close p,.card:not(.is-here) .hero{opacity:1;translate:0 0;scale:1;rotate:0deg;filter:none;clip-path:none}
  .hero .event-name:after,.venue::before,.programme::before,.families::before,.close::before{scale:1 1;opacity:1}
  .garland-art>path:first-of-type{stroke-dashoffset:0}
  .scene,.hand-stage{--act:1;--pass:0}
  .date-rite.is-drawn .hand-front{animation:none;opacity:0}
  .date-rite.is-drawn .hand-back{animation:none;opacity:1;transform:none}
}
@keyframes garland-sway{50%{rotate:1.4deg}}
@keyframes garland-arrive{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes vine-draw{to{stroke-dashoffset:0}}
@keyframes scrub-rise{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes scrub-write{from{opacity:.15;clip-path:inset(-35% 125% -50% -24%)}to{opacity:1;clip-path:inset(-35% -24% -50% -24%)}}
@keyframes scrub-hand{0%{opacity:0;translate:0 64px}70%{opacity:1;translate:0 -6px}100%{opacity:1;translate:0 0}}
@keyframes scrub-corner{from{opacity:0;scale:.2}to{opacity:1;scale:1}}
@keyframes scrub-rule{from{opacity:0;scale:0 1}to{opacity:1;scale:1 1}}
@keyframes scrub-iris{from{opacity:.35;clip-path:circle(8% at 50% 42%);scale:.86}to{opacity:1;clip-path:circle(140% at 50% 42%);scale:1}}
@keyframes scrub-left{0%{opacity:0;translate:-72px 0}76%{opacity:1;translate:8px 0}100%{opacity:1;translate:0 0}}
@keyframes scrub-right{0%{opacity:0;translate:72px 0}76%{opacity:1;translate:-8px 0}100%{opacity:1;translate:0 0}}
@keyframes scrub-meet-l{0%{opacity:0;translate:-46vw 0}78%{opacity:1;translate:10px 0}100%{opacity:1;translate:0 0}}
@keyframes scrub-meet-r{0%{opacity:0;translate:46vw 0}78%{opacity:1;translate:-10px 0}100%{opacity:1;translate:0 0}}
@keyframes scrub-bloom{0%{opacity:0;scale:.84;translate:0 18px}100%{opacity:1;scale:1;translate:0 0}}
@keyframes drift{
  0%,100%{translate:0 0}
  50%{translate:0 -7px}
}
@keyframes nudge{
  0%,100%{transform:perspective(900px) rotateY(0deg)}
  45%{transform:perspective(900px) rotateY(16deg)}
}
@keyframes write{to{clip-path:inset(-50% -40% -60% -40%)}}
@keyframes quill{
  0%{opacity:0;left:30%;top:10%;rotate:-78deg}
  4%{opacity:1;left:32%;top:22%;rotate:-64deg}
  20%{opacity:1;left:68%;top:22%;rotate:-50deg}
  24%{opacity:0;left:74%;top:8%;rotate:-80deg}
  27%{opacity:0;left:-2%;top:50%;rotate:-72deg}
  30%{opacity:1;left:0%;top:62%;rotate:-62deg}
  66%{opacity:1;left:100%;top:60%;rotate:-46deg}
  70%{opacity:0;left:108%;top:46%;rotate:-74deg}
  73%{opacity:0;left:16%;top:78%;rotate:-70deg}
  76%{opacity:1;left:22%;top:90%;rotate:-58deg}
  94%{opacity:1;left:78%;top:88%;rotate:-44deg}
  100%{opacity:0;left:86%;top:74%;rotate:-68deg}
}
@keyframes hand-away{
  0%{transform:perspective(900px) rotateY(0deg);opacity:1}
  46%{opacity:1}
  50%{transform:perspective(900px) rotateY(90deg);opacity:0}
  100%{transform:perspective(900px) rotateY(90deg);opacity:0}
}
@keyframes hand-in{
  0%{transform:perspective(900px) rotateY(-90deg);opacity:0}
  50%{transform:perspective(900px) rotateY(-90deg);opacity:0}
  54%{opacity:1}
  100%{transform:perspective(900px) rotateY(0deg);opacity:1}
}
@keyframes film{to{translate:-100% 0}}
@keyframes shower{
  0%{top:-20%;rotate:-16deg;opacity:0}
  14%{opacity:1}
  100%{top:108%;rotate:20deg;opacity:0}
}
@keyframes walk{
  0%,100%{translate:-8% 0}
  35%{translate:-20% -3px}
  70%{translate:-30% 0}
}
@keyframes lift{50%{translate:0 -4px;scale:1.03}}
@keyframes dance{
  0%,100%{translate:0 0;rotate:-2.5deg}
  50%{translate:2px -5px;rotate:3deg}
}
@keyframes serve{50%{translate:0 -5px;scale:1.05}}
@keyframes qawwal{50%{rotate:2.5deg;translate:2px -2px}}
@keyframes speak{50%{translate:0 -3px}}
@keyframes rise{
  0%{translate:0 8px;opacity:0}
  35%{opacity:.9}
  100%{translate:0 -18px;opacity:0}
}
@keyframes floatn{
  0%,100%{translate:0 5px;opacity:.25}
  50%{translate:0 -8px;opacity:1}
}
@keyframes swing{50%{rotate:-4deg}}
@keyframes step{50%{translate:0 -3px}}
@keyframes hop{50%{translate:0 -3px}}
@keyframes sway{50%{rotate:4deg}}
@keyframes bob{50%{translate:0 -3px}}
@keyframes pop{0%{scale:.94}65%{scale:1.04}100%{scale:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes gate-fade{to{opacity:0;visibility:hidden}}
@keyframes sheen{0%,58%{translate:-150% 0}82%,100%{translate:160% 0}}
@keyframes flicker{0%,100%{transform:scale(1,1);opacity:1}45%{transform:scale(.92,1.16);opacity:.82}72%{transform:scale(1.06,.9);opacity:1}}
@keyframes invite{0%,100%{filter:drop-shadow(0 0 0 #f3d48a00)}50%{filter:drop-shadow(0 0 7px #f3d48acc)}}
@keyframes seal-break{to{transform:translate(-50%,-50%) scale(1.4) rotate(16deg);opacity:0}}
@media(max-width:700px){
  .hero,.venue,.programme,.families,.close{padding:28px 22px 22px}
  .hero{padding-top:32px}
  .date-rite{padding:48px 22px 28px}
  .corner{width:36px;height:36px}
  .close{padding-bottom:72px}
}
@media(max-width:380px){
  .family-grid{grid-template-columns:1fr}
  .hero,.date-rite,.venue,.programme,.families,.close{padding-left:20px;padding-right:20px}
  .what{font-size:20px}
  .note{margin-left:0}
}

/* RSVP uses the shared form behaviour and this invitation’s palette. */
.rsvp-dialog{border:1px solid var(--marigold);padding:45px 34px 28px;width:min(440px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow-y:auto;background:var(--ivory);color:var(--ink);box-shadow:0 20px 80px #19060d66;border-radius:24px 24px 4px 4px}
.rsvp-dialog::backdrop{background:#0c241cb8;backdrop-filter:blur(5px)}
.dialog-close{position:absolute;right:13px;top:9px;width:40px;height:40px;border:0;background:transparent;color:var(--leaf);font-size:30px;line-height:1}
.dialog-heading{text-align:center;margin-bottom:22px}
.dialog-heading h2{font-size:49px;margin:8px 0}
.dialog-heading p{font-size:17px}
.rsvp-dialog label,.rsvp-dialog legend{font-size:17px;font-weight:500}
.rsvp-dialog input[type=text],.rsvp-dialog input[type=number]{display:block;width:100%;border:0;border-bottom:1px solid #b79c7b;background:#fffaf040;border-radius:0;padding:12px 8px;margin:8px 0 24px;color:var(--leaf);font-size:18px}
.rsvp-dialog input::placeholder{color:#93816f;font-size:14px}
.rsvp-dialog input[type=radio]{accent-color:var(--leaf);width:18px;height:18px;margin:0}
.rsvp-dialog fieldset{border:0;margin:0 0 24px;padding:0}
.rsvp-dialog legend{margin-bottom:13px}
.radio-option{display:flex;gap:12px;align-items:center;min-height:44px;cursor:pointer}
.submit-button{display:flex;align-items:center;justify-content:space-between;width:100%;border:1px solid var(--leaf);background:var(--leaf);color:var(--ivory);padding:13px 20px;font-size:17px}
.submit-button:hover{background:var(--leaf-deep)}
.form-status{font-size:16px;line-height:1.5;margin-top:15px;color:var(--leaf)}
.form-status:empty{display:none}
.dialog-signature{text-align:center;font-size:29px;margin-top:25px}
.contact-panel{margin-top:28px;padding-top:19px;border-top:1px solid #b18c5866}
.contact-panel>h3{text-align:center;font-family:var(--serif);font-size:14px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#78664e}

body.dialog-open{overflow:hidden}
.rsvp-dialog .dialog-heading h2{font:400 49px/1.1 var(--script);color:var(--leaf)}
.rsvp-dialog .kicker{font-size:10px;color:var(--henna)}
.rsvp-dialog .dialog-signature{font-family:var(--script)}
.rsvp-dialog .contact-groups{display:grid;gap:20px}
.rsvp-dialog .contact-group h4{margin:8px 0;font-size:17px;color:var(--leaf)}
.rsvp-dialog .contact-group a{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:15px}
.rsvp-dialog .contact-group a span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.rsvp-trigger{display:inline-flex;align-items:center;gap:28px;margin:18px 0 28px;border:1px solid var(--gold);border-radius:999px;background:var(--leaf);color:var(--gold);padding:13px 30px;font-size:20px}
.rsvp-trigger:hover{background:var(--leaf-deep)}
.contact-heading{font-size:17px;font-weight:500;margin:8px 0 22px}
.submit-button:disabled{opacity:.65;cursor:wait}
.rsvp-dialog :focus-visible,.rsvp-trigger:focus-visible{outline:2px solid var(--marigold);outline-offset:4px}
@media(max-width:480px){.rsvp-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px);padding:52px 22px 25px}.dialog-close{top:10px;right:12px}}

.rsvp-dialog[open]{animation:rsvp-arrive .25s ease-out}
@keyframes rsvp-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
body.paused .rsvp-dialog[open]{animation:none}
@media(prefers-reduced-motion:reduce){.rsvp-dialog[open]{animation:none}}