/* ==========================================================================
   Weddings page — everything specific to weddings.html only.
   Shared tokens, nav, buttons, section base, pricing, connect form, and
   footer live in styles.css and are reused here.
   ========================================================================== */

/* ==========================================================================
   Hero — the shared video-hero shell (.hero, .hero__bg-video, .hero__frame,
   .hero__content, .hero__headline, .hero__subhead, .hero__actions) lives in
   styles.css since real-estate.html now uses it too. Only the wedding-only
   "flashback" cycling-word effect stays here.
   ========================================================================== */
.hero__line {
  display: block;
  font-size: clamp(1.1rem, 3vw, 1.9rem);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.hero-highlight {
  display: block;
  font-size: 2.85em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--white);
  line-height: 1.1;
  margin-block: 0.1em;
  animation: flashback-cycle 5.4s steps(1) infinite;
}

@keyframes flashback-cycle {
  0%,     11.11% { font-family: 'Fraunces', serif; }
  11.12%, 22.21% { font-family: 'Anton', sans-serif; letter-spacing: 0.02em; }
  22.22%, 33.32% { font-family: 'Cormorant Garamond', serif; font-style: italic; }
  33.33%, 44.43% { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.04em; }
  44.44%, 55.54% { font-family: 'Allura', cursive; letter-spacing: 0; }
  55.55%, 66.65% { font-family: 'Cinzel', serif; letter-spacing: 0.05em; }
  66.66%, 77.76% { font-family: 'Caveat', cursive; letter-spacing: 0; }
  77.77%, 88.87% { font-family: 'Playfair Display', serif; }
  88.88%, 100%   { font-family: 'Poiret One', sans-serif; letter-spacing: 0.06em; font-weight: 400; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-highlight { animation: none; font-family: var(--font-display); }
}

/* ==========================================================================
   Films
   ========================================================================== */
.mission > .filmstrip:first-of-type {
  margin-top: calc(-1 * var(--space-6));
  margin-bottom: var(--space-4);
}
.mission > .filmstrip:last-of-type {
  margin-top: var(--space-4);
  margin-bottom: calc(-1 * var(--space-6));
}

.films-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 700px) {
  .films-grid { grid-template-columns: repeat(2, 1fr); }
}

.film-card__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--charcoal);
  overflow: hidden;
  border: 1px solid var(--bone);
}
.film-card__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.film-card__caption {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--stone);
  margin-top: var(--space-2);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Mission
   ========================================================================== */
.mission { padding-block: var(--space-6); }
.mission__content { max-width: 760px; text-align: center; }
.mission__quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  line-height: 1.5;
  color: var(--bone);
}
.mission__attribution {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

/* .about / .about__* now lives in styles.css — real-estate.html and
   social-media.html use it too. */