/* ==========================================================================
   Photography — the brand band and the section figures.

   Every image sits in a frame that clips it, and the image inside is a
   little larger than its frame so it can drift as the page scrolls. The
   drift is written to --py by the scroll handler; the reveal is a clip on
   the frame so the picture wipes in rather than fading.
   ========================================================================== */

/* ── section figures ─────────────────────────────────────────────────── */

.shot{ margin:0 0 clamp(30px,4vw,48px); }
.shot-frame{
  position:relative; overflow:hidden;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:var(--bg-3);
  aspect-ratio:1/1;
  clip-path:inset(0 round var(--r-lg));
}
.shot-frame img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.07) translate3d(0, var(--py, 0px), 0);
  will-change:transform;
}
:root[data-theme="night"] .shot-frame img{ filter:brightness(.74) saturate(.86); }

/* every photograph is square, so the set reads as one family */
.shot-square .shot-frame{ aspect-ratio:1/1; }

/* a section heading with its picture beside it */
.sec-split{
  display:grid;
  grid-template-columns:1fr minmax(260px, 380px);
  gap:clamp(28px,4vw,64px);
  align-items:center;
  margin-bottom:clamp(32px,4vw,52px);
}
.sec-split .sec-head{ margin-bottom:0; }
.sec-split .shot{ margin:0; }

/* the reveal: the frame opens from the bottom while the picture settles */
.shot.reveal{ opacity:1; transform:none; }
.shot.reveal .shot-frame{
  clip-path:inset(18% 0 0 0 round var(--r-lg));
  transition:clip-path 1.05s var(--ease);
}
.shot.reveal .shot-frame img{ transition:transform 1.2s var(--ease); }
.shot.reveal.is-in .shot-frame{ clip-path:inset(0 0 0 0 round var(--r-lg)); }


/* audience: the picture sits above the list, both in the second column */
.aud-side{ display:grid; gap:18px; align-content:start; }
/* keep every photograph at roughly the same size across the page */
.aud-side .shot{ margin:0; max-width:400px; }

@media (max-width:1040px){
  .sec-split{ grid-template-columns:1fr; gap:26px; }
  /* on one column the picture would otherwise tower over the text */
  .sec-split .shot{ max-width:420px; }
}

@media (prefers-reduced-motion:reduce){
  .shot-frame img{ transform:none !important; }
  .shot.reveal .shot-frame{ clip-path:inset(0 round var(--r-lg)); transition:none; }
  .shot.reveal .shot-frame img{ transition:none; }
}