.cover {
  background:
    linear-gradient(180deg, rgba(59,10,16,.78), rgba(101,29,39,.91)),
    url('assets/indian-details-bg.png') center / cover no-repeat;
}

.events {
  background:
    linear-gradient(180deg, rgba(58,11,18,.91), rgba(85,21,30,.95)),
    url('assets/indian-details-bg.png') center / cover fixed no-repeat;
}

.countdown {
  background:
    linear-gradient(180deg, rgba(70,17,27,.84), rgba(101,29,39,.9)),
    url('assets/mandap-bg.png') center / cover no-repeat;
}

.closing {
  background:
    linear-gradient(180deg, rgba(91,23,34,.86), rgba(50,9,16,.94)),
    url('assets/mandap-bg.png') center / cover no-repeat;
}

@media (max-width: 760px) {
  .events { background-attachment: scroll; }
}

.map-preview {
  display: block;
  height: auto;
  overflow: hidden;
  background: #cde9e1;
  border: 1px solid rgba(111, 86, 52, .35);
  box-shadow: 0 18px 45px rgba(79, 44, 27, .13);
}

.map-preview::before,
.map-preview::after { display: none; }
.map-preview img { display: block; width: 100%; height: auto; }

.ganesha-emblem { display: block; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(35,5,9,.3)); }
.ganesha-cover { width: 124px; margin: 0 auto 1.2rem; }
.ganesha-hero { width: 154px; margin: 0 auto 2rem; }

.invitation .paper-inner {
  width: min(100%, 820px);
  max-width: 820px;
  min-height: 1120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14rem 8rem 15rem;
  border: 0;
  background: #f1e6d2 url('assets/invitation-frame.jpg') center / 100% 100% no-repeat;
  box-shadow: 0 24px 75px rgba(78,42,21,.16);
  overflow: hidden;
}

.invitation .paper-inner::before {
  display: none;
}

.invitation .paper-inner h2 i { display: block; margin: .9rem 0; font: italic 1.15rem var(--serif); text-transform: lowercase; letter-spacing: .2em; color: #a0733c; }

.wedding-frame { position: absolute; inset: 0; pointer-events: none; color: #a97532; }
.wedding-frame::before,
.wedding-frame::after { content: ''; position: absolute; left: 13%; right: 13%; height: 1px; background: linear-gradient(90deg,transparent,#b9853f,transparent); }
.wedding-frame::before { top: 43px; }
.wedding-frame::after { bottom: 35px; }
.frame-corner { position: absolute; display: flex; align-items: center; gap: 5px; color: #9d6b2d; font-size: 1.15rem; letter-spacing: 0; text-shadow: 0 1px #fff7; }
.frame-corner i { color: #762632; font-size: .65rem; font-style: normal; }
.frame-corner.tl { top: 22px; left: 24px; transform: rotate(-24deg); }
.frame-corner.tr { top: 22px; right: 24px; transform: rotate(24deg); }
.frame-corner.bl { bottom: 20px; left: 24px; transform: rotate(24deg); }
.frame-corner.br { bottom: 20px; right: 24px; transform: rotate(-24deg); }
.frame-toran { position: absolute; top: 25px; left: 50%; transform: translateX(-50%); white-space: nowrap; color: #b27b30; font-size: .68rem; letter-spacing: .18em; }

@media (max-width: 600px) {
  .ganesha-cover { width: 98px; margin-bottom: .75rem; }
  .ganesha-hero { width: 120px; margin-bottom: 1.5rem; }
  .cover-flowers { margin-bottom: .8rem; }
  .cover h1 { margin-block: 1.15rem; }
  .seal { margin-top: 1.2rem; }
  .invitation { padding-inline: 3vw; }
  .invitation .paper-inner { min-height: 142vw; padding: 20vw 13vw 24vw; }
  .invitation .paper-inner h2 { font-size: clamp(2.8rem, 15vw, 4.5rem); }
  .frame-toran { font-size: .52rem; letter-spacing: .07em; }
  .frame-corner { font-size: .9rem; }
  .frame-corner.tl,.frame-corner.bl { left: 17px; }
  .frame-corner.tr,.frame-corner.br { right: 17px; }
}
