:root {
  --ivory: #fbf7f0;
  --paper: #fffdf9;
  --rose: #a64f59;
  --rose-deep: #7d3f49;
  --gold: #ba8a3e;
  --ink: #453b37;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ivory); color: var(--ink); font-family: Georgia, "Times New Roman", serif; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.invitation-shell {
  position: relative; min-height: 100vh; overflow: hidden; padding: 22px 16px 44px;
  background: radial-gradient(circle at 10% 10%, rgba(233,199,197,.55), transparent 30%),
    radial-gradient(circle at 90% 75%, rgba(126,143,123,.18), transparent 28%),
    linear-gradient(145deg, #fffdf9 0%, #f9f1e9 52%, #f8eeed 100%);
}
.ambient-glow { position: absolute; inset: 0; pointer-events: none; opacity: .4; background-image: radial-gradient(rgba(186,138,62,.14) .7px, transparent .7px); background-size: 9px 9px; }
.countdown { position: relative; z-index: 10; width: min(94vw, 520px); margin: 0 auto 18px; padding: 9px 12px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(186,138,62,.42); border-bottom: 1px solid rgba(186,138,62,.42); background: rgba(255,255,255,.48); }
.countdown div { text-align: center; border-right: 1px solid rgba(186,138,62,.25); }
.countdown div:last-child { border-right: 0; }
.countdown strong { display: block; color: var(--rose-deep); font-size: 1.1rem; font-weight: 500; }
.countdown span { font-size: .61rem; letter-spacing: .12em; text-transform: uppercase; color: #776a64; }
.book-stage { position: relative; z-index: 5; width: min(100%, 690px); margin: 0 auto; padding: 0 34px; perspective: 1800px; }
.book { position: relative; width: 100%; aspect-ratio: 2 / 3; transform-style: preserve-3d; filter: drop-shadow(0 25px 30px rgba(76,48,38,.2)); touch-action: pan-y; }
.book-page { position: absolute; inset: 0; margin: 0; transform-origin: left center; transform-style: preserve-3d; transition: transform 1.35s cubic-bezier(.58,.02,.25,1), filter .65s ease; backface-visibility: hidden; border-radius: 4px 12px 12px 4px; overflow: hidden; background: var(--paper); }
.book-page:nth-child(1) { z-index: 14; }
.book-page:nth-child(2) { z-index: 13; }
.book-page:nth-child(3) { z-index: 12; }
.book-page:nth-child(4) { z-index: 11; }
.book.instant-reset .book-page { transition: none !important; }
.book-page::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(83,50,38,.14), transparent 4%, transparent 95%, rgba(255,255,255,.24)); }
.book-page.turned { transform: rotateY(-180deg); pointer-events: none; }
.book-page.turning { filter: brightness(.96) drop-shadow(18px 9px 18px rgba(70,42,33,.28)); }
.book-page img { width: 100%; height: 100%; display: block; object-fit: cover; user-select: none; }
.page-back { position: absolute; inset: 0; transform: rotateY(180deg); background: linear-gradient(135deg, #f7eee6, #fffdfa); backface-visibility: hidden; }
.page-arrow { position: absolute; top: 50%; z-index: 100; width: 42px; height: 58px; padding: 0; transform: translateY(-50%); border: 1px solid rgba(186,138,62,.58); border-radius: 999px; background: rgba(255,255,255,.88); color: var(--rose-deep); font-size: 2rem; line-height: 1; cursor: pointer; box-shadow: 0 10px 25px rgba(70,45,36,.18); transition: transform .25s ease, opacity .25s ease; }
.page-arrow.previous { left: 17px; }
.page-arrow.next { right: 17px; }
.page-arrow.next:not(:disabled) { animation: guideBlink 1.15s ease-in-out infinite; }
.page-arrow:hover:not(:disabled) { transform: translateY(-50%) scale(1.08); animation-play-state: paused; opacity: 1; }
.page-arrow:disabled { opacity: .16; cursor: default; animation: none; }
@keyframes guideBlink {
  0%, 100% { opacity: 1; background: rgba(255,255,255,.94); box-shadow: 0 0 0 0 rgba(166,79,89,.38), 0 10px 25px rgba(70,45,36,.18); }
  50% { opacity: .18; background: rgba(255,255,255,.48); box-shadow: 0 0 0 10px rgba(166,79,89,0), 0 5px 12px rgba(70,45,36,.06); }
}
.page-progress { position: relative; z-index: 10; display: flex; justify-content: center; align-items: center; gap: 8px; margin: 16px auto 26px; color: #796c65; font-size: .75rem; }
.page-progress button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #d9c9c2; cursor: pointer; }
.page-progress button.active { width: 24px; border-radius: 5px; background: var(--rose); }
.page-progress span { margin-left: 7px; }
.actions { position: relative; z-index: 5; width: min(100%, 860px); margin: 0 auto 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.actions button, .actions a { min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid rgba(166,79,89,.25); border-radius: 14px; background: rgba(255,255,255,.75); color: var(--rose-deep); text-decoration: none; cursor: pointer; box-shadow: 0 10px 26px rgba(81,52,41,.07); }
.actions span { color: var(--gold); font-size: 1.18rem; }
.event-notes { position: relative; z-index: 5; width: min(100%, 760px); margin: 0 auto 26px; padding: 26px clamp(22px, 6vw, 48px) 28px; text-align: center; color: var(--ink); border: 1px solid rgba(186,138,62,.35); border-radius: 24px; background: linear-gradient(145deg, rgba(255,253,249,.94), rgba(249,240,235,.88)); box-shadow: 0 20px 60px rgba(86,57,47,.08); }
.event-notes .eyebrow { margin: 0 0 5px; color: var(--gold); letter-spacing: .18em; text-transform: uppercase; font-size: .68rem; }
.event-notes h2 { margin: 0 0 9px; color: var(--rose-deep); font-size: clamp(1.65rem, 5vw, 2.25rem); font-weight: 400; font-style: italic; }
.event-notes p:not(.eyebrow) { margin: 0; line-height: 1.65; color: #675b55; }
.event-notes strong { color: var(--rose-deep); font-weight: 650; }
.event-notes .adults-only { display: inline-block; margin-top: 12px !important; padding-top: 9px; color: var(--gold) !important; border-top: 1px solid rgba(186,138,62,.35); font-size: 1.02rem; font-weight: 650; letter-spacing: .04em; }
.event-notes .adults-only span { display: inline-block; margin-top: 5px; color: var(--rose-deep); font-size: .94rem; letter-spacing: .025em; }
.rsvp-card { position: relative; z-index: 5; width: min(100%, 760px); margin: 0 auto 26px; padding: 34px clamp(22px, 6vw, 54px); border: 1px solid rgba(186,138,62,.35); border-radius: 24px; background: rgba(255,253,249,.88); box-shadow: 0 20px 60px rgba(86,57,47,.09); }
.rsvp-card.revealed { animation: revealRsvp .7s ease both; scroll-margin-top: 18px; }
@keyframes revealRsvp {
  from { opacity: 0; transform: translateY(24px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.rsvp-card > .eyebrow { margin: 0 0 5px; text-align: center; color: var(--gold); letter-spacing: .18em; text-transform: uppercase; font-size: .68rem; }
.rsvp-card h2 { margin: 0; text-align: center; color: var(--rose-deep); font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 400; font-style: italic; }
.rsvp-intro { max-width: 560px; margin: 10px auto 24px; text-align: center; color: #675b55; line-height: 1.65; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid label { display: grid; gap: 7px; color: var(--rose-deep); font-size: .86rem; letter-spacing: .02em; }
.form-grid label.full { grid-column: 1 / -1; }
.form-grid small { color: #8c7d76; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; border: 1px solid rgba(166,79,89,.22); border-radius: 12px; padding: 12px 13px; background: rgba(255,255,255,.86); color: var(--ink); font: inherit; outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(186,138,62,.12); }
.honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.submit-rsvp { display: block; margin: 22px auto 0; padding: 13px 24px; border: 0; border-radius: 999px; background: var(--rose-deep); color: white; cursor: pointer; box-shadow: 0 8px 20px rgba(125,63,73,.22); }
.submit-rsvp:disabled { opacity: .6; cursor: wait; }
.form-status { min-height: 1.5em; margin: 14px 0 0; text-align: center; font-size: .88rem; }
.form-status.success { color: #537053; }
.form-status.error { color: #9a3f4c; }
.gift-card { position: relative; z-index: 5; width: min(100%, 760px); margin: 0 auto; padding: 34px clamp(22px, 6vw, 54px); text-align: center; border: 1px solid rgba(186,138,62,.35); border-radius: 24px; background: rgba(255,253,249,.82); box-shadow: 0 20px 60px rgba(86,57,47,.09); }
.gift-mark { color: var(--gold); font-size: 1.8rem; }
.gift-card .eyebrow { margin: 8px 0 5px; color: var(--gold); letter-spacing: .18em; text-transform: uppercase; font-size: .68rem; }
.gift-card h2 { margin: 0 0 13px; color: var(--rose-deep); font-size: clamp(1.65rem, 5vw, 2.4rem); font-weight: 400; font-style: italic; }
.gift-card > p:not(.eyebrow) { margin: 0 auto; max-width: 620px; line-height: 1.75; color: #675b55; }
.gift-card button, .modal button { margin-top: 20px; padding: 12px 20px; border: 0; border-radius: 999px; background: var(--rose-deep); color: white; cursor: pointer; box-shadow: 0 8px 20px rgba(125,63,73,.22); }
footer { position: relative; z-index: 5; padding: 28px 0 0; text-align: center; color: #85756c; font-size: .75rem; letter-spacing: .08em; }
.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(61,44,39,.52); backdrop-filter: blur(8px); }
.modal { width: min(100%, 420px); padding: 32px; border-radius: 22px; background: var(--paper); text-align: center; box-shadow: 0 28px 80px rgba(0,0,0,.25); }
.modal span { color: var(--gold); font-size: 2rem; }
.modal p { line-height: 1.65; white-space: pre-line; }
@media (max-width: 700px) {
  .invitation-shell { padding: 15px 8px 34px; }
  .book-stage { width: min(100%, 520px); padding: 0 18px; }
  .page-arrow { width: 30px; height: 48px; font-size: 1.6rem; padding: 0; }
  .page-arrow.previous { left: 5px; }
  .page-arrow.next { right: 5px; }
  .actions { grid-template-columns: 1fr; padding: 0 10px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid label.full { grid-column: auto; }
  .rsvp-card { border-radius: 18px; }
  .event-notes { border-radius: 18px; }
  .gift-card { border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}