:root {
  --red: #b3121f;
  --red-dark: #7a0d16;
  --black: #161616;
  --cream: #f7f3ea;
  --silver: #cfd4da;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--red);
  font-family: 'Manrope', sans-serif;
  color: var(--black);
}

body {
  display: flex;
  justify-content: center;
  padding: 24px 12px 60px;
  min-height: 100vh;
  background: radial-gradient(circle at 20% 0%, #c81a28 0%, var(--red) 45%, var(--red-dark) 100%);
}

.card {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: var(--cream);
  background-image: radial-gradient(rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 6px 6px;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  overflow: hidden;
  padding: 0 0 40px;
}

.hero { position: relative; text-align: center; padding-bottom: 10px; }

.torn-top {
  height: 90px;
  background: var(--red);
  clip-path: polygon(
    0 0, 100% 0, 100% 55%,
    92% 62%, 84% 50%, 76% 66%, 68% 52%, 60% 68%,
    52% 50%, 44% 64%, 36% 52%, 28% 66%, 20% 50%,
    12% 64%, 4% 52%, 0 60%
  );
}

.stars {
  position: absolute;
  z-index: 1;
  text-shadow: 0 0 6px rgba(255,255,255,0.6);
}
.s1 { top: 10px; left: 20px; font-size: 26px; color: var(--cream); }
.s2 { top: 100px; right: 18px; font-size: 20px; color: var(--red); }
.s3 { top: 260px; left: 12px; font-size: 16px; color: var(--red); }
.s4 { top: 220px; right: 24px; font-size: 22px; color: var(--silver); }

.disco-ball {
  position: absolute;
  top: -10px;
  left: -20px;
  z-index: 2;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.3));
}

.hero-text { position: relative; z-index: 3; padding: 16px 24px 0; }

.eyebrow {
  color: var(--red);
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.names {
  font-family: 'Caveat', cursive;
  color: var(--red);
  font-size: 46px;
  line-height: 1.1;
  margin: 0 0 8px;
  font-weight: 700;
}
.names .amp { color: var(--black); }

.subtitle { color: #4a4a4a; font-size: 15px; margin: 0; }

.main-cutout { margin: 14px auto 4px; max-width: 300px; }
.cutout { margin: 0; display: inline-block; }
.cutout img { width: 100%; display: block; filter: drop-shadow(0 16px 20px rgba(0,0,0,0.4)); }

.party-hat { position: absolute; bottom: -10px; left: 6px; z-index: 1; opacity: 0.95; }

.section-title {
  color: var(--red);
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 30px;
  text-align: center;
  margin: 0 0 16px;
}

.details, .wishlists, .rsvp { margin: 34px 24px; position: relative; z-index: 2; }

.details {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 18px 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.details .section-title { margin-top: -4px; }

.detail-row { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; text-align: left; }
.detail-row + .detail-row { border-top: 1px dashed rgba(0,0,0,0.12); }
.detail-icon { font-size: 22px; }
.detail-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--red); font-weight: bold; margin-bottom: 2px; }
.detail-value { font-size: 15px; color: #222; line-height: 1.4; }

.wishlists { text-align: center; }
.wishlist-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.wishlist-item {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  width: 150px;
  padding: 12px 10px 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.small-cutout { width: 100%; height: 120px; overflow: hidden; margin-bottom: 6px; }
.small-cutout img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: drop-shadow(0 6px 8px rgba(0,0,0,0.2)); }

.wishlist-name { font-family: 'Caveat', cursive; font-weight: 700; font-size: 20px; color: var(--red); margin: 4px 0 8px; }

.wishlist-btn {
  display: inline-block;
  background: var(--black);
  color: var(--cream);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: bold;
  transition: transform 0.15s ease, background 0.15s ease;
}
.wishlist-btn:hover { transform: translateY(-2px); background: var(--red); }
.wishlist-btn.disabled { pointer-events: none; opacity: 0.45; }

.wishlist-note { font-size: 12px; color: #777; margin-top: 12px; }

.rsvp { text-align: center; }
.rsvp-hint { font-size: 13px; color: #666; margin: 0 0 16px; }

.rsvp-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }

.rsvp-form input[type="text"],
.rsvp-form textarea {
  font-family: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 8px;
  background: #fff;
}
.rsvp-form textarea { resize: vertical; min-height: 70px; }

.attend-toggle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 10px 14px;
}

.rsvp-form button {
  background: var(--red);
  color: #fff;
  border: none;
  padding: 13px 16px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.15s ease;
}
.rsvp-form button:hover { background: var(--red-dark); }
.rsvp-form button:disabled { opacity: 0.6; cursor: default; }

.rsvp-status { min-height: 18px; font-size: 13px; text-align: center; margin: 4px 0 0; }
.rsvp-status.ok { color: #1a7a2e; }
.rsvp-status.err { color: var(--red); }

.martini { position: absolute; bottom: 210px; right: -10px; opacity: 0.9; z-index: 1; }
.vinyl { position: absolute; bottom: 10px; right: -20px; opacity: 0.9; z-index: 1; }

.footer {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--red);
  font-weight: bold;
  font-size: 15px;
  margin-top: 20px;
}

@media (max-width: 420px) {
  .names { font-size: 36px; }
  .main-cutout { max-width: 240px; }
}