/* Decorative artwork moments across the invitation */
.hero { isolation: isolate; }
.hero::before { z-index: 0; pointer-events: none; }
.hero-copy { position: relative; z-index: 2; }
.hero-art { z-index: 1; }
.hero-date { display: inline-flex; align-items: center; gap: .9rem; margin: 1.85rem 0 2rem; padding: .52rem .95rem; border-top: 1px solid rgba(181,139,66,.55); border-bottom: 1px solid rgba(181,139,66,.55); }
.hero-date span { display: grid; gap: .12rem; text-align: center; }
.hero-date b { color: var(--wine); font-family: var(--serif); font-size: .92rem; font-weight: 500; }
.hero-date small { color: var(--gold); font-family: var(--sans); font-size: .52rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.hero-date i { color: var(--gold); font-size: .9rem; font-style: normal; }

.event-card { position: relative; overflow: hidden; }
.event-card > :not(.event-art) { position: relative; z-index: 1; }
.event-art { position: absolute; width: 52%; height: 100%; right: -8%; bottom: -12%; object-fit: contain; object-position: right bottom; opacity: .2; pointer-events: none; filter: saturate(.86); }
.event-card.featured .event-art { opacity: .18; }
.schedule .container { position: relative; overflow: hidden; }
.schedule .container { overflow: visible; }
.schedule-line { margin-bottom: 1.5rem; }
.calendar-chase { height: 255px; max-width: 800px; margin: 0 auto; display: flex; align-items: end; justify-content: space-between; position: relative; pointer-events: none; }
.chase-groom, .chase-bride { width: 260px; height: 245px; object-fit: contain; object-position: center bottom; position: relative; z-index: 1; }
.chase-bride { width: 275px; }
.chase-line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; }
.chase-line path { fill: none; stroke: rgba(181,139,66,.72); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 3 8; }
.rsvp-intro { position: relative; overflow: hidden; isolation: isolate; }
.rsvp-intro > :not(.rsvp-art) { position: relative; z-index: 1; }
.rsvp-art { display: none; }

/* Layered editorial memories wall */
.gallery-grid { display: grid; grid-template-columns: 1.16fr .84fr 1fr; grid-template-rows: 218px 218px 178px; gap: 1rem; }
.gallery-item { border: 1px solid rgba(181,139,66,.28); border-radius: 2px; }
.gallery-item:first-child { grid-row: span 2; }
.gallery-pink { background: linear-gradient(135deg, #f9dce1, #ebafbd); }
.gallery-pink img { padding: .35rem; }
.gallery-black { grid-row: span 2; }
.gallery-family { grid-column: span 2; }
.gallery-portrait { background: #e8d9c8; }
.gallery-portrait img { object-position: center 24%; }
.gallery-joy { background: #f2d9bb; grid-column: 3; grid-row: 1; }
.image-number { left: .85rem; right: auto !important; top: .75rem; bottom: auto !important; background: rgba(56,29,32,.65); width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; font-size: .55rem !important; }
.image-caption { position: absolute; z-index: 2; left: 1.1rem; right: 1.1rem; bottom: 1rem; color: white; text-align: left; text-transform: uppercase; letter-spacing: .16em; font-size: .53rem; text-shadow: 0 1px 4px #2c1821; opacity: 0; transform: translateY(8px); transition: .3s; }
.image-caption em { display: block; margin-top: .25rem; font-family: var(--serif); font-size: 1.1rem; font-style: italic; text-transform: none; letter-spacing: 0; }
.gallery-item:hover .image-caption { opacity: 1; transform: none; }

@media (max-width: 767px) {
  .hero-date { gap: .55rem; padding: .48rem .58rem; margin: 1.35rem auto 1.65rem; }
  .hero-date b { font-size: .75rem; }.hero-date small { font-size: .43rem; letter-spacing: .1em; }
  .event-art { width: 46%; opacity: .12; right: -5%; }
  .schedule-line { margin-bottom: .75rem; }
  .calendar-chase { height: 170px; width: 100%; padding: 0 .6rem; }
  .chase-groom, .chase-bride { height: 160px; width: 142px; }
  .chase-bride { width: 150px; }
  .gallery-grid { grid-template-columns: 1.05fr .95fr; grid-template-rows: 225px 160px 160px 125px; gap: .65rem; }
  .gallery-item:first-child { grid-row: span 2; }
  .gallery-black { grid-row: span 2; }
  .gallery-family { grid-column: span 2; }
  .gallery-portrait, .gallery-joy { grid-row: auto; }
  .gallery-joy { display: none; }
  .image-caption { opacity: 1; transform: none; left: .75rem; bottom: .65rem; }
  .image-caption em { font-size: .95rem; }
}