<!-- ============================================================
SCROLLYSTICKYSTEPS
A sticky image beside scrolling text cards.

TO USE:
1. Paste ScrollyCore once near the top of the Squarespace page.
2. Paste this block where you want one image to stay in place while text scrolls.
3. Replace the image URL.
4. Update the image alt text and caption.
5. Change the labels, titles, and body text in each step.
6. Add or remove step cards as needed.

GOOD FOR:
- explaining one image over several beats
- walking through a concept
- slowing the reader down
- anchoring a metaphor
- showing several meanings inside one visual

BEGINNER KNOBS:
- The image lives in .sticky-visual
- The text cards live in .steps
- Each .step becomes active as it enters the viewport
- data-step-group keeps this set of steps grouped together
- Keep class="active" on the first step so the section has a starting state
- Add more steps by copying one <article class="step">...</article>
============================================================ -->

<section class="sticky-section">
  <div class="sticky-grid" data-step-group>

    <!-- ============================================================
    LEFT SIDE: STICKY IMAGE
    ============================================================ -->

    <figure class="sticky-visual fade-in">
      <img
        src="https://images.unsplash.com/photo-1516321497487-e288fb19713f?auto=format&fit=crop&w=1400&q=80"
        alt="Describe the image for screen readers"
      />

      <figcaption class="caption">
        Optional caption: this image stays in place while the text cards scroll.
      </figcaption>
    </figure>

    <!-- ============================================================
    RIGHT SIDE: SCROLLING STEPS
    ============================================================ -->

    <div class="steps">

      <article class="step active">
        <div class="section-label">
          Sticky step one
        </div>

        <h3>
          The image stays put.
        </h3>

        <p>
          This is useful when one image, diagram, or metaphor needs several paragraphs of explanation.
        </p>
      </article>

      <article class="step">
        <div class="section-label">
          Sticky step two
        </div>

        <h3>
          The text moves beside it.
        </h3>

        <p>
          Each card can explain a different part of the same visual while the reader keeps the image in view.
        </p>
      </article>

      <article class="step">
        <div class="section-label">
          Sticky step three
        </div>

        <h3>
          This creates pacing.
        </h3>

        <p>
          The reader has time to sit with the visual while the meaning unfolds step by step.
        </p>
      </article>

    </div>
  </div>
</section>