/* =====================================================
   Two fixed background layers for seamless crossfade
   ===================================================== */
#site-bg,
#site-bg2 {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: #111;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: opacity 0.6s ease;
  filter: sepia(25%) brightness(0.88) saturate(0.82) contrast(0.95);
}

#site-bg  { background-image: url("../images/BG-HERO.JPG"); opacity: 1; z-index: -1; }
#site-bg2 { background-image: url("../images/BG-HERO.JPG"); opacity: 0; z-index: -2; }

/* =====================================================
   Sections — small gap between cards so background
   peeks through, like floors of a building.
   The gap height controls how much image is visible.
   ===================================================== */
.bg-photo-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  margin: 0 0 100vh;  /* full screen gap so image is clearly visible */
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: transparent;
}

/* Paper card — taller than viewport so there's always a moment
   it fully covers the screen, letting us swap bg invisibly */
.paper-card {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 105vh;
  margin: 0;
  padding: 6rem 3rem;
  border-radius: 0;
  border: none;
  font-size: 0.94rem;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  box-shadow: 0 -8px 40px rgba(0,0,0,0.25);
}

.paper-card > * { position: relative; z-index: 1; }

/* Paper texture */
.paper-card--details,
.paper-card--schedule,
.paper-card--venue,
.paper-card--travel,
.paper-card--rsvp,
.paper-card--story {
  background-color: #f5ede0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
  box-shadow:
    0 -6px 40px rgba(0,0,0,0.22),
    inset 0 0 80px rgba(180,150,100,0.07);
}

.paper-card--details  { background-color: #f6ede1; }
.paper-card--schedule { background-color: #f2e9dc; }
.paper-card--venue    { background-color: #f5ecde; }
.paper-card--travel   { background-color: #f3eadd; }
.paper-card--rsvp     { background-color: #f6eedf; }
.paper-card--story    { background-color: #f4ebd8; }


/* Two column grid */
.two-col {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2.5rem;
  align-items: flex-start;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}