/* =====================================================================
   CTFY · Midnight Theta · Testimonials (/testimonials/) — page layer
   Spec: docs/redesign/pages/33-testimonials.md. Builds on css/site.css and css/modules.css.
   Chapters: I dark media hero (H7) · II porcelain story wall (M13 "Wall card") + consent note · bridge M30 · III finale M17.
   The wall: CSS columns (3 / 2 / 1) so reading order = DOM order; an inline script (end of the page) tags each
   card with its column (data-col), drives the entrance, the desktop-only parallax (transform only) and the
   centre-of-viewport light-up. Without the script, with motion off or reduced motion: static, full opacity.
   ===================================================================== */

#stories,#share{scroll-margin-top:96px}

/* ---------- II · Story wall ---------- */
.tw{padding-bottom:clamp(40px,5vw,72px)}
.tw-wall{list-style:none;margin:0;padding:0 0 clamp(48px,6vw,96px)}   /* bottom room for the staggered columns */
.tw-card{--off:0px;--py:0px;translate:0 var(--off);transform:translate3d(0,var(--py),0)}
.tw-card[data-col="1"]{--off:48px}
.tw-card[data-col="2"]{--off:80px}
.tw-card__media::after{display:none}                               /* no name overlay: attribution sits under the quote */
.tw-card:nth-child(even) .tw-card__media{aspect-ratio:1/1}
.tw-card .tw-quote{opacity:1;font-size:calc(var(--t-title) * 1.2 * var(--k-display))}
.tw-card .m-story__mark{margin-bottom:6px}
.tw-card .tw-who{text-transform:none;letter-spacing:0;font:400 calc(var(--t-small) * var(--k-text))/1.5 var(--font-sans);color:var(--ink-3)}
.tw-card .tw-quote p+p{margin-top:.6em}
.tw-note{margin-top:clamp(8px,2vw,24px)}

/* motion-on states (class added by the page script only when motion is on) */
.tw-ready .tw-card{transition:opacity var(--dur-reveal,700ms) var(--ease-out),translate var(--dur-reveal,700ms) var(--ease-out);transition-delay:var(--sd,0ms)}
.tw-ready .tw-card:not(.is-in){opacity:0;translate:0 calc(var(--off) + 18px)}
.tw-ready .tw-card .tw-quote{opacity:.7;transition:opacity 600ms var(--ease-out)}
.tw-ready .tw-card.is-lit .tw-quote{opacity:1}
@media (hover:hover){.tw-ready .tw-card:hover .tw-quote{opacity:1}}

@media (max-width:1023px){.tw-card[data-col]{--off:0px}.tw-card{transform:none}}
@media (max-width:639px){.tw-card:nth-child(even) .tw-card__media{aspect-ratio:4/5}}

/* ---------- Bridge on paper ---------- */
.tw-bridge{padding-top:0}
.tw-bridge .m-bridge__line{max-width:24ch}

/* ---------- Reduced / off ---------- */
@media (prefers-reduced-motion:reduce){.tw-card{transform:none;translate:none!important;opacity:1!important}.tw-card .tw-quote{opacity:1!important}}
html[data-motion="off"] .tw-card{transform:none;opacity:1!important;translate:0 var(--off)!important;transition:none}
html[data-motion="off"] .tw-card .tw-quote{opacity:1!important}

/* ---------- Hero panel: air between the crumb chip and the eyebrow ---------- */
.hero__panel .crumbs{margin-bottom:20px}

/* ---------- Hero media fills its frame (H7 with a plain <picture>, no film wrapper) ---------- */
.hero--media .hero__media picture{display:contents}
.hero--media .hero__media img{display:block;width:100%;height:100%;object-fit:cover}