/* ============================================================
   SECTION 8 — CAP PERSONALIZATION
   Desktop: heading + sub top-left with the body copy beneath it (left
   column), the scattered-caps shot in the right column. Mobile stacks in DOM
   order — heading + sub, then the photo, then the body copy underneath it.
   ============================================================ */
.caps-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 5svh, 48px);
}
.caps-title { margin-top: 0; }
/* undo .hero-sub's desktop white-space:nowrap so this subheading may wrap */
.caps-sub { white-space: normal; }
.caps-body {
  display: flex;
  flex-direction: column;
  gap: 0.85em;
  max-width: 46ch;
}
/* same muted body copy as the transparency section's paragraphs */
.caps-body p {
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--text-muted);
}
.caps-figure { width: 100%; }
/* Still-life stage: one box reserving the original photo's 883x615 ratio,
   each cap cutout absolutely positioned inside it at its photographed spot.
   js/caps-scatter.js only ever touches each .cap-piece's own transform. */
.caps-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 883 / 615;
}
/* js/caps-scatter.js writes these four custom properties per piece, on each
   cap's own independent schedule — never a shared/looping keyframe, so the
   five caps never visibly synchronize. Deliberately NO transition: the
   stop-motion feel comes from the script jumping the transform in discrete
   ~150ms frames, so any CSS easing here would smooth away exactly the
   photographed-frame quality we want. */
.cap-piece {
  position: absolute;
  display: block;
  --cap-x: 0px;
  --cap-y: 0px;
  --cap-r: 0deg;
  --cap-s: 1;
  transform: translate3d(var(--cap-x), var(--cap-y), 0) rotate(var(--cap-r)) scale(var(--cap-s));
  will-change: transform;
}
@media (min-width: 768px) {
  .caps-grid {
    display: grid;
    grid-template-columns: minmax(0, min(540px, 48%)) 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "head figure"
      "body figure";
    column-gap: clamp(40px, 6vw, 96px);
    row-gap: var(--space-fluid-tight);
    align-items: center;
    text-align: left;
  }
  /* query container for the shared --type-headline token's cqw term
     (css/tokens.css) — see hero.css's matching comment. */
  .caps-head { grid-area: head; align-self: end; container-type: inline-size; }
  .caps-body { grid-area: body; align-self: start; }
  .caps-figure { grid-area: figure; }
  /* 20% larger — grows into the gutter/gap, stays within the viewport.
     Scaling the whole scene (not each piece) keeps every cap's photographed
     position/proportion identical to mobile, just zoomed in together. */
  .caps-scene { transform: scale(1.2); }
}
/* short/landscape viewport (see hero.css's matching query) — .caps-sub
   shares the .hero-sub class, whose OWN landscape rule (hero.css) shrinks
   it to clamp(15px,3.4vh,18px). Per request this subheading should read at
   the same size/weight as the membership eyebrow ("The more you're with us,
   the more you get") instead — that element never got its own landscape
   shrink (it's still the un-shrunk hero-sub-style formula from before that
   tuning pass), so match it literally rather than inventing a new value.
   Equal specificity to hero.css's `.hero-sub` rule (single class each) —
   this file loads later, so it wins. */
@media (min-width: 768px) and (max-height: 600px) {
  .caps-sub { font-size: min(clamp(19px, 2.6svh, 23px), 3.4vw); }
}