/* ==========================================================
   Mediterranean Villa — la dolce vita in Positano
   Whitewash, Positano blue, lemon and coral; DM Serif Display, Marcellus SC, Cormorant, Caveat.
   ========================================================== */

.mv {
  --vx-bg: #fbf8f1;
  --vx-ink: #1d3557;
  --vx-accent: #1f5f9e;
  --vx-accent-ink: #fff;
  --vx-line: rgba(31, 95, 158, 0.28);
  --vx-field-bg: #fff;
  --vx-field-ink: #1d3557;
  --vx-display: 'VS Numbers', 'DM Serif Display', serif;
  --vx-body: 'VS Numbers', 'Cormorant Garamond', serif;
  --mv-white: #fbf8f1;
  --mv-blue: #1f5f9e;
  --mv-deep: #13385f;
  --mv-lemon: #f2d24b;
  --mv-coral: #e9806b;
  background: #0f3456;
}
.mv .vx-loader { background: linear-gradient(180deg, #fbf8f1, #e6f0f8); }
.mv .vx-loader-mono { font: 400 3rem 'VS Numbers', 'DM Serif Display', serif; color: var(--mv-blue); }
.mv .vx-loader-text { color: var(--mv-deep); font: 400 1.35rem 'Caveat', cursive; }

.mv-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.mv-backdrop img { position: absolute; inset: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; filter: blur(26px) brightness(0.75) saturate(1.2); }

.mv-col { background: var(--mv-white); box-shadow: 0 0 80px rgba(0, 0, 0, 0.3); }
.mv-sec { position: relative; padding: 92px 24px; text-align: center; overflow: hidden; }
.mv-kicker { margin: 0 0 12px; font: 400 0.8rem 'VS Numbers', 'Marcellus SC', serif; letter-spacing: 0.26em; color: var(--mv-coral); }
.mv-h2 { margin: 0 0 22px; font: 400 clamp(2.2rem, 10vw, 2.8rem)/1.05 'VS Numbers', 'DM Serif Display', serif; color: var(--mv-deep); }
.mv-p { margin: 0 auto 22px; max-width: 360px; font: 500 1.12rem/1.6 'VS Numbers', 'Cormorant Garamond', serif; }

/* ---------- Opening: drag the shutters ---------- */
.mv-stage { z-index: 30; overflow: hidden; background: #f4f1ea; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.mv-stage.is-dragging { cursor: grabbing; }
.mv-stage-poster, .mv-shutters { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.mv-stage-top { position: absolute; top: 4%; left: 0; right: 0; text-align: center; pointer-events: none; }
.mv-dear { display: inline-block; margin: 0; padding: 6px 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); font: 400 1.5rem 'Caveat', cursive; color: var(--mv-deep); box-shadow: 0 8px 20px -10px rgba(0, 40, 80, 0.4); }
.mv-swipe { position: absolute; left: 50%; bottom: 11%; display: flex; align-items: center; gap: 18px; padding: 14px 22px; border-radius: 999px; transform: translateX(-50%); background: rgba(255, 255, 255, 0.88); box-shadow: 0 12px 30px -12px rgba(0, 40, 80, 0.5); color: var(--mv-blue); font: 400 1.6rem/1 serif; }
.mv-swipe-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--mv-lemon); box-shadow: 0 0 0 4px rgba(242, 210, 75, 0.35); }
.mv-swipe-arrow--l { animation: mv-nudge-l 1.6s ease-in-out infinite; }
.mv-swipe-arrow--r { animation: mv-nudge-r 1.6s ease-in-out infinite; }
@keyframes mv-nudge-l { 50% { transform: translateX(-8px); } }
@keyframes mv-nudge-r { 50% { transform: translateX(8px); } }
.mv-swipe-label { position: absolute; left: 0; right: 0; bottom: 5.5%; margin: 0; text-align: center; font: 400 1.5rem 'Caveat', cursive; color: var(--mv-deep); text-shadow: 0 0 12px #fff, 0 0 4px #fff; pointer-events: none; }

/* ---------- Hero ---------- */
.mv-hero { position: relative; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.mv-hero-sea { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#mv-gulls { z-index: 2; }
.mv-sill { position: relative; z-index: 3; margin: 0 14px 22px; padding: 26px 18px 22px; border-radius: 6px; background: rgba(251, 248, 241, 0.94); text-align: center; box-shadow: 0 20px 40px -20px rgba(10, 40, 80, 0.6); }
.mv-sill::before { content: ''; position: absolute; inset: 6px; border: 2px solid var(--mv-blue); border-radius: 3px; pointer-events: none; }
.mv-sill-lemons { position: absolute; top: -70px; right: -14px; width: 120px; transform: rotate(18deg); filter: drop-shadow(0 8px 10px rgba(60, 50, 0, 0.3)); }
.mv-names { margin: 0; font: 400 clamp(2.6rem, 12.5vw, 3.4rem)/1 'VS Numbers', 'DM Serif Display', serif; color: var(--mv-deep); }
.mv-names em { font: 400 0.9em 'Caveat', cursive; color: var(--mv-coral); }
.mv-hero-date { margin: 8px 0 0; font: italic 600 1.1rem 'VS Numbers', 'Cormorant Garamond', serif; color: var(--mv-blue); }

/* ---------- Postcard ---------- */
.mv-note { background: linear-gradient(180deg, var(--mv-white), #eaf3fa); padding-bottom: 70px; }
.mv-bougain { position: absolute; top: -20px; left: -40px; width: 160px; transform: rotate(-10deg); pointer-events: none; }
.mv-postcard { position: relative; width: min(340px, 88vw); aspect-ratio: 3 / 2.05; margin: 10px auto 0; }
.mv-pc-front, .mv-pc-back { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; background: #fffdf6; box-shadow: 0 22px 40px -22px rgba(10, 40, 80, 0.6); }
.mv-pc-front { padding: 10px; }
.mv-pc-front img { width: 100%; height: 100%; object-fit: cover; }
.mv-pc-greeting { position: absolute; left: 22px; bottom: 18px; margin: 0; text-align: left; font: 400 1.3rem/1 'Caveat', cursive; color: #fff; text-shadow: 0 2px 10px rgba(0, 20, 40, 0.7); }
.mv-pc-greeting b { font: 400 2.4rem/1 'VS Numbers', 'DM Serif Display', serif; color: var(--mv-lemon); }
.mv-pc-back { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; padding: 16px; text-align: left; visibility: hidden; transform: scaleX(0); }
.mv-pc-back::before { content: ''; position: absolute; left: 54%; top: 16px; bottom: 16px; width: 1px; background: rgba(31, 95, 158, 0.3); }
.mv-pc-text { margin: 0; font: 400 1.05rem/1.25 'VS Numbers', 'Caveat', cursive; color: var(--mv-deep); overflow: hidden; }
.mv-pc-address { position: relative; padding-top: 70px; }
.mv-pc-stamp { position: absolute; top: 0; right: 0; width: 56px; transform: rotate(4deg); }
.mv-pc-postmark { position: absolute; top: 18px; right: 30px; width: 86px; opacity: 0.8; transform: rotate(-12deg); }
.mv-pc-address p { margin: 0 0 6px; padding-bottom: 4px; border-bottom: 1px solid rgba(31, 95, 158, 0.3); font: 400 0.98rem 'Caveat', cursive; color: var(--mv-deep); }
.mv-flip-hint { margin: 18px 0 0; font: 400 1.2rem 'Caveat', cursive; color: var(--mv-coral); }

/* ---------- Boat ride ---------- */
.mv-seq { position: relative; height: 620svh; }
.mv-seq-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #2a6fa8; }
.mv-seq-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mv-seq-sticky::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 60%, rgba(5, 25, 45, 0.45)); }
.mv-tag { position: absolute; z-index: 2; left: 50%; bottom: 10%; width: min(320px, 84vw); aspect-ratio: 651 / 309; margin: 0 0 0 calc(min(320px, 84vw) / -2); opacity: 0; }
.mv-tag img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 14px 18px rgba(0, 20, 40, 0.45)); }
.mv-tag span { position: absolute; left: 22%; right: 20%; top: 26%; bottom: 18%; display: grid; place-content: center; text-align: center; font: 400 1.35rem/1.15 'Caveat', cursive; color: var(--mv-deep); }
.mv-tag small { display: block; margin-top: 4px; font: 400 0.95rem 'VS Numbers', 'Marcellus SC', serif; letter-spacing: 0.2em; color: var(--mv-coral); }
.mv-seq-boat { position: absolute; z-index: 2; left: -40%; top: 18%; width: 46%; filter: drop-shadow(0 6px 8px rgba(0, 20, 40, 0.4)); opacity: 0; }

/* ---------- Three summers (swipe) ---------- */
.mv-story { background: #eaf3fa; padding-left: 0; padding-right: 0; }
.mv-cards { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 20px 12% 34px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mv-cards::-webkit-scrollbar { display: none; }
.mv-card { position: relative; flex: 0 0 76%; scroll-snap-align: center; padding: 12px 12px 18px; background: #fffdf6; box-shadow: 0 20px 34px -20px rgba(10, 40, 80, 0.6); transform: rotate(var(--r)); text-align: center; }
.mv-card-photo { aspect-ratio: 4 / 5; overflow: hidden; }
.mv-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.mv-card-when { margin: 12px 0 2px; font: 400 0.75rem 'VS Numbers', 'Marcellus SC', serif; letter-spacing: 0.2em; color: var(--mv-coral); }
.mv-card h3 { margin: 0 0 4px; font: 400 1.6rem 'VS Numbers', 'DM Serif Display', serif; color: var(--mv-deep); }
.mv-card-text { margin: 0; font: 400 1.15rem/1.25 'VS Numbers', 'Caveat', cursive; color: #36506e; }
.mv-card-deco { position: absolute; top: -26px; right: -18px; width: 70px; transform: rotate(16deg); filter: drop-shadow(0 6px 8px rgba(0, 20, 40, 0.3)); }
.mv-swipe-hint { margin: 0; font: 400 1.2rem 'Caveat', cursive; color: var(--mv-blue); }

/* ---------- Save the date ---------- */
.mv-date { background: var(--mv-white); }
.mv-tile { width: min(270px, 74vw); margin: 10px auto 40px; padding: 10px; background: #fff; box-shadow: 0 0 0 1px #dfe7ee, 0 24px 40px -24px rgba(10, 40, 80, 0.6); transform: rotate(-2deg); }
.mv-tile .vx-scratch { width: 100%; aspect-ratio: 1; border-radius: 2px; }
.mv-tile .vx-scratch-content { background: radial-gradient(circle at 50% 40%, #fff, #eef5fb); color: var(--mv-deep); }
.mv-tile .vx-scratch-hint { color: var(--mv-deep); font: 400 0.7rem 'Marcellus SC', serif; letter-spacing: 0.2em; text-shadow: 0 0 6px #fff; }
.mv-sc-small { margin: 0; font: italic 600 1rem 'VS Numbers', 'Cormorant Garamond', serif; }
.mv-sc-big { margin: 4px 0; font: 400 2.1rem 'VS Numbers', 'DM Serif Display', serif; color: var(--mv-blue); }
.mv-lemons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 30px; }
.mv-lemon { position: relative; display: grid; justify-items: center; }
.mv-lemon img { width: 100%; max-width: 82px; filter: drop-shadow(0 8px 10px rgba(120, 100, 0, 0.3)); }
.mv-lemon b { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 1; max-width: 82px; margin: 0 auto; display: grid; place-items: center; font: 400 1.45rem/1 'VS Numbers', 'DM Serif Display', serif; color: var(--mv-deep); text-shadow: 0 0 8px #fff8d0, 0 0 3px #fff; }
.mv-lemon span { margin-top: 6px; font: 400 0.62rem 'Marcellus SC', serif; letter-spacing: 0.16em; color: var(--mv-blue); }

/* ---------- Ferry tickets ---------- */
.mv-events { background: linear-gradient(180deg, var(--mv-white), #e6f0f8); }
.mv-rope { position: absolute; top: 20px; right: -30px; width: 140px; transform: rotate(-14deg); opacity: 0.95; pointer-events: none; }
.mv-tickets { display: grid; gap: 18px; }
.mv-ticket { position: relative; display: grid; grid-template-columns: 1fr 86px; text-align: left; filter: drop-shadow(0 14px 18px rgba(10, 40, 80, 0.25)); }
.mv-ticket-main { position: relative; padding: 18px 16px 18px 22px; background: #fffdf6; border-radius: 10px 0 0 10px; border-left: 8px solid var(--mv-blue); }
.mv-ticket-stub { position: relative; display: grid; place-content: center; text-align: center; padding: 10px 6px; background: #fffdf6; border-radius: 0 10px 10px 0; border-left: 2px dashed rgba(31, 95, 158, 0.4); transform-origin: 0 100%; }
.mv-ticket-stub span { font: 400 0.62rem 'Marcellus SC', serif; letter-spacing: 0.2em; color: var(--mv-coral); }
.mv-ticket-stub b { font: 400 1.05rem/1.1 'VS Numbers', 'DM Serif Display', serif; color: var(--mv-deep); }
.mv-ticket-date { margin: 0; font: 400 0.7rem 'VS Numbers', 'Marcellus SC', serif; letter-spacing: 0.18em; color: var(--mv-coral); }
.mv-ticket h3 { margin: 2px 0; font: 400 1.4rem/1.1 'VS Numbers', 'DM Serif Display', serif; color: var(--mv-deep); }
.mv-ticket-place { margin: 0 0 4px; font: italic 700 0.95rem 'VS Numbers', 'Cormorant Garamond', serif; color: var(--mv-blue); }
.mv-ticket-text { margin: 0; font: 500 1rem/1.4 'VS Numbers', 'Cormorant Garamond', serif; }

/* ---------- Venue ---------- */
.mv-venue { background: #e6f0f8; padding-top: 0; }
.mv-venue-photo { margin: 0 -24px 0; height: 380px; overflow: hidden; -webkit-mask: linear-gradient(180deg, #000 65%, transparent); mask: linear-gradient(180deg, #000 65%, transparent); }
.mv-venue-photo img { width: 100%; height: 118%; object-fit: cover; object-position: 50% 30%; }
.mv-compass { position: relative; z-index: 1; width: 96px; margin: -60px auto 18px; filter: drop-shadow(0 10px 14px rgba(10, 40, 80, 0.35)); }
.mv-info { display: grid; gap: 14px; margin-top: 26px; text-align: left; }
.mv-info div { padding: 20px; border-radius: 16px; background: #fff; border-top: 4px solid var(--mv-lemon); box-shadow: 0 12px 26px -18px rgba(10, 40, 80, 0.5); }
.mv-info h3 { margin: 0 0 4px; font: 400 1.25rem 'VS Numbers', 'DM Serif Display', serif; color: var(--mv-blue); }
.mv-info p { margin: 0; font: 500 1.05rem/1.55 'VS Numbers', 'Cormorant Garamond', serif; }

/* ---------- Dress ---------- */
.mv-dress { background: var(--mv-white); }
.mv-hat { width: 130px; margin: 0 auto 10px; transform: rotate(-8deg); filter: drop-shadow(0 10px 12px rgba(80, 60, 20, 0.3)); }
.mv-swatches { display: flex; justify-content: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.mv-swatch { display: grid; justify-items: center; gap: 6px; }
.mv-swatch span { width: 54px; height: 54px; border-radius: 4px; background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(255, 255, 255, 0.35) 31% 34%, transparent 35%), var(--c); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.6), 0 10px 16px -8px rgba(10, 40, 80, 0.5); }
.mv-swatch em { font: 400 1.1rem 'Caveat', cursive; font-style: normal; color: var(--mv-deep); }

/* ---------- RSVP ---------- */
.mv-rsvp { background: linear-gradient(180deg, var(--mv-white), #cfe3f3); padding-bottom: 0; }
.mv-reply { position: relative; padding: 50px 20px 28px; border-radius: 18px; background: #fff; box-shadow: 0 30px 60px -36px rgba(10, 40, 80, 0.7); }
.mv-reply-seal { position: absolute; top: -34px; left: 50%; width: 76px; margin-left: -38px; filter: drop-shadow(0 6px 8px rgba(10, 30, 80, 0.4)); }
.mv-sea-strip { position: relative; height: 150px; margin: 30px -24px 0; overflow: hidden; }
.mv-waves { position: absolute; left: 0; bottom: 0; width: 200%; height: 90px; fill: #2a6fa8; animation: mv-waves 7s linear infinite; }
@keyframes mv-waves { to { transform: translateX(-50%); } }
.mv-bottle { position: absolute; left: 30%; bottom: 36px; width: 120px; transform: rotate(-24deg); filter: drop-shadow(0 6px 8px rgba(0, 20, 40, 0.35)); }
.mv .vx-thanks-title { font: 400 2rem 'VS Numbers', 'DM Serif Display', serif; color: var(--mv-blue); }

/* ---------- Gifts & FAQ ---------- */
.mv-gifts { background: var(--mv-white); }
.mv-gifts-shell { width: 90px; margin: 0 auto 16px; filter: drop-shadow(0 10px 12px rgba(80, 60, 20, 0.3)); }
.mv-fund { max-width: 340px; margin: 0 auto 40px; }
.mv-fund summary { cursor: pointer; list-style: none; display: inline-block; padding: 12px 22px; border: 1px solid var(--mv-blue); border-radius: 999px; font: 400 0.78rem 'Marcellus SC', serif; letter-spacing: 0.2em; color: var(--mv-blue); }
.mv-fund summary::-webkit-details-marker { display: none; }
.mv-fund pre { margin: 16px 0 12px; padding: 16px; border-radius: 12px; background: #eef5fb; font: 1rem/1.7 'VS Numbers', 'Cormorant Garamond', serif; text-align: left; white-space: pre-wrap; }
.mv-faq { text-align: left; }
.mv-faq details { border-bottom: 1px solid var(--vx-line); }
.mv-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; padding: 18px 0; font: 400 1.2rem 'VS Numbers', 'DM Serif Display', serif; color: var(--mv-deep); }
.mv-faq summary::-webkit-details-marker { display: none; }
.mv-faq summary::after { content: '+'; color: var(--mv-coral); }
.mv-faq details[open] summary::after { content: '−'; }
.mv-faq p { margin: -4px 0 16px; font: 500 1.05rem/1.55 'VS Numbers', 'Cormorant Garamond', serif; }

/* ---------- Finale ---------- */
.mv-finale { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 130px; color: #fff; }
.mv-finale-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mv-finale::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, var(--mv-white) 0%, rgba(40, 20, 30, 0.25) 18%, rgba(30, 15, 25, 0.55) 100%); }
.mv-finale > *:not(.mv-finale-bg) { position: relative; z-index: 2; }
#mv-finale-gulls { position: absolute !important; z-index: 2; }
.mv-finale-photo { position: relative; width: 170px; padding: 8px 8px 30px; background: #fffdf6; transform: rotate(-4deg); box-shadow: 0 20px 34px -16px rgba(0, 0, 0, 0.6); margin-bottom: 20px; }
.mv-finale-photo > img:first-child { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.mv-finale-stamp { position: absolute; right: -40px; bottom: -14px; width: 100px; opacity: 0.85; transform: rotate(-14deg); }
.mv-finale .mv-kicker { color: var(--mv-lemon); }
.mv-finale-names { margin: 0; font: 400 clamp(2.8rem, 13vw, 3.6rem)/1 'VS Numbers', 'DM Serif Display', serif; text-shadow: 0 2px 20px rgba(40, 10, 20, 0.6); }
.mv-finale-names em { font: 400 0.9em 'Caveat', cursive; color: var(--mv-lemon); }
.mv-finale-date { margin: 8px 0 0; font: italic 600 1.2rem 'VS Numbers', 'Cormorant Garamond', serif; }
.mv-finale .vx-share { margin-top: 26px; }
.mv-finale .vx-btn--ghost { color: #fff; border-color: #fff; }
.mv .vx-dock { background: rgba(19, 56, 95, 0.82); }
.mv .vx-music { background: rgba(19, 56, 95, 0.5); color: #fff; }

/* ---------- Program & gallery ---------- */
.mv-program { --vx-card: #fff; --vx-card-ink: #13385f; --vx-program-time: #1f5f9e; background: linear-gradient(180deg, #e6f0f8, var(--mv-white)); }
.mv-gallery { background: var(--mv-white); }
.mv-gallery-hint { margin: 0; font: 400 1.2rem 'Caveat', cursive; color: var(--mv-blue); }
.mv .vx-program-title { font-family: 'VS Numbers', 'DM Serif Display', serif; color: var(--mv-deep); }

/* ---------- Readability ---------- */
.mv-kicker { font-size: 0.86rem; color: #c8604b; }
.mv-p, .mv-info p, .mv-faq p, .mv-ticket-text { font-size: 1.15rem; color: #1d3557; }
.mv-swipe-label { display: inline-block; padding: 6px 16px; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgba(255, 255, 255, 0.82); text-shadow: none; }
.mv-lemon span, .mv-ticket-stub span { font-size: 0.7rem; }
.mv-tile .vx-scratch-hint { font-size: 0.8rem; }
.mv-card-text { font-size: 1.22rem; }

.mv-swipe-label { left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: 92%; }
@media (prefers-reduced-motion: reduce) {
  .mv-swipe-arrow--l, .mv-swipe-arrow--r, .mv-waves { animation: none; }
}

/* ---------- Readable colours: every line passes WCAG AA contrast ---------- */
.mv-ticket-date, .mv-ticket-stub span { color: #b04a34; }
/* ---------- end readable colours ---------- */

/* ---------- Readable for every guest: labels from 13.5px, text from 15px ---------- */
:root .mv-card-when { font-size: 0.844rem; letter-spacing: 0.14em; }
:root .mv-fund > summary { font-size: 0.844rem; letter-spacing: 0.14em; }
:root .mv-kicker { font-size: 0.844rem; letter-spacing: 0.14em; }
:root .mv-lemon > span { font-size: 0.844rem; }
:root .mv-ticket-date { font-size: 0.844rem; letter-spacing: 0.14em; }
:root .mv-ticket-stub > span { font-size: 0.844rem; letter-spacing: 0.14em; }
/* ---------- end readable ---------- */