/* Human Thread carousel for the Canopy page. Page scroll moves the cards sideways.
   Everything is scoped to .canopy-carousel; the one html rule only exists while the section is on screen. */
.canopy-carousel { --ccar-top:86px; --ccar-h:max(540px,min(700px,calc(100svh - var(--ccar-top) - 70px))); --ccar-w:min(1100px,88vw); position:relative; margin-block:clamp(24px,4vw,56px); }
.ccar-track { position:relative; height:calc(100svh * 3.6); }
.ccar-pin { position:sticky; top:var(--ccar-top); height:calc(100svh - var(--ccar-top)); display:grid; grid-template-rows:minmax(0,1fr) auto; overflow:clip; padding-bottom:max(10px,env(safe-area-inset-bottom)); }
.ccar-stage { --ccar-gap:clamp(12px,2vw,24px); position:relative; align-self:center; height:min(var(--ccar-h),100%); min-height:0; outline:none; }
.ccar-stage:focus-visible { outline:3px solid #3464cb; outline-offset:-3px; border-radius:26px; }
.ccar-item { position:absolute; top:0; left:50%; width:var(--ccar-w); height:100%; margin-left:calc(var(--ccar-w) / -2); will-change:transform,opacity; }
.ccar-snap { position:absolute; left:0; width:1px; height:1px; scroll-snap-align:start; pointer-events:none; }

/* Mouse wheel pages use Lenis; native snap is available for fine pointers. */
@media (hover:hover) and (pointer:fine) {
  html:not(.lenis):not([data-ccar-touch])[data-ccar-snap] { scroll-snap-type:y proximity; }
}

/* Without the script the four cards simply read one after another. */
.canopy-carousel:not([data-ready]) .ccar-track { height:auto; }
.canopy-carousel:not([data-ready]) .ccar-pin { position:relative; top:auto; height:auto; display:block; overflow:visible; }
.canopy-carousel:not([data-ready]) .ccar-stage { height:auto; display:grid; gap:24px; width:var(--ccar-w); margin-inline:auto; }
.canopy-carousel:not([data-ready]) .ccar-item { position:relative; left:auto; width:100%; height:var(--ccar-h); margin:0; }

@media (max-width:760px) { .canopy-carousel { --ccar-top:76px; --ccar-h:max(580px,calc(100svh - var(--ccar-top) - 64px)); } }