:root{
  /* Base */
  --bg: #fffef9;

  /* Dusty rose text like your screenshot */
  --rose: #9b6459;
  --rose2: rgba(155,100,89,0.78); /* softer */
  --rose3: rgba(155,100,89,0.55); /* faint */
  --line: rgba(155,100,89,0.22);

  /* One font everywhere */
  --font: "Cormorant Garamond", ui-serif, Georgia, serif;
}

*{ box-sizing:border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--rose);
  font-family: var(--font);
  font-weight: 400;
}

/* =========================
   Background frames (if used)
   ========================= */
.bgStack{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--bg);
}

/* If you keep photo frames, this makes them feel “paper + airy” */
.bgImg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;

  opacity: 0;
  transition: opacity 700ms ease;

  transform: scale(1.02);
  /* Wash photos so they match the light invitation vibe */
  filter: brightness(1.18) contrast(0.90) saturate(0.85);
}

.bgImg.frame2{ object-position: 50% 40%; }
.bgImg.isOn{ opacity: 1; }

/* IMPORTANT: no overlay (you asked to remove it) */
/* .bgStack::after removed on purpose */


/* =========================
   Snap layout
   ========================= */
.snap{
  height: 100svh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;

  position: relative;
  z-index: 2;
}

.panel{
  min-height: 100svh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 110px 22px 80px;
}

.inner{
  width: min(920px, 100%);
  text-align: center;
}

/* =========================
   Minimal top header (chips)
   ========================= */
.top{
  position: fixed;
  inset: 18px 18px auto 18px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.mark, .rsvpTop{
  pointer-events: auto;
  text-decoration: none;

  font-family: var(--font);
  letter-spacing: 2px;
  font-weight: 400;
  font-size: 13px;

  color: var(--rose);
  padding: 10px 12px;
  border-radius: 2px;

  border: 1px solid var(--line);
  background: rgba(255,254,249,0.85);
  backdrop-filter: blur(8px);
}

/* =========================
   Dot nav
   ========================= */
.dots{
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 40;
}

.dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(155,100,89,0.08);
}

.dot.active{
  background: var(--rose);
  border-color: var(--rose);
  box-shadow: 0 0 0 5px rgba(155,100,89,0.14);
}

/* =========================
   Typography (invitation style)
   ========================= */
.kicker{
  font-family: var(--font);
  color: var(--rose2);
  font-weight: 400;
  letter-spacing: 2px;
  font-size: 14px;
  margin: 0 0 12px;
}

.names{
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: 3px;
  line-height: 1.05;
  margin: 0 0 12px;
  font-size: clamp(46px, 6vw, 84px);
  text-transform: uppercase;
  color: var(--rose);
}

.amp{
  font-weight: 400;
  color: var(--rose);
  margin: 0 12px;
}

.date{
  margin: 0 0 22px;
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: 2px;
  font-size: 16px;
  color: var(--rose2);
  text-transform: uppercase;
}

h2{
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: 3px;
  font-size: clamp(34px, 4.4vw, 54px);
  margin: 0 0 18px;
  text-transform: uppercase;
  color: var(--rose);
}

.copy{
  margin: 0 auto 12px;
  max-width: 78ch;
  font-family: var(--font);
  font-weight: 400;
  color: var(--rose2);
  line-height: 1.85;
  font-size: 17px;
}

.copy.subtle{
  color: var(--rose3);
}

.miniTitle{
  margin: 22px 0 6px;
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: 2px;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--rose);
}

.rule{
  height: 1px;
  width: min(560px, 100%);
  margin: 18px auto;
  background: var(--line);
}

/* =========================
   Lines (Event/Travel rows)
   ========================= */
.line{
  margin: 14px auto;
  width: min(760px, 100%);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  text-align: left;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.label{
  min-width: 180px;
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--rose);
}

.value{
  flex: 1;
  text-align: right;
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--rose2);
}

/* =========================
   Countdown
   
   ========================= */


#countdown[hidden] { display: none !important; }

.count{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 50px 0 22px;

  font-family: var(--font);
  letter-spacing: 2px;
  font-weight: 400;
  color: var(--rose2);
  text-transform: uppercase;
}

.count b{
  color: var(--rose);
  font-variant-numeric: tabular-nums;
  font-size: 1.1em;
}

.sep{ opacity: 0.55; }

/* =========================
   Buttons (like screenshot)
   ========================= */
.links{
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn{
  appearance: none;
  cursor: pointer;
  text-decoration: none;

  font-family: var(--font);
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 12px;

  padding: 14px 34px;
  border-radius: 2px;

  border: 1px solid rgba(155,100,89,0.30);
  background: var(--rose);
  color: var(--bg);

  transition: transform 180ms ease, background 180ms ease;
}

.btn:hover{
  background: #845248;
  transform: translateY(-1px);
}

.btn:active{ transform: translateY(0px); }

.btn.ghost{
  background: transparent;
  color: var(--rose);
  border: 1px solid rgba(155,100,89,0.35);
}

.btn.ghost:hover{
  background: rgba(155,100,89,0.06);
}

/* =========================
   Notes / Footer / Hint
   ========================= */
.note{
  margin: 18px auto 0;
  max-width: 70ch;
  font-family: var(--font);
  letter-spacing: 1px;
  color: var(--rose2);
  font-size: 17px;
  line-height: 1.8;
}

.note.subtle{ color: var(--rose3); }

.hint{
  margin-top: 40px;
  font-family: var(--font);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--rose3);
}

.footer{
  margin-top: 24px;
  font-family: var(--font);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--rose3);
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 760px){
  .line{
    flex-direction: column;
    text-align: center;
    gap: 6px;
  }
  .label{ min-width: auto; }
  .value{ text-align: center; }
  .dots{ right: 10px; }
  .names{ letter-spacing: 2px; }
}

.announce{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;

  background: #9b6459;
  color: #fffef9;

  font-family: var(--font);
  letter-spacing: 1px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;

  padding: 16px 20px;
  text-align: center;
}

/* push your fixed header and panels down so nothing hides under the bar */
.top{ top: 64px; inset: 82px 18px auto 18px; } /* safe spacing */
.panel{ padding-top: 150px; }

@media (max-width: 760px){
  .announce{ font-size: 12px; padding: 12px 14px; }
  .top{ inset: 70px 14px auto 14px; }
  .panel{ padding-top: 140px; }
}

/* Floral background layer */
.florals{
  position: fixed;
  inset: 0;
  z-index: 1;          /* above base bg, below content */
  pointer-events: none;
  overflow: hidden;
  background: #fffef9;
}

.floral{
  position: absolute;
  width: min(680px, 55vw);
  height: auto;
  opacity: 0.95;
  transition: transform 900ms ease, opacity 900ms ease;
  will-change: transform, opacity;
}

/* Default placements (scene-home baseline) */
.f1{
  top: 80px;   /* below the announce bar */
  right: -40px;
  transform: translate(0,0) scale(1);
}

.f2{
  bottom: -80px;
  left: -60px;
  width: min(520px, 45vw);
  opacity: 0.35;
  transform: translate(0,0) scale(1);
}

.f3{
  top: 180px;
  left: -120px;
  width: min(420px, 40vw);
  opacity: 0.22;
  transform: translate(0,0) scale(1);
}

/* Keep your content above florals */
.snap{ position: relative; z-index: 5; }
.top, .dots{ z-index: 50; }

/* ===== Scene variations (changes each scroll section) ===== */
body.scene-home .f1{ transform: translate(0,0) scale(1); opacity: 0.95; }
body.scene-home .f2{ transform: translate(0,0) scale(1); opacity: 0.35; }
body.scene-home .f3{ transform: translate(0,0) scale(1); opacity: 0.22; }

/* EVENTS: florals drift slightly, more visible */
body.scene-events .f1{ transform: translate(-18px, 8px) scale(1.02); opacity: 0.98; }
body.scene-events .f2{ transform: translate(20px, -18px) scale(1.06); opacity: 0.45; }
body.scene-events .f3{ transform: translate(35px, 10px) scale(1.03); opacity: 0.28; }

/* DRESS: add “bloom” feel */
body.scene-dress .f1{ transform: translate(-35px, 18px) scale(1.06); opacity: 1; }
body.scene-dress .f2{ transform: translate(45px, -26px) scale(1.10); opacity: 0.52; }
body.scene-dress .f3{ transform: translate(60px, 22px) scale(1.06); opacity: 0.32; }

/* TRAVEL: calm down, drift to new positions */
body.scene-travel .f1{ transform: translate(-12px, -8px) scale(1.02); opacity: 0.92; }
body.scene-travel .f2{ transform: translate(70px, -34px) scale(1.12); opacity: 0.40; }
body.scene-travel .f3{ transform: translate(10px, 40px) scale(1.03); opacity: 0.24; }

/* RSVP: “finale” — strongest bloom */
body.scene-rsvp .f1{ transform: translate(-55px, 25px) scale(1.08); opacity: 1; }
body.scene-rsvp .f2{ transform: translate(90px, -50px) scale(1.18); opacity: 0.60; }
body.scene-rsvp .f3{ transform: translate(80px, 55px) scale(1.10); opacity: 0.38; }

/* Mobile adjustments */
@media (max-width: 760px){
  .floral{ width: min(520px, 72vw); }
  .f2{ width: min(420px, 65vw); }
  .f3{ width: min(340px, 58vw); }
}

@media (max-width: 760px){
  .top{
    inset: 92px 14px auto 14px; /* pushes the top buttons down */
  }
}

@media (max-width: 760px){
  .top{
    top: 64px;      /* below the announce bar */
    left: 14px;
    right: 14px;
  }
}

body.pre-reveal {
  overflow: hidden;
}


/* optional fade after reveal */
body.revealed main,
body.revealed #app {
  opacity: 1;
}

/* ===== Curtain VIDEO overlay ===== */
.curtainVideo{
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: auto;
  background: transparent;
  opacity: 1;
  transition: opacity 900ms ease;
}

.curtainVideo__vid{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
}

/* when "opening" (user clicked) */

.curtainVideo.open{
  opacity: 0;
}

/* prompt stays on top */
.curtainVideo .curtain__prompt{
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 14px 18px;
  border-radius: 999px;
  font-family: "Cormorant Garamond", serif;
  font-size: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.95);
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
  cursor: pointer;
  user-select: none;
}

/* hide prompt after open */
.curtainVideo.open .curtain__prompt{
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.98);
  transition: opacity 200ms ease, transform 200ms ease;
}

body.pre-reveal { overflow: hidden; }
body.pre-reveal main { opacity: 0; transition: opacity 500ms ease; }
body.revealed main { opacity: 1; }


/* ===== Teatro-style hero layout (HOME only) ===== */
.panel.hero{
  padding: 0;                 /* override .panel padding */
  min-height: 100svh;
  display: grid;
  place-items: center;
  position: relative;
}

.hero__inner{
  width: min(900px, 92vw);
  text-align: center;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 150px 0 70px;
}

.hero__topline{
  margin: 40px 0 18px;
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 80px; /* increase this (ex: 50px, 60px) */
}

.hero__names{
  margin: 0;
  font-family: var(--font);          /* same as your site */
  font-weight: 400;
  letter-spacing: 3px;               /* same as .names */
  line-height: 1.05;                 /* same as .names */
  font-size: clamp(46px, 6vw, 84px); /* same as .names */
  text-transform: uppercase;         /* same as .names */
  color: #fff;
  margin-bottom: 40px; /* try 60px–140px */
}


.hero__amp{
  font-size: 0.55em;
  vertical-align: middle;
}

.hero__bottomline{
  margin: 0;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.7;
  align-self: end;
  max-width: 95ch;
  justify-self: center;
  margin-bottom: 24px
}

.hero__scroll{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  display: grid;
  gap: 6px;
  justify-items: center;
}

.hero__arrow{
  font-size: 14px;
}

/* =========================
   REVEAL (Scratch) Sectiong
   ========================= */

.panel.reveal{
  padding: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
}

.reveal__inner{
  width: min(980px, 92vw);
  text-align: center;
  padding: 140px 0 70px; /* room for your announce/header */
}

.reveal__hint{
  margin: 15;
  min-width: 180px;
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--rose);
}

.reveal__title{
  margin: 15;
  min-width: 180px;
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--rose);

}

.reveal__subtitle{
  margin: 15;
  min-width: 180px;
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--rose);
}

/* FORCE ONE ROW (desktop + mobile) */
.reveal__circles{
   margin-top: 50px; /* adjust this value */
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap; /* IMPORTANT: no wrapping into triangle */
}

/* The circle size is controlled ONLY here */
.scratch{
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  overflow: hidden; /* keeps scratch inside perfectly */
}

.scratch__under{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  z-index: 1; 
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--rose);
  font-size: 22px;

  border: 8px solid rgba(255,255,255,0.95);
  box-shadow: 0 20px 40px rgba(0,0,0,.08);
  background: rgba(255,255,255,0.45);
}

.scratch__canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  touch-action: none;
  z-index: 2; 
  cursor: grab;
}

.scratch.done .scratch__canvas{
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.reveal__done{
  margin: 26px 0 14px;
  color: var(--rose2);
  letter-spacing: 1px;
}

/* Mobile: keep 3 in a row + shrink circles so they fit */
@media (max-width: 760px){
  .reveal__circles{
    gap: 12px;
  }

  .scratch{
    width: 108px;     /* <-- change this if you want bigger/smaller */
    height: 108px;
  }

  .scratch__under{
    border-width: 7px;
    font-size: 16px;
    letter-spacing: 2px;
  }
}


.reveal__married{
  margin: 50px 0 0;
  font-family: var(--font);
  color: var(--rose);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 16px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 350ms ease, transform 350ms ease;
   position: relative;
  z-index: 10;
}

.reveal__married.show{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   GIFTS panel
   ========================= */
.gifts{
  text-align: center;
}

.gifts__kicker,
.gifts__subkicker{
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--rose2);
}

.gifts__icon{
  display: block;
  margin: 6px auto 18px;
  width: 86px;          /* adjust */
  height: auto;
  opacity: 0.95;
}

.gifts__title{
  margin: 0 0 18px;
}

.gifts__copy{
  max-width: 62ch;
}

.gifts__love{
  margin: 44px 0 34px;
  font-family: var(--font);
  font-size: clamp(26px, 3.5vw, 38px);
  letter-spacing: 1px;
  color: var(--rose);
}

.gifts__box{
  width: min(520px, 92%);
  margin: 12px auto 0;
  padding: 20px 18px;
  border: 1px solid rgba(155,100,89,0.35);
  background: rgba(255,254,249,0.75);
}

.gifts__box p{
  margin: 10px 0;
  color: var(--rose2);
  letter-spacing: 1px;
}

.gifts__box b{
  color: var(--rose);
  letter-spacing: 2px;
  font-weight: 600;
}

/* ===== Home-only video background ===== */
.panel.hero{
  position: relative;   /* needed so video stays inside home only */
  overflow: hidden;     /* crops video nicely */
}

.homeVideo{
  position: absolute;
  inset: 0;
  z-index: 0;           /* behind hero content */
  pointer-events: none;
}

.homeVideo__vid{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* keep all hero content above the video */
.hero__inner{
  position: relative;
  z-index: 2;
}

/* optional: soften video so text stays readable */
.homeVideo::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0,0,0,0.18); /* was 0.18 */
}
  /*background: rgba(255,254,249,0.25); /* tweak or remove */


/* =========================
   LAST PAGE: Night skyline hero
   ========================= */
.panel.nightHero{
  padding: 0;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;

}

/* soft dark overlay so white text reads well */
.panel.nightHero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 0;
}

/* subtle star speckle overlay (no image needed) */
.panel.nightHero::after{
  content:"";
  position:absolute;
  inset:0;
  opacity: .35;
  z-index: 0;
  pointer-events: none;
}

.nightHero__inner{
  position: relative;
  z-index: 1;
  width: min(980px, 92vw);
  text-align: center;
  padding: 160px 0 90px; /* room for your top header */
  color: #fff;
}

.nightHero__kicker{
  margin: 0 0 18px;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .9;
}

.nightHero__names{
  margin: 0 0 12px;
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: none; /* change to uppercase if you want */
  font-size: clamp(44px, 5.2vw, 84px); 
  color: #fff;
  text-transform: uppercase;
}

.nightHero__meta{
  margin: 0 0 26px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 18px;
  opacity: .85;
   color: #fff;
}

.nightHero__arabic{
  margin: 14px 0 10px;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.35;
  color: #fff;
  text-align: center;
  direction: rtl;
  unicode-bidi: isolate;
  letter-spacing: 0;              /* important for Arabic */
  font-weight: 400;
  text-shadow: 0 2px 10px rgba(0,0,0,0.22);
  font-family: "Noto Naskh Arabic", "Amiri", "Scheherazade New", serif;
}

.nightHero__quote{
  margin: 0 0 40px;
  font-size: 14px;
  letter-spacing: 1px;
  opacity: .85;
}

.nightHero__links{
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Make the fixed header buttons readable on this dark page */
body.scene-final .mark,
body.scene-final .rsvpTop{
  color: var(--rose);
  
}

/* =========================
   LAST PAGE video background
   ========================= */
#final{
  position: relative;
  overflow: hidden;
}

.finalVideo{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.finalVideo__vid{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* FINAL page readability overlay (THIS is what makes white text readable) */
#final::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
   rgba(0,0,0,.18),
    rgba(0,0,0,.08) 40%,
    rgba(0,0,0,.22)
  );
}

/* keep your text above the video */
#final .nightHero__inner{
  position: relative;
  z-index: 2;
}

/* make sure panels can truly fill the screen */
.panel{
  width: 100%;
}

/* final must always be full viewport height */
#final{
  min-height: 100svh;
  width: 100%;
}


#reveal{
  position: relative;
  overflow: hidden;
}

.reveal__inner{
  position: relative;
  z-index: 2; /* content layer */
}

.confettiFx{
  position: absolute;
  inset: 0;
  z-index: 999;          /* ✅ force above reveal content */
  pointer-events: none;
  opacity: 0;
  transition: opacity 250ms ease;
}

.confettiFx.on{ opacity: 1; }

.confettiFx__vid{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quoteItalic{
  font-style: italic;
}

/* =========================
   Envelope intro overlay
   ========================= */
/* =========================
   Envelope intro overlay
   ========================= */
/* =========================
   Envelope intro overlay
   ========================= */
.introEnvelope{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.65), rgba(255,255,255,0.92)),
    linear-gradient(180deg, #fffdf8 0%, #f9f1ec 100%);
  transition: opacity 700ms ease, visibility 700ms ease;
}

.introEnvelope.is-opening{
  pointer-events: none;
}

.introEnvelope.is-done{
  opacity: 0;
  visibility: hidden;
}

.introEnvelope__center{
  display: grid;
  justify-items: center;
  padding: 24px;
}

.envelope{
  position: relative;
  width: min(420px, 86vw);
  height: calc(min(420px, 86vw) * 0.66);
  perspective: 1200px;
  filter: drop-shadow(0 22px 34px rgba(100,70,60,0.14));
}

/* back body */
.envelope__back{
  position: absolute;
  inset: 0;
  background: #f1ddd2;
  border-radius: 8px;
  z-index: 1;
}

/* letter starts INSIDE the envelope */
.envelope__letter{
  position: absolute;
  left: 50%;
  width: 92%;
  height: 100%;
  bottom: 10px;
  transform: translateX(-50%) translateY(10px);
  background: #fffdfa;
  border-radius: 8px;
  z-index: 2;
  transition: transform 1150ms cubic-bezier(.2,.8,.2,1);
  box-shadow:
    0 10px 24px rgba(80,50,40,0.08),
    inset 0 1px 0 rgba(255,255,255,0.9);
  overflow: hidden;
}

/* soft paper shading */
.envelope__letter::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.95),
    rgba(248,243,240,0.96)
  );
  pointer-events: none;
}

.envelope__letterInner{
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 24px 18px;
  color: var(--rose);
}

.envelope__eyebrow{
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose2);
}

.envelope__title{
  margin: 0;
  font-family: var(--font);
  font-weight: 500;
  font-size: clamp(26px, 4vw, 38px);
  letter-spacing: 0.04em;
  color: var(--rose);
}

.envelope__date{
  margin: 10px 0 0;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rose2);
}

/* front pocket */
.envelope__front{
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* left + right folds cover the lower letter sides */
/* front pocket */
.envelope__front{
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* side folds */
.envelope__front::before,
.envelope__front::after{
  content: "";
  position: absolute;
  bottom: -1px;
  width: 68%;
  height: 102%;
  background: #ead2c6;
}

.envelope__front::before{
  left: -1%;
  clip-path: polygon(0 100%, 0 0, 100% 100%);
  border-bottom-left-radius: 8px;
}

.envelope__front::after{
  right: -1%;
  clip-path: polygon(100% 100%, 0 100%, 100% 0);
  border-bottom-right-radius: 8px;
}

/* center pocket */
.envelope::after{
  content: "";
  position: absolute;
  left: -1%;
  right: -1%;
  bottom: 0;
  height: 56%;
  background: #efd9ce;
  clip-path: polygon(0 100%, 50% 8%, 100% 100%);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  z-index: 6;
  pointer-events: none;
}

/* top flap */
.envelope__flap{
  position: absolute;
  top: -1px;
  left: 50%;
  width: 102%;
  height: 74%;
  background: #e8cfc2;
  clip-path: polygon(-1% 0, 101% 0, 50% 102%);
  transform: translateX(-50%) rotateX(0deg);
  transform-origin: top center;
  transition: transform 900ms cubic-bezier(.2,.8,.2,1);
  z-index: 8;
  backface-visibility: hidden;
}

/* seal */
.envelope__seal{
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
  z-index: 9;
  width: 74px;
  height: 74px;
  border-radius: 999px;
  border: 1px solid rgba(120,70,60,0.18);
  background: radial-gradient(circle at 35% 30%, #c98982, #9b6459 68%);
  color: #fffaf6;
  font-family: var(--font);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(110,70,60,0.18);
  transition: transform 180ms ease, opacity 250ms ease, box-shadow 180ms ease;
}

.envelope__seal:hover{
  transform: translate(-50%, -50%) scale(1.03);
  box-shadow: 0 12px 22px rgba(110,70,60,0.22);
}

.envelope__seal:active{
  transform: translate(-50%, -50%) scale(0.99);
}

/* opening */
.introEnvelope.is-opening .envelope__seal{
  opacity: 0;
}

.introEnvelope.is-opening .envelope__flap{
  transform: rotateX(-178deg);
}

/* card rises but stays partly hidden by front pocket */
.introEnvelope.is-opening .envelope__letter{
  transform: translateX(-50%) translateY(-150px);
  z-index: 7;
}


.hero__topline,
.hero__names,
.hero__bottomline,
.hero__scroll{
  text-shadow: 0 2px 10px rgba(0,0,0,0.30);
}


#travel .travelItem{
  margin-bottom: 28px;
}

#travel .links{
  margin-top: 10px;
}

.hero__inner{
  width: min(900px, 92vw);
  text-align: center;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 150px 0 70px; /* increased from 140px to move everything a little lower */
}

.hero__topline{
  margin: 0 0 50px;
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
}

.hero__bismillah{
  margin: 14px 0 10px;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.35;
  color: #fff;
  text-align: center;
  direction: rtl;
  unicode-bidi: isolate;
  letter-spacing: 0;
  font-weight: 400;
  text-shadow: 0 2px 10px rgba(0,0,0,0.22);
  font-family: "Noto Naskh Arabic", "Amiri", "Scheherazade New", serif;
}

.hero__bismillahTranslation{
  display: block;
  margin: 0 0 28px;
  font-style: italic;
  font-size: 16px;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.30);
}

.hero__names{
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: 3px;
  line-height: 1.05;
  font-size: clamp(46px, 6vw, 84px);
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 50px;
}

@media (max-width: 760px){
  #home .hero__inner{
    padding: 110px 0 120px;
    gap: 10px;
  }

  .hero__bottomline{
    font-size: 13px;
    line-height: 1.6;
    padding: 0 14px;
    margin-bottom: 30px;
  }

  .hero__scroll{
    bottom: 18px;
    font-size: 10px;
  }
}