/* Genesis lineup: five arched portraits rise, then the U opens out of the lead frame onto a group photo.
   Markup: section[data-lineup] > [data-sc-stage].lu with .lu__group, .lu__scrim, .lu__row > .lu__p (lead: .lu__p--lead), .lu__head, .lu__end. */
/* ---------- the lineup: five arches rise, then the U opens into one team ---------- */
.lu { overflow: hidden; background: #E3D9CC; --m: 0; }
.lu__head { position: absolute; z-index: 3; left: var(--sc-gutter); top: calc(var(--sc-9) + 0.5rem); max-width: 40rem; }
.lu__head { display: grid; gap: var(--sc-4); }
.lu__head :is(h1, h2) { margin: 0; }
.lu__head .sc-body { margin: 0; max-width: 32rem; }
/* lead frame geometry, shared with the group window so the team opens out of Diana's frame */
.lu { --lw: min(21vw, 22rem); --lb: 6vh; }
.lu__row {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: var(--lb);
  display: flex; justify-content: center; align-items: flex-end; gap: 1.4vw; padding-inline: var(--sc-gutter);
}
.lu__p { margin: 0; width: min(17vw, 17rem); transform: translate3d(0, calc((1 - var(--r, 0)) * 85vh), 0); opacity: calc(1 - var(--m) * 3); }
.lu__p:nth-child(even) { margin-bottom: 7vh; }
.lu__p--lead { width: var(--lw); opacity: calc(1 - var(--m) * 1.6); }
.lu__p .u-frame { aspect-ratio: 4 / 5; box-shadow: 0 24px 50px -30px rgba(42, 30, 22, 0.5); }
.lu__p figcaption { position: absolute; margin-top: var(--sc-2); width: 100%; font-size: var(--sc-t-xs); letter-spacing: 0.08em; color: var(--sc-ink-soft); text-align: center; }
.lu__p--lead { position: relative; }
.lu__group {
  --k: calc(1 - var(--m));
  position: absolute; inset: 0; z-index: 1; opacity: min(1, calc(var(--m) * 6));
  clip-path: inset(calc((100vh - var(--lb) - var(--lw) * 1.25) * var(--k)) calc((50vw - var(--lw) / 2) * var(--k)) calc(var(--lb) * var(--k)) calc((50vw - var(--lw) / 2) * var(--k)) round 0 0 calc(var(--lw) / 2 * var(--k)) calc(var(--lw) / 2 * var(--k)));
}
.lu__group img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 26%; transform: scale(calc(1.1 - 0.1 * var(--m))); }
.lu__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--m);
  background: linear-gradient(to top, rgba(22, 15, 10, 0.82), rgba(22, 15, 10, 0.5) 26%, transparent 46%); }
.lu__end { z-index: 4; color: #FBF6EF; display: grid; gap: var(--sc-3); }
.lu__end h3 { margin: 0; font-family: var(--sc-font-display); font-weight: 300; font-size: var(--sc-t-3xl); line-height: 1; color: #FBF6EF; }
.lu__end .textlink { color: #FBF6EF; font-size: var(--sc-t-base); }
.after-pin { padding-top: var(--sc-7); }
@media (max-width: 760px), (max-width: 1180px) and (orientation: portrait) {
  /* row sits high, right under the heading, with bigger portraits: no empty band between words and faces */
  .lu { --lw: 64vw; --lb: 19vh; }
  .lu__head { top: calc(var(--sc-8) + 1.5rem); right: var(--sc-gutter); }
  .lu__row { gap: 0; }
  .lu__p { width: 54vw; margin-inline: -12vw; }
  .lu__p:nth-child(even) { margin-bottom: 5vh; }
  .lu__p--lead { z-index: 2; }
  .lu__p figcaption { display: none; }
  .lu__group img { object-position: 50% 30%; }
}
@media (prefers-reduced-motion: reduce) { .lu__group { clip-path: none; opacity: var(--m); } }