/* ==========================================================
   Swan Serenade — blush paper, wine-red wax, a rose arch over a swan lake
   ========================================================== */
.ss {
  --paper: #f3e5e1;
  --paper-2: #f9efec;
  --ink: #5a3436;
  --wine: #6b1c2a;
  --wine-2: #8a2b3b;
  --rose: #c98b8b;
  --line: rgba(107, 28, 42, 0.24);
  --script: 'Pinyon Script', 'Parisienne', cursive;
  --serif: 'VS Numbers', 'Cormorant Garamond', Georgia, serif;
  --tear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40 L0 17.2 L7.2 18.6 L21.3 9.7 L28.7 16.6 L38.3 20.3 L50.6 32.3 L61.3 8.5 L80.3 12.3 L92.3 11.8 L101.6 21.2 L117.0 17.2 L134.1 13.4 L154.1 22.1 L162.0 16.5 L175.9 9.7 L191.0 24.8 L206.5 19.4 L227.7 17.5 L244.9 20.6 L255.4 15.9 L268.8 5.0 L287.1 9.6 L307.1 10.5 L327.2 23.7 L339.8 15.5 L348.2 7.9 L362.0 19.6 L374.7 15.6 L391.8 18.3 L398.6 25.2 L417.4 16.1 L433.5 5.5 L442.1 7.1 L450.6 10.8 L470.5 16.1 L482.1 21.1 L504.0 17.4 L511.6 15.2 L520.2 9.4 L528.6 19.2 L550.2 24.5 L562.1 12.0 L580.5 19.9 L602.3 24.3 L620.1 13.1 L626.6 9.5 L643.7 26.2 L665.5 26.2 L675.1 14.5 L695.5 24.1 L714.3 10.5 L732.8 22.5 L751.5 15.0 L763.8 16.2 L772.5 17.8 L791.4 11.6 L807.9 15.3 L814.2 26.5 L835.1 16.8 L844.5 13.5 L859.9 13.7 L880.4 15.4 L900.9 16.6 L915.4 17.5 L924.3 9.1 L937.9 22.1 L952.2 19.0 L967.2 13.5 L981.3 19.1 L994.4 20.0 L1000 18 L1000 40 Z'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.25 0 0 0 0 0.25 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --vx-bg: var(--paper);
  --vx-ink: var(--ink);
  --vx-accent: var(--wine);
  --vx-accent-ink: #fff;
  --vx-line: var(--line);
  --vx-label: var(--wine);
  --vx-field-bg: #fff;
  --vx-field-ink: var(--ink);
  --vx-display: var(--serif);
  --vx-body: var(--serif);
  background: var(--paper);
  color: var(--ink);
  font: 400 1.12rem/1.6 var(--serif);
}
.ss .vx-loader { background: var(--paper) var(--grain); }
.ss .vx-loader-mono { font-family: var(--script); color: var(--wine); }
.ss .vx-loader-text { color: var(--ink); opacity: 1; font-weight: 400; }

/* Desktop: the arch, blurred, around the phone-width column */
.ss-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--paper); }
.ss-backdrop img { width: 100%; height: 100%; object-fit: cover; filter: blur(26px) saturate(0.9); transform: scale(1.12); opacity: 0.75; }
.ss-col { background: var(--paper); box-shadow: 0 0 60px rgba(90, 40, 40, 0.18); }

/* ---------- Opening: the envelope ---------- */
.ss-env { z-index: 60; overflow: hidden; background: #4a1420; }
.ss-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ss-seal { position: absolute; left: 50%; top: 50%; width: 132px; aspect-ratio: 520 / 540; margin: -68px 0 0 -66px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ss-seal img { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 8px 10px rgba(60, 10, 20, 0.35)); }
.ss-seal-glow { position: absolute; inset: -40%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 160, 0.95), rgba(255, 170, 120, 0.45) 40%, transparent 68%); opacity: 0; }
.ss-seal-mono { position: absolute; inset: 0; display: grid; place-content: center; font: 400 2.7rem/1 var(--script); color: #9c7a45; text-shadow: -1px -1px 1px rgba(30, 0, 8, 0.7), 1px 1px 1px rgba(255, 190, 190, 0.45); padding: 0 0 4px 6px; }
.ss-seal-mono em { font-style: normal; margin: -0.62em 0 0 0.55em; }
.ss-seal:focus-visible { outline: 2px solid var(--wine); outline-offset: 8px; border-radius: 50%; }
.ss-env-text { position: absolute; left: 0; right: 0; bottom: calc(9% + env(safe-area-inset-bottom)); text-align: center; color: #f6e7d3; text-shadow: 0 2px 12px rgba(40, 6, 12, 0.7); }
.ss-env-text p { margin: 0 0 6px; }
.ss-dear { font: 400 2.1rem/1.1 var(--script); color: #f1d9a8; }
.ss-tap { font: italic 500 1.3rem/1.3 var(--serif); }
.ss-env-text small { font: 600 0.86rem/1 var(--serif); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }

/* ---------- Hero ---------- */
.ss-hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; }
.ss-hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.ss-hero-petals { pointer-events: none; }
.ss-hero-text { position: absolute; left: 12%; right: 12%; top: 15%; display: grid; justify-items: center; text-align: center; padding: 26px 8px 34px; color: var(--ink); }
.ss-hero-text::before { content: ''; position: absolute; inset: -6% -14%; z-index: -1; background: radial-gradient(closest-side, rgba(251, 241, 236, 0.78), rgba(251, 241, 236, 0.45) 62%, transparent); }
.ss-hero-kicker { margin: 0; font: 400 2.2rem/1 var(--script); color: var(--ink); }
.ss-hero-date { margin: 6px 0 14px; font: 600 1.1rem/1 var(--serif); letter-spacing: 0.14em; }
.ss-names { margin: 0; display: grid; justify-items: center; font-weight: 400; }
.ss-name { font: 400 clamp(3.7rem, 18vw, 5.2rem)/0.95 var(--script); color: var(--wine); text-shadow: 0 2px 14px rgba(255, 245, 240, 0.9); }
.ss-amp { font: 400 2.9rem/1 var(--script); color: var(--ink); margin: 2px 0 4px; }
.ss-scroll { margin: 22px 0 0; display: grid; justify-items: center; gap: 4px; font: italic 500 1.1rem/1 var(--serif); }
.ss-scroll i { width: 10px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); animation: ss-bob 1.6s ease-in-out infinite; }
@keyframes ss-bob { 50% { transform: translateY(5px) rotate(45deg); } }

/* ---------- Pages ---------- */
.ss-sec { position: relative; padding: 70px 24px 74px; text-align: center; background: var(--grain), var(--paper); }
.ss-sec:nth-child(odd) { background: var(--grain), var(--paper-2); }
/* every page after the first starts with a torn paper edge */
.ss-sec + .ss-sec::before { content: ''; position: absolute; left: 0; right: 0; top: -26px; height: 30px; background: inherit; -webkit-mask: var(--tear) 0 0 / 100% 100% no-repeat; mask: var(--tear) 0 0 / 100% 100% no-repeat; filter: drop-shadow(0 -2px 2px rgba(90, 40, 40, 0.1)); z-index: 1; }
.ss-h2 { margin: 0 0 18px; font: 400 2.6rem/1.15 var(--script); color: var(--wine); text-wrap: balance; }
.ss-p { margin: 0 auto 14px; max-width: 34ch; font: 400 1.15rem/1.65 var(--serif); color: var(--ink); text-wrap: pretty; }

.ss-welcome { padding-top: 0; }
.ss-lake { display: block; max-width: none; width: calc(100% + 48px); margin: 0 -24px 26px; transform: scaleX(-1); -webkit-mask: linear-gradient(to bottom, #000 62%, transparent); mask: linear-gradient(to bottom, #000 62%, transparent); }
.ss-bismillah { margin: 0 0 22px; font: 400 1.9rem/1.6 'Amiri', serif; color: var(--wine); }
.ss-vow { margin: 0 0 24px; display: grid; gap: 2px; }
.ss-vow span { font: 400 2.1rem/1.25 var(--script); color: var(--ink); }

.ss-clock { margin: 8px 0 14px; }
.ss .vx-countdown { display: flex; justify-content: center; gap: 12px; }
.ss .vx-unit { position: relative; display: grid; justify-items: center; min-width: 66px; gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ss .vx-unit b { font: 500 2.7rem/1 var(--serif); color: var(--ink); }
.ss .vx-unit:not(:last-child)::after { content: ':'; position: absolute; right: -10px; top: 2px; font: 500 2.4rem/1 var(--serif); color: var(--rose); }
.ss .vx-unit span { font: italic 500 0.98rem/1 var(--serif); letter-spacing: 0.02em; color: var(--wine); }
.ss-date-text { margin: 8px 0 20px; font: italic 500 1.2rem/1.4 var(--serif); }
.ss .vx-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ss .vx-btn { background: var(--wine); border-color: var(--wine); color: #fff; font: 600 0.86rem/1.1 var(--serif); letter-spacing: 0.12em; }
.ss .vx-btn--ghost { background: transparent; color: var(--wine); }

/* Schedule: a rose walks down the rail */
.ss-line { position: relative; max-width: 340px; margin: 24px auto 0; }
.ss-line ol { list-style: none; margin: 0; padding: 0; }
.ss-line li { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; padding: 20px 0; opacity: 0.42; transition: opacity 0.5s; }
.ss-line li.is-lit { opacity: 1; }
.ss-time { text-align: right; font: 500 1.45rem/1 var(--serif); color: var(--ink); }
.ss-what { text-align: left; font: 500 1.15rem/1.3 var(--serif); color: var(--ink); }
.ss-dot { justify-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--wine); }
.ss-rail { position: absolute; left: 50%; top: 10px; bottom: 10px; width: 1px; margin-left: -0.5px; background: var(--line); }
.ss-rail b { position: absolute; inset: 0; background: var(--wine); transform: scaleY(0); transform-origin: 50% 0; }
.ss-rose { position: absolute; left: 50%; top: 0; width: 48px; margin: -24px 0 0 -24px; z-index: 2; filter: drop-shadow(0 4px 6px rgba(90, 30, 40, 0.3)); will-change: transform; }

/* Location */
.ss-venue-name { margin: 0 0 6px; font: 600 1.3rem/1.3 var(--serif); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wine); }
.ss-address { max-width: 30ch; }
.ss-sketch { margin: 18px -10px 22px; }
.ss-sketch img { width: 100%; }
.ss-map-frame { position: relative; padding: 10px; border-radius: 16px; background: #fffaf8; border: 1px solid var(--line); box-shadow: 0 14px 30px rgba(90, 40, 40, 0.12); }
.ss-map-frame .vx-map { height: 250px; margin: 0 0 12px; border: 0; border-radius: 10px; }
.ss-map-frame .vx-btns { margin-bottom: 4px; }
.ss-map-sprig { position: absolute; right: -22px; top: -30px; width: 170px; z-index: 2; transform: rotate(-12deg); pointer-events: none; }

/* Dress code & gifts */
.ss-notes { overflow: hidden; padding-top: 128px; }
.ss-corner { position: absolute; top: -4px; width: 122px; pointer-events: none; }
.ss-corner--l { left: -18px; }
.ss-corner--r { right: -18px; transform: scaleX(-1); }
.ss-corner--r[data-float] { scale: -1 1; transform: none; }
.ss-divider { display: block; width: 210px; margin: 30px auto 26px; }

/* RSVP */
.ss-rsvp-roses { display: block; width: 240px; margin: -10px auto 18px; }
.ss-rsvp-seal { position: relative; display: block; width: 150px; margin: 22px auto 10px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ss-rsvp-seal img { width: 100%; filter: drop-shadow(0 10px 14px rgba(60, 10, 20, 0.35)); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ss-rsvp-seal:hover img { transform: rotate(-6deg) scale(1.04); }
.ss-rsvp-seal span { position: absolute; inset: 0; display: grid; place-content: center; font: 700 1.3rem/1 var(--serif); letter-spacing: 0.16em; color: #f6d9d4; text-shadow: -1px -1px 1px rgba(30, 0, 8, 0.6), 1px 1px 1px rgba(255, 190, 190, 0.3); padding-left: 0.16em; }
.ss-rsvp-seal:focus-visible { outline: 2px solid var(--wine); outline-offset: 6px; border-radius: 50%; }
.ss-rsvp-hint { display: grid; justify-items: center; gap: 8px; margin: 6px 0 0; font: italic 500 1.08rem/1.3 var(--serif); }
.ss-rsvp-hint i { width: 10px; height: 10px; border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); animation: ss-up 1.6s ease-in-out infinite; }
@keyframes ss-up { 50% { transform: translateY(-5px) rotate(45deg); } }

/* Finale */
.ss-finale { padding-bottom: 60px; overflow: hidden; }
.ss-hope { margin: 0 0 8px; font: 400 2.6rem/1.15 var(--script); color: var(--wine); }
.ss-finale-names { margin: 0 0 18px; font: 500 1.5rem/1.3 var(--serif); }
.ss-finale-names em { font-family: var(--script); font-style: normal; font-size: 1.3em; color: var(--rose); }
.ss-couple { display: block; width: 80%; margin: 0 auto 26px; }
.ss .vx-share small, .ss .vx-credit { color: var(--ink); font-size: 0.95rem; }
.ss .vx-qr { background: #fff; padding: 10px; border-radius: 12px; display: inline-block; }

/* ---------- The reply sheet ---------- */
.ss-sheet { position: fixed; inset: 0; z-index: 80; }
.ss-sheet[hidden] { display: none; }
.ss-sheet-shade { position: absolute; inset: 0; background: rgba(60, 22, 30, 0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.ss-sheet-card { position: absolute; left: 0; right: 0; bottom: 0; width: var(--col); max-height: 92svh; margin: 0 auto; overflow: auto; overscroll-behavior: contain; padding: 38px 22px calc(28px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; background: var(--grain), var(--paper-2); text-align: center; box-shadow: 0 -20px 50px rgba(60, 20, 30, 0.3); }
.ss-sheet-x { position: absolute; right: 12px; top: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(107, 28, 42, 0.08); color: var(--wine); font: 400 1.8rem/1 var(--serif); cursor: pointer; }
.ss-sheet-by { margin: -8px 0 18px; font: italic 500 1.08rem/1.3 var(--serif); }
.ss-sheet .vx-rsvp { text-align: left; }
.ss .vx-rsvp .field > span, .ss .vx-choices legend, .ss .vx-checks legend { font-size: 0.86rem; letter-spacing: 0.12em; }
.ss .vx-rsvp input, .ss .vx-rsvp select, .ss .vx-rsvp textarea { font-size: 16px; border-color: var(--line); }
.ss .vx-thanks-title { font: 400 2.4rem/1.1 var(--script); color: var(--wine); }

/* ---------- Controls: a round wine button, bottom right ---------- */
.ss .vx-music { top: auto; right: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 46px; height: 46px; padding: 0; justify-content: center; border: 0; background: var(--wine); box-shadow: 0 8px 20px rgba(60, 10, 20, 0.35); }
.ss .vx-music-label, .ss .vx-dock, .ss .vx-cue { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ss-scroll i, .ss-rsvp-hint i { animation: none; }
}

/* Printed event cards: the words sit below the roses */
.ss .vx-cards { --vx-card-top: 61%; }