/* ==========================================================================
   Prince & Favourite — custom.css
   Tailwind handles layout utilities; this file holds the signature pieces.

   1  Tokens            8  Hero              15 Gallery + Lightbox
   2  Base              9  Couple            16 Invitation card
   3  Textures          10 Story timeline    17 Location
   4  Ornaments         11 Event cards       18 RSVP
   5  Typography        12 Countdown         19 Closing
   6  Buttons           13 Dress code        20 Music button
   7  Intro / Envelope  14 Tradition         21 Reveal + reduced motion
      Navigation
   ========================================================================== */


/* 1 — TOKENS ------------------------------------------------------------- */
:root {
  --wine: #5A1022;
  --wine-dark: #350914;
  --wine-deep: #1f040b;
  --gold: #C9A227;
  --gold-light: #E6D18A;
  --gold-dark: #8C6D14;
  --ivory: #FFF9EF;
  --ink: #1E0E0A;

  /* Metallic gold: several stops so it reads as polished metal, not yellow */
  --gold-metal: linear-gradient(105deg, #9b7a1a 0%, #c9a227 18%, #f4e4a6 32%, #d4b044 46%, #a8841c 62%, #e6d18a 80%, #b8931f 100%);
  --gold-line: rgba(201, 162, 39, .45);

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-script: "Pinyon Script", cursive;
  --font-sans: "DM Sans", system-ui, sans-serif;

  --ease: cubic-bezier(.22, 1, .36, 1);      /* long, soft landing */
  --ease-io: cubic-bezier(.65, 0, .35, 1);   /* symmetrical, for the flap */
}


/* 2 — BASE --------------------------------------------------------------- */
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { background: var(--ivory); color: var(--ink); overflow-x: hidden; }
body.is-locked, body.menu-open, body.lightbox-open { overflow: hidden; }
::selection { background: var(--gold); color: var(--wine-dark); }
img { display: block; max-width: 100%; height: auto; }

:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* Film grain across the whole page — static SVG noise, very low opacity */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Shared section shells */
.section { position: relative; overflow: hidden; padding: clamp(5rem, 12vw, 9rem) 0; }
.section--ivory { background: var(--ivory); }
.section--wine  { background: radial-gradient(ellipse 90% 70% at 50% 0%, #6a1629 0%, var(--wine) 40%, var(--wine-dark) 100%); color: var(--ivory); }
.section--dark  { background: linear-gradient(180deg, var(--wine-dark), var(--wine-deep)); color: var(--ivory); }

.section__pattern { position: absolute; inset: 0; opacity: .07; pointer-events: none; }
.pattern--faint { opacity: .09; }
.section--ivory .section__pattern { mask-image: radial-gradient(ellipse at center, transparent 30%, #000 85%); -webkit-mask-image: radial-gradient(ellipse at center, transparent 30%, #000 85%); }


/* 3 — TEXTURES (Adire / Aso-Oke inspired, kept faint) -------------------- */

/* Adire-inspired tile: concentric resist-dye circles, stitched diagonals, dots */
.pattern-adire {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='none' stroke='%23C9A227' stroke-width='.8'%3E%3Ccircle cx='36' cy='36' r='11'/%3E%3Ccircle cx='36' cy='36' r='6'/%3E%3Ccircle cx='36' cy='36' r='1.6' fill='%23C9A227'/%3E%3Cpath d='M0 0l13 13M72 0L59 13M0 72l13-13M72 72L59 59' stroke-dasharray='2 2'/%3E%3Cpath d='M36 0v9M36 63v9M0 36h9M63 36h9'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3Ccircle cx='72' cy='0' r='3'/%3E%3Ccircle cx='0' cy='72' r='3'/%3E%3Ccircle cx='72' cy='72' r='3'/%3E%3C/svg%3E");
  background-size: 72px 72px;
}

/* Aso-Oke-inspired: narrow woven strips with a fine weft */
.pattern-woven {
  background-image:
    repeating-linear-gradient(90deg,
      rgba(201,162,39,.20) 0 1px, transparent 1px 12px,
      rgba(201,162,39,.10) 12px 14px, transparent 14px 38px,
      rgba(0,0,0,.20) 38px 64px, transparent 64px 96px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
}


/* 4 — ORNAMENTS ---------------------------------------------------------- */

/* Gold corner flourish with an indigenous zig-zag + diamond motif */
.corner {
  position: absolute;
  width: clamp(44px, 9vw, 84px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: .75;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23C9A227' stroke-width='1'%3E%3Cpath d='M1 99V1h98'/%3E%3Cpath d='M7 90V7h83' stroke-opacity='.45'/%3E%3Cpath d='M13 13l12 12'/%3E%3Crect x='21' y='21' width='10' height='10' transform='rotate(45 26 26)' fill='%23C9A227' fill-opacity='.3'/%3E%3Cpath d='M38 13l5 5 5-5 5 5 5-5 5 5 5-5' stroke-opacity='.8'/%3E%3Cpath d='M13 38l5 5-5 5 5 5-5 5 5 5-5 5' stroke-opacity='.8'/%3E%3Ccircle cx='82' cy='13' r='1.6' fill='%23C9A227'/%3E%3Ccircle cx='13' cy='82' r='1.6' fill='%23C9A227'/%3E%3C/svg%3E") no-repeat center / contain;
}
.corner--tl { top: 16px; left: 16px; }
.corner--tr { top: 16px; right: 16px; transform: scaleX(-1); }
.corner--bl { bottom: 16px; left: 16px; transform: scaleY(-1); }
.corner--br { bottom: 16px; right: 16px; transform: scale(-1, -1); }
.corner--sm { width: 44px; top: 10px; left: 10px; }
.corner--sm.corner--br { top: auto; left: auto; bottom: 10px; right: 10px; }

/* Divider: fine line — diamond — fine line */
.divider {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: min(220px, 60%);
  margin: 1.5rem auto;
  color: var(--gold);
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}
.divider::after { transform: scaleX(-1); }
.divider > i { position: relative; width: 7px; height: 7px; border: 1px solid currentColor; transform: rotate(45deg); flex: none; }
.divider > i::after { content: ""; position: absolute; inset: 2px; background: currentColor; }
.divider--left { margin-left: 0; }
.divider--left::before { display: none; }


/* 5 — TYPOGRAPHY --------------------------------------------------------- */
.heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 7vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -.01em;
}

/* Small italic serif line above a heading (deliberately NOT all-caps) */
.kicker {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  color: var(--gold-dark);
  margin-bottom: .6rem;
}
.kicker--light { color: var(--gold-light); }

.amp { font-family: var(--font-script); color: var(--gold); font-size: .9em; padding: 0 .08em; }

/* Metallic gold text */
.text-gold, .text-gold-deep {
  background-image: var(--gold-metal);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: .04em;
  -webkit-box-decoration-break: clone;   /* keep the gradient intact when text wraps */
  box-decoration-break: clone;
}
/* Darker gold for ivory backgrounds (keeps contrast) */
.text-gold-deep { background-image: linear-gradient(105deg, #6e520c, #a8841c 30%, #c9a227 50%, #8c6d14 75%, #b8931f); }
.shimmer { animation: goldShimmer 9s ease-in-out infinite; }
@keyframes goldShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.section-head { text-align: center; max-width: 42rem; margin: 0 auto clamp(3rem, 7vw, 5rem); }


/* 6 — BUTTONS -----------------------------------------------------------
   Element-qualified selectors so Tailwind's preflight ([type=submit] etc.)
   can never override the gold background. */
a.btn-gold, button.btn-gold,
a.btn-outline, button.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 50px;
  padding: .95rem 2rem;
  border-radius: 999px;
  font: 500 .74rem/1 var(--font-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-position .8s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), color .3s, border-color .3s, opacity .3s;
}
a.btn-gold, button.btn-gold {
  color: var(--wine-dark);
  background-image: linear-gradient(110deg, #a8841c 0%, #e6d18a 28%, #c9a227 52%, #f1df9c 76%, #b8931f 100%);
  background-size: 220% 100%;
  border: 0;
  box-shadow: 0 12px 30px -12px rgba(201, 162, 39, .6), inset 0 1px 0 rgba(255, 255, 255, .45);
}
a.btn-gold:hover, button.btn-gold:hover { background-position: 100% 0; transform: translateY(-2px); }
a.btn-outline, button.btn-outline {
  color: var(--gold-light);
  background: transparent;
  border: 1px solid rgba(201, 162, 39, .6);
}
a.btn-outline:hover, button.btn-outline:hover { border-color: var(--gold-light); background: rgba(201, 162, 39, .08); }
.btn-gold svg, .btn-outline svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
button.btn-gold:disabled, button.btn-outline:disabled { opacity: .55; cursor: wait; transform: none; }

/* Loading dots on the pressed RSVP button */
button.is-loading { color: transparent !important; position: relative; }
button.is-loading::after {
  content: "";
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  color: var(--gold-light);
  box-shadow: -14px 0 0 var(--gold-light), 14px 0 0 var(--gold-light);
  animation: dots 1s ease-in-out infinite;
}
button.btn-gold.is-loading::after { color: var(--wine-dark); background: var(--wine-dark); box-shadow: -14px 0 0 var(--wine-dark), 14px 0 0 var(--wine-dark); }
@keyframes dots { 50% { opacity: .3; } }

.btn-link {
  font: 500 .74rem/1 var(--font-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-light);
  padding: .5rem 0;
  border-bottom: 1px solid rgba(230, 209, 138, .4);
  transition: border-color .3s;
}
.btn-link:hover { border-color: var(--gold-light); }


/* 7 — INTRO / ENVELOPE -------------------------------------------------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2.5rem, 7vh, 3.5rem);
  padding: 2rem 1.25rem calc(2rem + env(safe-area-inset-bottom));
  background: radial-gradient(ellipse 80% 60% at 50% 42%, #6e1a2e 0%, var(--wine) 32%, var(--wine-dark) 70%, #16030a 100%);
  overflow: hidden;
  transition: opacity 1s var(--ease), visibility 1s;
}
.intro.is-leaving { opacity: 0; visibility: hidden; }
.intro.is-fast { transition-duration: .45s; }

.intro__glow {
  position: absolute;
  width: 90vmin; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 39, .16), transparent 62%);
  animation: breathe 6s ease-in-out infinite;
}
.intro__pattern { position: absolute; inset: 0; opacity: .06; }
@keyframes breathe { 50% { transform: scale(1.08); opacity: .7; } }

/* Envelope geometry — width drives everything */
.envelope {
  position: relative;
  width: min(86vw, 520px);
  aspect-ratio: 1.34;
  perspective: 1400px;
  cursor: pointer;
  transition: transform 1.1s var(--ease), opacity 1s var(--ease);
  animation: envFloat 7s ease-in-out infinite;
}
@keyframes envFloat { 50% { transform: translateY(-6px); } }
.envelope.is-open { animation: none; }
.intro.is-leaving .envelope { transform: scale(1.12) translateY(-3%); opacity: 0; }

.envelope__back {
  position: absolute; inset: 0;
  border-radius: 4px;
  background: linear-gradient(180deg, #2a0610, #3d0a17);
  border: 1px solid var(--gold-line);
  box-shadow: 0 40px 70px -25px rgba(0, 0, 0, .75), 0 0 0 6px rgba(201, 162, 39, .05);
}

.envelope__card {
  position: absolute;
  left: 7%; right: 7%; top: 6%;
  height: 88%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8%;
  gap: .45rem;
  background: linear-gradient(180deg, #fffdf7, var(--ivory));
  border-radius: 2px;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, .25);
  transition: transform 1.1s var(--ease) .4s;
}
.envelope__card::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(201, 162, 39, .55); }
.envelope__card-mono { font-family: var(--font-display); font-size: clamp(1.9rem, 8vw, 2.8rem); color: var(--wine); line-height: 1; }
.envelope__card-mono em { font-family: var(--font-script); font-style: normal; color: var(--gold); font-size: .8em; padding: 0 .1em; }
.envelope__card-rule { width: 40px; height: 1px; background: var(--gold); }
.envelope__card-date { font: 500 .62rem/1 var(--font-sans); letter-spacing: .3em; color: var(--wine); }
.envelope.is-open .envelope__card { transform: translateY(-60%); }

.envelope__pocket {
  position: absolute; inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, #62152a 0%, #4a0d1c 60%, #3d0a17 100%);
  border: 1px solid var(--gold-line);
  border-radius: 4px;
  clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%);
}
.envelope__pocket-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.envelope__pocket-lines polyline { fill: none; stroke: var(--gold); stroke-opacity: .55; stroke-width: 1; vector-effect: non-scaling-stroke; }

.envelope__wording {
  position: absolute;
  left: 0; right: 0; bottom: 7%;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  text-align: center;
}
.envelope__invited { font: 500 clamp(.52rem, 2vw, .64rem)/1 var(--font-sans); letter-spacing: .32em; text-transform: uppercase; color: var(--gold-light); opacity: .9; }
.envelope__names {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 5.4vw, 1.9rem);
  line-height: 1.1;
  background-image: var(--gold-metal);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.envelope__names em { font-family: var(--font-script); font-style: normal; }

.envelope__flap {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 57%;
  z-index: 4;
  transform-origin: top center;
  background: linear-gradient(180deg, #d4b044, #8c6d14);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: transform .85s var(--ease-io);
}
.envelope__flap-inner {
  position: absolute; inset: 1px 1px 0;
  background: linear-gradient(172deg, #6e1a2e 0%, #4f0e1e 70%, #420b19 100%);
  clip-path: polygon(0 0, 100% 0, 50% calc(100% - 2px));
}
.envelope.is-open .envelope__flap { transform: rotateX(180deg); }
.envelope.flap-behind .envelope__flap { z-index: 1; }

/* Wax seal — metallic gold, embossed monogram, gentle pulse ring */
.envelope__seal {
  position: absolute;
  left: 50%; top: 57%;
  z-index: 5;
  width: clamp(50px, 14vw, 68px);
  aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  background: radial-gradient(circle at 34% 30%, #f7e9ae 0%, #d8b546 24%, #b38b1d 56%, #7d5e0e 100%);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .5), inset 0 -3px 6px rgba(0, 0, 0, .35), inset 0 2px 3px rgba(255, 255, 255, .45);
  transition: transform .6s var(--ease), opacity .5s var(--ease);
}
.envelope__seal::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px solid rgba(90, 16, 34, .35); }
.envelope__seal::after {
  content: ""; position: absolute; inset: -9px;
  border-radius: 50%;
  border: 1px solid rgba(230, 209, 138, .55);
  animation: sealPulse 2.6s var(--ease) infinite;
}
.envelope__seal span { font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 4.2vw, 1.3rem); color: #5A1022; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.envelope__seal i { font-family: var(--font-script); font-style: normal; font-weight: 400; padding: 0 .06em; }
.envelope.is-open .envelope__seal { transform: translate(-50%, -50%) scale(.4) rotate(-20deg); opacity: 0; pointer-events: none; }
@keyframes sealPulse { 0% { transform: scale(.9); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }

.intro__actions { position: relative; display: flex; flex-direction: column; align-items: center; gap: .9rem; transition: opacity .4s; }
.intro__hint { font-family: var(--font-display); font-style: italic; font-size: 1rem; color: rgba(230, 209, 138, .7); }
.intro.is-opening .intro__actions { opacity: 0; pointer-events: none; }

.intro__skip {
  position: absolute;
  bottom: calc(1.1rem + env(safe-area-inset-bottom));
  right: 1.25rem;
  font: 400 .72rem/1 var(--font-sans);
  letter-spacing: .08em;
  color: rgba(255, 249, 239, .55);
  padding: .6rem .2rem;
  border-bottom: 1px solid rgba(255, 249, 239, .2);
  transition: color .3s;
}
.intro__skip:hover { color: var(--ivory); }


/* NAVIGATION ------------------------------------------------------------ */
.site-nav {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  left: 50%;
  z-index: 60;
  display: flex; align-items: center; gap: 1.4rem;
  padding: .45rem .5rem .45rem 1.2rem;
  border-radius: 999px;
  background: rgba(31, 4, 11, .55);
  border: 1px solid rgba(201, 162, 39, .25);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  transform: translate(-50%, -12px);
  opacity: 0;
  pointer-events: none;
  transition: transform .7s var(--ease), opacity .7s var(--ease);
}
body.is-open .site-nav { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
body.is-open .site-nav.is-hidden { transform: translate(-50%, -140%); }

.site-nav__mono { font-family: var(--font-display); font-size: 1.25rem; color: var(--gold-light); line-height: 1; }
.site-nav__mono em { font-family: var(--font-script); font-style: normal; color: var(--gold); padding: 0 .08em; }
.site-nav__links { display: none; gap: 1.6rem; padding-right: .9rem; }
.site-nav__links a { font: 400 .72rem/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 249, 239, .7); padding: .55rem 0; position: relative; transition: color .3s; }
.site-nav__links a::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 1px; background: var(--gold); transition: width .4s var(--ease), left .4s var(--ease); }
.site-nav__links a:hover, .site-nav__links a.is-active { color: var(--gold-light); }
.site-nav__links a.is-active::after { width: 100%; left: 0; }

button.menu-toggle {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-content: center; gap: 6px;
  background: rgba(201, 162, 39, .1);
  border: 1px solid rgba(201, 162, 39, .3);
}
.menu-toggle span { display: block; width: 18px; height: 1px; background: var(--gold-light); transition: transform .4s var(--ease); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

@media (min-width: 768px) {
  .site-nav__links { display: flex; }
  button.menu-toggle { display: none; }
  .site-nav { padding: .4rem .6rem .4rem 1.4rem; }
}

.mobile-menu {
  position: fixed; inset: 0;
  z-index: 55;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
  background: radial-gradient(ellipse at 50% 30%, var(--wine), var(--wine-dark) 60%, var(--wine-deep));
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-active { opacity: 1; }
.mobile-menu__pattern { position: absolute; inset: 0; opacity: .06; }
.mobile-menu ul { position: relative; text-align: center; display: grid; gap: .35rem; }
.mobile-menu a {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 7vw, 2.2rem);
  color: var(--ivory);
  padding: .2rem 1rem;
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
.mobile-menu a:hover { color: var(--gold-light); }
.mobile-menu.is-active a { opacity: 1; transform: none; }
.mobile-menu.is-active li:nth-child(2) a { transition-delay: .04s; }
.mobile-menu.is-active li:nth-child(3) a { transition-delay: .08s; }
.mobile-menu.is-active li:nth-child(4) a { transition-delay: .12s; }
.mobile-menu.is-active li:nth-child(5) a { transition-delay: .16s; }
.mobile-menu.is-active li:nth-child(6) a { transition-delay: .2s; }
.mobile-menu.is-active li:nth-child(7) a { transition-delay: .24s; }
.mobile-menu.is-active li:nth-child(8) a { transition-delay: .28s; }
.mobile-menu__date { position: relative; font: 500 .7rem/1 var(--font-sans); letter-spacing: .3em; color: var(--gold); }


/* 8 — HERO -------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  color: var(--ivory);
  background: radial-gradient(ellipse 85% 65% at 50% 46%, #6a1629 0%, #4a0d1c 38%, #2a0610 74%, #16030a 100%);
  padding: 6rem 1.25rem 7rem;
}
.hero__layer { position: absolute; inset: 0; display: grid; place-items: center; }
.hero__halo { width: min(110vw, 900px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(201, 162, 39, .17), transparent 60%); }
.hero__pattern { position: absolute; inset: 0; opacity: .5; mask-image: linear-gradient(90deg, #000, transparent 22%, transparent 78%, #000); -webkit-mask-image: linear-gradient(90deg, #000, transparent 22%, transparent 78%, #000); }
.hero__particles { position: absolute; inset: 0; width: 100%; height: 100%; }

/* One slow light streak across the hero */
.hero__streak {
  position: absolute; inset: -50%;
  background: linear-gradient(115deg, transparent 46%, rgba(230, 209, 138, .07) 50%, transparent 54%);
  animation: streak 12s ease-in-out infinite;
  pointer-events: none;
}
@keyframes streak { 0% { transform: translateX(-35%); } 55%, 100% { transform: translateX(35%); } }

.hero__content { position: relative; z-index: 2; text-align: center; }
.hero__title { display: flex; flex-direction: column; align-items: center; }
.hero-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  line-height: .92;
}
.hero-name--prince { font-size: clamp(2.9rem, 13.5vw, 7.5rem); letter-spacing: .14em; margin-right: -.14em; }
.hero-name--favourite { font-size: clamp(3rem, 14.2vw, 9.4rem); letter-spacing: .04em; margin-right: -.04em; }
.hero-connector {
  display: block;
  font-family: var(--font-script);
  font-size: clamp(1.8rem, 7.2vw, 3.6rem);
  line-height: 1.35;
  color: var(--gold-light);
  margin: .05em 0 -.05em;
}
.divider--hero { margin: 2rem auto 1.4rem; }
.hero-subtitle { font: 400 clamp(.66rem, 2.4vw, .8rem)/1.4 var(--font-sans); letter-spacing: .34em; text-transform: uppercase; color: rgba(255, 249, 239, .8); margin-right: -.34em; }
.hero-date { margin-top: .9rem; font-family: var(--font-display); font-size: clamp(1.3rem, 4.5vw, 1.8rem); letter-spacing: .18em; color: var(--gold-light); }
.hero-date i, .countdown-date i, .closing__date i { font-style: normal; color: var(--gold); font-size: .6em; vertical-align: middle; padding: 0 .3em; }

/* Staggered page-load reveal (triggered by body.is-open) */
.hero-line {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition: opacity 1.4s var(--ease), transform 1.4s var(--ease), filter 1.4s var(--ease);
  transition-delay: var(--d, 0s);
}
body.is-open .hero-line { opacity: 1; transform: none; filter: none; }

.scroll-cue { position: absolute; left: 50%; bottom: calc(1.6rem + env(safe-area-inset-bottom)); margin-left: -20px; width: 40px; height: 64px; display: flex; justify-content: center; z-index: 2; }
.scroll-cue__line { position: relative; width: 1px; height: 100%; background: linear-gradient(transparent, rgba(201, 162, 39, .6)); overflow: hidden; }
.scroll-cue__line::after { content: ""; position: absolute; left: -1px; top: -12px; width: 3px; height: 12px; border-radius: 2px; background: var(--gold-light); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { to { top: 100%; } }


/* 9 — COUPLE ------------------------------------------------------------ */
.couple-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(.5rem, 3vw, 3rem);
  max-width: 58rem;
  margin: 0 auto;
}
.couple-grid__amp { font-family: var(--font-script); font-size: clamp(2.6rem, 9vw, 5.5rem); color: var(--gold); line-height: 1; margin-top: -3rem; }

.portrait { text-align: center; }
.portrait--offset { margin-top: clamp(2rem, 8vw, 5rem); }
.portrait__outer { padding: clamp(5px, 1.2vw, 10px); border: 1px solid rgba(201, 162, 39, .45); border-radius: 999px 999px 6px 6px; }
.portrait__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 999px 999px 3px 3px;
  box-shadow: 0 30px 60px -30px rgba(53, 9, 20, .55);
}
.portrait__frame img, .couple-photo__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.portrait__frame::after, .couple-photo__frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(53, 9, 20, .35));
  pointer-events: none;
}
.portrait:hover img, .couple-photo:hover img { transform: scale(1.04); }
.portrait figcaption { margin-top: 1.2rem; display: flex; flex-direction: column; gap: .3rem; }
.portrait__role { font-family: var(--font-display); font-style: italic; font-size: clamp(.95rem, 2.8vw, 1.15rem); color: var(--gold-dark); }
.portrait__name { font-family: var(--font-display); font-size: clamp(1.6rem, 5.5vw, 2.6rem); color: var(--wine); line-height: 1; }

.couple-photo { max-width: 58rem; margin: clamp(4rem, 10vw, 7rem) auto 0; }
.couple-photo__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 3px;
  outline: 1px solid rgba(201, 162, 39, .5);
  outline-offset: clamp(6px, 1.5vw, 12px);
  box-shadow: 0 40px 80px -40px rgba(53, 9, 20, .6);
}
.couple-photo__caption { margin-top: 2rem; text-align: center; font-family: var(--font-script); font-size: clamp(1.7rem, 5vw, 2.4rem); color: var(--gold-dark); }


/* 10 — STORY TIMELINE --------------------------------------------------- */
.story-lead { font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 4vw, 1.7rem); color: rgba(255, 249, 239, .85); }

.timeline { position: relative; max-width: 54rem; margin: 0 auto; padding-left: 2.25rem; }
.timeline::before {
  content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(201, 162, 39, .6) 8%, rgba(201, 162, 39, .6) 92%, transparent);
}
.timeline__item { position: relative; padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot { position: absolute; left: calc(-2.25rem + 1px); top: .35rem; width: 11px; height: 11px; transform: rotate(45deg); border: 1px solid var(--gold); background: var(--wine-dark); }
.timeline__item:last-child .timeline__dot { background: var(--gold); }
.timeline__chapter { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--gold-light); }
.timeline__title { font-family: var(--font-display); font-size: clamp(1.7rem, 5vw, 2.3rem); line-height: 1.1; margin: .2rem 0 .7rem; color: var(--ivory); }
.timeline__text { font-size: .98rem; line-height: 1.75; color: rgba(255, 249, 239, .72); max-width: 26rem; }

@media (min-width: 768px) {
  .timeline { padding-left: 0; }
  .timeline::before { left: 50%; }
  .timeline__item { width: 50%; padding-right: 3.5rem; text-align: right; }
  .timeline__item .timeline__text { margin-left: auto; }
  .timeline__item:nth-child(even) { margin-left: 50%; padding-right: 0; padding-left: 3.5rem; text-align: left; }
  .timeline__item:nth-child(even) .timeline__text { margin-left: 0; }
  .timeline__dot { left: auto; right: -5.5px; }
  .timeline__item:nth-child(even) .timeline__dot { right: auto; left: -5.5px; }
}

.story-close { margin-top: clamp(3.5rem, 8vw, 5.5rem); text-align: center; font-family: var(--font-display); font-style: italic; font-size: clamp(1.4rem, 4.4vw, 2rem); line-height: 1.4; color: rgba(255, 249, 239, .85); }


/* 11 — EVENT CARDS ------------------------------------------------------ */
.celebration-date { font-family: var(--font-display); font-size: clamp(1.3rem, 4vw, 1.7rem); color: var(--wine); }

.events { display: grid; gap: 1.5rem; max-width: 60rem; margin: 0 auto; }
@media (min-width: 900px) { .events { grid-template-columns: 1.15fr 1fr; gap: 2rem; align-items: start; } }

.event-card {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 3.5rem) clamp(1.5rem, 5vw, 3rem);
  color: var(--ivory);
  background: linear-gradient(160deg, var(--wine) 0%, var(--wine-dark) 100%);
  border: 1px solid rgba(201, 162, 39, .5);
  border-radius: 3px;
  box-shadow: 0 40px 70px -40px rgba(53, 9, 20, .8);
}
.event-card::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(201, 162, 39, .18); pointer-events: none; }
.event-card--alt { background: linear-gradient(160deg, #420b19, #22050c); }
.event-card__tag { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--gold-light); }
.event-card__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1.1; margin: .3rem 0 2rem; }

.event-meta { display: grid; gap: 1.25rem; }
.event-meta li { display: flex; align-items: center; gap: 1rem; font-size: 1rem; line-height: 1.4; }
.event-meta small { display: block; font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: .2rem; }
.event-meta__icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(201, 162, 39, .4); color: var(--gold-light); }
.event-meta__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }

.event-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(201, 162, 39, .2); }


/* 12 — COUNTDOWN -------------------------------------------------------- */
.countdown-section {
  position: relative; overflow: hidden;
  padding: clamp(5rem, 12vw, 8rem) 0;
  color: var(--ivory);
  background: radial-gradient(ellipse 70% 90% at 50% 50%, #4a0d1c, var(--wine-dark) 55%, var(--wine-deep));
}
.countdown-section .section__pattern { opacity: .35; }

.countdown[hidden] { display: none; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); margin: 2rem auto 0; max-width: 52rem; }
.countdown__unit { position: relative; display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 0 .25rem; }
.countdown__unit + .countdown__unit::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 30%; width: 1px; background: linear-gradient(transparent, rgba(201, 162, 39, .5), transparent); }
.countdown__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 12vw, 6.5rem);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  background-image: var(--gold-metal);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.countdown__num.tick { animation: tick .6s var(--ease); }
@keyframes tick { from { opacity: .2; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.countdown__label { font-size: clamp(.58rem, 2vw, .7rem); letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 249, 239, .65); }
.countdown-done { margin: 2rem 0 0; font-family: var(--font-display); font-style: italic; font-size: clamp(2.6rem, 9vw, 5rem); line-height: 1.1; }
.countdown-date { margin-top: 2.5rem; font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .2em; color: var(--gold-light); }


/* 13 — DRESS CODE ------------------------------------------------------- */
.dress { display: grid; gap: 3.5rem; align-items: center; }
@media (min-width: 900px) { .dress { grid-template-columns: 5fr 7fr; gap: 5rem; } }
.dress__label { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--gold-dark); }
.dress__colours { font-family: var(--font-display); font-size: clamp(2.4rem, 8vw, 3.8rem); line-height: 1.05; margin: .2rem 0 1.4rem; }
.dress__copy { font-size: 1rem; line-height: 1.8; color: rgba(30, 14, 10, .75); max-width: 30rem; }

.swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
@media (min-width: 560px) { .swatches { grid-template-columns: repeat(4, 1fr); } .swatch:nth-child(even) { margin-top: 3rem; } }
.swatch__fabric {
  aspect-ratio: 3 / 5;
  border-radius: 999px 999px 2px 2px;
  box-shadow: 0 30px 50px -28px rgba(53, 9, 20, .7), inset 0 0 0 1px rgba(201, 162, 39, .25);
  transition: transform 1s var(--ease);
}
.swatch:hover .swatch__fabric { transform: translateY(-6px); }
.swatch figcaption { margin-top: 1rem; font-family: var(--font-display); font-size: 1.1rem; color: var(--wine); line-height: 1.2; }
.swatch figcaption span { display: block; font-style: italic; font-size: .9rem; color: var(--gold-dark); }

/* Velvet: deep folds with a soft sheen */
.swatch__fabric--velvet {
  background:
    radial-gradient(ellipse 60% 40% at 30% 22%, rgba(255, 255, 255, .16), transparent 60%),
    linear-gradient(112deg, #3a0816 0%, #6d1428 28%, #45091a 46%, #7a1a30 66%, #3a0816 100%);
}
/* Gold: metallic base + fine basket weave */
.swatch__fabric--gold {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .09) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 4px),
    linear-gradient(120deg, #7d5e0e, #d8b546 22%, #f6e7a8 36%, #c9a227 52%, #8c6d14 72%, #e6d18a 92%);
}
/* Champagne: pale satin */
.swatch__fabric--champagne {
  background:
    radial-gradient(ellipse 50% 70% at 70% 30%, rgba(255, 255, 255, .5), transparent 60%),
    linear-gradient(135deg, #e9d9ae, #f7ecd0 40%, #dcc58c 70%, #f1e3bd);
}
/* Deep wine: satin with a single highlight fold */
.swatch__fabric--wine {
  background:
    linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .1) 48%, transparent 58%),
    linear-gradient(160deg, #22050c, #5A1022 50%, #2c0710);
}


/* 14 — TRADITION -------------------------------------------------------- */
.tradition { position: relative; overflow: hidden; padding: clamp(5rem, 12vw, 9rem) 0; background: var(--wine); color: var(--ivory); }
/* Aso-Oke strip weave, full bleed, fading toward the centre */
.tradition__weave {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg,
      rgba(201,162,39,.28) 0 2px, transparent 2px 10px,
      rgba(201,162,39,.14) 10px 12px, transparent 12px 30px,
      rgba(22,3,10,.35) 30px 58px, transparent 58px 70px,
      rgba(201,162,39,.2) 70px 71px, transparent 71px 110px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #6a1629, #420b19);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(0,0,0,.35), #000 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(0,0,0,.35), #000 75%);
}
.tradition__card {
  position: relative;
  text-align: center;
  padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1.5rem, 6vw, 4rem);
  background: rgba(31, 4, 11, .55);
  border: 1px solid rgba(201, 162, 39, .35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 3px;
}
.tradition__motif { width: 140px; margin: 0 auto 1.6rem; fill: none; stroke: var(--gold); stroke-width: 1; }
.tradition__motif circle { fill: var(--gold); stroke: none; }
.tradition__copy { margin: 1.5rem auto 0; max-width: 34rem; font-family: var(--font-display); font-size: clamp(1.15rem, 3.4vw, 1.4rem); line-height: 1.65; color: rgba(255, 249, 239, .85); }
.tradition__pillars { display: flex; justify-content: center; gap: clamp(1.2rem, 5vw, 3rem); margin-top: 2.2rem; font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--gold-light); }
.tradition__pillars li + li::before { content: "◆"; font-style: normal; font-size: .45rem; color: var(--gold); vertical-align: middle; margin-right: clamp(1.2rem, 5vw, 3rem); }


/* 15 — GALLERY + LIGHTBOX ----------------------------------------------- */
.gallery { columns: 2; column-gap: .75rem; }
@media (min-width: 768px) { .gallery { columns: 3; column-gap: 1.25rem; } }
.gallery__item { break-inside: avoid; margin-bottom: .75rem; }
@media (min-width: 768px) { .gallery__item { margin-bottom: 1.25rem; } }
.gallery__btn { position: relative; display: block; width: 100%; overflow: hidden; border-radius: 2px; cursor: zoom-in; background: #eadfcb; }
.gallery__btn img { width: 100%; transition: transform 1.4s var(--ease), filter .8s; }
.gallery__btn::after {
  content: ""; position: absolute; inset: 8px;
  border: 1px solid rgba(230, 209, 138, .0);
  transition: border-color .6s var(--ease), inset .6s var(--ease);
}
.gallery__btn:hover img { transform: scale(1.05); filter: saturate(1.08); }
.gallery__btn:hover::after { border-color: rgba(230, 209, 138, .7); inset: 12px; }

.lightbox {
  position: fixed; inset: 0;
  z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 4.5rem 1rem calc(4.5rem + env(safe-area-inset-bottom));
  background: rgba(22, 3, 10, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox.is-active { opacity: 1; }
.lightbox__figure { position: relative; max-width: min(92vw, 1100px); display: flex; flex-direction: column; align-items: center; }
.lightbox__figure img {
  max-height: calc(100svh - 10rem);
  width: auto;
  border: 1px solid rgba(201, 162, 39, .35);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .6);
  opacity: 0; transform: scale(.96);
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}
.lightbox.is-active .lightbox__figure img.is-loaded { opacity: 1; transform: none; }
.lightbox__count { margin-top: 1rem; font: 400 .75rem/1 var(--font-sans); letter-spacing: .25em; color: rgba(255, 249, 239, .6); }
button.lightbox__btn {
  position: absolute;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--gold-light);
  background: rgba(53, 9, 20, .6);
  border: 1px solid rgba(201, 162, 39, .35);
  transition: background .3s, border-color .3s;
  z-index: 2;
}
button.lightbox__btn:hover { background: rgba(90, 16, 34, .9); border-color: var(--gold-light); }
.lightbox__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__close { top: calc(1rem + env(safe-area-inset-top)); right: 1rem; }
.lightbox__prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  /* On phones, move arrows below the image so they never cover it */
  .lightbox__prev, .lightbox__next { top: auto; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: none; }
  .lightbox__prev { left: calc(50% - 60px); }
  .lightbox__next { right: calc(50% - 60px); }
}


/* 16 — INVITATION CARD -------------------------------------------------- */
.invite-card {
  position: relative;
  text-align: center;
  color: var(--ink);
  padding: clamp(3.5rem, 10vw, 5.5rem) clamp(1.75rem, 7vw, 4.5rem);
  background:
    radial-gradient(ellipse at 50% 0%, #fffdf8, transparent 70%),
    var(--ivory);
  border-radius: 2px;
  outline: 1px solid rgba(201, 162, 39, .7);
  outline-offset: -12px;
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .8);
}
.invite-card::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(201, 162, 39, .3); pointer-events: none; }
.invite-card .corner { width: clamp(40px, 8vw, 64px); opacity: .9; }
.invite-card .corner--tl { top: 22px; left: 22px; }
.invite-card .corner--tr { top: 22px; right: 22px; }
.invite-card .corner--bl { bottom: 22px; left: 22px; }
.invite-card .corner--br { bottom: 22px; right: 22px; }
.invite-card__families { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--gold-dark); }
.invite-card__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 6.5vw, 3.2rem); line-height: 1.1; color: var(--wine); margin: .6rem 0 1.6rem; }
.invite-card__body { font-family: var(--font-display); font-size: clamp(1.15rem, 3.6vw, 1.4rem); line-height: 1.6; color: rgba(30, 14, 10, .8); max-width: 30rem; margin: 0 auto .6rem; }
.invite-card__names { font-family: var(--font-display); font-size: clamp(2.2rem, 7.5vw, 3.4rem); color: var(--wine); line-height: 1.1; }
.invite-card__date { margin-top: .6rem; font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-dark); }


/* 17 — LOCATION --------------------------------------------------------- */
.location { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 900px) { .location { grid-template-columns: 1fr 1.1fr; gap: 5rem; } }
.kicker--left { text-align: left; }
.location__details { display: grid; gap: 1.4rem; margin: 0 0 2.4rem; }
.location__details dt { font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: .3rem; }
.location__details dd { font-family: var(--font-display); font-size: clamp(1.35rem, 4vw, 1.7rem); color: var(--wine); line-height: 1.3; }

.map-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 3px;
  outline: 1px solid rgba(201, 162, 39, .55);
  outline-offset: 10px;
  background: var(--wine-dark);
  box-shadow: 0 40px 70px -40px rgba(53, 9, 20, .7);
}
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.85) contrast(1.05); }
.map-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  color: var(--gold-light);
  font-family: var(--font-display); font-style: italic; font-size: 1.2rem;
  background:
    repeating-linear-gradient(0deg, rgba(201, 162, 39, .08) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(90deg, rgba(201, 162, 39, .08) 0 1px, transparent 1px 36px),
    radial-gradient(circle at 50% 45%, #5A1022, var(--wine-dark) 70%);
}
.map-placeholder svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1; }


/* 18 — RSVP ------------------------------------------------------------- */
.rsvp-note { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: rgba(255, 249, 239, .75); }
.rsvp-card {
  position: relative;
  display: grid; gap: 1.8rem;
  padding: clamp(2rem, 6vw, 3rem);
  background: rgba(31, 4, 11, .45);
  border: 1px solid rgba(201, 162, 39, .35);
  border-radius: 3px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.rsvp-card[hidden] { display: none; }
.field label, .rsvp-choice legend { display: block; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-light); margin-bottom: .55rem; }
.field label em { text-transform: none; letter-spacing: .02em; font-style: italic; color: rgba(255, 249, 239, .5); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .75rem .2rem;
  font-family: var(--font-display);
  font-size: 1.25rem;              /* ≥16px avoids iOS zoom on focus */
  color: var(--ivory);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(201, 162, 39, .45);
  border-radius: 0;
  transition: border-color .3s, background .3s;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255, 249, 239, .35); font-style: italic; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold-light); background: rgba(255, 249, 239, .04); }
.field textarea { resize: vertical; min-height: 5rem; }
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E6D18A' stroke-width='1.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .2rem center;
  background-size: 18px;
  cursor: pointer;
}
.field select option { color: var(--ink); background: var(--ivory); }
.field.has-error input { border-color: #e98b8b; }

.rsvp-choice { border: 0; padding: 0; margin: 0; }
.rsvp-choice__buttons { display: grid; gap: .8rem; margin-top: .4rem; }
@media (min-width: 520px) { .rsvp-choice__buttons { grid-template-columns: 1fr 1fr; } }
.rsvp-choice__buttons button { width: 100%; padding-left: 1rem; padding-right: 1rem; letter-spacing: .14em; }
.rsvp-error { min-height: 1.2em; margin-top: -.6rem; font-size: .9rem; color: #f1a9a9; text-align: center; }
.rsvp-error:empty { display: none; }

.rsvp-success { text-align: center; gap: .5rem; padding-top: 2rem; padding-bottom: 3rem; }
.rsvp-success__title { font-family: var(--font-display); font-size: clamp(2rem, 6vw, 2.6rem); color: var(--gold-light); line-height: 1.15; }
.rsvp-success__text { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.6; color: rgba(255, 249, 239, .85); max-width: 26rem; margin: 0 auto; }
.rsvp-success:focus { outline: none; }


/* 19 — CLOSING ---------------------------------------------------------- */
.closing {
  position: relative; overflow: hidden;
  padding: clamp(6rem, 16vw, 11rem) 0 calc(clamp(6rem, 16vw, 11rem) + env(safe-area-inset-bottom));
  color: var(--ivory);
  background: radial-gradient(ellipse 80% 70% at 50% 50%, #4a0d1c, var(--wine-dark) 50%, var(--wine-deep));
}
.closing .section__pattern { opacity: .3; mask-image: radial-gradient(ellipse at center, transparent 30%, #000 80%); -webkit-mask-image: radial-gradient(ellipse at center, transparent 30%, #000 80%); }
.closing__names { font-family: var(--font-display); font-size: clamp(2.6rem, 10vw, 6rem); line-height: 1.05; }
.closing__names .amp { -webkit-text-fill-color: var(--gold); }
.closing__tagline { margin-top: 1rem; font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 5vw, 2.4rem); color: var(--ivory); }
.closing__date { margin-top: 1.2rem; font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .2em; color: var(--gold-light); }
.closing__thanks { font-family: var(--font-script); font-size: clamp(1.6rem, 5vw, 2.3rem); color: var(--gold-light); }


/* 20 — MUSIC BUTTON ----------------------------------------------------- */
button.music-btn {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 65;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--gold-light);
  background: rgba(31, 4, 11, .7);
  border: 1px solid rgba(201, 162, 39, .45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6);
  opacity: 0; transform: scale(.8); pointer-events: none;
  transition: opacity .6s var(--ease) 1s, transform .6s var(--ease) 1s, border-color .3s;
}
body.is-open button.music-btn { opacity: 1; transform: none; pointer-events: auto; }
.music-btn__icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.music-btn__bars { display: none; align-items: flex-end; gap: 3px; height: 16px; }
.music-btn__bars i { width: 2px; height: 100%; background: var(--gold-light); border-radius: 1px; transform-origin: bottom; animation: bars 1.1s ease-in-out infinite; }
.music-btn__bars i:nth-child(2) { animation-delay: -.3s; }
.music-btn__bars i:nth-child(3) { animation-delay: -.6s; }
.music-btn__bars i:nth-child(4) { animation-delay: -.15s; }
.music-btn.is-playing { border-color: var(--gold-light); }
.music-btn.is-playing .music-btn__icon { display: none; }
.music-btn.is-playing .music-btn__bars { display: flex; }
@keyframes bars { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }


/* 21 — SCROLL REVEAL + REDUCED MOTION ----------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  [data-reveal], .hero-line { opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero__streak, .intro__glow { display: none; }
}