:root {
  --bg: #fbf6ef;
  --ink: #2b1d1a;
  --muted: #7d6a63;
  --line: #eadfd3;
  --rose: #9f1239;
  --rose-soft: #fce7ec;
  --gold: #b08d57;
  --gold-light: #e8d3a8;
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 10%, rgba(244, 184, 200, 0.55) 0, transparent 38%),
    radial-gradient(circle at 92% 12%, rgba(214, 228, 196, 0.7) 0, transparent 36%),
    radial-gradient(circle at 85% 92%, rgba(244, 200, 170, 0.45) 0, transparent 40%),
    radial-gradient(circle at 12% 88%, rgba(232, 211, 168, 0.5) 0, transparent 38%),
    var(--bg);
  overflow-x: hidden;
}

/* Card */
.card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  padding: 44px 32px 34px;
  text-align: center;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(107, 57, 44, 0.12), inset 0 0 0 8px rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
}

.card::before { /* thin gold inner border */
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid var(--gold-light);
  border-radius: 20px;
  pointer-events: none;
}

.eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

h1 {
  margin: 10px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(30px, 7vw, 44px);
  line-height: 1.15;
  color: var(--rose);
  text-wrap: balance;
}

.flourish { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 14px 0; color: var(--gold); font-size: 15px; }
.flourish span { width: 64px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

.lede { max-width: 32ch; margin: 0 auto; color: var(--muted); font-size: 16px; line-height: 1.6; }

/* QR in a framed card with gold corner flourishes */
.qr-frame {
  position: relative;
  display: inline-block;
  margin: 28px auto 0;
  padding: 22px 22px 16px;
  border-radius: 22px;
  background: #fff;
  border: 2px solid var(--gold-light);
  box-shadow: 0 14px 34px rgba(159, 18, 57, 0.12);
}

.qr-frame img { display: block; width: min(260px, 62vw); height: auto; }

.qr-frame figcaption {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border-color: var(--gold);
  border-style: solid;
  border-width: 0;
}

.corner.tl { top: -9px; left: -9px; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 14px; }
.corner.tr { top: -9px; right: -9px; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 14px; }
.corner.bl { bottom: -9px; left: -9px; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 14px; }
.corner.br { bottom: -9px; right: -9px; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 14px; }

/* Steps */
.steps {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.steps li {
  flex: 1;
  max-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
}

.num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--rose-soft);
  color: var(--rose);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  border: 1px solid #f5c6d3;
}

.visit {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px dashed var(--gold-light);
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}

.visit strong { color: var(--rose); }
.visit .code { font-family: "Courier New", monospace; letter-spacing: 0.15em; }

.thanks {
  margin: 18px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 16px;
  color: var(--gold);
}

/* Petals drifting down behind the card */
.petals { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }

.petals span {
  position: absolute;
  top: -40px;
  width: 16px;
  height: 12px;
  border-radius: 150% 0 150% 0;
  background: linear-gradient(135deg, #fbcfe8, #f472b6);
  opacity: 0.7;
  animation: fall linear infinite;
}

.petals span:nth-child(1) { left: 6%; animation-duration: 13s; animation-delay: -2s; }
.petals span:nth-child(2) { left: 18%; animation-duration: 16s; animation-delay: -9s; transform: scale(0.8); }
.petals span:nth-child(3) { left: 31%; animation-duration: 12s; animation-delay: -5s; }
.petals span:nth-child(4) { left: 47%; animation-duration: 18s; animation-delay: -12s; }
.petals span:nth-child(5) { left: 62%; animation-duration: 14s; animation-delay: -1s; }
.petals span:nth-child(6) { left: 74%; animation-duration: 17s; animation-delay: -7s; }
.petals span:nth-child(7) { left: 86%; animation-duration: 13s; animation-delay: -10s; }
.petals span:nth-child(8) { left: 94%; animation-duration: 15s; animation-delay: -4s; }

@keyframes fall {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(30px, 55vh) rotate(180deg); }
  100% { transform: translate(-10px, 110vh) rotate(360deg); }
}

@media (max-width: 420px) {
  .card { padding: 36px 20px 28px; }
  .steps li { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .petals { display: none; }
}

/* Printing (e.g. table cards): no animation, no tinted background, keep the card crisp */
@media print {
  body { background: #fff; padding: 0; min-height: 0; }
  .petals { display: none; }
  .card { box-shadow: none; backdrop-filter: none; background: #fff; max-width: 480px; }
  .qr-frame { box-shadow: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ===== Fit the screen: no scrolling =====
   Sizes follow the screen height as well as its width, so the whole card is visible at once. */

body { padding: 3vh 16px; }

.card { padding: clamp(22px, 4.5vh, 44px) clamp(18px, 4vw, 36px) clamp(18px, 3.5vh, 34px); }
.eyebrow { font-size: clamp(11px, 1.6vh, 14px); }
h1 { font-size: clamp(26px, min(7vw, 5.2vh), 52px); margin-top: 0.8vh; }
.flourish { margin: clamp(6px, 1.4vh, 14px) 0; }
.lede { font-size: clamp(14px, 2vh, 18px); }
.qr-frame { margin-top: clamp(14px, 2.8vh, 28px); padding: clamp(12px, 2.2vh, 22px) clamp(12px, 2.2vh, 22px) clamp(10px, 1.6vh, 16px); }
.qr-frame img { width: clamp(150px, min(62vw, 30vh), 300px); }
.qr-frame figcaption { margin-top: clamp(6px, 1.2vh, 12px); font-size: clamp(12px, 1.7vh, 15px); }
.steps { margin-top: clamp(14px, 2.6vh, 26px); }
.num { width: clamp(26px, 3.6vh, 36px); height: clamp(26px, 3.6vh, 36px); font-size: clamp(14px, 1.9vh, 18px); }
.visit { margin-top: clamp(12px, 2.4vh, 26px); padding-top: clamp(10px, 1.8vh, 18px); font-size: clamp(13px, 1.8vh, 16px); line-height: 1.6; }
.thanks { margin-top: clamp(8px, 1.8vh, 18px); font-size: clamp(14px, 1.9vh, 17px); }

/* Wide screens (laptop, TV, tablet sideways): words on the left, a big QR code on the right */
@media (min-aspect-ratio: 5/4) and (min-width: 700px) {
  .card {
    max-width: min(1080px, 94vw);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "intro   qr"
      "details qr";
    align-items: center;
    column-gap: clamp(28px, 4vw, 64px);
    text-align: left;
  }

  .intro { grid-area: intro; align-self: end; }
  .details { grid-area: details; align-self: start; }
  .qr-frame { grid-area: qr; margin: 0; text-align: center; }
  .qr-frame img { width: clamp(200px, min(34vw, 58vh), 440px); }

  .flourish { justify-content: flex-start; }
  .lede { margin: 0; max-width: 36ch; }
  .steps { justify-content: flex-start; }
  .steps li { flex: 0 1 140px; align-items: flex-start; text-align: left; }
  h1 { font-size: clamp(30px, min(4.2vw, 7vh), 60px); }
}

/* Short screens: tighten everything a little more */
@media (max-height: 640px) {
  .lede { display: none; } /* the steps already explain what to do */
  .thanks { display: none; }
}

/* Big screens (TVs): a wider card so the couple's names sit on two lines, not three */
@media (min-aspect-ratio: 5/4) and (min-width: 1500px) {
  .card { max-width: min(1240px, 90vw); }
}