/* Scene 5 — the two families, under the calendar slide.
 *
 * Same visual system as scene 4: the calendar-base pattern inside the
 * 1080x1920 .frame (so every size below is a DESIGN px scaled by --s), the
 * tiled pattern band as the desktop letterbox, Hello Bride for the names and
 * Cormorant SemiBold for the lines, in the copy block's two browns.
 *
 * Unlike the PSD-placed `.t` lines this block FLOWS: the parent lines are long
 * ("Grand S/o Mahavir Prasad Agarwal & Sunita Agarwal") and must wrap rather
 * than run off a 390px screen, where only ~887 of the 1080 design px are
 * visible. The 160px side padding keeps the 760px column inside that, with
 * ~28 CSS px to spare at each edge.
 */

#families .scene__backdrop {
  background-image: url('../assets/slide3-pattern.webp?v=1');
  background-size: auto 100dvh;
  background-repeat: repeat-x;
}

.fam {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 160px;
  text-align: center;
  color: var(--c-brown-mid);
}

/* Matches scene 4's kicker: tracked caps in the BROWNaustin stand-in. */
.fam__kicker {
  font-family: var(--font-sans);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.22em;
  text-indent: 0.22em;    /* tracking is trailing-side; re-centre */
  text-transform: uppercase;
  text-wrap: balance;
  margin-bottom: 90px;
}

.fam__side {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Hello Bride swashes overshoot their box, and iOS WebKit clips text ink at
   the box edge while the reveal tween has it composited: pad the box and pull
   the padding back out of the layout (same trick as .hero__name). */
.fam__name {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 150px;
  line-height: 1;
  color: var(--c-brown-deep);
  padding: 0.18em 0.45em 0.12em;
  margin: -0.18em -0.45em 6px;
  white-space: nowrap;
}

.fam__line {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.3;
  color: var(--c-brown-deep);
  text-wrap: balance;
}

.fam__line + .fam__line {
  margin-top: 14px;
  font-size: 38px;
  color: var(--c-brown-mid);
}

.fam__ornament {
  width: 314px;
  height: 60px;
  margin: 80px 0 70px;
}

/* Hidden until js/families.js plays the reveal. The section itself is
   `hidden` until the scratch reveal, so a no-JS reader never sees this. */
.fam [data-animate] { opacity: 0; }