/* ==========================================================
   Nikkah · Mehndi · Qawali Night — invitation styles
   Three palettes, one Mughal arch running through them all.
   ========================================================== */

/* ---------- tokens ---------- */
:root {
  /* Nikkah: ivory & champagne */
  --ivory: #fbf6ec;
  --ivory-hi: #fffcf6;
  --paper: #f5ecdb;
  --champagne: #ecdcbf;
  --gold: #b8924f;
  --gold-deep: #86642b;
  --gold-bright: #dcbb72;
  --ink: #2e241b;
  --ink-soft: #5b4b3b;
  --blush: #f3e2d6;

  /* Mehndi: marigold & emerald */
  --emerald: #0e4d3c;
  --emerald-deep: #093428;
  --marigold: #f3a826;
  --saffron: #f8c74a;
  --leaf: #2f7a4e;

  /* Qawali: midnight & plum */
  --midnight: #0f1433;
  --midnight-2: #161c45;
  --plum: #3d1638;
  --plum-deep: #2a1230;
  --lantern: #f6c977;

  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;
  --script: "Pinyon Script", "Great Vibes", cursive;
  --urdu: "Gulzar", "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;

  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --gutter: clamp(18px, 4.5vw, 44px);
  --sec-pad: clamp(52px, 7.5vw, 100px);   /* vertical breathing room of a section */

  --grain: 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .1 2.4 0 0 0 -1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --jaali: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23dcbb72' stroke-width='.7' stroke-opacity='.22'%3E%3Cpath d='M17 17h22v22H17zM28 12.4 43.6 28 28 43.6 12.4 28z'/%3E%3Cpath d='M28 0v12.4M28 43.6V56M0 28h12.4M43.6 28H56'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* sizes are in rem, so on very large screens (over ~1700px wide) the whole design scales up gently;
   percentages keep the guest's own browser font-size setting as the baseline */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; font-size: clamp(100%, .5vw + 47%, 125%); }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1rem + .35vw, 1.22rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
body.is-locked, html:has(body.is-locked) { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
p, h1, h2, h3, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-weight: 400; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 4px; }
.sec--mehndi :focus-visible, .sec--qawali :focus-visible, .sec--closing :focus-visible,
.cover :focus-visible, .music:focus-visible { outline-color: var(--gold-bright); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- shared typography & ornaments ---------- */
.kicker {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.kicker--light { color: var(--gold-bright); }
.script { font-family: var(--script); font-weight: 400; line-height: 1.1; }
.calli { font-family: var(--urdu); font-weight: 400; line-height: 1.6; direction: rtl; }
.rule { width: min(240px, 70%); height: 24px; color: var(--gold); margin-inline: auto; overflow: visible; }
.rule--left { margin-inline: 0; }
.dot { color: var(--gold); padding-inline: .35em; }
/* the celebration date is set in bold wherever it appears */
[data-bind="event.date"], .when__day { font-weight: 600; }

.monogram {
  display: inline-flex; align-items: center; justify-content: center; gap: .18em;
  width: 3.4em; height: 3.4em;
  border-radius: 50%;
  border: 1px solid currentColor;
  box-shadow: 0 0 0 3px transparent, 0 0 0 4px currentColor;
  font-family: var(--serif); font-weight: 500; font-size: 1rem; letter-spacing: .04em;
}
.monogram i { font-family: var(--serif); font-style: italic; font-size: .85em; opacity: .85; }

/* buttons */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 50px; padding: .75em 1.9em;
  border: 0; border-radius: 999px;
  font-family: var(--sans); font-size: .82rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s, color .35s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
/* a soft band of light crosses the button on hover */
.btn { overflow: hidden; isolation: isolate; }
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -50%; width: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: translateX(-60%) skewX(-20deg);
}
.btn:hover::after { transform: translateX(380%) skewX(-20deg); transition: transform 1s var(--ease); }
.btn--line::after { background: linear-gradient(100deg, transparent, rgba(220, 187, 114, .3), transparent); }
.btn--plum::after { background: linear-gradient(100deg, transparent, rgba(255, 236, 200, .2), transparent); }
.btn--gold {
  color: var(--plum-deep);
  background: linear-gradient(135deg, #f3dc9c, #d1a654 48%, #e9c97f);
  box-shadow: 0 10px 28px -10px rgba(220, 170, 80, .55), inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.btn--gold:hover { box-shadow: 0 14px 34px -10px rgba(230, 180, 90, .75), inset 0 0 0 1px rgba(255, 255, 255, .55); transform: translateY(-1px); }
.btn--line { color: var(--gold-deep); background: transparent; box-shadow: inset 0 0 0 1px var(--gold); }
.btn--line:hover { background: rgba(184, 146, 79, .08); }
.btn--plum { color: var(--ivory); background: var(--plum); box-shadow: 0 10px 24px -12px rgba(61, 22, 56, .7); }
.btn--plum:hover { background: #4d1c46; transform: translateY(-1px); }
.btn[disabled] { opacity: .7; cursor: progress; transform: none; }

/* parallax layers get their own compositing layer, so drifting them doesn't repaint the page */
[data-parallax] { will-change: transform; }

/* paper grain */
.grain::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain);
  opacity: .16;
}

/* ---------- Mughal arch frame ---------- */
.archframe {
  --af-fill: var(--ivory-hi);
  --af-line: var(--gold);
  --af-cusp: var(--gold);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--af-line);
}
.archframe__cap { position: absolute; top: 0; left: 0; width: 100%; height: auto; overflow: visible; pointer-events: none; }
.af-fill { fill: var(--af-fill); }
.af-line { fill: none; stroke: var(--af-line); stroke-width: 1; }
.af-line--thin { stroke-width: .8; opacity: .75; }
.af-cusps { fill: none; stroke: var(--af-cusp); stroke-width: .8; opacity: .7; }
.archframe__sill { position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--af-line); opacity: .6; }
.archframe__content { position: relative; z-index: 1; padding: 17% 9% 12%; text-align: center; }

/* ---------- music control ---------- */
.music {
  position: fixed; z-index: 60;
  top: calc(env(safe-area-inset-top, 0px) + 14px); right: calc(env(safe-area-inset-right, 0px) + 14px);
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  border: 1px solid rgba(220, 187, 114, .7); border-radius: 50%;
  background: rgba(42, 18, 48, .82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--gold-bright);
  box-shadow: 0 6px 18px -6px rgba(20, 8, 24, .5);
  opacity: 0; visibility: hidden; transform: scale(.85); pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s, background-color .3s;
}
body.is-open .music { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.music:hover { background: rgba(61, 22, 56, .92); }
.music__bars { display: flex; align-items: flex-end; gap: 2.5px; height: 16px; }
/* bars are scaled (not resized), so the equaliser never triggers layout */
.music__bars i { width: 2.5px; height: 15px; border-radius: 2px; background: currentColor; transform-origin: bottom; transform: scaleY(.27); }
.music.is-playing .music__bars i { animation: eq 1.1s ease-in-out infinite; }
.music.is-playing .music__bars i:nth-child(2) { animation-delay: -.45s; animation-duration: .9s; }
.music.is-playing .music__bars i:nth-child(3) { animation-delay: -.2s; animation-duration: 1.25s; }
.music.is-playing .music__bars i:nth-child(4) { animation-delay: -.7s; }
.music__off { display: none; width: 18px; height: 18px; }
.music:not(.is-playing) .music__bars { display: none; }
.music:not(.is-playing) .music__off { display: block; }
.music__label {
  position: absolute; right: calc(100% + 10px); top: 50%;
  padding: .4em .9em; border-radius: 999px;
  background: rgba(42, 18, 48, .88); color: var(--ivory);
  font-family: var(--sans); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transform: translate(6px, -50%); pointer-events: none;
  transition: opacity .35s, transform .35s var(--ease);
}
.music.show-label .music__label, .music:hover .music__label, .music:focus-visible .music__label { opacity: 1; transform: translate(0, -50%); }
@keyframes eq { 0%, 100% { transform: scaleY(.27); } 50% { transform: scaleY(1); } }
/* a ring ripples out when the music starts */
.music::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--gold-bright); opacity: 0; pointer-events: none; }
.music.just-on::after { animation: ripple 1s var(--ease); }
@keyframes ripple { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }

/* ---------- scroll progress ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; z-index: 61; height: 2px; pointer-events: none; opacity: 0; transition: opacity .8s .6s; }
body.is-open .progress { opacity: 1; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright) 60%, #f6dd9a); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- smooth scrolling (Lenis) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }
/* sections focused after a programme link jump, and the names (focused after opening so screen
   readers start there), aren't controls, so they shouldn't show a focus box */
.sec:focus, #names:focus { outline: none; }

/* ---------- opening screen ---------- */
.cover {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  height: 100vh; height: 100dvh;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;   /* no sideways panning while the doors open */
  color: var(--ink);
  perspective: 1800px;
}
.cover__panel {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  overflow: hidden;
  transition: transform 1.35s var(--ease-io), filter 1.35s var(--ease-io);
}
/* warm light that floods through as the doors part (sits behind the doors) */
.cover__light {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 70vw; margin-left: -35vw; pointer-events: none;
  background: radial-gradient(ellipse 50% 65% at 50% 46%, rgba(255, 246, 222, .95), rgba(246, 201, 119, .4) 45%, transparent 75%);
  opacity: 0; transform: scaleX(.04);
}
.cover__panel::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 100vw;
  background:
    var(--jaali) center / 56px 56px,
    radial-gradient(ellipse 70% 55% at 50% 45%, #4a1b42 0%, #2a1230 55%, #140d26 100%);
  opacity: 1;
}
.cover__panel::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, rgba(220, 187, 114, .5) 30%, rgba(220, 187, 114, .5) 70%, transparent); }
.cover__panel--l { left: 0; transform-origin: 0 50%; }
.cover__panel--l::before { left: 0; }
.cover__panel--l::after { right: 0; }
.cover__panel--r { right: 0; transform-origin: 100% 50%; }
.cover__panel--r::before { right: 0; }
.cover__panel--r::after { left: 0; }
.cover__panel::before { -webkit-mask-image: linear-gradient(#000, #000); }
.cover__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(246, 201, 119, .16), transparent 46%);
  transition: opacity .8s;
  animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

.cover__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 3.2vh, 30px);
  width: 100%; margin: auto; padding: clamp(20px, 5vh, 48px) 18px calc(env(safe-area-inset-bottom, 0px) + clamp(20px, 4vh, 40px));
  transition: opacity .55s var(--ease), transform 1s var(--ease);
}
/* the card is a size container: its text is sized in cqi (percent of the card's width),
   so the card keeps its proportions at every size; the px/vh values before each are the fallback */
.cover__card {
  --af-fill: var(--ivory);
  --af-line: var(--gold);
  container-type: inline-size;
  width: min(86vw, 25.6rem, 56vh);
  min-width: 270px;
  filter: drop-shadow(0 24px 40px rgba(8, 3, 14, .55));
  border-bottom: 0;
}
.cover__card::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--gold); }
.cover__content { padding: 15% 8% 9%; }
.cover__mono { color: var(--gold-deep); font-size: clamp(.82rem, 2.2vh, 1rem); font-size: max(.7rem, 3.9cqi); margin-bottom: clamp(8px, 1.8vh, 16px); margin-bottom: 3.6cqi; }
.cover__kicker { font-size: clamp(.66rem, 1.6vh, .76rem); font-size: max(.6rem, 2.95cqi); }
.cover__names {
  display: flex; flex-direction: column; align-items: center;
  margin: clamp(6px, 1.6vh, 14px) 0 clamp(4px, 1vh, 8px);
  font-weight: 500; line-height: 1.02; letter-spacing: .01em;
  font-size: clamp(1.75rem, min(8.6vw, 5.4vh), 2.75rem);
  font-size: 10.6cqi;
  color: var(--ink);
}
.cover__names .amp { font-style: italic; font-weight: 400; font-size: .85em; line-height: 1; color: var(--gold); margin: .06em 0 .1em; }
.cover__card .rule { width: 62%; margin-block: clamp(4px, 1vh, 10px); }
.cover__events {
  font-weight: 600; text-transform: uppercase; letter-spacing: .16em;
  font-size: clamp(.78rem, min(3.4vw, 2.2vh), .98rem); font-size: max(.66rem, 3.85cqi); color: var(--plum);
}
.cover__date { margin-top: .35em; font-style: italic; font-weight: 600; font-size: clamp(1.1rem, min(5vw, 3vh), 1.4rem); font-size: max(.95rem, 5.4cqi); color: var(--ink); }
.cover__venue {
  margin-top: .3em;
  font-family: var(--sans); font-size: clamp(.68rem, 1.7vh, .78rem); font-size: max(.6rem, 3cqi); font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-deep);
}
.cover__actions { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cover__open { min-width: 230px; }

/* entrance of the opening screen: the arch card rises from its base, then its details follow */
.js .cover__card { animation: arch-rise 1.5s var(--ease-io) both; }
.js .c-in { animation: rise 1.1s var(--ease) both; animation-delay: calc(var(--d, 0s) + .35s); }
.js .c-in.c-seal { animation-name: seal; animation-duration: 1.3s; }
@keyframes arch-rise {
  from { opacity: 0; transform: translateY(24px); clip-path: inset(100% -15% -15% -15%); }
  to { opacity: 1; transform: none; clip-path: inset(-15% -15% -15% -15%); }
}
@keyframes seal { from { opacity: 0; transform: scale(.55) rotate(-35deg); } 70% { opacity: 1; } to { opacity: 1; transform: none; } }

/* a light sweep crosses the arch cards (SVG band clipped to the arch) */
.af-sheen { pointer-events: none; }
.cover__card .af-sheen { animation: sheen 9s var(--ease-io) 1.9s infinite; }
.js body.is-open .invite__card .af-sheen { animation: sheen-once 2.4s var(--ease-io) 1.5s both; }
@keyframes sheen { 0% { transform: translateX(-40px) skewX(-18deg); } 26%, 100% { transform: translateX(1000px) skewX(-18deg); } }
@keyframes sheen-once { from { transform: translateX(-40px) skewX(-18deg); } to { transform: translateX(1000px) skewX(-18deg); } }

/* the Open button glints every few seconds */
.cover__open::after { animation: glint 6s var(--ease-io) 3.2s infinite; }
@keyframes glint { 0% { transform: translateX(-60%) skewX(-20deg); } 24%, 100% { transform: translateX(380%) skewX(-20deg); } }

/* opening: card lifts away, the velvet doors swing apart and light pours through */
.cover.is-opening { pointer-events: auto; }
.cover.is-opening .cover__inner { opacity: 0; transform: scale(1.06) translateY(-14px); transition-duration: .5s, 1.1s; }
.cover.is-opening .cover__panel--l { transform: translateX(-101%) rotateY(10deg); filter: brightness(.7); transition-delay: .18s; }
.cover.is-opening .cover__panel--r { transform: translateX(101%) rotateY(-10deg); filter: brightness(.7); transition-delay: .18s; }
.cover.is-opening .cover__glow { opacity: 0; animation: none; }
.cover.is-opening .cover__light { animation: bloom 1.6s var(--ease) .12s both; }
@keyframes bloom { 0% { opacity: 0; transform: scaleX(.04); } 35% { opacity: 1; } 100% { opacity: 0; transform: scaleX(1.9); } }
.cover.is-done { display: none; }

/* the page settles into place as the doors open */
body.is-entering .invite { animation: settle 2s var(--ease) both; }
@keyframes settle { from { opacity: .35; transform: scale(1.05) translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- sections ---------- */
.sec { position: relative; isolation: isolate; overflow: hidden; padding: var(--sec-pad) var(--gutter); }
.sec > * { position: relative; z-index: 1; }

/* ---------- 1 · invitation ---------- */
.sec--invite {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, #fffaf0 0%, transparent 70%),
    linear-gradient(var(--ivory), var(--paper));
  padding-top: clamp(36px, 6vw, 80px);
  padding-bottom: clamp(36px, 5vw, 64px);
}
.invite { position: relative; width: min(100%, 35rem); margin: 0 auto; }
.invite__card {
  --af-fill: var(--ivory-hi);
  container-type: inline-size;
  filter: drop-shadow(0 18px 34px rgba(110, 80, 40, .12));
}
.invite__content { padding: 22% 9% 10%; }
.invite__tagline { width: fit-content; margin-inline: auto; font-size: clamp(1.9rem, 6.4vw, 2.6rem); font-size: clamp(1.5rem, 7.4cqi, 2.9rem); color: var(--gold-deep); }
.invite__lead { margin-top: .9em; font-style: italic; font-size: 1.15em; color: var(--ink-soft); }
.invite__names { display: flex; flex-direction: column; align-items: center; margin: .5em 0 .4em; }
.invite__person { display: flex; flex-direction: column; align-items: center; }
.invite__name {
  font-weight: 500; text-transform: uppercase; letter-spacing: .08em; line-height: 1.08;
  font-size: clamp(1.85rem, 7.6vw, 3rem);
  font-size: clamp(1.6rem, 8.6cqi, 3.4rem);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.invite__parent {
  margin-top: .45em;
  font-family: var(--sans); font-size: .82rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
  text-wrap: balance;   /* if a family line must wrap, it splits into two even lines */
}
.invite__note { font-size: .76em; letter-spacing: .12em; vertical-align: .08em; }
.invite__amp { font-style: italic; font-weight: 300; font-size: clamp(2.6rem, 9vw, 3.4rem); font-size: clamp(2.3rem, 9.5cqi, 3.8rem); line-height: 1; color: var(--gold); margin: .22em 0 .12em; }
.invite__verb { font-style: italic; font-size: 1.15em; color: var(--ink-soft); }
.invite__events, .cover__events, .closing__meta, .closing__text { text-wrap: balance; }
.invite__events {
  margin: .55em 0 .2em;
  font-weight: 600; text-transform: uppercase; letter-spacing: .15em;
  font-size: clamp(.95rem, 3.6vw, 1.25rem); font-size: clamp(.88rem, 3.6cqi, 1.35rem); color: var(--plum);
}
.invite__when { margin-top: .3em; font-size: 1.2em; font-style: italic; color: var(--ink); }
.invite__sprig { position: absolute; bottom: -18px; width: clamp(84px, 18vw, 130px); height: auto; aspect-ratio: 140 / 220; color: var(--gold); pointer-events: none; }
.invite__sprig--l { left: clamp(-70px, -9vw, -24px); transform: rotate(-12deg); }
.invite__sprig--r { right: clamp(-70px, -9vw, -24px); transform: scaleX(-1) rotate(-12deg); }

/* programme index */
.programme {
  display: flex; justify-content: center; gap: clamp(12px, 4vw, 36px);
  margin: clamp(30px, 5vw, 52px) auto 0;
}
.programme__item {
  --tile-fill: var(--ivory-hi); --tile-line: var(--gold); --tile-ink: var(--gold-deep);
  position: relative;
  display: grid; justify-items: center; grid-template-rows: auto 1fr auto;   /* spare height goes to the name row, so arches and times line up */
  width: clamp(88px, 25vw, 8.125rem);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.programme__arch { grid-row: 1; grid-column: 1; width: 100%; height: auto; aspect-ratio: 100 / 130; transition: transform .45s var(--ease); }
.programme__arch use { fill: var(--tile-fill); stroke: var(--tile-line); stroke-width: 1.2; }
.programme__ur { grid-row: 1; grid-column: 1; align-self: center; margin-top: 18%; font-family: var(--urdu); font-size: clamp(1.15rem, 4.4vw, 1.6rem); line-height: 1.7; color: var(--tile-ink); pointer-events: none; transition: transform .45s var(--ease); }
.programme__num { grid-row: 1; grid-column: 1; align-self: end; margin-bottom: 12%; font-size: .9rem; letter-spacing: .1em; color: var(--tile-ink); opacity: .8; pointer-events: none; }
.programme__name {
  margin-top: 12px;
  font-family: var(--sans); font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-align: center; color: var(--ink-soft);
}
.programme__time { margin-top: 2px; font-style: italic; font-weight: 600; font-size: 1.02rem; color: var(--gold-deep); white-space: nowrap; }
.programme__item--mehndi { --tile-fill: var(--emerald); --tile-line: var(--marigold); --tile-ink: var(--saffron); }
.programme__item--qawali { --tile-fill: var(--midnight); --tile-line: var(--gold-bright); --tile-ink: var(--gold-bright); }
.programme__item:hover .programme__arch, .programme__item:focus-visible .programme__arch { transform: translateY(-5px); filter: drop-shadow(0 10px 14px rgba(110, 80, 40, .18)); }
.programme__item:hover .programme__ur { transform: translateY(-5px); }
.programme__item:active .programme__arch { transform: translateY(-2px) scale(.97); transition-duration: .15s; }
.programme__arch { transition: transform .45s var(--ease), filter .45s var(--ease); }

/* ---------- shared event layout ---------- */
.event {
  display: grid; align-items: center;
  gap: clamp(26px, 5vw, 72px);
  width: min(100%, 67.5rem); margin: 0 auto;
}
.event__num {
  display: inline-flex; align-items: center; gap: .9em;
  font-family: var(--sans); font-size: .8rem; font-weight: 500; letter-spacing: .32em; color: var(--gold-deep);
}
.event__num::before, .event__num::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .6; }
.event__title {
  font-weight: 300; font-style: italic; line-height: .95; letter-spacing: -.01em;
  font-size: clamp(3.6rem, min(15vw, 20vh), 7.5rem);   /* capped by height too, for landscape phones */
  margin: .12em 0 .08em;
}
.event__line { width: fit-content; margin-inline: auto; font-size: clamp(1.8rem, 6vw, 2.5rem); color: var(--gold-deep); margin-bottom: .35em; }

.details { --row-line: rgba(184, 146, 79, .35); display: grid; gap: 0; margin-top: 1em; width: min(100%, 22.5rem); }
.details__row { position: relative; display: grid; grid-template-columns: 5.2em 1fr; align-items: baseline; gap: 1em; padding: .6em 0; }
/* row rules are drawn lines, so they can be drawn in when the details appear */
.details__row::before, .details__row:last-child::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--row-line);
  transform-origin: 0 50%;
}
.details__row::before { top: 0; }
.details__row:last-child::after { bottom: 0; }
.details dt { font-family: var(--sans); font-size: .72rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-deep); }
.details dd { font-size: 1.3rem; line-height: 1.3; color: var(--ink); }
.details--dark { --row-line: rgba(243, 168, 38, .35); }
.details--dark dt { color: var(--saffron); }
.details--dark dd { color: var(--ivory); }
.details--center { margin-inline: auto; text-align: left; }
.details--night { --row-line: rgba(220, 187, 114, .3); }
.details--night dt { color: var(--gold-bright); }
.details--night dd { color: var(--ivory); }

/* ---------- 2 · Nikkah ---------- */
.sec--nikkah {
  background:
    radial-gradient(ellipse 60% 70% at 15% 40%, rgba(255, 252, 244, .9), transparent 70%),
    linear-gradient(170deg, var(--paper) 0%, #f1e4cc 100%);
  padding-top: clamp(36px, 5vw, 72px);
  padding-bottom: calc(var(--sec-pad) + 20px);
}
.nikkah__window {
  --af-fill: #fbf2e8;
  width: min(100%, 26.25rem); margin: 0 auto;
  aspect-ratio: 400 / 520;
  filter: drop-shadow(0 16px 30px rgba(110, 80, 40, .13));
}
.nikkah__window-inner { position: absolute; inset: 0; z-index: 1; }
.nikkah__window-inner::before {
  content: ""; position: absolute; inset: 8% 6% 0;
  background: radial-gradient(ellipse 60% 45% at 50% 46%, rgba(236, 210, 190, .55), transparent 70%);
}
.nikkah__calli {
  position: absolute; left: 0; right: 0; top: 21%;
  text-align: center; font-size: clamp(4rem, 17vw, 6.6rem); color: var(--gold);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.nikkah__sprig { position: absolute; bottom: -4px; width: 42%; height: auto; aspect-ratio: 140 / 220; color: var(--gold); }
.nikkah__sprig--l { left: 2%; }
.nikkah__sprig--r { right: 2%; transform: scaleX(-1); }
.event--nikkah .event__text { text-align: center; }
.event--nikkah .rule--left { margin-inline: auto; }
.event--nikkah .details { margin-inline: auto; text-align: left; }

/* emerald crowns rising into the Nikkah section: the start of Mehndi */
.edge--crowns { position: absolute; left: 0; right: 0; bottom: 0; height: 28px; z-index: 2; pointer-events: none; }
.edge--crowns i {
  position: absolute; left: 0; right: 0; height: 26px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 26'%3E%3Cpath d='M0 26V19C0 13 14 10 24 6C27 5 29 3 30 0C31 3 33 5 36 6C46 10 60 13 60 19V26Z'/%3E%3C/svg%3E") repeat-x center bottom / 60px 26px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 26'%3E%3Cpath d='M0 26V19C0 13 14 10 24 6C27 5 29 3 30 0C31 3 33 5 36 6C46 10 60 13 60 19V26Z'/%3E%3C/svg%3E") repeat-x center bottom / 60px 26px;
}
.edge__rim { bottom: 2px; background: var(--gold); }
.edge__fill { bottom: 0; background: var(--emerald); }

/* ---------- 3 · Mehndi ---------- */
.sec--mehndi {
  color: var(--ivory);
  background:
    radial-gradient(ellipse 55% 50% at 78% 55%, rgba(243, 168, 38, .16), transparent 70%),
    radial-gradient(ellipse 70% 60% at 10% 20%, rgba(31, 110, 82, .55), transparent 70%),
    linear-gradient(180deg, var(--emerald) 0%, #0c4234 60%, var(--emerald-deep) 100%);
  padding-top: clamp(160px, 15vw, 200px);   /* room for the marigold garland */
  padding-bottom: calc(var(--sec-pad) + 14px);
}
.mehndi__pattern {
  position: absolute; inset: -110px 0; z-index: 0; pointer-events: none; opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23f8c74a' stroke-width='1.1'%3E%3Cpath d='M30 56C21 55 17 46 19 38C21 30 28 27 32 22C34 19 34 16 32 14C38 16 41 23 39 30C42 36 42 45 38 50C35 54 33 56 30 56Z'/%3E%3Cpath d='M90 116C81 115 77 106 79 98C81 90 88 87 92 82C94 79 94 76 92 74C98 76 101 83 99 90C102 96 102 105 98 110C95 114 93 116 90 116Z' transform='rotate(180 90 95)'/%3E%3Ccircle cx='29' cy='44' r='3'/%3E%3Ccircle cx='89' cy='96' r='3'/%3E%3C/g%3E%3Cg fill='%23f8c74a'%3E%3Ccircle cx='90' cy='30' r='1.6'/%3E%3Ccircle cx='30' cy='90' r='1.6'/%3E%3Ccircle cx='60' cy='60' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
}
.sec--mehndi::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .14;
  background-image: var(--grain);
}

/* marigold toran */
.toran { position: absolute; top: 0; left: 0; right: 0; height: 170px; z-index: 2; pointer-events: none; }
.toran__svg { width: 100%; height: 100%; overflow: visible; }
.toran .strand { transform-box: fill-box; transform-origin: 50% 0; animation: sway var(--sw, 6s) ease-in-out infinite alternate; animation-delay: var(--sd, 0s); }
@keyframes sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
/* strands drop in from the centre outwards when the Mehndi section arrives */
.toran .drop { transition: transform 1.5s cubic-bezier(.34, 1.25, .64, 1), opacity .7s ease; transition-delay: calc(var(--i, 0) * 55ms + .1s); }
.toran .swags { transition: opacity 1.2s var(--ease) .55s, transform 1.4s var(--ease) .55s; }
.js .sec--mehndi:not(.is-shown) .toran .drop { transform: translateY(-190px); opacity: 0; }
.js .sec--mehndi:not(.is-shown) .toran .swags { transform: translateY(-14px); opacity: 0; }

.event--mehndi .event__num { color: var(--saffron); }
.event--mehndi .event__title { color: var(--marigold); }
.event--mehndi .rule { color: var(--marigold); }

.mehndi__panel {
  --af-fill: var(--marigold);
  --af-line: var(--emerald-deep);
  --af-cusp: var(--emerald-deep);
  width: min(100%, 26.25rem); margin: 0 auto;
  aspect-ratio: 400 / 500;
  border-bottom-color: var(--emerald-deep);
  filter: drop-shadow(0 22px 34px rgba(0, 20, 12, .45));
}
.mehndi__panel-inner { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.mehndi__panel-inner::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 58%, rgba(255, 228, 140, .85), rgba(248, 199, 74, 0) 62%);
}
/* centred with the `translate` property so reveal scale/rotate compose around the true centre */
.mehndi__mandala {
  position: absolute; left: 50%; top: 57%; width: 112%; height: auto; aspect-ratio: 1;
  color: rgba(9, 52, 40, .78);
  translate: -50% -50%;
  animation: spin 160s linear infinite;
}
/* a saffron medallion at the heart of the mandala holds the calligraphy */
.mehndi__panel-inner::after {
  content: ""; position: absolute; left: 50%; top: 57%; width: 50%; aspect-ratio: 1;
  border-radius: 50%; translate: -50% -50%;
  background: radial-gradient(circle at 45% 40%, #ffe9a6, #f8c74a 70%);
  box-shadow: 0 0 0 1px rgba(9, 52, 40, .7), 0 0 0 6px rgba(248, 199, 74, .9), 0 0 0 7px rgba(9, 52, 40, .5);
}
.mehndi__calli {
  position: absolute; left: 0; right: 0; top: 57%; z-index: 1;
  translate: 0 -58%;
  text-align: center; font-size: clamp(2.5rem, 10.5vw, 3.6rem); color: var(--emerald-deep);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* gold band where dusk begins */
.band--gold {
  position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M14 2l5 5-5 5-5-5z' fill='none' stroke='%23dcbb72' stroke-width='1'/%3E%3Ccircle cx='0' cy='7' r='1.4' fill='%23dcbb72'/%3E%3Ccircle cx='28' cy='7' r='1.4' fill='%23dcbb72'/%3E%3C/svg%3E") center / 28px 14px repeat-x,
    var(--emerald-deep);
  border-top: 1px solid rgba(220, 187, 114, .55);
  border-bottom: 1px solid rgba(220, 187, 114, .55);
}

/* ---------- 4 · Qawali Night ---------- */
.sec--qawali {
  color: var(--ivory);
  background:
    radial-gradient(ellipse 60% 45% at 50% 82%, rgba(122, 38, 74, .55), transparent 72%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(246, 201, 119, .08), transparent 70%),
    linear-gradient(180deg, var(--emerald-deep) 0%, #0b2030 7%, var(--midnight) 20%, var(--midnight-2) 55%, var(--plum-deep) 100%);
  padding-top: clamp(80px, 9vw, 120px);
  padding-bottom: calc(clamp(36px, 5vw, 72px) + clamp(48px, 7vw, 100px));
}
.qawali__sky {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255, 240, 210, .8), transparent),
    radial-gradient(1px 1px at 27% 9%, rgba(255, 240, 210, .6), transparent),
    radial-gradient(1.4px 1.4px at 43% 22%, rgba(255, 240, 210, .7), transparent),
    radial-gradient(1px 1px at 61% 12%, rgba(255, 240, 210, .6), transparent),
    radial-gradient(1.3px 1.3px at 78% 20%, rgba(255, 240, 210, .75), transparent),
    radial-gradient(1px 1px at 90% 8%, rgba(255, 240, 210, .55), transparent),
    radial-gradient(1px 1px at 6% 34%, rgba(255, 240, 210, .45), transparent),
    radial-gradient(1px 1px at 95% 36%, rgba(255, 240, 210, .45), transparent);
  background-size: 100% 520px; background-repeat: no-repeat;
}
.star {
  position: absolute; left: var(--x); top: var(--y);
  width: 2px; height: 2px; border-radius: 50%;
  background: #fff3d6; box-shadow: 0 0 6px 1px rgba(255, 236, 190, .55);
  animation: twinkle var(--t, 4s) ease-in-out var(--dl, 0s) infinite;
}
@keyframes twinkle { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
.sec--qawali::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .3;
  background: var(--jaali) center / 56px 56px;
}
.sec--qawali::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .1;
  background-image: var(--grain);
}

.arcade {
  display: grid; grid-template-columns: 1fr minmax(0, 29.4rem) 1fr; align-items: end;
  gap: clamp(14px, 3vw, 36px);
  width: min(100%, 68.75rem); margin: 0 auto;
}
.qawali__arch { --af-line: var(--gold-bright); --af-cusp: var(--gold-bright); }
.qawali__arch--main {
  --af-fill: rgba(42, 18, 48, .72);
  border-bottom-color: var(--gold-bright);
}
.qawali__arch--main::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 45% at 50% 38%, rgba(246, 201, 119, .17), transparent 70%);
}
.qawali__content { padding: 20% 9% 9%; }
.qawali__content .event__num { color: var(--gold-bright); }
.qawali__calli { display: block; margin-top: .1em; font-size: clamp(2.6rem, 10vw, 3.6rem); color: var(--gold-bright); text-shadow: 0 0 22px rgba(246, 201, 119, .35); }
.qawali__title { color: var(--ivory); font-size: clamp(3rem, 12.5vw, 5.6rem); margin-top: 0; margin-bottom: .2em; }
.qawali__content .rule { color: var(--gold-bright); margin-block: .4em .2em; }

.arcade__side { position: relative; align-self: stretch; display: flex; align-items: flex-end; }
.qawali__arch--side {
  --af-fill: rgba(61, 22, 56, .35);
  --af-line: rgba(220, 187, 114, .55);
  width: 100%; height: 78%;
  border-bottom-color: rgba(220, 187, 114, .55);
}

/* lanterns */
/* each lantern hangs from the apex of its side arch (the arch is 78% of the column, so its tip sits at 22%) */
.lantern { position: absolute; left: 50%; top: 22%; width: 54px; transform: translateX(-50%); transform-origin: 50% 0; pointer-events: none; }
.lantern__chain { display: block; width: 1px; height: var(--chain, 160px); margin: 0 auto; background: linear-gradient(rgba(220, 187, 114, .2), rgba(220, 187, 114, .85)); }
.lantern__svg { width: 54px; height: auto; aspect-ratio: 60 / 150; margin-top: -18px; position: relative; }
.lantern__glow {
  position: absolute; left: 50%; bottom: 0; width: 220px; height: 220px; margin-left: -110px; margin-bottom: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 102, .5) 0%, rgba(255, 170, 70, .16) 38%, transparent 68%);
  animation: flicker 4.2s ease-in-out infinite;
}
.lantern--b .lantern__glow { animation-delay: -1.7s; animation-duration: 5s; }
.lantern--a { --chain: 96px; --ld: .5s; animation: swing 7s ease-in-out infinite alternate; }
.lantern--b { --chain: 60px; --ld: .85s; animation: swing 8s ease-in-out -3s infinite alternate; }
@keyframes flicker { 0%, 100% { opacity: .82; } 30% { opacity: 1; } 45% { opacity: .88; } 70% { opacity: .97; } }
@keyframes swing { from { transform: translateX(-50%) rotate(-1.2deg); } to { transform: translateX(-50%) rotate(1.2deg); } }
/* when the night arrives, each lantern lowers on its chain and lights up in turn */
.lantern { transition: translate 1.8s cubic-bezier(.34, 1.2, .64, 1) var(--ld), opacity 1.1s var(--ease) var(--ld); }
.lantern__svg { transition: filter 1.4s var(--ease) calc(var(--ld) + .7s); }
.js .sec--qawali:not(.is-shown) .lantern { translate: 0 -46px; opacity: 0; }
.js .sec--qawali:not(.is-shown) .lantern__svg { filter: brightness(.45) saturate(.5); }
.js .sec--qawali:not(.is-shown) .lantern__glow { opacity: 0; animation: none; }
.js .sec--qawali.is-shown .lantern__glow { animation: ignite 1.6s var(--ease) calc(var(--ld) + .7s) both, flicker 4.2s ease-in-out calc(var(--ld) + 2.3s) infinite; }
@keyframes ignite { 0% { opacity: 0; } 30% { opacity: .9; } 45% { opacity: .35; } 65% { opacity: 1; } 100% { opacity: .85; } }
/* the animation shorthand above resets play-state, so pausing off screen needs this stronger rule */
.js .sec--qawali.is-shown.is-paused .lantern__glow { animation-play-state: paused; }

/* ivory doorway rising into the night: the start of the venue section */
.edge--doorway { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(48px, 7vw, 100px); z-index: 2; pointer-events: none; }
.edge__shape { fill: var(--ivory); }
.edge__line { fill: none; stroke: var(--gold-bright); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s var(--ease-io) .2s; }
.js .edge--doorway.reveal:not(.is-in) .edge__line { stroke-dashoffset: 1; }

/* ---------- 5 · date & venue ---------- */
.sec--venue {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, #fffaf1, transparent 70%),
    linear-gradient(var(--ivory), var(--paper));
  padding-top: clamp(28px, 5vw, 64px);
  overflow: visible; z-index: 2;   /* the Add to Calendar menu may hang over the RSVP section below */
}
.venue {
  z-index: 3;   /* above the Program Timeline, so the open calendar menu isn't covered */
  display: grid; gap: clamp(36px, 5vw, 56px);
  width: min(100%, 62.5rem); margin: 0 auto;
  text-align: center;
}
.when, .where { display: flex; flex-direction: column; align-items: center; }
.when__weekday { margin-top: .9em; font-family: var(--sans); font-size: .8rem; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-soft); }
.when__date { display: flex; flex-direction: column; align-items: center; margin-top: .2em; }
.when__day { font-size: clamp(5rem, min(26vw, 30vh), 9.5rem); line-height: .9; color: var(--gold-deep); }
.when__month { font-style: italic; font-size: clamp(1.5rem, 5vw, 2rem); color: var(--ink); }
.countdown-wrap { margin-top: 1.3em; }
.countdown__title { font-family: var(--script); font-size: clamp(1.8rem, 6vw, 2.4rem); color: var(--plum); line-height: 1.2; }
.countdown { display: flex; justify-content: center; gap: clamp(10px, 3vw, 22px); margin-top: .7em; }
.cd { display: flex; flex-direction: column; align-items: center; min-width: 58px; }
.cd__num { font-size: clamp(2.2rem, 8vw, 3rem); font-weight: 500; line-height: 1; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.cd__label { margin-top: .5em; font-family: var(--sans); font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); }
.countdown.is-days .cd__num { font-size: clamp(3rem, 12vw, 4rem); }
.cd + .cd { position: relative; }
.cd + .cd::before { content: ""; position: absolute; left: calc(clamp(10px, 3vw, 22px) / -2); top: 18%; height: 40%; width: 1px; background: rgba(184, 146, 79, .45); }
.cd__num.tick { animation: tick .5s var(--ease); }
@keyframes tick { from { opacity: .3; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.cal { position: relative; margin-top: 1.3em; }
.cal__menu {
  position: absolute; left: 50%; top: calc(100% + 10px); z-index: 5;
  width: min(280px, 86vw); translate: -50% 0;   /* `translate`, so the rise animation's transform doesn't undo the centring */
  padding: 8px; border-radius: 14px;
  background: var(--ivory-hi);
  box-shadow: 0 18px 40px -16px rgba(60, 40, 20, .35), inset 0 0 0 1px rgba(184, 146, 79, .35);
  text-align: left;
  animation: rise .35s var(--ease);
}
.cal__item {
  display: block; width: 100%; min-height: 44px; padding: .5em .9em;
  border: 0; border-radius: 8px; background: none; text-align: left;
  font-family: var(--sans); font-size: .9rem; color: var(--ink);
}
.cal__item:hover, .cal__item:focus-visible { background: rgba(184, 146, 79, .12); }
.cal__note { padding: .4em .9em .3em; font-family: var(--sans); font-size: .78rem; color: var(--ink-soft); }

.where__arch { --af-fill: rgba(255, 252, 246, .75); width: min(100%, 27.5rem); }
.where__content { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 18.75rem; padding: 24% 9% 10%; }
.where__pin { width: 26px; height: 26px; margin-top: 1em; color: var(--gold); fill: none; stroke: currentColor; stroke-width: 1.4; }
.where__name { margin-top: .15em; font-weight: 500; font-size: clamp(2.6rem, 10vw, 4rem); line-height: 1.05; letter-spacing: .02em; color: var(--ink); }
.where__address { margin-top: .5em; font-size: 1.2rem; color: var(--ink-soft); max-width: 28em; }
.where__map { width: min(100%, 32.5rem); margin-top: 1.4em; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px rgba(184, 146, 79, .4), 0 18px 34px -18px rgba(60, 40, 20, .35); }
.where__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.where__actions:not(:empty) { margin-top: 1.5em; }
.where__pending { margin-top: .5em; font-style: italic; font-size: 1.2rem; color: var(--ink-soft); text-wrap: balance; }

/* program timeline: a vertical line of stops on phones, a horizontal one on wider screens */
.evening { width: min(100%, 62.5rem); margin: clamp(44px, 6vw, 72px) auto 0; text-align: center; }
.evening__title { margin-bottom: 1.2em; }
.evening__list {
  --dot: 13px; --time-h: 2.2rem; --gap: 10px;
  position: relative; display: grid; width: min(100%, 22rem); margin: 0 auto; padding: 0; list-style: none;
}
.evening__item {
  position: relative; display: grid; grid-template-columns: 1fr var(--dot) 1fr; align-items: center; column-gap: 16px;
  padding: .7em 0;
}
.evening__time { justify-self: end; font-weight: 600; font-size: 1.45rem; line-height: 1.1; color: var(--gold-deep); white-space: nowrap; font-variant-numeric: lining-nums; }
.evening__name {
  justify-self: start; text-align: left;
  font-family: var(--sans); font-size: .8rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
  text-decoration: none;
}
a.evening__name { padding: 12px 0; margin: -12px 0; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: text-decoration-color .3s, color .3s; }
a.evening__name:hover { color: var(--plum); text-decoration-color: rgba(61, 22, 56, .4); }
.evening__dot {
  position: relative; z-index: 1; width: var(--dot); height: var(--dot); border-radius: 50%;
  background: var(--champagne); box-shadow: 0 0 0 1px var(--gold), 0 0 0 4px var(--ivory);
}
.evening__item--nikkah .evening__dot { background: var(--ivory-hi); }
.evening__item--mehndi .evening__dot { background: var(--marigold); box-shadow: 0 0 0 1px var(--emerald), 0 0 0 4px var(--ivory); }
.evening__item--qawali .evening__dot { background: var(--midnight); box-shadow: 0 0 0 1px var(--gold-bright), 0 0 0 4px var(--ivory); }
/* the connecting line, drawn from each stop back to the one before it */
.evening__item + .evening__item::before {
  content: ""; position: absolute; left: 50%; bottom: 50%; width: 1px; height: 100%;
  background: linear-gradient(var(--gold), var(--gold)); opacity: .55;
  transform-origin: 50% 0;
}

@media (min-width: 700px) {
  .evening__list { grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
  .evening__item { grid-template-columns: none; grid-template-rows: var(--time-h) var(--dot) auto; justify-items: center; row-gap: var(--gap); padding: 0 8px; }
  .evening__time, .evening__name { justify-self: center; text-align: center; }
  .evening__time { align-self: end; font-size: 1.6rem; }
  .evening__item + .evening__item::before { left: auto; right: 50%; bottom: auto; top: calc(var(--time-h) + var(--gap) + var(--dot) / 2); width: 100%; height: 1px; transform-origin: 0 50%; }
}

/* the line draws in after the stops appear */
.evening__item + .evening__item::before { transition: transform 1s var(--ease) calc(var(--ci, 0) * 90ms + .45s); }
.js .reveal:not(.is-in) .evening__item + .evening__item::before { transform: scaleY(0); }
@media (min-width: 700px) { .js .reveal:not(.is-in) .evening__item + .evening__item::before { transform: scaleX(0); } }

/* ---------- 6 · RSVP ---------- */
.sec--rsvp {
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(243, 226, 214, .9), transparent 75%),
    linear-gradient(var(--paper), #efdfca);
  padding-top: clamp(20px, 3vw, 40px);
  padding-bottom: calc(var(--sec-pad) + 22px);
}
.rsvp {
  position: relative;
  width: min(100%, 35rem); margin: 0 auto;
  padding: clamp(40px, 7vw, 60px) clamp(24px, 6vw, 52px) clamp(34px, 6vw, 48px);
  background: var(--ivory-hi);
  box-shadow: 0 26px 50px -30px rgba(80, 50, 20, .35);
  text-align: center;
}
.frame-line { position: absolute; border: 1px solid var(--gold); pointer-events: none;
  -webkit-mask: radial-gradient(circle at 0 0, #0000 var(--r), #000 calc(var(--r) + .5px)) 0 0 / 51% 51% no-repeat,
                radial-gradient(circle at 100% 0, #0000 var(--r), #000 calc(var(--r) + .5px)) 100% 0 / 51% 51% no-repeat,
                radial-gradient(circle at 0 100%, #0000 var(--r), #000 calc(var(--r) + .5px)) 0 100% / 51% 51% no-repeat,
                radial-gradient(circle at 100% 100%, #0000 var(--r), #000 calc(var(--r) + .5px)) 100% 100% / 51% 51% no-repeat;
          mask: radial-gradient(circle at 0 0, #0000 var(--r), #000 calc(var(--r) + .5px)) 0 0 / 51% 51% no-repeat,
                radial-gradient(circle at 100% 0, #0000 var(--r), #000 calc(var(--r) + .5px)) 100% 0 / 51% 51% no-repeat,
                radial-gradient(circle at 0 100%, #0000 var(--r), #000 calc(var(--r) + .5px)) 0 100% / 51% 51% no-repeat,
                radial-gradient(circle at 100% 100%, #0000 var(--r), #000 calc(var(--r) + .5px)) 100% 100% / 51% 51% no-repeat;
}
.frame-line--o { --r: 20px; inset: 12px; }
.frame-line--i { --r: 14px; inset: 18px; opacity: .55; }
.frame-corner { position: absolute; width: 80px; height: 80px; color: var(--gold); pointer-events: none; }
/* the frame opens out from the centre, then its corners settle in */
.frame-line { clip-path: inset(0); transition: clip-path 1.6s var(--ease-io) .25s; }
.frame-corner { transition: opacity 1s var(--ease) 1.1s, scale 1.2s var(--ease) 1.1s; }
.js .rsvp.reveal:not(.is-in) .frame-line { clip-path: inset(50% 50% 50% 50%); }
.js .rsvp.reveal:not(.is-in) .frame-corner { opacity: 0; scale: .5; }
.frame-corner--tl { top: 8px; left: 8px; }
.frame-corner--tr { top: 8px; right: 8px; transform: scaleX(-1); }
.frame-corner--bl { bottom: 8px; left: 8px; transform: scaleY(-1); }
.frame-corner--br { bottom: 8px; right: 8px; transform: scale(-1); }

.rsvp > :not(.frame-line):not(.frame-corner) { position: relative; z-index: 1; }
.rsvp__title { font-weight: 300; font-style: italic; font-size: clamp(3rem, 12vw, 4.4rem); line-height: 1; letter-spacing: .06em; color: var(--plum); }
.rsvp .rule { margin-top: .5em; }
.rsvp__form { display: grid; gap: 1.1em; margin-top: 1.3em; text-align: left; }
.field { display: grid; gap: .45em; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > label, .field legend { padding: 0; font-family: var(--sans); font-size: .76rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); transition: color .3s; }
.field:focus-within > label, .field:focus-within legend { color: var(--gold-deep); }
.field legend { margin-bottom: .45em; }
.req { color: var(--gold-deep); margin-left: .2em; }
.field input[type="text"], .field textarea {
  width: 100%; min-height: 50px; padding: .65em .95em;
  border: 1px solid rgba(134, 100, 43, .38); border-radius: 10px;
  background: #fffdf9;
  font-family: var(--serif); font-size: 1.2rem; color: var(--ink);
  transition: border-color .25s, box-shadow .25s;
}
.field textarea { resize: vertical; min-height: 104px; line-height: 1.4; }
.field input::placeholder, .field textarea::placeholder { color: #8f7d69; font-style: italic; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(184, 146, 79, .22); }
.field [aria-invalid="true"], .choices[aria-invalid="true"] .choice span { border-color: #a3324c; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 54px; height: 100%; padding: .55em .7em;
  border: 1px solid rgba(134, 100, 43, .38); border-radius: 10px;
  background: #fffdf9;
  font-size: 1.12rem; line-height: 1.2; color: var(--ink);
  transition: background-color .25s, border-color .25s, color .25s, box-shadow .25s;
}
.choice:hover span { border-color: var(--gold); }
.choice input:checked + span { background: var(--plum); border-color: var(--plum); color: var(--ivory); box-shadow: 0 8px 18px -10px rgba(61, 22, 56, .7); animation: pop .45s cubic-bezier(.34, 1.56, .64, 1); }
.choice:active span { scale: .98; }
@keyframes pop { 0% { scale: .96; } 60% { scale: 1.03; } 100% { scale: 1; } }
.choice input:focus-visible + span { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.rsvp__demo { display: flex; gap: .6em; align-items: flex-start; padding: .8em 1em; border-radius: 10px; background: rgba(184, 146, 79, .12); font-family: var(--sans); font-size: .86rem; line-height: 1.5; color: var(--ink-soft); }
.rsvp__demo .icon { margin-top: .15em; color: var(--gold-deep); }
.rsvp__submit { width: 100%; margin-top: .3em; }
.btn__spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(251, 246, 236, .35); border-top-color: var(--ivory); animation: rot .8s linear infinite; }
.rsvp__submit.is-busy .btn__spinner { display: block; }
.rsvp__submit.is-busy .icon { display: none; }
@keyframes rot { to { transform: rotate(360deg); } }
.rsvp__status { min-height: 1.5em; font-family: var(--sans); font-size: .92rem; line-height: 1.5; text-align: center; color: var(--ink-soft); }
.rsvp__status:empty { min-height: 0; }
.rsvp__status.is-error { color: #8e2440; }
.rsvp__status.is-note { color: var(--gold-deep); }
.rsvp__status.is-success { color: var(--emerald); }
.rsvp__status a { color: inherit; font-weight: 500; }
/* specific enough to beat the form's stagger entrance, so every new message rises in */
.rsvp__status.is-new, .js .reveal.is-in .stagger > .rsvp__status.is-new { animation: rise .5s var(--ease); }
.rsvp__contact { margin-top: 1.2em; font-family: var(--sans); font-size: .9rem; color: var(--ink-soft); }
/* padding gives the phone link a comfortable 44px tap area without changing the line */
.rsvp__contact a { display: inline-block; padding: 12px 2px; margin: -12px 0; color: var(--plum); font-weight: 500; text-decoration-color: rgba(61, 22, 56, .35); text-underline-offset: 3px; white-space: nowrap; }

/* plum scallops: the start of the closing */
.edge--scallop {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 22px; z-index: 2; pointer-events: none;
  background: var(--plum-deep);
  -webkit-mask: radial-gradient(circle at 50% 0, #0000 13px, #000 13.5px) center top / 36px 22px repeat-x;
          mask: radial-gradient(circle at 50% 0, #0000 13px, #000 13.5px) center top / 36px 22px repeat-x;
}

/* ---------- 7 · closing ---------- */
.sec--closing {
  color: var(--ivory); text-align: center;
  background:
    radial-gradient(ellipse 60% 50% at 50% 40%, rgba(110, 36, 80, .45), transparent 72%),
    linear-gradient(var(--plum-deep), #1a0f28);
  padding-bottom: calc(var(--sec-pad) + env(safe-area-inset-bottom, 0px));
}
.sec--closing::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .35;
  background: var(--jaali) center / 56px 56px;
}
.closing { width: min(100%, 38.75rem); margin: 0 auto; }
.closing__text { font-weight: 300; font-style: italic; font-size: clamp(2.1rem, 8vw, 3.4rem); line-height: 1.12; color: var(--ivory); }
.closing__mono { margin-top: 1.2em; color: var(--gold-bright); font-size: 1.05rem; }
.closing__names { margin-top: 1em; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; font-size: clamp(1.05rem, 3.8vw, 1.35rem); color: var(--gold-bright); text-wrap: balance; }
.closing__meta { margin-top: .9em; font-family: var(--sans); font-size: .76rem; letter-spacing: .22em; line-height: 2; text-transform: uppercase; color: rgba(251, 246, 236, .75); }

/* ---------- motion: entrances & reveals ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/*
 * Everything below is hidden only while JavaScript is running (html.js), so the
 * invitation stays fully readable if scripts fail. Reveals are triggered by
 * main.js adding .is-in (scroll) or body.is-open (opening the invitation).
 */

/* invitation card: text rises in as the doors open */
.js body:not(.is-open) .enter { opacity: 0; transform: translateY(16px); }
.js body.is-open .enter { transition: opacity 1s var(--ease) calc(var(--d, 0s) + .35s), transform 1.1s var(--ease) calc(var(--d, 0s) + .35s); }
/* script lines are "written" from left to right */
.js body:not(.is-open) .enter--script { transform: none; clip-path: inset(-30% 100% -40% -8%); }
.js body.is-open .enter--script { clip-path: inset(-30% -8% -40% -8%); transition: opacity .6s var(--ease) calc(var(--d, 0s) + .5s), clip-path 1.9s cubic-bezier(.45, .05, .35, 1) calc(var(--d, 0s) + .5s); }

/* default reveal: fade and rise */
.js .reveal { transition: opacity 1.1s var(--ease) var(--d, 0s), transform 1.2s var(--ease) var(--d, 0s); }
.js .reveal:not(.is-in) { opacity: 0; transform: translateY(26px); }

/* r-group: the element itself stays put; only its parts animate */
.js .reveal.r-group:not(.is-in) { opacity: 1; transform: none; }

/*
 * Clip-based reveals run as keyframe animations. Until it is due, the element is only
 * transparent (never clipped or squashed), because browsers treat a fully clipped element
 * as invisible to IntersectionObserver and it would never be revealed.
 */
.js .reveal.r-arch:not(.is-in), .js .reveal.r-title:not(.is-in),
.js .reveal.r-script:not(.is-in), .js .reveal.r-crowns:not(.is-in) { opacity: 0; transform: none; }

/* r-arch: an arch frame grows up from its sill */
.js .reveal.r-arch.is-in { animation: arch-rise 1.6s var(--ease-io) var(--d, 0s) both; }

/* r-title: large titles wipe up from their baseline */
.js .reveal.r-title.is-in { animation: wipe-up 1.3s var(--ease) var(--d, 0s) both; }
@keyframes wipe-up {
  from { opacity: 0; transform: translateY(.2em); clip-path: inset(100% -15% -35% -15%); }
  25% { opacity: 1; }
  to { opacity: 1; transform: none; clip-path: inset(-25% -15% -35% -15%); }
}

/* r-script: handwritten lines are written left to right */
.js .reveal.r-script.is-in { animation: write-on 1.9s cubic-bezier(.45, .05, .35, 1) var(--d, 0s) both; }
@keyframes write-on { from { opacity: 1; clip-path: inset(-30% 100% -40% -8%); } to { opacity: 1; clip-path: inset(-30% -8% -40% -8%); } }

/* r-crowns: the emerald crowns rise into the Nikkah section */
.js .reveal.r-crowns { transform-origin: 50% 100%; }
.js .reveal.r-crowns.is-in { animation: crowns-rise 1.3s var(--ease) var(--d, 0s) both; }
@keyframes crowns-rise { from { opacity: 1; transform: scaleY(0); } to { opacity: 1; transform: none; } }

/* r-rule: ornamental rules draw outward */
.js .reveal.r-rule { transition: transform 1.4s var(--ease) var(--d, 0s), opacity 1s var(--ease) var(--d, 0s); }
.js .reveal.r-rule:not(.is-in) { opacity: 0; transform: scaleX(.15); }

/* detail rows: rules draw in, then each row's text slides in */
.details__row::before, .details__row:last-child::after { transition: transform 1.2s var(--ease) calc(var(--d, 0s) + var(--rd, 0s)); }
.details__row > * { transition: opacity .9s var(--ease) calc(var(--d, 0s) + var(--rd, 0s) + .2s), translate .9s var(--ease) calc(var(--d, 0s) + var(--rd, 0s) + .2s); }
.details__row:nth-child(2) { --rd: .12s; }
.details__row:nth-child(3) { --rd: .24s; }
.qawali__content .details__row { --d: 1.1s; }   /* rows draw in once the arch has risen; the list itself fades in with the card */
.js .reveal:not(.is-in) .details__row::before, .js .reveal:not(.is-in) .details__row:last-child::after { transform: scaleX(0); }
.js .reveal:not(.is-in) .details__row > * { opacity: 0; translate: -10px 0; }

/* stagger: children of a revealed container rise in one after another */
@keyframes stagger-in { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.stagger > :nth-child(2) { --ci: 1; } .stagger > :nth-child(3) { --ci: 2; } .stagger > :nth-child(4) { --ci: 3; }
.stagger > :nth-child(5) { --ci: 4; } .stagger > :nth-child(6) { --ci: 5; } .stagger > :nth-child(7) { --ci: 6; }
.stagger > :nth-child(8) { --ci: 7; } .stagger > :nth-child(9) { --ci: 8; }
.js .reveal:not(.is-in) .stagger > *, .js .reveal.stagger:not(.is-in) > * { opacity: 0; }
.js .reveal.is-in .stagger > *, .js .reveal.stagger.is-in > * { animation: stagger-in 1.1s var(--ease) backwards; animation-delay: calc(var(--d, 0s) + var(--sd, .25s) + var(--ci, 0) * 90ms); }
.qawali__content { --sd: .7s; }
.where__content { --sd: .75s; }
.rsvp__form { --sd: .6s; }

/* calligraphy comes into focus */
.rc-calli { transition: opacity 1.4s var(--ease) calc(var(--d, 0s) + .5s), filter 1.4s var(--ease) calc(var(--d, 0s) + .5s), scale 1.8s var(--ease) calc(var(--d, 0s) + .5s); }
.js .reveal:not(.is-in) .rc-calli { opacity: 0; filter: blur(8px); scale: .92; }

/* Mehndi: the mandala turns into place, then the medallion and its word pop in */
.mehndi__mandala { transition: opacity 1.2s var(--ease) .4s, scale 2.2s var(--ease) .4s, rotate 2.6s var(--ease) .4s; }
.mehndi__panel-inner::after { transition: opacity .9s var(--ease) .9s, scale 1.2s cubic-bezier(.34, 1.56, .64, 1) .9s; }
.mehndi__calli { transition: opacity .9s var(--ease) 1.15s, scale 1.2s cubic-bezier(.34, 1.56, .64, 1) 1.15s; }
.js .reveal:not(.is-in) .mehndi__mandala { opacity: 0; scale: .78; rotate: -60deg; }
.js .reveal:not(.is-in) .mehndi__panel-inner::after, .js .reveal:not(.is-in) .mehndi__calli { opacity: 0; scale: .55; }

/* venue pin drops in */
.where__pin { transform-origin: 50% 100%; }
.js .reveal.is-in .where__pin { animation: stagger-in 1.1s var(--ease) both, pin-drop 1.1s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--d, 0s) + .9s); }
@keyframes pin-drop { from { transform: translateY(-22px) scale(.8); } to { transform: none; } }

/* Floral sprigs draw themselves in. The stems live inside an SVG <use>, which document
   selectors can't reach, so the state is passed down through inherited custom properties. */
.draw { stroke-dasharray: 1; stroke-dashoffset: var(--draw, 0); transition: stroke-dashoffset 2.4s var(--ease) var(--draw-delay, .3s); }
.sprig__leaves, .sprig__blooms { opacity: var(--bloom, 1); transition: opacity 1.4s var(--ease) calc(var(--draw-delay, .3s) + .9s); }
.js .reveal:not(.is-in) .nikkah__sprig, .js body:not(.is-open) .invite__sprig { --draw: 1; --bloom: 0; }
.nikkah__sprig { --draw-delay: .7s; }
.invite__sprig { --draw-delay: 1.1s; }

/* looping decorations rest while off screen */
.is-paused .strand, .is-paused .lantern, .is-paused .lantern__glow, .is-paused .mehndi__mandala,
.is-paused .star { animation-play-state: paused; }

/* ---------- larger screens ---------- */
@media (min-width: 860px) {
  .event { grid-template-columns: 1fr 1fr; }
  .event--nikkah .event__text { text-align: left; }
  .event--nikkah .rule--left { margin-inline: 0; }
  .event--nikkah .details { margin-inline: 0; }
  .event--nikkah .event__line { margin-inline: 0; }
  .rule--left { transform-origin: 0 50%; }
  .event--mehndi { grid-template-columns: 1.05fr .95fr; }
  .venue { grid-template-columns: 1fr 1fr; align-items: center; }
  .where__content { min-height: 27.5rem; }
  .toran { height: 190px; }
}

/* phones */
@media (max-width: 859px) {
  .event--mehndi .event__text { text-align: center; }
  .event--mehndi .rule--left { margin-inline: auto; }
  .event--mehndi .details { margin-inline: auto; text-align: left; }
  .nikkah__window { width: min(100%, 21.25rem); aspect-ratio: 400 / 490; }
  .mehndi__panel { width: min(100%, 20rem); aspect-ratio: 400 / 440; }

  .arcade { grid-template-columns: 1fr; position: relative; }
  /* lanterns hang in the space above the arch's shoulders, clear of its outline */
  .arcade__side { position: absolute; top: -118px; height: 118px; width: 64px; }
  .arcade__side--l { left: -6px; }
  .arcade__side--r { right: -6px; }
  .qawali__arch--side { display: none; }
  .lantern { top: 0; width: 40px; }
  .lantern__svg { width: 40px; }
  .lantern__glow { width: 150px; height: 150px; margin-left: -75px; margin-bottom: -30px; }
  .lantern--a { --chain: 2px; }
  .lantern--b { --chain: 18px; }
  .sec--qawali { padding-top: 138px; }
  .qawali__arch--main { width: min(100%, 26.25rem); margin: 0 auto; }
}

/* tablets in portrait: the stacked layout, with the arches given a little more room */
@media (min-width: 560px) and (max-width: 859px) {
  .nikkah__window { width: min(100%, 25rem); }
  .mehndi__panel { width: min(100%, 24rem); }
  .qawali__arch--main { width: min(100%, 28rem); }
}

@media (max-width: 380px) {
  .invite__content { padding-inline: 7%; }
  .invite__parent { font-size: .74rem; letter-spacing: .12em; }
  .details__row { grid-template-columns: 4.4em 1fr; gap: .7em; }
  .choices { grid-template-columns: 1fr; }
  .programme { gap: 10px; }
  .evening__name { letter-spacing: .15em; }   /* keeps "Qawali Night" on one line beside its dot */
}

/* the narrowest phones (e.g. folded Galaxy Fold, 280px) */
@media (max-width: 340px) {
  .countdown { gap: 8px; }
  .cd { min-width: 48px; }
  .cd__label { letter-spacing: .12em; }
  .cd + .cd::before { left: -4px; }
  .evening__time { font-size: 1.22rem; }
  .evening__item { column-gap: 12px; }
}

/* short screens: keep the whole opening card in view */
@media (max-height: 620px) {
  .cover__card { width: min(80vw, 20.6rem, 60vh); }
  .cover__content { padding-top: 13%; }
}

/* phones held sideways: the card and the Open button sit side by side so both fit on screen */
@media (orientation: landscape) and (max-height: 540px) {
  .cover__inner { flex-direction: row; justify-content: center; gap: clamp(20px, 6vw, 64px); padding: 10px 24px; }
  .cover__card { width: min(44vw, 82vh, 22.5rem); min-width: 0; }
  .cover__content { padding: 14% 8% 8%; }
  .cover__actions { gap: 10px; }
  .cover__open { min-width: 200px; }
}

/* ---------- reduced motion ---------- */
/* main.js marks every reveal as already shown for these guests, so content simply appears */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .af-sheen, .cover__open::after, .star, .toran .strand, .lantern, .mehndi__mandala { animation: none !important; }
  .js .sec--qawali .lantern__glow { animation: none !important; opacity: .85; }
}

/* printing / Save as PDF: main.js reveals everything first (beforeprint); this makes it instant */
@media print {
  .cover, .music, .progress { display: none !important; }
  *, *::before, *::after { transition: none !important; animation-duration: 0s !important; animation-delay: 0s !important; }
  .reveal, .enter { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}