/* One continuous parchment scroll, with ruby ink and small ornaments at its edges. */
:root { --sargam-paper: #f6efdf; --sargam-ruby: #77243c; --sargam-brass: #b89567; }
body { background: var(--sargam-paper); }
#invitation-page main {
  background: linear-gradient(#f6efdfdd,#f6efdfdd),url('assets/paper-texture.webp') center top/680px;
  overflow: clip;
}
#invitation-page :is(#invitation,#events,#story,#gallery,#travel,#closing) {
  background: transparent;
  color: #513d2e;
  position: relative;
}
#home::after {
  content: ''; position: absolute; z-index: 2; left: 0; right: 0; bottom: -1px;
  height: clamp(75px,13svh,145px); pointer-events: none;
  background: linear-gradient(transparent,var(--sargam-paper));
}
#home .hero-bottom { z-index: 3; }
#invitation { padding-top: 54px; padding-bottom: 40px; }
#events .celebrations-heading { padding-top: 40px; }
#story { padding-top: 55px; padding-bottom: 40px; }
#gallery { padding-top: 32px; padding-bottom: 40px; }
#travel { padding-top: 44px; }
#travel .venue-copy h3,#travel .venue-copy .text-button { color: #77243c; }
#invitation-page .event-chapter { overflow: visible; padding-bottom: 32px; }
#invitation-page .event-media { filter: none; }
#invitation-page .event-frame-panel { filter: drop-shadow(0 12px 20px #6a482323); }
#invitation-page .event-copy { padding-bottom: 60px; }
#invitation-page .event-chapter-title { font-size: clamp(38px,8.7vw,48px); }
/* The animals belong to the page margin, independent of the moving text. */
#invitation-page .event-peacock,#invitation-page .event-camel {
  z-index: 1; width: clamp(68px,19vw,110px); bottom: 24px;
  right: calc((100% - 100vw)/2 - 8px); left: auto; pointer-events: none;
}
#invitation-page .event-camel { left: calc((100% - 100vw)/2 - 8px); right: auto; }
#invitation-page .event-peacock img,#invitation-page .event-camel img { opacity: .58; }
.edge-jhumar {
  position: absolute; z-index: 1; top: -16px; width: clamp(67px,15vw,116px);
  height: clamp(160px,28vw,250px); pointer-events: none; transform-origin: 50% 0;
}
.edge-jhumar--right { right: -30px; }
.edge-jhumar--left { left: -30px; }
.edge-jhumar img {
  display: block; width: 100%; height: 100%; object-fit: contain; object-position: top;
  opacity: .6; transform-origin: 50% 0;
  animation: jhumar-sway 6.5s ease-in-out infinite alternate paused;
}
.edge-jhumar.is-ornament-active img { animation-play-state: running; }
#travel .edge-jhumar { top: -8px; }
#closing.closing-finale {
  min-height: 0; padding: 65px 32px 80px; text-align: center;
}
#closing-message { max-width: 560px; margin: auto; }
#closing-message h2 { font: 400 clamp(44px,8vw,72px)/1.12 'Pinyon Script','Cormorant Garamond',serif; margin: 18px 0; }
#closing-message h2 em { font: italic 400 .5em 'Cormorant Garamond',serif; padding: 0 5px; }
#closing-message > p:not(.eyebrow) { font: 400 19px/1.5 'Cormorant Garamond',Georgia,serif; }
#closing-message .hashtag { margin-top: 15px; font-size: 15px; color: #936f4d; }
#closing .closing-date { margin-top: 28px; font-size: 22px; }
#closing .closing-reply { margin: 18px auto 0; max-width: 380px; background: none; }
#closing #rsvp-button {
  border: 1px solid #ad895e; border-radius: 2px;
  background: #77243c; color: #fff3df; padding: 12px 28px;
  font-size: 12px; letter-spacing: .04em; text-decoration: none;
}
#closing #rsvp-button:hover { background: #8c3650; }
#closing .rsvp-note { font-size: 10px; line-height: 1.6; max-width: 300px; margin: 12px auto 0; color: #826c57; }
#closing .calendar-actions { margin: 22px auto 0; gap: 24px; font-size: 11px; }
#closing .calendar-actions a { display: inline-flex; align-items: center; color: #77243c; text-decoration: underline; text-underline-offset: 5px; }
#closing #replay-opening { font-size: 10px; margin: 18px auto 0; color: #80664c; }
#closing footer { margin-top: 30px; font-size: 9px; color: #8a735b; }
#closing .edge-jhumar { top: 0; }
@keyframes jhumar-sway { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }
@media (min-width:900px), (min-width:700px) and (orientation:landscape) {
  #invitation-page .event-chapter { padding-block: 8px 24px; }
  #invitation-page .event-copy { padding-bottom: 38px; }
  #invitation-page .event-peacock,#invitation-page .event-camel { bottom: 80px; }
  #story { padding-block: 70px 45px; }
  #closing.closing-finale { padding-block: 65px 65px; }
}
@media (max-width:360px) {
  #invitation-page .event-chapter-title { font-size: 36px; }
  #closing.closing-finale { padding-inline: 24px; }
  .edge-jhumar--right { right: -28px; }
  .edge-jhumar--left { left: -28px; }
}
@media (prefers-reduced-motion:reduce) { .edge-jhumar img { animation: none; } }