:root{
  --rose:#6D1A28;
  --rose-mid:#5A1622;
  --rose-deep:#4E1220;
  --rose-ink:#3A0B14;
  --gold:#FFC30B;
  --gold-soft:rgba(255,195,11,.42);
  --gold-line:rgba(255,195,11,.24);
  --gold-faint:rgba(255,195,11,.14);
  --cream:#F7EDDF;
  --cream-dim:rgba(247,237,223,.76);
  --cream-faint:rgba(247,237,223,.52);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --script:"Pinyon Script","Cormorant Garamond",cursive;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --pad:clamp(1.25rem,5.5vw,2.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100dvh;
  background:linear-gradient(180deg,#6D1A28 0%,#5A1622 34%,#4E1220 70%,#3A0B14 100%);
  color:var(--cream);
  font-family:var(--serif);
  font-size:clamp(1.0625rem,.98rem + .3vw,1.1875rem);
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

html.is-locked,body.is-locked{overflow:hidden}
html.is-locked{overscroll-behavior-y:none}

h1,h2,h3,p,blockquote,figure{margin:0}
button{font:inherit;color:inherit}
a{color:inherit}

.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.fl{fill:none;stroke:var(--gold);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.ln{fill:none;stroke:var(--gold);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:.82}

.eyebrow{
  font-family:var(--sans);
  font-size:.6875rem;
  font-weight:400;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:rgba(255,195,11,.8);
  line-height:1.6;
}

.script{
  font-family:var(--script);
  font-weight:400;
  line-height:1.1;
  color:var(--cream);
}

.script .amp{
  font-size:.62em;
  color:var(--gold);
  vertical-align:.14em;
  padding-inline:.06em;
}

.title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.7rem,5.4vw,2.3rem);
  line-height:1.22;
  letter-spacing:.005em;
}

.lede{
  color:var(--cream-dim);
  font-size:clamp(1rem,.95rem + .25vw,1.1rem);
  line-height:1.85;
  max-width:32rem;
}

.section{
  position:relative;
  padding:clamp(3.25rem,9vw,5.5rem) var(--pad);
  overflow:hidden;
}

main{
  position:relative;
  z-index:1;
}

.wrap{
  position:relative;
  z-index:1;
  width:100%;
  max-width:34rem;
  margin-inline:auto;
}

.divider{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:clamp(1.75rem,5vw,2.5rem) auto;
  color:var(--gold);
  opacity:.8;
}

.divider svg{width:clamp(9rem,46vw,13rem);height:auto}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  min-height:52px;
  padding:0 clamp(1.5rem,6vw,2.25rem);
  border:1px solid var(--gold);
  border-radius:2px;
  background:var(--gold);
  color:#3A0B14;
  font-family:var(--sans);
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),transform .2s var(--ease);
}

.btn:hover{background:transparent;color:var(--gold)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid rgba(255,195,11,.55);outline-offset:3px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:disabled:hover{background:var(--gold);color:#3A0B14}

.btn--full{width:100%;margin-top:1.75rem}

.btn--ghost{
  min-height:44px;
  padding:0 1.25rem;
  background:transparent;
  border-color:var(--gold-soft);
  color:var(--gold);
  font-size:.6875rem;
  letter-spacing:.2em;
}

.btn--ghost:hover{background:rgba(255,195,11,.1);color:var(--gold)}
.btn--ghost[data-state="done"]{border-color:var(--gold);color:var(--cream);background:rgba(255,195,11,.12)}

.cover{
  position:fixed;
  inset:0;
  z-index:60;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:calc(2rem + env(safe-area-inset-top)) var(--pad) calc(2rem + env(safe-area-inset-bottom));
  background:radial-gradient(118% 86% at 50% 26%,#82202F 0%,#6D1A28 44%,#4E1220 100%);
  transition:opacity .9s var(--ease),visibility .9s var(--ease);
}

.cover.is-closing{opacity:0;visibility:hidden;pointer-events:none}
.cover[hidden]{display:none}

.cover__inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:26rem;
  text-align:center;
}

.cover__names{
  font-family:var(--script);
  font-size:clamp(2.75rem,13.5vw,4.25rem);
  line-height:1.06;
  margin:.35rem 0 .9rem;
  color:var(--cream);
}

.cover__names .amp{font-size:.6em;color:var(--gold);vertical-align:.14em}

.cover__date{
  font-family:var(--sans);
  font-size:.75rem;
  font-weight:300;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--cream-dim);
}

.monogram{
  position:relative;
  width:clamp(4.75rem,20vw,6rem);
  aspect-ratio:1;
  margin:0 auto 1.5rem;
  display:grid;
  place-items:center;
  border:1px solid var(--gold-soft);
  border-radius:50%;
  font-family:var(--script);
  font-size:clamp(1.5rem,6.5vw,1.9rem);
  color:var(--gold);
  line-height:1;
}

.monogram::before{
  content:"";
  position:absolute;
  inset:.42rem;
  border:1px solid var(--gold-faint);
  border-radius:50%;
}

.corner{
  position:absolute;
  z-index:0;
  width:clamp(8.5rem,37vw,15rem);
  color:var(--gold);
  opacity:.6;
  pointer-events:none;
}

.corner svg{width:100%;height:auto;animation:sway 15s ease-in-out infinite alternate}
.corner--tl{top:-1.25rem;left:-2.75rem}
.corner--tr{top:-1.25rem;right:-2.75rem;transform:scaleX(-1)}
.corner--bl{bottom:-1.75rem;left:-2.75rem;transform:scaleY(-1)}
.corner--br{bottom:-1.75rem;right:-2.75rem;transform:scale(-1,-1)}
.corner--tr svg{animation-delay:-3.5s}
.corner--bl svg{animation-delay:-7s}
.corner--br svg{animation-delay:-10.5s}
.corner--ml{left:-2.25rem;top:50%;margin-top:-1.75rem;width:clamp(5rem,24vw,8.5rem);opacity:.3}
.corner--mr{right:-2.25rem;top:50%;margin-top:-1.75rem;width:clamp(5rem,24vw,8.5rem);opacity:.3;transform:scaleX(-1)}
.corner--ml svg{animation-delay:-5.25s}
.corner--mr svg{animation-delay:-12s}

@keyframes sway{
  from{rotate:-1.5deg}
  to{rotate:1.5deg}
}

.petal{
  position:absolute;
  z-index:1;
  width:9px;
  height:14px;
  border:1px solid rgba(255,195,11,.45);
  border-radius:100% 0 100% 0;
  opacity:0;
  animation:drift 18s linear infinite;
  pointer-events:none;
}

.petal:nth-of-type(1){left:14%;top:-8%;animation-delay:-2s;animation-duration:19s}
.petal:nth-of-type(2){left:32%;top:-8%;animation-delay:-9s;animation-duration:23s}
.petal:nth-of-type(3){left:58%;top:-8%;animation-delay:-5s;animation-duration:21s}
.petal:nth-of-type(4){left:74%;top:-8%;animation-delay:-14s;animation-duration:26s}
.petal:nth-of-type(5){left:88%;top:-8%;animation-delay:-11s;animation-duration:24s}
.petal:nth-of-type(6){left:6%;top:-8%;width:7px;height:11px;animation-delay:-16s;animation-duration:22s}
.petal:nth-of-type(7){left:23%;top:-8%;width:11px;height:16px;animation-delay:-7s;animation-duration:25s}
.petal:nth-of-type(8){left:44%;top:-8%;width:6px;height:10px;animation-delay:-19s;animation-duration:20s}
.petal:nth-of-type(9){left:66%;top:-8%;width:10px;height:15px;animation-delay:-3s;animation-duration:28s}
.petal:nth-of-type(10){left:81%;top:-8%;width:7px;height:12px;animation-delay:-13s;animation-duration:23s}
.petal:nth-of-type(11){left:95%;top:-8%;width:9px;height:14px;animation-delay:-20s;animation-duration:27s}

@keyframes drift{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(0deg)}
  10%{opacity:.5}
  85%{opacity:.35}
  100%{opacity:0;transform:translate3d(3.5rem,112vh,0) rotate(210deg)}
}

.flower{
  color:var(--gold);
  --draw:1;
}

.flower svg{
  display:block;
  width:100%;
  height:auto;
  stroke-dasharray:1 1;
  stroke-dashoffset:var(--draw);
  animation:sway 16s ease-in-out infinite alternate;
  transition:stroke-dashoffset 1.8s var(--ease);
}

.flower.is-grown{--draw:0}

.orn{
  position:absolute;
  z-index:0;
  pointer-events:none;
  opacity:.4;
  --par:0deg;
  --px:0;
  --py:0;
  transform:translate3d(calc(var(--px) * 1px),calc(var(--py) * 1px),0) rotate(var(--par));
  transition:opacity .5s var(--ease),transform .8s var(--ease);
}

.orn svg{pointer-events:auto;transition:animation-duration .3s linear}

.orn:hover{opacity:.72}
.orn:hover svg{animation-duration:5.5s}
.orn.is-blooming{opacity:.85}
.orn.is-blooming svg,.flower.is-blooming svg{animation-duration:2.2s}

.orn--mx svg{transform:scaleX(-1)}
.orn--my svg{transform:scaleY(-1)}
.orn--mxy svg{transform:scale(-1,-1)}

.orn--hero-l{width:clamp(5.5rem,22vw,8.5rem);top:-.75rem;left:-.75rem;opacity:.34}
.orn--hero-r{width:clamp(5.5rem,22vw,8.5rem);top:-.75rem;right:-.75rem;opacity:.34}
.orn--acara{width:clamp(6rem,24vw,9.5rem);right:-1rem;bottom:-1rem;opacity:.26}
.orn--rsvp{width:clamp(5rem,21vw,8rem);right:-1.25rem;top:1.75rem;opacity:.24}
.orn--gift{width:clamp(5.5rem,22vw,8.5rem);left:-1.25rem;bottom:-1rem;opacity:.24}
.orn--footer{width:clamp(5rem,20vw,7.5rem);left:-1.25rem;bottom:.5rem;opacity:.2}

.orn--hero-bl{width:clamp(4.5rem,19vw,7rem);left:-.75rem;bottom:-.75rem;opacity:.26}
.orn--hero-br{width:clamp(4.5rem,19vw,7rem);right:-.75rem;bottom:-.75rem;opacity:.26}
.orn--quote-l{width:clamp(5rem,22vw,8rem);left:-1.5rem;top:8%;opacity:.22}
.orn--quote-r{width:clamp(5rem,22vw,8rem);right:-1.5rem;bottom:8%;opacity:.22}
.orn--acara-l{width:clamp(5.5rem,23vw,8.5rem);left:-1.5rem;bottom:-1rem;opacity:.24}
.orn--acara-tr{width:clamp(4.5rem,19vw,7rem);right:-1rem;top:-.5rem;opacity:.24}
.orn--rsvp-l{width:clamp(5rem,21vw,8rem);left:-1.5rem;bottom:-.75rem;opacity:.22}
.orn--rsvp-br{width:clamp(4.5rem,19vw,7rem);right:-1rem;bottom:3rem;opacity:.2}
.orn--gift-tl{width:clamp(4.5rem,19vw,7rem);left:-1.25rem;top:-.5rem;opacity:.22}
.orn--gift-tr{width:clamp(4rem,17vw,6rem);right:-1rem;top:2.5rem;opacity:.2}
.orn--footer-l{width:clamp(4rem,17vw,6rem);left:-.75rem;top:.5rem;opacity:.18}
.orn--footer-r{width:clamp(4.5rem,19vw,7rem);right:-1rem;bottom:-.5rem;opacity:.2}

.orn--quote{
  width:clamp(11rem,52vw,17rem);
  left:50%;
  top:50%;
  margin-left:calc(clamp(11rem,52vw,17rem) / -2);
  margin-top:calc(clamp(11rem,52vw,17rem) / -2);
  opacity:.13;
}

.gift__crest{width:3.25rem;margin:0 auto 1.2rem;opacity:.9}
.footer__crest{width:4.5rem;margin:0 auto 1.1rem;opacity:.85}

.footer > :not(.orn){position:relative;z-index:1}

.petal-field,.dust-field{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

.flake{
  position:absolute;
  top:-7vh;
  width:8px;
  height:13px;
  border:1px solid rgba(255,195,11,.42);
  border-radius:100% 0 100% 0;
  opacity:0;
  animation:fall linear infinite;
}

.flake:nth-child(1){left:2%;animation-duration:29s;animation-delay:-4s;--sway:1.8rem}
.flake:nth-child(2){left:8%;width:10px;height:15px;animation-duration:34s;animation-delay:-19s;--sway:2.8rem}
.flake:nth-child(3){left:14%;width:6px;height:10px;animation-duration:24s;animation-delay:-9s;--sway:1.2rem}
.flake:nth-child(4){left:20%;animation-duration:37s;animation-delay:-27s;--sway:3.2rem}
.flake:nth-child(5){left:26%;width:11px;height:16px;animation-duration:30s;animation-delay:-2s;--sway:2rem}
.flake:nth-child(6){left:32%;width:7px;height:11px;animation-duration:26s;animation-delay:-14s;--sway:1.4rem}
.flake:nth-child(7){left:38%;animation-duration:33s;animation-delay:-22s;--sway:2.4rem}
.flake:nth-child(8){left:44%;width:9px;height:14px;animation-duration:28s;animation-delay:-7s;--sway:1.6rem}
.flake:nth-child(9){left:50%;width:6px;height:9px;animation-duration:39s;animation-delay:-31s;--sway:3.4rem}
.flake:nth-child(10){left:55%;animation-duration:31s;animation-delay:-11s;--sway:2.2rem}
.flake:nth-child(11){left:60%;width:10px;height:15px;animation-duration:35s;animation-delay:-24s;--sway:1.9rem}
.flake:nth-child(12){left:65%;width:7px;height:11px;animation-duration:23s;animation-delay:-5s;--sway:1.1rem}
.flake:nth-child(13){left:70%;animation-duration:32s;animation-delay:-17s;--sway:2.6rem}
.flake:nth-child(14){left:75%;width:11px;height:16px;animation-duration:27s;animation-delay:-33s;--sway:3rem}
.flake:nth-child(15){left:80%;width:6px;height:10px;animation-duration:36s;animation-delay:-8s;--sway:1.5rem}
.flake:nth-child(16){left:85%;animation-duration:30s;animation-delay:-21s;--sway:2.1rem}
.flake:nth-child(17){left:90%;width:9px;height:14px;animation-duration:25s;animation-delay:-13s;--sway:1.7rem}
.flake:nth-child(18){left:95%;width:7px;height:12px;animation-duration:38s;animation-delay:-29s;--sway:2.9rem}
.flake:nth-child(19){left:5%;width:5px;height:9px;animation-duration:41s;animation-delay:-36s;--sway:3.6rem}
.flake:nth-child(20){left:72%;width:5px;height:8px;animation-duration:43s;animation-delay:-39s;--sway:3.3rem}

@keyframes fall{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(0deg)}
  12%{opacity:.44}
  78%{opacity:.3}
  100%{opacity:0;transform:translate3d(var(--sway,2.5rem),112vh,0) rotate(190deg)}
}

.dust{
  position:absolute;
  bottom:-6vh;
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 6px rgba(255,195,11,.5);
  opacity:0;
  animation:float linear infinite;
}

.dust:nth-child(1){left:7%;animation-duration:26s;animation-delay:-3s;--sway:1.4rem}
.dust:nth-child(2){left:16%;width:2px;height:2px;animation-duration:33s;animation-delay:-15s;--sway:-1.8rem}
.dust:nth-child(3){left:24%;animation-duration:22s;animation-delay:-8s;--sway:2.2rem}
.dust:nth-child(4){left:31%;width:4px;height:4px;animation-duration:37s;animation-delay:-24s;--sway:-1.2rem}
.dust:nth-child(5){left:39%;animation-duration:29s;animation-delay:-19s;--sway:1.9rem}
.dust:nth-child(6){left:47%;width:2px;height:2px;animation-duration:24s;animation-delay:-6s;--sway:-2.4rem}
.dust:nth-child(7){left:54%;animation-duration:35s;animation-delay:-28s;--sway:1.6rem}
.dust:nth-child(8){left:61%;width:4px;height:4px;animation-duration:27s;animation-delay:-11s;--sway:-1.5rem}
.dust:nth-child(9){left:68%;animation-duration:31s;animation-delay:-22s;--sway:2rem}
.dust:nth-child(10){left:76%;width:2px;height:2px;animation-duration:21s;animation-delay:-2s;--sway:-2.1rem}
.dust:nth-child(11){left:83%;animation-duration:39s;animation-delay:-31s;--sway:1.3rem}
.dust:nth-child(12){left:89%;width:4px;height:4px;animation-duration:25s;animation-delay:-13s;--sway:-1.9rem}
.dust:nth-child(13){left:95%;animation-duration:34s;animation-delay:-26s;--sway:2.3rem}
.dust:nth-child(14){left:43%;width:2px;height:2px;animation-duration:42s;animation-delay:-35s;--sway:-2.6rem}

@keyframes float{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.7)}
  16%{opacity:.6}
  80%{opacity:.3}
  100%{opacity:0;transform:translate3d(var(--sway,1rem),-104vh,0) scale(1)}
}

.burst{
  position:fixed;
  z-index:70;
  width:7px;
  height:11px;
  border:1px solid rgba(255,195,11,.75);
  border-radius:100% 0 100% 0;
  pointer-events:none;
  animation:burst .95s var(--ease) forwards;
}

@keyframes burst{
  0%{opacity:.95;transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  100%{opacity:0;transform:translate3d(var(--bx,0),var(--by,-3rem),0) rotate(var(--br,120deg)) scale(.65)}
}

.sound{
  position:fixed;
  right:calc(.85rem + env(safe-area-inset-right));
  bottom:calc(.85rem + env(safe-area-inset-bottom));
  z-index:55;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid var(--gold-line);
  border-radius:50%;
  background:rgba(58,11,20,.86);
  color:var(--gold);
  cursor:pointer;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}

.sound[hidden]{display:none}
.sound:hover{border-color:var(--gold-soft);background:rgba(58,11,20,.96)}
.sound:focus-visible{outline:2px solid rgba(255,195,11,.6);outline-offset:3px}

.sound__bars{display:flex;align-items:flex-end;gap:2.5px;height:14px}
.sound__bars i{
  display:block;
  width:2px;
  height:100%;
  border-radius:1px;
  background:currentColor;
  transform-origin:50% 100%;
  animation:eq 1.15s ease-in-out infinite;
}
.sound__bars i:nth-child(2){animation-delay:-.38s}
.sound__bars i:nth-child(3){animation-delay:-.76s}
.sound[data-on="0"] .sound__bars i{animation:none;transform:scaleY(.24);opacity:.6}

@keyframes eq{
  0%,100%{transform:scaleY(.3)}
  50%{transform:scaleY(1)}
}

.hero{
  padding-top:clamp(3.5rem,11vw,6rem);
  text-align:center;
}

.hero__names{
  font-family:var(--script);
  font-size:clamp(2.5rem,12vw,3.9rem);
  line-height:1.08;
  margin:.5rem 0 1rem;
}

.hero__names .amp{font-size:.6em;color:var(--gold);vertical-align:.14em}

.hero__date{
  font-family:var(--sans);
  font-size:.75rem;
  font-weight:300;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--cream-dim);
}

.countdown{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  max-width:21rem;
  margin:2.25rem auto 0;
  padding:1rem 0;
  border-top:1px solid var(--gold-line);
  border-bottom:1px solid var(--gold-line);
}

.cd{text-align:center}
.cd__n{
  font-size:clamp(1.35rem,5.2vw,1.75rem);
  line-height:1.1;
  color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.cd__l{
  margin-top:.4rem;
  font-family:var(--sans);
  font-size:.5625rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cream-faint);
}

.quote{
  text-align:center;
  border-top:1px solid var(--gold-faint);
  border-bottom:1px solid var(--gold-faint);
  padding-block:clamp(2.75rem,8vw,4rem);
}

.quote__text{
  font-size:clamp(1.05rem,1rem + .45vw,1.3rem);
  font-style:italic;
  line-height:1.85;
  color:var(--cream);
  max-width:30rem;
  margin-inline:auto;
}

.quote__cite{
  display:block;
  margin-top:1.25rem;
  font-family:var(--sans);
  font-style:normal;
  font-size:.6875rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,195,11,.8);
}

.card{
  position:relative;
  border:1px solid var(--gold-line);
  border-radius:2px;
  background:linear-gradient(180deg,rgba(58,11,20,.55),rgba(58,11,20,.18));
  padding:clamp(1.5rem,6vw,2rem) clamp(1.25rem,5.5vw,1.75rem);
}

.card + .card{margin-top:1.25rem}

.card__time{
  margin-top:.85rem;
  font-size:clamp(1.25rem,5vw,1.5rem);
  line-height:1.3;
  color:var(--gold);
  font-variant-numeric:tabular-nums;
}

.card__time small{
  display:block;
  margin-top:.2rem;
  font-family:var(--sans);
  font-size:.625rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cream-faint);
}

.card__venue{
  margin-top:1.15rem;
  font-size:1.125rem;
  font-weight:500;
  line-height:1.5;
}

.card__addr{
  margin-top:.3rem;
  font-size:.9375rem;
  line-height:1.7;
  color:var(--cream-dim);
}

.link-map{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  min-height:44px;
  margin-top:.85rem;
  font-family:var(--sans);
  font-size:.6875rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}

.link-map:hover{border-bottom-color:var(--gold-soft)}
.link-map:focus-visible{outline:2px solid rgba(255,195,11,.5);outline-offset:3px}
.link-map svg{width:13px;height:13px;transition:transform .35s var(--ease)}
.link-map:hover svg{transform:translate(3px,-3px)}

.form{margin-top:clamp(1.75rem,5vw,2.25rem)}

.field{display:block;margin-top:1.5rem;transition:opacity .3s var(--ease)}
.field:first-child{margin-top:0}
.field.is-off{opacity:.36}

.field__label{
  display:block;
  margin-bottom:.55rem;
  font-family:var(--sans);
  font-size:.6875rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cream-dim);
}

.input,.textarea,.select{
  width:100%;
  min-height:50px;
  padding:.65rem .85rem;
  border:1px solid rgba(255,195,11,.22);
  border-radius:2px;
  background:rgba(58,11,20,.5);
  color:var(--cream);
  font-family:var(--serif);
  font-size:1.0625rem;
  line-height:1.6;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}

.textarea{min-height:6.5rem;resize:vertical}

.input::placeholder,.textarea::placeholder{color:rgba(247,237,223,.34)}

.input:focus,.textarea:focus,.select:focus{
  outline:none;
  border-color:var(--gold);
  background:rgba(58,11,20,.78);
}

.input:focus-visible,.textarea:focus-visible,.select:focus-visible{
  outline:2px solid rgba(255,195,11,.45);
  outline-offset:1px;
}

.select{
  appearance:none;
  color-scheme:dark;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,195,11,.85) 50%),linear-gradient(135deg,rgba(255,195,11,.85) 50%,transparent 50%);
  background-position:calc(100% - 1.15rem) 1.4rem,calc(100% - .8rem) 1.4rem;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:2.5rem;
}

.choice{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}

.choice__opt{display:block;cursor:pointer}
.choice__opt input{position:absolute;opacity:0;width:1px;height:1px}

.choice__box{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 .5rem;
  border:1px solid rgba(255,195,11,.22);
  border-radius:2px;
  background:rgba(58,11,20,.5);
  font-family:var(--sans);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cream-dim);
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease);
}

.choice__opt:hover .choice__box{border-color:rgba(255,195,11,.45)}

.choice__opt input:checked + .choice__box{
  border-color:var(--gold);
  color:var(--gold);
  background:rgba(255,195,11,.09);
}

.choice__opt input:focus-visible + .choice__box{
  outline:2px solid rgba(255,195,11,.45);
  outline-offset:2px;
}

.form__status{
  margin-top:1rem;
  min-height:1.5em;
  font-family:var(--sans);
  font-size:.875rem;
  line-height:1.65;
  color:var(--cream-dim);
}

.form__status[data-tone="ok"]{color:#FFD874}
.form__status[data-tone="err"]{color:#FFB3A6}

.notice{
  margin-top:1.5rem;
  padding:.9rem 1rem;
  border:1px solid rgba(255,195,11,.3);
  background:rgba(255,195,11,.06);
  font-family:var(--sans);
  font-size:.8125rem;
  line-height:1.7;
  color:rgba(247,237,223,.9);
}

.notice code{
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;
  font-size:.78em;
  color:var(--gold);
  word-break:break-word;
}

.wall{
  margin-top:clamp(2.5rem,8vw,3.25rem);
  padding-top:clamp(1.75rem,5.5vw,2.25rem);
  border-top:1px solid var(--gold-faint);
}

.wall__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:.35rem 1rem;
  margin-bottom:1.1rem;
}

.wall__title{
  margin:0;
  font-family:var(--script);
  font-size:clamp(1.65rem,7vw,2.15rem);
  font-weight:400;
  line-height:1.2;
  color:var(--cream);
}

.wall__meta{
  display:flex;
  align-items:center;
  gap:.45rem;
  margin:0;
  font-family:var(--sans);
  font-size:.6875rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cream-faint);
}

.wall__count:empty{display:none}

.wall__dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gold);
  opacity:0;
  transition:opacity .5s var(--ease);
}

.wall[data-live="1"] .wall__dot{
  opacity:1;
  animation:livePulse 2.8s ease-in-out infinite;
}

@keyframes livePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,195,11,.45)}
  50%{box-shadow:0 0 0 5px rgba(255,195,11,0)}
}

.wall__state{
  margin:0;
  padding:1rem 0;
  font-family:var(--sans);
  font-size:.875rem;
  line-height:1.7;
  color:var(--cream-faint);
}

.wall__list{
  display:grid;
  gap:.75rem;
  margin:0;
  padding:0;
  list-style:none;
}

.wall__list:empty{display:none}

.wish{
  padding:.95rem 1rem 1rem;
  border:1px solid var(--gold-faint);
  border-radius:2px;
  background:linear-gradient(180deg,rgba(58,11,20,.42),rgba(58,11,20,.1));
}

.wish--enter{animation:wishIn .6s var(--ease) both}

@keyframes wishIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

.wish.is-own{
  border-color:rgba(255,195,11,.5);
  background:linear-gradient(180deg,rgba(109,26,40,.62),rgba(58,11,20,.22));
}

.wish__top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.75rem;
  margin:0;
}

.wish__name{
  font-family:var(--sans);
  font-size:.875rem;
  font-weight:500;
  letter-spacing:.01em;
  color:var(--gold);
  overflow-wrap:anywhere;
}

.wish__when{
  flex:none;
  font-family:var(--sans);
  font-size:.6875rem;
  letter-spacing:.05em;
  color:var(--cream-faint);
  white-space:nowrap;
}

.wish__text{
  margin:.5rem 0 0;
  font-size:1.0625rem;
  line-height:1.72;
  color:var(--cream-dim);
  overflow-wrap:anywhere;
}

.wish__tags{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin:.75rem 0 0;
}

.wish__tag{
  padding:.2rem .55rem;
  border:1px solid rgba(255,195,11,.28);
  border-radius:999px;
  font-family:var(--sans);
  font-size:.625rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(255,195,11,.9);
}

.wish__tag--soft{
  border-color:rgba(247,237,223,.16);
  color:var(--cream-faint);
}

.wall__more{
  margin:1rem 0 0;
  font-family:var(--sans);
  font-size:.75rem;
  letter-spacing:.04em;
  color:var(--cream-faint);
}

.gift{
  position:relative;
  margin-top:clamp(1.75rem,5vw,2.25rem);
  padding:clamp(1.75rem,6.5vw,2.5rem) clamp(1.25rem,5vw,2rem);
  border:1px solid var(--gold-soft);
  text-align:center;
}

.gift::before{
  content:"";
  position:absolute;
  inset:.5rem;
  border:1px solid var(--gold-faint);
  pointer-events:none;
}

.gift__text{
  position:relative;
  font-size:1rem;
  line-height:1.85;
  color:var(--cream-dim);
  max-width:26rem;
  margin-inline:auto;
}

.bank{
  position:relative;
  margin-top:1.75rem;
  padding-top:1.5rem;
  border-top:1px solid var(--gold-faint);
}

.bank__name{
  font-family:var(--sans);
  font-size:.6875rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:rgba(255,195,11,.85);
}

.bank__num{
  margin:.55rem 0 .3rem;
  font-size:clamp(1.6rem,7.2vw,2.05rem);
  letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
  color:var(--cream);
  line-height:1.25;
}

.bank__owner{
  font-size:.9375rem;
  color:var(--cream-dim);
}

.gift__closing{
  position:relative;
  margin-top:1.75rem;
  padding-top:1.5rem;
  border-top:1px solid var(--gold-faint);
  font-size:.9375rem;
  line-height:1.8;
  color:var(--cream-faint);
  max-width:26rem;
  margin-inline:auto;
}

.footer{
  position:relative;
  padding:clamp(2.75rem,9vw,4rem) var(--pad) calc(clamp(4rem,10vw,5rem) + env(safe-area-inset-bottom));
  text-align:center;
  border-top:1px solid var(--gold-line);
  overflow:hidden;
}

.footer__names{
  font-family:var(--script);
  font-size:clamp(1.9rem,8.5vw,2.5rem);
  line-height:1.2;
}

.footer__meta{
  margin-top:1rem;
  font-family:var(--sans);
  font-size:.625rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--cream-faint);
}

.mt-1{margin-top:.9rem}
.mt-2{margin-top:1.5rem}
.mt-3{margin-top:2.25rem}
.center{text-align:center}
.center .lede{margin-inline:auto}

.field--bare{border:0;padding:0;margin:1.5rem 0 0}

.footer__names .amp{color:var(--gold);font-size:.62em;vertical-align:.14em}

.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .95s var(--ease),transform .95s var(--ease);
  transition-delay:var(--d,0ms);
}

.reveal.is-in{opacity:1;transform:none}

@media (min-width:40rem){
  .card + .card{margin-top:1.5rem}
  .cover__inner{max-width:30rem}
}

@media (max-height:34rem){
  .monogram{width:3.25rem;margin-bottom:.85rem;font-size:1.15rem}
  .cover__names{font-size:clamp(2rem,9vh,2.75rem);margin:.2rem 0 .55rem}
  .cover .divider{margin:.85rem auto}
  .corner{width:clamp(5.5rem,22vw,8.5rem)}
  .cover__inner{padding-block:.5rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none}
  .petal{display:none}
  .flake,.dust{display:none}
  .orn{transform:none}
  .flower svg{animation:none;stroke-dashoffset:0}
  .sound__bars i{animation:none}
  .orn:hover{opacity:.4}
  .wish--enter{animation:none}
  .wall[data-live="1"] .wall__dot{animation:none;box-shadow:none}
}
