:root {
  --font: "EB Garamond", Garamond, "Adobe Garamond Pro", "Times New Roman", serif;
  --bg: #f3f0ea;
  --ink: #1a1a1a;
  --muted: #5f5b55;
  --gold: #c9a24a;
  --gold-ink: #86650f;      /* gold dark enough for text on white */
  --gold-lite: #f3dd9a;
  --line: rgba(26, 26, 26, .18);
  --paper-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .42  0 0 0 0 .38  .3 0 0 0 -.06'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --shadow: 0 1px 3px rgba(0, 0, 0, .14), 0 18px 40px rgba(0, 0, 0, .12);
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh; color: var(--ink);
  font: 400 19px/1.5 var(--font);
  background: radial-gradient(120% 90% at 50% 0%, #fbfaf7 0%, var(--bg) 60%, #e9e4db 100%) fixed;
  overflow-x: hidden;
}
button, input, textarea { font-family: var(--font); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; }

main {
  min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px 0 40px;
}

/* ================= Envelope & card ================= */
.scene { display: flex; flex-direction: column; align-items: center; transition: opacity .5s, transform .5s; }
.scene.leaving { opacity: 0; transform: translateY(-12px); }

.stage {
  --w: max(280px, min(92vw, 540px, calc((100vh - 160px) / 1.12)));
  --w: max(280px, min(92vw, 540px, calc((100svh - 160px) / 1.12)));
  --ew: calc(var(--w) * .86);   /* envelope width  */
  --eh: calc(var(--ew) * .76);  /* envelope height */
  --edge: calc(var(--w) * .03); /* gap under envelope */
  position: relative; width: var(--w); height: calc(var(--w) * 1.12);
  transition: height 1.3s cubic-bezier(.5, 0, .2, 1);
  -webkit-tap-highlight-color: transparent; outline: none;
}
.stage[role="button"] { cursor: pointer; }
.stage:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; border-radius: 8px; }

.piece { position: absolute; left: 50%; width: var(--ew); margin-left: calc(var(--ew) / -2); pointer-events: none; }
.env-back, .pocket { height: var(--eh); bottom: var(--edge); }

.env-back {
  z-index: 1; border-radius: 5px 5px 0 0;
  background: linear-gradient(#121212 0%, #1d1d1d 60%, #222 100%);
  box-shadow: 0 24px 40px -10px rgba(0, 0, 0, .35), 0 6px 14px rgba(0, 0, 0, .18);
}

.pocket { z-index: 3; filter: drop-shadow(0 -1px 2px rgba(0, 0, 0, .25)); }
.pocket svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.to {
  position: absolute; left: 0; right: 0; bottom: 11%; text-align: center; padding: 0 6%;
  font: italic 500 calc(var(--ew) * .085)/1.1 var(--font);
  color: var(--gold-lite); letter-spacing: .02em; opacity: 0; transition: opacity .8s;
}
.to.show { opacity: 1; }

/* Flap: hinged on the envelope's top edge (2D flip) */
.flap {
  z-index: 4; height: calc(var(--eh) * .62);
  top: calc(100% - var(--edge) - var(--eh));
  transform-origin: 50% 0; transform: scaleY(1);
  transition: transform .85s cubic-bezier(.45, .05, .25, 1);
}
.face { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.face.outside { background: linear-gradient(180deg, #262626, #1a1a1a); }
.face.inside { background: #1b1b1b; visibility: hidden; }
/* swap outside/inside faces when the flap passes edge-on */
.s-flap .face.outside, .s-flap .seal { visibility: hidden; transition: visibility 0s .42s; }
.s-flap .face.inside { visibility: visible; transition: visibility 0s .42s; }
.liner {
  position: absolute; inset: 0; clip-path: polygon(5.5% 0, 94.5% 0, 50% 90%);
  --cell: calc(var(--ew) * .062);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0 9%, transparent 12%) 0 0 / var(--cell) var(--cell),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0 9%, transparent 12%) calc(var(--cell) / 2) calc(var(--cell) / 2) / var(--cell) var(--cell),
    radial-gradient(ellipse at 28% 18%, rgba(255, 238, 180, .75), transparent 58%),
    radial-gradient(ellipse at 78% 72%, rgba(140, 92, 14, .38), transparent 62%),
    linear-gradient(135deg, #dcb85f, #c99b3c 45%, #e3c274 70%, #b98a2e);
}
.seal {
  position: absolute; left: 50%; top: 66%; width: calc(var(--ew) * .15); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 32% 28%, #fbe9a8, #d3a444 55%, #9b7016 100%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5), inset 0 0 0 calc(var(--ew) * .008) rgba(255, 240, 190, .55);
}
.seal span { font: 600 calc(var(--ew) * .062)/1 var(--font); letter-spacing: .04em; color: #5b3f08; }

/* ---- The card (front is simple; it opens like a book) ---- */
.card {
  position: absolute; z-index: 2; left: 50%; top: calc(var(--w) * .56); width: var(--w); height: var(--w);
  margin: calc(var(--w) / -2) 0 0 calc(var(--w) / -2);
  container-type: inline-size; transform-origin: 50% 50%;
  transform: translateY(calc(var(--w) * .203)) scale(.6);
}
.book { position: absolute; inset: 0; perspective: 2600px; }

/* Cover (front of the card) */
.cover {
  position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: var(--w);
  transform-origin: 0 50%; transform-style: preserve-3d;
  transition: transform 1.4s cubic-bezier(.55, 0, .2, 1);
}
.cv-front, .cv-back {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: var(--shadow);
}
.cv-front {
  display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12cqw 6cqw 0;
  background: var(--paper-noise), linear-gradient(#fff, #fbfaf8);
}
.cv-back {
  transform: rotateY(180deg); --cell: 6.2cqw;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0 9%, transparent 12%) 0 0 / var(--cell) var(--cell),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0 9%, transparent 12%) calc(var(--cell) / 2) calc(var(--cell) / 2) / var(--cell) var(--cell),
    radial-gradient(ellipse at 28% 18%, rgba(255, 238, 180, .75), transparent 58%),
    radial-gradient(ellipse at 78% 72%, rgba(140, 92, 14, .38), transparent 62%),
    linear-gradient(135deg, #dcb85f, #c99b3c 45%, #e3c274 70%, #b98a2e);
}
.numeral { width: 66cqw; height: auto; flex: none; overflow: visible; }
.foil path, .foil ellipse { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.title { margin: 8cqw 0 0; font: 500 6.4cqw/1.2 var(--font); letter-spacing: .01em; color: #151515; }
.tag { margin: 4.5cqw 0 0; font-size: 3.5cqw; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-ink); font-weight: 500; }

/* Inside page (revealed when the cover opens) */
.page {
  position: absolute; inset: 0; overflow: hidden; box-shadow: var(--shadow);
  background: var(--paper-noise), linear-gradient(#fff, #fbfaf8);
}
.page::before { content: ""; position: absolute; inset: 3.5cqw; border: 1px solid rgba(201, 162, 74, .6); pointer-events: none; }
.page-body { padding: 11cqw 10cqw 10cqw; text-align: center; font-size: 4.6cqw; line-height: 1.5; color: #232323; }
.page-body p { margin: 0 0 4.2cqw; }
.page-body .lead { font-style: italic; font-size: 5cqw; color: var(--muted); margin-bottom: 1.5cqw; }
.page-body .big { margin: 0; font: 500 8.6cqw/1.1 var(--font); letter-spacing: .005em; color: #111; }
.page-body .em { font-style: italic; font-size: 5cqw; color: #111; }
.orn { display: block; width: 14cqw; height: 1px; margin: 5.5cqw auto; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.k { display: block; margin-bottom: .6cqw; font-size: 3.4cqw; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-ink); font-weight: 600; }
.facts { display: grid; gap: 4.5cqw; margin-bottom: 5.5cqw; }
.facts b { display: block; font-weight: 500; font-size: 5.3cqw; line-height: 1.3; color: #111; }
.facts span:not(.k) { display: block; font-size: 4.6cqw; line-height: 1.35; }
.reply p { margin: 0 0 1cqw; }
.reply .btn { margin-top: 3.5cqw; }
.reply .gifts { font-style: italic; }
.reply .gifts:empty { display: none; }

/* Gentle fade-in of the inside text after the card opens */
.rise { opacity: 0; }
.s-unfold .rise { animation: fadeup .9s ease both; animation-delay: calc(.35s + var(--i) * .11s); }

/* --- envelope & card animation states --- */
.s-flap .flap { transform: scaleY(-1); }
.s-behind .flap { z-index: 1; }
.s-pull .card { transform: translateY(calc(var(--w) * -.2)) scale(.6); transition: transform 1.15s cubic-bezier(.3, .7, .2, 1); }
.s-out .card { z-index: 6; transform: none; transition: transform 1.1s cubic-bezier(.25, .8, .25, 1); }
.s-out .piece { opacity: 0; translate: 0 14%; transition: opacity .9s ease .1s, translate 1.1s ease; }

/* foil is hidden until the card starts to rise, then it draws itself */
.stage:not(.s-draw) .foil path, .stage:not(.s-draw) .foil ellipse { stroke-dashoffset: 1; }
.stage:not(.s-draw) .title, .stage:not(.s-draw) .tag { opacity: 0; }
.s-draw .foil path, .s-draw .foil ellipse { animation: draw 1.6s cubic-bezier(.5, 0, .2, 1) both; }
.s-draw .foil ellipse:nth-child(2) { animation-delay: .15s; }
.s-draw .foil ellipse:nth-child(3) { animation-delay: .3s; }
.s-draw .foil path:nth-child(4) { animation-delay: .8s; animation-duration: .8s; }
.s-draw .foil path:nth-child(5) { animation-delay: .95s; animation-duration: .8s; }
.s-draw .title, .s-draw .tag { animation: fadeup .9s ease both; }
.s-draw .title { animation-delay: 1.1s; }
.s-draw .tag { animation-delay: 1.5s; }
.s-done .foil { animation: glint 6s ease-in-out 1s infinite; }

/* Unfold: cover swings open on its left edge; card grows to fit the message */
.s-unfold .cover { transform: rotateY(-180deg); }
.s-unfold .card { transition: transform 1.2s cubic-bezier(.5, 0, .2, 1), height 1.3s cubic-bezier(.5, 0, .2, 1); }
@media (min-width: 1100px) {
  .s-unfold .card { transform: translateX(calc(var(--w) * .5)); }   /* center the open spread */
}
@media (max-width: 1099px) {
  .s-unfold .cover { visibility: hidden; transition: transform 1.4s cubic-bezier(.55, 0, .2, 1), visibility 0s 1.45s; }
}

.hint {
  margin: 18px 0 0; font-size: .85rem; letter-spacing: .28em; text-transform: uppercase; color: var(--muted);
  animation: breathe 2.4s ease-in-out infinite; transition: opacity .4s;
}
.hint.gone { opacity: 0; animation: none; }
.btn.cta { display: inline-block; width: auto; min-width: 220px; margin-top: 22px; animation: fadeup .8s ease both; }

@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fadeup { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes breathe { 50% { opacity: .45; } }
@keyframes glint { 0%, 100% { filter: none; } 50% { filter: brightness(1.18) saturate(1.1); } }

/* ================= RSVP panel ================= */
.panel {
  position: relative; width: min(92vw, 540px); padding: clamp(28px, 7vw, 48px) clamp(22px, 6vw, 44px) clamp(28px, 6vw, 40px);
  background: var(--paper-noise), linear-gradient(#fff, #fbfaf8);
  box-shadow: var(--shadow); animation: fadeup .6s ease both;
}
.panel::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(201, 162, 74, .6); pointer-events: none; }
.step { animation: fadeup .45s ease both; }
.panel > .step { margin-top: 26px; }
.center { text-align: center; }
.eyebrow { margin: 0 0 10px; font-size: .85rem; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-ink); font-weight: 600; }
h2 { margin: 0 0 8px; font: 500 2.1rem/1.15 var(--font); letter-spacing: .005em; }
.muted { margin: 0 0 20px; color: var(--muted); font-size: 1.1rem; }
label { display: block; margin: 22px 0 8px; font-size: 1.02rem; font-weight: 500; letter-spacing: .03em; }
.optional { margin-left: 6px; font-weight: 400; color: var(--muted); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }

input:not([type]), input[type=text], textarea {
  width: 100%; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--ink); font: inherit; font-size: 1.2rem;
  transition: border-color .2s, box-shadow .2s;
}
textarea { resize: vertical; min-height: 84px; border: 1px solid var(--line); padding: 10px 12px; }
input:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 2px 0 0 var(--gold); }
textarea:focus { box-shadow: 0 0 0 1px var(--gold); }
::placeholder { color: #8d877d; }

.btn {
  display: block; width: 100%; margin-top: 26px; padding: 15px 24px; border: 1px solid #000; cursor: pointer;
  background: linear-gradient(#262626, #111); color: var(--gold-lite);
  font: 600 .95rem var(--font); letter-spacing: .28em; text-transform: uppercase;
  transition: transform .15s, box-shadow .2s, background .2s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0, 0, 0, .22); background: linear-gradient(#2e2e2e, #151515); }
.btn:focus-visible, .link:focus-visible, .back:focus-visible, .stepper button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.btn[disabled] { opacity: .6; cursor: wait; transform: none; box-shadow: none; }
.link, .back { background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit; color: var(--muted); }
.link { display: block; margin: 20px auto 0; text-decoration: underline; text-underline-offset: 3px; font-size: 1.05rem; }
.back { position: absolute; top: 22px; left: 26px; z-index: 1; font-size: .85rem; letter-spacing: .22em; text-transform: uppercase; }
.back:hover, .link:hover { color: var(--ink); }
.error { min-height: 1.4em; margin: 10px 0 0; color: #b3203f; font-size: 1rem; }

fieldset { border: 0; padding: 0; margin: 22px 0 0; }
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.choice { margin: 0; cursor: pointer; letter-spacing: 0; }
.choice input { position: absolute; opacity: 0; }
.choice span {
  display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 10px 6px; text-align: center;
  border: 1px solid var(--line); background: #fff; font-size: 1.05rem; line-height: 1.2; font-weight: 500;
  transition: all .2s;
}
.choice:hover span { border-color: var(--gold); }
.choice input:checked + span { background: #151515; color: var(--gold-lite); border-color: #151515; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--gold); }
.choice input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 3px; }

.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper button {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--gold); background: #fff; color: var(--ink);
  font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background .2s;
}
.stepper button:hover { background: #faf3df; }
.stepper output { min-width: 52px; text-align: center; font-size: 1.6rem; font-weight: 500; }

.check { width: 68px; height: 68px; margin: 24px auto 18px; border-radius: 50%; border: 1px solid var(--gold); display: grid; place-items: center; }
.check svg { width: 34px; height: 34px; fill: none; stroke: var(--gold-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.check svg path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: tick .6s .25s ease forwards; }
@keyframes tick { to { stroke-dashoffset: 0; } }

@media (max-width: 420px) { .choices { gap: 6px; } .choice span { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .hint { animation: none; }
}

/* ---------- See who's coming ---------- */
#see-who { margin-top: 8px; }
.whos-group { margin-top: 22px; }
.whos-group h3 { margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(201, 162, 74, .45); font-size: .85rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-ink); font-weight: 600; }
.whos-group ul { margin: 0; padding: 0; list-style: none; }
.whos-group li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 1.15rem; border-bottom: 1px dotted rgba(0, 0, 0, .08); }
.whos-group li span { color: var(--muted); font-size: 1rem; white-space: nowrap; }