/* ─────────────────────────────────────────────────────────────────
   family-photos.css
   Photography system for the Scalar Family pages.

   Treatment: photographs are "figures" — plates in the drawing set.
   Every photo is grid-locked, hairline-framed, and annotated with a
   mono caption (Fig. 0N · …) so imagery joins the drafting vocabulary
   (section numbers, register marks, spine) instead of floating on it.

   Placement patterns:
     · .hero-fig     — fills the hero's right column, stretched to the
                       height of the copy, caption at its foot.
     · .head-spread  — section heading + lede on the left, figure on
                       the right, cards/steps span full width below.
     · .ci-photo     — full-bleed photograph across the top of the
                       navy capture card.
   ───────────────────────────────────────────────────────────────── */

/* ── base figure ── */
.fig { margin: 0; }
.fig .fig-frame {
  position: relative;
  border: 1px solid var(--hairline-strong);
  background: var(--paper-dark);
  overflow: hidden;
}
.fig .fig-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
img[src$="multigen.jpg"] { object-position: center 38%; }
img[src$="family-kitchen.jpg"] { object-position: center 18%; }
.fig .fig-frame::after {
  /* registration corner tick, echoing the illustration frames */
  content: ''; position: absolute; right: 9px; bottom: 9px;
  width: 10px; height: 10px;
  border-right: 1.5px solid rgba(236, 230, 217, 0.9);
  border-bottom: 1.5px solid rgba(236, 230, 217, 0.9);
  pointer-events: none;
}
.fig .fig-cap {
  display: flex; align-items: center; gap: 9px;
  margin-top: 11px;
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.fig .fig-cap::before { content: ''; width: 18px; height: 2px; background: var(--clay); flex: 0 0 18px; }
.fig .fig-frame img { transition: transform 600ms cubic-bezier(.22,.61,.36,1); }
.fig:hover .fig-frame img { transform: scale(1.025); }
@media (prefers-reduced-motion: reduce) {
  .fig .fig-frame img { transition: none; }
  .fig:hover .fig-frame img { transform: none; }
}

/* ── hero figure ── */
.hero-fig { display: flex; flex-direction: column; justify-content: center; }
.hero-fig .fig-frame { width: 100%; }   /* aspect-ratio set inline per photo so the full frame shows */
@media (max-width: 1150px) {
  .hero-fig { max-width: 560px; margin-top: 8px; }
}

/* ── head spread ── */
.head-spread {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  gap: 24px 56px; align-items: start;
}
.head-spread .hs-copy { min-width: 0; }

/* flipped spread — figure leads on the left for editorial rhythm */
.head-spread--flip { grid-template-columns: 400px minmax(0, 1fr); }
.head-spread--flip .hs-copy { order: 2; }
.head-spread--flip .fig { order: 1; }

@media (max-width: 960px) {
  .head-spread, .head-spread--flip { grid-template-columns: 1fr; }
  .head-spread .fig { max-width: 520px; }
  .head-spread--flip .hs-copy { order: 1; }
  .head-spread--flip .fig { order: 2; }
}

/* ── capture-card photo ── */
.cap-info .ci-photo { margin: -40px -38px 28px; }
.cap-info .ci-photo img { width: 100%; aspect-ratio: 2.02 / 1; object-fit: cover; display: block; }