/* /playground */

.page-playground .page-title--playground {
  font-family: 'Edict Display', Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 24px 0 clamp(48px, 7vh, 88px);
}

.pg-galleries {
  display: block;
}

/* Space between galleries — controls the gap from one shell's bottom
   to the next shell's counter + eyebrow */
.pg-shell.hero-cards-fan-shell--experiments {
  margin-top: clamp(56px, 8vh, 104px);
  margin-bottom: 0;
}

/* Counter is an inline <span> inside .pg-eyebrow — it always sits
   immediately before the title text regardless of wrapping. */
.pg-counter {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 13px;
  white-space: nowrap;
  vertical-align: middle;
  pointer-events: none;
}

/* Gallery title — left-aligned to the card edge, wraps for long titles.
   translate:none cancels the base rule's scroll-driven rise (irrelevant
   on the playground page where each gallery has its own fixed position). */
.pg-eyebrow.hero-fan-eyebrow {
  top: calc(var(--card-top) + 18px);
  left: calc(50% - var(--card-w) / 2);
  transform: none;
  translate: none;
  font-size: clamp(22px, 2.6vw, 38px);
  letter-spacing: -0.018em;
  line-height: 1.15;
  white-space: normal;
  opacity: 1 !important;
  pointer-events: none;
}

/* Portrait image galleries: taller cards to suit 4:5 images */
.pg-shell[data-kind="images"].hero-cards-fan-shell--experiments {
  --card-h: calc(var(--card-w) * 1.05);
}

/* Mobile — swap fan for swipeable stack ────────────────────────────── */
@media (max-width: 600px) {
  /* Reset the full-bleed shell to normal document flow so it takes up
     space correctly and IntersectionObserver sees it reliably. */
  .pg-shell.hero-cards-fan-shell {
    width: auto;
    left: auto;
    margin-left: 0;
    margin-right: 0;
    margin-top: 48px;
    margin-bottom: 0;
  }

  /* Gallery title: out of absolute positioning, left-aligned.
     Counter is inline inside it, so no separate reset needed. */
  .pg-eyebrow.hero-fan-eyebrow {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    translate: none;
    text-align: left;
    font-size: clamp(20px, 5.5vw, 28px);
    opacity: 1 !important;
    margin: 0;
  }

  /* Tighten the stack's own top margin since counter + eyebrow
     sit above it in normal flow. */
  .pg-shell .pg-stack {
    margin-top: 16px;
    margin-bottom: 16px;
  }

  /* Portrait image galleries: no override needed on mobile — the stack
     uses --stage-aspect set per gallery by JS. */
  .pg-shell[data-kind="images"].hero-cards-fan-shell--experiments {
    --card-h: initial;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pg-shell { transition: opacity 200ms ease; filter: none; transform: none; }
}