:root {
  --ivory: #f6efe2;
  --paper: #fcf8ef;
  --paper-2: #f3e8d3;
  --maroon: #6a1422;
  --maroon-deep: #4a0c16;
  --gold: #b3843a;
  --gold-light: #e6c67f;
  --ink: #3a2a22;
  --muted: #7d6a5c;
  --serif: "Cormorant Garamond", Georgia, serif;
  --caps: "Cinzel", "Times New Roman", serif;
  --script: "Pinyon Script", cursive;
  --arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150' preserveAspectRatio='none'%3E%3Cpath d='M0 150V60C0 42 13 33 27 27C39 22 46 13 50 0C54 13 61 22 73 27C87 33 100 42 100 60V150Z'/%3E%3C/svg%3E");
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23a07a45' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M35 20c-7 9-7 20 0 27 7-7 7-18 0-27z'/%3E%3Cpath d='M35 47c-11-2-19-11-19-20 9 0 17 7 19 20zM35 47c11-2 19-11 19-20-9 0-17 7-19 20z'/%3E%3Cpath d='M22 52h26'/%3E%3Cpath d='M105 90c-7 9-7 20 0 27 7-7 7-18 0-27z'/%3E%3Cpath d='M105 117c-11-2-19-11-19-20 9 0 17 7 19 20zM105 117c11-2 19-11 19-20-9 0-17 7-19 20z'/%3E%3Cpath d='M92 122h26'/%3E%3Ccircle cx='105' cy='35' r='2'/%3E%3Ccircle cx='35' cy='105' r='2'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.locked, html.locked body { overflow: hidden; height: 100%; }
body {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--ivory);
  background-image: var(--pattern), radial-gradient(ellipse at top, #fbf6ec, var(--ivory) 70%);
  background-size: 140px 140px, 100% 100%;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- Type helpers ---------- */
.caps { font-family: var(--caps); letter-spacing: .18em; text-transform: uppercase; margin: 0; }
.small { font-size: 12px; }
.tiny { font-size: 10.5px; }
.script { font-family: var(--script); font-weight: 400; margin: 0; line-height: 1.15; color: var(--maroon); }
.big { font-size: 44px; }
.muted { color: var(--muted); }
.italic { font-style: italic; }
.gold { color: var(--gold-light); }
.names { font-size: clamp(46px, 13vw, 64px); }
.names .amp { font-size: .7em; color: var(--gold); }
.date-line { font-size: 13px; color: var(--gold); margin-top: 6px; }

.divider { display: flex; align-items: center; gap: 12px; width: 70%; max-width: 260px; margin: 22px auto; color: var(--gold); }
.divider span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.divider i { font-style: normal; font-size: 14px; }
.small-div { margin: 18px auto; }

/* ---------- Arch frame (gold border via nested mask) ---------- */
.arch-frame {
  position: relative;
  -webkit-mask: var(--arch) center / 100% 100% no-repeat;
  mask: var(--arch) center / 100% 100% no-repeat;
  background: linear-gradient(160deg, #f1d99a, var(--gold) 40%, #8a6224 70%, #e9cd86);
  padding: 5px;
}
.arch-frame img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask: var(--arch) center / 100% 100% no-repeat;
  mask: var(--arch) center / 100% 100% no-repeat;
}

/* ---------- Torn paper ---------- */
.paper { position: relative; padding: 34px 26px; text-align: center; isolation: isolate; }
.paper::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.9), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(214,190,150,.35), transparent 60%),
    var(--paper);
  filter: url(#torn) drop-shadow(0 8px 14px rgba(70,40,20,.16));
}

/* ---------- Wax seal ---------- */
.seal {
  position: absolute; z-index: 5;
  width: 78px; height: 78px; border: 0; padding: 0;
  border-radius: 48% 52% 50% 50% / 52% 47% 53% 48%;
  background: radial-gradient(circle at 35% 30%, #f7e3a6, #d2a24a 40%, #9b6c22 80%, #7a5216);
  box-shadow: inset 0 0 0 6px rgba(120,80,20,.25), inset 0 0 0 8px rgba(255,236,190,.35), 0 6px 14px rgba(40,10,0,.4);
  display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent;
}
.seal span {
  font-family: var(--caps); font-weight: 600; font-size: 22px; letter-spacing: .04em;
  color: #7c5519; text-shadow: 0 1px 0 rgba(255,245,210,.7), 0 -1px 0 rgba(90,50,0,.35);
  width: 54px; height: 54px; line-height: 54px; border-radius: 50%;
  border: 1.5px solid rgba(124,85,25,.5);
}
.seal::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid rgba(230,198,127,.8); animation: pulse 2s ease-out infinite;
}
.seal.small { width: 62px; height: 62px; }
.seal.small span { width: 42px; height: 42px; line-height: 42px; font-size: 17px; }
@keyframes pulse { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }

/* ---------- Intro ---------- */
#intro {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background-color: var(--ivory);
  background-image: var(--pattern), radial-gradient(ellipse at center, #fdf9f1, var(--ivory) 75%);
  background-size: 140px 140px, 100% 100%;
  transition: opacity 1s ease, visibility 1s;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
}
#intro.gone { opacity: 0; visibility: hidden; }
#intro.opening .tap-hint, #intro.opening .place { opacity: 0; transition: opacity .4s; }
.intro-inner { text-align: center; width: 100%; max-width: 420px; }
.intro-inner .names { margin: 8px 0 0; }
.tap-hint { font-style: italic; color: var(--muted); margin: 18px 0 4px; animation: breathe 2.4s ease-in-out infinite; }
.place { color: var(--muted); }
@keyframes breathe { 50% { opacity: .45; } }

.envelope, .rsvp-env {
  position: relative; margin: 0 auto;
  width: min(70vw, 300px); aspect-ratio: 1 / 1.05;
}
.envelope { margin-top: 18px; height: min(58vh, 330px); width: auto; aspect-ratio: 300 / 330; max-width: 80vw; }
.env-back, .env-pocket { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; border-radius: 4px; }
.env-back { background: linear-gradient(180deg, #4d0d17, #5e111d); box-shadow: 0 18px 30px rgba(60,10,15,.35); }
.env-card { position: absolute; left: 9%; right: 9%; top: 0; bottom: 6%; z-index: 2; transition: transform 1.3s cubic-bezier(.2,.8,.2,1); }
.env-pocket {
  z-index: 3;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 40%),
    linear-gradient(180deg, #7a1a28, var(--maroon) 50%, #5a1019);
  clip-path: polygon(0 0, 50% 34%, 100% 0, 100% 100%, 0 100%);
  transition: transform 1.1s ease-in, opacity 1.1s ease-in;
}
.env-back { transition: transform 1.1s ease-in, opacity 1.1s ease-in; }
.envelope .seal { left: 50%; top: 42%; transform: translate(-50%, 0); transition: transform .6s ease, opacity .6s ease; }

.envelope.open .seal { transform: translate(-50%, 0) scale(1.4) rotate(-20deg); opacity: 0; }
.envelope.open .seal::after { display: none; }
.envelope.open .env-pocket, .envelope.open .env-back { transform: translateY(120%); opacity: 0; }
.envelope.open .env-card { transform: translateY(-4%) scale(1.08); }

/* petals */
.petal {
  position: fixed; top: -30px; z-index: 60; pointer-events: none;
  width: 14px; height: 18px; border-radius: 80% 0 80% 0;
  background: radial-gradient(circle at 30% 30%, #e0485d, #9b1428);
  animation: fall linear forwards;
}
.petal.marigold { background: radial-gradient(circle at 30% 30%, #ffc94d, #e8890c); border-radius: 50% 50% 50% 0; }
@keyframes fall {
  to { transform: translate(var(--dx), 110vh) rotate(var(--rot)); opacity: .9; }
}

/* ---------- Main ---------- */
#invite { max-width: 480px; margin: 0 auto; padding: 0 16px 60px; }
.section { padding: 34px 0; }
.hero { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 0 24px; }
.hero-arch { width: min(68vw, 290px); aspect-ratio: 3 / 4.2; margin: 18px auto 10px; }
.hero .names { margin-top: 6px; }
.scroll-hint { font-style: italic; color: var(--muted); font-size: 15px; animation: breathe 2.4s ease-in-out infinite; }
.scroll-hint::after { content: "⌄"; display: block; font-style: normal; font-size: 20px; color: var(--gold); }

.lead { font-style: italic; margin: 4px 0 14px; color: var(--muted); }
.invite-card { padding: 44px 28px; }
.person { font-size: 50px; }
.parents { margin: 2px 0 0; font-size: 16px; color: var(--muted); font-style: italic; }
.with { font-size: 28px; color: var(--gold); margin: 10px 0 6px; }
.card-foot { display: flex; align-items: stretch; justify-content: center; gap: 16px; font-size: 15.5px; line-height: 1.35; }
.card-foot .caps { color: var(--gold); }
.card-foot .vr { width: 1px; background: linear-gradient(transparent, var(--gold), transparent); }
.stamp {
  position: absolute; right: -8px; bottom: -14px; width: 78px; height: 78px; transform: rotate(-12deg);
  display: grid; place-items: center; color: #fff8e6; font-family: var(--caps); font-size: 9.5px; letter-spacing: .15em; text-align: center; line-height: 1.4;
  background: #7f9a6a;
  clip-path: polygon(50% 0,61% 9%,75% 5%,79% 19%,93% 23%,90% 37%,100% 50%,90% 63%,93% 77%,79% 81%,75% 95%,61% 91%,50% 100%,39% 91%,25% 95%,21% 81%,7% 77%,10% 63%,0 50%,10% 37%,7% 23%,21% 19%,25% 5%,39% 9%);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.2);
}

.cal-card { transform: rotate(.8deg); }
.cal-card .italic { margin: 0 0 6px; font-size: 16px; }
.month { color: var(--gold); font-size: 13px; margin: 4px 0 14px; }
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px 2px; max-width: 300px; margin: 0 auto; font-size: 15px; }
.calendar .dow { font-family: var(--caps); font-size: 10px; color: var(--muted); letter-spacing: .1em; }
.calendar .d { height: 34px; display: grid; place-items: center; position: relative; }
.calendar .hl { color: #fff; font-weight: 600; }
.calendar .hl::before {
  content: ""; position: absolute; width: 34px; height: 34px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle at 35% 30%, #8a2233, var(--maroon-deep));
  box-shadow: 0 0 0 3px rgba(179,132,58,.35);
}
.calendar .hl::after { content: "♥"; position: absolute; top: -9px; right: -2px; font-size: 11px; color: var(--gold); }

.btn-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.btn {
  display: inline-block; padding: 11px 18px; border: 1px solid var(--gold); background: transparent;
  font-family: var(--caps); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--maroon); text-decoration: none; border-radius: 2px;
}
.btn.ghost { border-color: rgba(179,132,58,.45); color: var(--muted); }
.btn.solid { background: var(--maroon); color: var(--gold-light); border-color: var(--maroon); width: 100%; padding: 14px; }
.btn:active { transform: translateY(1px); }

.maroon-card {
  position: relative; text-align: center; padding: 34px 26px; color: #f6e9d6;
  background: linear-gradient(170deg, #7a1a28, var(--maroon-deep));
  box-shadow: 0 16px 30px rgba(74,12,22,.28);
}
.maroon-card::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(230,198,127,.45); pointer-events: none; }
.maroon-card .title { font-size: 26px; letter-spacing: .12em; margin: 6px 0 20px; color: #fbeedd; }
.timeline { text-align: left; max-width: 280px; margin: 0 auto; position: relative; }
.tl-day { text-align: center; margin: 16px 0 8px; }
.tl-row { display: grid; grid-template-columns: 56px 30px 1fr; align-items: center; padding: 8px 0; }
.tl-time { font-family: var(--caps); font-size: 14px; color: var(--gold-light); text-align: right; }
.tl-dot { width: 26px; height: 26px; margin: 0 auto; border-radius: 50%; border: 1px solid var(--gold-light); display: grid; place-items: center; font-size: 12px; color: var(--gold-light); }
.tl-name { font-size: 19px; padding-left: 8px; }

.events { display: grid; gap: 26px; padding: 18px 0; }
.event { position: relative; width: 88%; }
.event.alt { margin-left: auto; }
.event .arch-frame { aspect-ratio: 3 / 3.6; }
.event-info { margin: -70px 18px 0; padding: 24px 18px 22px; transform: rotate(-1.5deg); }
.event.alt .event-info { transform: rotate(1.5deg); }
.event-info h4 { font-size: 38px; margin: 4px 0 0; }
.event-info .time { font-family: var(--caps); font-size: 13px; letter-spacing: .14em; color: var(--gold); margin: 4px 0 6px; }
.event-info .muted { margin: 0; font-style: italic; font-size: 16px; }
.event-info .caps { color: var(--muted); }

.venue-card .photo { margin: 14px auto 12px; padding: 6px; background: #fff; box-shadow: 0 6px 16px rgba(70,40,20,.18); transform: rotate(-1.2deg); }
.venue-card .photo img { aspect-ratio: 4 / 3.4; object-fit: cover; object-position: center 60%; width: 100%; }
.addr { font-size: 19px; margin: 6px 0 2px; }
.small-txt { font-size: 15px; font-style: italic; margin: 0 0 18px; }

.countdown-sec { position: relative; text-align: center; padding: 70px 0; }
.countdown-bg {
  position: absolute; inset: 0 -16px; z-index: -1;
  background: url(assets/lake.jpg) center / cover;
  filter: grayscale(1) sepia(.35); opacity: .14;
  -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent);
}
.countdown-sec .tiny { color: var(--gold); }
.countdown-sec .title { font-size: 24px; letter-spacing: .12em; color: var(--maroon); margin: 6px 0 18px; }
.countdown { display: flex; justify-content: center; align-items: flex-start; gap: 6px; }
.countdown div { min-width: 58px; }
.countdown b { display: block; font-family: var(--caps); font-weight: 400; font-size: 36px; color: var(--maroon); line-height: 1.1; }
.countdown span { font-family: var(--caps); font-size: 9.5px; letter-spacing: .18em; color: var(--muted); text-transform: uppercase; }
.countdown i { font-style: normal; font-size: 28px; color: var(--gold); line-height: 1.2; }
.countdown-sec .italic { margin-top: 16px; font-size: 16px; }

.quote { padding: 30px 26px; }
.quote > i { font-style: normal; }
.quote-text { font-style: italic; font-size: 24px; margin: 8px 0; }

/* ---------- RSVP ---------- */
.rsvp-sec { text-align: center; }
.rsvp-env { width: min(72vw, 290px); aspect-ratio: 290 / 360; }
.rsvp-env .env-card { transition: transform .9s ease; }
.rsvp-label { position: absolute; z-index: 4; left: 4%; right: 4%; top: 27%; padding: 16px 8px; transform: rotate(-2deg); }
.rsvp-label .script { font-size: 26px; }
.rsvp-env .seal { left: 50%; top: 58%; transform: translateX(-50%); }
.rsvp-sec.opened .rsvp-env, .rsvp-sec.opened .rsvp-hint { display: none; }

.rsvp-form { display: none; text-align: left; padding: 34px 24px 30px; }
.rsvp-sec.opened .rsvp-form { display: block; animation: rise .7s ease both; }
.rsvp-form > .caps, .rsvp-form > h3, .rsvp-form > .muted { text-align: center; }
.rsvp-form > .muted { font-style: italic; margin: 2px 0 18px; font-size: 16px; }
.rsvp-form > .caps { color: var(--gold); }
.field { display: block; margin: 14px 0; }
.field > span, legend { display: block; font-family: var(--caps); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.field em { text-transform: none; letter-spacing: 0; font-family: var(--serif); }
input, textarea {
  width: 100%; font: inherit; font-size: 18px; color: var(--ink);
  background: rgba(255,255,255,.65); border: 0; border-bottom: 1px solid rgba(179,132,58,.6);
  padding: 8px 6px; border-radius: 0; outline: none;
}
input:focus, textarea:focus { border-bottom-color: var(--maroon); background: #fff; }
textarea { resize: vertical; border: 1px solid rgba(179,132,58,.45); }
fieldset { border: 0; padding: 0; margin: 16px 0; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice legend { grid-column: 1 / -1; }
.choice label, .events-pick label { position: relative; cursor: pointer; }
.choice input, .events-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: block; text-align: center; padding: 11px 6px; border: 1px solid rgba(179,132,58,.5); font-size: 16px;
  background: rgba(255,255,255,.5);
}
.choice input:checked + span { background: var(--maroon); color: var(--gold-light); border-color: var(--maroon); }
.choice input:focus-visible + span, .events-pick input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.events-pick label { display: block; margin: 6px 0; }
.events-pick span { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.events-pick span::before {
  content: ""; width: 20px; height: 20px; flex: none; border: 1px solid var(--gold); background: rgba(255,255,255,.6);
  display: grid; place-items: center;
}
.events-pick input:checked + span::before { content: "✓"; background: var(--maroon); color: var(--gold-light); font-size: 13px; border-color: var(--maroon); }
.stepper { display: flex; align-items: center; gap: 8px; max-width: 170px; }
.stepper button { width: 40px; height: 40px; border: 1px solid var(--gold); background: rgba(255,255,255,.6); font-size: 20px; color: var(--maroon); flex: none; }
.stepper input { text-align: center; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.form-error { color: #a01c2c; min-height: 1em; font-size: 16px; margin: 8px 0; text-align: center; }
.thanks { animation: rise .7s ease both; }
.thanks p { margin: 8px 0; }
.link-btn { background: none; border: 0; color: var(--maroon); font-family: var(--caps); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; padding: 10px; }

.closing { text-align: center; }
.close-card { transform: rotate(-.6deg); }
.families { font-size: 20px; line-height: 1.4; margin: 4px 0 8px; }
.back-top { margin-top: 26px; }

/* ---------- Music FAB ---------- */
.music-fab {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40;
  width: 50px; height: 50px; border-radius: 50%; border: 0;
  background: radial-gradient(circle at 35% 30%, #8a2233, var(--maroon-deep));
  box-shadow: 0 0 0 3px rgba(230,198,127,.5), 0 8px 18px rgba(40,5,10,.35);
  display: grid; place-items: center;
}
.music-fab svg { width: 22px; height: 22px; fill: var(--gold-light); }
.music-fab::after { content: ""; position: absolute; width: 30px; height: 2px; background: var(--gold-light); transform: rotate(-45deg); border-radius: 2px; }
.playing .music-fab::after { display: none; }
.playing .music-fab svg { animation: bob 1.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-2px) rotate(-6deg); } }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.event.reveal.in .event-info { animation: settle .9s .25s ease both; }
@keyframes settle { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: 0 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}