/* base reset */
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
/* ============================================================
   TOKENS — one committed visual world (letterpress invitation):
   wine grounds + ivory paper + champagne-gold ink. Single theme by design.
   ============================================================ */
:root{
  color-scheme: light;
  --wine-950:#1E070D; --wine-900:#2A0B13; --wine-800:#3A0F1B; --wine-700:#521627; --wine-600:#6B2034;
  --gold:#C9A96E; --gold-hi:#E9D6AE; --gold-lo:#9C7B45; --gold-line:rgba(201,169,110,.42);
  --ivory:#FBF6EE; --cream:#F4EBDD; --beige:#E7D9C4; --ink:#2E1A1E; --ink-soft:#6A5054;
  --on-wine:#F3E7D6; --on-wine-soft:rgba(243,231,214,.72);

  --f-ar-display:"Aref Ruqaa","Amiri",serif;
  --f-ar-body:"Amiri","Noto Naskh Arabic","Times New Roman",serif;
  --f-ar-label:"Noto Kufi Arabic","Segoe UI",Tahoma,sans-serif;
  --f-quran:"Amiri Quran","Amiri",serif;
  --f-en-display:"Cormorant Garamond","Cormorant",Georgia,serif;
  --f-en-label:"Marcellus","Cormorant Garamond",Georgia,serif;

  --f-display:var(--f-ar-display); --f-body:var(--f-ar-body); --f-label:var(--f-ar-label);
  --ls-label:0;               /* never letter-space Arabic: it breaks the joins */
  --ease:cubic-bezier(.22,.8,.2,1);
  --gutter:clamp(16px,5vw,56px);
}
html[lang="en"]{ --f-display:var(--f-en-display); --f-body:var(--f-en-display); --f-label:var(--f-en-label); --ls-label:.18em; }

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.lock{overflow:hidden}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--f-body);font-size:18px;line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}
html[lang="en"] body{font-size:19px;line-height:1.65}
a{color:inherit}
:focus-visible{outline:1.5px solid var(--gold);outline-offset:4px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ltr{direction:ltr;unicode-bidi:isolate}
svg{display:block}

/* shared type */
.eyebrow{font-family:var(--f-label);font-size:13px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gold-lo);font-weight:400;margin:0}
.on-wine .eyebrow{color:var(--gold)}
.h2{font-family:var(--f-display);font-weight:400;font-size:clamp(36px,6vw,56px);line-height:1.25;margin:.1em 0 0;text-wrap:balance;color:var(--wine-700)}
html[lang="en"] .h2{font-style:italic;font-weight:500}
.on-wine .h2{color:var(--gold-hi)}
.lede{color:var(--ink-soft);margin:.4em auto 0;max-width:44ch;text-wrap:balance}
.on-wine .lede{color:var(--on-wine-soft)}

/* sections */
.sec{position:relative;padding-inline:var(--gutter);padding-block:clamp(88px,12vw,150px);overflow:hidden;isolation:isolate}
.wrap{max-width:1120px;margin-inline:auto;position:relative}
.head{text-align:center;display:grid;justify-items:center;gap:6px;margin-bottom:clamp(40px,6vw,72px)}
.on-wine{background:var(--wine-900);color:var(--on-wine)}
.paper{background:var(--ivory)}
.paper-2{background:var(--cream)}

/* ============================================================
   MONOGRAM (component rendered by JS)
   ============================================================ */
.mono{overflow:visible;width:100%;height:auto}
.mono .mk,.mono .ms{stroke-opacity:0;stroke-linejoin:round;stroke-linecap:round}
.mono .mf{fill:none;stroke:var(--gold);stroke-width:1.6;opacity:.7}
.mono .mf2{opacity:.35;stroke-dasharray:2 9}
.mono .mshine{pointer-events:none}
/* drawing sequence: hairline outline traces each letter, then the gold ink floods in */
.mono.draw .mk,.mono.draw .ms{fill-opacity:0;stroke-opacity:1;stroke-dasharray:1 1;stroke-dashoffset:1;transition:fill-opacity 1.6s var(--ease),stroke-opacity 1.8s var(--ease)}
.mono.draw .mfr{opacity:0}
.mono.draw.s1 .mk{animation:draw 2.1s cubic-bezier(.45,.05,.3,1) forwards}
.mono.draw.s2 .ms{animation:draw 1.8s cubic-bezier(.45,.05,.3,1) forwards}
.mono.draw.s3 .mk,.mono.draw.s3 .ms{fill-opacity:1;stroke-opacity:0}
.mono.draw.s3 .mfr{animation:fade 1.6s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}

/* ============================================================
   INTRO
   ============================================================ */
#intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(120% 80% at 50% 45%,var(--wine-800) 0%,var(--wine-900) 55%,var(--wine-950) 100%);color:var(--on-wine);text-align:center;padding:24px;
  animation:failsafe .8s ease 9s forwards;transition:opacity 1.1s var(--ease),transform 1.3s var(--ease),filter 1.1s}
#intro.out{opacity:0;transform:scale(1.06);filter:blur(6px);pointer-events:none}
@keyframes failsafe{to{opacity:0;visibility:hidden}}
.intro-in{display:grid;justify-items:center;gap:10px}
.intro-mono{width:min(58vw,250px);filter:drop-shadow(0 0 22px rgba(201,169,110,.18))}
.intro-t{opacity:0;transform:translateY(12px);filter:blur(6px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease),filter 1.2s}
.intro-t.in{opacity:1;transform:none;filter:none}
.intro-label{font-family:var(--f-label);font-size:14px;letter-spacing:var(--ls-label);color:var(--gold);margin-top:18px}
.intro-names{font-family:var(--f-display);font-size:clamp(44px,11vw,76px);line-height:1.2;color:var(--gold-hi)}
.intro-date{direction:ltr;unicode-bidi:isolate;font-family:var(--f-en-label);letter-spacing:.3em;color:var(--on-wine-soft);font-size:14px}
.skip{position:absolute;bottom:calc(24px + env(safe-area-inset-bottom,0px));inset-inline-end:24px;background:none;border:0;color:var(--on-wine-soft);font-family:var(--f-label);font-size:13px;letter-spacing:var(--ls-label);cursor:pointer;padding:10px}
.skip:hover{color:var(--gold-hi)}

/* amp */
.amp{font-family:var(--f-en-display);font-style:italic;font-weight:400;color:var(--gold);font-size:.62em;margin-inline:.18em;vertical-align:.12em}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;top:0;inset-inline:0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .5s,backdrop-filter .5s,box-shadow .5s}
.nav.solid{background:rgba(42,11,19,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--gold-line)}
.nav-in{display:flex;align-items:center;gap:20px;height:64px;padding-inline:var(--gutter);max-width:1240px;margin-inline:auto}
.logo{display:block;width:46px;height:46px;flex:none}
.logo .mono{width:100%;height:100%}
.links{display:none;gap:28px;margin-inline-start:auto;list-style:none;padding:0;margin-block:0}
.links a{font-family:var(--f-label);font-size:14px;letter-spacing:var(--ls-label);text-decoration:none;color:var(--on-wine-soft);position:relative;padding-block:6px;transition:color .3s}
.links a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .45s var(--ease)}
.links a:hover,.links a[aria-current="true"]{color:var(--gold-hi)}
.links a:hover::after,.links a[aria-current="true"]::after{transform:scaleX(1)}
.lang{display:flex;align-items:center;gap:2px;margin-inline-start:auto;border:1px solid var(--gold-line);border-radius:999px;padding:3px}
.lang button{background:none;border:0;border-radius:999px;color:var(--on-wine-soft);cursor:pointer;padding:5px 12px;font-size:13px;line-height:1.4;transition:background .35s,color .35s}
.lang button[lang="ar"]{font-family:var(--f-ar-label)}
.lang button[lang="en"]{font-family:var(--f-en-label);letter-spacing:.08em}
.lang button[aria-pressed="true"]{background:var(--gold);color:var(--wine-900)}
.menu-btn{width:42px;height:42px;display:grid;place-items:center;background:none;border:1px solid var(--gold-line);border-radius:50%;color:var(--gold);cursor:pointer}
.menu-btn span{display:block;width:16px;height:1px;background:currentColor;box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor;transition:.3s}
.menu-btn[aria-expanded="true"] span{box-shadow:none;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{content:"";display:block;width:16px;height:1px;background:currentColor;transform:rotate(90deg)}
.sheet{position:fixed;inset-inline:0;top:0;z-index:49;background:var(--wine-900);padding:calc(84px + env(safe-area-inset-top,0px)) var(--gutter) 40px;transform:translateY(-102%);transition:transform .7s var(--ease);box-shadow:0 20px 50px rgba(0,0,0,.35);border-bottom:1px solid var(--gold-line)}
.sheet.open{transform:none}
.sheet ol{list-style:none;margin:0;padding:0;display:grid;gap:6px;text-align:center}
.sheet a{display:block;font-family:var(--f-display);font-size:30px;color:var(--on-wine);text-decoration:none;padding:6px}
html[lang="en"] .sheet a{font-style:italic}
.sheet a:hover{color:var(--gold-hi)}
.sheet .mono{width:56px;margin:26px auto 0;opacity:.6}
@media (min-width:900px){ .links{display:flex} .lang{margin-inline-start:12px} .menu-btn,.sheet{display:none} }

/* ============================================================
   HERO
   ============================================================ */
.hero{min-height:min(100svh,920px);display:grid;place-items:center;text-align:center;background:
  radial-gradient(70% 55% at 50% 42%,rgba(107,32,52,.95) 0%,rgba(58,15,27,.9) 45%,var(--wine-950) 100%);color:var(--on-wine);padding-block:120px 90px}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero .glow{position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,rgba(30,7,13,.7));z-index:-1}
.arch{position:absolute;left:50%;top:50%;width:min(92vw,500px);height:auto;transform:translate(-50%,-47%);z-index:-1;pointer-events:none}
.arch path{fill:none;stroke:var(--gold);stroke-width:.9;vector-effect:non-scaling-stroke}
.arch .a2{opacity:.4}
.arch .draw-me{stroke-dasharray:1 1;stroke-dashoffset:0}
.hero-in{display:grid;justify-items:center;gap:6px;max-width:560px;will-change:transform}
.hero-mono{width:clamp(150px,40vw,210px);margin-block:-14px -6px}
.hero-label{font-family:var(--f-label);font-size:14px;letter-spacing:var(--ls-label);color:var(--gold);display:flex;align-items:center;gap:14px}
.hero-label::before,.hero-label::after{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.hero-label::after{transform:scaleX(-1)}
.names{font-family:var(--f-display);font-weight:400;font-size:clamp(64px,17vw,132px);line-height:1.15;margin:.05em 0 .02em;color:var(--gold-hi);text-shadow:0 2px 30px rgba(0,0,0,.25);white-space:nowrap}
html[lang="en"] .names{font-style:italic;font-weight:500;font-size:clamp(56px,14vw,118px);letter-spacing:-.01em}
.date{font-family:var(--f-en-label);font-size:clamp(15px,3.6vw,19px);letter-spacing:.32em;color:var(--on-wine);display:flex;align-items:center;gap:.2em;direction:ltr}
.date i{font-style:normal;color:var(--gold);opacity:.8;margin-inline:.35em}
.day{font-family:var(--f-label);font-size:14px;letter-spacing:var(--ls-label);color:var(--on-wine-soft);margin-top:2px}
.tag{font-size:clamp(19px,4.4vw,23px);color:var(--on-wine);margin:18px 0 0;max-width:30ch}
html[lang="en"] .tag{font-style:italic}
.sprig{position:absolute;width:clamp(120px,26vw,230px);height:auto;color:var(--gold);opacity:.55;pointer-events:none;z-index:-1}
.sprig path,.sprig circle{fill:none;stroke:currentColor;stroke-width:.9;vector-effect:non-scaling-stroke}
.hero .sp1{bottom:26px;inset-inline-start:0}
.hero .sp2{top:80px;inset-inline-end:0;transform:scale(-1,-1)}
.cue{position:absolute;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:8px;color:var(--on-wine-soft);font-family:var(--f-label);font-size:12px;letter-spacing:var(--ls-label);text-decoration:none}
.cue span{width:1px;height:38px;background:linear-gradient(var(--gold),transparent);transform-origin:top;animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
/* hero entrance after intro */
.hero.go .hero-label,.hero.go .names,.hero.go .date,.hero.go .day,.hero.go .tag,.hero.go .cue{animation:rise 1.6s var(--ease) backwards}
.hero.go .names{animation-delay:.25s}.hero.go .date{animation-delay:.5s}.hero.go .day{animation-delay:.6s}.hero.go .tag{animation-delay:.8s}.hero.go .cue{animation-delay:1.3s}
.hero.go .arch .draw-me{animation:archdraw 3.2s var(--ease) backwards}
@keyframes rise{from{opacity:0;transform:translateY(22px);filter:blur(8px)}}
@keyframes archdraw{from{stroke-dashoffset:1}}

/* ============================================================
   ORNAMENTS
   ============================================================ */
.divider{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--gold);margin-inline:auto;width:min(100%,340px)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-line))}
.divider::after{transform:scaleX(-1)}
.divider svg{width:18px;height:18px;flex:none}
.divider .mono{width:52px;height:52px}
.watermark{position:absolute;z-index:-1;pointer-events:none;width:min(120vw,900px);left:50%;top:50%;transform:translate(-50%,-50%);opacity:.05}
.watermark .mono{width:100%;height:auto}
.on-wine .watermark{opacity:.06}

/* ============================================================
   VERSE
   ============================================================ */
.verse{text-align:center;padding-block:clamp(110px,14vw,170px)}
.bism{font-family:var(--f-quran);font-size:clamp(24px,5vw,32px);color:var(--wine-700);margin:0 0 30px;line-height:2}
.ayah{font-family:var(--f-quran);font-size:clamp(25px,5.4vw,38px);line-height:2.25;color:var(--ink);margin:0 auto;max-width:24ch;text-wrap:balance;direction:rtl}
.ayah .q{color:var(--gold-lo);font-size:.8em}
.sadaq{font-family:var(--f-quran);font-size:clamp(18px,3.6vw,22px);color:var(--wine-700);margin:26px 0 0}
.ayah-en{font-family:var(--f-en-display);font-style:italic;font-size:19px;color:var(--ink-soft);max-width:44ch;margin:22px auto 0;line-height:1.6;text-wrap:balance}
.ref{font-family:var(--f-label);font-size:13px;letter-spacing:var(--ls-label);color:var(--gold-lo);margin-top:12px}
.verse .frame-top,.verse .frame-bot{width:min(100%,380px);margin-inline:auto;color:var(--gold)}
.verse .frame-top{margin-bottom:34px}.verse .frame-bot{margin-top:40px;transform:scaleY(-1)}
.orn path,.orn circle{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.orn .fill{fill:currentColor;stroke:none}

/* ============================================================
   INVITATION
   ============================================================ */
.card{position:relative;max-width:760px;margin-inline:auto;text-align:center;padding:clamp(48px,8vw,88px) clamp(20px,6vw,72px);background:var(--ivory);border:1px solid var(--gold-line);outline:1px solid var(--gold-line);outline-offset:-10px;box-shadow:0 30px 80px -40px rgba(58,15,27,.35)}
.card .corner{position:absolute;width:64px;height:64px;color:var(--gold)}
.card .c1{top:18px;inset-inline-start:18px}.card .c2{top:18px;inset-inline-end:18px;transform:scaleX(-1)}
.card .c3{bottom:18px;inset-inline-start:18px;transform:scaleY(-1)}.card .c4{bottom:18px;inset-inline-end:18px;transform:scale(-1,-1)}
html[dir="rtl"] .card .c1{transform:scaleX(-1)}html[dir="rtl"] .card .c2{transform:none}
html[dir="rtl"] .card .c3{transform:scale(-1,-1)}html[dir="rtl"] .card .c4{transform:scaleY(-1)}
.inv-lead{font-size:clamp(19px,4.2vw,23px);line-height:2;color:var(--ink);margin:18px auto 0;max-width:30ch;text-wrap:balance}
.inv-verb{font-family:var(--f-display);font-size:clamp(28px,5.5vw,36px);color:var(--wine-700);margin:10px 0 4px}
html[lang="en"] .inv-verb:empty{display:none}
html[lang="en"] .inv-verb{font-size:21px;font-style:italic;font-family:var(--f-en-display)}
.hosts{display:grid;gap:22px;margin:18px auto 22px;max-width:560px}
.host{display:grid;gap:2px}
.host-role{font-family:var(--f-label);font-size:14px;letter-spacing:var(--ls-label);color:var(--gold-lo)}
.host-name{font-family:var(--f-body);font-weight:700;font-size:clamp(23px,5vw,29px);color:var(--wine-700);line-height:1.5}
html[lang="en"] .host-name{font-weight:600}
.host-sep{width:1px;height:28px;background:var(--gold-line);margin-inline:auto}
@media (min-width:700px){.hosts{grid-template-columns:1fr auto 1fr;align-items:center}.host-sep{height:64px}}
.inv-to{font-size:clamp(19px,4.2vw,23px);color:var(--ink);margin:0}
.inv-names{font-family:var(--f-display);font-weight:400;font-size:clamp(58px,14vw,104px);line-height:1.25;color:var(--wine-700);margin:12px 0 4px;white-space:nowrap}
html[lang="en"] .inv-names{font-style:italic;font-weight:500}
.inv-names .amp{color:var(--gold-lo)}
.inv-when{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 18px;margin-top:22px;font-family:var(--f-label);font-size:14px;letter-spacing:var(--ls-label);color:var(--ink-soft)}
.inv-when b{font-weight:400;color:var(--wine-700)}
.inv-when .dot{width:4px;height:4px;background:var(--gold);transform:rotate(45deg)}

/* ============================================================
   COUNTDOWN
   ============================================================ */
.countdown{background:
  radial-gradient(80% 70% at 50% 50%,rgba(107,32,52,.55),transparent 70%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='none' stroke='%23C9A96E' stroke-width='.6' opacity='.16'%3E%3Cpath d='M32 10 L54 32 L32 54 L10 32Z'/%3E%3Cpath d='M16.4 16.4H47.6V47.6H16.4Z'/%3E%3Ccircle cx='32' cy='32' r='5'/%3E%3C/g%3E%3C/svg%3E"),
  var(--wine-900)}
.cd{display:grid;grid-template-columns:repeat(4,1fr);max-width:820px;margin-inline:auto;direction:rtl}
html[lang="en"] .cd{direction:ltr}
.cd-u{display:grid;justify-items:center;gap:6px;padding:10px 4px;position:relative}
.cd-u+.cd-u::before{content:"";position:absolute;inset-inline-start:0;top:18%;bottom:18%;width:1px;background:linear-gradient(transparent,var(--gold),transparent);opacity:.55}
.cd-n{font-family:var(--f-en-display);font-weight:400;font-size:clamp(46px,11vw,96px);line-height:1;color:var(--gold-hi);font-variant-numeric:tabular-nums;display:inline-block;min-width:1.2ch;text-align:center}
html[lang="ar"] .cd-n{font-family:var(--f-ar-body);font-size:clamp(46px,11vw,92px);line-height:1.15}
.cd-n.tick{animation:tick .7s var(--ease)}
@keyframes tick{0%{opacity:.2;transform:translateY(-10px);filter:blur(4px)}100%{opacity:1;transform:none;filter:none}}
.cd-l{font-family:var(--f-label);font-size:13px;letter-spacing:var(--ls-label);color:var(--gold)}
.cd-foot{display:grid;justify-items:center;gap:14px;margin-top:48px;text-align:center}
.cd-foot p{margin:0;color:var(--on-wine-soft);font-size:17px}
.cd-done{font-family:var(--f-display);font-size:clamp(34px,7vw,52px);color:var(--gold-hi);text-align:center;margin:0}
@media (max-width:360px){.cd{grid-template-columns:repeat(2,1fr);row-gap:18px}.cd-u:nth-child(3)::before{display:none}}

/* ============================================================
   SCHEDULE / TIMELINE
   ============================================================ */
.tl{position:relative;max-width:900px;margin-inline:auto;display:grid;gap:44px;--p:0}
.tl-track,.tl-fill{position:absolute;inset-inline-start:31px;top:32px;bottom:32px;width:1px}
.tl-track{background:var(--gold-line)}
.tl-fill{background:linear-gradient(var(--gold-hi),var(--gold),var(--gold-lo));transform-origin:top;transform:scaleY(var(--p));box-shadow:0 0 12px rgba(201,169,110,.6)}
.tl-item{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:22px;position:relative}
.tl-node{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--cream);border:1px solid var(--gold-line);color:var(--gold-lo);transition:border-color .6s,background .6s,color .6s,box-shadow .6s;position:relative;z-index:1}
.tl-node svg{width:34px;height:34px}
.tl-node path,.tl-node circle,.tl-node ellipse{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.tl-node .ic{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease)}
.tl-item.on .tl-node{background:var(--wine-800);border-color:var(--gold);color:var(--gold-hi);box-shadow:0 0 0 6px rgba(201,169,110,.12)}
.tl-item.on .tl-node .ic,.no-js .tl-node .ic{stroke-dashoffset:0}
.tl-time{font-family:var(--f-en-display);font-size:30px;line-height:1.1;color:var(--wine-700);display:flex;align-items:baseline;gap:8px}
.tl-time small{font-family:var(--f-label);font-size:13px;letter-spacing:var(--ls-label);color:var(--gold-lo)}
.tl-what{font-family:var(--f-display);font-size:28px;line-height:1.4;color:var(--ink);margin:2px 0 0}
html[lang="en"] .tl-what{font-style:italic;font-size:27px}
.tl-where{font-size:15px;color:var(--ink-soft);margin:0}
@media (min-width:860px){
  .tl{grid-template-columns:repeat(3,1fr);gap:24px}
  .tl-track,.tl-fill{inset-inline:16.66%;top:32px;bottom:auto;width:auto;height:1px}
  .tl-fill{transform:scaleX(var(--p));transform-origin:right}
  html[dir="ltr"] .tl-fill{transform-origin:left}
  .tl-item{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px}
  .tl-time{justify-content:center}
}

/* ============================================================
   LOCATION JOURNEY
   ============================================================ */
.journey{position:relative;max-width:1080px;margin-inline:auto}
.route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.route path{fill:none;stroke-linecap:round}
.route .r-bg{stroke:var(--gold-line);stroke-width:1;stroke-dasharray:2 6}
.route .r-fg{stroke:url(#routeGrad);stroke-width:1.8;filter:drop-shadow(0 0 4px rgba(201,169,110,.5))}
.stops{display:grid;gap:56px;list-style:none;margin:0;padding:0;position:relative}
.stop{display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:start}
.marker{width:64px;height:64px;position:relative;display:grid;place-items:center}
.marker .pin{width:44px;height:54px;transform:translateY(-4px) scale(.6);opacity:.35;transition:transform .9s var(--ease),opacity .9s}
.marker .pin path.body{fill:var(--wine-800);stroke:var(--gold);stroke-width:1.2}
.marker .pin circle{fill:var(--gold)}
.marker::before{content:"";position:absolute;width:44px;height:44px;border-radius:50%;border:1px solid var(--gold);opacity:0;top:14px}
.stop.on .marker .pin{transform:translateY(-4px) scale(1);opacity:1}
.stop.on .marker::before{animation:pulse 2.8s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.9);opacity:0}}
.s-card{background:var(--ivory);border:1px solid var(--gold-line);padding:26px 24px 24px;position:relative;opacity:.4;transform:translateY(16px);transition:opacity 1s var(--ease),transform 1s var(--ease),box-shadow 1s}
.stop.on .s-card{opacity:1;transform:none}
.s-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.s-ic{width:46px;height:46px;color:var(--gold-lo);flex:none}
.s-ic path,.s-ic circle{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease) .3s}
.stop.on .s-ic path,.stop.on .s-ic circle{stroke-dashoffset:0}
.s-when{font-family:var(--f-label);font-size:13px;letter-spacing:var(--ls-label);color:var(--gold-lo)}
.s-title{font-family:var(--f-display);font-weight:400;font-size:32px;line-height:1.35;color:var(--wine-700);margin:8px 0 2px}
html[lang="en"] .s-title{font-style:italic;font-weight:500}
.s-sub{margin:0;color:var(--ink-soft);font-size:16px;line-height:1.7}
.coords{font-family:var(--f-en-label);font-size:12px;letter-spacing:.08em;color:var(--ink-soft);opacity:.8;margin-top:10px;display:block}
.btn{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:12px 20px;border:1px solid var(--gold);color:var(--wine-700);text-decoration:none;font-family:var(--f-label);font-size:14px;letter-spacing:var(--ls-label);background:linear-gradient(90deg,var(--gold) 0 0) no-repeat;background-size:0 100%;background-position:right;transition:background-size .55s var(--ease),color .4s;min-height:46px}
html[dir="ltr"] .btn{background-position:left}
.btn:hover,.btn:focus-visible{background-size:100% 100%;color:var(--wine-900)}
.btn svg{width:16px;height:16px;flex:none}
.btn svg path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
html[dir="rtl"] .btn .arr{transform:scaleX(-1);transform-box:view-box;transform-origin:center}
/* venue — final destination */
.stop.venue .marker{width:64px;height:64px}
.stop.venue .marker .pin{width:54px;height:66px}
.stop.venue .pin circle{display:none}
.venue-mono{position:absolute;width:32px;top:3px;left:50%;transform:translateX(-50%);opacity:0;transition:opacity 1s .5s}
.stop.venue.on .venue-mono{opacity:1}
.stop.venue .s-card{background:var(--wine-900);color:var(--on-wine);border-color:var(--gold);outline:1px solid var(--gold-line);outline-offset:-8px;padding:32px 28px 30px}
.stop.venue.on .s-card{box-shadow:0 30px 70px -30px rgba(58,15,27,.6),0 0 0 1px rgba(201,169,110,.2)}
.stop.venue .s-title{color:var(--gold-hi);font-size:36px}
.stop.venue .s-sub{color:var(--on-wine-soft)}
.stop.venue .s-when{color:var(--gold)}
.stop.venue .s-ic{color:var(--gold)}
.stop.venue .coords{color:var(--on-wine-soft)}
.stop.venue .place{font-family:var(--f-body);font-weight:700;font-size:21px;color:var(--on-wine);margin:10px 0 0;line-height:1.5}
html[lang="en"] .stop.venue .place{font-weight:600}
.stop.venue .btn{color:var(--gold-hi);border-color:var(--gold)}
.stop.venue .btn:hover,.stop.venue .btn:focus-visible{color:var(--wine-900)}
.burst{position:absolute;inset:-30px;pointer-events:none}
.burst line{stroke:var(--gold);stroke-width:1;stroke-linecap:round;opacity:0}
.stop.venue.celebrate .burst line{animation:ray 1.8s var(--ease) forwards}
.burst circle{fill:var(--gold-hi);opacity:0}
.stop.venue.celebrate .burst circle{animation:spark 2.2s var(--ease) forwards}
@keyframes ray{0%{opacity:0;stroke-dasharray:0 40;stroke-dashoffset:-10}30%{opacity:1}100%{opacity:0;stroke-dasharray:12 40;stroke-dashoffset:-34}}
@keyframes spark{0%{opacity:0;transform:scale(.4)}40%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
.stop.venue.on .marker .pin path.body{filter:drop-shadow(0 0 10px rgba(233,214,174,.55))}
@media (min-width:900px){
  .stops{grid-template-columns:1fr 1fr 1.25fr;gap:28px;align-items:start}
  .stop{grid-template-columns:1fr;justify-items:center;text-align:center;gap:22px}
  .s-top{flex-direction:column;justify-content:center}
  .s-card{width:100%}
  .stop:nth-child(2){margin-top:70px}
  .stop.venue{margin-top:24px}
}

/* ============================================================
   MAP
   ============================================================ */
.mapbox{margin-top:clamp(64px,9vw,110px);background:var(--wine-900);color:var(--on-wine);border:1px solid var(--gold-line);position:relative;overflow:hidden}
.map-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:22px 22px 0}
.map-head h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:28px;color:var(--gold-hi)}
html[lang="en"] .map-head h3{font-style:italic}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:transparent;border:1px solid var(--gold-line);color:var(--on-wine-soft);border-radius:999px;padding:7px 14px;font-family:var(--f-label);font-size:13px;letter-spacing:var(--ls-label);cursor:pointer;transition:.35s;min-height:38px}
.chip:hover{color:var(--gold-hi);border-color:var(--gold)}
.chip[aria-pressed="true"]{background:var(--gold);color:var(--wine-900);border-color:var(--gold)}
.map-stage{position:relative;overflow-x:auto}
#map{width:100%;height:auto;display:block;aspect-ratio:1000/720;touch-action:pan-y;cursor:pointer}
#map .contour{fill:none;stroke:var(--gold);stroke-width:.7;opacity:.14}
#map .road{fill:none;stroke:var(--on-wine);stroke-width:1.2;opacity:.07}
#map .grat{stroke:var(--gold);stroke-width:.5;opacity:.12}
#map .gl{fill:var(--gold);opacity:.5;font-family:"Marcellus",Georgia,serif;font-size:11px;letter-spacing:.06em}
#map .mr-bg{fill:none;stroke:var(--gold);stroke-width:1;stroke-dasharray:2 6;opacity:.35}
#map .mr-fg{fill:none;stroke:url(#mapRouteGrad);stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(201,169,110,.6))}
#map .traveler{fill:var(--gold-hi);filter:drop-shadow(0 0 6px rgba(233,214,174,.9))}
#map .mp{cursor:pointer}
#map .mp .halo{fill:none;stroke:var(--gold);stroke-width:1;transform-box:fill-box;transform-origin:center;animation:mpulse 2.8s ease-out infinite}
#map .mp .body{fill:var(--wine-700);stroke:var(--gold-hi);stroke-width:1.4}
#map .mp.venue .body{fill:var(--gold);stroke:var(--gold-hi)}
#map .mp .core{fill:var(--gold-hi)}
#map .mp.venue .core{fill:var(--wine-900)}
#map .mp text{fill:var(--on-wine);font-size:17px;text-anchor:middle;paint-order:stroke;stroke:var(--wine-900);stroke-width:5px;stroke-linejoin:round}
#map .mp.venue text{fill:var(--gold-hi);font-size:19px}
#map .mp:focus-visible .body{stroke:#fff;stroke-width:2.5}
@keyframes mpulse{0%{transform:scale(.5);opacity:.9}100%{transform:scale(2.2);opacity:0}}
#map .compass path{fill:none;stroke:var(--gold);stroke-width:.9;opacity:.7}
#map .compass .n{fill:var(--gold);opacity:.8}
#map .compass text{fill:var(--gold);font-family:"Marcellus",Georgia,serif;font-size:12px;text-anchor:middle;opacity:.8}
#map .scale line{stroke:var(--gold);stroke-width:1;opacity:.7}
#map .scale text{fill:var(--gold);font-size:12px;opacity:.75}
.map-card{display:grid;gap:4px;padding:18px 22px 24px;border-top:1px solid var(--gold-line);min-height:132px}
.map-card .mc-k{font-family:var(--f-label);font-size:12px;letter-spacing:var(--ls-label);color:var(--gold)}
.map-card .mc-t{font-family:var(--f-display);font-size:26px;color:var(--gold-hi);line-height:1.4}
html[lang="en"] .map-card .mc-t{font-style:italic}
.map-card .mc-s{color:var(--on-wine-soft);font-size:15px;line-height:1.6;margin:0}
.map-card .btn{color:var(--gold-hi);margin-top:12px;justify-self:start}
.map-card .btn:hover,.map-card .btn:focus-visible{color:var(--wine-900)}
.map-card.swap{animation:rise .7s var(--ease)}
.map-note{font-size:13px;color:var(--on-wine-soft);opacity:.8;margin:0;padding:0 22px 20px}
@media (min-width:900px){.map-card{grid-template-columns:1fr auto;align-items:end;column-gap:24px}.map-card .btn{grid-column:2;grid-row:1/4;align-self:center}}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{position:relative;isolation:isolate;overflow:hidden;background:var(--wine-950);color:var(--on-wine);text-align:center;min-height:min(100svh,880px);display:grid;place-items:center;padding-inline:var(--gutter);padding-block:120px calc(90px + env(safe-area-inset-bottom,0px))}
.foot .mono{width:150px;margin:0 auto 20px}
.foot .names{font-size:clamp(48px,11vw,76px)}
.foot .date{justify-content:center;margin-top:6px}
.foot .thanks{margin:30px auto 0;color:var(--on-wine-soft);max-width:34ch;font-size:18px}
html[lang="en"] .foot .thanks{font-style:italic}

/* ============================================================
   REVEAL (only elements below the fold at load are parked)
   ============================================================ */
.rv-wait{opacity:0;transform:translateY(26px);filter:blur(6px)}
.rv-in{transition:opacity 1.3s var(--ease) var(--d,0s),transform 1.3s var(--ease) var(--d,0s),filter 1.3s var(--ease) var(--d,0s)}
.rv-scale.rv-wait{transform:scale(.94)}
main{transition:opacity .35s ease}
main.swap,.nav.swap{opacity:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv-wait{opacity:1;transform:none;filter:none}
}

/* ============================================================
   MUSIC — open button + floating toggle
   ============================================================ */
.enter{position:absolute;left:50%;bottom:calc(15vh + env(safe-area-inset-bottom,0px));transform:translate(-50%,14px);opacity:0;display:inline-flex;align-items:center;gap:12px;
  padding:14px 30px;min-height:52px;border-radius:999px;border:1px solid var(--gold);background:rgba(42,11,19,.55);color:var(--gold-hi);cursor:pointer;
  font-family:var(--f-label);font-size:15px;letter-spacing:var(--ls-label);white-space:nowrap;transition:opacity 1.2s var(--ease),transform 1.2s var(--ease),background .4s,color .4s;
  box-shadow:0 0 0 0 rgba(201,169,110,.35);-webkit-tap-highlight-color:transparent}
.enter.in{opacity:1;transform:translate(-50%,0);animation:breathe 2.8s ease-in-out 1.2s infinite}
.enter:hover,.enter:focus-visible{background:var(--gold);color:var(--wine-900)}
.enter svg{width:20px;height:20px;flex:none}
.enter svg path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 rgba(201,169,110,.35)}50%{box-shadow:0 0 0 12px rgba(201,169,110,0)}}
@media (min-height:760px){.intro-in{margin-bottom:10vh}}

.music{position:fixed;z-index:60;bottom:calc(18px + env(safe-area-inset-bottom,0px));inset-inline-start:18px;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;background:rgba(42,11,19,.82);border:1px solid var(--gold);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.5);transition:transform .4s var(--ease);animation:rise 1s var(--ease) backwards}
.music:hover{transform:scale(1.06)}
.music .bars{display:flex;align-items:flex-end;gap:3px;height:16px}
.music .bars i{display:block;width:2px;height:4px;background:var(--gold-hi);border-radius:1px;transition:height .4s}
.music.playing .bars i{animation:eq 1.1s ease-in-out infinite}
.music.playing .bars i:nth-child(2){animation-delay:.2s}.music.playing .bars i:nth-child(3){animation-delay:.45s}.music.playing .bars i:nth-child(4){animation-delay:.1s}
.music:not(.playing)::after{content:"";position:absolute;width:22px;height:1px;background:var(--gold-hi);transform:rotate(-45deg)}
@keyframes eq{0%,100%{height:4px}50%{height:16px}}


@media (max-width:899px){.s-card .btn{display:flex;width:100%;justify-content:center;text-align:center;padding-inline:14px}}

/* ============================================================
   CINEMATIC BACKDROPS — privacy-safe, pre-blurred photographs
   (the site ships only heavily blurred versions; faces were obliterated before upload)
   layers: photo → tone → vignette → ornaments → content
   ============================================================ */
.cine{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.cine-img{position:absolute;inset:-6%;background-color:transparent;background-size:cover;background-repeat:no-repeat;background-position:var(--pos,50% 50%);
  opacity:0;transform:scale(1.02);transition:opacity 3.4s ease;will-change:opacity,transform;backface-visibility:hidden}
.cine-img.on{opacity:1}
.cine.kb .cine-img{animation:kenburns 30s ease-in-out infinite alternate}
.cine.paused .cine-img{animation-play-state:paused}
@keyframes kenburns{0%{transform:scale(1.02) translate3d(-1.2%,0,0)}100%{transform:scale(1.08) translate3d(1.2%,-.6%,0)}}
.cine-tone,.cine-vig{position:absolute;inset:0}
/* wine sections */
.cine-wine .cine-tone{background:radial-gradient(75% 60% at 50% 45%,rgba(107,32,52,.42) 0%,rgba(52,13,24,.58) 55%,rgba(26,6,11,.84) 100%)}
.cine-wine .cine-vig{background:radial-gradient(120% 90% at 50% 50%,transparent 52%,rgba(14,3,7,.62) 100%)}
.countdown .cine-wine .cine-tone{background:radial-gradient(80% 70% at 50% 50%,rgba(82,22,39,.58),rgba(42,11,19,.76) 72%,rgba(26,6,11,.9))}
/* ivory / cream sections — the photograph is only a warm memory under the paper */
#schedule{--tone:251,246,238}
#location{--tone:244,235,221}
.cine-cream .cine-tone{background:linear-gradient(180deg,rgba(var(--tone),.70),rgba(var(--tone),.78) 55%,rgba(var(--tone),.9))}
.cine-cream .cine-vig{background:radial-gradient(120% 90% at 50% 45%,transparent 45%,rgba(var(--tone),.9) 100%)}
.cine-top{bottom:auto;height:min(115vh,1000px);-webkit-mask-image:linear-gradient(#000 40%,transparent 96%);mask-image:linear-gradient(#000 40%,transparent 96%)}
/* finale — the closing scene of the film */
.cine-finale .cine-tone{background:radial-gradient(70% 60% at 50% 48%,rgba(90,24,42,.32),rgba(42,11,19,.56) 58%,rgba(18,4,8,.9))}
.cine-finale .cine-vig{background:radial-gradient(110% 80% at 50% 50%,transparent 42%,rgba(8,2,4,.78) 100%)}
.foot canvas.motes{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.finale-in{display:grid;justify-items:center;gap:8px;max-width:640px}
.finale-rule{width:1px;height:70px;background:linear-gradient(transparent,var(--gold));margin-bottom:26px;opacity:.8}
.finale-mono{width:clamp(170px,42vw,230px);margin-bottom:14px;filter:drop-shadow(0 0 30px rgba(201,169,110,.18))}
.finale-mono .mono{width:100%;margin:0}
.foot .names{font-size:clamp(56px,13vw,92px)}
.foot .thanks{font-size:clamp(19px,4.2vw,23px);color:var(--on-wine)}

/* pattern × photograph: the gold khatam lattice sits over the photo, softer at the centre where the text lives */
.cine-pat{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='none' stroke='%23C9A96E' stroke-width='.8'%3E%3Cpath d='M48 14 L82 48 L48 82 L14 48Z'/%3E%3Cpath d='M24 24H72V72H24Z'/%3E%3Ccircle cx='48' cy='48' r='9'/%3E%3C/g%3E%3C/svg%3E");background-size:96px 96px;background-position:center;opacity:.2;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 50%,rgba(0,0,0,.45) 0%,#000 100%);mask-image:radial-gradient(70% 60% at 50% 50%,rgba(0,0,0,.45) 0%,#000 100%)}
.cine-cream .cine-pat{opacity:.3}
.cine-finale .cine-pat{opacity:.16}
@media (max-width:600px){.cine-pat{background-size:76px 76px}}