:root {
  --ivory: #f7f3ea;
  --paper: #fffdf8;
  --card: #f3eee2;
  --line: #e4dccb;
  --ink: #4a4238;
  --soft: #8d8273;
  --gold: #b0935a;
  --gold-deep: #8f7442;
  --sage: #6f7d5c;
  --rose: #a86b5f;
  --script: "Pinyon Script", cursive;
  --serif: "Cormorant Garamond", Georgia, serif;
  --tx: 0; --ty: 0; /* tilt, -1..1 */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #e9e2d2 radial-gradient(circle at 50% 0, #f4efe4, #e3dac6 70%) fixed;
  color: var(--ink);
  font: 400 19px/1.55 var(--serif);
  -webkit-font-smoothing: antialiased;
}
body.sealed { overflow: hidden; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

.wrap {
  max-width: 540px;
  margin: 0 auto;
  background: var(--paper);
  box-shadow: 0 0 60px rgba(90, 70, 40, .18);
  overflow: clip;
}

.caps { text-transform: uppercase; letter-spacing: .26em; font-size: 12.5px; font-weight: 500; margin: 0; }
.soft { color: var(--soft); }
.script { font: 400 54px/1.1 var(--script); color: var(--gold); margin: 0 0 6px; }
.script.small { font-size: 40px; margin: 4px 0; }
.big { font-size: 24px; font-weight: 500; margin: 8px 0; line-height: 1.3; }

/* ---------- Seal ---------- */
#seal {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.85), transparent 60%),
    repeating-linear-gradient(45deg, rgba(176,147,90,.035) 0 2px, transparent 2px 9px),
    var(--ivory);
  transition: opacity .9s ease, visibility .9s;
}
#seal.gone { opacity: 0; visibility: hidden; }
.seal-card { text-align: center; color: var(--gold-deep); }
.wax {
  width: 148px; height: 148px; margin: 28px auto; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #d9bf86, #b0935a 45%, #85683a 100%);
  box-shadow: inset 0 0 0 7px rgba(255,255,255,.12), inset 0 -8px 18px rgba(0,0,0,.25), 0 10px 30px rgba(120,90,40,.35);
  display: grid; place-items: center; color: #fffaf0;
  animation: pulse 2.6s ease-in-out infinite;
  transition: transform .6s cubic-bezier(.3,1.6,.5,1);
}
.wax span { font: 400 50px/1 var(--script); text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.wax i { font-style: normal; font-size: 34px; margin: 0 2px; }
#seal.gone .wax { transform: scale(1.35) rotate(-8deg); }
.hint { opacity: .75; }
@keyframes pulse { 50% { transform: scale(1.04); box-shadow: inset 0 0 0 7px rgba(255,255,255,.12), inset 0 -8px 18px rgba(0,0,0,.25), 0 14px 40px rgba(120,90,40,.45); } }

/* ---------- Hero ---------- */
.hero { height: 280vh; height: 280svh; position: relative; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #e8dcc4; }
.layer { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform, opacity; }
.scene, .arch { object-fit: cover; }
.scene { object-position: 50% 55%; transform-origin: 50% 56%; }
.arch { object-position: 50% 100%; transform-origin: 50% 58%; }
.glow { background: radial-gradient(ellipse 62% 30% at 50% 33%, rgba(255,251,242,.92), rgba(255,251,242,.6) 55%, transparent 100%); pointer-events: none; }

.titles {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: 21vh; padding-top: 21svh; text-align: center; color: var(--ink);
  text-shadow: 0 0 18px rgba(255,251,242,.9);
}
.titles h1 { color: var(--gold-deep); font: 400 76px/0.92 var(--script); margin: 14px 0 6px; display: flex; flex-direction: column; align-items: center; }
.titles h1 em { font-size: 44px; font-style: normal; margin: 2px 0; }
.titles .caps { font-size: 11.5px; letter-spacing: .22em; padding: 0 56px; }
.titles .date { font-size: 22px; letter-spacing: .3em; margin: 10px 0 6px; font-weight: 500; }

.scroll-cue {
  position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; color: var(--ink); font-size: 11px;
  text-shadow: 0 0 10px rgba(255,251,242,1), 0 0 4px rgba(255,251,242,1);
}
.scroll-cue span {
  display: block; width: 1px; height: 34px; margin: 10px auto 0; background: linear-gradient(var(--ink), transparent);
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

.petals { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.petal {
  position: absolute; top: -20px; width: 12px; height: 9px; border-radius: 12px 0 12px 0;
  background: linear-gradient(135deg, #fffaf2, #f1e3d3); box-shadow: 0 1px 2px rgba(120,90,60,.2);
  animation: fall linear infinite; opacity: .9;
}
@keyframes fall {
  to { transform: translate3d(var(--drift), 110svh, 0) rotate(540deg); }
}

/* ---------- Paper sections ---------- */
.paper {
  position: relative; z-index: 2; margin-top: -1px;
  background:
    radial-gradient(circle at 0 0, rgba(176,147,90,.06), transparent 40%),
    radial-gradient(circle at 100% 60%, rgba(111,125,92,.06), transparent 40%),
    var(--paper);
  padding: 8px 22px 40px;
}
.paper::before {
  content: ""; position: absolute; left: 0; right: 0; top: -80px; height: 80px;
  background: linear-gradient(transparent, var(--paper)); pointer-events: none;
}
.block { text-align: center; padding: 46px 0; border-bottom: 1px solid var(--line); }
.block:last-of-type { border-bottom: 0; }
.intro .names, .end .names { font: 400 64px/1.05 var(--script); color: var(--gold); margin: 14px 0 10px; }
.lead { font-size: 21px; font-style: italic; margin: 0; }

.sprig {
  width: 120px; height: 26px; margin: 26px auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26'%3E%3Cg fill='none' stroke='%23b0935a' stroke-width='1'%3E%3Cpath d='M4 13h112'/%3E%3C/g%3E%3Cg fill='%236f7d5c' opacity='.75'%3E%3Cellipse cx='44' cy='9' rx='6' ry='2.4' transform='rotate(-25 44 9)'/%3E%3Cellipse cx='44' cy='17' rx='6' ry='2.4' transform='rotate(25 44 17)'/%3E%3Cellipse cx='76' cy='9' rx='6' ry='2.4' transform='rotate(25 76 9)'/%3E%3Cellipse cx='76' cy='17' rx='6' ry='2.4' transform='rotate(-25 76 17)'/%3E%3C/g%3E%3Ccircle cx='60' cy='13' r='4' fill='%23fffdf8' stroke='%23b0935a'/%3E%3C/svg%3E") center / contain no-repeat;
}

.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 22px auto 0; max-width: 380px; }
.countdown div { border-left: 1px solid var(--line); }
.countdown div:first-child { border-left: 0; }
.countdown b { display: block; font-size: 38px; font-weight: 500; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.countdown span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--soft); }

.event, .dress > div {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 24px 18px; margin: 18px 0 0; position: relative;
}
.event p { margin: 4px 0; }
.note { font-style: italic; color: var(--soft); font-size: 17px; }
.dress { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dress > div { margin: 12px 0 0; padding: 20px 10px; }

.venue { margin: 18px auto 18px; width: 78%; aspect-ratio: 3 / 4; border-radius: 999px 999px 14px 14px; overflow: hidden; border: 6px solid var(--card); box-shadow: 0 0 0 1px var(--line); }
.venue img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 18px; padding: 15px 30px; border-radius: 999px; border: 1px solid var(--gold);
  background: var(--gold); color: #fffdf8; text-decoration: none; cursor: pointer;
  text-transform: uppercase; letter-spacing: .2em; font-size: 13px; font-weight: 600;
  transition: background .2s, transform .15s;
}
.btn:active { transform: scale(.98); }
.btn:hover { background: var(--gold-deep); }
.btn.ghost { background: transparent; color: var(--gold-deep); }
.btn.ghost:hover { background: rgba(176,147,90,.1); }
.btn.whatsapp { background: #25d366; border-color: #25d366; letter-spacing: .08em; text-transform: none; font-size: 16px; }
.btn.whatsapp svg { width: 22px; height: 22px; }
.link { display: inline-block; margin-top: 10px; color: var(--sage); font-size: 17px; background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- RSVP ---------- */
form { text-align: left; margin-top: 26px; }
.field { display: block; margin: 0 0 18px; }
.field > span, legend { display: block; font-size: 15px; font-weight: 600; letter-spacing: .04em; margin-bottom: 6px; }
.field i { font-weight: 400; color: var(--soft); }
input, textarea {
  width: 100%; font: inherit; font-size: 18px; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,147,90,.18); }
textarea { resize: vertical; }
fieldset { border: 0; padding: 0; margin: 0 0 18px; }

.choice label, .checks label { display: block; margin: 0 0 8px; cursor: pointer; }
.choice input, .checks input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span, .checks span {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; transition: all .2s;
}
.choice span::before, .checks span::before {
  content: ""; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--gold); background: #fff; transition: all .2s;
}
.choice span::before { border-radius: 50%; }
.checks span::before { border-radius: 4px; }
.choice input:checked + span, .checks input:checked + span { border-color: var(--gold); background: #fbf7ee; }
.choice input:checked + span::before { background: radial-gradient(circle, var(--gold) 45%, #fff 50%); }
.checks input:checked + span::before {
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center/80% no-repeat;
}
.choice input:focus-visible + span, .checks input:focus-visible + span { box-shadow: 0 0 0 3px rgba(176,147,90,.25); }

.steppers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.stepper { display: grid; grid-template-columns: 40px 1fr 40px; grid-template-rows: auto auto; align-items: center; gap: 6px 4px; }
.stepper > span { grid-column: 1 / -1; font-size: 15px; font-weight: 600; letter-spacing: .04em; }
.stepper button { height: 44px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 22px; color: var(--gold-deep); cursor: pointer; }
.stepper input { text-align: center; padding: 10px 0; }

.hp { position: absolute; left: -9999px; }
.error { color: var(--rose); text-align: center; font-size: 17px; margin: 0 0 6px; }
form .btn { width: 100%; }
form .btn[disabled] { opacity: .6; cursor: wait; }

.thanks { padding-top: 6px; }
.thanks p { font-size: 20px; }

.end { text-align: center; padding: 30px 0 10px; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s ease, transform 1s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (min-width: 541px) {
  .wrap { margin-top: 0; }
}
@media (max-width: 370px) {
  .titles h1 { font-size: 64px; }
  .script { font-size: 46px; }
  .countdown b { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .wax, .scroll-cue span, .petal { animation: none; }
  .petals { display: none; }
}