:root{
  --cream:#fbf7f0;
  --cream-warm:#f6eee0;
  --gold:#b8913f;
  --gold-soft:#d7bc82;
  --gold-line:rgba(184,145,63,.45);
  --gold-pale:#efe2c6;
  --ink:#39332b;
  --muted:#6f6456;
  --radius-arch:220px;
}

*{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  color:var(--ink);
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  font-size:17px;
  line-height:1.65;
  background-color:var(--cream-warm);
  background-image:url("pattern.svg");
  background-size:180px 180px;
  -webkit-font-smoothing:antialiased;
}

.page{
  max-width:520px;
  margin:0 auto;
  padding:0 0 40px;
  background:var(--cream);
  background-image:url("pattern.svg");
  background-size:180px 180px;
  box-shadow:0 0 70px rgba(120,95,45,.16);
}

p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }

/* ---------- shared ornament rules ---------- */
.rule{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:18px 0;
  color:var(--gold);
}
.rule::before,
.rule::after{
  content:"";
  height:1px;
  width:100%;
  max-width:96px;
  background:linear-gradient(90deg,rgba(215,188,130,.1),var(--gold-soft));
}
.rule::after{
  background:linear-gradient(270deg,rgba(215,188,130,.1),var(--gold-soft));
}
.rule--tight{ margin:14px 0; }
.rule__dot{
  width:7px; height:7px;
  background:var(--gold);
  transform:rotate(45deg);
  flex:0 0 auto;
}

.eyebrow{
  font-size:12px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold);
  text-align:center;
}
.lede{
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.9;
  color:var(--muted);
  text-align:center;
  margin-top:8px;
}

/* ---------- arch shells ---------- */
.arch{
  position:relative;
  text-align:center;
  border:1px solid var(--gold-line);
  border-radius:var(--radius-arch) var(--radius-arch) 18px 18px;
  background:
    radial-gradient(130% 78% at 50% 0%, #fffdf8 0%, #f9f2e5 58%, #f4e9d8 100%);
  box-shadow:0 22px 44px -34px rgba(90,70,35,.55);
}
.arch::before{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(184,145,63,.28);
  border-radius:calc(var(--radius-arch) - 7px) calc(var(--radius-arch) - 7px) 12px 12px;
  pointer-events:none;
}
.arch::after{
  content:"";
  position:absolute;
  top:18px;
  left:50%;
  width:6px; height:6px;
  margin-left:-3px;
  background:var(--gold);
  transform:rotate(45deg);
  opacity:.8;
}

/* ---------- hero ---------- */
.hero{ padding:26px 14px 6px; }

.arch--hero{
  padding:clamp(30px,8vw,46px) clamp(18px,6vw,34px) 30px;
}

.bismillah{
  font-family:"Amiri","Traditional Arabic",serif;
  font-size:clamp(19px,5.4vw,25px);
  color:var(--gold);
  line-height:1.9;
  text-align:center;
}

.names{
  margin:6px 0 0;
  font-family:"Great Vibes",cursive;
  font-weight:400;
  font-size:clamp(40px,12.5vw,58px);
  line-height:1.05;
  color:var(--gold);
  letter-spacing:.01em;
}
.names .name{ display:block; }
.names__amp{
  display:block;
  font-family:"Great Vibes",cursive;
  font-size:.55em;
  color:var(--gold-soft);
  line-height:1;
  margin:2px 0;
}

.insha{
  margin-top:14px;
  font-size:15px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
}
.insha--sm{
  margin-top:8px;
  font-size:12.5px;
  letter-spacing:.18em;
  color:var(--muted);
}
.place{
  margin-top:14px;
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--muted);
}

.scroll-hint{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:22px;
  font-size:10.5px;
  letter-spacing:.28em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--gold);
  opacity:.9;
}
.scroll-hint svg{ animation:bob 2.2s ease-in-out infinite; }
@keyframes bob{
  0%,100%{ transform:translateY(-1px); }
  50%{ transform:translateY(3px); }
}

/* ---------- day / date line ---------- */
.dayline{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  margin:20px 0 4px;
}
.dayline__side{
  font-size:clamp(10.5px,3vw,12.5px);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
  padding:5px 0;
  border-top:1px solid var(--gold-line);
  border-bottom:1px solid var(--gold-line);
}
.dayline__num{
  font-size:clamp(48px,15vw,66px);
  line-height:.9;
  color:var(--gold);
  font-weight:400;
  font-variant-numeric:lining-nums;
}
.dayline__num--range{ font-size:clamp(36px,11vw,50px); }

/* ---------- countdown ---------- */
.countdown-wrap{
  padding:6px 22px 10px;
  text-align:center;
}
.section-kicker{
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:12px;
}
.countdown{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.cd{
  padding:10px 2px 8px;
  border:1px solid var(--gold-pale);
  border-radius:12px;
  background:linear-gradient(#fffdf8,#f7efe1);
}
.cd__num{
  display:block;
  font-size:clamp(19px,5.6vw,23px);
  color:var(--gold);
  font-variant-numeric:lining-nums;
  line-height:1.2;
}
.cd__lbl{
  display:block;
  font-size:9px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:2px;
}

/* ---------- events ---------- */
.events{ padding:30px 16px 0; }
.section-title{
  font-family:"Great Vibes",cursive;
  font-weight:400;
  font-size:clamp(32px,9vw,42px);
  color:var(--gold);
  text-align:center;
  margin:0;
  line-height:1.2;
}
.section-title--sm{
  font-size:clamp(26px,7.4vw,34px);
  margin-top:10px;
  color:var(--ink);
}

.card{
  padding:46px clamp(16px,5vw,26px) 28px;
  margin:0 0 26px;
}

.card__title{
  font-family:"Great Vibes",cursive;
  font-size:clamp(34px,10vw,44px);
  color:var(--gold);
  line-height:1.15;
}
.card__sub{
  margin-top:6px;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.85;
  color:var(--muted);
}
.card__rasm{ color:var(--ink); }
.card__name{
  font-family:"Great Vibes",cursive;
  font-size:clamp(30px,9vw,38px);
  color:var(--gold);
  margin-top:6px;
  line-height:1.2;
}

.times{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin:20px 0 18px;
  padding:6px 0;
}
.times::before{
  content:"";
  position:absolute;
  left:50%;
  top:4%;
  bottom:4%;
  width:1px;
  background:linear-gradient(rgba(215,188,130,0),var(--gold-soft),rgba(215,188,130,0));
}
.time{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:0 4px;
}
.time__lbl{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
}
.time__val{
  font-size:16px;
  letter-spacing:.06em;
  color:var(--ink);
  font-variant-numeric:lining-nums;
}

.venue{ margin-top:4px; }
.venue__name{
  font-family:"Great Vibes",cursive;
  font-size:clamp(25px,7.4vw,31px);
  color:var(--gold);
  line-height:1.35;
}
.venue__addr{
  margin-top:4px;
  font-size:11.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  line-height:1.9;
  color:var(--ink);
}

.btn{
  display:inline-block;
  margin-top:16px;
  padding:10px 22px;
  border-radius:999px;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--gold);
  color:var(--gold);
  background:transparent;
  transition:background .3s ease,color .3s ease,box-shadow .3s ease;
}
.btn:hover,
.btn:focus-visible{
  background:var(--gold);
  color:#fffdf8;
  box-shadow:0 10px 22px -14px rgba(120,90,30,.9);
  outline:none;
}
.btn--solid{
  background:var(--gold);
  color:#fffdf8;
}
.btn--solid:hover,
.btn--solid:focus-visible{
  background:#a17c30;
  border-color:#a17c30;
}

.btn--save{ margin-top:20px; }
.btn-hint{
  margin-top:8px;
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

.note{
  margin-top:16px;
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- rsvp panels ---------- */
.panel{
  margin:14px 16px 22px;
  padding:30px clamp(16px,5vw,26px) 30px;
  text-align:center;
  border:1px solid var(--gold-line);
  border-radius:18px;
  background:linear-gradient(#fffdf8,#f8f1e4);
  box-shadow:0 18px 40px -34px rgba(90,70,35,.5);
}
.panel--plain{
  background:transparent;
  border-style:dashed;
  box-shadow:none;
}

.hosts li{
  font-size:14.5px;
  letter-spacing:.05em;
  line-height:2.05;
  color:var(--ink);
}
.contact-label{
  margin-top:22px;
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
}
.contacts{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-top:12px;
}
.contacts .btn{ margin-top:0; width:100%; max-width:280px; }

.names-list{
  font-size:14px;
  line-height:2.1;
  letter-spacing:.03em;
  color:var(--muted);
  margin-top:12px;
}

/* ---------- footer ---------- */
.footer{
  padding:22px 20px 10px;
  text-align:center;
}
.footer__names{
  font-family:"Great Vibes",cursive;
  font-size:26px;
  color:var(--gold);
}
.footer__meta{
  margin-top:6px;
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  opacity:.85;
}

/* ---------- reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .9s ease,transform .9s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .scroll-hint svg{ animation:none; }
}

@media (min-width:520px){
  .page{ border-left:1px solid rgba(184,145,63,.2); border-right:1px solid rgba(184,145,63,.2); }
}

/* ---------- splash / cover (photo, reel style) ---------- */
body.is-locked{ overflow:hidden; }

.splash{
  position:fixed;
  inset:0;
  z-index:70;
  display:grid;
  place-items:center;
  padding:24px 18px;
  overflow:hidden;
  background:#2b1d12;
  color:#4b3524;
  transition:opacity .9s ease, transform .9s ease;
}
.splash.is-done{ display:none; }
.splash.is-opening{ opacity:0; transform:scale(1.08); pointer-events:none; }

.splash__photo{
  position:absolute;
  inset:0;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  transform-origin:50% 42%;
  animation:kenburns 24s ease-out both;
}
.splash__photo--a{ background-image:url("lake-arch.jpg"); }
.splash__photo--b{
  background-image:url("colonnade.jpg");
  opacity:0;
  animation:kenburns 24s ease-out both, photoSwap 10.5s ease-in-out both;
}

.splash__veil{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(115% 70% at 50% 38%, rgba(43,29,18,0) 42%, rgba(43,29,18,.26) 100%),
    linear-gradient(180deg, rgba(43,29,18,.28) 0%, rgba(43,29,18,0) 26%, rgba(43,29,18,.04) 62%, rgba(43,29,18,.5) 100%);
}

.splash__inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:382px;
  animation:splashIn 1.2s cubic-bezier(.2,.7,.28,1) both .15s;
}
/* soft parchment glow so the type reads over the photograph */
.splash__inner::before{
  content:"";
  position:absolute;
  left:-14%;
  right:-14%;
  top:-10%;
  bottom:-8%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,250,240,.72), rgba(255,250,240,.34) 55%, rgba(255,250,240,0) 82%);
  filter:blur(18px);
  pointer-events:none;
}
.splash__frame{
  position:relative;
  display:grid;
  place-items:center;
  min-height:clamp(360px,64vh,540px);
  text-align:center;
}

.scene{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:4px;
}
.scene--1{ animation:sceneOne 10.5s ease-in-out both; }
.scene--2{ animation:sceneTwo 10.5s ease-in-out both; }
.scene--3{ animation:sceneThree 10.5s ease-in-out both; }

.splash .bismillah{
  font-family:"Amiri",serif;
  font-size:clamp(20px,5.6vw,27px);
  line-height:1.9;
  color:#4b3524;
  text-shadow:0 1px 14px rgba(255,248,235,.55);
}
.splash__arabic{
  margin-top:6px;
  font-family:"Amiri",serif;
  font-size:clamp(21px,5.8vw,28px);
  color:#6f4f26;
  text-shadow:0 1px 14px rgba(255,250,240,.85);
}
.splash__verse{
  margin-top:12px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:#2d1d0f;
  text-shadow:0 1px 14px rgba(255,250,240,.95);
}
.splash__invite{
  font-size:11px;
  font-weight:700;
  letter-spacing:.24em;
  line-height:2.1;
  text-transform:uppercase;
  color:#2d1d0f;
  text-shadow:0 1px 14px rgba(255,250,240,.95);
}
.splash__couple{
  margin-top:14px;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;
  font-weight:500;
  font-size:clamp(32px,9vw,44px);
  font-weight:700;
  line-height:1.22;
  color:#2a1b0d;
  text-shadow:0 2px 22px rgba(255,250,240,.9);
}
.splash__couple em{
  font-family:"Great Vibes",cursive;
  font-style:normal;
  font-size:.72em;
  color:#8a672e;
  padding:0 2px;
}
.splash__dateband{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  margin-top:18px;
  width:100%;
  max-width:286px;
}
.splash__dateband .side{
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#241608;
  font-weight:700;
  border-top:1px solid rgba(36,22,8,.6);
  border-bottom:1px solid rgba(36,22,8,.6);
  padding:4px 0;
  text-shadow:0 1px 12px rgba(255,250,240,.95);
}
.splash__dateband .num{
  font-size:clamp(26px,7.4vw,34px);
  font-weight:700;
  color:#63431a;
  letter-spacing:.02em;
  text-shadow:0 2px 18px rgba(255,250,240,.95);
}
.splash__blessing{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;
  font-size:clamp(25px,7.2vw,33px);
  font-weight:700;
  line-height:1.32;
  color:#241608;
  text-shadow:0 2px 22px rgba(255,250,240,.9);
}
.splash__bless{
  margin-top:12px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.22em;
  line-height:2.1;
  text-transform:uppercase;
  color:#2d1d0f;
  text-shadow:0 1px 14px rgba(255,250,240,.95);
}
.splash__open{
  margin-top:24px;
  padding:13px 30px;
  border-radius:999px;
  border:1px solid rgba(67,48,31,.75);
  background:rgba(67,48,31,.9);
  color:#fdf6ea;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:11.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  cursor:pointer;
  animation:pulseGlow 3.4s ease-in-out infinite;
  transition:background .3s ease,color .3s ease;
}
.splash__open:hover,
.splash__open:focus-visible{ background:#5a4028; outline:none; }
.splash__hint{
  margin-top:12px;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#2d1d0f;
  text-shadow:0 1px 12px rgba(255,250,240,.95);
}

/* hero rises in once the cover is dismissed */
.is-open .arch--hero > *{ animation:riseIn .95s cubic-bezier(.2,.7,.28,1) both; }
.is-open .arch--hero > *:nth-child(1){ animation-delay:.05s; }
.is-open .arch--hero > *:nth-child(2){ animation-delay:.12s; }
.is-open .arch--hero > *:nth-child(3){ animation-delay:.2s; }
.is-open .arch--hero > *:nth-child(4){ animation-delay:.28s; }
.is-open .arch--hero > *:nth-child(5){ animation-delay:.36s; }
.is-open .arch--hero > *:nth-child(6){ animation-delay:.46s; }
.is-open .arch--hero > *:nth-child(7){ animation-delay:.54s; }
.is-open .arch--hero > *:nth-child(8){ animation-delay:.64s; }
.is-open .arch--hero > *:nth-child(9){ animation-delay:.72s; }
.is-open .arch--hero > *:nth-child(10){ animation-delay:.8s; }
.is-open .arch--hero > *:nth-child(11){ animation-delay:.9s; }

@keyframes splashIn{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:none; }
}
@keyframes riseIn{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:none; }
}
@keyframes pulseGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(67,48,31,.28); }
  50%{ box-shadow:0 0 0 12px rgba(67,48,31,0); }
}
@keyframes kenburns{
  from{ transform:scale(1.02); }
  to{ transform:scale(1.1); }
}
@keyframes photoSwap{
  0%,52%{ opacity:0; }
  72%,100%{ opacity:1; }
}
@keyframes sceneOne{
  0%{ opacity:0; transform:translateY(12px); }
  8%,24%{ opacity:1; transform:none; }
  32%,100%{ opacity:0; transform:translateY(-10px); }
}
@keyframes sceneTwo{
  0%,26%{ opacity:0; transform:scale(.98); }
  34%,56%{ opacity:1; transform:none; }
  64%,100%{ opacity:0; transform:translateY(-10px); }
}
@keyframes sceneThree{
  0%,56%{ opacity:0; transform:translateY(14px); }
  66%,100%{ opacity:1; transform:none; }
}

/* tapping before the sequence ends jumps straight to the cover */
.splash.is-skip .scene--1,
.splash.is-skip .scene--2{ animation:none; opacity:0; }
.splash.is-skip .scene--3{ animation:none; opacity:1; transform:none; }

/* ---------- music toggle ---------- */
.music-toggle{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:60;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--gold-line);
  background:#fffdf8;
  color:var(--gold);
  cursor:pointer;
  box-shadow:0 14px 28px -18px rgba(90,70,35,.85);
  transition:transform .25s ease,background .25s ease;
}
.music-toggle[hidden]{ display:none; }
.music-toggle:hover{ transform:scale(1.05); }
.music-toggle svg{ width:19px; height:19px; }
.music-toggle .icon-off{ display:none; }
.music-toggle.is-muted .icon-on{ display:none; }
.music-toggle.is-muted .icon-off{ display:block; }

@media (prefers-reduced-motion:reduce){
  .scene--1,.scene--2{ display:none; }
  .scene--3{ animation:none; opacity:1; }
  .splash__photo{ animation:none; transform:none; }
  .splash__inner,
  .splash__open{ animation:none; }
  .is-open .arch--hero > *{ animation:none; }
}

@media (max-height:700px){
  .splash{ padding:14px; }
  .splash__frame{ min-height:300px; }
  .splash__couple{ font-size:clamp(26px,7.4vw,34px); }
  .splash__blessing{ font-size:clamp(21px,6.2vw,27px); }
  .splash__open{ margin-top:18px; padding:11px 26px; }
}