:root {
  --ivory: #f8f5ef;
  --forest: #243d34;
  --sage: #9bae9b;
  --gold: #b59a65;
  --text: #303e37
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--text);
  font: 14px 'DM Sans', sans-serif
}

button,
input,
textarea,
select {
  font: inherit
}

button {
  cursor: pointer
}

a {
  color: inherit;
  text-decoration: none
}

.site-header {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 5.5%;
  gap: 20px
}

.brand {
  font-size: 11px;
  letter-spacing: .21em;
  font-weight: 600
}

.site-header nav {
  display: flex;
  gap: 29px
}

.site-header nav a {
  font-size: 11px;
  color: #516158
}

.header-actions {
  display: flex;
  gap: 8px
}

.icon-btn {
  background: transparent;
  border: 1px solid #a3ada48c;
  border-radius: 50%;
  width: 37px;
  height: 37px;
  font-size: 17px
}

.hero {
  min-height: 920px;
  min-height: 100svh;
  display: flex;
  justify-content: center;
  text-align: center;
  position: relative;
  padding: 130px 20px 65px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #fffdf8, var(--ivory) 75%)
}

.hero-inner {
  max-width: 700px;
  width: 100%;
  margin: auto
}

.bismillah {
  font-family: serif;
  color: var(--gold);
  font-size: 24px;
  margin-bottom: 17px
}

.overline,
.eyebrow {
  letter-spacing: .3em;
  font-size: 10px;
  font-weight: 600
}

.overline {
  color: #8c907f
}

.arch {
  margin: 35px auto 20px;
  max-width: 550px;
  min-height: 510px;
  border: 1px solid #c7b88e;
  border-radius: 270px 270px 0 0;
  position: relative;
  padding: 14px
}

.arch:before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid #c7b88e78;
  border-radius: 270px 270px 0 0;
  pointer-events: none
}

.arch-content {
  padding: 62px 14px 36px
}

.ornament {
  color: var(--gold);
  letter-spacing: 16px;
  font-size: 14px
}

.small {
  font-size: 9px;
  margin-top: 48px
}

h1,
h2,
h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500
}

h1 {
  font-size: clamp(80px, 13vw, 128px);
  line-height: .85;
  margin: 35px 0 22px;
  letter-spacing: -.07em
}

h1 span {
  display: block
}

h1 em {
  font-size: .48em;
  display: block;
  color: var(--gold);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0
}

h2 {
  font-size: clamp(57px, 8vw, 91px);
  line-height: .93;
  letter-spacing: -.055em;
  margin: 24px 0 25px
}

h2 i {
  color: var(--gold);
  font-weight: 400
}

.verse {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-style: italic;
  margin: 24px 0 4px
}

.source {
  font-size: 10px;
  letter-spacing: .14em;
  color: #7c8c81
}

.hero-flower {
  font-size: 33px;
  color: var(--gold);
  margin: 22px
}

.invite-text {
  font: 20px 'Cormorant Garamond', serif;
  margin: 0 0 14px
}

.date {
  font-size: 10px;
  letter-spacing: .17em;
  font-weight: 600
}

.hero-caption {
  font: italic 22px 'Cormorant Garamond', serif;
  color: #7a897d
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 16px 25px;
  border: 1px solid var(--forest);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 600;
  transition: transform .2s, background .2s
}

.button:hover {
  transform: translateY(-3px)
}

.filled {
  background: var(--forest);
  color: #fff
}

.scrollhint {
  position: absolute;
  bottom: 26px;
  letter-spacing: .3em;
  font-size: 9px;
  display: flex;
  gap: 16px;
  align-items: center;
  color: #899388
}

.scrollhint span {
  font-size: 20px
}

.section {
  text-align: center;
  padding: 115px 20px 120px;
  position: relative;
  overflow: hidden
}

.section-desc {
  max-width: 430px;
  line-height: 1.85;
  color: #7b887d;
  margin: 0 auto 36px
}

.eyebrow {
  color: var(--gold)
}

.story {
  background: #f3f1e9
}

.envelope-area {
  margin: 65px auto 0
}

.envelope {
  position: relative;
  display: block;
  width: min(340px, 85vw);
  height: 220px;
  border: 0;
  background: none;
  margin: 0 auto;
  perspective: 900px;
  filter: drop-shadow(0 20px 18px #5e6b5540)
}

.envelope-back {
  position: absolute;
  inset: 0;
  background: #d4c4a3;
  border-radius: 4px
}

.letter {
  position: absolute;
  inset: 12px 16px 5px;
  background: #fffaf0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: transform .8s;
  z-index: 1
}

.letter small {
  font-size: 9px;
  letter-spacing: .3em
}

.letter span {
  font-family: 'Cormorant Garamond', serif;
  font-size: 29px;
  line-height: 1
}

.letter b {
  color: var(--gold)
}

.flap {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #e7d8b9;
  clip-path: polygon(0 0, 100% 0, 50% 62%);
  transform-origin: top center;
  transition: transform .7s
}

.seal {
  position: absolute;
  top: 85px;
  left: calc(50% - 20px);
  z-index: 4;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: white;
  transition: opacity .3s
}

.envelope.open .flap {
  transform: rotateX(175deg);
  z-index: 0
}

.envelope.open .seal {
  opacity: 0
}

.envelope.open .letter {
  transform: translateY(-100px)
}

.caption {
  font-size: 10px;
  letter-spacing: .25em;
  margin-top: 25px;
  color: #9c9079
}

.dark {
  background: var(--forest);
  color: #faf7e8
}

.dark h2 i {
  color: #d5c09b
}

.light {
  color: #cabb98
}

.countdown {
  display: flex;
  justify-content: center;
  gap: clamp(15px, 5vw, 65px);
  margin: 75px 0 38px
}

.countdown>div {
  display: flex;
  flex-direction: column;
  gap: 15px
}

.countdown b {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(49px, 9vw, 105px);
  font-weight: 400;
  line-height: .85
}

.countdown span {
  font-size: 10px;
  letter-spacing: .2em;
  color: #b7c5b3
}

.count-caption {
  font: italic 23px 'Cormorant Garamond', serif;
  color: #d1d6c9
}

.reveal-section {
  background: #fcfaf4
}

.scratch-wrap {
  width: min(430px, 88vw);
  height: 240px;
  margin: 48px auto 14px;
  position: relative;
  border: 8px solid #f1e8d6;
  box-shadow: 0 20px 35px #554c3830
}

.scratch-under {
  position: absolute;
  inset: 0;
  background: #fbf8ee;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column
}

.scratch-under h3 {
  font-size: 43px;
  line-height: .95;
  margin: 15px
}

.scratch-under p {
  font-size: 12px
}

.sun {
  color: var(--gold);
  font-size: 23px
}

#scratch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  transition: opacity .4s
}

.text-button {
  background: transparent;
  border: 0;
  color: var(--forest);
  text-decoration: underline;
  text-underline-offset: 5px;
  margin: 14px;
  letter-spacing: .05em
}

.events {
  background: #f2f0e9
}

.event-grid {
  max-width: 1000px;
  margin: 55px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 19px
}

.event-card {
  background: #fffdf7;
  border: 1px solid #e2dbc9;
  padding: 52px 24px;
  transition: transform .2s
}

.event-card:hover {
  transform: translateY(-5px)
}

.event-icon {
  color: var(--gold);
  font-size: 32px
}

.event-card h3 {
  font-size: 40px;
  margin: 20px 0 12px
}

.event-card p {
  font-size: 12px;
  color: #7d8d7d;
  line-height: 1.7
}

.event-card strong {
  font-size: 11px;
  letter-spacing: .1em
}

.event-card small {
  color: #998f7d
}

.game {
  background: #fffdf7
}

.lanterns {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin: 45px auto 20px;
  flex-wrap: wrap
}

.lantern {
  width: 86px;
  height: 104px;
  background: #eee8d7;
  border: 1px solid #cbbd9e;
  border-radius: 45px 45px 15px 15px;
  color: var(--gold);
  font-size: 48px;
  transition: transform .25s, background .25s
}

.lantern:hover {
  transform: translateY(-8px)
}

.lantern.chosen {
  background: #e0c99d
}

.game-result {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px
}

.form {
  display: grid;
  gap: 20px;
  text-align: left;
  width: min(440px, 95%);
  margin: 40px auto
}

.form label,
.settings-box label {
  display: grid;
  gap: 9px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600
}

.form input,
.form select,
.form textarea,
.settings-box input {
  width: 100%;
  background: #fffdf9;
  border: 1px solid #d6ddcf;
  border-radius: 0;
  padding: 15px;
  outline-color: var(--gold);
  color: var(--forest);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none
}

.form-status {
  color: var(--forest);
  text-align: center
}

.wishes {
  background: #faf9f3
}

.wish-list {
  max-width: 860px;
  margin: 45px auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  text-align: left
}

.wish-card {
  border: 1px solid #e5e2d6;
  background: #fffdf8;
  padding: 26px
}

.wish-card p {
  font: 24px/1.3 'Cormorant Garamond', serif;
  margin: 4px 0 15px;
  overflow-wrap: anywhere
}

.wish-card b {
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold)
}

footer {
  background: var(--forest);
  color: #f8f5ef;
  text-align: center;
  padding: 85px 5% 25px
}

footer h2 {
  font-size: 70px
}

footer p {
  color: #becbbf
}

.footer-flower {
  font-size: 30px;
  color: var(--gold);
  margin-bottom: 22px
}

.footer-bottom {
  margin-top: 80px;
  padding-top: 22px;
  border-top: 1px solid #73857a;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: .1em
}

dialog {
  border: 0;
  box-shadow: 0 0 0 100vmax #12251bcc;
  background: #fffdf8;
  max-width: 480px;
  width: 90%;
  max-height: 85vh;
  overflow: auto
}

dialog::backdrop {
  background: #12251bcc
}

.settings-box {
  display: grid;
  gap: 16px
}

.settings-title {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.settings-title h3 {
  font-size: 36px;
  margin: 0
}

.close {
  border: 0;
  background: transparent;
  font-size: 20px
}

.settings-box p {
  font-size: 12px;
  line-height: 1.6;
  color: #637266
}

#petals {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  overflow: hidden
}

.petal {
  position: absolute;
  top: -20px;
  color: #c6ad78;
  opacity: .55;
  animation: fall linear forwards
}

@keyframes fall {
  to {
    transform: translate(60px, 105vh) rotate(360deg);
    opacity: 0
  }
}

@media(max-width:700px) {
  .site-header {
    padding: 20px 5%;
    gap: 9px
  }

  .brand {
    font-size: 9px
  }

  .site-header nav {
    display: none
  }

  .hero {
    min-height: 830px
  }

  .arch {
    min-height: 470px
  }

  .arch-content {
    padding-top: 56px
  }

  .small {
    margin-top: 40px
  }

  .section {
    padding: 85px 18px
  }

  .event-grid,
  .wish-list {
    grid-template-columns: 1fr
  }

  .countdown {
    gap: 12px
  }

  .countdown span {
    font-size: 8px
  }

  .footer-bottom {
    gap: 20px;
    flex-direction: column
  }

  h1 {
    font-size: 90px
  }
}

@media(prefers-reduced-motion:reduce) {

  *,
  *:before,
  *:after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important
  }
}


/* V2 visual direction — invitation card remains the main first-screen focal point. */
.hero {
  min-height: 100svh;
  padding: 105px 20px 74px;
  align-items: center;
  background: radial-gradient(ellipse 57% 65% at 50% 44%, #fffefa 0%, #fcfaf5 55%, var(--ivory) 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 690px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero .arch {
  width: min(510px, calc(100vw - 42px));
  min-height: 535px;
  margin: 0 auto 14px;
  background: linear-gradient(150deg, #fffefaee, #faf7eddf);
  box-shadow: 0 20px 65px #4f58450d, 0 4px 23px #927a4e0b;
  animation: cardEntrance 2.3s cubic-bezier(.18, .75, .25, 1) both, cardBreathe 9s ease-in-out 2.4s infinite;
  isolation: isolate;
  overflow: hidden;
}

.hero .arch::after {
  content: '';
  position: absolute;
  width: 40%;
  height: 150%;
  top: -22%;
  left: -65%;
  background: linear-gradient(90deg, transparent, #e4d2a51a, transparent);
  transform: skewX(-18deg);
  animation: invitationShimmer 11s ease-in-out 2.8s infinite;
  pointer-events: none;
}

.hero .arch-content {
  padding: 38px 16px 30px;
}

.hero .arch .bismillah {
  margin: 0 0 14px;
  font-size: 23px;
}

.hero .arch .overline:not(.small) {
  font-size: 9px;
  margin: 0;
}

.hero .ornament {
  display: block;
  margin: 24px 0 0;
  animation: ornamentGlow 5s ease-in-out 2s infinite;
}

.hero .small {
  margin: 21px 0 0;
}

.hero h1 {
  font-size: clamp(50px, 8vw, 85px);
  margin: 25px 0 18px;
}

.hero h1 span {
  animation: nameRise 1.9s cubic-bezier(.2, .7, .2, 1) both;
}

.hero h1 span:first-child {
  animation-delay: .5s;
}

.hero h1 span:last-child {
  animation-delay: 1.05s;
}

.hero h1 em {
  animation: nameRise 1.8s ease .85s both;
}

.hero .verse {
  margin: 19px 0 4px;
  font-size: 21px;
}

.hero .hero-flower {
  margin: 17px;
  animation: floralTurn 16s ease-in-out infinite;
  display: inline-block;
}

.hero .invite-text {
  margin-bottom: 14px;
}

.hero .date {
  display: block;
  letter-spacing: .12em;
}

.hero-caption {
  margin: 14px 0 19px;
  animation: gentleAppear 1.8s ease 1.8s both;
}

.hero .button {
  animation: gentleAppear 1.65s ease 2.1s both;
}

.hero .scrollhint span {
  animation: scrollBob 2.4s ease-in-out infinite;
}

.hero-atmosphere {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-spark {
  position: absolute;
  color: #bca579;
  font-size: 30px;
  opacity: .24;
  animation: constellation 11s ease-in-out infinite alternate;
}

.hero-spark:nth-child(1) {
  top: 19%;
  left: 13%;
  animation-delay: -4s;
}

.hero-spark:nth-child(2) {
  top: 31%;
  right: 11%;
  font-size: 43px;
  animation-delay: -1s;
}

.hero-spark:nth-child(3) {
  bottom: 25%;
  left: 20%;
  font-size: 19px;
  animation-delay: -6s;
}

.hero-spark:nth-child(4) {
  bottom: 20%;
  right: 17%;
  font-size: 27px;
  animation-delay: -3s;
}

.hero-spark:nth-child(5) {
  top: 52%;
  left: 5%;
  font-size: 32px;
  animation-delay: -7s;
}

.hero-spark:nth-child(6) {
  top: 13%;
  right: 25%;
  font-size: 16px;
  animation-delay: -2s;
}

.section {
  isolation: isolate;
}

.story::before,
.events::before,
.wishes::before {
  content: '✧';
  position: absolute;
  left: 6%;
  top: 12%;
  font-size: 100px;
  line-height: 1;
  color: #b59a6518;
  animation: constellation 12s ease-in-out infinite alternate;
  pointer-events: none;
}

.events::before {
  left: auto;
  right: 7%;
  top: 16%;
}

.wishes::before {
  top: 9%;
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(35px);
  transition: transform 1.4s cubic-bezier(.18, .68, .25, 1), opacity 1.4s ease;
  transition-delay: var(--reveal-delay, 0s);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.envelope .flap {
  transition-duration: 1.6s;
  transition-timing-function: cubic-bezier(.28, .1, .15, 1);
}

.envelope .letter {
  transition-duration: 1.95s;
  transition-delay: .1s;
  transition-timing-function: cubic-bezier(.18, .62, .2, 1);
}

.envelope.open .letter {
  transform: translateY(-110px);
}

.envelope.open .seal {
  transform: scale(.65);
}

.envelope .seal {
  transition: opacity .6s, transform .6s;
}

.envelope:not(.open) {
  animation: envelopeFloat 6s ease-in-out infinite;
}

.scratch-wrap {
  transition: box-shadow 1.2s ease;
}

.scratch-wrap.unveiled {
  box-shadow: 0 10px 65px #b59a6540;
}

.scratch-wrap.unveiled .scratch-under h3 {
  animation: revealBlessing 1.2s cubic-bezier(.2, .7, .3, 1) both;
}

#scratch {
  transition: opacity 1.15s ease;
}

.event-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 735px;
}

.event-card {
  position: relative;
  overflow: hidden;
  transition: transform .65s cubic-bezier(.18, .75, .2, 1), box-shadow .65s ease, opacity 1.4s ease;
}

.event-card::before {
  content: '';
  position: absolute;
  left: 23%;
  right: 23%;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0);
  transition: transform .8s ease;
}

.event-card:hover::before {
  transform: scaleX(1);
}

.event-card:hover {
  box-shadow: 0 18px 45px #59675216;
}

.event-icon {
  animation: ornamentGlow 5.5s ease-in-out infinite;
}

.lantern {
  animation: lanternFloat 5s ease-in-out infinite;
}

.lantern:nth-child(2n) {
  animation-delay: -1.8s;
}

.lantern:nth-child(3n) {
  animation-delay: -3.1s;
}

.lantern.lantern-picked {
  animation: lanternReveal .9s cubic-bezier(.15, .7, .2, 1) both;
}

.lantern.chosen {
  box-shadow: 0 8px 35px #b59a6550;
}

.number-roll {
  display: inline-block;
  animation: countGentle .55s ease;
}

.wish-card {
  animation: wishAppear 1s cubic-bezier(.2, .7, .2, 1) both;
}

.wish-card:nth-child(2n) {
  animation-delay: .13s;
}

.footer-flower {
  display: inline-block;
  animation: floralTurn 20s ease-in-out infinite;
}

@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: translateY(65px) scale(.93);
    filter: blur(7px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes cardBreathe {

  0%,
  100% {
    box-shadow: 0 20px 65px #4f58450d;
  }

  50% {
    box-shadow: 0 26px 85px #b59a6524;
  }
}

@keyframes invitationShimmer {

  0%,
  23% {
    left: -65%;
  }

  55%,
  100% {
    left: 125%;
  }
}

@keyframes nameRise {
  from {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes gentleAppear {
  from {
    opacity: 0;
    transform: translateY(19px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes ornamentGlow {

  0%,
  100% {
    opacity: .65;
    transform: scale(.98);
  }

  50% {
    opacity: 1;
    transform: scale(1.09);
  }
}

@keyframes floralTurn {

  0%,
  100% {
    transform: rotate(-8deg) scale(.94)
  }

  50% {
    transform: rotate(10deg) scale(1.08)
  }
}

@keyframes constellation {
  0% {
    transform: translate3d(-12px, 16px, 0) rotate(-14deg);
    opacity: .13
  }

  100% {
    transform: translate3d(13px, -18px, 0) rotate(15deg);
    opacity: .32
  }
}

@keyframes scrollBob {

  0%,
  100% {
    transform: translateY(-3px)
  }

  50% {
    transform: translateY(7px)
  }
}

@keyframes envelopeFloat {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-10px)
  }
}

@keyframes revealBlessing {
  from {
    opacity: .3;
    transform: scale(.87)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

@keyframes lanternFloat {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-8px)
  }
}

@keyframes lanternReveal {
  0% {
    transform: rotate(0) scale(1)
  }

  50% {
    transform: rotate(-9deg) scale(1.11)
  }

  100% {
    transform: rotate(0) scale(1)
  }
}

@keyframes countGentle {
  from {
    opacity: .6;
    transform: translateY(-7px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes wishAppear {
  from {
    opacity: 0;
    transform: translateY(25px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@media(max-width:700px) {
  .hero {
    min-height: max(100svh, 740px);
    padding: 95px 15px 65px;
  }

  .hero .arch {
    width: min(395px, calc(100vw - 32px));
    min-height: 500px;
  }

  .hero .arch-content {
    padding: 37px 12px 26px;
  }

  .hero .bismillah {
    font-size: 20px;
  }

  .hero .small {
    margin-top: 16px;
  }

  .hero .ornament {
    margin-top: 17px;
  }

  .hero h1 {
    font-size: clamp(75px, 20vw, 97px);
    margin: 19px 0 14px;
  }

  .hero .verse {
    font-size: 18px;
    margin-top: 16px;
  }

  .hero .hero-flower {
    margin: 10px;
  }

  .hero .invite-text {
    font-size: 18px;
  }

  .hero-caption {
    margin: 13px 0;
  }

  .event-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
  }

  .hero-spark:nth-child(1),
  .hero-spark:nth-child(4),
  .hero-spark:nth-child(5) {
    display: none;
  }
}

@media(max-width:390px) {
  .hero {
    min-height: 720px;
    padding-top: 88px;
  }

  .hero .arch {
    min-height: 480px;
  }

  .hero .arch-content {
    padding-top: 30px;
  }

  .hero .date {
    font-size: 9px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero .arch,
  .hero h1 span,
  .hero h1 em,
  .hero-caption,
  .hero .button,
  .hero-spark,
  .hero .ornament,
  .hero .hero-flower,
  .event-icon,
  .lantern,
  .footer-flower,
  .scrollhint span,
  .number-roll,
  .wish-card,
  .story::before,
  .events::before,
  .wishes::before {
    animation: none !important;
  }
}

/* Preserve lift-on-hover after scroll entrance finishes. */
.event-card.reveal-on-scroll.is-visible:hover {
  transform: translateY(-8px);
}

@media(prefers-reduced-motion:reduce) {
  .event-card.reveal-on-scroll.is-visible:hover {
    transform: none
  }
}

/* Consolidated invitation details: Nikkah and Walima appear inside section 01. */
.invitation-itinerary {
  width:min(810px,100%);
  margin:74px auto 0;
  padding:0 12px 10px;
  position:relative;
}
.invitation-divider {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin:0 auto 31px;
  color:var(--gold);
  font-size:23px;
  max-width:600px;
}
.invitation-divider::before,.invitation-divider::after {
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,#b59a655c,transparent);
}
.invitation-events-eyebrow {font-size:10px;color:#a49778;margin:0 0 7px;}
.invitation-itinerary h3 {
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  line-height:1.04;
  font-size:clamp(40px,6vw,60px);
  letter-spacing:-.035em;
  margin:10px 0 7px;
}
.invitation-itinerary h3 em {font-weight:400;color:var(--gold);}
.invitation-events-copy {
  font-size:13px;
  color:#7b887d;
  max-width:440px;
  line-height:1.7;
  margin:7px auto 0;
}
.invitation-event-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin:35px auto 0;
  max-width:750px;
}
.invitation-event-grid .event-card {
  padding:34px 22px 36px;
  background:#fffdf9;
  border:1px solid #dfd9c9;
  box-shadow:0 8px 31px #b59a6510;
  border-radius:2px;
  min-height:250px;
}
.invitation-event-grid .event-icon {font-size:31px;}
.invitation-event-grid .event-card h3 {
  font-size:36px;
  letter-spacing:-.02em;
  margin:14px 0 9px;
}
.invitation-event-grid .event-card strong {display:block;line-height:1.7;}
.invitation-event-grid .event-card p {font-size:12px;margin:13px 0;}
.invitation-event-grid .event-card small {font-style:italic;}
/* Sound button and gentle status notifications. */
#sound.playing {
  background:var(--forest);
  color:var(--ivory);
  border-color:var(--forest);
  box-shadow:0 0 0 5px #243d3418;
  animation:musicBreath 4.5s ease-in-out infinite;
}
.music-notice {
  position:fixed;
  top:83px;
  right:26px;
  z-index:50;
  max-width:min(340px,calc(100vw - 40px));
  padding:14px 18px;
  background:#fffdf9;
  border:1px solid #dbcba9;
  box-shadow:0 15px 32px #192c2724;
  color:var(--forest);
  font-size:12px;
  line-height:1.6;
}
.music-notice[hidden]{display:none}
.settings-audio {
  display:grid;
  gap:10px;
  background:#f4f1e7;
  border:1px solid #ded3b8;
  padding:17px;
  font-size:12px;
  letter-spacing:0;
}
.settings-audio .settings-mini-title {margin:0;font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--gold);}
.settings-audio strong {font:500 24px/1.03 'Cormorant Garamond',serif;}
.settings-audio span {color:#667b6c;font-size:11px;}
.settings-audio p {margin:4px 0;line-height:1.55;}
.settings-audio a {color:var(--forest);text-underline-offset:4px;text-decoration:underline;justify-self:start;font-weight:600;}
.settings-audio label {gap:9px;letter-spacing:.04em;font-size:10px;}
.settings-audio input[type=file]{padding:10px;background:#fffdf9;font-size:11px;max-width:100%;}
.settings-audio code {font-size:11px;overflow-wrap:anywhere;text-transform:none;}
@keyframes musicBreath {
  0%,100%{box-shadow:0 0 0 3px #243d3415}
  50%{box-shadow:0 0 0 9px #243d3410}
}
@media(max-width:700px){
  .invitation-itinerary {margin-top:60px;padding:0 2px;}
  .invitation-event-grid {grid-template-columns:1fr;gap:14px;max-width:410px;}
  .invitation-event-grid .event-card {min-height:0;padding:32px 18px;}
  .music-notice {top:72px;right:12px;}
}
@media(prefers-reduced-motion:reduce){
  #sound.playing{animation:none!important;}
}

/* Experience v3: interactive reveal and moonlit closing.
   Minimal palette, transform/opacity-first animation, safe reduced motion. */

/* The hero card traces itself with gold after its soft arrival. */
.hero .arch { position:relative; }
.hero .arch-trace {
  position:absolute;
  inset:-1px;
  width:calc(100% + 2px);
  height:calc(100% + 2px);
  z-index:3;
  overflow:visible;
  pointer-events:none;
}
.hero .arch-trace path {
  stroke:#bc9f60;
  stroke-width:1.8px;
  fill:none;
  stroke-linecap:round;
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  opacity:.82;
  animation:traceWeddingArch 3.9s cubic-bezier(.44,.02,.23,.99) .38s forwards;
}
.hero .arch-content { position:relative;z-index:1; }
.arch-corner {
  position:absolute;
  bottom:19px;
  z-index:3;
  color:#bca36b;
  font-size:19px;
  opacity:0;
  pointer-events:none;
  animation:cornerBloom 2.2s cubic-bezier(.2,.7,.2,1) 2.5s forwards, cornerSway 10s ease-in-out 4.7s infinite alternate;
}
.arch-corner-left {left:19px}
.arch-corner-right {right:19px;animation-delay:2.8s,5s}
.hero .bismillah {
  animation:heroLetter 1.45s ease .8s both;
}
.hero .arch .overline:not(.small) {
  animation:heroLetter 1.45s ease 1.04s both;
}
.hero .small {
  animation:heroLetter 1.45s ease 1.48s both;
}
.hero .verse,.hero .source {
  animation:heroLetter 1.75s ease 1.95s both;
}
.hero .invite-text,.hero .date {
  animation:heroLetter 1.7s ease 2.25s both;
}
.hero .arch .ornament {
  animation:heroLetter 1.8s ease 1.17s both, ornamentGlow 5s ease-in-out 3.1s infinite;
}
@keyframes traceWeddingArch { to {stroke-dashoffset:0;} }
@keyframes heroLetter {
  from {opacity:0;transform:translateY(12px);filter:blur(3px);}
  to {opacity:1;transform:translateY(0);filter:blur(0);}
}
@keyframes cornerBloom {
  from {opacity:0;transform:scale(.3) rotate(-40deg);}
  to {opacity:.74;transform:scale(1) rotate(0);}
}
@keyframes cornerSway {
  from {transform:rotate(-6deg) scale(.96);opacity:.65;}
  to {transform:rotate(9deg) scale(1.05);opacity:.85;}
}

/* Meaningful envelope interaction: event details are locked until the letter opens.
   Without JS, the unlocked content remains visible. */
.invitation-ready #invitation-details {
  max-height:0;
  margin-top:0;
  padding-top:0;
  padding-bottom:0;
  opacity:0;
  transform:translateY(-26px);
  visibility:hidden;
  overflow:hidden;
  pointer-events:none;
  transition:max-height 1.8s cubic-bezier(.22,.7,.16,1),
             margin 1.2s ease,
             opacity 1.4s ease,
             transform 1.4s cubic-bezier(.2,.7,.2,1),
             visibility 0s linear 1.5s;
}
.invitation-ready.details-open #invitation-details {
  max-height:1500px;
  margin-top:74px;
  opacity:1;
  transform:translateY(0);
  visibility:visible;
  pointer-events:auto;
  transition:max-height 1.8s cubic-bezier(.22,.7,.16,1),
             margin 1.2s ease,
             opacity 1.4s ease .25s,
             transform 1.4s cubic-bezier(.2,.7,.2,1) .2s,
             visibility 0s;
}
.invitation-ready .event-card {
  opacity:0;
  transform:translateY(36px) scale(.96);
}
.invitation-ready.details-open .event-card {
  animation:invitationEventReveal 1.3s cubic-bezier(.16,.72,.2,1) .5s both;
}
.invitation-ready.details-open .event-card:nth-child(2) {animation-delay:.78s;}
@keyframes invitationEventReveal {
  from {opacity:0;transform:translateY(36px) scale(.96);}
  to {opacity:1;transform:translateY(0) scale(1);}
}
.invitation-ready.details-open .event-card:hover {transform:translateY(-5px);}
.envelope-area .caption {transition:color .8s;}
.invitation-ready.details-open .caption {color:var(--forest);}
.details-jump {
  display:inline-flex;
  align-items:center;
  gap:13px;
  margin:19px auto 0;
  padding:12px 16px;
  border-bottom:1px solid #ba9e60;
  color:var(--forest);
  font-size:10px;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  animation:heroLetter 1.2s ease both;
}
.details-jump:hover,.details-jump:focus-visible {color:#89713a;}
.details-jump[hidden] {display:none!important;}

/* Moonlit closing scene; a gradual ivory-to-forest transition ends the journey. */
footer.closing-scene {
  position:relative;
  isolation:isolate;
  min-height:740px;
  padding:154px 5% 26px;
  overflow:hidden;
  background:linear-gradient(180deg,#faf9f3 0%,#d4dbcc 13%,#416253 36%,#243d34 56%,#142820 100%);
  color:#fffaf0;
}
.closing-scene .closing-sky {
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
}
.closing-scene .closing-sky:after {
  content:'';
  position:absolute;
  left:50%;
  top:31%;
  width:min(700px,90vw);
  aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse,rgba(243,221,171,.12),transparent 65%);
  animation:closingHalo 11s ease-in-out infinite alternate;
}
.closing-star {
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#e8d29b;
  opacity:.1;
  box-shadow:0 0 12px #e8d29b;
}
.closing-star:nth-child(1){left:8%;top:35%}
.closing-star:nth-child(2){left:18%;top:56%;width:2px;height:2px}
.closing-star:nth-child(3){left:24%;top:23%;width:4px;height:4px}
.closing-star:nth-child(4){left:32%;top:44%}
.closing-star:nth-child(5){left:72%;top:28%;width:2px;height:2px}
.closing-star:nth-child(6){left:87%;top:40%}
.closing-star:nth-child(7){left:91%;top:64%;width:2px;height:2px}
.closing-star:nth-child(8){left:10%;top:78%}
.closing-star:nth-child(9){left:68%;top:79%;width:3px;height:3px}
.closing-star:nth-child(10){left:79%;top:52%;width:4px;height:4px}
.closing-star:nth-child(11){left:41%;top:72%;width:2px;height:2px}
.closing-star:nth-child(12){left:56%;top:38%;width:2px;height:2px}
.closing-visible .closing-star {animation:closingTwinkle 6s ease-in-out infinite alternate;}
.closing-visible .closing-star:nth-child(2n){animation-delay:-2.1s;animation-duration:8s}
.closing-visible .closing-star:nth-child(3n){animation-delay:-4.3s;animation-duration:7s}
.closing-inner {max-width:780px;margin:0 auto;position:relative;z-index:1;}
.closing-crescent {
  position:relative;
  height:112px;
  width:120px;
  margin:0 auto 22px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.moon-shape {
  display:block;
  width:79px;
  height:79px;
  border-radius:50%;
  background:linear-gradient(145deg,#f7ebca,#c4a66d);
  box-shadow:0 0 28px #e7d7b567,0 0 80px #efdb9a22;
  position:relative;
  transform:rotate(-24deg);
}
.moon-shape::before {
  content:'';
  position:absolute;
  left:27px;
  top:-13px;
  width:82px;
  height:82px;
  background:#456453;
  border-radius:50%;
  box-shadow:-8px 6px 15px -18px #0e2418;
}
.moon-spark{position:absolute;color:#e3c78c;font-size:24px;}
.moon-spark-a{right:7px;top:13px}
.moon-spark-b{left:9px;bottom:5px;font-size:16px}
.closing-scene .closing-eyebrow {color:#e8d7a9;letter-spacing:.32em;margin:7px 0 14px;}
.closing-monogram {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:10px auto 12px;
  color:#e8d8b5;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(48px,9vw,83px);
  line-height:1.1;
}
.closing-monogram i {font-size:.5em;font-weight:400;color:#bda56e;}
.closing-scene h2 {
  color:#fffaf0;
  font-size:clamp(50px,9vw,90px);
  line-height:.96;
  letter-spacing:-.04em;
  margin:5px 0 27px;
}
.closing-scene h2 i {color:#e1c99b;}
.closing-blessing {
  max-width:455px;
  margin:0 auto;
  font:italic 23px/1.45 'Cormorant Garamond',serif;
  color:#e8e5d9;
}
.closing-divider {color:#c7b27f;letter-spacing:15px;font-size:14px;margin:31px auto 18px;}
.closing-names {font:500 27px 'Cormorant Garamond',serif;color:#fff8e9;line-height:1.3;margin:0 auto 6px;}
.closing-names em {font-size:.8em;color:#d5bd84;padding:0 4px;}
.closing-thanks {color:#c2cebd!important;font-size:12px;margin:9px auto 0;}
.closing-scene .footer-bottom {
  position:relative;
  z-index:1;
  margin-top:79px;
  color:#c4d1c4;
  border-top-color:#82968a70;
}
.closing-scene.closing-ready .closing-inner > :is(.closing-crescent,.closing-eyebrow,.closing-monogram,h2,.closing-blessing,.closing-divider,.closing-names,.closing-thanks) {
  opacity:0;
  transform:translateY(25px);
}
.closing-visible .closing-inner > :is(.closing-crescent,.closing-eyebrow,.closing-monogram,h2,.closing-blessing,.closing-divider,.closing-names,.closing-thanks) {
  animation:closingRise 1.5s cubic-bezier(.2,.7,.2,1) both;
}
.closing-visible .closing-inner > .closing-crescent {animation-delay:.1s;}
.closing-visible .closing-inner > .closing-eyebrow {animation-delay:.28s;}
.closing-visible .closing-inner > .closing-monogram {animation-delay:.52s;}
.closing-visible .closing-inner > h2 {animation-delay:.75s;}
.closing-visible .closing-inner > .closing-blessing {animation-delay:.95s;}
.closing-visible .closing-inner > .closing-divider {animation-delay:1.15s;}
.closing-visible .closing-inner > .closing-names {animation-delay:1.28s;}
.closing-visible .closing-inner > .closing-thanks {animation-delay:1.45s;}
.closing-visible .closing-crescent {filter:drop-shadow(0 0 24px #e9d4a850);}
.closing-visible .moon-spark {animation:closingTwinkle 7s ease-in-out infinite alternate;}
@keyframes closingRise {
  from {opacity:0;transform:translateY(25px);filter:blur(3px);}
  to {opacity:1;transform:translateY(0);filter:blur(0);}
}
@keyframes closingTwinkle {0%,100%{opacity:.16;transform:scale(.85);}50%{opacity:.85;transform:scale(1.22);}}
@keyframes closingHalo {from{opacity:.4;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1.12)}}
@media(max-width:700px) {
  .invitation-ready.details-open #invitation-details {margin-top:60px;}
  .details-jump {font-size:9px;}
  footer.closing-scene {padding:130px 6% 22px;min-height:735px;}
  .moon-shape {width:73px;height:73px;}
  .closing-scene h2 {font-size:clamp(46px,12.7vw,67px);}
  .closing-monogram {font-size:clamp(54px,16vw,82px);}
  .closing-blessing {font-size:21px;}
  .closing-scene .footer-bottom {margin-top:60px;}
}
@media(prefers-reduced-motion:reduce) {
  .hero .arch-trace path {animation:none!important;stroke-dashoffset:0!important;}
  .hero .bismillah,.hero .arch .overline,.hero .verse,.hero .source,
  .hero .invite-text,.hero .date,.hero .arch .ornament,.arch-corner {
    animation:none!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
  .invitation-ready #invitation-details {transition:none!important;transform:none!important;}
  .invitation-ready.details-open .event-card {animation:none!important;opacity:1!important;transform:none!important;}
  .details-jump,.closing-star,.closing-sky:after,.moon-spark,
  .closing-inner > :is(.closing-crescent,.closing-eyebrow,.closing-monogram,h2,.closing-blessing,.closing-divider,.closing-names,.closing-thanks) {
    animation:none!important;
    transition:none!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
}

/* Keep longer names elegant rather than clipping the inner arch. */
.hero h1 span.is-long-name {
  font-size:.66em;
  letter-spacing:-.045em;
  line-height:1.14;
  overflow-wrap:anywhere;
}
@media(max-width:390px){
  .hero h1 span.is-long-name {font-size:.59em;}
}


/* Hero refresh — November 2026 invitation.
   Geometric eight-point stars replace floating hero sparkles. */
:root{
  --ivory:#FBF8F1;
  --forest:#2F3E36;
  --sage:#3F5B4B;
  --gold:#C2A66B;
  --gold-ink:#745A30;
  --text:#2F3E36;
}
.site-header{
  z-index:40;
  padding:20px 4.5%;
  min-height:65px;
  color:var(--forest);
}
.site-header .brand{white-space:nowrap;font-size:12px;letter-spacing:.11em;font-weight:600}
.site-header .main-nav{
  display:flex;
  align-items:center;
  gap:clamp(12px,2vw,28px);
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
.site-header .main-nav a{
  font-size:13px;
  font-weight:500;
  color:#34483C;
  transition:color .25s ease;
}
.site-header .main-nav a:hover,.site-header .main-nav a:focus-visible{color:#866c3c}
.site-header .icon-btn{width:40px;height:40px;color:var(--forest);border-color:#9b9c855c}
.site-header .icon-btn:focus-visible,.button:focus-visible,.main-nav a:focus-visible{
  outline:2px solid var(--gold-ink);
  outline-offset:4px;
}
.site-header .menu-toggle{display:none;padding:11px;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.menu-toggle span{width:17px;height:1.5px;background:var(--forest);display:block;border-radius:2px;transition:transform .25s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.hero{
  min-height:100svh;
  padding:76px 20px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg,#fffdf8 0%,var(--ivory) 48%,#f5f1e7 100%);
  overflow:hidden;
}
.hero-pattern{
  position:absolute;inset:-15% -10%;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%236E613B' stroke-width='1.15'%3E%3Cpath d='M48 8 L56 28 L72 24 L68 40 L88 48 L68 56 L72 72 L56 68 L48 88 L40 68 L24 72 L28 56 L8 48 L28 40 L24 24 L40 28 Z'/%3E%3Cpath d='M48 18 L78 48 L48 78 L18 48 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:96px 96px;
  opacity:.05;
  animation:geometricDrift 80s linear infinite alternate;
  will-change:transform;
}
.hero-inner{
  width:100%;max-width:690px;margin:auto;
  display:flex;flex-direction:column;align-items:center;
  gap:0;
  position:relative;z-index:1;
}
.hero .wedding-arch{
  display:block;
  width:min(485px,100%);
  max-width:100%;
  height:clamp(530px,77svh,690px);
  min-height:0;
  margin:0 auto;
  padding:9px;
  border:1px solid var(--gold);
  border-radius:260px 260px 0 0;
  box-shadow:0 20px 65px #715c3b1a,0 3px 10px #9d8a6816;
  background:linear-gradient(156deg,#fffdf8 0%,#fbf6ec 58%,#f5ebd9 100%);
  animation:cardEntrance 1.7s cubic-bezier(.22,.72,.2,1) both;
  isolation:isolate;
}
.hero .wedding-arch::before{
  content:'';
  position:absolute;inset:8px;
  border:1px solid #C2A66B9c;
  border-radius:255px 255px 0 0;
  pointer-events:none;
  z-index:2;
}
.hero .wedding-arch::after{display:none}
.hero .wedding-arch .arch-trace{inset:0;width:100%;height:100%;z-index:3}
.hero .wedding-arch .arch-trace path{
  stroke:var(--gold);stroke-width:2;
  animation:traceWeddingArch 3.8s cubic-bezier(.3,.02,.22,1) .15s forwards;
}
.hero .wedding-arch .arch-content{
  padding:clamp(30px,5.5svh,51px) 17px clamp(19px,3svh,25px);
  height:100%;
  width:100%;
  display:flex;flex-direction:column;
  align-items:center;justify-content:space-between;
  position:relative;z-index:1;
}
.hero .bismillah{
  font-family:'Amiri',serif;
  font-size:clamp(21px,3svh,29px);
  line-height:1.4;
  color:var(--gold-ink);
  margin:0;
  text-align:center;
}
.hero .arch .overline:not(.small){
  font-family:'DM Sans',sans-serif;
  letter-spacing:.18em;
  font-size:12px;
  font-weight:600;
  color:#596456;
  margin:0;
}
.hero .couple-names{
  width:100%;
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:clamp(35px,5.8svh,63px);
  line-height:.91;
  letter-spacing:-.045em;
  margin:0;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:0;
}
.hero .couple-names span{
  font-size:1em!important;
  font-weight:500;
  line-height:1.03;
  max-width:100%;
  letter-spacing:-.045em;
  overflow-wrap:normal;
  word-break:normal;
}
.hero .couple-names .stage-name{animation:heroStageRise 1.45s cubic-bezier(.2,.7,.2,1) 1s both;}
.hero .couple-names .stage-bride{animation-delay:1.22s;}
.hero .couple-names em{
  color:var(--gold-ink);
  font:italic 400 .53em/1.3 'Cormorant Garamond',serif;
  letter-spacing:0;
  margin:2px auto 4px;
  animation:heroStageRise 1.3s ease 1.65s both;
}
.hero-divider{
  width:min(74%,270px);
  display:flex;align-items:center;gap:12px;
  color:var(--gold-ink);
  font-size:16px;
  animation:heroStageRise 1.35s ease 2s both;
}
.hero-divider::before,.hero-divider::after{
  content:'';height:1px;flex:1;background:#a58c60;
}
.hero-event{width:100%;animation:heroStageRise 1.3s ease 2.25s both;}
.hero-event .date{
  display:block;
  color:#36493B;
  font-size:clamp(12px,1.65svh,14px);
  line-height:1.6;
  letter-spacing:.12em;
  font-weight:700;
  margin:0;
}
.hero-venue{
  color:#526255;
  font-size:clamp(12px,1.6svh,14px);
  margin:4px auto 0;
  line-height:1.5;
  overflow-wrap:anywhere;
  max-width:90%;
}
.hero-countdown{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  width:min(325px,100%);
  gap:7px;
  margin:3px 0 0;
  animation:heroStageRise 1.3s ease 2.6s both;
}
.hero-countdown .count-item{
  display:flex;align-items:center;flex-direction:column;justify-content:center;
  min-width:0;
  padding:7px 3px 5px;
  border:1px solid #bba678b3;
  background:#fffdf89c;
}
.hero-countdown b{
  font:500 clamp(23px,3.5svh,33px)/1 'Cormorant Garamond',serif;
  color:#35483C;
}
.hero-countdown span{
  margin-top:6px;
  font:600 12px/1.2 'DM Sans',sans-serif;
  letter-spacing:.05em;
  color:#5c6657;
}
.hero .count-caption{
  font:italic 15px/1.25 'Cormorant Garamond',serif;
  color:#536456;
  margin:0;
  animation:heroStageRise 1.3s ease 2.7s both;
}
.hero-actions{
  width:min(340px,100%);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
  animation:heroStageRise 1.3s ease 3s both;
}
.hero-quote{
  text-align:center;
  max-width:590px;
  border:0;
  padding:0 0 13px;
  margin:14px auto 0;
  animation:heroStageRise 1.55s ease 3.3s both;
}
.hero-quote p{
  font:italic 500 clamp(19px,2.4svh,24px)/1.2 'Cormorant Garamond',serif;
  color:#35463b;
  margin:0 0 2px;
}
.hero-quote cite{
  display:block;
  font:600 12px/1.35 'DM Sans',sans-serif;
  color:#645638;
  letter-spacing:.16em;
  font-style:normal;
}
.hero .scrollhint{display:none}
@keyframes geometricDrift{
  from{transform:translate3d(-7px,-7px,0)}
  to{transform:translate3d(20px,16px,0)}
}
@keyframes heroStageRise{
  from{opacity:0;transform:translate3d(0,18px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@media(min-width:1100px) and (max-height:730px){
  .hero{padding-top:72px;}
  .hero .wedding-arch{height:clamp(505px,75svh,600px)}
  .hero .wedding-arch .arch-content{padding-top:30px;padding-bottom:17px}
  .hero-quote{margin-top:8px}
}
@media(max-width:850px){
  .site-header{padding:15px 18px;min-height:65px}
  .site-header .main-nav{display:none;position:absolute;top:64px;left:auto;right:14px;
    transform:none;flex-direction:column;align-items:stretch;gap:0;width:min(280px,calc(100vw - 28px));
    background:#fffdf9;box-shadow:0 16px 45px #233b2e29;
    border:1px solid #c8b785a1;border-radius:5px;padding:8px;z-index:42;
  }
  .site-header .main-nav.nav-open{display:flex}
  .site-header .main-nav a{padding:14px 15px;font-size:14px;border-bottom:1px solid #d9d4c33d}
  .site-header .main-nav a:last-child{border-bottom:0}
  .site-header .menu-toggle{display:flex}
}
@media(max-width:700px){
  .hero{min-height:100svh;padding:90px 13px 30px;overflow:visible}
  .hero .wedding-arch{width:min(470px,100%);height:auto;min-height:640px;max-height:none;padding:8px}
  .hero .wedding-arch .arch-content{
    min-height:620px;
    padding:38px clamp(10px,4vw,22px) 22px;
    gap:11px;
  }
  .hero .couple-names{font-size:clamp(38px,10.2vw,56px)}
  .hero .bismillah{font-size:clamp(22px,5.7vw,27px)}
  .hero .arch .overline:not(.small){font-size:12px;letter-spacing:.1em}
  .hero-event .date{font-size:13px;letter-spacing:.06em}
  .hero-venue{font-size:13px}
  .hero .count-caption{font-size:15px}
  .hero-countdown b{font-size:clamp(23px,7vw,30px)}
  
  .hero-quote{margin:15px auto 0;padding:0 7px}
  .hero-quote p{font-size:clamp(20px,5.5vw,23px)}
  .hero-pattern{background-size:80px 80px}
}
@media(max-width:380px){
  .site-header .brand{font-size:10px;letter-spacing:.06em}
  .site-header .header-actions{gap:5px}
  .site-header .icon-btn{width:35px;height:35px}
  .hero{padding-top:80px}
  .hero .wedding-arch .arch-content{min-height:635px;padding-top:35px}
  .hero .couple-names{font-size:clamp(35px,10vw,42px)}
  .hero-actions{grid-template-columns:1fr;gap:8px}
  
  .hero-venue{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .hero-pattern,
  .hero .wedding-arch,.hero .wedding-arch .arch-trace path,
  .hero .wedding-arch .arch-content .hero-stage,
  .hero .couple-names span,.hero .couple-names em,
  .hero-quote{animation:none!important;transition:none!important;transform:none!important;opacity:1!important;filter:none!important}
  .hero .wedding-arch .arch-trace path{stroke-dashoffset:0!important}
}


/* Refined invitation shortcuts: elegant text links rather than filled CTA buttons. */
.hero-actions {
  width:min(340px,100%);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:clamp(14px,3vw,29px);
}
.hero-actions .hero-text-link {
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:6px 3px;
  color:#2F3E36;
  font:600 12px/1.4 'DM Sans',sans-serif;
  letter-spacing:.095em;
  text-transform:uppercase;
  text-decoration:none;
  border-bottom:1px solid #a48852;
  transition:color .25s ease,border-color .25s ease,transform .25s ease;
}
.hero-actions .hero-text-link span {
  color:#987641;
  font-size:15px;
  transition:transform .25s ease;
}
.hero-actions .hero-text-link:hover,
.hero-actions .hero-text-link:focus-visible {
  color:#745A30;
  border-color:#745A30;
  transform:translateY(-2px);
}
.hero-actions .hero-text-link:focus-visible{
  outline:2px solid #745A30;
  outline-offset:5px;
}
.hero-actions .hero-text-link:hover span{transform:translate(2px,-2px);}
@media(max-width:380px) {
  .hero-actions {gap:11px;flex-direction:column;}
  .hero-actions .hero-text-link {min-height:31px;padding:3px;}
}
@media(prefers-reduced-motion:reduce){
  .hero-actions .hero-text-link,.hero-actions .hero-text-link span{transition:none!important;transform:none!important;}
}

/* Interactive invitation book v4: genuine layered 3D page flips on desktop,
   cover-first single-sheet swipe experience on mobile. */
.book-experience{width:100%;max-width:960px;margin:64px auto 0;position:relative;text-align:center;}
.book-intro,.book-caption,.book-swipe-hint{
  font:600 12px/1.6 'DM Sans',sans-serif;
  letter-spacing:.15em;
  color:#536458;
}
.book-intro{margin:0 0 28px;color:#775e38}
.book-caption{margin:27px 0 10px;min-height:18px;}
.book-swipe-hint{display:none;}
.book-scene{
  width:min(810px,100%);
  margin:0 auto;
  perspective:1800px;
  position:relative;
  overflow:visible;
}
.book-object{
  height:clamp(415px,57vw,495px);
  width:100%;
  position:relative;
  transform-style:preserve-3d;
  transition:transform 1.55s cubic-bezier(.22,.65,.19,1);
  /* Keep preserve-3d intact: filters on this container would flatten the turning pages. */
}
.book-ready .book-object{transform:translateX(-25%);}
.book-ready.book-open .book-object{transform:translateX(0);}
.book-left-board,.book-right-board{
  position:absolute;top:0;height:100%;width:50%;
  border:1px solid #ccb987;
  background:linear-gradient(145deg,#fffaf0,#f3ebda 84%);
  box-shadow:inset 0 0 0 9px #fcf7ec, inset 0 0 0 10px #d4c5a1;
}
.book-left-board{
  left:0;border-radius:7px 0 0 7px;
  display:grid;place-items:center;
  color:#bd9d64;font-size:100px;
  opacity:1;
}
.book-left-board span{opacity:.22;}
.book-right-board{
  left:50%;border-radius:0 7px 7px 0;
  background:linear-gradient(90deg,#e4dac5 0%,#fffaf0 9%,#f8f0df 100%);
}
.book-spine{
  position:absolute;top:0;bottom:0;left:calc(50% - 5px);width:10px;z-index:26;
  background:linear-gradient(90deg,#94825d55,transparent 45%,#bead844d);
  pointer-events:none;
}
.book-ready:not(.book-open) .book-left-board{opacity:0;}
.book-cover,.book-leaf{
  width:50%;height:100%;position:absolute;top:0;left:50%;
  transform-origin:left center;
  transform-style:preserve-3d;
  transition:transform 1.48s cubic-bezier(.24,.7,.2,1),opacity .9s ease;
}
.book-cover{
  display:block;padding:0;border:0;background:transparent;
  text-align:center;cursor:pointer;z-index:75;
  transform:rotateY(0deg);
  box-shadow:7px 12px 23px #172f2438;
}
.book-ready.book-open .book-cover{
  transform:rotateY(-180deg);
  box-shadow:none;
  cursor:default;
  pointer-events:none;
}
.book-cover-front,.book-cover-inside,.book-face{
  position:absolute;inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  overflow:hidden;
}
.book-cover-front{
  color:#e9d3a0;
  padding:15px;
  background:linear-gradient(110deg,#162c24 0%,#2f4d3e 25%,#173a2d 65%,#10291f 100%);
  border:3px solid #143526;border-radius:1px 7px 7px 1px;
  box-shadow:inset 5px 0 15px #030f0a66,inset 0 0 0 5px #d4b97180;
}
.book-cover-front::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(44deg,transparent 0 37px,#dfc99c12 38px 39px,transparent 40px 80px);
  opacity:.36;
}
.book-cover-frame{
  position:relative;height:100%;padding:30px 14px 24px;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  border:1px solid #c5a76dd9;
  outline:1px solid #c5a76d70;outline-offset:-8px;
}
.book-cover-top,.book-cover-bottom{
  font:600 11px/1.5 'DM Sans',sans-serif;
  letter-spacing:.18em;max-width:100%;color:#f0e3bb;
}
.book-cover-top{padding-top:5px;}
.book-cover-bottom{font-size:10px;padding-bottom:5px;letter-spacing:.1em}
.book-cover-ornament{font:500 58px/1 'Amiri',serif;color:#e2c889;text-shadow:0 0 25px #ddbe856c;}
.book-cover-heading{
  font:500 clamp(35px,4.1vw,53px)/.95 'Cormorant Garamond',serif;
  color:#fff7df;
}
.book-cover-heading em{font-weight:400;color:#e0c58e;display:block;margin-top:5px;}
.book-cover-names{
  font:500 clamp(20px,2.75vw,30px)/1.1 'Cormorant Garamond',serif;
  color:#fff4dc;display:flex;flex-direction:column;gap:3px;
  overflow-wrap:anywhere;
}
.book-cover-names i{color:#d5bf91;font-size:20px;}
.book-cover-inside{
  transform:rotateY(180deg);
  background:linear-gradient(125deg,#f5eedc,#e9d9b4);
  color:#435c48;
  display:grid;place-items:center;padding:14px;
  border:2px solid #bca675;border-radius:7px 2px 2px 7px;
}
.book-cover-inside-frame{
  width:100%;height:100%;border:1px solid #c4af82;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
}
.book-cover-inside-frame>span{font-size:60px;color:#bc9e63}
.book-cover-inside-frame strong{font:500 43px/1 'Cormorant Garamond',serif}
.book-cover-inside-frame small{font:italic 18px/1.3 'Cormorant Garamond',serif;padding:0 20px}
.book-ready:not(.book-open) .book-leaf{visibility:hidden;}
.book-leaf{transform:rotateY(0);box-shadow:3px 3px 8px #213e261b;}
.book-leaf.is-flipped{transform:rotateY(-180deg);}
.book-face{
  border:1px solid #d1c39e;
  background:linear-gradient(120deg,#e9dfcb 0%,#fffdf6 10%,#fff9ec 88%,#f1e9d6 100%);
  padding:clamp(19px,2.3vw,36px) clamp(14px,2.6vw,33px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;
  color:#354b3d;
}
.book-page-front{box-shadow:inset 8px 0 17px #8f795d13;border-radius:0 5px 5px 0;}
.book-page-back{
  transform:rotateY(180deg);
  border-radius:5px 0 0 5px;
  box-shadow:inset -8px 0 19px #8f795d21;
  justify-content:center;
  gap:16px;
}
.book-face::before{
  content:'';position:absolute;inset:11px;
  border:1px solid #c6b18991;
  pointer-events:none;
}
.book-face .book-kicker,.book-page-back small{
  font:600 11px/1.4 'DM Sans',sans-serif;
  letter-spacing:.17em;
  color:#79623c;
  max-width:100%;
}
.book-page-ornament{font-size:23px;color:#a38853;letter-spacing:8px;}
.book-face h3{
  font:500 clamp(32px,4vw,45px)/.93 'Cormorant Garamond',serif;
  margin:0;letter-spacing:-.025em;color:#30483a;
}
.book-face h3 em{color:#9c804a;font-weight:400;}
.book-face p{
  font:400 13px/1.8 'DM Sans',sans-serif;
  max-width:295px;margin:0;color:#526454;
}
.book-face .book-arabic{
  font:400 clamp(17px,2.8vw,22px)/1.65 'Amiri',serif;
  color:#977744;
}
.book-couple{
  font:500 clamp(25px,3vw,37px)/.97 'Cormorant Garamond',serif;
  display:flex;flex-direction:column;gap:4px;
  color:#354c3c;max-width:100%;overflow-wrap:anywhere;
}
.book-couple i{font:italic 400 19px 'Cormorant Garamond',serif;color:#a58a50;}
.book-face .book-invitation-date{font-size:12px;font-weight:600;color:#6e5837;}
.book-page-number{
  position:absolute;bottom:20px;right:23px;
  font:600 11px 'DM Sans',sans-serif;color:#807456;letter-spacing:.16em;
}
.book-verse-mark{color:#ae945f;font:50px 'Cormorant Garamond',serif;}
.book-page-back p{
  font:italic 500 29px/1.23 'Cormorant Garamond',serif;
  color:#4e664f;
  max-width:235px;
}
.book-event-panel{width:100%;max-width:290px;margin:5px 0 0;}
.book-event-panel .event-card{
  margin:0;padding:15px 10px;
  min-height:0;transform:none;box-shadow:none;
  border:1px solid #d2be90;
  background:#fffcf4ae;
}
.book-event-panel .event-card:before{display:none}
.book-event-panel .event-card:hover{transform:none;box-shadow:none;}
.book-event-panel .event-icon{font-size:23px;margin:0 0 4px}
.book-event-panel .event-card h3{font-size:27px;margin:0 0 8px;}
.book-event-panel .event-card strong{font-size:12px;line-height:1.65;color:#354b3a;}
.book-event-panel .event-card p{font-size:12px;line-height:1.5;margin:8px auto;color:#34483c;}
.book-event-panel .event-card small{font-size:11px;color:#785c32;}
.book-face .book-blessing{font:italic 500 24px/1.3 'Cormorant Garamond',serif;color:#456149;}
.book-ending{font:500 23px/1.25 'Cormorant Garamond',serif;color:#426047;}
.book-ending i{font-size:16px;color:#a18654}
.book-controls{
  max-width:620px;display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,3vw,35px);
  margin:19px auto 5px;
}
.book-controls[hidden]{display:none!important;}
.book-control,.book-close-link{
  background:transparent;
  border:0;border-bottom:1px solid #8f7040;
  padding:8px 5px;
  color:#344c3a;
  font:600 12px/1.4 'DM Sans',sans-serif;
  letter-spacing:.09em;
}
.book-control:disabled{opacity:.32;cursor:not-allowed;}
.book-control:focus-visible,.book-close-link:focus-visible,.book-cover:focus-visible{
  outline:2px solid #745A30;outline-offset:6px;
}
.book-pagination{
  min-width:150px;font:500 12px/1.5 'DM Sans',sans-serif;
  letter-spacing:.07em;color:#5f684f;
}
.book-close-link{margin:5px auto 0;}
.book-close-link[hidden]{display:none!important;}
.book-ready:not(.book-open) .book-controls,.book-ready:not(.book-open) .book-close-link{display:none;}
.book-ready.book-open .book-cover{z-index:29;}
@media (max-width:700px) {
  .book-experience{margin-top:45px;}
  .book-intro{font-size:11px;margin-bottom:20px;}
  .book-scene{width:min(420px,100%);overflow:hidden;padding:2px;}
  .book-object{height:clamp(440px,122vw,520px);width:100%;transform:none!important;}
  .book-left-board{display:none;}
  .book-right-board{left:0;width:100%;border-radius:5px}
  .book-spine{left:0;}
  .book-leaf,.book-cover{left:0;width:100%;transform-origin:left center;}
  .book-cover{box-shadow:5px 8px 21px #172f2438;}
  .book-ready.book-open .book-cover{transform:rotateY(-180deg);}
  .book-face{gap:10px;padding:27px 23px 32px;}
  .book-face h3{font-size:clamp(34px,10vw,46px);}
  .book-face p{font-size:13px;line-height:1.65;}
  .book-cover-heading{font-size:clamp(43px,11vw,58px);}
  .book-cover-names{font-size:clamp(29px,8vw,38px);}
  .book-event-panel{max-width:300px;}
  .book-controls{gap:10px;justify-content:space-between;}
  .book-pagination{min-width:115px;font-size:11px;}
  .book-control{font-size:11px;}
  .book-swipe-hint{display:block;font-size:10px;letter-spacing:.08em;margin:13px auto 0;}
}
@media(max-width:390px){
  .book-object{height:clamp(465px,134vw,520px);}
  .book-face{padding:24px 18px 30px;gap:8px}
  .book-cover-top{font-size:10px;}
  .book-page-ornament{font-size:20px;}
}
@media(prefers-reduced-motion:reduce){
  .book-object,.book-leaf,.book-cover,.book-controls,.book-face{animation:none!important;transition:none!important;}
  .book-ready.book-open .book-cover{visibility:hidden;opacity:0;}
  .book-leaf.is-flipped{visibility:hidden;opacity:0;}
}

/* Offline / no-script invitation details remain readable beneath the decorative book. */
.book-noscript {
  margin:24px auto 0;max-width:620px;
  padding:24px 28px;border:1px solid #c2a66b;
  background:#fffbf1;
  color:#30483b;
}
.book-noscript h3{font:500 30px 'Cormorant Garamond',serif;margin:0 0 9px;}
.book-noscript p{font:400 13px/1.75 'DM Sans',sans-serif;margin:8px auto;}
/* Make the book the scroll destination without covering it under nearby content. */
.book-experience{scroll-margin-top:18px;}

/* Wedding memories, fixed public invitation. Existing styles are preserved. */
#edit[hidden],#settings[hidden]{display:none!important;}
.hero-event-summary {
  margin:7px auto 0;
  color:#705932;
  font:600 12px/1.5 'DM Sans',sans-serif;
  letter-spacing:.035em;
  max-width:94%;
}
.book-event-panel .event-time{
  margin:5px auto 8px!important;
  color:#936f36!important;
  font-weight:700!important;
  font-size:13px!important;
}
.book-event-panel .event-card strong{display:block;line-height:1.5;}
.book-event-panel .event-card{padding:14px 10px;}
.book-event-panel .event-card p{overflow-wrap:anywhere;}
.memories{
  background:linear-gradient(165deg,#fcf9f1 0%,#f3ede2 50%,#faf6eb 100%);
  isolation:isolate;
}
.memories::before{
  content:'';
  position:absolute;inset:0;pointer-events:none;opacity:.04;
  background-image:radial-gradient(#9f874f 1px,transparent 1px);
  background-size:34px 34px;
}
.memories-gallery{
  max-width:965px;
  margin:42px auto 0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 148px minmax(0,1fr);
  align-items:center;
  gap:clamp(15px,3vw,35px);
}
.memory-frame{
  margin:0;
  padding:13px 13px 0;
  background:#fffdfa;
  border:1px solid #d2c398;
  box-shadow:0 13px 35px #45422819,0 2px 5px #2e3a3012;
  transform:rotate(-2deg);
  transition:transform .55s ease,box-shadow .55s ease;
}
.memory-frame:last-child{transform:rotate(2deg);}
.memory-frame:hover{transform:rotate(0) translateY(-7px);box-shadow:0 20px 42px #4542282c;}
.memory-frame img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4 / 5;
  object-fit:cover;
  object-position:center 21%;
  border:1px solid #cabd9e55;
  filter:saturate(.8) sepia(.08);
}
.memory-frame:last-child img{object-position:center 14%;}
.memory-frame figcaption{
  display:flex;
  flex-direction:column;
  gap:5px;
  align-items:center;
  padding:19px 8px 24px;
}
.memory-number{color:#886b3b;letter-spacing:.16em;font:600 11px 'DM Sans',sans-serif;}
.memory-frame strong{
  color:#314a3d;
  font:500 clamp(34px,4vw,47px)/1 'Cormorant Garamond',serif;
}
.memory-frame small{
  color:#606e61;font:italic 19px/1.25 'Cormorant Garamond',serif;
}
.memories-bridge{
  display:flex;flex-direction:column;gap:19px;
  align-items:center;color:#9e8250;
}
.memories-bridge span{font:42px 'Cormorant Garamond',serif;}
.memories-bridge em{
  font:italic 500 28px/1.08 'Cormorant Garamond',serif;color:#405847;
}
@media(max-width:710px){
  .memories-gallery{grid-template-columns:minmax(0,1fr);max-width:360px;gap:22px;}
  .memory-frame,.memory-frame:last-child{transform:none;width:100%;}
  .memories-bridge{gap:2px;}
  .memories-bridge span{font-size:27px;}
  .memories-bridge em{font-size:26px;}
  .hero-event-summary{font-size:12px;letter-spacing:0;}
  .book-event-panel .event-card{padding:13px 7px;}
}
@media(max-width:380px){
  .memories-gallery{margin-top:25px;}
  .memory-frame{padding:10px 10px 0;}
  .book-face{gap:7px;}
  .book-event-panel .event-card h3{font-size:24px;}
}
@media(prefers-reduced-motion:reduce){
  .memory-frame{transition:none!important;}
  .memory-frame:hover{transform:none!important;}
}