/* ============================================================
   SECTION 5 — BUILT BY MOTHERS
   Heading on top, then a row underneath it: on desktop the statement copy
   sits on the LEFT and the photograph on the RIGHT (the photo is a column,
   not full-bleed), on the page's own white background — no scrim, no
   overlay. Mobile stacks: heading, copy, then the photo.
   ============================================================ */
.story-grid {
  display: flex;
  flex-direction: column;
  /* query container for the shared --type-headline token's cqw term
     (css/tokens.css) — the title here spans the full wrap width (not a
     narrow copy column like Hero/Transparency/Membership), so cqw
     resolves against that full width and is effectively a generous
     no-op ceiling, same role as a plain vw fallback would play for a
     centered headline. */
  container-type: inline-size;
}
.story-title { margin-bottom: clamp(20px, 3.5svh, 40px); }

.story-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-fluid-standard);
}
.story-statement {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.4svh, 22px);
}
/* same supporting-copy style as the transparency sub ("Trust starts long /
   before the bottle") — the shared .hero-sub treatment: muted, weight 400,
   line-height 1.5, sized off the same clamps (desktop size set below). */
.story-statement p {
  font-weight: 400;
  font-size: clamp(21px, 5.2vw, 25px);
  color: var(--text-muted);
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.story-statement p.emphasis { font-weight: 500; }

.story-photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* L3 — the photograph floats like a framed print under the same warm light */
  filter: var(--shadow-float);
}
.story-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the group stands centre-frame; cover keeps all five in shot */
  object-position: center;
}

@media (min-width: 768px) {
  /* stays inside the standard content container; the photo takes ~3/4–4/5
     of that content width, with a slim copy column to its left */
  .story-row {
    display: grid;
    grid-template-columns: minmax(0, 22%) 1fr;
    gap: clamp(24px, 3vw, 48px);
    align-items: center;
  }
  /* align-self:start pins the copy to the top of the row instead of the
     vertical centre the row's align-items:center would give it */
  .story-statement { gap: clamp(16px, 2.6svh, 26px); align-self: start; }
  .story-statement p { font-size: min(clamp(19px, 2.6svh, 23px), 3.4vw); }
  /* width:90% keeps the frame 10% narrower than its column, right-aligned so
     it stays flush with the content's right edge. Landscape 3:2 ratio (wider
     than tall); object-fit:cover shows the group without stretching,
     object-position:bottom keeps heads → feet in frame. */
  .story-photo-frame { aspect-ratio: 3 / 2; width: 90%; justify-self: end; }
  .story-photo { object-position: center bottom; }
}
/* short/landscape viewport (see hero.css's matching query) — the frame's
   height is purely width-driven (aspect-ratio:3/2), so on a very wide,
   short screen it renders far shorter than usual relative to the source
   photo; bottom-anchoring (the normal desktop crop) then crops well into
   the group's heads instead of just trimming excess floor below their
   feet. Anchor to the top here instead so the group stays in frame. */
@media (min-width: 768px) and (max-height: 600px) {
  .story-photo { object-position: center top; }
  /* the frame's height is purely width-driven the rest of the time
     (aspect-ratio:3/2 off a %-of-column width), which never shrinks for
     a short viewport — width tracks the column, not the available
     height. Invert it here: set height off vh instead and let width
     derive from the same aspect-ratio, so the photo actually gets
     smaller on a short screen instead of dominating it edge to edge. */
  .story-photo-frame { width: auto; height: clamp(180px, 55vh, 380px); }
  /* .story-row's shared align-items:center (desktop rule) vertically
     centred the now-shorter frame inside the row's own height (set by
     the TALLER text column) instead of pinning it to the top the way
     every other short-viewport image fix in this pass does. */
  .story-row { align-items: start; }
  /* the statement text/gaps were sized off svh (2.6svh), but at this
     height that's already below their own clamp floors (16px / 19px) —
     they were never actually shrinking here, just sitting at their
     desktop-tier minimum regardless of how short the viewport gets.
     Explicit vh-based sizing with a real, lower floor for this
     breakpoint specifically. */
  .story-title { margin-bottom: clamp(10px, 2.5vh, 16px); }
  .story-row { gap: clamp(14px, 3vh, 22px); }
  .story-statement { gap: clamp(6px, 1.6vh, 12px); }
  .story-statement p { font-size: clamp(13px, 3.8vh, 17px); }
}