/* ─────────────────────────────────────────────────────────────
   Nikkah Invitation — stage-inspired design
   Gold circular arch · ivory drapes · blush & dusty-rose florals
   · sage foliage · warm fairy lights
   ───────────────────────────────────────────────────────────── */

:root {
  --ivory: #FAF7F2;
  --white: #FFFFFF;
  --blush: #E8C7CE;
  --rose: #C68F9B;
  --gold: #B78B53;
  --sage: #B8B9A3;
  --taupe: #745B58;
  --ink: #39312F;

  --gold-soft: rgba(183, 139, 83, 0.45);
  --blush-wash: #F6ECEC;
  --shadow: 0 30px 60px -32px rgba(116, 91, 88, 0.38), 0 2px 8px rgba(116, 91, 88, 0.06);

  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --font-script: 'Pinyon Script', cursive;
  --font-body: 'Jost', system-ui, sans-serif;
  --font-arabic: 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --floral-corner: url('/.netlify/images?url=/img/floral-corner.png&w=520&fm=webp');
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--ivory);
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--ivory);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.sealed { overflow: hidden; height: 100svh; }

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.container.narrow { max-width: 640px; }

.section {
  position: relative;
  padding: clamp(3.5rem, 10vw, 6.5rem) 0;
  text-align: center;
  overflow: hidden;
}

/* ───────── Typography ───────── */

.arabic {
  font-family: var(--font-arabic);
  direction: rtl;
  unicode-bidi: isolate;
  line-height: 1.9;
  color: var(--taupe);
  font-weight: 400;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 1rem;
}
.kicker::before,
.kicker::after {
  content: '';
  width: 1.5rem;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
  flex: none;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 7vw, 3rem);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 1rem;
}

.names {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.02;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.names .name { display: block; }
.names .amp {
  display: block;
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--rose);
  font-size: 0.62em;
  line-height: 1.1;
  margin: 0.08em 0 0.02em;
}

.event-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* ───────── Decorative layers ───────── */

.drape {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(44px, 14vw, 240px);
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 70%),
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0.95) 10px,
      rgba(229, 219, 210, 0.55) 19px,
      rgba(255, 255, 255, 0.85) 28px,
      rgba(255, 255, 255, 0.1) 38px);
  -webkit-mask-image: linear-gradient(90deg, #000 25%, transparent);
  mask-image: linear-gradient(90deg, #000 25%, transparent);
  transform-origin: top center;
  animation: sway 11s ease-in-out infinite;
}
.drape--left { left: 0; }
.drape--right {
  right: 0;
  -webkit-mask-image: linear-gradient(270deg, #000 25%, transparent);
  mask-image: linear-gradient(270deg, #000 25%, transparent);
  animation-delay: -5s;
}

@keyframes sway {
  0%, 100% { transform: skewX(0deg); }
  50% { transform: skewX(0.8deg); }
}

.lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.lights span {
  position: absolute;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 210, 1) 0, rgba(255, 210, 140, 0.55) 40%, rgba(255, 210, 140, 0) 70%);
  box-shadow: 0 0 calc(var(--s) * 1.4) rgba(240, 190, 110, 0.45);
  opacity: 0.5;
  animation: twinkle var(--d) ease-in-out var(--delay) infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.22; transform: scale(0.75); }
  50% { opacity: 0.95; transform: scale(1.1); }
}

.divider {
  width: min(320px, 78vw);
  height: 40px;
  margin: 0 auto;
  background: url('/img/divider.svg') center / contain no-repeat;
}

/* ───────── Gold circular arch ───────── */

.arch {
  --arch: 300px;
  position: relative;
  width: var(--arch);
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.96) 0,
    rgba(255, 255, 255, 0.82) 52%,
    rgba(255, 255, 255, 0.35) 68%,
    rgba(255, 255, 255, 0) 70.5%);
}
.arch-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 6px rgba(183, 139, 83, 0.18));
}
.arch-content {
  position: relative;
  z-index: 2;
  width: 76%;
  text-align: center;
}
.arch-content .kicker { margin-bottom: 0.6rem; font-size: 0.62rem; letter-spacing: 0.26em; }
.arch-content .kicker::before,
.arch-content .kicker::after { width: 0.6rem; }
.arch-content .kicker { gap: 0.5rem; }

/* ───────── Opening screen ───────── */

.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: max(1.25rem, env(safe-area-inset-top)) 1rem max(1.25rem, env(safe-area-inset-bottom));
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 55%),
    radial-gradient(ellipse at 50% 110%, rgba(232, 199, 206, 0.35), rgba(232, 199, 206, 0) 60%),
    var(--ivory);
  transition: opacity 0.8s var(--ease), visibility 0.8s;
}
.gate .drape { width: clamp(28px, 10vw, 200px); }

.gate-floral {
  position: absolute;
  z-index: 2;
  width: min(62vw, 420px);
  pointer-events: none;
  animation: floralIn 1.6s var(--ease) both;
}
.gate-floral--tl { top: -3%; left: -7%; }
.gate-floral--br { bottom: -3%; right: -7%; transform: rotate(180deg); animation-name: floralInFlip; }

@keyframes floralIn {
  from { opacity: 0; transform: translate(-12px, -12px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes floralInFlip {
  from { opacity: 0; transform: rotate(180deg) translate(-12px, -12px) scale(0.97); }
  to { opacity: 1; transform: rotate(180deg); }
}

.gate-panel {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.8s var(--ease), opacity 0.6s ease;
  animation: rise 1.1s var(--ease) 0.15s both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.gate-bismillah {
  font-size: clamp(1.35rem, 5.6vw, 1.9rem);
  margin-bottom: 0.4rem;
}

.arch--gate { --arch: min(74vw, 44svh, 400px); }
.names--gate { font-size: clamp(2rem, 9vw, 3.3rem); margin-bottom: 0.7rem; }

.btn-open {
  position: relative;
  margin-top: 1.4rem;
  min-height: 52px;
  padding: 0 2.1rem;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  border-radius: 999px;
  box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--gold-soft), 0 18px 34px -18px rgba(116, 91, 88, 0.55);
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background-color 0.35s;
}
.btn-open::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(232, 199, 206, 0.55) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: shimmer 4.5s ease-in-out 1.6s infinite;
}
.btn-open span { position: relative; z-index: 1; }
.btn-open:hover { transform: translateY(-2px); background: #FFFDFB; }
.btn-open:active { transform: translateY(0); }

@keyframes shimmer {
  0%, 60% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}

.gate.is-opening { opacity: 0; }
.gate.is-opening .gate-panel { transform: translateY(-18px) scale(0.985); opacity: 0; }
.gate.is-gone { visibility: hidden; pointer-events: none; display: none; }

/* ───────── Page reveal ───────── */

.page {
  opacity: 0;
  transform: translateY(28px);
}
.is-open .page {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease) 0.25s, transform 1.1s var(--ease) 0.25s;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ───────── Hero ───────── */

.hero {
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: clamp(96px, 17vw, 190px) 0 3rem;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, var(--ivory), #F8F1EE 70%, var(--ivory));
}

.swag {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(54px, 10vw, 130px);
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(116, 91, 88, 0.08));
}

.strands {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(100px, 15vw, 180px);
  z-index: 2;
  pointer-events: none;
}
.strands svg { width: 100%; height: 100%; display: block; }
.bulb {
  fill: #FFE6B5;
  filter: drop-shadow(0 0 4px rgba(245, 180, 90, 0.85));
  animation: bulb 3.4s ease-in-out infinite;
}
@keyframes bulb {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.hero-inner {
  position: relative;
  z-index: 4;
  padding: 0 1.25rem;
}

.hero-bismillah {
  font-size: clamp(1.7rem, 7vw, 2.6rem);
  line-height: 1.6;
}
.hero-translit {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 4.4vw, 1.35rem);
  color: var(--ink);
  margin-top: 0.15rem;
}
.hero-translation {
  font-size: 0.86rem;
  color: var(--taupe);
  max-width: 32ch;
  margin: 0.25rem auto 0;
  line-height: 1.55;
}

.stage {
  --arch: min(84vw, 540px);
  position: relative;
  width: var(--arch);
  margin: clamp(2.25rem, 7vw, 3.5rem) auto clamp(4.25rem, 14vw, 5.5rem);
}
.arch--hero { --arch: 100%; width: 100%; }
.arch--hero .arch-content { width: 74%; }
.names--hero { font-size: clamp(2.5rem, 10.2vw, 4.7rem); margin: 0.2rem 0 0.9rem; }

.hero-date {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.66rem, 2.6vw, 0.8rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
  padding-top: 0.8rem;
  border-top: 1px solid var(--gold-soft);
  display: inline-flex;
  flex-direction: column;
  gap: 0.2rem;
  line-height: 1.5;
}

.stage-floral,
.stage-base {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}
.stage-floral {
  width: 38%;
  top: -9%;
  animation: floralSway 9s ease-in-out infinite;
  transform-origin: 30% 0;
}
.stage-floral--left { left: -18%; }
.stage-floral--right { right: -18%; transform: scaleX(-1); animation-name: floralSwayFlip; animation-delay: -4s; }

@keyframes floralSway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(1.2deg); }
}
@keyframes floralSwayFlip {
  0%, 100% { transform: scaleX(-1) rotate(0deg); }
  50% { transform: scaleX(-1) rotate(1.2deg); }
}

.stage-base { width: 46%; bottom: -22%; }
.stage-base--left { left: -20%; transform: scaleY(-1); }
.stage-base--right { right: -20%; transform: scale(-1, -1); }

.hero-invite {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 4.6vw, 1.55rem);
  line-height: 1.5;
  max-width: 30ch;
  margin: 0 auto;
  color: var(--ink);
}

.scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin-top: 2rem;
  min-height: 48px;
  padding: 0.25rem 1rem;
  text-decoration: none;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--taupe);
}
.scroll-cue svg { width: 20px; height: 20px; color: var(--gold); animation: bob 2.4s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* ───────── Message ───────── */

.message-text {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 4.4vw, 1.5rem);
  line-height: 1.6;
  color: var(--ink);
  max-width: 34ch;
  margin: 0 auto;
}

.verse {
  margin: 2.5rem auto 0;
  padding: 2rem 1.25rem 1.75rem;
  max-width: 560px;
  border-top: 1px solid var(--gold-soft);
  border-bottom: 1px solid var(--gold-soft);
  background: linear-gradient(180deg, rgba(232, 199, 206, 0.16), rgba(232, 199, 206, 0));
}
.verse-arabic { font-size: clamp(1.3rem, 5.4vw, 1.75rem); line-height: 2.05; }
.verse figcaption { margin-top: 1rem; }
.verse-translation {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 3.8vw, 1.2rem);
  line-height: 1.55;
  color: var(--taupe);
}
.verse cite {
  display: block;
  margin-top: 0.75rem;
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* ───────── Invitation card ───────── */

.details { padding-top: clamp(3rem, 8vw, 5rem); }

.card {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  padding: 12px;
  background: var(--white);
  box-shadow: var(--shadow);
}
.card-frame {
  position: relative;
  z-index: 2;
  padding: clamp(3.6rem, 12vw, 4.6rem) clamp(1.1rem, 5vw, 3rem) clamp(3rem, 10vw, 4rem);
  border: 1px solid var(--gold);
  outline: 1px solid var(--gold-soft);
  outline-offset: -7px;
}

.card-floral {
  position: absolute;
  z-index: 3;
  width: min(44%, 250px);
  aspect-ratio: 880 / 730;
  background: var(--floral-corner) left top / contain no-repeat;
  pointer-events: none;
}
.card-floral--tl { top: -26px; left: -26px; }
.card-floral--br { bottom: -26px; right: -26px; transform: rotate(180deg); }

.family-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.08rem, 3.9vw, 1.25rem);
  line-height: 1.55;
  color: var(--taupe);
  max-width: 34ch;
  margin: 0 auto 2rem;
}

.card-couple { margin-bottom: 1.75rem; }
.person-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 8.4vw, 3rem);
  line-height: 1.1;
  color: var(--ink);
}
.person-parents {
  font-size: 0.86rem;
  color: var(--taupe);
  margin-top: 0.25rem;
}
.card-amp {
  font-family: var(--font-script);
  color: var(--rose);
  font-size: clamp(2rem, 7vw, 2.6rem);
  line-height: 1.2;
  margin: 0.3rem 0;
}

.event-label--card {
  display: inline-block;
  padding: 0.55rem 1.2rem;
  margin-bottom: 2rem;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  background: rgba(232, 199, 206, 0.18);
}

.facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--gold-soft);
  margin-bottom: 2rem;
}
.fact {
  padding: 1.1rem 0.5rem;
  border-bottom: 1px solid var(--gold-soft);
}
.fact:first-child,
.fact:last-child { grid-column: 1 / -1; }
.fact:nth-child(2):not(:last-child) { border-right: 1px solid var(--gold-soft); }
.fact dt {
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 0.2rem;
}
.fact dd {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 4.6vw, 1.45rem);
  line-height: 1.3;
  color: var(--ink);
}
.fact-sub {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--taupe);
  margin-top: 0.2rem;
}

.actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.save-date { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 50px;
  padding: 0 1.5rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.3s var(--ease), background-color 0.3s, color 0.3s, box-shadow 0.3s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: none; }

.btn--solid {
  background: var(--taupe);
  color: var(--white);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 0 3px var(--white), 0 0 0 4px var(--gold-soft), 0 14px 26px -16px rgba(116, 91, 88, 0.8);
}
.btn--solid:hover { background: #654E4B; }

.btn--outline {
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--gold);
}
.btn--outline svg { color: var(--gold); }
.btn--outline:hover { background: #FFFBF7; }

.btn-link {
  min-height: 44px;
  padding: 0 0.75rem;
  font-size: 0.8rem;
  color: var(--taupe);
  text-decoration: underline;
  text-decoration-color: var(--gold-soft);
  text-underline-offset: 4px;
}
.btn-link:hover { color: var(--ink); text-decoration-color: var(--gold); }

/* ───────── Countdown ───────── */

.countdown-section {
  background:
    radial-gradient(ellipse at 50% 0, rgba(232, 199, 206, 0.45), rgba(232, 199, 206, 0) 65%),
    var(--blush-wash);
}
.countdown-section .container { position: relative; z-index: 2; }

.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.5rem, 2.4vw, 1.25rem);
  max-width: 560px;
  margin: 0.75rem auto 1.25rem;
}
.count-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.1rem, 4vw, 1.75rem) 0.25rem clamp(0.8rem, 3vw, 1.2rem);
  background: var(--white);
  border: 1px solid var(--gold-soft);
  border-radius: 999px 999px 10px 10px;
  box-shadow: 0 16px 30px -22px rgba(116, 91, 88, 0.5);
}
.count-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 8vw, 3rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.count-label {
  margin-top: 0.45rem;
  font-size: clamp(0.56rem, 2.2vw, 0.68rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--taupe);
}
.cd-note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--taupe);
}
.cd-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 9vw, 3.4rem);
  line-height: 1.1;
  color: var(--ink);
}
.cd-message {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 4.2vw, 1.4rem);
  line-height: 1.55;
  color: var(--taupe);
  max-width: 32ch;
  margin: 0.75rem auto 0;
}

/* ───────── Gallery ───────── */

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 420px;
  margin: 1.5rem auto 0;
}
.gallery-item {
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--gold-soft);
  border-radius: 999px 999px 8px 8px;
  box-shadow: var(--shadow);
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 999px 999px 4px 4px;
}

/* ───────── Venue ───────── */

.venue-address {
  font-size: 1rem;
  color: var(--ink);
  max-width: 34ch;
  margin: 0 auto;
}
.venue-address.is-pending {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--taupe);
}
.venue-note { margin-top: 0.6rem; font-size: 0.9rem; color: var(--taupe); }

.map-frame {
  margin: 1.75rem auto 1.5rem;
  max-width: 560px;
  aspect-ratio: 4 / 3;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--gold-soft);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; border-radius: 9px; display: block; }
.venue .btn { margin-top: 1.5rem; }
.venue .map-frame + .btn { margin-top: 0; }

/* ───────── Contacts ───────── */

.contact-list {
  list-style: none;
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}
.contact {
  padding: 1.4rem 1rem;
  background: var(--white);
  border: 1px solid var(--gold-soft);
  border-radius: 12px;
}
.contact-name { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; line-height: 1.2; }
.contact-relation { font-size: 0.82rem; color: var(--taupe); }
.contact-phone { margin-top: 0.35rem; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.contact-actions { display: flex; justify-content: center; gap: 0.6rem; margin-top: 0.9rem; }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.25rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: background-color 0.3s;
}
.chip:hover { background: rgba(232, 199, 206, 0.3); }

/* ───────── Closing ───────── */

.closing {
  padding-bottom: calc(4rem + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--ivory), #F6EDEB);
}
.closing .container { position: relative; z-index: 2; }
.closing-dua { font-size: clamp(1.45rem, 6vw, 2rem); line-height: 2; }
.closing-translation {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.08rem, 4vw, 1.25rem);
  color: var(--taupe);
  max-width: 32ch;
  margin: 0.4rem auto 0;
}
.closing-thanks {
  max-width: 36ch;
  margin: 1.75rem auto 0;
  font-size: 0.95rem;
  color: var(--ink);
}
.closing-names {
  font-family: var(--font-script);
  font-size: clamp(2.6rem, 11vw, 3.6rem);
  line-height: 1.3;
  color: var(--taupe);
  margin-top: 1.5rem;
}
.closing-arch {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 1rem auto 0;
}

/* ───────── Music toggle ───────── */

.music-toggle {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 50;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  color: var(--taupe);
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 12px 24px -12px rgba(116, 91, 88, 0.6);
}
.music-toggle svg { width: 22px; height: 22px; grid-area: 1 / 1; }
.music-toggle .icon-pause { display: none; }
.music-toggle.is-playing .icon-play { display: none; }
.music-toggle.is-playing .icon-pause { display: block; }
.music-toggle.is-playing { animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 0 4px rgba(183, 139, 83, 0.15), 0 12px 24px -12px rgba(116, 91, 88, 0.6); }
  50% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 0 9px rgba(183, 139, 83, 0.12), 0 12px 24px -12px rgba(116, 91, 88, 0.6); }
}

/* ───────── Larger screens ───────── */

@media (min-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); max-width: none; }
  .contact-list { grid-template-columns: repeat(2, 1fr); }
  .actions { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 1rem; row-gap: 0.35rem; }
  .actions .save-date { display: contents; }
  .actions .btn-link { order: 1; flex-basis: 100%; text-align: center; }
}

@media (min-width: 960px) {
  .stage-floral { width: 40%; left: -22%; }
  .stage-floral--right { left: auto; right: -22%; }
  .stage-base { width: 52%; bottom: -18%; }
  .stage-base--left { left: -26%; }
  .stage-base--right { right: -26%; }
}

/* Very short phones: keep the opening screen within one view */
@media (max-height: 620px) {
  .arch--gate { --arch: min(68vw, 40svh, 360px); }
  .gate-bismillah { font-size: 1.25rem; margin-bottom: 0.1rem; }
  .btn-open { margin-top: 1rem; min-height: 48px; }
}

/* ───────── Reduced motion ───────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .reveal, .page { opacity: 1; transform: none; }
  .lights span { opacity: 0.6; }
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 4 / 3) {
  .map-frame { height: 360px; }
}