/* ============================================================
   Mohammed Ayaan & Zara — a wedding film in scrollable scenes
   Pearl · champagne/antique gold · emerald-noir · malabar green · henna rose
   Display: Fraunces · Body: Hanken Grotesk · Names: Great Vibes · Bismillah: Amiri
   Gold rule: champagne/antique-gold for large display + ornament only;
              body text uses --ink / --emerald-noir (or pearl on dark).
   ============================================================ */

:root{
  --pearl:#FBF6EA;
  --sand:#EEDFC6;
  --champagne:#D8B768;
  --antique-gold:#A67828;
  --emerald-noir:#083A2B;
  --emerald-deep:#06291E;
  --malabar-green:#4F8A68;
  --henna-rose:#B76E61;
  --sky-pearl:#DDEBE7;
  --ink:#17231D;
  --ink-soft:#4C5A50;
  --card:#FFFDF8;

  --foil:linear-gradient(100deg,#E6CD86,#C29A45 40%,#A67828 62%,#E6CD86 84%,#B68A33);
  --foil-light:linear-gradient(100deg,#F0DEA6,#D8B768 45%,#C29A45 70%,#EBD79B);
  --shadow:0 36px 70px -38px rgba(8,42,33,.55);
  --shadow-sm:0 18px 40px -26px rgba(8,42,33,.45);

  --display:'Fraunces', Georgia, serif;
  --body:'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --script:'Great Vibes','Snell Roundhand', cursive;
  --arabic:'Amiri', serif;

  --maxw:1080px;
  --pad:clamp(1.25rem,5vw,3rem);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ background:var(--pearl); scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ font-family:var(--body); color:var(--ink); line-height:1.7; font-size:clamp(1rem,1.4vw,1.08rem); overflow-x:hidden; background:var(--pearl); }
img{ max-width:100%; display:block; }
::selection{ background:rgba(166,120,40,.2); }

/* girih texture used by light scenes */
.girih{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("../assets/pattern-geo.svg") repeat; background-size:108px 108px; opacity:.05; }
/* soft jaali dot lattice */
.jaali{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(166,120,40,.16) 1px, transparent 1.4px);
  background-size:26px 26px; -webkit-mask-image:radial-gradient(120% 80% at 50% 30%, #000, transparent 75%); mask-image:radial-gradient(120% 80% at 50% 30%, #000, transparent 75%); }
/* gold radial glow */
.glow{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 38%, rgba(216,183,104,.25), transparent 70%); }

/* ============================================================ SCENE shell */
.scene{ position:relative; overflow:hidden; padding-block:clamp(4.5rem,12vw,8rem); }
.scene--full{ min-height:100svh; display:flex; align-items:center; padding-block:clamp(5rem,9vh,7rem); }
.scene__inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.scene__inner--narrow{ max-width:720px; }
.center{ text-align:center; }

/* scene backdrops */
.scene--prayer{ background:radial-gradient(120% 90% at 50% 18%, #FFFCF4 0%, var(--pearl) 55%, #F3E8CF 100%); }
.scene--announce{ background:radial-gradient(120% 80% at 50% 0%, #FFFDF8 0%, var(--pearl) 60%); }
.scene--reveal{ background:linear-gradient(180deg, var(--emerald-noir), var(--emerald-deep)); color:var(--pearl); }
.scene--family{ background:linear-gradient(180deg, #FFFDF8, var(--pearl)); }
.scene--grand{ background:radial-gradient(120% 90% at 50% 20%, #FBEFD8 0%, var(--sand) 70%, #E7D2AE 100%); }
.scene--events{ background:linear-gradient(180deg, var(--pearl), #F4E9D2); }
.scene--travel{ background:linear-gradient(180deg, var(--sky-pearl), #EAF1EC 60%, var(--pearl)); }
.scene--newbeginning{ background:radial-gradient(120% 90% at 50% 14%, #FFF7EA 0%, var(--pearl) 58%, #F2E6CE 100%); }
.scene--glance{ background:linear-gradient(180deg, #06291E 0%, #0A3A2A 45%, #06291E 100%); color:var(--pearl); }
.scene--hospitality{ background:radial-gradient(120% 90% at 50% 16%, #FCEFE0 0%, var(--pearl) 60%, #F1E3D6 100%); }
.scene--timeline{ background:linear-gradient(180deg, #06291E 0%, #0A3A2A 42%, #072116 100%); color:var(--pearl); }
.scene--concierge{ background:radial-gradient(120% 90% at 50% 12%, #0C3527 0%, var(--emerald-noir) 48%, var(--emerald-deep) 100%); color:var(--pearl); }
.scene--rsvp{ background:radial-gradient(120% 90% at 50% 0%, #0C3527 0%, var(--emerald-noir) 45%, var(--emerald-deep) 100%); color:var(--pearl); }

/* ============================================================ type helpers */
.eyebrow{ font-family:var(--body); font-weight:600; font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:var(--antique-gold); }
.scene--reveal .eyebrow,.scene--rsvp .eyebrow,.scene--timeline .eyebrow,.scene--glance .eyebrow,.scene--concierge .eyebrow{ color:var(--champagne); }
.scene-title{ font-family:var(--display); font-weight:500; font-optical-sizing:auto; font-size:clamp(2rem,5.4vw,3.1rem); line-height:1.12; letter-spacing:-.01em; color:var(--emerald-noir); margin-top:.5rem; }
.scene--reveal .scene-title,.scene--rsvp .scene-title,.scene--timeline .scene-title,.scene--glance .scene-title,.scene--concierge .scene-title{ color:#fff; }
.lede{ font-family:var(--display); font-weight:400; font-size:clamp(1.25rem,3vw,1.7rem); line-height:1.5; color:var(--ink); }
.body-copy{ font-family:var(--body); color:var(--ink-soft); max-width:46ch; margin-inline:auto; }
/* Fraunces is a display serif: in running body copy its high optical-size
   contrast + playful WONK axis read as "jiggly" letters. For multi-line copy,
   pin a calmer optical size and switch WONK off (weight/italic still come from
   font-weight/font-style). Headings keep their auto optical sizing for drama. */
.lede,.prayer__copy,.invite-copy,.grand__sub,.travel__note,.timeline-lede,
.rsvp-copy,.reveal-line,.newbeginning-copy,.glance-lede,.hospitality-copy,
.hospitality-note,.finale__line{ font-variation-settings:"opsz" 34,"WONK" 0; }
/* Dates too: at display optical sizes Fraunces draws digits with extreme
   thick/thin contrast (the "8" looks blobby/awkward) — pin the calmer cut. */
.announce__date,.finale__date,.glance-card__when,.event-card__date{ font-variation-settings:"opsz" 34,"WONK" 0; }
.script-names{ font-family:var(--script); font-weight:400; line-height:1.18; display:flex; flex-direction:column; align-items:center; gap:.04em; max-width:100%; padding-block:.14em; }
.script-names span{ display:block; padding-block:.04em; }
.script-names .amp{ font-size:.55em; margin:.02em 0; }

.foil{ background:var(--foil); background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
@keyframes shimmer{ 0%{ background-position:0 center; } 100%{ background-position:200% center; } }

/* ornamental dividers */
.hairline{ display:flex; align-items:center; justify-content:center; gap:12px; margin:1.1rem auto; }
.hairline::before,.hairline::after{ content:""; height:1px; width:46px; background:linear-gradient(90deg,transparent,var(--antique-gold)); }
.hairline::after{ background:linear-gradient(90deg,var(--antique-gold),transparent); }
.hairline i{ width:6px; height:6px; border:1px solid var(--antique-gold); transform:rotate(45deg); }
.scene--reveal .hairline::before,.scene--rsvp .hairline::before,.scene--glance .hairline::before{ background:linear-gradient(90deg,transparent,var(--champagne)); }
.scene--reveal .hairline::after,.scene--rsvp .hairline::after,.scene--glance .hairline::after{ background:linear-gradient(90deg,var(--champagne),transparent); }
.scene--reveal .hairline i,.scene--rsvp .hairline i,.scene--glance .hairline i{ border-color:var(--champagne); }
.sprig{ display:block; width:min(56%,220px); height:28px; margin:1.2rem auto; background:center/contain no-repeat url("../assets/sprig.svg"); }
.scene--rsvp .sprig,.scene--timeline .sprig,.scene--glance .sprig{ filter:saturate(1.3) brightness(1.5); }

/* girih medallion (scene 1 focal ornament) */
.medallion{ width:clamp(120px,26vw,180px); height:clamp(120px,26vw,180px); margin:0 auto 1.6rem; position:relative; }
.medallion::before{ content:""; position:absolute; inset:0; background:url("../assets/pattern-geo.svg") center/contain no-repeat; opacity:.5;
  -webkit-mask-image:radial-gradient(circle,#000 60%,transparent 72%); mask-image:radial-gradient(circle,#000 60%,transparent 72%); }
.medallion::after{ content:""; position:absolute; inset:18%; border:1px solid var(--champagne); border-radius:50%; opacity:.5; }

/* ============================================================ buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55em; font-family:var(--body); font-weight:600; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; padding:.95em 1.7em; border-radius:50px; cursor:pointer; touch-action:manipulation; text-decoration:none; white-space:nowrap; border:1px solid transparent; transition:transform .25s, box-shadow .25s, background .25s, color .25s; }
/* One-tap on touch: skip the double-tap-zoom delay on interactive elements */
.contact,.site-credit__link,.rsvp-regret a,.cal summary,.scroll-cue,.music-toggle{ touch-action:manipulation; }
.btn__ico{ font-size:1.05em; line-height:0; }
.btn--gold{ background:linear-gradient(165deg,#D8B768,#B0852E 60%,#946C20); color:#FFF8E6; box-shadow:0 14px 28px -16px rgba(166,120,40,.85); }
.btn--gold:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.btn--emerald{ background:var(--emerald-noir); color:var(--pearl); box-shadow:0 14px 28px -16px rgba(8,42,33,.85); }
.btn--emerald:hover{ transform:translateY(-2px); background:var(--emerald-deep); }
.btn--ghost{ background:transparent; border-color:var(--antique-gold); color:var(--emerald-noir); }
.btn--ghost:hover{ transform:translateY(-2px); background:var(--emerald-noir); color:var(--pearl); border-color:var(--emerald-noir); }
.btn--on-dark{ background:transparent; border-color:var(--champagne); color:var(--champagne); }
.btn--on-dark:hover{ transform:translateY(-2px); background:var(--champagne); color:var(--emerald-noir); }
.btn--wide{ width:100%; }
.btn--sm{ padding:.72em 1.3em; font-size:.7rem; letter-spacing:.12em; }

/* add-to-calendar */
.cal{ position:relative; }
.cal summary{ list-style:none; } .cal summary::-webkit-details-marker{ display:none; }
.cal__menu{ position:absolute; left:50%; transform:translateX(-50%); margin-top:.5rem; min-width:210px; z-index:20; background:var(--card); border:1px solid var(--champagne); border-radius:12px; box-shadow:var(--shadow-sm); padding:.4rem; display:flex; flex-direction:column; }
.cal__menu a{ font-family:var(--body); font-weight:500; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); text-decoration:none; padding:.7rem .9rem; border-radius:8px; transition:background .2s,color .2s; }
.cal__menu a:hover{ background:var(--pearl); color:var(--emerald-noir); }
.event-card--evening .cal__menu{ background:#06241B; border-color:rgba(216,183,104,.4); }
.event-card--evening .cal__menu a{ color:#EFE7D2; } .event-card--evening .cal__menu a:hover{ background:rgba(216,183,104,.16); color:#fff; }

/* ============================================================ SCENE 1 — prayer */
/* The ﷽ ligature is ~11.4x as wide as its font-size, so size it from the
   viewport width (minus padding) to guarantee it always fits — never clipped. */
.prayer__bismillah{ font-family:var(--arabic); font-size:min(calc((100vw - 54px) / 11.9), 3.4rem); line-height:1.5; direction:rtl; color:var(--antique-gold); white-space:nowrap; padding-block:.14em; overflow:visible; }
.prayer__lead{ font-family:var(--display); font-weight:500; font-size:clamp(1.5rem,4.4vw,2.3rem); color:var(--emerald-noir); margin-top:1.4rem; }
.prayer__copy{ font-family:var(--display); font-weight:400; font-style:italic; font-size:clamp(1.1rem,2.6vw,1.35rem); color:var(--ink-soft); max-width:34ch; margin:.9rem auto 0; line-height:1.6; }

.scroll-cue{ margin-top:clamp(2rem,5vh,3rem); display:inline-flex; flex-direction:column; align-items:center; gap:.55rem; font-family:var(--body); font-weight:600; font-size:.6rem; letter-spacing:.4em; text-transform:uppercase; color:var(--antique-gold); text-decoration:none; }
.scroll-cue__line{ width:1px; height:42px; background:linear-gradient(var(--antique-gold),transparent); position:relative; overflow:hidden; }
.scroll-cue__line::after{ content:""; position:absolute; top:-50%; left:0; width:1px; height:50%; background:var(--antique-gold); animation:cue 2.4s ease-in-out infinite; }
@keyframes cue{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(330%);} }

/* ============================================================ SCENE 2 — announcement */
.announce{ text-align:center; }
.announce__names{ font-size:clamp(3rem,13vw,6rem); margin:.4rem 0; }
@media (prefers-reduced-motion:no-preference){ .announce__names{ animation:shimmer 7s linear infinite alternate; } }
.announce__sub{ font-family:var(--body); font-weight:600; letter-spacing:.32em; text-transform:uppercase; font-size:.78rem; color:var(--emerald-noir); }
.announce__date{ font-family:var(--display); font-weight:500; font-size:clamp(1.2rem,3.2vw,1.6rem); letter-spacing:.12em; color:var(--antique-gold); margin-top:.5rem; }
/* compact countdown */
.countdown-strip{ display:inline-flex; align-items:center; gap:clamp(.5rem,3vw,1.5rem); margin:clamp(1.8rem,4vh,2.6rem) auto 0; padding:.7rem clamp(1rem,4vw,1.6rem); background:rgba(255,253,248,.45); border:1px solid rgba(166,120,40,.26); border-radius:12px; box-shadow:none; }
.cd-unit{ display:flex; flex-direction:column; align-items:center; gap:.2rem; min-width:48px; }
.cd-num{ font-family:var(--display); font-weight:600; font-size:clamp(1.25rem,4vw,1.7rem); line-height:1; color:var(--emerald-noir); font-variant-numeric:tabular-nums; }
.cd-label{ font-family:var(--body); font-weight:500; font-size:.55rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
.cd-sep{ font-family:var(--display); color:var(--champagne); align-self:center; transform:translateY(-.25em); font-size:1.2rem; }

/* ============================================================ SCENE 5 — couple reveal */
.reveal-scene{ text-align:center; }
.cameo{ position:relative; width:min(66vw,300px); margin:clamp(1.4rem,4vh,2.2rem) auto; }
.cameo__media{ aspect-ratio:4/5; border-radius:50%; overflow:hidden; box-shadow:0 40px 80px -30px rgba(0,0,0,.6); background:#0a2a20; }
.cameo__media img{ width:100%; height:100%; object-fit:cover; object-position:center 16%; }
.cameo__ring{ position:absolute; inset:-10px; border-radius:50%; border:1px solid var(--champagne); opacity:.8; pointer-events:none; }
.cameo__ring--2{ inset:-2px; border-color:rgba(216,183,104,.5); }
.cameo__sprig{ position:absolute; left:50%; transform:translateX(-50%); width:130px; height:24px; background:center/contain no-repeat url("../assets/sprig.svg"); filter:saturate(1.3) brightness(1.5); }
.cameo__sprig--t{ top:-30px; } .cameo__sprig--b{ bottom:-30px; transform:translateX(-50%) scaleY(-1); }
.reveal-scene .script-names{ font-size:clamp(2.6rem,9vw,4rem); }

/* ============================================================ SCENE 6 — families */
.invite-copy{ font-family:var(--display); font-weight:400; font-size:clamp(1.2rem,2.8vw,1.55rem); line-height:1.6; color:var(--ink); max-width:34ch; margin:1.2rem auto 0; }
.invite-copy .nm{ color:var(--antique-gold); font-weight:500; }
.couple-grid{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,2.6rem); align-items:start; margin-top:clamp(2.4rem,6vw,3.4rem); }
.person{ text-align:center; }
.person__role{ font-family:var(--body); font-weight:600; font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--malabar-green); }
.person__name{ font-family:var(--script); font-size:clamp(2.4rem,9vw,3.4rem); line-height:1.16; padding-block:.1em; margin:.1rem 0 .2rem; }
.person__lineage{ font-family:var(--body); font-size:.96rem; color:var(--ink-soft); line-height:1.55; }
.person__lineage + .person__lineage{ margin-top:.1rem; }
.couple-amp{ font-family:var(--display); font-style:normal; font-weight:500; font-size:clamp(1.6rem,4.5vw,2.2rem); line-height:1; text-align:center; align-self:center; }

/* ============================================================ SCENE 3 — grand celebration */
.grand{ text-align:center; }
.grand__title{ font-family:var(--display); font-weight:500; font-size:clamp(2.1rem,6vw,3.4rem); color:var(--emerald-noir); line-height:1.1; }
.grand__sub{ font-family:var(--display); font-style:italic; font-weight:400; font-size:clamp(1.2rem,3vw,1.6rem); color:var(--henna-rose); margin-top:1rem; }

/* ============================================================ SCENE 4 — events */
.events-grid{ display:grid; grid-template-columns:1fr; gap:clamp(1.4rem,4vw,2rem); margin-top:clamp(2.2rem,6vw,3rem); }
.event-card{ position:relative; text-align:center; padding:clamp(2rem,5vw,2.8rem) clamp(1.4rem,4vw,2.2rem); background:var(--card); border:1px solid var(--champagne); border-radius:18px; box-shadow:var(--shadow-sm); }
.event-card__tag{ font-family:var(--body); font-weight:600; font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--antique-gold); }
.event-card__name{ font-family:var(--display); font-weight:500; font-size:clamp(1.7rem,5.4vw,2.3rem); color:var(--emerald-noir); margin:.25rem 0 .6rem; }
.event-card__date{ font-family:var(--display); font-weight:500; font-size:1.18rem; color:var(--ink); }
.event-card__time{ font-family:var(--body); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:.82rem; color:var(--antique-gold); margin-top:.2rem; }
.event-card__venue{ font-family:var(--display); font-weight:600; font-size:1.2rem; color:var(--ink); }
.event-card__addr{ font-family:var(--body); font-size:.92rem; color:var(--ink-soft); margin-top:.3rem; line-height:1.5; }
.event-card__actions{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:1.5rem; }
.event-card--evening{ background:radial-gradient(120% 100% at 50% 0%, #0d4231 0, transparent 60%), var(--emerald-deep); border-color:rgba(216,183,104,.4); }
.event-card--evening .event-card__tag{ color:var(--champagne); }
.event-card--evening .event-card__name,.event-card--evening .event-card__venue{ color:#fff; }
.event-card--evening .event-card__date{ color:#F3EAD4; } .event-card--evening .event-card__time{ color:var(--champagne); } .event-card--evening .event-card__addr{ color:#CFC7AE; }
.event-card--evening .hairline::before{ background:linear-gradient(90deg,transparent,var(--champagne)); } .event-card--evening .hairline::after{ background:linear-gradient(90deg,var(--champagne),transparent); } .event-card--evening .hairline i{ border-color:var(--champagne); }

/* ============================================================ SCENE 7 — travel */
.travel{ position:relative; max-width:760px; margin:clamp(2rem,5vw,3rem) auto 0; background:rgba(255,253,248,.7); backdrop-filter:blur(2px); border:1px solid var(--champagne); border-radius:18px; box-shadow:var(--shadow-sm); padding:clamp(1.8rem,5vw,2.6rem); text-align:center; }
.travel__route{ display:flex; align-items:center; justify-content:center; gap:.8rem; flex-wrap:wrap; margin-bottom:1rem; }
.travel__pin{ font-family:var(--display); font-weight:600; font-size:clamp(1.3rem,3.6vw,1.8rem); color:var(--emerald-noir); }
.travel__line{ position:relative; width:clamp(60px,18vw,140px); height:1px; background:repeating-linear-gradient(90deg,var(--antique-gold) 0 6px,transparent 6px 12px); }
.travel__line::after{ content:"\2708"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:var(--antique-gold); font-size:.9rem; background:var(--sky-pearl); padding:0 6px; }
.travel__meta{ font-family:var(--body); font-weight:600; letter-spacing:.18em; text-transform:uppercase; font-size:.76rem; color:var(--antique-gold); }
.travel__note{ font-family:var(--display); font-size:clamp(1.02rem,2.4vw,1.2rem); color:var(--ink-soft); margin-top:.6rem; line-height:1.6; }
.travel__transport{ margin-top:1.2rem; padding-top:1.1rem; border-top:1px solid rgba(166,120,40,.3); font-family:var(--body); font-size:.95rem; color:var(--ink); }
.travel__transport b{ color:var(--malabar-green); }
.travel__tbc{ font-size:.78rem; color:var(--ink-soft); letter-spacing:.06em; }

/* ============================================================ SCENE 7 — reception timeline */
.timeline-lede{ font-family:var(--display); font-weight:400; font-style:italic; font-size:clamp(1.08rem,2.6vw,1.35rem); color:#D9E4DA; max-width:36ch; margin:.8rem auto 0; line-height:1.6; }
.timeline{ list-style:none; max-width:600px; margin:clamp(2.4rem,6vw,3.4rem) auto 0; }
.tl-item{ display:grid; grid-template-columns:max-content 16px 1fr; column-gap:clamp(.7rem,3vw,1.4rem); align-items:stretch; }
.tl-time{ grid-column:1; align-self:start; text-align:right; padding-top:.12em; font-family:var(--display); font-weight:600; font-size:clamp(1rem,3.4vw,1.3rem); line-height:1.1; letter-spacing:.01em; color:var(--champagne); white-space:nowrap; font-variant-numeric:tabular-nums; }
.tl-time small{ font-size:.6em; font-weight:600; letter-spacing:.1em; margin-inline-start:.12em; }
.tl-onwards{ display:block; font-family:var(--body); font-weight:600; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(224,193,120,.92); margin-top:.3em; }
.tl-rail{ grid-column:2; position:relative; display:flex; justify-content:center; }
.tl-rail::before{ content:""; position:absolute; top:.55em; bottom:-.1em; width:1px; background:linear-gradient(rgba(216,183,104,.5),rgba(216,183,104,.16)); }
.tl-item:last-child .tl-rail::before{ background:linear-gradient(rgba(216,183,104,.5),transparent 85%); }
.tl-node{ position:relative; z-index:1; margin-top:.4em; width:10px; height:10px; border:1px solid var(--champagne); background:#072116; transform:rotate(45deg); transition:background .3s; }
.tl-item--key .tl-node{ background:var(--champagne); box-shadow:0 0 0 5px rgba(216,183,104,.12); }
.tl-item--finale .tl-node{ background:var(--champagne); box-shadow:0 0 0 5px rgba(216,183,104,.16), 0 0 18px rgba(216,183,104,.55); }
.tl-body{ grid-column:3; padding-bottom:clamp(1.9rem,5.2vw,2.7rem); }
.tl-item:last-child .tl-body{ padding-bottom:0; }
.tl-title{ font-family:var(--display); font-weight:500; font-size:clamp(1.14rem,3.4vw,1.42rem); line-height:1.28; color:#FBF6EA; }
.tl-item--key .tl-title,.tl-item--finale .tl-title{ color:var(--champagne); }
.tl-desc{ font-family:var(--body); font-size:clamp(.92rem,2.4vw,1rem); color:#C7D2C8; line-height:1.62; margin-top:.4rem; max-width:44ch; }

/* ============================================================ SCENE 9 — rsvp finale */
.rsvp-copy{ font-family:var(--display); font-size:clamp(1.15rem,2.8vw,1.5rem); color:#EFE7D2; max-width:32ch; margin:1rem auto 0; line-height:1.55; }
.rsvp-options{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:1.8rem; }
.rsvp-regret{ margin-top:1.25rem; font-family:var(--body); font-size:.9rem; color:#B7C8BC; letter-spacing:.01em; }
.rsvp-regret a{ color:var(--champagne); text-decoration:none; border-bottom:1px solid rgba(216,183,104,.4); padding-bottom:1px; transition:color .25s, border-color .25s; }
.rsvp-regret a:hover{ color:#fff; border-color:var(--champagne); }
.contacts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:1rem; margin:2rem auto 0; max-width:760px; }
.contact{ display:flex; flex-direction:column; gap:.12rem; text-decoration:none; padding:1rem 1.3rem; background:rgba(255,253,248,.06); border:1px solid rgba(216,183,104,.4); border-radius:14px; transition:transform .25s, background .25s; }
.contact:hover{ transform:translateY(-2px); background:rgba(255,253,248,.12); }
.contact__name{ font-family:var(--display); font-weight:600; font-size:1.12rem; color:#fff; }
.contact__role{ font-family:var(--body); font-weight:500; letter-spacing:.16em; text-transform:uppercase; font-size:.62rem; color:var(--champagne); }
.contact__num{ font-family:var(--body); font-weight:500; color:#F3EAD4; margin-top:.25rem; letter-spacing:.04em; }
.finale{ margin-top:clamp(2.6rem,7vw,3.6rem); }
.finale__line{ font-family:var(--display); font-style:italic; font-size:clamp(1.05rem,2.6vw,1.3rem); color:#D9E4DA; }
.finale__names{ font-family:var(--script); font-size:clamp(2.6rem,10vw,4rem); line-height:1.2; padding-block:.1em; margin:.35rem 0 .15rem; }
.finale__date{ font-family:var(--body); font-weight:600; letter-spacing:.32em; text-transform:uppercase; font-size:.72rem; color:var(--champagne); }

/* sticky mobile RSVP */
.rsvp-sticky{ position:fixed; left:50%; transform:translateX(-50%) translateY(150%); bottom:calc(env(safe-area-inset-bottom,0px) + .8rem); z-index:55; transition:transform .35s ease; }
.rsvp-sticky.show{ transform:translateX(-50%) translateY(0); }
@media (min-width:768px){ .rsvp-sticky{ display:none; } }

/* ============================================================ MUSIC */
.music-toggle{ position:fixed; right:clamp(1rem,3vw,1.6rem); bottom:calc(env(safe-area-inset-bottom,0px) + clamp(1rem,3vw,1.6rem)); z-index:60; width:52px; height:52px; border-radius:50%; background:rgba(255,253,248,.9); backdrop-filter:blur(6px); border:1px solid var(--antique-gold); color:var(--emerald-noir); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 12px 26px -14px rgba(8,42,33,.7); transition:transform .25s; }
.music-toggle[hidden]{ display:none; }
.music-toggle:hover{ transform:translateY(-2px) scale(1.05); }
.music-icon{ font-size:1.25rem; line-height:1; }
.music-wave{ display:none; align-items:flex-end; gap:3px; height:17px; }
.music-wave i{ width:3px; height:6px; background:var(--emerald-noir); border-radius:2px; animation:wave 1s ease-in-out infinite; }
.music-wave i:nth-child(2){ animation-delay:.2s; } .music-wave i:nth-child(3){ animation-delay:.4s; }
@keyframes wave{ 0%,100%{ height:5px;} 50%{ height:15px;} }
body.music-on .music-icon{ display:none; } body.music-on .music-wave{ display:flex; }

/* ============================================================ reveal — scene curtain */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none; }
  .announce__names{ animation:none; } .scroll-cue__line::after,.music-wave i{ animation:none; }
}

/* ============================================================ SCENE 3 — couple reveal line */
.reveal-line{ font-family:var(--display); font-style:italic; font-weight:400; font-size:clamp(1.05rem,2.6vw,1.35rem); color:#D9E4DA; max-width:30ch; margin:1.1rem auto 0; line-height:1.55; }

/* ============================================================ SCENE 4 — a new beginning */
.newbeginning-copy{ font-family:var(--display); font-weight:400; font-style:italic; font-size:clamp(1.15rem,2.8vw,1.5rem); line-height:1.6; color:var(--ink-soft); max-width:34ch; margin:1.1rem auto 0; }

/* ============================================================ SCENE 7 — weekend at a glance */
.glance-lede{ font-family:var(--display); font-weight:400; font-style:italic; font-size:clamp(1.05rem,2.6vw,1.3rem); color:#D9E4DA; max-width:36ch; margin:.8rem auto 0; line-height:1.55; }
.glance-grid{ display:grid; grid-template-columns:1fr; gap:clamp(1.2rem,4vw,1.8rem); max-width:760px; margin:clamp(2.2rem,6vw,3rem) auto 0; }
.glance-card{ text-align:center; padding:clamp(1.6rem,4.5vw,2.3rem) clamp(1.3rem,4vw,2rem); border:1px solid rgba(216,183,104,.42); border-radius:18px; background:linear-gradient(180deg, rgba(255,253,248,.06), rgba(255,253,248,.02)); box-shadow:0 24px 50px -34px rgba(0,0,0,.7); }
.glance-card__tag{ font-family:var(--body); font-weight:600; font-size:.64rem; letter-spacing:.3em; text-transform:uppercase; color:var(--champagne); }
.glance-card__name{ font-family:var(--display); font-weight:500; font-size:clamp(1.5rem,4.8vw,2.1rem); color:#fff; margin:.25rem 0 .55rem; }
.glance-card__when{ font-family:var(--display); font-weight:500; font-size:1.12rem; color:#F3EAD4; }
.glance-card__time{ font-family:var(--body); font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:.82rem; color:var(--champagne); margin-top:.25rem; }
.glance-card__venue{ font-family:var(--display); font-weight:600; font-size:1.18rem; color:#fff; margin-top:.1rem; }
.glance-card__addr{ font-family:var(--body); font-size:.9rem; color:#CFC7AE; margin-top:.3rem; line-height:1.5; }
.glance-card__actions{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:1.5rem; }
/* The Reception — hosted by the groom's family — gets the royal treatment:
   a double gold frame, a champagne glow, a small crest, and a larger title. */
.glance-card--grand{ position:relative; border-color:rgba(216,183,104,.85);
  background:radial-gradient(120% 100% at 50% 0%, rgba(216,183,104,.16), rgba(255,253,248,.03) 58%), linear-gradient(180deg, rgba(255,253,248,.06), rgba(255,253,248,.02));
  box-shadow:0 0 0 1px rgba(216,183,104,.22), 0 0 46px -12px rgba(216,183,104,.45), 0 24px 50px -34px rgba(0,0,0,.7); }
.glance-card--grand::before{ content:""; position:absolute; inset:7px; border:1px solid rgba(216,183,104,.4); border-radius:12px; pointer-events:none; }
.glance-card__crest{ display:grid; place-items:center; width:44px; height:44px; margin:0 auto .7rem; border-radius:50%; border:1px solid rgba(216,183,104,.7); box-shadow:inset 0 0 0 4px rgba(216,183,104,.12); }
.glance-card__crest::after{ content:""; width:11px; height:11px; border:1.5px solid var(--champagne); transform:rotate(45deg); }
.glance-card--grand .glance-card__tag{ color:#EACF8F; }
.glance-card--grand .glance-card__name{ font-size:clamp(1.75rem,5.6vw,2.5rem); background:linear-gradient(100deg,#E6CD86,#C29A45 45%,#EACF8F 75%,#B68A33); -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:.06em; }
.glance-card .cal__menu{ background:#06241B; border-color:rgba(216,183,104,.4); }
.glance-card .cal__menu a{ color:#EFE7D2; }
.glance-card .cal__menu a:hover{ background:rgba(216,183,104,.16); color:#fff; }

/* ============================================================ SCENE 10 — guest mood & hospitality */
.hospitality-copy{ font-family:var(--display); font-weight:400; font-size:clamp(1.12rem,2.7vw,1.42rem); line-height:1.6; color:var(--ink); max-width:40ch; margin:1.1rem auto 0; }
.hospitality-note{ font-family:var(--display); font-style:italic; font-weight:400; font-size:clamp(1.05rem,2.4vw,1.25rem); color:var(--henna-rose); max-width:38ch; margin:1.1rem auto 0; line-height:1.55; }

/* ============================================================ SCENE 11 — transport CTA */
.travel__cta{ margin-top:1.3rem; }

/* ============================================================ SCENE 12 — duas CTA (first-class blessing) */
.rsvp-duas{ margin-top:1.4rem; }
.rsvp-duas__btn{ width:100%; max-width:430px; box-shadow:0 16px 34px -16px rgba(216,183,104,.7); }

/* ============================================================ footer — silent Domogo credit */
.site-credit{ background:var(--emerald-deep); text-align:center; padding:1.4rem 1.25rem calc(env(safe-area-inset-bottom,0px) + 1.6rem); }
.site-credit__link{ display:inline-flex; flex-direction:column; align-items:center; gap:.35rem; text-decoration:none; padding:.7rem 1.3rem; border-radius:16px; transition:background .25s; -webkit-tap-highlight-color:rgba(216,183,104,.25); }
.site-credit__link:hover,.site-credit__link:active{ background:rgba(255,253,248,.06); }
.site-credit__hook{ font-family:var(--display); font-style:italic; font-size:.95rem; color:rgba(233,225,205,.62); }
/* The one FILLED gold pill on the page — the primary action. The concierge
   nudge stays a quiet outline, so the two can never be confused. */
.site-credit__cta{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--body); font-weight:700; font-size:.88rem; letter-spacing:.04em; color:var(--emerald-deep); padding:.72rem 1.5rem; border:none; border-radius:999px; background:var(--foil-light); box-shadow:0 14px 30px -14px rgba(216,183,104,.55); transition:filter .25s, box-shadow .25s; }
.site-credit__arrow{ transition:transform .25s; }
.site-credit__link:hover .site-credit__cta,.site-credit__link:active .site-credit__cta{ filter:brightness(1.06); box-shadow:0 18px 36px -14px rgba(216,183,104,.7); }
.site-credit__link:hover .site-credit__arrow{ transform:translateX(4px); }

/* ============================================================ responsive */
/* Mobile-first: stack RSVP + event actions full-width so each choice is clear */
@media (max-width:560px){
  /* The Malabar interlude holds only two lines — at full screen height it
     reads as a blank page mid-scroll on phones. Keep the breath, not the void. */
  .scene--grand.scene--full{ min-height:72svh; }
  .rsvp-options{ flex-direction:column; align-items:stretch; }
  .rsvp-options .btn{ width:100%; }
  .event-card__actions .btn,
  .event-card__actions .cal,
  .event-card__actions .cal>summary{ width:100%; }
  /* Keep the "Create your own with Domo Invite" CTA clear of the concierge
     card AND the speech-bubble pill docked just above it (both fixed
     bottom-right on phones): the zone covers card + bubble + breathing room. */
  .site-credit{ padding-bottom:calc(env(safe-area-inset-bottom,0px) + 15rem); }
}
@media (min-width:760px){ .events-grid{ grid-template-columns:1fr 1fr; } .glance-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:900px){ .couple-grid{ grid-template-columns:1fr auto 1fr; } .cameo{ width:min(32vw,300px); } .announce__names{ font-size:clamp(3.6rem,7vw,6rem); } }
@media (max-width:360px){ .cd-sep{ display:none; } .countdown-strip{ gap:.4rem; } .cd-unit{ min-width:0; } }

/* Hide the "Powered by ElevenLabs" watermark on the ConvAI widget (premium
   entitlement). disable-banner="true" handles it; this is a CSS fallback. */
elevenlabs-convai::part(branding),
elevenlabs-convai::part(powered-by),
elevenlabs-convai::part(poweredBy),
elevenlabs-convai::part(footer){ display:none !important; }

/* Concierge nudge — a small white SPEECH BUBBLE from the concierge card
   itself: same white as the widget, gold hairline, a little tail pointing
   down at the card. White reads on both emerald and cream scenes, and the
   tail makes it unmistakably the concierge talking — never a page element. */
.concierge-nudge{ position:fixed; right:16px; bottom:calc(env(safe-area-inset-bottom,0px) + 104px); z-index:2147483000; max-width:min(72vw,300px);
  font-family:var(--body); font-weight:600; font-size:.86rem; letter-spacing:.01em; line-height:1.45; text-align:left;
  color:var(--ink); background:#FFFDF8;
  border:1px solid rgba(216,183,104,.55); border-radius:16px; padding:.68rem 1rem;
  box-shadow:0 18px 40px -16px rgba(8,42,33,.5), 0 2px 10px rgba(8,42,33,.12);
  cursor:pointer; opacity:0; transform:translateY(10px); transition:opacity 1s ease, transform 1s ease; touch-action:manipulation; }
.concierge-nudge::before{ content:"\2726"; color:var(--antique-gold); margin-right:.5em; }
/* the tail — points down toward the concierge card */
.concierge-nudge::after{ content:""; position:absolute; right:28px; bottom:-6.5px; width:12px; height:12px; background:#FFFDF8;
  border-right:1px solid rgba(216,183,104,.55); border-bottom:1px solid rgba(216,183,104,.55); transform:rotate(45deg); }
.concierge-nudge.show{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .concierge-nudge{ transition:opacity .3s ease; transform:none; } }

/* The wedding concierge stays hidden, then fades in elegantly a few seconds
   before the music ends (body.assistant-shown set by main.js). We use only
   opacity/visibility — NOT pointer-events — so we never override the widget's
   own click handling (forcing it once made the host swallow page clicks). While
   hidden, visibility:hidden keeps the host non-interactive so links stay live. */
elevenlabs-convai{ opacity:0; visibility:hidden; transition:opacity 1.1s ease; }
body.assistant-shown elevenlabs-convai{ opacity:1; visibility:visible; }

/* ============================================================ touch: no hover
   On touch devices (no real pointer), collapse :hover styles to their base so a
   single tap activates links/buttons instead of the first tap only triggering
   the hover state (iOS "ghost hover" double-tap). Desktop hover is unaffected. */
@media (hover: none){
  .btn--gold:hover,.btn--emerald:hover,.btn--ghost:hover,.btn--on-dark:hover,
  .contact:hover,.music-toggle:hover{ transform:none; filter:none; }
  .btn--emerald:hover{ background:var(--emerald-noir); }
  .btn--ghost:hover{ background:transparent; color:var(--emerald-noir); border-color:var(--antique-gold); }
  .btn--on-dark:hover{ background:transparent; color:var(--champagne); }
  .contact:hover{ background:rgba(255,253,248,.06); }
  .site-credit__link:hover{ background:transparent; }
}