:root {
  --wine: #7b1212;
  --wine-deep: #840b1d;
  --ink: #7b1212;
  --gold: #705628;
  --cream: #e1d5bf;
  --paper: #f7f4ef;
  --line: rgba(123, 18, 18, 0.35);
  --card: 480px;
  --serif: "Lora", "Times New Roman", serif;
  --script: "Ecatherina", "Lora", serif;
  --brush: "British Green", "Lora", serif;
  --calli: "Desirable", "Lora", serif;
  --hand: "Hoa Tay", "Lora", cursive;
  --thanks: "Beyond", "Lora", serif;
  --num: "Oranienbaum", "Lora", serif;
}

@font-face {
  font-family: "Ecatherina";
  src: url("../assets/fonts/ecatherina.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "British Green";
  src: url("../assets/fonts/british.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Desirable";
  src: url("../assets/fonts/desirable.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Hoa Tay";
  src: url("../assets/fonts/hoatay.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Beyond";
  src: url("../assets/fonts/beyond.ttf") format("truetype");
  font-display: swap;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #efe6da;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
button, input, textarea { font-family: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.page {
  width: min(100%, var(--card));
  margin: 0 auto;
  background: var(--paper);
  min-height: 100vh;
  position: relative;
  overflow: clip;
  box-shadow: 0 0 48px rgba(80, 30, 20, 0.12);
}

.paper {
  background-color: #f7f4ef;
  background-image: url("../assets/ref1.png");
  background-size: cover;
}

.reveal {
  animation: rise 0.9s ease both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
  html { scroll-behavior: auto; }
}

/* Gate */
.gate {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background-color: #f7f4ef;
  background-image: url("../assets/ref1.png");
  background-size: cover;
  color: var(--wine);
  text-align: center;
  padding: 28px 20px;
  overflow: hidden;
}
.gate.is-open {
  animation: fade-gate 0.5s ease 2s forwards;
  pointer-events: none;
}
.gate.is-open .gate-intro {
  animation: fade-gate 0.28s ease 0.18s forwards;
}
@keyframes fade-gate {
  to { opacity: 0; visibility: hidden; }
}
.gate-stage { width: min(86vw, 340px); }
.gate .kicker {
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 11px;
  margin: 0 0 6px;
}
.gate h2 {
  font-family: var(--script);
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  margin: 0;
}
.gate h2 .nm {
  display: block;
  padding: 0.16em 0.06em 0.85em;
  margin: 0;
  white-space: nowrap;
}
.gate-intro .kicker {
  letter-spacing: 0.16em;
  line-height: 1.7;
  max-width: 18em;
  margin-left: auto;
  margin-right: auto;
}
.gate-intro h2 .nm {
  white-space: normal;
  font-size: 32px;
  line-height: 1.15;
  padding: 0.16em 0.2em 1.85em;
}
.gate h2 .amp {
  display: block;
  font-size: 20px;
  line-height: 1;
  margin: 0.2em 0 0.55em;
}
.gate .when {
  letter-spacing: 0.28em;
  font-size: 13px;
  margin: 18px 0 20px;
}
.gate-intro .when {
  margin-top: 2px;
}
.pack {
  position: relative;
  width: 100%;
  margin: 0 auto 22px;
  perspective: 720px;
}
.pack-slot {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: inset(-170% -10% 0 -10%);
}
.pack-back {
  position: absolute;
  left: 1%;
  right: 1%;
  top: 0;
  bottom: 0;
  background: #f4ebe3;
  box-shadow: 0 16px 24px rgba(70, 12, 20, 0.28);
}
.pack-letter {
  position: absolute;
  left: 8%;
  right: 8%;
  top: -112%;
  height: 176%;
  background: #fffdfb;
  border: 1px solid rgba(103, 18, 30, 0.16);
  border-radius: 2px;
  box-shadow: 0 14px 26px rgba(70, 12, 20, 0.16);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 28px 18px 40px;
  overflow: hidden;
  transform: translateY(102%);
  transition: transform 1.15s cubic-bezier(0.22, 0.61, 0.18, 1) 0.42s;
}
.pack-letter .kicker {
  font-size: 10px;
  letter-spacing: 0.38em;
  margin: 0 0 16px;
}
.pack-letter h2 { font-size: 30px; }
.pack-letter h2 .nm { padding: 0.08em 0.1em 0.7em; }
.pack-letter h2 .amp {
  font-size: 17px;
  margin: 0.05em 0 1.15em;
}
.pack-letter .when {
  font-size: 13px;
  letter-spacing: 0.32em;
  margin: 26px 0 0;
}
.gate.is-open .pack-letter { transform: translateY(0); }
.pack-pocket {
  position: relative;
  z-index: 2;
  width: 100%;
  display: block;
}
.pack-flap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 46%;
  z-index: 5;
  transform-origin: center top;
  transform: rotateX(0deg);
  backface-visibility: hidden;
}
.pack-flap i {
  display: block;
  height: 100%;
  background: linear-gradient(180deg, #8c2836 0%, #731822 38%, #68121e 100%);
  clip-path: polygon(
    0% 0%,
    100% 0%,
    97.9% 6.5%,
    94.5% 17.4%,
    91% 30.4%,
    85.9% 47.8%,
    80.7% 65.2%,
    75.6% 82.6%,
    73.9% 90.2%,
    70% 100%,
    30% 100%,
    25.9% 90.2%,
    24.1% 82.6%,
    19% 65.2%,
    13.8% 47.8%,
    8.7% 30.4%,
    5.2% 17.4%,
    1.3% 6.5%
  );
}
.gate.is-open .pack-flap { animation: lift-flap 0.9s cubic-bezier(0.33, 0.02, 0.18, 1) forwards; }
@keyframes lift-flap {
  0% { transform: rotateX(0deg); z-index: 5; }
  72% { transform: rotateX(-108deg); z-index: 5; }
  73% { z-index: 0; }
  100% { transform: rotateX(-155deg); z-index: 0; }
}
.pack-seal {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 54px;
  z-index: 6;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.gate.is-open .pack-seal { animation: seal-off 0.32s ease forwards; }
@keyframes seal-off { to { opacity: 0; } }
.gate button {
  background: transparent;
  color: var(--wine);
  border: 1px solid var(--wine);
  border-radius: 999px;
  padding: 12px 28px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 12px;
  transition: opacity 0.25s ease;
}
.gate button:hover { background: rgba(123, 18, 18, 0.08); }
.gate.is-open button { opacity: 0; }

/* Hero */
.hero {
  position: relative;
  margin-top: -108px;
  padding: 0 0 72px;
  text-align: center;
  overflow: visible;
}
.kicker {
  margin: 0;
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.date-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 8px;
  font-family: var(--num);
  font-size: 26px;
  letter-spacing: 0.04em;
}
.date-line i {
  width: 1px;
  height: 16px;
  background: var(--wine);
  display: block;
}
.hero h1 {
  margin: 0;
  font-weight: 400;
  font-family: var(--script);
  font-size: 32px;
  line-height: 1;
}
.hero h1 span {
  display: block;
  padding: 0.02em 0 0.42em;
}

.scene {
  position: relative;
  width: 100%;
  aspect-ratio: 420 / 620;
}
.layer {
  position: absolute;
  pointer-events: none;
}
.layer > img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  max-width: none;
}
.env-back,
.env-front,
.seal {
  object-fit: fill;
  max-width: none;
}
.pearl-r {
  left: 71.25%;
  top: 16.53%;
  width: 40.98%;
  height: 41.61%;
  z-index: 1;
  transform: rotate(35deg);
}
.pearl-l {
  left: -15.95%;
  top: 53.35%;
  width: 40.19%;
  height: 40.81%;
  z-index: 1;
  transform: rotate(35deg);
}
.env-back {
  left: 9.8%;
  top: 25.5%;
  width: 81.82%;
  height: 63.23%;
  z-index: 2;
}
.mirror {
  position: absolute;
  left: 27.28%;
  top: 20.5%;
  width: 57.38%;
  height: 56.94%;
  z-index: 3;
}
.doily {
  width: 100%;
  height: 100%;
  object-fit: fill;
  max-width: none;
  display: block;
  pointer-events: none;
}
.mirror-copy {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 24%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  z-index: 2;
}
.mirror .kicker { font-size: 12px; letter-spacing: 0.16em; }
.mirror .date-line {
  justify-content: center;
  font-size: 19px;
  gap: 7px;
  margin: 2px 0 0;
}
.mirror .date-line i { height: 13px; }
.mirror h1 { font-size: 23px; }
.mirror h1 span { padding: 0.02em 0 0.7em; white-space: nowrap; }
.leaves {
  position: absolute;
  left: 20.6%;
  top: 59.6%;
  width: 67.3%;
  height: 30.3%;
  object-fit: fill;
  max-width: none;
  z-index: 3;
  pointer-events: none;
}
.sprig-l {
  left: 18.65%;
  top: 23.08%;
  width: 19.25%;
  height: 42.45%;
  z-index: 4;
  transform: scaleX(-1);
}
.polas {
  position: absolute;
  left: 12.65%;
  top: 33.31%;
  width: 23.57%;
  height: 40%;
  z-index: 5;
}
.pola {
  position: absolute;
  margin: 0;
  width: 80%;
  height: 41%;
  background: #fff;
  padding: 3px 3px 9px;
  box-sizing: border-box;
  box-shadow: 0 8px 16px rgba(40, 10, 10, 0.22);
  transform: rotate(-11deg);
}
.pola img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pola-a { top: 2%; left: 0; }
.pola-b { top: 43.7%; left: 20%; }
.env-front {
  left: 9.96%;
  top: 54.42%;
  width: 80.09%;
  height: 33.32%;
  z-index: 6;
}
.seal {
  left: 44.29%;
  top: 65.32%;
  width: 13.65%;
  height: 9.68%;
  z-index: 7;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.28));
}
.bouquet {
  left: 71.25%;
  top: 68.27%;
  width: 30.12%;
  height: 46.69%;
  z-index: 8;
  transform: perspective(800px) rotateY(18deg);
}

.count-wrap { text-align: center; margin-top: 8px; position: relative; z-index: 2; }
.begins {
  font-family: var(--brush);
  font-size: 28px;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.count {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
}
.count b {
  font-family: var(--brush);
  font-size: 34px;
  font-weight: 400;
  display: block;
  min-width: 48px;
  line-height: 1;
}
.count em {
  font-style: normal;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  padding-top: 2px;
}

/* Banners */
.banner {
  position: relative;
  min-height: 520px;
  color: #fff;
  display: grid;
  align-items: end;
}
.banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner .shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.62) 100%);
}
.banner.top-shade .shade {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 55%);
}
.banner .copy {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 48px 20px 64px;
  width: 100%;
}
.banner .copy p { margin: 0; }
.we-are { font-family: var(--brush); font-size: 32px; text-transform: uppercase; }
.wed {
  font-family: var(--script);
  font-size: 36px;
  line-height: 1.15;
  padding-bottom: 0.45em;
}
.where {
  font-family: var(--calli);
  font-size: 42px;
  line-height: 1;
}
.where span { display: block; }
.where span:first-child { padding: 0.2em 0.15em 1.55em; }
.where span:last-child {
  font-family: var(--brush);
  font-size: 22px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.banner.short { min-height: 300px; align-items: center; }
.banner.short .copy { padding: 36px 16px; }
.banner.cinema { min-height: 460px; }

/* Invite */
.invite { padding: 42px 22px 36px; text-align: center; position: relative; overflow: hidden; }
.parents {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  text-align: center;
}
.parents h3 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.parents p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.invite-lead {
  margin: 22px auto 8px;
  max-width: 26em;
  font-size: 15px;
  line-height: 1.55;
  text-transform: uppercase;
}
.medallion {
  width: min(280px, 78%);
  margin: 8px auto 4px;
  position: relative;
}
.medallion .doily-img { width: 100%; }
.medallion .names {
  position: absolute;
  inset: 14% 8%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--script);
  font-size: 25px;
  line-height: 1;
}
.medallion .names span { display: block; padding: 0.04em 0 0.62em; white-space: nowrap; }
.medallion .names i {
  font-style: normal;
  font-family: var(--script);
  font-size: 18px;
  line-height: 1;
  margin: -0.45em 0 0;
}
.when-block { margin-top: 4px; }
.when-block .sub { margin: 0; font-size: 14px; line-height: 1.55; text-transform: uppercase; }
.date-hero {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px;
}
.date-hero strong {
  font-family: var(--brush);
  font-size: 58px;
  font-weight: 400;
  line-height: 0.9;
}
.date-hero span {
  font-size: 15px;
  text-transform: uppercase;
  border-top: 1px solid var(--wine);
  border-bottom: 1px solid var(--wine);
  padding: 6px 0;
}
.place { margin: 10px 0 0; font-size: 15px; font-weight: 600; line-height: 1.45; text-transform: uppercase; }
.address { margin: 4px 0 0; font-size: 14px; }
.map-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lunar { margin: 10px 0 0; font-size: 14px; }
.honor {
  font-family: var(--script);
  font-size: 28px;
  margin: 18px 0 0;
}
.sprig {
  position: absolute;
  width: 140px;
  pointer-events: none;
}
.sprig.tl { left: -30px; top: 0; }
.sprig.br { right: -40px; bottom: 40px; transform: scaleX(-1); }

/* Timeline */
.timeline { padding: 48px 28px 36px; text-align: center; }
.timeline h2 {
  font-family: var(--script);
  font-weight: 400;
  font-size: 52px;
  margin: 0 0 22px;
}
.events {
  list-style: none;
  position: relative;
  margin: 0 auto;
  padding: 8px 0;
  display: grid;
  gap: 26px;
  max-width: 340px;
}
.events::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: var(--wine);
  transform: translateX(-50%);
}
.events li {
  display: grid;
  grid-template-columns: 1fr 14px 1fr;
  align-items: center;
  gap: 14px;
}
.events .node {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1.5px var(--wine);
  justify-self: center;
  position: relative;
  z-index: 1;
}
.events img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}
.events li:not(.flip) img { justify-self: end; }
.events li.flip img { justify-self: start; }
.events li:not(.flip) > div { text-align: left; }
.events li.flip > div { text-align: right; }
.events time {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}
.events strong {
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Calendar + letter */
.story { padding: 40px 22px 28px; text-align: center; }
.cal-month {
  font-family: var(--brush);
  font-size: 28px;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px 0;
  max-width: 320px;
  margin: 0 auto 28px;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.cal .dow { color: var(--ink); font-size: 11px; text-transform: uppercase; }
.cal .day {
  height: 32px;
  display: grid;
  place-items: center;
}
.cal .day.on {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 36px;
  margin: 0 auto;
  padding: 0;
  background: none;
  color: #fff;
}
.cal .day.on i {
  position: absolute;
  inset: 0;
  background: var(--wine);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='black' d='M16 28C16 28 3 19 3 11.5 3 7 6.2 4 9.8 4 12.2 4 14.2 5.2 16 7.6 17.8 5.2 19.8 4 22.2 4 25.8 4 29 7 29 11.5 29 19 16 28 16 28z'/%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 32 32'%3E%3Cpath fill='black' d='M16 28C16 28 3 19 3 11.5 3 7 6.2 4 9.8 4 12.2 4 14.2 5.2 16 7.6 17.8 5.2 19.8 4 22.2 4 25.8 4 29 7 29 11.5 29 19 16 28 16 28z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cal .day.on b {
  position: relative;
  z-index: 1;
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  color: #fff;
  transform: translateY(-3px);
}
.letter {
  font-size: 13.5px;
  line-height: 1.7;
  margin: 18px auto 0;
  max-width: 36em;
  text-align: justify;
}
.letter p {
  margin: 0;
}
.letter p + p {
  margin-top: 14px;
}
.save-title {
  font-family: var(--script);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.15;
  margin: 16px 0 0;
  padding: 0.25em 0 1.7em;
}

.couple {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 10px 18px 40px;
  align-items: end;
}
.who { margin: 0; text-align: center; }
.who .frame {
  background: #fff;
  padding: 8px 8px 22px;
  box-shadow: 0 12px 24px rgba(60, 20, 20, 0.16);
}
.who img { width: 100%; height: 230px; object-fit: cover; }
.who.groom .tilt { transform: rotate(-6deg); }
.who.bride { margin-top: 36px; }
.who.bride .tilt { transform: rotate(5deg); }
.who figcaption { margin-top: 10px; }
.who .hand {
  display: block;
  font-family: var(--brush);
  font-size: 26px;
  line-height: 1;
  text-transform: uppercase;
}
.who .role { font-family: var(--hand); font-size: 30px; display: block; margin-top: 6px; }

/* Gallery */
.gallery {
  background: #fff;
  padding: 12px 12px 14px;
}
.gallery .stage { position: relative; }
.gallery .stage img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  cursor: zoom-in;
}
.gal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 48px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #1c1c1c;
}
.gal-nav.prev { left: 2px; }
.gal-nav.next { right: 2px; }
.gal-nav svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.thumbs::-webkit-scrollbar { display: none; }
.thumbs button {
  flex: 0 0 calc((100% - 32px) / 5);
  border: 0;
  padding: 0;
  background: none;
  opacity: 0.55;
}
.thumbs button.on { opacity: 1; }
.thumbs img {
  width: 100%;
  height: 62px;
  object-fit: cover;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(20, 6, 8, 0.92);
  display: none;
  place-items: center;
  padding: 20px;
}
.lightbox.open { display: grid; }
.lightbox img { max-width: min(920px, 100%); max-height: 86vh; object-fit: contain; }
.lightbox button {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  font-size: 22px;
}

/* RSVP */
.rsvp { padding: 36px 22px 42px; text-align: center; }
.rsvp .lead {
  font-size: 15px;
  margin: 0 auto 18px;
  max-width: 34em;
}
form { text-align: left; display: grid; gap: 14px; }
label.field { display: grid; gap: 6px; font-size: 14px; }
input[type="text"], textarea {
  width: 100%;
  border: 1px solid var(--wine);
  background: transparent;
  border-radius: 18px;
  padding: 12px 14px;
  color: var(--wine);
  font-size: 16px;
}
input[readonly] {
  cursor: default;
  background: rgba(123, 18, 18, 0.05);
}
textarea { min-height: 96px; resize: vertical; }
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
legend { font-size: 14px; margin-bottom: 4px; }
.choice { position: relative; }
.choice input {
  position: absolute;
  opacity: 0;
  inset: 0;
}
.choice span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  min-height: 32px;
}
.choice span::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 1px solid var(--wine);
  border-radius: 50%;
  flex: none;
}
.choice input:focus-visible + span { outline: 2px solid var(--wine); outline-offset: 2px; }
.choice input:checked + span::before {
  background: radial-gradient(circle, var(--wine) 0 45%, transparent 48%);
}
.submit {
  margin-top: 6px;
  width: 100%;
  height: 46px;
  border-radius: 999px;
  border: 1px solid var(--wine);
  background: transparent;
  color: var(--wine);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 14px;
}
.submit:hover { background: rgba(123, 18, 18, 0.06); }
.rsvp.is-done .lead { display: none; }
.thanks {
  display: none;
  padding: 18px 8px 6px;
}
.thanks.show { display: block; }
.thanks p {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
}
form.is-hidden { display: none; }

/* Wishes */
.wishes {
  padding: 36px 22px 40px;
  background: #f3f0ea url("../assets/plaster.png") center / cover;
  text-align: center;
}
.wishes .eyebrow {
  letter-spacing: 0.28em;
  font-size: 15px;
  margin: 0;
}
.wishes h2 {
  font-family: var(--script);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  margin: 8px auto 4px;
  padding: 0.12em 0.16em 1.7em;
}
.wish-list { display: grid; gap: 10px; text-align: left; }
.wish-list.has-wishes {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(123, 18, 18, 0.45) transparent;
}
.wish-list.has-wishes::-webkit-scrollbar { width: 8px; }
.wish-list.has-wishes::-webkit-scrollbar-thumb {
  background: rgba(123, 18, 18, 0.4);
  border-radius: 8px;
}
.wish {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(123, 18, 18, 0.12);
  border-radius: 14px;
  padding: 12px 14px;
}
.wish p { margin: 0 0 6px; font-size: 14.5px; }
.wish b { font-weight: 600; font-size: 13px; }
.wish small { display: block; color: var(--gold); font-size: 12px; }
.empty { font-size: 14px; font-style: italic; text-align: center; }

/* Gift */
.gift-box {
  padding: 28px 22px 36px;
  text-align: center;
}
.gift-box .eyebrow,
.gift-card .eyebrow {
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 12px;
  margin: 0;
}
.gift-box h2 {
  font-family: var(--script);
  font-weight: 400;
  font-size: 42px;
  line-height: 1;
  margin: 6px 0 0;
  padding: 0.15em 0.12em 1.55em;
}
.present {
  display: block;
  width: min(100%, 250px);
  margin: 0 auto;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--wine);
}
.present img {
  width: 100%;
  height: auto;
  animation: gift-bob 2.8s ease-in-out infinite;
}
@keyframes gift-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
.present-hint {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.gift-pop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  place-items: center;
  padding: 18px 14px;
  background: rgba(40, 12, 14, 0.55);
}
.gift-pop.open { display: grid; }
.gift-card {
  width: min(100%, 420px);
  background: #f7f4ef url("../assets/ref1.png") center / cover;
  border-radius: 18px;
  padding: 26px 16px 20px;
  text-align: center;
  position: relative;
  max-height: calc(100vh - 36px);
  overflow: auto;
  box-shadow: 0 18px 50px rgba(40, 10, 12, 0.28);
}
.gift-card h2 {
  font-family: var(--script);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  margin: 4px 0 0;
  padding: 0.12em 0.15em 2.15em;
}
.gift-card #gift-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--wine);
  font-size: 20px;
  line-height: 1;
}
.gift-codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.gift-codes figure { margin: 0; }
.qr-frame {
  background: transparent;
  border: 0;
  min-height: 0;
  padding: 0;
  display: block;
}
.qr-frame img { width: 100%; height: auto; }
.qr-wait {
  margin: 0;
  padding: 18px 8px;
  font-size: 13px;
  font-style: italic;
  color: var(--gold);
}
.gift-codes figcaption { margin-top: 8px; }
.gift-codes figcaption b {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gift-codes figcaption span {
  display: block;
  font-size: 15px;
  line-height: 1.3;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .present img { animation: none; }
}

/* Finale */
.finale { position: relative; min-height: 460px; color: #fff; }
.finale img.cover {
  width: 100%;
  height: 460px;
  object-fit: cover;
}
.finale .overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.35));
  text-align: center;
  padding: 20px;
}
.finale h2 {
  font-family: var(--thanks);
  font-weight: 400;
  font-size: 40px;
  margin: 0;
  line-height: 1.25;
  padding: 0.15em 0.1em 0.35em;
}
.footer {
  padding: 48px 20px 88px;
  text-align: center;
}
.footer .note {
  font-size: 15px;
  line-height: 1.65;
  margin: 0 auto;
  max-width: 26em;
}

.music {
  position: fixed;
  z-index: 30;
  bottom: 16px;
  right: max(16px, calc(50vw - 240px + 16px));
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--wine);
  background: #fff;
  color: var(--wine);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(80, 20, 20, 0.18);
}
.music { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.music:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16); }
.music svg { width: 22px; height: 22px; fill: currentColor; grid-area: 1 / 1; }
.music svg.is-off { display: none; }
.music.is-on {
  background: linear-gradient(135deg, rgba(255, 243, 224, 0.95), rgba(255, 250, 240, 0.95));
}
.music.is-on::after {
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  right: -8px;
  bottom: -8px;
  z-index: -1;
  background: radial-gradient(circle, rgba(255, 200, 100, 0.35), transparent 40%);
  animation: music-ring 1.6s infinite;
}
@keyframes music-ring {
  0% { transform: scale(0.85); opacity: 0.18; }
  70% { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}

.fx { opacity: 0; visibility: hidden; }
.fx.on {
  opacity: 1;
  visibility: visible;
  animation-name: var(--fx);
  animation-duration: var(--dur, 1s);
  animation-delay: var(--delay, 0s);
  animation-fill-mode: both;
  animation-iteration-count: var(--count, 1);
  animation-timing-function: ease;
}
.mirror-copy.fx.on { animation-timing-function: cubic-bezier(0.16, 0.84, 0.24, 1); }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(64px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes riseCard {
  from { opacity: 1; top: 72%; }
  to { opacity: 1; top: 24%; }
}
@keyframes rotateInDownLeft {
  from { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; }
  to { transform-origin: left bottom; transform: rotate(0deg); opacity: 1; }
}
@keyframes rotateInDownRight {
  from { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; }
  to { transform-origin: right bottom; transform: rotate(0deg); opacity: 1; }
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fx { opacity: 1; visibility: visible; }
  .fx.on { animation: none; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 380px) {
  .hero h1 { font-size: 22px; }
  .mirror h1 { font-size: 21px; }
  .mirror .date-line { font-size: 17px; }
  .where { font-size: 36px; }
  .finale h2 { font-size: 34px; }
  .who img { height: 190px; }
}
@media (min-width: 900px) {
  body { padding: 28px 0; }
}