[data-preview="index"] .hero h1 {
  font-size: clamp(2.1rem, 4.2vw, 4.2rem);
  text-wrap: pretty;
}

.hero .culture-slogan {
  margin: 0 0 8px;
  color: var(--lavender);
  font: 500 clamp(1.18rem, 2.4vw, 1.65rem)/1.35 'Playfair Display', Georgia, serif;
}

.hero .personal-slogan {
  margin: 0;
  color: var(--cream-white);
  font-style: italic;
}

[data-preview="index"] .hero .actions { max-width: 600px; }
[data-preview="index"] .music-card { display: flex; flex-direction: column; }
[data-preview="index"] .music-card > div:last-child { margin-top: auto; }

.wedding-card-copy {
  padding: 16px clamp(16px, 3vw, 28px) 0;
  text-align: center;
}

.wedding-card-copy h3 {
  margin: 0 0 8px;
  color: var(--cream-white);
  font: 500 clamp(1.35rem, 3vw, 1.85rem)/1.2 'Playfair Display', Georgia, serif;
}
.wedding-card-copy p { margin: 0; color: var(--lavender); line-height: 1.5; }

[data-preview="index"] .moers-feature { max-width: 760px; margin: 48px auto 0; }
.moers-feature h3 {
  color: var(--deep);
  font: 500 clamp(1.45rem, 3vw, 2rem)/1.25 'Playfair Display', Georgia, serif;
}
[data-preview="index"] .moers-feature .media {
  display: block;
  aspect-ratio: 16 / 9;
  margin: 18px 0 0;
  border-radius: 14px;
  background: var(--deep);
  overflow: hidden;
}
.moers-feature .media > :is(button, video) { width: 100%; height: 100%; }
.moers-feature .media > [hidden] { display: none; }
.moers-feature .play {
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
}
.moers-feature .play > * { grid-area: 1 / 1; }
.moers-feature .play img { display: block; width: 100%; height: 100%; object-fit: cover; }
.moers-feature .play > span { z-index: 1; padding: 12px 18px; font-weight: 700; }
.moers-feature .play:focus-visible { outline-offset: -5px; }

.wedding-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 18px;
}
.wedding-hero-photo { aspect-ratio: 16 / 9; }
.wedding-related { margin-top: 30px; }

@media (max-width: 850px) {
  [data-preview="index"] .hero .actions { margin-top: 22px; }
  [data-preview="index"] .hero .actions .btn { padding: 11px 13px; }
}

@media (max-width: 850px) {
  body.mobile-nav-ready[data-preview] > header.mobile-header {
    background: linear-gradient(110deg, var(--cream-white), var(--lavender));
  }
  [data-preview="index"] .hero-content { padding-top: clamp(205px, 46vw, 355px); }
  [data-preview="index"] .hero .lead { font-size: 1rem; line-height: 1.6; }
}