/* Envelope geometry shares the same midpoint on every viewport. */
html.invite-sealed { overflow: hidden; overscroll-behavior: none; }
body.invite-sealed {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
.envelope {
  position:fixed;
  inset:0;
  z-index:1000;
  isolation:isolate;
  overflow:hidden;
  touch-action:none;
  cursor:pointer
}
.envelope-panel {
  position:absolute;
  inset:-2px;
  backface-visibility:hidden;
  transition:transform 1600ms cubic-bezier(.65,0,.2,1)
}
.envelope-upper {
  background:#631617;
  clip-path:polygon(0 0,100% 0,100% 32%,0 68%);
  z-index:2
}
.envelope-lower {
  background:#fefdf7;
  clip-path:polygon(0 68%,100% 32%,100% 100%,0 100%);
  z-index:1
}
.envelope-panel::before {
  content:'';
  position:absolute;
  inset:22px;
  border:1px solid #c1a36b40
}
.envelope-seam {
  position:absolute;
  inset:0;
  clip-path:polygon(0 67.85%,100% 31.85%,100% 32.15%,0 68.15%);
  background:linear-gradient(90deg,#8c6b36,#e5d09d,#a17d46);
  z-index:3;
  transition:opacity 700ms
}
.envelope-copy {
  position:absolute;
  top:9%;
  left:7%;
  right:7%;
  text-align:center;
  z-index:4;
  color:var(--ivory);
  transition:opacity 650ms,transform 1100ms
}
.envelope-copy .eyebrow {
  color:#dfc99f;
  font-size:11px
}
.envelope-copy p {
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:500;
  font-size:clamp(36px,9vw,62px);
  line-height:1.13;
  max-width:20ch;
  margin:18px auto;
  overflow-wrap:anywhere;
  text-wrap:balance
}
.envelope-coin {
  position:absolute;
  z-index:5;
  left:50%;
  top:50%;
  width:clamp(90px,23vw,146px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  pointer-events:none;
  transition:opacity 850ms,translate 1300ms
}
.envelope-coin img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 5px 10px #23060940)
}
.envelope-open {
  position:absolute;
  left:50%;
  top:77%;
  z-index:6;
  transform:translate(-50%,-50%);
  width:max-content;
  max-width:90%;
  padding:16px 20px;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
  color:var(--wine);
  font-family:'Great Vibes',cursive;
  font-size:clamp(34px,7vw,54px);
  transition:opacity 650ms,translate 1100ms
}
.envelope-open:focus-visible {
  outline:none;
  text-decoration:underline;
  text-underline-offset:8px
}
.envelope.opening {
  pointer-events:auto
}
.envelope.opening .envelope-upper {
  transform:translate(-28%,-100%) rotate(-7deg)
}
.envelope.opening .envelope-lower {
  transform:translate(28%,100%) rotate(7deg)
}
.envelope.opening .envelope-seam,.envelope.opening .envelope-copy,.envelope.opening .envelope-open,.envelope.opening .envelope-coin {
  opacity:0
}
.envelope.opening .envelope-copy {
  transform:translateY(-35px)
}
.envelope.opening .envelope-open {
  translate:0 30px
}
.envelope.opening .envelope-coin {
  translate:22vw 55vh
}
body.invite-sealed {
  overflow:hidden;
  height:100dvh
}
/* Initial hero content stays visible while the cover opens. */
                                          body.invitation-open #welcome .inner {
  animation:hero-settle 1800ms cubic-bezier(.22,.7,.2,1)
}
@keyframes hero-settle {
  from {
    transform:translateY(15px)
  }
  to {
    transform:translateY(0)
  }
}
.reveal-ready .reveal {
  opacity:0;
  transform:translateY(22px);
  transition:opacity 1000ms ease,transform 1200ms cubic-bezier(.22,1,.36,1);
  transition-delay:150ms
}
.reveal-ready .reveal.is-revealed {
  opacity:1;
  transform:none
}
/* Scroll hint uses a CSS arrow so iPhones never replace it with emoji. */
                                                    #hero-scroll-hint {
  position:fixed;
  bottom:calc(18px + env(safe-area-inset-bottom));
  left:50%;
  z-index:20;
  width:44px;
  height:44px;
  margin-left:-22px;
  display:grid;
  place-items:center;
  border:1px solid #63161725;
  border-radius:50%;
  background:var(--wine);
  box-shadow:0 3px 12px #63161720;
  opacity:1;
  transition:opacity 400ms
}
#hero-scroll-hint span {
  width:10px;
  height:10px;
  border-right:1.5px solid var(--ivory);
  border-bottom:1.5px solid var(--ivory);
  transform:translateY(-3px) rotate(45deg);
  animation:hint-drift 2.8s ease-in-out infinite
}
#hero-scroll-hint.is-hidden {
  opacity:0;
  pointer-events:none
}
@keyframes hint-drift {
  50% {
    transform:translateY(2px) rotate(45deg)
  }
}
@media(max-height:550px) {
  .envelope-copy {
    top:4%
  }
  .envelope-copy p {
    font-size:clamp(24px,5vw,36px);
    max-width:30ch;
    margin:7px auto
  }
  .envelope-copy .eyebrow {
    font-size:9px
  }
  .envelope-coin {
    width:80px
  }
  .envelope-open {
    top:83%;
    font-size:32px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .envelope-panel,.envelope-copy,.envelope-seam,.envelope-open,.envelope-coin {
    transition:none
  }
  .reveal-ready .reveal {
    opacity:1;
    transform:none;
    transition:none
  }
  body.invitation-open #welcome .inner,#hero-scroll-hint span,.count-value {
    animation:none
  }
  #blessing .inner.scroll-blessing {
    opacity:1;
    transition:none
  }
  .hero-flower {
    transform:none
  }
  .count-outgoing {
    display:none
  }
}
/* Artwork-aware refinement, based on the supplied visible pixel bounds. */
h1  {
  font-size: clamp(58px, 12vw, 116px);
  line-height: 1.14;
  margin: 35px 0 32px;
  letter-spacing: -0.025em;
}
h1 small  {
  font-size: .4em;
  margin: 12px 0 17px;
  line-height: 1;
}
.hero  {
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 76px 26px 84px;
}
.hero .eyebrow  {
  text-transform: none;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(21px, 4.5vw, 28px);
  letter-spacing: 0;
  margin: 25px 0;
}
.hero-flower img  {
  transform: scaleX(-1);
}
.bismillah-art  {
  width: min(58vw, 285px);
  height: clamp(48px, 11vw, 76px);
  background: #AB5D5D;
}
.verse  {
  font-size: clamp(39px, 8vw, 63px);
  line-height: 1.85;
}
.translation  {
  font-size: clamp(22px, 4.8vw, 29px);
}
#wishes h2  {
  font-size: clamp(56px, 11vw, 95px);
}
#countdown h2  {
  font-size: clamp(45px, 9vw, 77px);
}
#countdown .closing  {
  font-size: clamp(40px, 9vw, 66px);
}
#blessing  {
  padding-top: 56px;
  padding-bottom: 26px;
}
.event-separator  {
  width: min(52vw, 220px);
  margin: 12px auto 30px;
}
/* Clip only transparent padding. The frame dimensions describe visible art. */
.art-frame  {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--art-ratio);
  height: auto;
  max-height: none;
  padding: 0;
}
.art-frame img  {
  position: absolute;
  display: block;
  width: var(--art-width);
  max-width: none;
  height: auto;
  left: var(--art-left);
  top: var(--art-top);
}
.art-frame:has(.asset-fallback)  {
  aspect-ratio: auto;
  overflow: visible;
}
.event-title  {
  width: min(74vw, 340px);
  margin: 0 auto;
}
.event-date  {
  width: min(46vw, 210px);
  margin: 14px auto;
}
#nikah  {
  padding: 10px 18px 92px;
  --icon-size: clamp(116px, 30vw, 150px);
}
#nikah .event-inner  {
  max-width: 620px;
}
#nikah .event-heading  {
  margin: 0 0 14px;
}
#nikah .event-title  {
  width: min(63vw, 260px);
}
#nikah .event-date  {
  width: min(44vw, 185px);
  margin: 0 auto 12px;
}
#nikah .event-time  {
  font-size: clamp(21px, 4.8vw, 28px);
  margin: 0;
}
#nikah .event-time small  {
  font-size: .6em;
}
#nikah .calendar-trigger  {
  padding: 9px 12px;
  margin: 0 0 14px;
}
.nikah-venues  {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 4vw, 34px);
}
.nikah-venues .venue-detail  {
  margin: 0;
  min-width: 0;
  display: grid;
  grid-template-rows: var(--icon-size) auto 1fr;
  justify-items: center;
  align-items: center;
}
.nikah-venues .venue-icon  {
  width: var(--icon-size);
  margin: 0 auto;
}
.nikah-venues .eyebrow  {
  margin: 10px 0 8px;
}
.nikah-venues h3  {
  width: 100%;
  margin: 0;
  align-self: stretch;
  font-size: inherit;
}
.nikah-venues .button  {
  width: 100%;
  height: 100%;
  min-height: 52px;
  border-radius: 20px;
  padding: 10px 12px;
  font-size: clamp(18px, 4.6vw, 24px);
  gap: 7px;
}
.nikah-venues .arrow  {
  width: 16px;
  height: 16px;
}
.walimah .event-title  {
  width: min(78vw, 355px);
}
.walimah .event-date  {
  width: min(45vw, 205px);
  margin: 20px auto 18px;
}
.garland-piece  {
  width: clamp(60px, 18vw, 96px);
  height: auto;
  aspect-ratio: 1;
  transform-origin: center;
  transition: none;
}
/* Flowers are an overlay and never contribute padding to the content. */
#floral-garland  {
  z-index: 3;
  pointer-events: none;
}
.final-bouquet  {
  transition: none;
}
@media (max-width: 360px)  {
  h1  {
    font-size: 53px;
  }
  #nikah  {
    padding-left: 14px;
    padding-right: 14px;
  }
  .nikah-venues  {
    gap: 12px;
  }
  .nikah-venues .button  {
    padding: 9px;
    font-size: 18px;
  }
}
@media (max-height: 740px)  {
  h1  {
    font-size: clamp(53px, 11vw, 87px);
    margin: 22px 0;
  }
  .hero  {
    padding-top: 48px;
    padding-bottom: 70px;
  }
  .hero .eyebrow  {
    margin: 18px 0;
  }
  #nikah  {
    padding-top: 4px;
    padding-bottom: 65px;
    --icon-size: clamp(110px, 29vw, 130px);
  }
  #nikah .event-title  {
    width: min(58vw, 225px);
  }
  #nikah .event-date  {
    width: min(40vw, 165px);
  }
  #nikah .event-heading  {
    margin-bottom: 10px;
  }
  #nikah .calendar-trigger  {
    margin-bottom: 8px;
  }
}
@media (prefers-reduced-motion: reduce)  {
  .hero-flower img  {
    transform: scaleX(-1);
  }
}

/* Revision 3: original stationery typography and a more spacious event flow. */
.envelope-copy { top: 13%; left: 10%; right: 10%; }
.envelope-copy .eyebrow { font-size: 12px; letter-spacing: .25em; }
.envelope-copy p {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(42px, 8vw, 72px);
  font-weight: 400;
  line-height: 1.25;
  margin: 15px auto;
  max-width: 22ch;
}
.envelope-open { padding: 22px 24px; min-width: 240px; }
.envelope-open span {
  display: block;
  font-family: 'Great Vibes', cursive;
  font-size: clamp(36px, 7vw, 55px);
  line-height: 1.3;
}
.hero {
  display: block;
  min-height: 0;
  padding: 50px 26px 8px;
}
.hero .intro { margin-bottom: 8px; }
#blessing { padding: 12px 26px 20px; }
#blessing .eyebrow { margin: 8px 0; }
#blessing .verse { margin: 12px 0; }
#blessing .mini { margin-bottom: 4px; }
#blessing .inner.scroll-blessing {
  opacity: 1;
  color: var(--ayah-color, #A1615F);
  transition: color 150ms linear;
}
#blessing .inner.scroll-blessing > * { color: inherit; opacity: 1; }
.event-separator { margin: 16px auto 28px; }
#nikah {
  min-height: 100svh;
  padding: 24px 26px 110px;
  display: flex;
  align-items: center;
  --icon-size: clamp(92px, 25vw, 110px);
}
#nikah .event-inner { width: 100%; max-width: 620px; }
#nikah .event-title { width: min(66vw, 280px); }
#nikah .event-heading { margin-bottom: 20px; }
#nikah .event-date { width: min(44vw, 185px); margin-bottom: 18px; }
#nikah .calendar-trigger { margin-bottom: 24px; }
.nikah-venues { grid-template-columns: 1fr; gap: 34px; }
.nikah-venues .venue-detail { display: block; }
.nikah-venues .venue-icon { width: var(--icon-size); margin: 0 auto 12px; }
.nikah-venues .eyebrow { margin: 12px 0; }
.nikah-venues h3 { width: auto; margin: 0; }
.nikah-venues .button {
  width: auto;
  min-width: 215px;
  max-width: 100%;
  height: auto;
  min-height: 50px;
  padding: 12px 24px;
  font-size: 23px;
  gap: 12px;
}
.walimah {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 150px 26px 85px;
}
.walimah .inner { width: 100%; }
.walimah .event-heading { margin-bottom: 26px; }
.walimah .event-date { margin: 0 auto 25px; }
.walimah .event-time { margin: 20px 0 12px; }
.walimah .rule { margin: 30px auto; }
.walimah address { font-size: clamp(22px, 5vw, 29px); }
/* The updated lettering has no transparent padding. Do not crop its edges. */
.walimah .event-title.art-frame { overflow: visible; }
.garland-piece.leaf { width: clamp(50px, 15vw, 82px); }
@media (min-width: 800px) { .hero { padding-top: 76px; } }
@media (max-height: 550px) {
  .envelope-copy { top: 4%; }
  .envelope-copy p { font-size: clamp(28px, 5vw, 42px); margin: 8px auto; }
  .envelope-copy .eyebrow { font-size: 10px; }
  .hero { padding-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  #blessing .inner.scroll-blessing { opacity: 1; transition: none; }
}

/* Latest backup typography: serif recipient text, cursive opening control. */
.envelope-copy p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: clamp(40px, 7vw, 68px);
  line-height: 1.2;
  max-width: 680px;
  margin-inline: auto;
  white-space: normal;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
/* The hero is a programmatic focus target, not an outlined control. */
#welcome:focus, #welcome:focus-visible { outline: none; }
#welcome, #blessing { border: 0; box-shadow: none; }
#welcome::before, #welcome::after, #blessing::before, #blessing::after { display: none; }
#nikah {
  display: block;
  padding-top: 28px;
  padding-bottom: 76px;
}
#nikah .event-heading { margin-bottom: 36px; }
#nikah .event-date { margin-bottom: 24px; }
#nikah .event-time { margin: 0 0 8px; }
#nikah .calendar-trigger { margin: 0 0 22px; }
.nikah-venues { gap: 28px; }
.nikah-venues .venue-icon { margin-bottom: 10px; }
.nikah-venues .eyebrow { margin: 8px 0 12px; }
.walimah {
  display: block;
  padding-top: 118px;
  padding-bottom: 68px;
}
.walimah .event-heading { margin-bottom: 36px; }
.walimah .event-date { margin-bottom: 26px; }
.walimah .event-time { margin: 0 0 10px; }
.walimah .calendar-trigger { margin-bottom: 4px; }
.walimah .rule { margin: 24px auto; }
.walimah .residence-name { margin: 16px 0 22px; }
@media (max-width: 600px) {
  .envelope-copy { left: 7%; right: 7%; top: 9%; }
  .envelope-copy p {
    max-width: 16ch;
    font-size: clamp(44px, 12vw, 58px);
    line-height: 1.15;
  }
}
@media (max-height: 550px) {
  .envelope-copy { top: 4%; }
  .envelope-copy p { font-size: clamp(28px, 5vw, 42px); max-width: 30ch; }
}

/* Clear breathing room before the Ayah and between the two venues. */
#blessing { padding-top: clamp(42px, 7vh, 68px); }
.nikah-venues { gap: 48px; }
.walimah .event-date { width: min(58vw, 260px); }
/* Preserve the supplied Walimah lettering, including its original colour. */
.walimah .event-title, .walimah .event-title img { filter: none; }
/* Individual flowers keep a constant size throughout release and collection. */
.garland-piece { transition: none; }

/* Revision 6: smaller, quieter venue icons. */
#nikah { --icon-size: clamp(64px, 18vw, 78px); }
.nikah-venues .venue-icon img {
  filter: none;
}

/* Revision 7: distribute available height within the Nikah content. */
#nikah { padding-top: 28px; padding-bottom: 48px; }
#nikah .event-inner {
  min-height: calc(100svh - 76px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}
#nikah .event-inner > * { flex-shrink: 0; }
#nikah .calendar-trigger { align-self: center; }
#nikah .nikah-venues { gap: 64px; }

/* Revision 8: a compact date group, followed by the marriage covenant. */
#nikah .event-inner { gap: 0; }
#nikah .nikah-heading-group { width: 100%; }
#nikah .event-heading { margin: 0 0 16px; }
#nikah .event-date { margin: 0 auto 14px; }
#nikah .event-time { margin: 0 0 6px; }
#nikah .calendar-trigger { margin: 0; }
#nikah .nikah-venues { gap: 48px; }

/* Revision 9: natural phone-friendly spacing, no extra full-screen stretch. */
#nikah { min-height: 0; padding-top: 28px; padding-bottom: 64px; }
#nikah .event-inner { min-height: 0; display: block; }
#nikah .nikah-heading-group { margin-bottom: clamp(50px, 8vw, 64px); }
#nikah .nikah-venues { gap: 44px; }

/* Reference venue layout: icon medallion, fine divider and separate action. */
#nikah .nikah-venues {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  position: relative;
  z-index: 4;
  width: fit-content;
  max-width: min(100%, 480px);
  margin-inline: auto;
}
#nikah .venue-detail {
  display: grid;
  grid-template-columns: clamp(74px, 21vw, 110px) minmax(0, 1fr);
  grid-template-rows: auto;
  gap: clamp(10px, 3vw, 18px);
  align-items: center;
  justify-items: stretch;
  margin: 0;
  text-align: left;
}
.venue-icon-disc {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid #bc955536;
  border-radius: 50%;
  background: #faf6ee;
  display: grid;
  place-items: center;
}
#nikah .venue-icon-disc .venue-icon { width: 65%; margin: 0; }
.venue-copy {
  min-width: 0;
  border-left: 1px solid #bd985e70;
  padding: 3px 0 3px clamp(12px, 3.8vw, 23px);
}
#nikah .venue-copy .eyebrow {
  margin: 0 0 9px;
  font-size: clamp(10px, 2.7vw, 13px);
  letter-spacing: .16em;
  font-weight: 600;
  line-height: 1.4;
}
#nikah .venue-copy h3 {
  margin: 0 0 15px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(24px, 6.2vw, 34px);
  font-weight: 500;
  line-height: 1.15;
  overflow-wrap: normal;
}
#nikah .venue-copy .button {
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  height: auto;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: clamp(18px, 4.5vw, 21px);
  font-weight: 400;
  gap: 10px;
}
#nikah .venue-copy .arrow { width: 17px; height: 17px; }
.venue-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 0 8px;
  padding-block: clamp(32px, 8vw, 42px);
  color: #bc955b;
}
.venue-separator span {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, #bc955b);
}
.venue-separator span:last-child { transform: rotate(180deg); }
.venue-separator svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
/* Fade rows in place so the ornament remains midway between the venues. */
.reveal-ready #nikah .venue-detail.reveal {
  transform: none;
  transition-property: opacity;
}
@media (max-width: 360px) {
  #nikah { padding-inline: 18px; }
  #nikah .venue-copy h3 { font-size: 24px; }
  #nikah .venue-copy .button { font-size: 18px; gap: 9px; padding-inline: 10px; }
}