:root {
  --wine: #511419;
  --wine-2: #6a1a24;
  --cream: #ece4d8;
  --cream-70: rgba(236, 228, 216, 0.7);
  --wine-70: rgba(81, 20, 25, 0.72);
  --paper: #f4ede3;
  --ink: #3b2626;
  --gold: #c99a45;
  --serif: "Lora", "Times New Roman", serif;
  --display: "Viaoda Libre", "EB Garamond", serif;
  --amp: "The Nautigal", "Ms Madi", cursive;
  --amp-small: "Ms Madi", "The Nautigal", cursive;
  --caps: "Cormorant Garamond", "Times New Roman", serif;
  --heading: "Times New Roman", Times, serif;
  --classic: Baskerville, "Libre Baskerville", "Times New Roman", serif;
  --sans: "Uchen", "Lora", serif;
  /* Subtle paper grain, generated (no image file) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .24 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--heading);
  font-size: 16px;
  line-height: 1.5;
  color: var(--wine);
  background: #f7f3ee;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.locked { overflow: hidden; }

img { display: block; max-width: 100%; }
button { font: inherit; }

.title {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--wine);
}
.title--sm { font-size: 16px; line-height: 24px; letter-spacing: 0.48px; }

.pill {
  display: inline-block;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  text-transform: uppercase;
  transition: transform 0.2s, filter 0.2s;
}
.pill:hover { transform: translateY(-1px); filter: brightness(1.08); }
.pill--cream {
  font-family: var(--classic);
  font-size: 14px;
  letter-spacing: 0.35px;
  color: var(--wine);
  background: var(--cream);
  padding: 9px 24px;
}
.pill--wine {
  font-family: var(--heading);
  font-size: 14px;
  font-weight: 600;
  color: #ded9d7;
  background: var(--wine);
  padding: 9px 24px;
}

/* Image placeholder when a photo file is missing */
.ph {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(135deg, rgba(81,20,25,0.06) 0 2px, transparent 2px 12px), #efe6da;
  color: rgba(81, 20, 25, 0.5);
  font-family: var(--display);
  font-size: 26px;
  letter-spacing: 0.1em;
}

/* ---------- Cover ---------- */
.cover {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  overflow: hidden;
  background: linear-gradient(160deg, #761a22 0%, #5a1119 45%, #3e0a10 100%);
  text-align: center;
  transition: opacity 0.9s ease;
}
.cover.is-open { opacity: 0; pointer-events: none; }
.cover.is-open .cover__card { transform: scale(1.06) translateY(-12px); opacity: 0; }

.cover__card {
  position: relative;
  z-index: 1;
  width: min(100%, 600px);
  min-height: 420px;
  padding: 22px 24px 32px;
  background: #f8f1ea;
  border-radius: 6px;
  box-shadow: 0 30px 70px rgba(20, 0, 4, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  animation: cardIn 1s ease both;
  transition: transform 0.8s ease, opacity 0.8s ease;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(24px) scale(0.97); } }

/* Corner florals: both top corners, right one mirrored */
.sprig { position: absolute; width: 130px; height: 214px; pointer-events: none; }
.sprig--tl { top: 0; left: 0; transform: rotate(180deg) scaleX(-1); }
.sprig--tr { top: 0; right: 0; transform: rotate(180deg); }
.flower {
  position: absolute;
  top: -8px;
  height: 280px;
  width: auto;
  max-width: none;
  opacity: 0.8;
  pointer-events: none;
  filter: drop-shadow(3px 4px 3px rgba(0, 0, 0, 0.3));
}
.flower--tl { left: -10px; transform: rotate(25deg); }
.flower--tr { right: -10px; transform: scaleX(-1) rotate(25deg); }
.has-flower-img .sprig { display: none; }

.cover__heart {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #f8f1ea;
  background: radial-gradient(circle at 35% 30%, #7a1a24, #4a0a12 75%);
  box-shadow: 0 10px 24px rgba(74, 10, 18, 0.35);
  margin-bottom: 14px;
}
.cover__heart svg { animation: beat 1.8s ease-in-out infinite; }

.cover__names {
  font-family: var(--display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.25;
  color: #511419;
}
.cover__names span { display: block; }
.cover__names em { display: block; font-family: var(--serif); font-style: normal; font-size: 20px; line-height: 1; }

.cover__divider { display: flex; align-items: center; gap: 12px; margin: 8px 0; color: #511419; }
.cover__divider i { width: 42px; height: 1px; background: #511419; opacity: 0.6; }
.cover__divider span { font-size: 14px; line-height: 20px; }

.cover__date, .cover__invite { font-family: var(--serif); font-size: 18px; line-height: 1.5; color: rgba(81, 20, 25, 0.72); }
.cover__invite { margin: 22px 0 26px; }

.cover__btn {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  color: #f3e8de;
  background: #511419;
  border: 0;
  border-radius: 999px;
  padding: 10px 32px;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(79, 12, 21, 0.35);
  transition: transform 0.2s, background 0.2s;
}
.cover__btn:hover { background: #6b1522; transform: translateY(-2px); }

/* Falling hearts behind the card */
.hearts { position: absolute; inset: 0; pointer-events: none; }
.hearts svg {
  position: absolute;
  top: -40px;
  animation: fall linear infinite;
}
@keyframes fall {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(var(--sway), 55vh) rotate(160deg); }
  100% { transform: translate(0, 110vh) rotate(320deg); }
}

@media (max-width: 767px) {
  .cover__card { width: min(100%, 310px); min-height: 0; padding: 20px 20px 56px; }
  .cover__heart { width: 58px; height: 58px; margin-bottom: 34px; }
  .cover__names { font-size: 30px; }
  .cover__btn { font-weight: 700; }
  .sprig { width: 80px; height: 132px; }
  .flower { height: 144px; }
  /* Mobile: second floral moves to the bottom-right corner */
  .flower--tr { top: auto; bottom: -8px; }
}

/* ---------- Music ---------- */
.music {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: radial-gradient(circle at 35% 30%, #7a1f2a, var(--wine) 70%);
  color: var(--cream);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.music.is-playing svg { animation: spin 4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Paper column ---------- */
.paper {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: 40px;
  background: var(--grain), linear-gradient(180deg, #f6efe6, #f1e9de 50%, #f5eee4);
  text-align: center;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(81, 20, 25, 0.08);
}

.deco {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(3px 4px 3px rgba(0, 0, 0, 0.3));
}

/* ---------- Save the date ---------- */
.std { padding: 56px 16px 40px; }
.std__label {
  font-family: var(--caps);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #590310;
}

.envelope {
  position: relative;
  width: clamp(270px, 70vw, 420px);
  aspect-ratio: 300 / 330;
  margin: 44px auto 0;
}
.envelope__back {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 76%;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.22), transparent 30%),
    linear-gradient(160deg, #6b1a24, #4a0e16);
  box-shadow: 0 18px 30px rgba(60, 10, 15, 0.25);
}
.envelope__back::before {
  /* inner liner with a scalloped edge */
  content: "";
  position: absolute;
  inset: 8px 8px auto;
  height: 42%;
  background:
    radial-gradient(circle at 6px 0, transparent 4px, #5e1520 4.5px) 0 0 / 12px 100% repeat-x;
  opacity: 0.7;
}
.envelope__photo {
  position: absolute;
  top: 0;
  left: 30%;
  width: 60%;
  aspect-ratio: 222 / 279;
  padding: 7px 7px 7px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transform: rotate(8deg);
  transform-origin: 50% 100%;
}
.envelope__photo img, .envelope__photo .ph { width: 100%; height: 100%; object-fit: cover; }
.envelope__flower {
  position: absolute;
  top: -6%;
  left: -2%;
  height: 86%;
  width: auto;
  max-width: none;
  transform: rotate(-6deg);
  filter: drop-shadow(3px 4px 3px rgba(0, 0, 0, 0.3));
  pointer-events: none;
}
.envelope__front {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 60.6%;
  filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.2));
}
.seal {
  position: absolute;
  left: 50%;
  top: 73%;
  width: 22%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(1px 3px 3px rgba(0, 0, 0, 0.4));
}
.seal svg { display: block; width: 100%; height: auto; }

.couple-names {
  position: relative;
  margin-top: 54px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(46px, 7vw, 64px);
  line-height: 1.45;
  color: var(--wine);
}
.couple-names span { position: relative; z-index: 1; display: block; }
.couple-names em {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -45%);
  font-family: var(--amp);
  font-style: normal;
  font-size: 2em;
  line-height: 1;
  color: rgba(81, 20, 25, 0.15);
}

/* ---------- Wine panels ---------- */
.panel {
  position: relative;
  width: min(100% - 52px, 560px);
  margin: 20px auto 0;
  padding: 36px 22px 40px;
  border-radius: 12px;
  background: var(--grain), linear-gradient(160deg, #5a161d, var(--wine) 60%, #4a1116);
  color: var(--cream);
  box-shadow: 0 14px 30px rgba(60, 10, 15, 0.3);
}
.panel__title {
  font-family: var(--heading);
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--cream);
}

.parents {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 14px;
  margin-top: 22px;
  font-family: var(--classic);
}
.parents > i { background: var(--cream-70); opacity: 0.6; }
.parents__label { font-size: 12px; line-height: 18px; font-weight: 300; color: var(--cream-70); margin-bottom: 3px; }
.parents__name { font-size: 12px; line-height: 21px; font-weight: 600; }
.parents__addr { font-size: 10px; line-height: 12.5px; font-weight: 300; color: var(--cream-70); margin-top: 6px; }

.announce {
  margin-top: 26px;
  font-family: var(--classic);
  font-size: 12px;
  line-height: 18px;
  font-weight: 300;
  text-transform: uppercase;
}
.fullname { margin-top: 30px; font-family: var(--display); font-size: 36px; line-height: 52px; }
.rank {
  margin-top: 22px;
  font-family: var(--sans);
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--cream-70);
}
.amp { margin-top: 10px; font-family: var(--amp-small); font-size: 35px; line-height: 52px; }
.amp + .fullname { margin-top: 4px; }

.ceremony { margin-top: 36px; }
.ceremony + .ceremony { padding-top: 32px; border-top: 1px solid rgba(236, 228, 216, 0.18); }
.ceremony__title {
  font-family: var(--classic);
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
  color: var(--cream-70);
}
.ceremony__meta {
  display: flex;
  justify-content: center;
  gap: 42px;
  margin-top: 14px;
  font-family: var(--classic);
  font-size: 13px;
  font-weight: 300;
  text-transform: uppercase;
  color: var(--cream-70);
}
.datebox { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 12px; font-family: var(--heading); }
.datebox strong { font-size: 40px; line-height: 40px; font-weight: 300; }
.datebox i { width: 1px; height: 46px; background: var(--cream-70); }
.datebox div { display: flex; flex-direction: column; text-align: left; font-size: 14px; line-height: 21px; text-transform: uppercase; }
.lunar {
  margin-top: 14px;
  font-family: var(--classic);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  color: var(--cream-70);
}

.deco--info { right: -30px; top: 42%; height: 230px; transform: rotate(-8deg); }
.deco--party { left: -40px; top: -70px; height: 200px; transform: scaleX(-1) rotate(-12deg); }
.deco--timeline { right: -30px; top: 16%; height: 210px; transform: rotate(-6deg); }
.deco--gb { left: -26px; bottom: -40px; height: 170px; transform: rotate(-60deg); }

/* ---------- Album coverflow ---------- */
.album { padding: 56px 0 8px; }
.coverflow {
  --w: clamp(200px, 48vw, 320px);
  position: relative;
  height: calc(var(--w) * 1.5);
  margin-top: 28px;
  perspective: 1100px;
  touch-action: pan-y;
  user-select: none;
}
.coverflow figure {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--w);
  height: 100%;
  margin-left: calc(var(--w) / -2);
  border-radius: 14px;
  overflow: hidden;
  background: #efe6da;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1), opacity 0.6s, filter 0.6s;
}
.coverflow img, .coverflow .ph { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.dots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
.dots button {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(81, 20, 25, 0.25);
  cursor: pointer;
  transition: width 0.3s, background 0.3s;
}
.dots button.is-active { width: 24px; background: rgba(81, 20, 25, 0.75); }

/* ---------- Party ---------- */
.party { margin-top: 48px; }
.party__lead {
  margin-top: 16px;
  font-family: var(--classic);
  font-size: 20px;
  line-height: 30px;
  text-transform: uppercase;
}
.party__days { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.party__side { font-family: var(--sans); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--cream-70); }
.party__days .ceremony__meta { gap: 14px; margin-top: 6px; }
.datebox--sm { gap: 10px; }
.datebox--sm strong { font-size: 36px; }
.datebox--sm div { font-size: 12px; line-height: 18px; }
.party__days .lunar { font-size: 9.5px; letter-spacing: 0.4px; margin-top: 10px; }
.party__times { display: flex; justify-content: center; gap: 34px; margin-top: 24px; font-family: var(--classic); }
.party__times div { display: flex; flex-direction: column; }
.party__times span { font-size: 12px; line-height: 16px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--cream-70); }
.party__times strong { font-size: 18px; line-height: 28px; font-weight: 500; }

.cal {
  margin: 26px auto 0;
  max-width: 330px;
  padding: 14px 16px 18px;
  border-radius: 10px;
  background: var(--cream);
  color: var(--wine);
}
.cal__month { font-family: var(--amp); font-size: 25px; line-height: 37.5px; letter-spacing: 0.6px; }
.cal__head, .cal__body { display: grid; grid-template-columns: repeat(7, 1fr); font-family: var(--classic); }
.cal__head {
  margin-top: 8px;
  padding: 6px 0;
  border-top: 1px solid rgba(81, 20, 25, 0.25);
  border-bottom: 2px solid var(--wine);
  font-size: 10px;
  font-weight: 500;
  opacity: 0.85;
}
.cal__body { margin-top: 6px; }
.cal__body span { position: relative; display: grid; place-items: center; height: 32px; font-size: 12px; font-weight: 300; }
.cal__body span.is-day { color: #fff; font-weight: 700; font-size: 11px; z-index: 0; }
.cal__body span.is-day::before {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  z-index: -1;
  background: var(--wine);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: beat 1.6s ease-in-out infinite;
}
@keyframes beat { 50% { transform: scale(1.12); } }

.add-cal {
  display: inline-block;
  margin-top: 26px;
  font-family: var(--heading);
  font-size: 14px;
  color: var(--cream);
  text-underline-offset: 4px;
}
.party .pill { display: block; margin: 22px auto 0; }

/* ---------- Venue ---------- */
.venue { padding: 56px 28px 8px; }
.venue__item { margin-top: 18px; }
.venue__side { font-family: var(--sans); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--wine-70); }
.venue__addr { max-width: 280px; margin: 4px auto 0; font-family: var(--classic); font-size: 12px; line-height: 20px; color: rgba(81, 20, 25, 0.8); }
.venue__dir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-family: var(--classic);
  font-size: 14px;
  font-weight: 600;
  color: rgba(81, 20, 25, 0.8);
  text-decoration: none;
}
.venue__dir:hover { text-decoration: underline; }

/* ---------- Dress code ---------- */
.dresscode { padding: 64px 16px 8px; }
.dresscode__sub { font-size: 14px; line-height: 20px; color: rgba(81, 20, 25, 0.8); }
.swatches { display: flex; justify-content: center; gap: 16px; margin-top: 16px; }
.swatches i { width: 40px; height: 40px; border-radius: 50%; background: var(--c); border: 1px solid rgba(0, 0, 0, 0.12); }

/* ---------- Timeline ---------- */
.timeline { margin-top: 56px; }
.tl { position: relative; list-style: none; margin: 22px auto 0; max-width: 300px; }
.tl::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: calc(44px + 70px + 12px + 5px);
  width: 1px;
  background: var(--cream-70);
}
.tl li {
  display: grid;
  grid-template-columns: 44px 70px 34px 1fr;
  align-items: center;
  height: 56px;
  text-align: left;
}
.tl__icon svg { width: 36px; height: 36px; fill: none; stroke: #d9b77a; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tl__icon svg .fill { fill: #d9b77a; }
.tl time { font-size: 16px; letter-spacing: 0.4px; text-align: right; padding-right: 12px; }
.tl li i {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0 0 3px rgba(236, 228, 216, 0.25);
}
.tl li > span:last-child { font-size: 13px; color: var(--cream-70); }

/* ---------- Guestbook ---------- */
.guestbook { padding: 72px 0 8px; }
.gb {
  position: relative;
  width: min(100% - 60px, 520px);
  margin: 0 auto;
  padding: 34px 26px 44px;
  border-radius: 12px;
  background: var(--grain), #f6f0e8;
  box-shadow: 0 10px 28px rgba(60, 20, 20, 0.16);
}
.gb__form { display: flex; flex-direction: column; gap: 16px; max-width: 260px; margin: 20px auto 0; text-align: left; }
.gb__form input, .gb__form textarea, .gb__form select {
  font-family: var(--heading);
  font-size: 14px;
  color: var(--wine);
  background: transparent;
  border: 1px solid var(--wine);
  border-radius: 10px;
  padding: 12px 16px;
  outline: none;
  resize: vertical;
  -webkit-appearance: none;
          appearance: none;
}
.gb__form input::placeholder, .gb__form textarea::placeholder { color: rgba(81, 20, 25, 0.6); }
.gb__form input:focus, .gb__form textarea:focus, .gb__form select:focus { box-shadow: 0 0 0 3px rgba(81, 20, 25, 0.12); }
.gb__actions { display: flex; justify-content: space-between; align-items: center; }
.gb__wand { width: 36px; height: 32px; border: 0; border-radius: 8px; background: rgba(81, 20, 25, 0.08); cursor: pointer; }

.wishes {
  width: min(100% - 60px, 520px);
  margin: 40px auto 0;
  max-height: 440px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.wishes:empty { display: none; }
.wish {
  padding: 12px 14px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(81, 20, 25, 0.1);
}
.wish__head { display: flex; justify-content: space-between; gap: 10px; }
.wish__name { font-size: 14px; font-weight: 600; }
.wish__time { font-size: 12px; opacity: 0.8; white-space: nowrap; }
.wish p { margin-top: 6px; font-size: 14px; line-height: 22.75px; }

/* ---------- Gift box ---------- */
.giftbox { padding: 64px 16px 8px; }
.lixi {
  position: relative;
  display: block;
  width: 230px;
  height: 200px;
  margin: 22px auto 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.lixi__env {
  position: absolute;
  top: 24px;
  width: 112px;
  height: 152px;
  border-radius: 6px;
  background:
    radial-gradient(circle, rgba(232, 190, 110, 0.35) 1px, transparent 1.5px) 0 0 / 10px 10px,
    linear-gradient(160deg, #b0262f, #7c1720);
  box-shadow: 0 10px 20px rgba(80, 10, 15, 0.35);
  display: grid;
  place-items: center;
  transition: transform 0.4s;
}
.lixi__env::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 38%;
  background: linear-gradient(180deg, #8e1a24, #7a1520);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.lixi__env b {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 24px;
  color: #7c1720;
  background: radial-gradient(circle at 35% 30%, #f6dc98, #c99a45);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.lixi__env--a { left: 14px; transform: rotate(-12deg); }
.lixi__env--b { right: 14px; transform: rotate(10deg); }
.lixi:hover .lixi__env--a { transform: rotate(-16deg) translateY(-4px); }
.lixi:hover .lixi__env--b { transform: rotate(14deg) translateY(-4px); }
.spark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-style: normal;
  font-size: var(--s);
  color: #b58b2f;
  animation: twinkle 2.4s ease-in-out var(--d) infinite;
}
@keyframes twinkle { 50% { opacity: 0.25; transform: scale(0.7); } }
.giftbox__hint { margin-top: 6px; font-family: var(--serif); font-size: 12px; font-weight: 500; }

/* ---------- Footer ---------- */
.foot { padding: 56px 24px 24px; font-size: 13px; line-height: 20px; color: rgba(81, 20, 25, 0.8); }
.foot__names { margin-top: 14px; font-family: var(--display); font-size: 28px; line-height: 1.3; color: var(--wine); }
.foot__date { font-family: var(--classic); font-size: 12px; letter-spacing: 2px; }

/* ---------- Modals ---------- */
.modal, .lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(40, 10, 14, 0.7);
  animation: fade 0.3s;
}
.modal__box {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 34px 22px 28px;
  border-radius: 12px;
  background: var(--grain), #f6f0e8;
  text-align: center;
}
.modal__box .gb__form { max-width: 280px; }
.modal__box--wine { background: var(--grain), var(--wine); color: var(--cream); }
.modal__close {
  position: absolute;
  top: 6px;
  right: 12px;
  font-size: 30px;
  line-height: 1;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}
.modal__box .modal__close { color: var(--wine); }
.modal__box--wine .modal__close { color: var(--cream); }
.lightbox .modal__close { color: #fff; top: 14px; right: 18px; }
.lightbox img { max-height: 86vh; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); }
@keyframes fade { from { opacity: 0; } }

.gift__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.gift__card { padding: 12px 10px; border-radius: 10px; background: var(--cream); color: var(--wine); }
.gift__who { font-family: var(--serif); font-size: 12px; font-weight: 500; }
.qr { width: 108px; height: 108px; margin: 10px auto; background: #fff; padding: 4px; }
.qr img, .qr .ph { width: 100%; height: 100%; object-fit: contain; font-size: 18px; }
.gift__bank { font-size: 11px; }
.gift__stk { font-family: ui-monospace, Menlo, monospace; font-size: 11px; cursor: pointer; text-decoration: underline dotted; }
.gift__note { margin-top: 14px; font-size: 12px; color: var(--cream-70); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 70;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 6px;
}

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .cal__body span.is-day::before, .music.is-playing svg, .cover__heart svg, .spark { animation: none; }
  .hearts { display: none; }
}

@media (max-width: 400px) {
  .panel { width: calc(100% - 32px); padding-inline: 16px; }
  .ceremony__meta { gap: 24px; }
  .tl li { grid-template-columns: 40px 60px 30px 1fr; }
  .tl::before { left: calc(40px + 60px + 10px + 5px); }
}