Pinned Card Stack

A series of cards each position: sticky to the top, offset by an increasing distance so they stack visibly. Reading the page feels like flipping through a deck — each card stays put long enough to be read, then the next one slides over it.

Anatomy:

• A wrapper containing the card series
• Each card is position: sticky with an inset-block-start that grows by a per-card increment (via a --i custom property)
• margin-block-end on each card creates the scroll distance before the next one arrives
• Reduced-motion lifts the sticky behaviour entirely

• The --i trick lets you add cards without writing per-card CSS. Use inline style or a small nth-child rule for the index.
• Tune margin-block-end to control how long each card has on screen before being covered. 50vh is a comfortable default.
• No overflow: hidden on the stack — same caveat as any sticky pattern.
• Native CSS, zero JavaScript, zero scroll listeners. position: sticky has been broadly supported since 2017.