/* =====================================================================
   ROUND 7 · before/after as a sideways rail (as in the dark build)
   ===================================================================== */
.faces2 { padding: 0; }
.faces2::before { display: none; }
.faces2__stage { display: flex; align-items: center; background: var(--greige); }
.faces2__rail { gap: clamp(14px, 2vw, 28px); padding: 0 var(--gut); align-items: center; }
.faces2__lead { flex: 0 0 min(28rem, 78vw); display: grid; gap: 16px; padding-right: 2vw; }
.faces2__lead p:last-child { color: var(--soft); font-size: 1.08rem; line-height: 1.55; max-width: 30ch; }
.fpair { flex: 0 0 auto; width: min(44rem, 84vw); margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 8px; border-radius: var(--r); background: var(--white); box-shadow: 0 26px 46px -30px rgb(60 44 28 / 0.55); }
.fpair__img { position: relative; aspect-ratio: 3 / 4; max-height: 66svh; overflow: hidden; border-radius: 2px; background: #E2DBD0; }
.fpair__img img { width: 100%; height: 100%; object-fit: cover; max-width: none; display: block; }
.fpair__img span { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 2px; font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; background: rgb(246 243 238 / 0.92); color: var(--text); }
.fpair__img + .fpair__img span { background: var(--acc); color: #F7F2EC; }
/* each pair settles as it arrives: rises, straightens, and the "after" half opens */
@media (prefers-reduced-motion: no-preference) {
  .fpair { --k: clamp(0, calc(var(--sc-p, 0) * 7.5 - var(--i) * 1.15 + 0.4), 1);
    opacity: calc(0.45 + var(--k) * 0.55);
    transform: translateY(calc((1 - var(--k)) * 40px)) rotate(calc((1 - var(--k)) * 3deg)); }
  .fpair__img + .fpair__img { clip-path: inset(0 calc((1 - var(--k)) * 100%) 0 0); }
}
@media (max-width: 860px) {
  .faces2__lead { flex-basis: 80vw; }
  .fpair { width: 88vw; padding: 6px; }
  .fpair__img { max-height: 54svh; }
}
@media (prefers-reduced-motion: reduce) {
  .faces2 { height: auto !important; padding-block: clamp(56px, 8vw, 110px); }
  .faces2__stage { position: static !important; height: auto !important; overflow-x: auto; }
  .faces2__rail { transform: none !important; }
}