/* me-notes-pyramid: three beats (top, heart, base). 1rem = 10px (Dawn).
   Default (mobile, desktop without motion, pin turned off, reduced motion): stages in flow, a thin rule between them,
   each stage reveals on its own via data-me-reveal (me-motion.css). Desktop >= 1024px with motion: me-motion.js adds
   .is-pinned to [data-me-pin]; ScrollTrigger pins the inner grid for one screen and the stages share one grid cell,
   GSAP driving opacity/transform inline. Only opacity and transform ever animate. */
.me-pyramid__inner { display: grid; gap: 4.8rem; }
.me-pyramid__head { max-width: 56rem; }
.me-pyramid__eyebrow { margin: 0 0 2rem; }
.me-pyramid__heading { margin: 0; text-wrap: balance; }
.me-pyramid__intro { margin: 2rem 0 0; max-width: 40ch; }
.me-pyramid__intro p { margin: 0; line-height: 1.5; }
.me-pyramid__intro p + p { margin-top: 1.2rem; }
.me-pyramid__stages { list-style: none; margin: 0; padding: 0; display: grid; }
.me-pyramid__stage { margin: 0; padding: 3.2rem 0; border-top: 1px solid rgba(var(--color-foreground), 0.16); }
.me-pyramid__stage:last-child { border-bottom: 1px solid rgba(var(--color-foreground), 0.16); }
.me-pyramid__label { margin: 0 0 1.6rem; }
.me-pyramid__notes { list-style: none; margin: 0; padding: 0; font-family: var(--font-heading-family); font-weight: var(--me-weight-heading-light); font-size: clamp(2.8rem, 2.4vw + 1.6rem, 4rem); line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
.me-pyramid__note { margin: 0; }
.me-pyramid__caption { margin: 1.6rem 0 0; font-size: 1.5rem; line-height: 1.5; }
.me-pyramid__media { display: none; }
.me-pyramid--empty .me-pyramid__editor-note { margin: 0; padding: 2.4rem; border: 1px dashed rgba(var(--color-foreground), 0.35); }

@media screen and (min-width: 750px) {
  .me-pyramid__stage { padding: 4rem 0; }
}

@media screen and (min-width: 1024px) {
  .me-pyramid__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(4.8rem, 6vw, 9.6rem); align-items: start; }
  .me-pyramid__head { position: sticky; top: clamp(8rem, 12vh, 14rem); }
  /* Capped so eyebrow, heading, intro and image fit below the header at 1024 x 700. */
  .me-pyramid__media { display: block; margin-top: 2.4rem; aspect-ratio: 4 / 5; max-height: max(12rem, calc(100svh - 38rem)); overflow: hidden; }
  .me-pyramid__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .me-pyramid__stage { padding: 4.8rem 0; }

  /* Pinned: one screen, three beats. The stages keep their rows and build up top to bottom (heart appears under top,
     base under heart) while the previous beat dims; nothing overlaps. GSAP sets opacity/visibility/transform inline,
     so the reveal transition is switched off here and the first stage is simply visible (its entry is a scrubbed tween). */
  /* The sticky header is 88 px, so the frame starts just below it. */
  /* The pinned frame brings its own top space, so the section's would leave an empty band on the way in. */
  .me-pyramid:has(.is-pinned) { padding-top: 0 !important; }
  .me-pyramid__inner.is-pinned { box-sizing: border-box; min-height: 100vh; min-height: 100svh; padding-top: 11.2rem; align-items: start; }
  .me-pyramid__inner.is-pinned .me-pyramid__head { position: static; }
  .me-pyramid__inner.is-pinned .me-pyramid__stage { padding: clamp(1.6rem, 3vh, 4rem) 0; transition: none; will-change: transform, opacity; }
  .me-pyramid__inner.is-pinned .me-pyramid__stage:first-child { opacity: 1; transform: none; }
  .me-pyramid__inner.is-pinned .me-pyramid__notes { font-size: clamp(2.8rem, min(2.6vw + 1.2rem, 5vh), 4.8rem); }
}

@media (prefers-reduced-motion: reduce) {
  .me-pyramid__inner, .me-pyramid__inner.is-pinned { min-height: 0; }
  .me-pyramid__inner.is-pinned .me-pyramid__stage { will-change: auto; }
  .me-pyramid__stage { opacity: 1 !important; transform: none !important; visibility: visible !important; }
}